/*	This is used when you are making a website with individual css for each page
	NOTE: Use the master css for any items that you want to be constant throughout the website
*/
#sidebar{display: flex;}
.picNav{text-align: center;overflow: hidden;position: relative; font-family: 'Quicksand', sans-serif;}
.picNav .navImg{display: block;}
.picNav img{width: 100%;height: auto;}

.picNav .picNav-content{display: block;width: 100%;height: 614px;position: absolute;top: 0;left: 0;z-index: 2;transition: all 0.3s ease 0s;}
.picNav:before,.picNav:after,.picNav .picNav-content:before,.picNav .picNav-content:after{content: "";width: 25%;height: 614px;background: linear-gradient(to bottom,#ffffff,rgba(255,255,255,0.2),transparent,rgba(255,255,255,0.7),#ffffff); position: absolute; top: 0;left: 0; opacity: 0; transition: all 0.3s ease-in-out 0s;}
.picNav:before{top: -100%;left: -25%;}
.picNav:after{ left: 50%; }
.picNav .picNav-content:before{display: block; left: 25%; }
.picNav .picNav-content:after{top: 100%;left: 100%;}
.picNav:hover:before{opacity: 1;top: 0;left: 0;}
.picNav:hover:after{opacity: 1;left: 25%;transition-delay: 0.1s;}
.picNav:hover .picNav-content:before{opacity: 1;left: 50%;transition-delay: 0.1s;}
.picNav:hover .picNav-content:after{opacity: 1;top: 0;left: 75%;}
.picNav .inner-content{text-align: left; position: absolute;bottom: 10px;z-index: 1;padding: 15px; right: 30px; bottom: 30px;}
.picNav .navtitle{display: block; color: #ffffff !important;margin: 0 0 5px 0; transition: ease-in 0.3s; font-size: 1.5em; text-transform: uppercase;}
.picNav:hover .navtitle{color: #000000 !important;}
.picNav .info{display: block; color: #ffffff; transition: ease-in 0.3s; padding: 15px 0 15px 0; display: block;}
.picNav:hover .info{color: #000000;}
.infoButton{background: #e5bf5f; padding: 10px; display: inline-block; color: #000000;  transition: ease-in 0.3s;}
.infoButton:hover{}

#homeIconWrap{display: flex; justify-content: space-between; align-items: center;flex-wrap: wrap;}
#homeIcon{text-align: center;}

.secBox3{background:url('/users/admin/home/idealBg2.jpg') center top fixed no-repeat #969696; padding: 90px 0; color: #ffffff;}
.secBox3 h2{color: #ffffff; }
.secBox3 .secTxt{max-width:1200px; margin: auto; text-align: justify;padding: 0px 20px;}

#homeSec1{display: inline-block; vertical-align: middle; width: 48%; margin: 0 20px 0 0;}
#homeVideo{display: inline-block; vertical-align: middle; width: 48%;}
#homeVideo iframe{height: 315px;}

.tablewrapper{ font-size: 0.9em !important; margin: auto; text-align: center;}
.ResortWrapper{display: inline-block; width: 20%; vertical-align: top; }
.ResortType{display: inline-block; margin: 20px 10px; }
.AccomWrapper{display: inline-block; width: 70%; vertical-align: top;}
.AccomType{display: inline-block; margin: 20px 10px; }
.FacilityWrapper{display: inline-block;}
.Facilities{display: inline-block; width: 15%; vertical-align: top; margin: 5px; }

#afriStaySec1{display: inline-block; width: 48%; vertical-align: middle; margin: 0 20px 0 0;}

@media screen and (max-width:1800px){
    .picNav .inner-content{bottom: 60px;}
}

@media screen and (max-width:1700px){
    .picNav .inner-content{bottom: 100px;}
}

@media screen and (max-width:1600px){
    .picNav .inner-content{bottom: 160px;}
}

@media screen and (max-width:1400px){
    .picNav .navtitle{font-size: 1.2em;}
    .picNav .inner-content{bottom: 200px;}
    .picNav:before,.picNav:after,.picNav .picNav-content:before,.picNav .picNav-content:after{background: linear-gradient(to bottom,#ffffff,rgba(255,255,255,0.2),transparent,rgba(255,255,255,0.9),#ffffff);}
}

@media screen and (max-width:1300px){
    .picNav .inner-content{bottom: 240px;}
    .picNav .navtitle{font-size: 1em;}
}


@media screen and (max-width:1200px){
    .picNav .inner-content{bottom: 270px; right: 0;}
}

@media screen and (max-width:1100px){
    .picNav .inner-content{bottom: 300px; right: 0;}
    .picNav:before,.picNav:after,.picNav .picNav-content:before,.picNav .picNav-content:after{background: linear-gradient(to bottom,#ffffff,rgba(255,255,255,0.5),transparent,rgba(255,255,255,0.9),#ffffff);}
    
}

@media screen and (max-width:1000px){
    .picNav .inner-content{bottom: 240px; }
    #sidebar{flex-wrap: wrap; justify-content: center;}
    .picNav .navImg{height: 400px;}
    .picNav:before,.picNav:after,.picNav .picNav-content:before,.picNav .picNav-content:after{height: 400px;}
    .picNav{width: 50%;margin-bottom: 0 !important;}
    .ResortWrapper{width: 100% !important; }
    .AccomWrapper{ width: 100% !important;}
    .Facilities{margin: 10px !important; }
    .AccomType{display: inline-block; margin: 0px 10px 10px 0 !important;  width: 25%; vertical-align: top;}
}

@media screen and (max-width:900px){
  .picNav{ margin-bottom: 30px; }  
  #homeSec1{display: block; width: auto; margin: 0 auto 20px;}
  #homeVideo{display: block; width: auto;}
  #homeVideo iframe{height: 500px;}
  .picNav{width: 95%; margin: 10px auto 10px;}
}

@media screen and (max-width:800px){
   #homeVideo iframe{height: 400px;} 
   .secBox3 .secTxt{text-align: left;}
   #afriStaySec1{display: block; width: auto;margin: auto;}
   #afriStaySec2{display:block; width:auto; margin: auto; text-align: center;}
}

@media screen and (max-width:700px){
    
}

@media screen and (max-width:600px){
  #homeVideo iframe{height: 320px;}  
}

@media screen and (max-width:500px){
    #homeIconWrap{display: block; justify-content: center; text-align: center; margin: auto;}
    #homeVideo iframe{height: 230px;}
    #homeIcon{margin: 30px auto 20px;}
    
}

@media screen and (max-width:400px){
    
}

@media screen and (max-width:360px){
  .tablewrapper{ font-size: 0.7em !important; }  
}