/*	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
*/
.tablewrapper{ font-size: 0.9em !important;margin: 30px auto 0; text-align: center;}
.ResortWrapper{display: inline-block; width: 30%; vertical-align: top; }
.ResortType{display: inline-block; margin: 20px 5px; }
.AccomWrapper{display: inline-block; width: 55%; 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; }

.ActivityWrapper{margin: 30px 0 0 0;}
.ActivityWrap{display: inline-block; vertical-align: top; width: 33%}
.AttractionWrap{display: inline-block; vertical-align: top; width: 33%}
.MoreAttractionsWrap{display: inline-block; vertical-align: top; width: 33%}

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

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

@media screen and (max-width:1000px){
    .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){
    .ActivityWrap{display: block; width: 100%;}
    .AttractionWrap{display: block;width: 100%;}
    .MoreAttractionsWrap{display:block;width:100%;}  
}

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

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

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

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

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

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