body { padding: 0; margin: 0; font-family: 'Raleway', sans-serif; font-size: 17px; line-height: 34px; }
* { box-sizing: border-box; }
.body-content { max-width: 1200px; margin: 0 auto;  }

footer { clear: both; height: 600px; width: 100%; background-color: #fff; line-height: 30px; text-align: left; }

.base-header { height: 123px; border-top: 12px solid #ff9800; border-bottom: 1px solid black; background-color: #39394e; }

#Marwood-luxury-villas { clear: both; width: 100%; background-color: #fff;  display: block; }
#luxury-villas-showcasing { background-color: #ffeacc; clear: both; width: 100%; padding: 70px;  }
#Banner { width: 100%; background-color: #fff; padding: 80px; color: #000; text-align: center; line-height: 60px;  }

#Accomodation { background-color: #ffeacc;  }
#accButton, input[type="Submit"] { background-color: #ff7200; color: #fff; border: none; font-weight: 700; padding: 20px 40px 20px 40px; cursor: pointer; }
#Testimonials { background-image: url("images/testimonials.jpg");  width: 100%; text-align: center; padding: 110px; color: #fff; }
#luxury { background-color: #ffeacc; width: 100%; clear: both; padding: 70px; line-height: 34px; }
#outsideImage { width: 80%; }
#grampians { padding: 70px; width: 100%; clear: both; background-color: #fff; }
#roomVilla { padding: 50px; padding-top: 60px; background-color: #fff; text-align: center;    }
#headerBase { line-height: 600px; color: #fff; font-weight: bold; font-size: 40px; position: relative;  padding-left: 50px; background-image: url("images/Environment04-1024x682.jpg"); background-size: cover; }
#aboutBase { background-image: url("images/about.jpg"); height: 550px; position: relative; }
#ratesBase { background-image: url("images/about.jpg"); height: 550px; position: relative; }
#contactBase { background-image: url("images/about.jpg"); height: 550px; position: relative; }
#activitiesBase { background-image: url("images/Panorama2med.jpg"); height: 500px;  }

#boldFont { cursor: pointer; font-weight: bold;   }
#aboutLinks { color: #ff7200; text-decoration: none; }
.triBoxes { width: 100%; text-align: center; background-color: #fff; }
.fade-bottom{position:relative;animation:animatebottom 0.4s}

@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
#villaPick { height: 550px; line-height: 40px;  }
#roomInclusion { background-color: #ffeacc; padding: 30px; width: 100%; clear: both; }
input[type="text"], textarea { width: 90%; padding: 5px; margin: 10px; }
textarea { height: 150px; resize: none; }
#LuxuryVillas { padding: 80px; clear: both; width: 100%; background-color: #fff; }

#videoSection {  z-index: -99;  width: 100%;  }
#Getaway { width: 100%; background-color: #f2f2f2; text-align: center; line-height: 32px; font-size: 21px;  }
#circle { border-radius: 50%; }

#rates { margin-top: 550px; }
.rateWindow { margin: 15px; border: 2px solid #f1f1f1; }
.rateHead { background-color: #ff9800; height: 50px; color: #fff; width: 100%; padding: 10px; text-align: center; }
.rateButton { padding: 10px;  text-align: center; border-top: 2px solid #f1f1f1; }
.rateDay { padding: 10px;  text-align: center; border-top: 2px solid #f1f1f1; }
.ratePrice { padding: 10px;  text-align: center;  }

hr { width: 40%; text-align: center; }

.yellowWindow { width: 325px; display: inline-block; background-color: #fffdeb; margin: 10px; padding: 10px; }
video {  width: 100vw;   top: 0; left: 0; }
.div-header { font-size: 55px;  }
.div-subheader {  clear: both; width: 100%; font-size: 32px; font-weight: 400; }
.div-head-menu { clear: both; width: 100%; text-align: center; font-weight: 400; font-size: 25px; }
.div-content { font-size: 17px; line-height: 34px; color: #000; }
.squeeze { width: 70%; margin: 0 auto; font-size: 17px; line-height: 34px; text-align: center; }
.lightGrey { background-color: #dae4df; line-height: 30px; padding: 30px; }
.darkGrey { background-color: #3b3e47; color: #fff; margin-top: 30px; }
.hyperOrange { color: #ff9800; line-height: 48px; font-size: 24px; text-decoration: none; display: inline-block; }
.hyperBlack { line-height: 48px; font-size: 24px; text-decoration: none; color: #000;  display: inline-block; }
.col-2, .col-3, .col-4, .wide, .narrow, .firstBox, .secondBox, .thirdBox, .fourthBox { display: inline-block; vertical-align: top; }
.col { width: 100%; clear: both; }
.col-2, .firstBox, .secondBox, .thirdBox, .fourthBox { width: 47%;  }
.col-3 { width: 30%; }
.col-4 { width: 24%; }

.wide { width: 75%; }
.narrow { width: 20%; }

.pad-50 { padding:  45px  0 45px 0; }
.pad-30 { padding: 30px; }
.pad-10 { padding: 10px; }
.pad-80 { padding: 80px; }
.pad-top { padding-top: 50px; }
.pad-top-120 { padding-top: 120px; }
.pad-top-180 { padding-top: 180px; }
.pad-top-160 { padding-top: 160px; }
.pad-top-85 { padding-top: 85px; }
.pad-top-bottom-40 { padding: 40px 0 40px 0; }
.pad-bottom-30 { padding-bottom: 30px; }
#dottedHR  {
    width: 100%;
    border: 6px dotted #ff7200;
    border-style: none none dotted; 
    color: #fff; 
    background-color: #fff;
}

.fourthBox { padding-top: 50px; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.smallFont { font-size: 11px; font-style: italic; font-weight: 400; }
.medFont { font-size: 14px; }
.bottom { font-size: 70px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #333; opacity: 0.6; color: #fff; font-weight: 700; padding: 2rem;  }

iframe { border: 0; }

.image-box { position: relative; margin: auto; overflow: hidden; margin: 50px; }
.image-box img { transition: all 0.9s; display: block; width: 100%; height: auto; transform: scale(1); }
.image-box:hover img { transform: scale(1.1); }
.resButton { padding: 15px; background-color: #ff7300; color: #fff; border: 0; width: 250px; margin: 80px; cursor: pointer; }

.div-bended { background-color: #eee; border-left: 2px solid orange;  }
.yellowback { background-color: #fffdeb; margin: 10px; padding: 15px; line-height: 40px;  }
.offyellowback { background-color:#ffeacc; line-height: 30px; }
.panel-group{margin-bottom:20px}
.panel-group .panel{margin-bottom:0;border-radius:4px}
.panel-group .panel+.panel{margin-top:5px}
.panel-group .panel-heading{border-bottom:0}
.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}
.panel-group .panel-footer{border-top:0}
.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}
.panel-default{border-color:#ddd}
.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}
.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}
.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}
.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}
.panel-primary{border-color:#337ab7}
.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}

.fishing { background-image: url("images/fishing.jpg"); }
.golf { background-image: url("images/golf.jpg"); }
.tennis { background-image: url("images/tennis.jpg"); }
.Pavilions { background-image: url("images/PavillionExterior04.jpg"); background-size: cover; margin: 9px; }
.Villa { background-image: url("images/Panorama4med.jpg"); background-size: cover; margin: 9px; }

.activeWindow {  border: 1px solid; text-align: center; }
.activeTitle { color: #fff; text-transform: uppercase; letter-spacing: 2px; line-height: 50px; font-weight: 700; height: 50px; margin-top: 420px; text-align: center; background-color: #333; opacity: 0.6; }
.activeWindow:hover { background-color: #333; opacity: 0.6; }

.img-container { height: 100vh;  overflow: hidden; position: relative; width: 100vw; }
.img-container img { height: 100%; left: 0; object-fit: cover; object-position: center; opacity: 0; position: absolute; top: 0; width: 100%; z-index: -1; }
.img-container img.next { opacity: 1; z-index: 1; }
.img-container img.prev { opacity: 1; z-index: 2; }
.img-container img.fade-out { opacity: 0; transition: visibility 0s .5s, opacity .5s linear; visibility: hidden; }
.emptyBox { background-color: #fff; height: 100px; width: 100%; }

.info-box:hover { background-color: #fff4e5; color: #000;  }
.info-box__content { display: none; }
.info-box__title:hover { background-color: #fff4e5; color: #ffc107; }
.info-box { border: 1px solid #ffc107; padding: 5px; font-size: 18px; }

.contact-box:hover {   }
.contact-box__content { display: none; padding: 20px 0 20px 0; }
.contact-box__title:hover {  color: #ffc107; }
.contact-box { border-bottom: 1px solid #e1e1e1; padding: 5px; font-size: 18px; }



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

    #aboutName, #ratesName, #contactName, #activitiesName { font-size: 25px; width: 60%; text-align: center; }
    #aboutBase, #ratesBase, #contactBase, #activitiesBase { height: 300px; }

    .firstBox { display: none; }
    body { overflow-x: hidden; }
    #Testimonials { height: 500px; padding: 30px; }
    #circle { width: 100px; height: 100px; }
    .squeeze { width: 100%; }
    #luxury-villas-showcasing { padding: 5px;  } 
    .mobile { position: fixed; }
    #Banner { padding: 5px; }
    .banner-subheader { font-size: 14px; font-weight: bold; }
    .vmPlayer { max-width: 99%; margin: 0 auto; }
    #videoSection { margin-top: 50px; }
    video {  height: auto;  top: 50px; left: 0; }
    .col-2, .col-3 {  display: block; width: 95%; margin: 0 auto;   }
    .activeWindow {  border: 1px solid; text-align: center; }
    .activeTitle { color: #fff; text-transform: uppercase; letter-spacing: 2px; line-height: 50px; font-weight: 700; height: 50px; margin-top: 420px; text-align: center; background-color: #333; opacity: 0.6; }
    .activeTitle:hover { margin-top: 0; }

    .pad-top-180, .pad-top-160 { padding: 0; }
    .image-box { width: 90%; margin: 10px;  }
    .div-header { font-size: 28px; }
    .div-subheader { font-size: 16px; font-weight: bold; padding: 12px; }
    #Marwood-luxury-villas, .div-content { display: block; }

    .secondBox { display: block; width: 100%; padding: 15px; } 
    .thirdBox { width: 100%;  }
    .fourthBox { width: 100%; margin: 0 auto; padding: 10px; }
    
    #Getaway { padding: 5px; }
}

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

    video { height: auto; }
}