:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #000;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
body{font-size:16px; color:#4d4d4d; letter-spacing:0.5px; font-family: 'Lato', sans-serif; font-weight:400; letter-spacing:0.5px; padding-top:80px;}
header, section, footer{position:relative; width:100%; }
header{position:fixed; top:0; left:0; width:100%; z-index:3}
a:hover, a:focus{text-decoration:none;}
.btn{ border-radius:0; text-transform:uppercase; letter-spacing:2px; font-weight:600;}
.btn-sm{font-size:11px; line-height:20px; padding-left:20px; padding-right:20px;}
.btn-lg{font-size:16px;}
.-u{text-transform:uppercase; style="font-family: 'Cinzel', serif; letter-spacing:5px;"}
.-white{color:#fff;}
.-black{color:#000;}
.-ma{display:none;}
.-da{display:block;}
.clear80{height:80px; display: block;clear: both;content: ""; width:100%;}
.clear40{height:40px; display: block;clear: both;content: ""; width:100%;}
.clear30{height:1.875rem; display:block; clear:both; content:""; width:100%;}
.clear20{height:20px; display: block;clear: both;content: ""; width:100%;}
.img-logo{max-width:180px; height:auto;}
.wrapper{padding:0;position:relative;padding-right: .625rem; padding-left: .625rem; width:100%;  margin: 0 auto; position:relative;}
.grid-container{max-width:90rem}
.grid-container,.grid-container.fluid{padding-right:.625rem;padding-left:.625rem;margin:0 auto}
.grid-container.fluid{max-width:100%}
.grid-x{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}
.cell{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;min-height:0;min-width:0;width:100%}
.grid-x>.small-10,.grid-x>.small-2,.grid-x>.small-4,.grid-x>.small-6{-ms-flex-preferred-size:auto;flex-basis:auto}
.grid-x>.small-2{width:16.66667%}
.grid-x>.small-4{width:33.33333%}
.grid-x>.small-6{width:50%}
.grid-x>.small-10{width:83.33333%}
.grid-margin-x{margin-left:-.625rem;margin-right:-.625rem}
.grid-margin-x>.cell{width:calc(100% - 1.25rem);margin-left:.625rem;margin-right:.625rem}
.grid-margin-x>.small-2{width:calc(16.66667% - 1.25rem)}
.grid-margin-x>.small-4{width:calc(33.33333% - 1.25rem)}
.grid-margin-x>.small-6{width:calc(50% - 1.25rem)}
.grid-margin-x>.small-10{width:calc(83.33333% - 1.25rem)}
.small-offset-1{margin-left:8.33333%}
.grid-margin-x>.small-offset-1{margin-left:calc(8.33333% + .625rem)}
.grid-box .cta{ padding-top:20px; width:100%; display:block;}
.align-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
.align-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.align-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.flex-container{display:-webkit-box;display:-ms-flexbox;display:flex}
.flex-child-grow{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}
.flex-dir-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.position-relative{position:relative!important}
.white-space{background-color:#fff;}
.gray-space{ background:#f5f5f5;}
.story .img-hover01{margin-bottom:0;display:block;}
.marblebg{background-position:center center; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image:url(../images/coconut-bg.png);}
.patternbg{background-position:center center; background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image:url(../images/pattern-bg.png);}
.form-control:focus {color:#000;}
.form-control::-webkit-input-placeholder { color: #666; opacity: 1;}
.form-control::-moz-placeholder {color: #666;opacity: 1;}
.form-control:-ms-input-placeholder {color: #666;opacity: 1;}
.form-control::-ms-input-placeholder {color: #666;opacity: 1;}
.form-control::placeholder {color: #666;opacity: 1;}
.top-head-wrapper{font-size:0.750em; letter-spacing:1px; background-color:rgba(0,0,0,1.00); padding:0px;  line-height:3em; color:#cfcfcf; position:relative; width:100%; border-bottom:1px solid rgba(255,255,255,0.5); z-index:2}
.top-head-wrapper ul{padding:0; margin:0; min-width:1px; max-width:100%; float:right; list-style:none;}
.top-head-wrapper li{float:left; border-left:1px solid rgba(255,255,255,0.6); padding:0px 12px; text-transform:uppercase;}
.top-head-wrapper li:hover{background-color:#666; cursor:pointer;}
.top-head-wrapper a{color:#fff;}
/*.top-head-wrapper li:last-child{padding-right:0px;}*/
.header-sm{ width:100%; color:rgba(255,255,255,1.00);  background-color:rgba(0,0,0,1.00); padding:10px 0; position:relative; font-size:0.750em; letter-spacing:1px; z-index:2; border-bottom:1px solid #222;}
.header-sm a{color:rgba(255,255,255,1.00); text-transform:uppercase; letter-spacing:1.5px; line-height:20px; padding: 0.25rem 0.5rem;}
.header-sm a:hover, .header-sm a.focus{color:#999;}
.header-sm ul{padding:0; list-style:none; display:inline-block; max-width:100%; margin:0 auto;}
.header-sm li{float:left; font-weight:600; }
/*Mobile*/
.ma-header{padding:30px 15px; background:#111; font-size:2em; color:#fff; }
.ma-header button{margin-right:40px; font-size: .875em; padding:10px 20px;}
.ma-header a{color:#fff; width:60px; height:60px; display:block;}
.ma-header a:hover{ color:#999;}
/*Footer*/
.footer-wrapper{background:#000; color:#999; padding:40px 0px 20px;}
.footer-wrapper hr{ border-color:rgba(255,255,255,0.1); padding-bottom:10px;}
.footer-wrapper h5{font-size:1em; color:#e8e8e8; letter-spacing:1px; font-weight:normal; margin-bottom:20px;}
.footer-wrapper a{color:#999;} 
.footer-wrapper a:hover{color:#f5f5f5;}
.footer-wrapper ul{padding:0; margin:0; list-style:none;}
.footer-wrapper li{line-height:20px; display:inline-block; width:100%; font-size:0.875em;}
.footer-wrapper li a{color:#666;}
.footer-wrapper .form-control{background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.5); border-radius:0; padding:0; box-shadow:none;}
.footer-wrapper .form-control:focus { color:#fff;}
.footer-wrapper .copyright{ text-align:right;}
.footer-wrapper  .appimg{max-width:130px;}
.title{font-family: 'Cormorant Garamond', serif; font-weight:500; letter-spacing:2px; font-size:38px;}
.subtitle{ font-size:28px;font-family: 'Cormorant Garamond', serif; font-weight:400; color:rgba(10,25,56,1.00); letter-spacing:1px; line-height:38px;}
.slider-bg{background:#f5f5f5; background-repeat:no-repeat;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height:550px;}
.caption-wrapper{position: absolute; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width:100%; text-align:center; color:rgba(255,255,255,1.00);  color:#fff;font-family: 'Cinzel', serif; font-weight:400; letter-spacing:2px; }
.caption{font-size:2em;}
.sub-caption{font-size:1.2em;}
.pattern-wrapper{height:58%; width:100%; position:absolute; top:0; left:0;}
.p-vertical{position: absolute; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width:100%; padding:0px 10%;}
.p-horizontal{position: absolute; left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:100%; padding:0px 10%;}
.p-cta{ display:inline-block; padding-top:20px; width:100%;}
.txt-line {
    font-family: 'Lato', sans-serif;
    text-transform:uppercase;
    letter-spacing: 2px;
    position: relative;
    color: #000;
    margin-left: 40px;
    font-weight: normal;
	font-size:11px;
}

.txt-line:before {
    position: absolute;
    width: 30px;
    left: -40px;
    content: "";
    display: block;
    height: 1px;
    background: #000;
    top: 5px;
}

.btn-outline-default {color:rgba(10,25,56,1.00);border: 1px solid rgba(10,25,56,1.00);}
.btn-outline-default:hover {color: #fff;background-color: rgba(10,25,56,1.00);border-color: rgba(10,25,56,1.00);}
.btn-outline-default:focus, .btn-outline-default.focus {box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);}
.btn-outline-default.disabled, .btn-outline-default:disabled {color: #007bff; background-color: transparent;}
.btn-outline-default:not(:disabled):not(.disabled):active, .btn-outline-default:not(:disabled):not(.disabled).active,
.show > .btn-outline-default.dropdown-toggle { color: #fff; background-color: rgba(10,25,56,1.00); border-color: rgba(10,25,56,1.00);}
.btn-outline-default:not(:disabled):not(.disabled):active:focus, .btn-outline-default:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-default.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);}
.btn-yellow {color:rgba(0,0,0,1.00);border: 1px solid rgba(200,149,48,1.00); background-color:rgba(200,149,48,1.00);}
.btn-yellow:hover {color: #fff;background-color: rgba(10,25,56,1.00);border-color: rgba(10,25,56,1.00);}
.btn-yellow:focus, .btn-yellow.focus {box-shadow:none;border: 1px solid rgba(200,149,48,1.00);}
.btn-yellow.disabled, .btn-yellow:disabled {color: #007bff; background-color: transparent;}
.btn-yellow:not(:disabled):not(.disabled):active, .btn-yellow:not(:disabled):not(.disabled).active,
.show > .btn-yellow.dropdown-toggle { color: #fff; background-color: rgba(10,25,56,1.00); border-color: rgba(10,25,56,1.00);}
.btn-yellow:not(:disabled):not(.disabled):active:focus, .btn-yellow:not(:disabled):not(.disabled).active:focus,
.show > .btn-yellow.dropdown-toggle:focus {box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);}
.btn-outline-dark{color:rgba(10,25,56,1.00);border-color:rgba(10,25,56,1.00)}
.btn-outline-dark:hover{color:#fff;background-color:rgba(10,25,56,1.00);border-color:rgba(10,25,56,1.00)}
.btn-outline-dark:focus,.btn-outline-dark.focus{box-shadow:0 0 0 .2rem rgba(52,58,64,0.5)}
.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:rgba(10,25,56,1.00);background-color:transparent}
.btn-outline-dark:not(:disabled):not(.disabled):active,.btn-outline-dark:not(:disabled):not(.disabled).active,.show > .btn-outline-dark.dropdown-toggle{color:#fff;background-color:rgba(10,25,56,1.00);border-color:rgba(10,25,56,1.00);}
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.show > .btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,0.5)}

.footer-logo{opacity:0.8; filter:brightness(0) invert(1); width:100%; height:auto;}
.imgwihte{filter:brightness(0) invert(1);}
.grayscale-80{  -webkit-filter: grayscale(0.8); filter: grayscale(80%);}
.grayscale-60{  -webkit-filter: grayscale(0.6); filter: grayscale(60%);}
.grayscale-40{  -webkit-filter: grayscale(0.4); filter: grayscale(40%);}
/* IMG effect */
.img-hover01{position:relative;display:inline-block;overflow:hidden;min-width:230px;max-width:100%;color:#fff;text-align:left;font-size:16px; background-color:rgba(31,53,92,1.00);margin-bottom:30px;}
.img-hover01 *,.img-hover01:before,.img-hover01:after{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .4s ease;transition:all .4s ease}
.img-hover01 img{max-width:100%;backface-visibility:hidden;vertical-align:top; }
.img-hover01 img:hover{transform: scale(1.1);}
.img-hover01:before,.img-hover01:after{position:absolute;top:20px;right:20px;content:'';background-color:rgba(200,149,48,1.00);z-index:1;opacity:0; }
.img-hover01:before{width:0;height:1px}
.img-hover01:after{height:0;width:1px}
.img-hover01 figcaption{position:absolute;left:0;bottom:0;padding:15px 20px}
.img-hover01 h3{font-family:'Cormorant Garamond',Arial,sans-serif;}
.img-hover01 h3,.img-hover01 h4{margin:0;font-size:1.5em;font-weight:400;opacity:0; letter-spacing:0.5px;}
.img-hover01 h4{font-size:0.8em; letter-spacing:1px;}
.img-hover01 a{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}
.img-hover01:hover img,.img-hover01.hover img{zoom:1;filter:alpha(opacity=20);-webkit-opacity:.2;opacity:.2; }
.img-hover01:hover:before,.img-hover01.hover:before,.img-hover01:hover:after,.img-hover01.hover:after{opacity:1;-webkit-transition-delay:.25s;transition-delay:.25s}
.img-hover01:hover:before,.img-hover01.hover:before{width:50px}
.img-hover01:hover:after,.img-hover01.hover:after{height:50px}
.img-hover01:hover h3,.img-hover01.hover h3,.img-hover01:hover h4,.img-hover01.hover h4{opacity:1}
.img-hover01:hover h3,.img-hover01.hover h3{-webkit-transition-delay:.3s;transition-delay:.3s}
.img-hover01:hover h4,.img-hover01.hover h4{-webkit-transition-delay:.35s;transition-delay:.35s}
.btn-dark{ font-size:11px; letter-spacing:2px; background-color:rgba(31,53,92,1.00);}
.display-none { display: none; }
.example {border-radius:5px;background-color: #fafafa;padding:2em; max-width:400px;}
/*Grid Box */
.grid-box{ position:relative; clear:both;margin-bottom: 1.875rem;}
.grid-box figure{margin:0; padding:0; width:100%; display:block;  overflow:hidden; }
.grid-box .img-fluvid{max-width:none !important;display: block;margin-left: -50%; margin-right: -50%; width:200%; height:auto;}
.grid-box:hover .img-fluvid{transform: scale(1.1);}
.grid-box .line{width:3%; height:1px; background:#000; position:absolute; left:47%; top:0; }
.grid-box .content{margin-top:30px; padding-top:25px; padding-bottom:50px; width:100%; display:block; clear:both;}
.grid-box .content .title{font-size:3em; color:#000; margin-bottom:20px;}
.grid-box .btn-outline-dark{font-size:11px; letter-spacing:5px; width:70%; padding-top:1.5rem; padding-bottom:1.5rem; font-weight:600;}

/*Grid Box */
.grid-box{ position:relative; clear:both;margin-bottom: 1.875rem;}
.grid-box figure{margin:0; padding:0; width:100%; display:block;  overflow:hidden; }
.grid-box .img-fluvid{max-width:none !important;display: block;margin-left: -50%; margin-right: -50%; width:200%; height:auto;}
.grid-box:hover .img-fluvid{transform: scale(1.1);}
.grid-box .line{width:3%; height:1px; background:#000; position:absolute; left:47%; top:0; }
.grid-box .content{margin-top:30px; padding-top:25px; padding-bottom:50px; width:100%; display:block; clear:both;}
.grid-box .content .title{font-size:3em; color:#000; margin-bottom:20px;}
.grid-box .btn-outline-dark{font-size:11px; letter-spacing:5px; width:70%; padding-top:1.5rem; padding-bottom:1.5rem; font-weight:600;}
.btn-lg{font-size:11px; letter-spacing:5px; width:70%; padding-top:1.5rem; padding-bottom:1.5rem; font-weight:600;}
/*Overlay*/
.toggle-button{position:fixed;top:8px;left:15px;padding:9px 10px;margin:8px 15px 8px 0;height:20px;width:35px;cursor:pointer;z-index:3}
.bar{background-color:#ff5252;display:block;width:100%;height:5px;border:0;-webkit-transition:all .35s ease;transition:all .35s ease;}
.bar + .bar{margin-top:4px}
.middle{top:11px}
.bottom{top:22px}
.toggle-button:hover{opacity:.7}
.toggle-active .bar{background-color:#fff}
.toggle-active .top{-webkit-transform:translateY(6px) translateX(0) rotate(45deg)}
.toggle-active .middle{opacity:0}
.toggle-active .bottom{-webkit-transform:translateY(-12px) translateX(0) rotate(-45deg)}
.overlay{ position:fixed;background-color:rgba(0,0,0,0.95);top:0;left:0;width:100%;height:0;visibility:hidden;opacity:0;-webkit-transition:opacity .35s,visibility .35s,height .35s; z-index:1;color:#F5F5F5; padding:0;padding-top:10%;}
.nav-active{opacity:1;visibility:visible;height:100%}
.overlay-close{width:auto;  float:right; padding-right:15px; cursor:pointer;  -webkit-transition: width 6s; -webkit-transition-delay: 4s; transition: width 6s; transition-delay: 4s; display:none; }
.overlay-e{-webkit-transition: width 6s; -webkit-transition-delay: 4s; transition: width 6s; transition-delay: 4s;}
.calendar{width:32px;height:32px; position:absolute; z-index:9; bottom:10px; right:15px; background-image:url(../images/icon/calendar-icon.png) center center; background-repeat:no-repeat;}
/*Reservation Form */
#reservation{margin-top:0%; margin-bottom:5%; text-align:left;}
#reservation .btn-lg{ color:#000; letter-spacing:5px;}
#reservation .btn-lg:hover{ color:#fff;}
#reservation .form-control{font-family:'Cormorant Garamond',Arial,sans-serif; font-size:1.5em; color:#dfdfdf; background:none; border-radius:0; border:none; border-bottom:2px solid #fff; box-shadow:none;padding:0px 15px; width:100%;}
#reservation  label{font-size:10px; font-weight:600; color:#fff; text-align:left; width:100%; letter-spacing:2.5px; text-transform:uppercase; margin-top:15px;}
#reservation  .form-control::-webkit-input-placeholder {color: #dfdfdf;opacity: 1;}
#reservation  .form-control::-moz-placeholder {color: #dfdfdf; opacity: 1;}
#reservation  .form-control:-ms-input-placeholder {color: #dfdfdf; opacity: 1;}
#reservation  .form-control::-ms-input-placeholder {color: #dfdfdf;opacity: 1;}
#reservation  .form-control::placeholder {color: #dfdfdf; opacity: 1;}
#reservation .overlay-e{max-width:300px;}
.overlay-content{}
.overlay-content .img-hover01{width:100%;}
.overlay-content .img-hover01 img{width:100%; height:auto;}
.overlay-content .content{width:80%; margin:0 auto; padding:60px; background-color:#d9d6df; opacity:0.8; position:relative; margin-top:-150px; padding-bottom:150px;}
#scrooltop{width:35px; height:35px; position:absolute; right:2%; bottom:5%; z-index:99; cursor:pointer;}
#scrooltop img{width:100%; height:auto;}
.mmenu{text-align:center; font-size:3em; font-family:'Cormorant Garamond',Arial,sans-serif;display:none;}
.mmenu ul{padding:0; margin:0; list-style:none; text-align:center; width:100%;}
.mmenu a{color:#fff; display:inline-block;width:100%; padding-bottom:80px; letter-spacing:5px;}

@media (min-width: 1440px){.wrapper{margin-left: 8.333333%; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%;max-width: 83.333333%;} .slider-bg{height:75vh;}}

@media (max-width: 1200px){
.3resonimg{max-width:250px; height:auto;}			
}
@media (max-width: 992px) { /*Show desktop Head  and  Footer Head*/
body{font-size:1.5em; line-height:1.5em;}
p{font-size:1.5em; line-height:1.7em;}
.-ma{display:block;}
.-da{display:none;}	
.wrapper{padding:0;}	
.footer-wrapper h5{font-size:1.5em;} 
#scrooltop{bottom:15%; width:50px; height:50px;}
.footer-wrapper li{line-height:20px; display:inline-block; width:100%; font-size:1.5em; line-height:1.5em;}
.footer-wrapper hr{ border-color:rgba(255,255,255,0.3); padding-bottom:10px;}
.vm{position:relative; padding:40px 15px;}
.img-logo{max-width:280px;}	
.overlay{padding-top:25%;}
.overlay .title{font-size:3em;}
#reservation  label{font-size:1em;}
#reservation .form-control{font-size:3em;}
#reservation .overlay-e{font-size:2em; max-width:100%;}
.slider-bg{ height:100vh;}
.title{font-family: 'Cormorant Garamond', serif; font-weight:500; letter-spacing:2px; font-size:38px;}
.subtitle{ font-size:3em; line-height:1em; letter-spacing:5px}
.btn-sm{font-size:1.2em; line-height:2.5em; padding-left:20px; padding-right:20px;}
.btn-lg{font-size:18px;}
.ma-header button{margin-right:40px; font-size: 0.4em; padding:10px 20px;}
.overlay-content .content{ opacity:0.9; width:94%; padding:3%; padding-top:80px; padding-bottom:120px;}
.overlay-content{padding:0; margin:0;}
.overlay-content .img-hover01{ margin:0; padding:0; margin-top:80px;}
.overlay-content .img-hover01{ width:100%; height:850px;}
.overlay-content .img-hover01 img{position: absolute; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width:100%; width:100%; height:auto;}
.footer-wrapper .copyright{ text-align:left;}
.footer-wrapper  .form-control{font-size:1.5em;}
.footer-wrapper .form-text{font-size:1em;}
.footer-wrapper h5{margin-top:40px;}
.footer-wrapper  .appimg{max-width:250px; margin-bottom:10px;}
#scrooltop{width:100px; height:100px; right:5%; bottom:10%;}
#reservation .btn-lg{font-size:1.5em;}
.mmenu{display:block;}
.page-title{font-size:2em;}
.grid-box .btn-outline-dark{font-size:1em;}
.footer-wrapper{padding:40px 25px;}
footer .fa-lg{font-size:3em; margin-right:20px;}
}
@media (max-width: 768px){}
@media (max-width: 576px) {}