@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400&family=Roboto&display=swap');
html, body {width:100%; height: 100%; background: #fff; font-size: 100%; font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal; margin: 0 auto; padding:0;}
.clearfix:before,
.clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.logo {text-align:center; padding:14px 12px 0 12px; display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.val2em {font-size:1.25em; margin:0; padding:1px 0 12px 0; font-family: "Barlow", sans-serif; font-weight:300; color:#000; text-align:center;}
.nbutton {padding:0 8px 8px 8px; -webkit-box-sizing:border-box;-moz-box-sizing:border-box; box-sizing:border-box;  }
.c-hamburger {display: block; position: relative; overflow: hidden; margin:0; padding: 0; width: 56px; height: 36px; font-size: 0; text-indent: -9999px; appearance: none;
  box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s; background:none;}
.c-hamburger:focus {outline: none;}
.c-hamburger span {display: block; position: absolute; top: 18px; left: 8px; right: 8px; height: 2px; background: #000;}
.c-hamburger span::before, .c-hamburger span::after {position: absolute; display: block; left: 0; width: 100%; height: 2px; background-color: #000; content: "";}
.c-hamburger span::before {top: -12px;}
.c-hamburger span::after {bottom: -12px;}
.c-hamburger--htx {background-color: none;}
.c-hamburger--htx span {transition: background 0s 0.3s;}
.c-hamburger--htx span::before, .c-hamburger--htx span::after {transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s;}
.c-hamburger--htx span::before {transition-property: top, transform;}
.c-hamburger--htx span::after {transition-property: bottom, transform;}
.c-hamburger--htx.is-active {background-color: none;}
.c-hamburger--htx.is-active span {background: none;}
.c-hamburger--htx.is-active span::before {top: 0; transform: rotate(45deg); background:#000;}
.c-hamburger--htx.is-active span::after {bottom: 0;transform: rotate(-45deg); background:#000;}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {transition-delay: 0s, 0.3s;}

nav {margin:0; font-family: "Barlow", sans-serif; font-weight: 400;  background:#fff; width:100%; height:auto; max-height:0;  display:block; overflow:hidden; font-size:1em;}
nav ul {text-align:left;  margin:0 auto; padding:10px 14px 20px 4px;}
nav ul li {margin:9px 0 0 0; padding:0; list-style:none;}
nav ul li a { display:block; padding:4px 8px; color:#000; text-decoration:none;}
nav ul li a:hover { color:#726656;} 
.selected {padding:4px 8px!important; display:block; color:#726656;}
.subselected {color:#726656;  padding:4px 8px; display:block; cursor:default;}
.smore {padding: 4px 18px 4px 8px; color:#000; cursor:pointer; background: url(../images/arrow12b.png) no-repeat 105px 9px;}
.submenu {padding:10px 4px 0 0;}


.galleriawrap { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0; position:relative; overflow:hidden;}
.galleria {width:100%; margin:0; padding:0; overflow:hidden; }
.galleria img, .deswrap1 img, .deswrap3 img, .grid5 img, .logo img, .grid_cf1 img, .grid14 img, .puzzle img  {max-width:100%; height:auto; vertical-align:top;}
.sidelogo {display:block;   font-style: normal; letter-spacing:1px; background:#146868;  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:2px 12px 60px 12px; text-align:center; color:#fff;} 
.description {width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:10px 0;}
.description h1, .grid1 h3, .grid13 h3, .grid15 h1 {font-family: "Barlow", sans-serif; font-weight: 300; font-style: normal; text-align:center; font-size:2em; color:#564d41; line-height:50px;}
.description h1 span, .grid1 h3 span, .grid15 h1 span {display:block; border-top:1px solid #000; max-width:510px; margin-left:auto; margin-right:auto; font-size:.875em!important; padding-top:4px; margin-top:6px; color:#9b8d79;}
.grid1 h3 span {max-width:600px;} 
.grid3 h2, .grid1s h3, .grid11 h2 {font-family: "Barlow", sans-serif; font-weight: 300; font-style: normal; color:#9b8d79; font-size:1.75em;}
.grid13 h4 {font-family: "Barlow", sans-serif; font-weight: 300; font-style: normal; color:#9b8d79; font-size:1.5em; padding:30px 0 4px 0; margin:0;}
.grid1, .grid1s {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0 12px; transition:all 0.5s ease-out;}
.grid1 p, .grid1s p, .grid3 p, .grid15 p, .beachguide p {line-height:24px; color:#7f8080; }
.deswrap1, .deswrap3 {display:flex;  flex-wrap: wrap; align-items: center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%; padding:10px 0;}
.deswrap3 {padding:10px 0 30px 0;}
.grid7, .grid8, .grid9 {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0 0 10px 0; flex:100%; max-width:100%;}
.grid2, .grid3, .grid4 {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; flex:100%; max-width:100%;}
.grid3 {oredr:0; padding:0 12px 4px 12px;}
.grid2 {order:1; padding:0 0 10px 0;}
.grid4 {order:2;}
.grid5 {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.grid10 {flex:50%; max-width:50%; box-sizing:border-box; padding:0 1px; margin:0 0 2px 0;}
.chdsp {display:none;}
.mg1 {margin-bottom:1px;}
.mg2 {margin-top:1px;}
.gridtree { display:block; text-align:center; padding:50px 0 0 0;}
footer {display:flex;  flex-wrap: wrap; align-items: center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:20px 12px; background:#564d41;}
.gridft1, .gridft2, .gridft3, .gridftlogo {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.gridft1, .gridft2, .gridft3, .gridftlogo {flex: 100%;    max-width: 320px; margin:0 auto; }
.gridft2 {order:1; margin:6px auto 10px auto;}
.gridft1 {order:0;}
.gridft3 {order:2;}
.copyright {order:3; font-family: "Barlow", sans-serif; font-weight: 300; font-style: normal;   color:#fff; text-align:left; padding:10px 0;flex: 100%;   max-width: 320px; font-size:.9375em; margin:6px auto 0 auto;}
.copyright a {color:#ccc; text-decoration:none;}
.gridft1 h4, .gridft3 h4, .gridft2 h4 {font-family: "Barlow", sans-serif; font-weight: 300; font-style: normal;   font-size:1.5em; color:#baaea1; letter-spacing:1px; margin-bottom:0; padding-bottom:4px;}
.gridft1 ul {margin:0; padding:20px 0 0 0; color:#e5e5e5;}
.gridft1 ul li {list-style:none; text-align:left; margin:0 0 10px 0;}
.gridft1 ul li:nth-child(2) {padding:0 0 0 24px; background:url(../images/location.png) no-repeat left 1px;}
.gridft1 ul li:nth-child(4) {padding:0 0 0 24px; background:url(../images/tel.png) no-repeat left 1px;}
.gridft1 ul li:nth-child(5) {padding:0 0 0 24px; background:url(../images/mail.png) no-repeat left 1px;}
.gridft1 p, .gridft3 p, .gridft2 p { line-height:26px; color:#e5e5e5;}
.gridft1 a {color:#baaea1; text-decoration:none;}
.gridftlogo {padding:10px 0 0 10px;}
.gridft2>div img {margin:0 12px 0 0;} 
.deswrap2 {display:flex;  flex-wrap: wrap; align-items: center; position:relative; padding:20px 0 50px 0; max-width:350px; margin:0 auto;  }
.bookdirect {flex:100%; max-width:100%; padding:1px 12px 20px 12px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.bookdirect ul {margin:0; padding:10px 0 0 0; width:100%;}
.bookdirect ul li {list-style:none; margin:0 0 24px 0; display:block; font-family: "Barlow", sans-serif;  font-weight: 400;}
.bcwrap {width:100%; display:flex;  flex-wrap: wrap; align-items: center;}
.bc1 {flex:40px; max-width:40px; }
.bc2 {flex:calc(100% - 40px); max-width:calc(100% - 40px); }
.bookform {flex:100%; max-width:100%; display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;  position:relative; margin:30px 0 0 0; padding:1px 12px; }
.bcheck {padding:0; margin:0; }
.bcheck li {list-style:none; display:inline-block; width:80px; text-align:center; padding:0 0 4px 0;  margin-right:8px; font-family: "Barlow", sans-serif;  font-weight: 300; color:rgb(0, 0, 0);}
.fwrap {display:flex;  flex-wrap: wrap; align-items: center;}
.btn-from, .btn-to {flex:80px; max-width:80px; padding:20px 10px 8px 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;  text-align:center; border:1px solid #564d41; color:#9b8d79; margin:0 5px 0 0; font-family: "Barlow", sans-serif; font-weight:300;}
.btn-check {flex:80px; max-width:80px; margin:0; }
.resubmit {border:none; text-align:center; background:#564d41; font-size:1.0625em; color:#fff;  letter-spacing:1px; cursor:pointer; width:80px; text-align:center; box-sizing:border-box; padding:30px 0; font-family: "Barlow", sans-serif; font-weight:400; line-height:28px;}
.bdates {padding:0; margin:0; position:absolute; z-index:-1;}
.bdates li {list-style:none; display:inline-block;  width:80px; padding:0; opacity:0; }
.bdates li:first-child { margin:0 5px 0 0;}
.bookform input {border:none; text-align:center; background:none; font-size:.875em; color:#fff; cursor:pointer; max-width:80px!important; outline: none; padding:51px 0;}
.click {cursor:pointer;}
.month, .year {display:block; font-size:1em;}
.number {display:block; font-size:2.5em;}
#from, #to {opacity:1;}
.bookdirect h3 {font-family: "Barlow", sans-serif;  font-weight: 300; letter-spacing:1px; font-size:1.5em; letter-spacing:0; color:#9b9a99; line-height:36px; }
.bookbt {display:block;  text-align:center; position:absolute; z-index:2; right:0; top:120px;}
.bookbt a {padding:10px 12px; display:block;  background:#564d41; color:#fff; text-decoration:none; font-family: "Barlow", sans-serif; font-size:1em; font-weight:400; }
.mediawrap, .formwrap {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:1px 0}
.media {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.mask {position:absolute; width:100%; height:100%; z-index:2; background:rgba(65, 74, 84, .6); top:0;  top:0; left:-100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.mask img {display:block;  margin:0;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:32px; height:32px;}

.formwrap {display:flex;  flex-wrap: wrap; align-items: center; padding:0 0 20px 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.formwrap h1 {font-size:1.75em;  color:#564d41; line-height:46px; font-family: "Barlow", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal;}

.grid_cf1 {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0; flex:100%; max-width:100%;}
.grid_cf {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:10px 12px 1px 12px; flex:100%; max-width:100%;}
.grid_cf p {line-height:24px; color:#7f8080;}

.grid_cf ul {list-style:none; margin:0; padding:20px 0 6px 0;}
.grid_cf ul li{margin: 0 0 30px 0;}
.respond ul li {margin:0 0 12px 0!important; color:#7f8080;}
.formtext, .formtext2 {font-family: "Barlow", sans-serif; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:10px 8px; color:#2b2c2c; border:1px solid #052c5a; font-size:1em;  }
.formtext {width:98%;}
.formtext2 {width:50%;} 
.formbutton {background:#564d41; border:0; color:#fff; cursor:pointer; padding:8px 12px; border-radius:4px; font-family: "Barlow", sans-serif;  margin:0 10px 0 0; font-size:1em; vertical-align:middle; }
::-webkit-input-placeholder {color:#2b2c2c; font-size:1em; font-family: "Barlow", sans-serif;}
:-moz-placeholder {color:#2b2c2c; font-size:1em; font-family: "Barlow", sans-serif;}
::-moz-placeholder {color:#2b2c2c; font-size:1em; font-family: "Barlow", sans-serif;}
:-ms-input-placeholder {color:#2b2c2c; font-size:1em; font-family: "Barlow", sans-serif;}
.error_message {color:#fa3a50; padding:0 0 4px 0;}
.respond ul li:first-child {color:#000;}
.respond h2 {font-family: "Barlow", sans-serif;  font-weight: 300; font-style:normal; color:#9b8d79; font-size:1.25em; line-height:30px;}
.bnav {display:block; width:100%;  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:10px 7px; background:#aba59c; font-family: "Barlow", sans-serif;  font-weight: 400; font-style:normal;}
.bnav ul {padding:10px 0 0 0; margin:0;}
.bnav ul li {display:block; list-style:none; margin:0 0 10px 0;}
.bnav ul li a {display:block; padding:2px 4px; color:#000; text-decoration:none;}
.bnav ul li a:hover {color:#fff;}
.bselected { padding:2px 5px; color:#fff;}
.grid11, .grid12 { display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; flex:100%; max-width:100%;}
.grid11 {padding:0 12px 20px 12px;}
.flist {margin:0; padding:0; color:#7f8080; line-height:24px; }
.flist li {list-style:none; margin:0 0 6px 0; }
.flist li span {color:#000;}
.flist li:before  {content:url(../images/list-12.png); margin-right:10px;}
.grid13 {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; flex:100%; max-width:100%; padding:0 12px;}
.grid13 p {line-height:24px;}
.grid11 h3 {font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; color:#000; font-size:1.25em; margin:0; padding:26px 0 14px 0;}
.mediawrap2 {display:flex;  flex-wrap: wrap; align-items: center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%;}
.grid14, .gmap, .grid15 {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; flex:100%; max-width:100%; padding:0;}
#map-canvas {height:300px; width:100%; margin:0 0 0 0; padding:0;}
.grid15 {padding:0 12px 20px 12px;}

.puzzle {display:block;  margin:50px auto; max-width:1440px; display:flex; flex-wrap: wrap; align-items: center;}
.puz1, .puz2, .puz3, .puz4, .puz5, .puz6, .puzhead {display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.puzhead {padding:0 12px 30px 12px; flex:100%; max-width:100%;}
.puzhead h3 {font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; color:#000; font-size:1.375em; margin:0; padding:0 0 20px 0;}
.puz1 {flex:50%; max-width:50%; padding:1px 1px 1px 0;}
.puz2 {flex:50%; max-width:50%; padding:1px 0 1px 1px;}
.puz3, .puz4 {flex:100%; max-width:100%; padding:1px 0; }
.puz5 {flex:50%; max-width:50%; padding:1px 1px 1px 0;}
.puz6 {flex:50%; max-width:50%; padding:1px 0 1px 1px;}
.beachguide { display:block; padding:10px 12px 30px 12px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.beachguide h3 {font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; color:#000; font-size:1.25em; margin:0; padding:30px 0 5px 0;}
.beachguide h4 {font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; color:#2a5d6a; font-size:1.125em; margin:0; padding:20px 0 0 0;}
.beachguide h4 span {font-size:.875em; color:#000; margin-left:4px;}
.guidetitle {color:#9b8d79!important;}
.beachguide p span {color:#000!important;}
@media only screen and (min-width: 320px) {
.nbutton {padding:0 0 6px 4px;}	
.c-hamburger {width: 84px; height: 46px; box-sizing:border-box;     }
.c-hamburger span {top: 24px; left: 12px; right: 12px; height: 1px; background: #000; width:50px;  }
.c-hamburger span::before, .c-hamburger span::after {height: 1px; background-color: #000; content: "";}
.c-hamburger span::before {top: -10px;  width:56px; }
.c-hamburger span::after {bottom: -10px; width:44px; }
.c-hamburger--htx.is-active span::before { background:#000; padding:0; width:50px;}
.c-hamburger--htx.is-active span::after { background:#000; padding:0; width:50px;}
.grid1, .grid1s {padding:0 20px;}
.grid1 p, .grid1s p, .grid3 p, .grid15 p, .beachguide p {text-align:justify;}
.grid7 {flex:100%; max-width:100%; order:0; padding:0 0 4px 0;}
.grid8 {flex:50%; max-width:50%; order:1; padding:0 2px 0 0;}
.grid9 {flex:50%; max-width:50%; order:2; padding:0 0 0 2px;}
.grid3 {padding:0 20px 4px 20px;}
.btn-from, .btn-to {margin:0 10px 0 0;}
.bdates li:first-child { margin:0 10px 0 0;}
.bookdirect {padding:1px 20px 20px 20px;}
.bookform {margin:20px 0 0 0; padding:1px 16px; }
.btn-from, .btn-to {flex:84px; max-width:84px; margin:0 8px 0 0;}
.resubmit {width:84px; padding:30px 0;}
.grid2 {order:1; padding:0 10px 10px 10px;}
.grid4 {order:2; padding:0 10px;}
.bookbt {top:124px;}
.grid_cf {padding:10px 20px 1px 20px;}
.grid_cf p { text-align:justify;}
.bnav {padding:10px 10px;}
.bnav ul li {display:inline-block; margin:0 5px 10px 5px;}
.grid11 {padding:0 20px 20px 20px;}
.grid13 {padding:0 20px;}
.grid15 {padding:0 20px 20px 20px;}
.gmap {padding:0 10px;}
#map-canvas {height:450px; }
.puzhead {padding:0 20px 30px 20px; flex:100%; max-width:100%;}
.beachguide {padding:10px 20px 30px 20px;}
}
@media only screen and (min-width: 450px) {
.grid1, .grid1s {padding:0 30px;}
.grid7 {padding:0 10px 6px 10px;}
.grid8 {padding:0 3px 0 10px;}
.grid9 {padding:0 10px 0 3px;}
.deswrap2 {max-width:430px; padding:20px 0 60px 0;}	
.btn-from, .btn-to, .btn-check  {flex:120px; max-width:120px; margin:0 10px 0 0; }
.number {font-size:3.5em;}	
.resubmit {font-size:1.25em; padding:35px 0; width:120px; line-height:32px; }
.bdates li {width:120px;}
.bookform input {max-width:120px!important; padding:62px 0;}
.bcheck li {width:120px;}
.bookdirect h3 span {display:block;}
.grid4 { padding:0 10px;}
.grid4 {flex:33.33%; max-width:33.33%; order:2; padding:0 0 0 2px;}
.grid2 {order:0; flex:66.67%; max-width:66.67%; order:1; padding:0 4px 0 0;}
.grid3 {padding:0 30px 4px 30px; order:0;}
.deswrap3 {padding:10px 10px 30px 10px;}
.grid_cf {padding:10px 30px 1px 30px;}
.grid11 {padding:0 30px 20px 30px;}
.grid12 {padding:0 10px;}
.grid13 {padding:0 30px;}
.grid15 {padding:0 30px 20px 30px;}
.puzhead {padding:0 30px 30px 30px; }
.beachguide {padding:10px 30px 30px 30px;}
}
@media only screen and (min-width: 600px) {
.nbutton {padding:0 0 6px 4px; position:absolute; z-index:3; left:0; top:60px;}	
.bookbt {top:60px;}
.grid1, .grid1s {padding:0 40px;}
.grid7 {padding:0 20px 10px 20px;}
.grid8 {padding:0 5px 0 20px;}
.grid9 {padding:0 20px 0 5px;}	
.grid3 {padding:0 40px 4px 40px;}
.grid10 {flex:33.33%; max-width:33.33%;} 
footer {align-items: start; padding:20px;}
.gridft1{flex:  calc(100% - 260px);   max-width:  calc(100% - 260px); text-align:left;  }
.gridft2 {flex:260px;   max-width: 260px; text-align:left; margin:0 auto; }
.gridft3 {flex: 100%;   max-width: 300px; text-align:center;}
.gridftlogo {flex:100%; max-width:100%; text-align:center; padding:10px 0;}
.copyright {flex: 100%;   max-width: 100%; text-align:center;}
.grid4 { padding:0 10px 0 0;}
.grid2 {padding:0 10px 0 10px;}
.grid3 {padding:0 40px 4px 40px;}
.grid_cf {padding:10px 50px 1px 50px;}
.grid11 {padding:0 40px 20px 40px;}
.grid12 {padding:0 20px;}
.grid13 {padding:0 40px;}
.grid15 {padding:0 40px 20px 40px;}
.gmap {padding:0 20px;}
.puzhead {padding:0 40px 30px 40px;}
.puzhead h3 {letter-spacing:1px; }
.puz1 {flex:25%; max-width:25%; padding:1px 1px 1px 0; order:0;}
.puz3 {flex:50%; max-width:50%; padding:1px 1px; order:1; }
.puz2 {flex:25%; max-width:25%; padding:1px 0 1px 1px; order:2;}
.puz4 {flex:50%; max-width:50%; padding:1px 2px 1px 0; order:3; }
.puz5 {flex:25%; max-width:25%; padding:1px 1px 1px 0; order:4;}
.puz6 {flex:25%; max-width:25%; padding:1px 0 1px 1px; order:5;}
.beachguide {padding:10px 40px 30px 40px;}

}

@media only screen and (min-width: 768px) {
.grid7 {flex:50%; max-width:50%; padding:0 5px;  order:1;}
.grid8 {flex:25%; max-width:25%; padding:0 5px 0 0;  order:0;}
.grid9 {flex:25%; max-width:25%; padding:0 0 0 5px;  order:2;}
.grid3 {padding:0 40px 4px 40px;}
.extramarg {margin:30px auto;}
.grid10 {padding:0 2px; margin:0 0 4px 0;}
.mg1 {margin-bottom:2px;}
.mg2 {margin-top:2px;}
.grid4 {padding:0 10px 0 0;}
.grid2 {padding:0 10px 0 10px;}
.deswrap3 {padding:10px 20px 30px 20px;}
.grid_cf {padding:20px 70px 1px 70px;}
.grid15 {padding:10px 60px 20px 60px;}
#map-canvas {height:600px; }
.puzhead {padding:0 60px 30px 60px;}
}


@media only screen and (min-width: 900px) {
.deswrap2 {max-width:100%; margin:0 auto; padding:20px 40px 60px 40px; }
.bookdirect {flex:calc(100% -  415px); max-width:flex:calc(100% -  415px); padding:1px 14px 1px 10px; }
.bookform {flex:415px; max-width:415px; margin:0; padding:1px 0 1px 24px;}
.grid10 {flex:25%; max-width:25%; }
.chdsp {display:block;}
}


@media only screen and (min-width: 1024px) {
.grid1 {padding:0 60px;}	


.gridft1, .gridft2 {flex: 300px;   max-width:300px; padding:0; margin:0 auto; }
.gridft3 {text-align:center; flex:calc(100% - 600px); max-width:calc(100% - 600px); margin:0 auto; padding:0 40px ;}
.gridft2 {order:2;}
.gridft1 {order:0;}
.gridft3 {order:1;}
.grid4 {padding:0 10px 0 0; flex:25%; max-width:25%; order:1;}
.grid2 {padding:0 10px 0 10px; flex:50%; max-width:50%; order:0;}
.grid3 {flex:25%; max-width:25%; order:2; padding:0 20px;}
.formwrap {padding:0 0 20px 0; }
.grid_cf {padding:20px 70px 1px 70px;}
.grid_cf ul li{margin: 0 2% 30px 0; float:left; width:48%;}
.respond ul li {float:none!important;}
.formbutton {margin:50px 0 0 10px;}
.grid12 {flex:60%; max-width:60%; order:0; padding:0;}
.grid11 {flex:40%; max-width:40%; order:1; padding:0 20px;}
.grid13 {padding:0 60px; max-width:1280px; margin:0 auto; }
.chod {order:0;}
.chod2 {order:1;}
.puzzle { padding:0 20px;}
.puzhead {padding:0 40px 30px 40px;}
.listwrap{display:flex;  flex-wrap: wrap; align-items: stretch; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width:100%;}
.emlist {flex:50%; max-width:50%}
.beachguide {padding:10px 60px 30px 60px;}
}


@media only screen and (min-width: 1224px) {
.bookbt {top:auto; right:auto; position:fixed; z-index:44; left:0; bottom:0;}
.bookbt a {padding:10px 18px;  background:#726656; color:#fff; font-size:1.375em; font-weight:300; line-height:32px; }
.bookbt a span {display:block;}
.nbutton {display:none;}	
header {position:fixed; z-index:43; height:74px; width:100%;  background:rgb(255, 255, 255); }
.scrolledh {box-shadow:0px 7px 7px -7px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 7px 7px -7px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 7px 7px -7px rgba(0, 0, 0, 0.5); border-bottom:1px solid #457191;}
.hdwrap {  position:relative; margin-left:70px; height:70px; display:flex; flex-wrap: wrap; align-items: center; }
.logo {flex:400px; max-width:400px; padding:4px 0 4px 10px; text-align:left;}	
nav { display:block; padding:12px 0 0 0; position:fixed; z-index:100; right:0; top:8px; font-size:1em; color:#000; letter-spacing:0; width:790px; max-height:none; overflow:visible;}
nav ul {margin:0; padding:8px 0;}
nav ul li { display:inline-block; margin:0 18px 0 0;}
nav ul li a {display:block; padding:4px; color:#000; text-decoration:none; transition:all 0.5s;}
.selected {padding:4px; color:#726656; display:inline-block;}
nav ul li a:hover {color:#726656;}
.submenu {position:absolute; z-index:2; left:0; top:30px; max-height:0; overflow:hidden; transition:all 0.5s ease-out; width:240px; }
.submenu div {padding:9px 0 0 0; cursor:default;}
.submenu li {margin:0; background:#aba59c; border-bottom:1px solid #fff; text-align:left; padding:6px 4px; width:100%; box-sizing:border-box;}
.submenu li a {color:#000;}
.submenu li a:hover {color:#fff;}
.subselected {background:#f0eded!important; color:#232323; padding:10px 8px!important;}
.smore {color:rgb(75, 75, 75); cursor:pointer; }
.smore {padding: 4px 18px 4px 4px; background:url(../images/arrow12.png) no-repeat right 9px; display:inline-block; position:relative;}
.smore:hover .submenu { max-height:320px;} 
.left {position:fixed; z-index:42; width:70px; height:100%; -webkit-box-shadow: 7px 0 7px -7px rgba(0, 0, 0, 0.5); -moz-box-shadow: 7px 0 7px -7px rgba(0, 0, 0, 0.5); box-shadow: 7px 0 7px -7px rgba(0, 0, 0, 0.5); border-right:1px solid #457191; display:block;}
.galleriawrap {padding:0 ; background:#fff; height:100%; padding:70px 0 0 70px;}	
.galleria {height:100%;}
.val2em {position:fixed; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);  transform: rotate(-90deg); transform-origin: center; font-size:2em; letter-spacing:3px; margin:0 0 0 -175px; padding:0; font-family: "Barlow", sans-serif; font-weight:300; color:#9b8d79;}
.description {width:calc(100% - 70px); margin:0 0 0 70px; background:#e5e5e5;}
.grid1, .grid1s {padding:0 7%;}
.deswrap1 {padding:10px 5%;}
.deswrap3 {padding:10px 5% 40px 5%;}
.grid5 {margin:20px 0 10px 0;}
.grid10 {flex:14.28%; max-width:14.28%; box-sizing:border-box; padding:0 2px;}
footer {width:calc(100% - 70px); margin:0 0 0 70px; padding:20px 40px;}
.deswrap2 {padding:40px calc(5% + 20px) 60px calc(5% + 20px); }
.bookdirect h3 {letter-spacing:1px; font-size:1.75em;  line-height:44px; }
.bookdirect ul li {display:inline-block; margin:0 20px 24px 0;}
.bookdirect ul li:first-child {min-width:200px;} 
.bookdirect ul li:nth-child(2) {min-width:200px;}
.grid1 p, .grid1s p, .grid3 p, .grid13 p, .grid15 p, .beachguide p {line-height:22px; font-size:.875em;}
.grid1s h3 {text-align:center;}
footer {padding:20px 5%;}
.grid4 {padding:0 1px 0 3px; flex:25%; max-width:25%; order:1;}
.grid2 {padding:0 7px 0 0; flex:50%; max-width:50%; order:0;}
.grid3 {flex:25%; max-width:25%; order:2; padding:0 20px;}
.gridft1 p, .gridft3 p, .gridft2 p { line-height:24px; font-size:.875em;}
.gridft1 ul {font-size:.875em;}
.gridft1 ul li {list-style:none; text-align:left; margin:0 0 9px 0;}
.gridft1 ul li:nth-child(2) {padding:0 0 0 24px; background:url(../images/location.png) no-repeat left 0;}
.gridft1 ul li:nth-child(4) {padding:0 0 0 24px; background:url(../images/tel.png) no-repeat left 0;}
.gridft1 ul li:nth-child(5) {padding:0 0 0 24px; background:url(../images/mail.png) no-repeat left 0;}
.gridft1, .gridft2 {flex: 300px;   max-width: 300px; padding:0; margin:0 auto; }
.gridft3 {text-align:center; flex:calc(100% - 600px); max-width:calc(100% - 600px); margin:0 auto; padding:0 40px ;}
.mediawrap {padding:62px 0 0 64px;}
.formwrap {padding:70px 0 0 0; width:calc(100% - 70px); margin:0 0 0 70px; background:#e5e5e5; display:flex;  flex-wrap: wrap; align-items: center;}
    .grid_cf1 {
        flex: 50%;
        max-width: 50%;
       
      
    }
.grid_cf {padding:1px 30px; flex:50%; max-width:50%; }
.grid_cf p {line-height:22px; font-size:.875em; padding-right:3%; }
.grid_cf ul {font-size:.875em;}
.grid_cf ul li{margin: 0 2% 25px 0; }
.bnav {display:none;}
.flist {line-height:22px; font-size:.875em;}
.grid11 {flex:45%; max-width:45%;  padding:0 0 0 30px;}
.chod { padding:0 30px 0 0;}
.grid12 {flex:55%; max-width:55%;}
.flist li {text-align:justify;}

.mediawrap2 {padding:62px 0 0 70px;}
.grid14 {flex:50%; max-width:50%; padding:0 1px 0 0; order:0;}
.gmap {flex:50%; max-width:50%; order:1; align-self:stretch; padding:0 0 0 1px;}
#map-canvas {height:100%; width:100%;}
.grid15 {order:2;  background:#e5e5e5; padding:10px calc(5% + 20px) 0 calc(5% + 20px); }
.puzzle { padding:0 5%; max-width:2040px; margin:20px auto 50px auto;}
.puzhead {padding:30px 20px; order:7;}
.puz1 {order:0;}
.puz3 {order:1; }
.puz2 {order:2;}
.puz4 {order:3; }
.puz5 {order:4;}
.puz6 {order:5;}
.beachguide h4 {font-size:1em;}
.beachguide {padding:10px 7% 30px 7%;}
}
@media only screen 
and (min-width : 1600px) {
.grid1, .grid1s {padding:0 17%;}
footer {padding:20px 5%;}
.grid_cf {padding:1px 40px;}
.grid11 {flex:50%; max-width:50%;  padding:0 40px 0 40px;}
.grid12 {flex:50%; max-width:50%;}
.beachguide {padding:10px 17% 30px 17%;}

}
@media only screen 
and (min-width : 2000px) {
.deswrap1 {padding:10px 7%;}
.deswrap3 {padding:10px 12% 40px 12%;}
.deswrap2 {padding:40px calc(7% + 40px) 60px calc(7% + 40px); }
.grid1, .grid1s {padding:0 20%;}
footer {padding:20px 7%;}
.grid1 p, .grid1s p, .grid3 p, .grid13 p, .grid15 p, .beachguide p  {line-height:24px; font-size:1em;}
.gridft1 ul li {list-style:none; text-align:left; margin:0 0 10px 0;}
.gridft1 ul li:nth-child(2) {padding:0 0 0 24px; background:url(../images/location.png) no-repeat left 1px;}
.gridft1 ul li:nth-child(4) {padding:0 0 0 24px; background:url(../images/tel.png) no-repeat left 1px;}
.gridft1 ul li:nth-child(5) {padding:0 0 0 24px; background:url(../images/mail.png) no-repeat left 1px;}
.gridft1 p, .gridft3 p, .gridft2 p { line-height:26px;  font-size:1em;}
.gridft1 ul {font-size:1em;}
.grid_cf {padding:1px 120px;}
.grid_cf p {line-height:24px; font-size:1em; }
.grid_cf ul {font-size:1em;}
.grid_cf ul li{margin: 0 2% 35px 0;}
.flist {line-height:24px; font-size:1em;}
.flist li {margin:0 0 8px 0;}
.grid11 {padding:0 40px 0 60px;}
.chod {padding:0 60px 0 40px;}
.grid15 {padding:10px calc(50% - 990px) 0 calc(50% - 990px);}
.beachguide {padding:10px 20% 40px 20%;}
.beachguide h4 {font-size:1.125em;}
}

@media only screen 
and (min-width : 2561px) {
header {height:80px;}	
.hdwrap {  position:relative; margin-left:90px; height:80px;}
.left {width:90px;}
.galleriawrap {padding:80px 0 0 90px;}	

.deswrap1 {padding:10px 10%;}
.deswrap2 {padding:60px calc(10% + 40px) 60px calc(10% + 40px); }
.deswrap3 {padding:10px 15% 60px 15%;}
.grid1, .grid1s {padding:0 20% 10px 20%;}
.description {width:calc(100% - 90px); margin:0 0 0 90px; padding:20px 0; }
.formwrap {padding:80px 0 0 0; width:calc(100% - 90px); margin:0 0 0 90px;}

.val2em {font-size:2.625em; letter-spacing:5px; margin:0 0 0 -246px; padding:0;}
.logo { padding:4px 0 4px 10px;}	
nav {padding:10px 0 0 0; font-size:1.25em; width:880px;}
nav ul li { display:inline-block; margin:0 25px 0 0;}
.submenu {width:250px; }
.submenu div {padding:19px 0 0 0;}
.smore {padding: 4px 22px 4px 4px; background:url(../images/arrow16.png) no-repeat right 10px;}
.submenu li {padding:10px 8px;}
.bookbt a {padding:12px 22px;  font-size:1.875em; line-height:42px; }
.grid1 p, .grid1s p, .grid3 p, .grid13 p, .grid15 p {line-height:30px; font-size:1.1875em;}
.flist {line-height:30px; font-size:1.1875em;}
.flist li {margin:0 0 12px 0;}
.flist li:before  {content:url(../images/list-14.png); margin-right:14px;}
.description h1, .grid1 h3, .grid15 h1 {font-size:2.75em; line-height:60px;}
.description h1 span, .grid1 h3 span {max-width:720px;}
.grid1 h3 span {max-width:810px;} 
.grid3 h2, .grid1s h3, .grid11 h2, .grid13 h3 {font-size:2.375em;}
.grid7 {flex:50%; max-width:50%; padding:0 6px;  order:1;}
.grid8 {flex:25%; max-width:25%; padding:0 14px 0 0;  order:0;}
.grid9 {flex:25%; max-width:25%; padding:0 0 0 14px;  order:2;}
.grid4 {padding:0 7px 0 2px; flex:25%; max-width:25%; order:1;}
.grid2 {padding:0 17px 0 0; flex:50%; max-width:50%; order:0;}
.grid3 {padding:0 40px;}
footer {width:calc(100% - 90px); margin:0 0 0 90px;}
.grid5 {padding:0 10% 20px 10%;}
footer {padding:30px 10% 20px 10%;}
.gridft1, .gridft2 {flex: 370px;   max-width: 370px; padding:0; margin:0 auto; }
.gridft3 {text-align:center; flex:calc(100% - 740px); max-width:calc(100% - 740px); margin:0 auto; padding:0 40px ;}
.gridft1 p, .gridft3 p, .gridft2 p { line-height:32px; font-size:1.1875em;}
.gridft1 ul {margin:0; padding:20px 0 0 0; color:#e5e5e5;}
.gridft1 ul li {margin:0 0 12px 0; font-size:1.1875em;}
.gridft1 h4, .gridft3 h4, .gridft2 h4 {font-size:1.75em;}
.gridft1 ul {margin:0; padding:30px 0 0 0;}
.gridft1 ul li:nth-child(2) {padding:0 0 0 28px; background:url(../images/location.png) no-repeat left 3px;}
.gridft1 ul li:nth-child(4) {padding:0 0 0 28px; background:url(../images/tel.png) no-repeat left 3px;}
.gridft1 ul li:nth-child(5) {padding:0 0 0 28px; background:url(../images/mail.png) no-repeat left 3px;}
.copyright {font-size:1.125em; margin:6px auto 0 auto;}


.bookdirect h3 {letter-spacing:1px; font-size:2em;  line-height:48px; }
.bookdirect ul {font-size:1.1875em;}

.bookdirect ul li:first-child {min-width:280px;} 
.bookdirect ul li:nth-child(2) {min-width:280x;}
.bookdirect {flex:calc(100% - 480px); max-width:calc(100% - 480px); padding:1px 14px 1px 10px;  }
.bookform {flex:480px; max-width:480px; margin:0; padding:1px 0 1px 24px;  }
.btn-from, .btn-to, .btn-check  {flex:140px; max-width:140px; padding:10px 10px 10px 10px;}
.btn-check { padding:0;} 
.bookform input {max-width:140px!important; padding:72px 0;}
.month, .year {display:block; font-size:1.1875em;}
.number {font-size:4em; padding:5px 0; }
.bcheck li {width:134px; font-size:1.1875em; padding:0 0 6px 0;}
.resubmit {font-size:1.5em; padding:45px 0; width:140px; }
.grid_cf {padding:1px 200px;}
.grid_cf p {line-height:30px; font-size:1.1875em; }
.grid_cf ul {font-size:1.1875em;}
.grid_cf ul li{margin: 0 2% 40px 0; }
.respond h2 {font-size:1.5em; line-height:36px;}
.grid13 h4 {font-size:1.785em; padding:30px 0 4px 0; margin:0;}
.mediawrap2 {padding:80px 0 0 90px;}
.grid15 {padding:10px calc(50% - 980px) 0 calc(50% - 980px);}
.puzhead h3 {font-size:1.625em; margin:0; padding:20px 0 30px 0;}
}




@media only screen 
and (min-width : 3073px) {
header {height:90px;}	
.hdwrap {  position:relative; margin-left:100px; height:90px;}
.left {width:100px;}
.galleriawrap {padding:90px 0 0 100px;}	
.deswrap1 {padding:10px 14%;}
.deswrap2 {padding:60px calc(14% + 40px) 60px calc(14% + 40px); }
.deswrap3 {padding:10px 22% 60px 22%;}
.grid1, .grid1s {padding:0 24% 10px 24%;}
.description {width:calc(100% - 100px); margin:0 0 0 100px; padding:20px 0; }
.val2em {font-size:3em; letter-spacing:5px; margin:0 0 0 -272px; padding:0;}
.logo {flex:calc(100% - 1080px); max-width:calc(100% - 1080px); padding:4px 0 4px 20px;}	
nav {padding:12px 0 0 0; font-weight: 400; font-size:1.4375em; color:#000; letter-spacing:0; width:980px;}
nav ul li { display:inline-block; margin:0 25px 0 0;}
.submenu {width:280px; }
.submenu div {padding:21px 0 0 0; cursor:default;}
.smore {padding: 4px 22px 4px 4px; background:url(../images/arrow16.png) no-repeat right 12px; display:inline-block; position:relative;}
.submenu li {padding:10px 8px;}
.bookbt a {padding:12px 22px;  font-size:2em; line-height:46px; }
.grid1 p, .grid1s p, .grid3 p, .grid13 p, .grid15 p {line-height:32px; font-size:1.375em;}

.flist {line-height:32px; font-size:1.375em;}
.flist li {margin:0 0 14px 0;}
.flist li:before  {content:url(../images/list-16.png); margin-right:16px;}

.description h1, .grid1 h3 , .grid13 h3, .grid15 h1{font-size:3em; line-height:70px;}
.description h1 span, .grid1 h3 span {max-width:810px;}
.grid1 h3 span {max-width:900px;} 
.grid3 h2, .grid1s h3 , .grid11 h2{font-size:2.625em;}
.grid7 {flex:50%; max-width:50%; padding:0 6px;  order:1;}
.grid8 {flex:25%; max-width:25%; padding:0 14px 0 0;  order:0;}
.grid9 {flex:25%; max-width:25%; padding:0 0 0 14px;  order:2;}
.grid4 {padding:0 7px 0 2px; flex:25%; max-width:25%; order:1;}
.grid2 {padding:0 17px 0 0; flex:50%; max-width:50%; order:0;}
.grid3 {padding:0 60px;}
footer {width:calc(100% - 100px); margin:0 0 0 100px;}
.grid5 {padding:0 14% 20px 14%;}
footer {padding:30px 10% 20px 10%;}
.gridft1, .gridft2 {flex: 450px;   max-width:450px; padding:0; margin:0 auto; }
.gridft3 {text-align:center; flex:calc(100% - 900px); max-width:calc(100% - 900px); margin:0 auto; padding:0 40px ;}
.gridft1 p, .gridft3 p, .gridft2 p { line-height:34px; color:#e5e5e5; font-size:1.375em;}
.gridft1 ul {margin:0; padding:20px 0 0 0; color:#e5e5e5;}
.gridft1 ul li {margin:0 0 14px 0; font-size:1.375em;}
.gridft1 h4, .gridft3 h4, .gridft2 h4 {font-size:1.875em;}
.gridft1 ul {margin:0; padding:30px 0 0 0;}
.gridft1 ul li:nth-child(2) {padding:0 0 0 28px; background:url(../images/location.png) no-repeat left 3px;}
.gridft1 ul li:nth-child(4) {padding:0 0 0 28px; background:url(../images/tel.png) no-repeat left 3px;}
.gridft1 ul li:nth-child(5) {padding:0 0 0 28px; background:url(../images/mail.png) no-repeat left 3px;}
.copyright {font-size:1.25em; margin:6px auto 0 auto;}
.formwrap {padding:90px 0 0 0; width:calc(100% - 100px); margin:0 0 0 100px;}
.bookdirect h3 {letter-spacing:1px; font-size:2.5em;  line-height:60px; }
.bookdirect ul {font-size:1.375em;}
.bookdirect ul li:first-child {min-width:300px;} 
.bookdirect ul li:nth-child(2) {min-width:300px;}
.month, .year {display:block; font-size:1.375em;}
.number {font-size:4.5em; padding:5px 0; }
.bcheck li {width:134px; font-size:1.375em; padding:0 0 8px 0;}
.resubmit {font-size:1.625em; padding:48px 0; width:140px; line-height:36px; }
.formwrap h1 {font-size:2.375em; line-height:70px; }
.respond h2 {font-size:1.875em; line-height:42px;}
.grid_cf {padding:1px 200px;}
.grid_cf p { font-size:1.375em; line-height:36px;}
.grid_cf ul {font-size:1.375em;}
.grid_cf ul li{margin: 0 2% 50px 0; }
.grid13 h4 {font-size:2em; padding:40px 0 6px 0; margin:0;}
.grid13 {max-width:1720px;}
.mediawrap2 {padding:90px 0 0 100px;}

.puzhead h3 {font-size:1.875em; margin:0; padding:30px 0;}
}


.room-amount {
    margin-top: 55px;
    padding-top: 50px;
    border-top: 1px solid #E4E4E4;
    font-size: 0;
    text-align: center;
}

    .room-amount li {
        display: inline-block;
        width: 25%;
    }

        .room-amount li i:before {
            margin: 0;
            color: #FFAE00;
            font-size: 54px;
        }

        .room-amount li h4 {
            margin-top: 8px;
            margin-bottom: 4px;
            text-transform: uppercase;
            color: #282828;
            font-size: 15px;
            font-weight: bold;
            line-height: 38px;
        }

        .room-amount li span {
            font-family: 'PT Serif', sans-serif;
            font-size: 32px;
            line-height: 38px;
            font-style: italic;
        }

.room-amount1 {
    margin-top: 55px;
    padding-top: 50px;
    border-bottom: 1px solid #E4E4E4;
    font-size: 0;
    padding-bottom: 50px;
    text-align: center;
}

    .room-amount1 li {
        display: inline-block;
        width: 25%;
    }

        .room-amount1 li i:before {
            margin: 0;
            color: #FFAE00;
            font-size: 54px;
        }

        .room-amount1 li h4 {
            margin-top: 8px;
            margin-bottom: 4px;
            text-transform: uppercase;
            color: #282828;
            font-size: 15px;
            font-weight: bold;
            line-height: 38px;
        }

        .room-amount1 li span {
            font-family: 'PT Serif', sans-serif;
            font-size: 32px;
            line-height: 38px;
            font-style: italic;
        }
@media only screen and (max-width: 767px) {
    .room-amount li {
        display: block;
        width: 85%;
        margin: auto;
        margin-bottom: 40px;
    }

    .room-amount1 li {
        display: block;
        width: 85%;
        margin: auto;
        margin-bottom: 40px;
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .room-amount li {
            display: inline-block;
            width: 50%;
        }

        .room-amount1 li {
            display: inline-block;
            width: 50%;
        }
    }
    }

.villa-details-three__lists {
    margin: 0 0 38px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

    .villa-details-three__lists li {
        font-size: 16px;
        line-height: 40px;
        display: flex;
        align-items: center;
    }

        .villa-details-three__lists li span {
            display: inline-block;
            color: var(--villoz-base, #537eac);
            font-size: 14px;
            margin-right: 15px;
        }

@media (max-width: 767px) {
    .villa-details-three__lists {
        grid-template-columns: repeat(2, 1fr);
    }
}
.deswrap1 p {
    line-height: 22px;
    font-size: .875em;
    color: #7f8080;
}

ul {
    line-height: 22px;
    font-size: .875em;
    color: #7f8080;
    text-align: justify;
}