@media only screen and (max-width: 850px){

    /*Mobile*/
    html{
        font-size: 10px;
        width: 100%;
        height: 100%;
    }


    body {

        padding-bottom: 10px;
        font-family: 'Oswald':sans-serif;
        font-size:1.5rem;
        font-weight: bold;
        color: black;
        width: 100%;
        height: 100%;
    }
     a{
        text-decoration: none;
        color: white;

    }

    a:hover{
        text-decoration: none;
        color: white;
    }
     #navbar{
        width: 100%;
        height: 8%;
        background-color:#212121;;
        
        padding: 1rem;
       
    }
    
     .navI{
        margin-left: 1rem;
        font-size: 1.5rem; 
    }

    .titles{
        font-family: 'Playfair Display',serif;
        font-size: 4rem;
   
    }

    .container-fluid{
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0;
    }
   

     .row{
        width: 100%;
        height: 100%;
        padding: 0px;
        margin:0px;
    }

     [class*="col-"] {
        width: 100%;
        height: 50%;
        padding: 0;
    }
     .col-md-3{
        width: 100%;
        height: 30%;
        padding: 0;
    }

    .jumbotron{
        width: 100%;
        height: 10%;
        margin: 0;
        background-color: white;

    }

    .border1{
        border:none;
        background-color: black;
        height: 0.3rem;
        width: 60%;
    }
    strong{
        margin-left: 10%;
        
    }

    p{
       font-size: 1rem; 
       text-indent: 1rem;
    }

     #footerNavi{
        height: 100%;
        font-size: 1.3rem;
    }

    .titlesA{
        margin-top: 20%;
        font-size: 2rem;
    }
    table{
        width: 100%;
    }
    tr{
        width: 100%;
    }
    td{
        width: 100%;
    }
    img{
        margin-top: 7%;
        width: 100%;    
    }

#map{
        width: 100%;
        height: 100%;
        background-color: tomato;
    }
     

    
}

/*LANDSCAPE*/

@media only screen and (orientation: landscape){    
    html{
        font-size: 10px;
        width: 100%;
        height: 100%;
    }
    body {
        font-family: 'Oswald':sans-serif;
        font-size:1.5rem;
        color: black;
        width: 100%;
        height: 100%;
    }
     img{
        margin-top: 1%;    
    }

   a{
        text-decoration: none;
        color: white;

    }
     a:hover{
        text-decoration: none;
        color: white;
    }


    #navbar{
        width: 100%;
        height: 8%;
        background-color:#212121;;
        font-size: 1px; 
        padding-top:0.5rem;
        padding-bottom:0.5rem;
    }

    .navI{
        margin-left: 1rem;
        font-size: 1.3rem; 
    }

    

    .titles{
        font-family: 'Playfair Display',serif;
        font-size: 3rem;
   
    }
    
    .container-fluid{
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: none;
    }

     .row{
        width: 100%;
        height: 100%;
        padding: 0px;
        margin:0px;
    }


    [class*="col-"] {
        width: 100%;
        height: 100%;
        padding: 0;
    }

      .col-md-3{
        width: 100%;
        height: 40%;
        padding: 0;
    }

     .border1{
        border:none;
        background-color: black;
        height: 0.3rem;
        width: 60%;
    }
    strong{
        margin-left: 10%;
        
    }

 

    p{
       font-size: 1rem; 
       text-indent: 1rem;
   }

    #footerNavi{
         height: 100%;
        
    }
   .titlesA{
        margin-top: 8%;
        font-size: 3rem;
    }

      .jumbotron{
        height: 15%;
        width: 100%;
        margin:0;
    }
   

}



/*DESKtOP*/
@media only screen and (min-width: 850px) {

    html{
        font-size: 10px;
        width: 100%;
        height: 100%;
    }

    body {
       font-family: 'Oswald',sans-serif;
       font-size: 2rem;
       color:black;
       width: 100%;
       height: 100%;
       background-color: white;

    }

    a{
        text-decoration: none;
        color: white;
    }
    a:hover{
        color: white;
        text-decoration: none;

    }

    #navbar{
        width: 100%;
        height: 7%;
        background-color: #212121;; 
        padding: 1%;
       
        color: white;

    }
    .navI{
        margin-left: 2rem;
        font-size: 1.8rem;
    }

    #apply{
        float: right;

    }

     .container-fluid{
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: none;
    }

    .container{
        
        background-color: white;
    }

     .row{
        width: 100%;
        height: 100%;
        padding: 0px;
        margin:0px;
        
    }

    [class*="col-sm"] {
        height: 100%;
        padding: 0;
        background-color: white;
        color: black;
        border-bottom:  5px solid #B71C1C;

    }

     .border1{
        border:none;
        background-color: black;
        height: .4rem;
        width: 40%;
    }


    .boom:hover{


                transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        
    }
    .boom{
           transition: transform .2s; /* Animation */
                          
            margin: 0 auto;
    }
    

    p{
       font-size: 2rem; 
       text-indent: 2rem;

    }

    .titlesA{
        font-family: "Playfair Display",serif;
        margin-top: 12%;
        font-size: 3rem;
    }
       
   strong{
        margin-left: 10%;
        font-size:1.2rem;    
        
    }
    #footerNavi{
        height: 42%;
        
        background-color: #212121;  
    }

    tr{
        width: 100%;
    }

    #map{
        width: 100%;
        height: 60%;
        background-color: tomato;
    }
 
  .jumbotron{
        height: 15%;
        width: 100%;
        margin:0;
        background-color: white;
        border-radius: 0px;
    }
   

    


}