/*	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
*/
#hdrImg{ background:#ffffff url("/styles/stylesets/202007waterbergwilderness/images/hdr2.jpg") no-repeat center top; transition: 0.5s;}
#fancybox_7{padding: 0px 0 30px 0;}

#ratesWrap{display: flex;}
#rates{width: 48%;}

.tablewrapper{ font-size: 0.9em !important; margin: auto; text-align: center;}
.ResortWrapper{display: inline-block; width: 100%; 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; }

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

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

@media screen and (max-width:1000px){
    #hdrImg{background:#ffffff url("/classes/timthumb.php?w=1000&h=500&zc=1&q=85&src=/styles/stylesets/202007waterbergwilderness/images/hdr2.jpg")  no-repeat center top;}
    .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){
    #team{width: 90%;}
    
}

@media screen and (max-width:800px){
    #hdrImg{background:#ffffff url("/classes/timthumb.php?w=800&h=350&zc=1&q=75&src=/styles/stylesets/202007waterbergwilderness/images/hdr2.jpg") no-repeat center top;}   
    
}

@media screen and (max-width:700px){
    #awardsWrap{flex-wrap: wrap;}
    #awards{margin: 10px 20px; width: 30%;}
    .secBox2{height: 500px; margin: 40px 0 0 0;}
    
}

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

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

@media screen and (max-width:400px){
    #teamWrap{flex-wrap: wrap;}
    #team{padding: 10px 0 10px;flex-wrap: wrap; width: 90%;}
    #teamImg{width: 50%; margin: auto;}
    #teamText{width: 100%;}
    
}

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