@media only screen and (min-width: 481px)
{

    body{
        font-family: 'Roboto Slab', sans-serif;
        background-image: url(Images/south-loop.jpg);
        background-size: 100%, cover;
        background-repeat: no-repeat;
        background-color: rgb(241, 239, 239);
        
    }

    .Mobil{
        display: none;
    }

    .MT{
        display: none;
    }

    .Topmenu{

        display: flex;
        flex-direction: row;
        justify-content: center;
        position: fixed;
        width: 100%;
        height: 8%;
        z-index: 2;
    }

    .B{
        position: fixed;
        left: 550px;

    }

    .A{
        position: fixed;
        left: 940px;

    }


    .banM{
        position: fixed;
        width: 100px;
        left: 740px;
        

    }

    .C{
        position: fixed;
        left: 1150px;
        text-decoration: none;
        color: white;
        font-size: 25px;
        border: none;
        transition: 0.3s;
        text-align: center;
          margin-top: 1%;

    }

    .C a{
        
        color: white;
       

    }

    .C:hover {
            
        background-color: rgb(61, 61, 61);
        
        }

    .dropbtn
    {
    color: goldenrod;
  font-size: 25px;
  border: none;
  transition: 0.3s;
  text-align: center;
    margin-top: 1%;

    }

    .dropdown {
        position: relative;
        display: inline-block;
        transition: 0.7s;
        z-index: 2;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 2;
        transition: 0.7s;
      }

      .BB{
        position: fixed;
        left: 550px;
        margin-top: 46px;
        z-index: 2;
      }

      .AA{
        position: fixed;
        left: 940px;
        margin-top: 46px;
        z-index: 2;
      }

      .dropdown-content a {
        transition: 0.7s;
          color: rgb(0, 0, 0);
          padding: 12px 16px;
          text-decoration: none;
          display: block;
        }


        .dropdown-content a:hover {

            background-color: rgb(247, 173, 36);
            
            }
            
            .dropdown:hover .dropdown-content 
            {
            transition: 0.7s;
            display: block;
            
            
            }
            
            .dropdown:hover .dropbtn {
            
            background-color: rgb(61, 61, 61);
            
            }
        

.Logo{
justify-content: center;
width: 100%;
}

.Title{
position: absolute;
top:145%;
left: 42%;
font-size: 50px;
text-align: center;
color: rgb(0, 0, 0);

}

.ban{
width: 25%;
margin-left: 38%;
}

.Sum
{
width: 60%;
margin-left: 20%;
font-size: 30px;
justify-content: center;
text-align: center;
color: #f1f1f1;



}


.Menu
{
    margin-top: 30%;
    margin-bottom: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    opacity: 0%;


}

.Menu a
{
    font-size: 40px;
    color: rgb(255, 255, 255);
    margin: 5%;
    text-align: center;
    transition: 0.3s;

    


}

.Menu a:hover {
    margin-top: 3%;
    color: #f1f1f1;
    
    
  }

.Box{
    position: relative;
    display: flex;
    flex-direction: column;
 height: 100%;
 margin: 1%;
transition: 0.5s;
}

.Box:hover{
    margin-top: 5%;
    transition: 0.5s;

}

  .circle{
    
    bottom: 320px;
    position: absolute;
    height: 300px;
  width: 350px;
  background-color: #975757;
  border-radius: 100%;

  }

  .Q{
    background-image: url(Images/questiion-mark.gif);
    background-size: 100%, cover;
  }

  .G{
    background-image: url(Images/sam-g.gif);
    background-size: 100%, cover;
  }

  .AR{
    background-image: url(Images/city-sam.gif);
    background-size: 200%, cover;
    background-repeat: no-repeat;
  }

  .Brief{
    margin-top: 50%;


  }

  .Btext{
    margin-top: 5%;
    color: whitesmoke;
    font-size: 20px;

  }

  .sqaure{
    display: flex;
    flex-direction: column;
    height: 480px;
    width: 350px;
    background-color: #555;

  }

.fadeInTop{
    -webkit-animation: fadeInTop 1.2s both;
    -moz-animation: fadeInTop 1.2s both;
    -o-animation: fadeInTop 1.2s both;
    animation: fadeInTop 1.2s both;


}

@keyframes fadeInTop {
0%{
opacity: 0;
transform: translateY(-50px);

}

100%{
    opacity: 1;
    transform: translateY(0);
    
    }

}





}







/*moblil*/





@media only screen and (max-width: 481px)
{
    body{
        font-family: 'Roboto Slab', sans-serif;
        background-color: rgb(243, 239, 239);
        background-size: cover;
       
        background-repeat: no-repeat;
        
       
    }

    .Backg{
        background-image: url(Images/south-loop.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .Topmenu{
        display: none;
    }
.W{
display: none;

}

    .Topbar{
        top: 0%;
        justify-content: center;
        position: fixed;
        width: 100%;
        height: 8%;
        z-index: 2;
    }

    .icon{
        position: fixed;
        display: block;
      width: 13%;
      margin-left: 75%;
      top: 0%;
      
      
      }

      .overlayMenu {
        height: 100%;
        width: 100%;
        display: none;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.9);
        animation: fadeInAnimation ease 0.5s;
      }

      @keyframes fadeInAnimation {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
         }
    }
      
      .overlay-content {
        position: relative;
        display: flex;
        flex-direction: column;
        top: 15%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
      
      .overlayMenu a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
        margin-top: 8%;
      }
      
      .overlayMenu a:hover, .overlay a:focus {
        color: #f1f1f1;
        margin-right: 5%;
      }
      
      .overlayMenu .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
      }


      .dropbtn
      {
      color: white;
      font-size: 36px;
    border: none;
    transition: 0.3s;
    text-align: center;
      margin-top: 10%;
      cursor: pointer;
  
      }

      .dropbtn2
      {
      color: white;
      font-size: 36px;
    border: none;
    transition: 0.3s;
    text-align: center;
      margin-top: 10%;
      cursor: pointer;
  
      }
  
      .dropdown2 {
          position: relative;
          display: inline-block;
          transition: 0.7s;
          
        }
  
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content2 {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            margin-left: 20%;
        }
  
  
        .dropdown-content a {
          transition: 0.7s;
            color: rgb(0, 0, 0);
            padding: 12px 16px;
            text-decoration: none;
            display: block;
          }

          .dropdown-content2 a {
            transition: 0.7s;
              color: rgb(0, 0, 0);
              padding: 12px 16px;
              text-decoration: none;
              display: block;
            }
  
  
          .dropdown-content a:hover {
  
              background-color: rgb(247, 173, 36);
              
              }

              .dropdown-content2 a:hover {
  
                background-color: rgb(247, 173, 36);
                
                }
              
    
              
              .dropdown2:hover .dropbtn {
              
              background-color: rgb(61, 61, 61);
              
              }

              .dropdown2:hover .dropbtn2 {
              
                background-color: rgb(61, 61, 61);
                
                }
          
              .show {display: block;}      
  

    .banM{
        top:0%;
        position: fixed;
        width: 80px;
        
        

    }

    .Title{
        font-size: 50px;
        text-align: center;
        color: whitesmoke;
        
        }

.MT {
color: #000;

}



.Logo{
    
justify-content: center;
width: 100%;
margin-top: 5%;
}

.ban{
width: 50%;
margin-left: 25%;
}


.Sum
{
font-size: 18px;
justify-content: center;
text-align: center;
color: #f1f1f1;
margin-bottom: 50%;



}

.Menu
{
    overflow-x: auto;
    overflow-y: hidden;
  white-space: nowrap;
 height: 100%;
 width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;



}

.Menu a
{
    font-size: 30px;
    color: rgb(73, 73, 73);
    margin-top: 5%;
    text-align: center;
    transition: 0.3s;
    


}

.Menu a:hover {
    color: #f1f1f1;
    margin-left: 50px;
  }

  .Box{
    position: relative;
    display: flex;
    flex-direction: column;
 height: 80%;
 margin: 3%;
transition: 0.5s;
top: 23%;
}

.MBox{
   margin-left: 12%;
}

.Box:hover{
    margin-top: 5%;
    transition: 0.5s;

}

  .circle{
    
    bottom: 320px;
    position: absolute;
    height: 300px;
  width: 350px;
  background-color: #975757;
  border-radius: 100%;

  }

  .Q{
    background-image: url(Images/questiion-mark.gif);
    background-size: 100%, cover;
  }

  .G{
    background-image: url(Images/sam-g.gif);
    background-size: 100%, cover;
  }

  .AR{
    background-image: url(Images/city-sam.gif);
    background-size: 200%, cover;
    background-repeat: no-repeat;
  }

  .Brief{
    margin-top: 50%;


  }

  .Brief a{
    font: 5px;


  }

  .Btext{
    margin-top: 10%;
    color: whitesmoke;
    font-size: 20px;
    text-wrap: wrap;
    width: 100%;
    
  }

  .sqaure{
    display: flex;
    flex-direction: column;
    height: 480px;
    width: 350px;
    background-color: #000000;

  }



  .fadeInTop{
    -webkit-animation: fadeInTop 1.2s both;
    -moz-animation: fadeInTop 1.2s both;
    -o-animation: fadeInTop 1.2s both;
    animation: fadeInTop 1.2s both;


}

@keyframes fadeInTop {
0%{
opacity: 0;
transform: translateY(-50px);

}

100%{
    opacity: 1;
    transform: translateY(0);
    
    }

}






}