/*CSS*/
@font-face{font-family: Brandon_thin; src: url('font/Brandon_thin.otf')}
@font-face{font-family: Brandon_reg; src: url('font/Brandon_reg.otf')}
@font-face{font-family: Brandon_med; src: url('font/Brandon_med.otf')}
@font-face{font-family: Brandon_light; src: url('font/Brandon_light.otf')}
@font-face{font-family: Brandon_bld; src: url('font/Brandon_bld.otf')}

html{scroll-behavior: smooth;}
body{padding:0px; margin:0px; font-family:sans-serif, Brandon_light, arial, tahoma; font-size:16px;}
footer{}

h1{font-family:sans-serif, Brandon_thin; font-size:92px; color:#0f1f28; font-weight: 400; line-height:.9em;}
p{font-family:sans-serif, Brandon_light;}
a{text-decoration:none;}

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea, select{
	display: block;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0;
   /* -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-color: transparent;*/
    color: #555;
    padding: 1rem;
}

/*============ IDS ==============*/
#container{overflow:hidden;}
.wrapper{overflow-x:hidden;}

#header{background:transparent; position:absolute; z-index:9999999; width:100%;}
#logo{font-family:times-new-romans; font-size:32px; color:#fff; cursor:pointer;}

#banner{display:block; width:100%; height:100vh; margin:auto; -webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);}
#banner:after{content:''; transform:rotate(-4deg); bottom: -47px;}
#bannerContainer{display:block; float:left; width:100%; height:100vh;}
#prev{background-image: url('../images/left.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; display: block; float: left; height:100%; width:100px; position:relative; z-index: 999999; cursor: pointer; opacity:.2; transition:0.64s;}
#next{background-image: url('../images/right.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; display: block; float: right; height:100%; width:100px; position: relative; z-index: 999999; cursor: pointer; opacity:.2; transition:0.64s;}
#slider{display:block; height:100vh; width:100%; position:absolute; overflow:hidden;}
#bannerContainer section{position:absolute; z-index:99; width:280px; left:3%; margin-top:8%; background:rgba(255,255,255,1); padding:14px 18px; color:#555; font-size:14px; font-weight:100em; font-family:sans-serif, arial;}
#bannerContainer section input[type="text"],input[type="date"], select{height:42px; padding:4px 6px;}
.slides{width: 100%; height:100%; background-size:cover; background-attachment:fixed;}

/*#slider section{position:absolute; left:10%; top:35%; background:rgba(0,0,0,0.5); padding:35px; font-size:64px; color:#fff; font-weight:bold; font-family:arial;}
#slider section div{font-size:42px;}*/

.slidetext{position:absolute; z-index:99999; top:50%; left:10%; text-align:center; font-family:Brandon_thin; font-size:72px; color:#fff; font-weight:400; line-height:.9em; padding-bottom:10px;}

/*============ BANNERS =======*/
.banner{position:relative; height:100vh; width:100%; background-size:cover; background-repeat:no-repeat;  background-attachment:fixed; background-image: url('../images/resort-banner.jpg');}
.banner section{position:relative; top:46%; width:100%; text-align:center; font-family:Brandon_thin; font-size:72px; color:#fff; font-weight:400; line-height:.9em; padding-bottom:10px; z-index:999999;}
.banner div{margin:auto; width:50%; text-align:center; position:relative; top:46%; font-weight:bold; font-family:arial; color:#fff; font-size:18px; letter-spacing:1px; padding:16px 0px; border-top:1px solid #fff; z-index:999999;}

.banner2{position:relative; height:250px; width:100%; background-size:cover; background-repeat:no-repeat; background-image: url('../images/slider.jpg');}
.banner2 div{position:absolute; left:5%; right:5%; padding:24px;}

.banner3{position:relative; height:350px; width:100%; background-size:cover; background-repeat:no-repeat;}
.banner3 div{position:absolute; top:25%; left:5%; right:5%; padding:24px;}
 
#playvid{display:none; position:fixed; left:0px; top:0px; z-index:99999; width:100%; height:100%; padding-top:3%; background:rgba(0,0,0,0.5); text-align:center; vertical-align:middle;}
#playerid{width:760px; height:515px;} #playerid div{margin:auto; width:760px; text-align:right;}

.contact{color: #fff;}
.contact a{color:#fff; text-decoration:none; transition:0.24s;} .contact a:hover{color:#ef4f0b;}

/*=============== NAVIGATION ============== */
.nav{} 
.nav a{text-decoration:none; font-family:arial, Brandon_light; font-size:14px; letter-spacing: 1px; padding:0px 10px; color:#fff; transition:0.90s;} 
.nav a:hover{color:#40cfd3;}

.nav-link{padding-left:12px !important; padding-right:12px !important; text-align:center !important; font-size:14px;}

#menu{display:none; position:fixed; top:0px; left:0px; width:100%; height:100vh; background-image:linear-gradient(rgba(0,0,0,1),rgba(10,34,53,1));}
#menucontainer{overflow-y:scroll;} #menucontainer div{width:100%; padding:16px 0px; text-align:center; border-bottom:1px solid #fff;}
#menucontainer div a{width:100%; padding:16px 0px; color:#fff; text-decoration:none; text-transform:uppercase; font-size:18px;}

/*=========== MOBILE =========== */
#mbmenu{width:100%; background:#282828; height:auto; z-index:999999999; position:absolute; display:none;}
#mbmenu ul{list-style:none; margin:0px; padding:24px 0px;} 
#mbmenu li{display:block; padding:24px 0px; border-bottom:1px solid #eee;}
#mbmenu li a{text-decoration:none; color:#fff; text-transform:uppercase; font-family:tahoma; text-align:center; font-size:18px; transition:0.64s;}
#mbmenu li a:hover{color:#fff; background:teal;}

#footer{background:#0f1f28;}

/*==================================
				CLASSES
====================================*/
/* =========== BOOKING ==============*/
.booking{width:50%; height:95%; margin:auto; overflow:hidden; margin-top:1.5%; background:#fff;}
.bookingcontainer{width:100%; height:95vh; overflow-y:scroll;} 
.bookingcontainer div{padding:12px 0px; margin:auto; width:90%;}

.bookingshell{position:absolute; z-index: 99; left:0px; bottom:5%; width:100%;}
.bookcontainer{background:rgba(0,0,0,0.8); width:65%; margin:auto; padding:12px; text-align:center; transition:0.32s;} .bookcontainer:hover{background:rgba(255,255,255,1);}
.bookcontainer div{display:inline-block; width:30%; padding:15px 5px; text-align:center;}
.bookcontainer div input{margin:auto; border:none; border-bottom:1px solid #aaa; padding:4px; font-family:tahoma; width:95%; height:32px; font-size:16px; transition:0.42s; outline:none; }
.bookcontainer div input:focus{border-bottom:1px solid #f36409;}

.bookingshell-vert{position:absolute; z-index: 99; left:3%; top:20%; width:100%;}
.bookcontainer-vert{background:rgba(0,0,0,0.8); width:350px; padding:12px; text-align:center; transition:0.32s;} /*.bookcontainer-vert:hover{background:rgba(255,255,255,1);}*/
.bookcontainer-vert div{display:block; width:100%; padding:12px 5px; text-align:center;}
.bookcontainer-vert div input{margin:auto; border:none; border-bottom:1px solid #aaa; padding:4px; font-family:tahoma; width:95%; height:42px; font-size:16px; transition:0.42s; outline:none; }
.bookcontainer-vert div input:focus{border-bottom:1px solid #f36409;}

.booker{height:83vh; overflow-y:scroll;}
.submitntn{display:none;}

.relyoption{background:rgba(0,0,0,0.7); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:99999999;}

.form-field{width:100%; padding:0rem;} .form-field input, .form-field select, .form-field textarea{width:100%; max-width:100%; min-width:100%;}

.content-1{width:100%; margin:auto;}
.content-2{margin:auto; width:80%;}
.content-3{margin:auto; width:70%;}
.content-4{width:90%; margin:auto;}

/*============ FLOATERS ===========*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

/*============ WIDTH ===========*/
.half{width:50%;}
.quart{width:33%;}
.percent10{width:10%;}
.percent20{width:20%;}
.percent25{width:25%;}
.percent30{width:30%;}
.percent40{width:40%;}
.percent50{width:50%;}
.percent60{width:60%;}
.percent70{width:70%;}
.percent80{width:80%;}
.percent90{width:90%;}
.percent95{width:95%;}

/*============ BORDER ===========*/
.border-top-bottom{border-top:1px solid #40cfd3; border-bottom:1px solid #40cfd3;}
.border-top{border-top:1px solid #40cfd3;}
.border-bottom{border-bottom:1px solid #40cfd3;}
.border-left{border-left:1px solid #40cfd3;}
.border-right{border-right:1px solid #40cfd3;}
.border-full{border:1px solid #bfb7b8;}

.border-black{border-color:#000;}
.border-gray{border-color:#aaa;}

/*============ PADDING ===========*/
.padd7{padding:7px 0px;}
.padd12{padding:12px 0px;}
.padd18{padding:18px 0px;}
.padd24{padding:24px 0px;}
.padd30{padding:30px 0px;}
.padd42{padding:42px 0px;}
.padd64{padding:64px 0px;}
.padd72{padding:72px 0px;}

.space12{padding:0px 12px;}
.space24{padding:0px 24px;}
.space42{padding:0px 42px;}
.space64{padding:0px 64px;}

.padding7{padding:7px;}
.padding12{padding:12px;}
.padding18{padding:18px;}
.padding24{padding:24px;}
.padding30{padding:30px;}
.padding42{padding:42px;}
.padding64{padding:64px;}
.padding72{padding:72px;}

/*============ FONT FAMILY ===============*/
.font-arial{font-family:arial;}
.font-tahoma{font-family:tahoma;}
.font-roman{font-family:times new romans;}

/*============ LINE HEIGHT ===============*/
.line12{line-height:12px;}
.line14{line-height:14px;}
.line16{line-height:16px;}
.line18{line-height:18px;}
.line20{line-height:20px;}
.line24{line-height:24px;}
.line30{line-height:30px;}
.line34{line-height:34px;}
.line40{line-height:40px;}

/*============ COLOR ===============*/
.color-white{color:#fff;}
.color-black{color:#000;}
.color-grey{color:grey;}
.color-lightgrey{color:#f9f9f9;}
.color-blue{color:#16bacf;}
.color-red{color:#fe4e3f;}
.color-green{color:#8bff94;}
.color-dark-green{color:#45cc89;}
.color-orange{color:#ff8f26;}

/*============ ALIGNMENT ===========*/
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.block{display:block;}
.inline{display:inline-block;}

/*============ WEIGHT ===========*/
.bold{font-weight:bold;}
.normal{font-weight:normal !important;}
.italic{font-weight:italic;}

/*============ FONT SIZE ===========*/
.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font21{font-size:21px;}
.font28{font-size:28px;}
.font32{font-size:32px;}
.font42{font-size:42px;}

/*============ HEADERS ===========*/
.head1{font-size:72px;}
.head2{font-size:64px;}
.head3{font-size:42px;}
.head4{font-size:24px;}

/*============ TEXT TRANSFORM ===========*/
.upper{text-transform:uppercase;}
.capital{text-transform:capitalize;}

.overlay-text{height:100vh; position:relative; z-index:99999;}

/*============ BUTTONS ===========*/
.btn{padding:12px 24px; text-decoration:none; border:none; text-transform:uppercase; transition:0.75s;} .btn:hover{background:#222222; color:#fff;}
.btn-error{background:#fc4438; color:#fff !important;}
.btn-info{background:#009ddc; color:#fff !important;}
.btn-orange{background:#ee8031; color:#fff !important;}
.btn-green{background:#22975e; color:#fff !important;}
.btn-paypal{background:#FFC13C; border:solid 1px #E3B758; padding:14px 0px; color:#2A3046; font-weight:bold; cursor:pointer;}

/*=========== DROP DOWN ===========*/
.account-opt{background:#fff; width:100%; height:100vh; position:fixed; z-index:99999; display:none;}
.close-acc{float:right; font-size:32px; color:#222; cursor:pointer; padding:24px;}

/*=========== GRAIDENT ===========*/
.overlay{background-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); position:absolute; top:0px; left:0px; width:100%; height:100vh; z-index:99;} /*rgba(7,65,102,1), rgba(7,65,102,0)*/
.overlay-1{background-image: linear-gradient(to bottom, rgba(7,65,102,1), rgba(0,157,220,0.2)); position:absolute; width:100%; height:100vh; z-index:20;}

/*=========== BACKGROUND ===========*/
.teal{background:teal;}
.blue{background:#009ddc;}
.gray{background:#222222;}
.cleargrey{background:#f4f4f4;}
.lightgrey{background:#f9f9f9;}
.white{background:#fff;}

/*========= SHADOW ===============*/
.shadow{display:none; position:fixed; top:0; left:0px; width:100%; height:100%; z-index:999999999; background:rgba(0,0,0,0.8); transition:0.42s;}
.shadow-content{position:relative; top:5%; width:75%; height:90%; margin:auto; background:#fff; padding:24px;}
.panel-closer{float:right; padding:24px; color:#fff; font-size:42px; cursor:pointer;}

.shadow-1{display:none; position:fixed; top:0; left:0px; width:100%; height:100%; z-index:999999999; background:rgba(0,0,0,0.7); transition:0.42s;}



/*=========== LIST STYLES ============*/
.list{}
.list ul{list-style:none; padding:0px; margin:0px; width:100%;}

.list-1 li{display:inline-block; width:33.33%; height:600px; overflow:hidden; text-align:center; padding:0px; float:left;}
.list-1 li div{width:100%; height:100%; padding:0px;}
.list-1 li img{width:100%; height:100%; transform:scale(4); opacity:0; transition:4s;}

.list-2 li{display:block; width:100%; height:350px; font-family:arial !important;}
.list-2 li div{width:100%; height:100%; padding:24px; background:#eee;}
.list-2 li div img{height:350px;} .list-2 p{font-family:arial !important; font-size:18px;}

.list-3 li{display:inline-block; width:350px; height:350px; overflow:hidden;}
.list-3 li div{width:98%; height:98%; overflow:hidden;}
.list-3 li div img{width:100%; height:100%; transition:0.32s;}
.list-3 li a:hover img{transform:scale(1.05); opacity:0.7;}

.list-4 li{display:inline-block; width:20%; height:auto; overflow:hidden;}
.list-4 li div{width:96%; height:auto; background:#fff; margin:auto; overflow:hidden; color:#555; text-align:center;}
.list-4 li div img{width:100%; height:auto; transition:0.32s;}
.list-4 li div section{background:#f7f7f7; padding:12px; color:#555;}
.list-4 li div p{line-height:24px;}
.list-4 li article{text-align:center; width:300px; margin:auto; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.list-4 li a{text-decoration:none; color:#000; font-size:18px; padding:18px 0px; width:100%; border-radius:0px;}
.list-4 li a:hover img{transform:scale(1.05); opacity:0.7;}

.list-5 li{display:inline-block; width:240px; height:310px; overflow:hidden; vertical-align:top;}
.list-5 li div{width:98%; height:300px; margin:auto; overflow:hidden; text-align:center; background:#fff; transition:.32s;}
.list-5 li div img{width:100%; height:210px;}
.list-5 li article{text-align:center; width:240px; margin:auto; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.list-5 li a{text-decoration:none; color:#000; font-size:18px; padding:18px 0px; width:350px;}
.list-5 li div div{opacity:0; position:relative; margin-top:-305px; z-index:9999; width:100%; height:100%; background:#fe4e3f; color:#fff; transition:0.32s;}
.list-5 li div div section{padding:7px;}
.list-5 li:hover div div{opacity:1; transform: rotateY(180deg);}
.list-5 li:hover div{transform: rotateY(180deg);}

.list-6{padding:12px 0px; width:100%;}
.list-6 ul{list-style:none; margin:0px; padding:0px;}
.list-6 li{display:inline-block; padding:12px; width:22%;}
.list-6 li div{width:100%; height:250px; border:1px solid #ddd; overflow:hidden !important; transition:0.64s;}
.list-6 li section{background:#ddd; width:100%; padding:12px 1px; font-size:14px; letter-spacing:1px; text-transform:uppercase; text-align:left;}
.list-6 li section article{margin:auto; width:80%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}
.list-6 li img{width:100%; height:250px; transition:0.75s;}
.list-6 a{width:100%; text-decoration:none; color:#333333;}
.list-6 a:hover>div img{transform: scale(1.5);}

.list-7 li{display:inline-block; width:25%; height:250px; overflow:hidden;}
.list-7 li div{width:96%; height:auto; background:#fff; border:2px solid #ddd; margin:auto; overflow:hidden; color:#000; text-align:center;}
.list-7 li div img{width:240px; height:150px; transition:0.32s;}
.list-7 li article{text-align:center; width:100%; margin:auto; overflow:hidden; text-transform:uppercase; white-space: nowrap; text-overflow: ellipsis;}
.list-7 li a{text-decoration:none; color:#000; font-size:18px; padding:18px 0px; width:100%; border-radius:0px;}
.list-7 li a:hover img{transform:scale(1.05); opacity:0.7;}

.list-8 li{display:block; width:100%; padding:24px 0px; font-family:sans-serif, arial; font-size:14px; border-bottom:1px solid #e0e0e0;} .list-8 li a{font-family:tahoma !important;}
.list-8 li div{width:100%; margin:auto;}
.list-8 li div div{display:inline-block; text-align:left; font-family:tahoma !important; vertical-align:top; text-transform:capitalize;}
.list-8 li div div.list-left{width:20%;} .list-8 li div div.list-left img{width:100%; height:auto;}
.list-8 li div div.list-mid{width:30%; padding:0px 12px; line-height:28px;}
.list-8 li div div.list-right{width:35%;}
.list-8 li div div img{width:100%; height:190px;}

/*================ IMAGE LIST ==================*/
.image-1{display:inline-block; width:120px; height:90px; border:1px solid #222;}
.image-2{width:100%; height:auto; transition:0.32s;}

/*================ SOCIAL MEDIA ===============*/
.social-link{padding:14px 7px !important;}

.floater{position:fixed; z-index:99999; top:40%; right:0px; color:#fff;} .floater div{position:absolute; right:0px; transition:0.32s;}
.floater a{color:#fff; padding:0px;}
.wp{background:#075e54; padding:12px; top:96px;} .ig{background:#ed8128; padding:12px;} .fb{background:#395693; padding:12px 10.5px; top:48px;} .ph{background:#222; padding:12px 10.5px; top:142px;}
.wp:hover{padding-right:24px;} .ig:hover{padding-right:24px;} .fb:hover{padding-right:24px;} .ph:hover{padding-right:24px;}

.desktop{display:block;} .mobile{display:none;}

.svr div{}
.bookcontainer div{}

@media screen and (max-width: 1050px){
    h1{font-size:47px;}

    #next, #prev{visibility:hidden;}
    .banner{background-size:100% 100% !important;}
    .desktop{display:none;} .mobile{display:block;}
    .mob-center{clear:both; text-align:center; width:100% !important;}
    .mobl-nav{position:fixed; width:100%;}

    #playerid{width:100%;} #playvid{padding-top:30%;}
    .booking{width:90%;}

    .percent20, .percent30, .percent40, .percent50, .percent60, .percent70, .percent80, .percent90, .percent95{width:100% !important; clear:both !important; margin:auto;}
    .quart{width:100%; clear:both !important;}

    .left, .right{height:auto;}

    .overlay-text{height:auto; background:rgba(7,65,102,0.8); padding:14px;}

    /*============ HEADERS ===========*/
    .head1{font-size:36px;}
    .head2{font-size:32px;}
    .head3{font-size:21px;}
    .head4{font-size:12px;}

    /*============== PADDING =========*/
    .space12{text-align:center;}
    .padding42{padding: 42px 4px;}

    /*=========== LIST STYLES ============*/
    .list-1 li{width:100%;}
    .list-2 li{height:auto;} .list-2 li div{padding:0px;} .list-2 li div section img{height:260px; width:auto;}
    .list-2 section{display:block !important; width:100%;}
    .list-4 li{width:100%; padding:6px 0px;} .list-4 li div{width:100%; padding:0px;} .list-4 li div img{height:250px; width:100%;}
    .list-6 li{width:100%;}

    /*========== SHADOW ==================*/
    .shadow-content{width:90%; padding:12px; overflow-y:scroll;}
    .panel-closer{float:right; padding:5px; font-size:18px;}

    /*========== BOOKING =================*/
    .booker{height:auto;}
    /*=========== MICILANUS =============*/
    .svr div{display:block; width:100%; text-align:center;}
    .bookcontainer div{display:block; width:100%;}
    .container-mob{width:90%; margin:auto;}

    #footer .nav a{display:inline-block; padding:14px;}
    footer{text-align:center;} footer .col-md-3{border-top:1px solid #fff; padding:12px 0px;}
}