*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}

#body{   
      
   background-color: beige;
    
    }

    .containergrid{

        
        height:100%;    /*  instead of vh & vw it affects the responsiveness "media query while setting the main-menu to none"*/
        width:100%;
        display: grid;
        grid-template-areas: 
         "header header header header"
         "mainsection mainsection mainsection  sidecontent " 
         "mainsection mainsection mainsection  sidecontent2" 
         "footer footer footer footer";
        grid-template-columns:repeat(4 1fr); 
        grid-template-rows:0.2fr 1.8fr 1.8fr 0.2fr;
        grid-gap:3px; 
        /*background-image: url(images/BG\ \(3\).jpg); 
        background-size: cover;  */
        }
        
        .header{
          
            grid-area: header;
            position:sticky;
            top:0px;
            left:0px;
            background-image: url(images/BG\ \(1\).jpg);
            background-size: cover;
           }
        
        .mainsection{
 
           grid-area: mainsection;
           margin: 5px;
           position:relative; 
           z-index: -1;
           width: 100%; /*to check animated text   it hides the side menu*/ 
            
        }
        .sidecontent{
         
         
            padding-top: 17px; 
            padding-left: 12px;
            grid-area: sidecontent;
            margin: 10px; 
             /*  background-color: rgb(84, 211, 95);  border: solid 5px;*/
            
         }
         .sidecontent2{
        
           padding: 10px;
           grid-area: sidecontent2;
           margin: 10px; 
           position:relative;
           margin-top: -0.5rem; 
           background-image: url(images/ibex.png);
           opacity:0.8;
           z-index: -1;
           /*  background-color:rgba(13, 13, 92, 0.5);  border: solid 5px; */
        
         }
        
        .footer{
            background-color: rgba(11, 15, 5, 0.8);
            grid-area: footer;
            text-align: center;
            padding-top:11px;
            
        }
    .nav-side svg{
                position:relative;
                top:22px;
                left:11px;

            }   
    
     .navbar h1{
        position: absolute;
        right:15px;
        top: 25px;
        font-size: 2em;
        text-decoration: solid;
        color: rgb(117, 86, 38);    /*color and font family */
        font-family: Georgia, 'Times New Roman', Times, serif;
        text-shadow:0 0 5px #c7e0c3, 0 0 25px #c7e0c3, 0 0 50px #c7e0c3, 0 0 200px #c7e0c3;
         
        
       /* margin-top: 17px;   */
     }
    
    .main-men{

      margin-left:15%;
      margin-top:-1.5rem;  
      
         }
    
    .main-men li{
        
        list-style:none;
        display: inline-block;
        line-height: 21px;  
        margin-right:7rem;
         
        }
    
    .main-men li a{
        font-family:Arial, Helvetica, sans-serif;
        float:left;
        display:block; 
        color: #f2f2f2;
        text-align: center;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 33px;
        text-shadow: burlywood;
        font-weight:700;
        }  
    
    .main-men li a:hover{
      background-color: rgb(189, 197, 194);
      color: #111;
      font-size: 33px;
      border-radius: 5%;
    }
    
    .side-nav{

        height:100%;
        width:0px; 
        position:fixed;
        z-index:1;
        top: 0px;
        left: 0px;
        background-color: #111;
        opacity:0.9;
        padding-top: 23px;
        overflow-x: hidden;
        transition: 0.5ms;
       } 

    .side-nav .close-btn{
        text-decoration: none;
        color: #ac4b4b;
        position:absolute;                 /* the position of the close sign inside side menu*/
        top:0px;
        right: 22px;
        font-size:35px;
        margin-left: 51px;
    
        }


    .side-nav ul{
        margin-left: 3px;
       } 
    
    
    .side-nav a:hover{
    
        color:rgb(158, 230, 116);
        font-size: 31px;
    }
    .side-nav .close-btn:hover{
    
        color:rgb(158, 230, 116);
        font-size: 39px;
    }
    
    
                                  
   /* #main{
     transition:margin-left 0.5s;
     width:100%;
     height: 100%;
     padding :20px; 
     
    }   */
img{

    height:100%;
    width: 100%;
}
    /*--------------------------------------------------------  slide show animation -------------------*/

.slider-frame{

    overflow: hidden;
    height:auto;
    width: 1200px;;
  /*  margin-top:20px;
    margin-left:360px; */
    background-color: aquamarine;
    border: double rgb(82, 82, 112) 5px;
    border-radius: 3%;
}

@-webkit-keyframes slide_animation{

  0%{left:0px;}
  10%{left:0px;}
  20%{left:1200px;}
  30%{left:1200px;}
  40%{left:2400px;}
  50%{left:2400px;}
  60%{left: 3600px;}
  70%{left: 3600px;}
  80%{left: 2400px;}
  90%{left: 1200px;}
  100%{left: 0px;}

}

.slider-images{

  width: 7200px;
  height: 800px;
  margin: 0 0 0 -3600px;
  position: relative;
  -webkit-animation-name: slide_animation;
  -webkit-animation-duration: 38s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;

   }

.img-container{

height:800px;
width:1200px;
position: relative;
float: left; 
}
/*-------------------------------------*/
       
 .hob{

    list-style: none;
    margin-left: -55px;

    }
    
    .hob li{
        display: block;
        
        }
    .hob li a {
            text-decoration: none;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 25px;
            display: block;
            padding: 10px 10px 10px 31px;
            color: cornsilk;
            transition:0.5s;
    }  
    .hob li a i{
    
     float: left;
     padding-right:35px;
       
    }

    
.sociallist{
    list-style: none;
    /*background-color:none; */
    text-align: center;
    margin-top: 30px;
    margin-left: -21px;
     
    
    }
    
    .sociallist li{
        padding-right: 10px;
        display:inline-block;
    }
    .sociallist li a{
        text-decoration: none;
        font-size: 31px;
    
    }
    
    .fa-brands{
    
        color: #7adbec;
    }
    .reference{
        text-decoration: underline;
        }

    .ReferenceLinks{
         
        list-style: circle;
        display:grid;
        margin:15px;
        
    }
    .ReferenceLinks li{
        padding: 7px;
        float: inline-start; 
    }
    .ReferenceLinks li a{
    
      font-size: larger;
    }
      
    .img{

       height:100%;
       width:100%;
        
    }

    .mainImage{
     
         border-radius:3%;
         
    }

    .horizontalline{

        width:100%;
        font-weight:300;
    }
  /*
    .headerImage{

        height:199px;
        width:100%;
    }
/*
    .mainsection h1{

         font-size: 2.5rem;
         font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial;
         text-decoration: wavy;
         text-align: center;
         margin-top: 1rem;

    }   */

    .sideTitle{

        text-align: center;
        font-size: 3rem;
        font-family:Georgia, 'Times New Roman', Times;
        font-weight: 300;
        color: #382669;
        text-shadow: #ac4b4b;
        margin:1.5%;
    }

    .sideparagraph{

      text-align:justify;
      font-size: 1.3rem;
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
      color: #bb2828;
      letter-spacing: 1.5px;

    }

.sideContentent2Header{

    font-size: 1.8rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana;
    text-align: center;  
   /* text-decoration: underline; */
    margin:1.2rem;
    color:rgb(21, 21, 85);
}


.addressList{

     list-style-type: none;
     margin-top:55%;
     background-color: rgba(250, 235, 215, 0.551);        /*update on adress section background, border radius  change padding to margin*/
     border-radius: 5%;
     padding-left: 1rem;
}



.addressList li{

    padding-top:3px;
}

.addressList li p{

    font-size:1.1rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS';
    /*text-align: center; */
    font-weight: bolder;
}
 
.sidecontainer{

  height:100%;
  width: 100%;
 display:grid;

 grid-template-areas: 
 " mapSection addressSection"
 " mapSection addressSection";
 grid-template-columns: repeat(2 1fr); 
 grid-template-rows:0.25fr 1fr;
 grid-gap:1rem;

}

.addressSection{


    grid-area:addressSection;
  /*   margin-bottom: 1.5rem;*/
}
     
.mapSection{

    grid-area:mapSection;
   /* background-color: #382669; */
    /* float: left;overflow: hidden; */
    
    
}

.footer p{

    font-family: Georgia, 'Times New Roman', Times;
    color: #817171;

} 


/*

.libre-baskerville-regular {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
  }
  
   
     */
/*--------- Media Queries------- */


@media (max-width:1500px){

     .main-men{display:none;} 
    /* .navbar h1{display:none;}   update */
     .containergrid{
         grid-template-areas:
          "header"
          "mainsection"
          "sidecontent"
          "sidecontent2" 
          "footer" ;
          grid-template-columns: 1fr;
          grid-template-rows:0.2fr 1.5fr 1.5fr 1.3fr 0.2fr;   
      } 
      
    
 }

@media (max-width:1300px){

    .main-men{display:none;}  /*.main-men li a{font-size:21px;} */
    .containergrid{
        grid-template-areas:
         "header"
         "mainsection"
         "sidecontent"
         "sidecontent2" 
         "footer" ;
         grid-template-columns: 1fr;
         grid-template-rows:0.2fr 1.5fr 1.2fr 1.3fr 0.2fr;   
     } 
     
   
}

@media (max-width:1000px){

    .main-men{display:none;} 
    .navbar h1{display:none;} 
    .containergrid{
        grid-template-areas:
         "header"
         "mainsection"
         "sidecontent"
         "sidecontent2" 
         "footer" ;
         grid-template-columns: 1fr;
         grid-template-rows:0.2fr 1.3fr 1.5fr 1.3fr 0.1fr;   
     } 
     
}


@media (max-width:819px){

    .main-men{display:none;}   /* sets the main menu to none and defines the new structure. */
    .navbar h1{display:none;} 
    .containergrid{
      grid-template-areas:
       "header"
       "mainsection"
       "sidecontent"
       "sidecontent2" 
       "footer" ;
       grid-template-columns: 1fr;
       grid-template-rows:0.2fr 1.3fr 1.5fr 1.3fr 0.1fr;   
      /* .sidecontent{background-image:url(images/ibex.png);} */
   } 
     
}
  
@media (max-width:430px) {  
  
    .navbar h1{display:none;} 
    .addressList{margin-top:1%;}
    .containergrid{
        grid-template-areas:
         "header"
         "mainsection"                                                    /* iphone media query added */
         "sidecontent"
         "sidecontent2" 
         "footer" ;
         grid-template-columns: 1fr;
         grid-template-rows:0.2fr 1.5fr 1.3fr 1.3fr 0.1fr;   
       
     } 


@media (max-width:414px) {  
  
    .navbar h1{display:none;} 
    .containergrid{
        grid-template-areas:
         "header"
         "mainsection"
         "sidecontent"
         "sidecontent2" 
         "footer" ;
         grid-template-columns: 1fr;
         grid-template-rows:0.2fr 1.3fr 1.5fr 1.3fr 0.1fr;   
        /*.sidecontent{background-image: url(images/ibex.png);} */
     } 
       
     .sidecontainer{
       display:grid;
       grid-template-areas: 
       " mapSection"
       "addressSection";
       grid-template-columns:1fr; 
       grid-template-rows:1fr 0.5fr;
       grid-gap:1rem;
      
      }
      .addressList{padding-top:0%;}
}

 /*
 
@media screen  and(orientation:landscape) and (max-width:893px){
    .main-men{display:none}   
    .containergrid{
      grid-template-areas:
       "header"
       "mainsection"
       "sidecontent"
       "sidecontent2" 
       "footer" ;
       grid-template-columns: 1fr;
       grid-template-rows:0.4fr 1.7fr 1.2fr 1.3fr 0.2fr;    
   } 
}


@media (orientation:potrate){
    .main-men{display:none}   
    .containergrid{
      grid-template-areas:
       "header"
       "mainsection"
       "sidecontent"
       "sidecontent2" 
       "footer" ;
       grid-template-columns: 1fr;
       grid-template-rows:0.4fr 1.7fr 1.2fr 1.3fr 0.2fr;   
   } 
}   */