@media only screen and (min-width:320px) and (max-width:420px){
    
#nav{
height: 18vh;
    
}
.clg{
height: auto;
width: 300px;
}

#maindiv{
width:85vw;
height: 72vh;
margin-bottom: 10vh;
    
}
label h3{
font-size: medium;
}

input{
width: 200px;
height: 40px;
}
#btn{
font-size: medium;
}
#btn2{
font-size: medium;
}

.logo{
width: 150px;
height: auto;  
}

#mapbox{
    width: 100vw;
}

#btn2{
    width:110px;
    
}

#btn3{
    width:110px;
    
}

#map{
    width: 90vw;
}

.modal-content {
  
    width: 90vw;
   
  }
#footer div{
height: 10vh;
}
  
}
@media only screen and (min-height:420px) and (max-height:480px){
    

    label h3{
    font-size: small;
    }
    
    input{
    width: 200px;
    height: 35px;
    }
    
    
    .logo{
    width: 125px;
    height: auto;  
    }
    
      
    }

@media only screen and (min-width:420px) and (max-width:520px){
    #nav{
        height: 18vh;
            
        }
        .clg{
        height: auto;
        width: 380px;
        }
        
        #maindiv{
        width:82vw;
        height: 72vh;
        margin-bottom: 10vh;
            
        }
        label h3{
        font-size: medium;
        }
        
        input{
            width: 250px;
            height: 40px;
        }
        #btn{
        font-size: medium;
        }
        #btn2{
        font-size: medium;
        }
        
        .logo{
            width: 200px;
        height: auto;  
        }
        #mapbox{
            width: 100vw;
            
        }

        #btn2{
            width:110px;
            
        }
        
        #btn3{
            width:110px;
            
        }
        
        #map{
            width: 90vw;
        }

        .modal-content {
  
            width: 90vw;
           
          }
        
        #footer div{
        height: 10vh;
        }


    
    

  
}

@media only screen and (min-width:520px) and (max-width:720px){

        
#nav{
    height: 18vh;
        
    }
    .clg{
    height: auto;
    width: 400px;
    }
    
    #maindiv{
        width: 80vw;
        height: 72vh;
        margin-bottom: 10vh;
        
    }
    label h3{
    font-size: medium;
    }
    
    input{
        width: 250px;
        height: 40px;
    }
    #btn{
    font-size: medium;
    }
    #btn2{
    font-size: medium;
    }
    
    #mapbox{
        width: 100vw;
    }

    #btn2{
        width:110px;
        
    }
    
    #btn3{
        width:110px;
        
    }
    
    #map{
        width: 90vw;
    }
    .logo{
    width: 200px;
    height: auto;  
    }

    .modal-content {
  
        width: 90vw;
       
      }
    
    #footer div{
    height: 10vh;
    }
    
   
  
}

@media only screen and (min-width:720px) and (max-width:1200px){


           
#nav{
    height:18vh;
        
    }
    .clg{
    height: auto;
    width: 500px;
    }
    
    #maindiv{
    width:85vw;
    height: 72vh;
    margin-bottom: 10vh;
        
    }
    label h3{
    font-size: larger;
    }
    
    input{
        width: 350px;
        height: 40px;
       
    }
    #btn{
    font-size: larger;
    }
    #btn2{
    font-size: larger;
    }
    
    #btn3{
        font-size: larger;  
    }
    #btn2{
        width:150px;
        
    }
    
    #btn3{
        width:150px;
        
    }
    #mapbox{
        width: 100vw;
    }
    
    #map{
        width: 90vw;
    }
    
    .logo{
    width: 200px;
    height: auto;  
    }

    .modal-content {
  
        width: 90vw;
       
      }
    
    #footer div{
    height: 10vh;
    }


  
}