@import url("//hello.myfonts.net/count/355882");
@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
	height:100%
}
body {
	font: 14px/18px 'BeaufortPro-Light', Georgia, serif;
	color: #18263a;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

.resizeimg {max-width: 100%;height: auto;}
.inlineimg {vertical-align: bottom}

.flexmiddle {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

.flexrow {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}
.flexrow div {width:40%;margin:0 5%}
.whitetext {color:#fff}

.magenta {background:#f0f !important;color:#fff !important}
.magentaoverlay {position:relative}
.magentaoverlay:before {content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:rgba(255,0,255,0.5);pointer-events: none;z-index:4000}

.animatein {visibility:hidden}
.futura {font-family:'FuturaLTPro-Light';font-weight:normal}

h1 {text-transform:uppercase;letter-spacing:0.2em;color:#fff}
h2 {text-transform:uppercase;letter-spacing:0.1em;line-height:24px}
h3 {font-size:28px;line-height:32px;letter-spacing:0.1em;color:#8eb9cb;text-transform:uppercase;}
h4 {text-transform:uppercase;font-sizE:18px;line-height:22px;letter-spacing:0.1em}

/**** nav  ****/
.menubutton {display:block;position:fixed;top:30px;right:30px;width:40px;height:40px;z-index:5000;cursor:pointer;cursor:hand}
.menubutton .icons {width:100%;height:100%;position:relative}
.menubutton .icons .menuicon {display:block;width:100%;height:2px;background:#fff;position:absolute;top:calc(50% - 1px);
-webkit-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -o-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-webkit-box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);
-moz-box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);
box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);}
.menubutton .icons .menuicon:before {content:'';display:block;width:100%;height:2px;background:#fff;position:relative;top:-10px;
-webkit-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -o-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-webkit-box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);
-moz-box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);
box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);}
.menubutton .icons .menuicon:after {content:'';display:block;width:100%;height:2px;background:#fff;position:relative;top:8px;
-webkit-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -moz-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  -o-transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-webkit-box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);
-moz-box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);
box-shadow: 1px 1px 1px 0px rgba(24,38,58,1);}

.menubutton .icons .closeicon {display:block;width:100%;height:2px;background:#fff;position:absolute;top:calc(50% - 1px);
-webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out}
.menubutton .icons .closeicon:before {content:'';display:block;width:100%;height:2px;background:#fff;
-webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out}

.menuopen .icons .menuicon {opacity:0}
.menuopen .icons .menuicon:before {top:0;opacity:0}
.menuopen .icons .menuicon:after {top:-2px;opacity:0}

.menuopen .menubutton .icons .closeicon {transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);}
.menuopen .menubutton .icons .closeicon:before {transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);}

.navholder {overflow:hidden;position:fixed;top:0;right:0;width:50vw;height:100vh;z-index:4000;width:0;
-webkit-transition: width 0.4s ease-in-out;
  -moz-transition: width 0.4s ease-in-out;
  -o-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out}
.menuopen .navholder {width:50%}

.navholder .nav {width:50vw;height:100vh;position:relative}
.navholder .nav:before {content:'';display:block;position:absolute;z-index:-1;background:rgba(24,38,58,0.8);mix-blend-mode:multiply;width:100%;height:100%;opacity:0;
-webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out}
.menuopen .navholder .nav:before {opacity:1}
.navholder .nav ul {width:100%;list-style-type:none;margin:0;padding:0;text-align:right}
.navholder .nav ul li {margin:0;padding:10px 30px}
.navholder .nav ul li a {color:#fff;text-transform:uppercase;letter-spacing:0.2em;font-size:16px;line-height:20px;text-decoration:none}
.navholder .nav ul li a:hover {text-decoration:underline}
.navholder .nav .contact {position:absolute;bottom:30px;right:30px;text-align:right;color:#fff;font-size:13px;line-height:18px;letter-spacing:0.05em}
.navholder .nav .contact a {color:#fff}
.navholder .nav .contact p:last-child {margin:0}

/**** forms ****/

.login {margin-top:0px;padding-bottom:40px}
.login h3 {font-size:20px}
.textinput {margin:0;padding:0 10px;border:1px solid #fff;font-family:'FuturaLTPro-Light';background:rgba(24,38,58,0.4);color:#fff;font-size:12px;line-height:16px;border-right:0;height:38px;width:calc(20vw - 40px);min-width:100px;display:inline-block;float:left;letter-spacing:0.1em}
.submitbutton {background:#18263a url(../img/ui/rightarrow.svg) 50% 50% no-repeat;background-size:10px auto;border:1px solid #fff;border-left:0;width:40px;height:40px;position:relative;top:0px;cursor:pointer;cursor:hand;margin:0;display:inline-block;float:left}
.submitbutton:hover {background-color:#8eb9cb}
.loginform {position:relative}
.actualpassword {letter-spacing:0.2em}

.loginholder {width:100%;margin:0 auto}
.login .textinput {width:calc(100% - 61px);margin:0 auto;float:left}
.login .submitbutton {float:none}

label.error {border-bottom:1px solid #A40002}
input.error {border-color:#A40002 !important}

#contactform {text-align:center}
#contactform input.textinput, #contactform input[type='submit'] {margin:0;padding:0 10px;border:1px solid #fff;font-family:'FuturaLTPro-Light';background:rgba(24,38,58,0.4);color:#fff;font-size:12px;line-height:16px;height:38px;width:calc(100% - 20px);min-width:100px;display:inline-block;letter-spacing:0.1em;displauy:block;margin-bottom:10px}
#contactform input[type='checkbox'] {width:15px !important;height:15px;display:inline-block;text-align:left;margin:0;padding:0}
#contactform input[type='submit'] {background:rgba(24,38,58,1);width:calc(50% - 10px)}

#contactform input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(255,255,255,0.6);
    opacity: 1; /* Firefox */
}

#contactform input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255,255,255,0.6);
}

#contactform input::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(255,255,255,0.6);
}

.bluestrip #contactform p {padding:0}

.sent {position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(24,38,58,0.8);z-index:4990}
.sent div {background:#fff;border-radius: 5px;padding:40px;text-align:center}

.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4 {text-decoration:underline}

.pagebanner {width:100%;height:100vh;position:relative;background:50% 50% no-repeat;background-size:cover;text-align:center}
.banneroverlay {position:absolute;top:0;left:0;width:100%;height:100vh;background:rgba(24,38,58,0.7);mix-blend-mode:multiply;z-index:10}
.bannerhome {display:block;position:absolute;top:45px;left:calc(50% - 120px);width:240px;height:15px;background:url(../img/content/logo.svg) no-repeat 50% 50%;background-size:contain;z-index:52}
.logoholder {width:100%;height:calc(100vh - 90px);position:absolute;top:0;left:0;z-index:50}
.bannercontent {position:absolute;left:0;bottom:90px;width:100%;color:#fff;z-index:51}

.caps {letter-spacing:0.1em}

.pagecontent {padding-top:40px}
.paddingtop {padding-top:100px}
.paddingtophalf {padding-top:50px}
.paddingtopdouble {padding-top:200px}
.paddingbottom {padding-bottom:50px}

.opportunities h3 {font-size:20px;margin:20px 0 20px 0}

.bluestrip {background:#8eb9cb;color:#18263a;padding-top:40px;margin-top:20px}
.bluestrip h3 {color:#fff}
.bluestrip p {padding-right:20px}


/**** footer ****/
.footer {background:#131f30;color:#fff;text-align:center;padding-bottom:40px;line-height:20px;padding-top:40px}
.footer a {color:#fff}
.footer1 {background:#18263a;margin-bottom:40px;display:none}
.loginpage .footer {padding-top:0}
.loginpage .footer1 {display:block}
.interestbutton {display:block;border:1px solid #fff;padding:13px 0 10px 0;text-decoration:none;margin:80px 0;font-size:13px;line-height:13px;letter-spacing:0.2em}
.interestbutton:hover {background:#8eb9cb}

.instagram {float:left;display:block;background: url(../img/content/footer/instagram.svg) top left no-repeat;background-size:30px;height:30px;text-decoration:none;padding:7px 0 0 40px;margin-top:48px}
.ukeuropean {float:right;width:200px;margin-top:48px}




/* #Page Styles
================================================== */

/**** home ****/
.homebanner {position:relative;width:100%;height:100vh;overflow:hidden}
.videocontainer {position:relative;width:100%;height:100vh;overflow:hidden}
.videocontainer video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}
.videooverlay {position:absolute;top:0;left:0;width:100%;height:100vh;background:rgba(24,38,58,0.7);mix-blend-mode:multiply;z-index:10}
.videotext {position:absolute;top:25vh;left:0;width:100%;height:50vh;text-align:center;z-index:1000}
/*.videotext {position:absolute;top:200px;left:200px;font-size:72px;z-index:9999}*/
/*position:absolute;top:200px;left:200px;font-size:72px;z-index:9999*/
.homelogo {width:240px;height:15px}
.playvideo {text-transform:uppercase;display:block;color:#fff;font-size:12px;margin-top:30px;letter-spacing:0.2em;cursor:pointer;cursor:hand}
.playvideo:hover {text-decoration:underline}

.previewvideo {z-index:5;}
.fullvideo {width:100%;height:100vh;position:absolute;top:0;left:0;z-index:6000;background:#000;display:none}
.fullvideo .flexmiddle {width:100%;height:100vh}
.fullvideo .fullvideoholder {max-width:100%;max-height:100%;position:relative;text-align:center}
.fullvideo .fullvideoholder video {max-width:100%;max-height:100%;object-fit:contain;}
.closevideo {width:40px;height:40px;background:url(../img/ui/close.svg) no-repeat 50% 50%;background-size:75%;cursor:pointer;cursor:hand;position:absolute;top:30px;right:30px;z-index:50;/*display:none*/}



@supports (-ms-ime-align:auto) {
	.videocontainer {
		position: relative;
		top: 0;
		left: 0;
		z-index: -1;
		height:100vh;
		width: 100%;
		-webkit-transform-style: preserve-3d;
		overflow: hidden;
	}
	
	.videocontainer video {
		position: absolute;
		z-index: -1;
		top:50%;
		left:50%;
		height:auto;
		width:auto;
		min-width:100%;
		min-height:100%;
		transform:translate(-50%, -50%);
		object-fit:cover;
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.videocontainer {
		position: relative;
		top: 0;
		left: 0;
		z-index: -1;
		height:100vh;
		width: 100%;
		-webkit-transform-style: preserve-3d;
		overflow: hidden;
	}
	
	.videocontainer video {
		position: absolute;
		z-index: -1;
		top:50%;
		left:50%;
		height:auto;
		width:auto;
		min-width:100%;
		min-height:100%;
		transform:translate(-50%, -50%);
		object-fit:cover;
	}
}

.downarrow {width:100%;height:20px;background:url(../img/ui/downarrow.svg) 50% 50% no-repeat;background-size:contain;position:absolute;bottom:40px;left:0;z-index:1000}

.turtlebg {background:url(../img/content/home/turtlebg.jpg) no-repeat bottom -1px right;background-size:100% auto;padding-bottom:20vw}
.turtleoverhang {margin-top:-15vw}
.greybg {background:#d0d0d0}
.locationheading {margin:20px 20px 0 0;text-align:right}
.mapthumb {display:block;background:#18263a url(../img/content/home/mapsmall.png) 50% 50% no-repeat;background-size:70%;height:40vw;max-height:600px;margin-top:-15vw;position:relative;z-index:500}
.zoom {position:relative;display:block}
.zoom:after {content:'';display:block;width:40px;height:40px;background:url(../img/ui/zoom.svg) no-repeat 50% 50% #fff;background-size:20px;position:absolute;bottom:0;right:0}
.zoom:hover:after {background-color:#8eb9cb}
.gallery {width:100%;height:100vh;position:relative}
.gallery .slide {width:100%;height:100%;background:50% 50% no-repeat;background-size:cover}
.cycle-prev, .cycle-next {display:block;cursor:pointer;cursor:hand;position:absolute;bottom:0;width:40px;height:40px;z-index:1000}
.cycle-prev {left:40px;background:#18263a url(../img/ui/leftarrow.svg) 50% 50% no-repeat;background-size:10px}
.cycle-next {left:80px;background:#8eb9cb url(../img/ui/rightarrow.svg) 50% 50% no-repeat;background-size:10px}
.cycle-next:hover, .cycle-prev:hover {background-color:#000}
.galleryoverhang {margin-top:-60px;margin-bottom:60px}

.villas h3 {font-size:18px;line-height:18px;margin-top:40px;letter-spacing:0.1em}
.villas h3 span {font-size:12px}
.villas {text-align:center}
.morebutton {display:inline-block;background:#8eb9cb;color:#fff;text-transform:uppercase;letter-spacing:0.2em;padding:10px 20px;margin:0px 0 80px 0;text-decoration:none}
.morebutton:hover {background:#18263a;color:#fff}

/**** villa tamarindo ****/
.tamarindologo {width:300px}

.villagallery {height:calc(100vh - 80px);width:100%;position:relative;margin-bottom:40px}
.villagallery .slide {width:100%;height:100%;background:50% 50% no-repeat;background-size:cover}
.villagallery .cycle-prev {left:0px}
.villagallery .cycle-next {left:40px}

.villagallery2 {height:57vw;width:calc(100% - 80px);position:relative;margin:0 40px 40px 40px}
.villagallery2 .slide {width:100%;height:100%;background:50% 50% no-repeat;background-size:cover}
.villagallery2 .cycle-prev {left:0px}
.villagallery2 .cycle-next {left:40px}

.villaplan {padding:0 20px 20px 20px}
.north {position:absolute;top:0;right:0;width:50px}

/**** future villa ooptions ****/

.moonfleetlogo {width:300px;margin:20px 0}

/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {display:none !important}
.pp_social {display:none !important}
.pp_description {display:none !important}

.smallText { font-size: 11px; }
.smallprint {
	font-size: 11px;
	color: #BBBDC0;
}
.smallprint a { color: #BBBDC0; }
.padTop { margin-top: 30px; }
.largeText { font-size: 13px; }

.superscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;}
.subscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: 0.4em;}
	
.vmiddle {position: relative;top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}


.revealOnScroll.fadeInUp {
  opacity: 0;
}

/**** slicknav ****/
.slicknav_menu {
	display:none;
}

@media screen and (max-width: 767px) {
	#nav {
		display:none;
	}
	
	.slicknav_menu {
		display:block;z-index:1000;position:fixed;top:0;right:0;padding:0;width:100%;height:0;
	}
	.slicknav_menu .vmiddle {position: relative;top: 0;  -webkit-transform: translateY(0);  -ms-transform: translateY(0);  transform: translateY(0);}
	.slicknav_menu .logo {display:none}
	.slicknav_btn {margin:0;background:#666666;position:fixed;top:30px;right:30px;border-radius:0;padding:8px 5px 8px 5px;height:35px;z-index:600}
	.slicknav_menu .slicknav_menutxt {font-family:"Lato", Arial, Helvetica, sans-serif;letter-spacing:0.1em;color:#fff;text-shadow:none;font-weight:300}
	.slicknav_menu .slicknav_icon {width:30px}
	.slicknav_menu .slicknav_icon-bar {background-color:#aaaaaa;box-shadow:none;height:3px;width:30px;margin:5px 0;transition:0.2s;opacity:1;position:relative}
	.slicknav_menu .slicknav_icon-bar:nth-of-type(1) {margin-top:0}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(1) {opacity:1;transform: rotate(45deg);top:8px}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(2) {opacity:0;transform: rotate(-135deg);}
	.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-of-type(3) {opacity:1;transform: rotate(-45deg);top:-8px}
	.slicknav_btn:hover .slicknav_icon-bar {background-color:#fff}
	.slicknav_nav {width:100%;background:#fff}
	.slicknav_nav a {color:#fff;display:inline-block;padding:8px 0;width:auto;margin:0}
	.slicknav_nav ul {margin:0}
	.slicknav_nav li {margin:0 !important;text-align:center;text-transform:uppercase;letter-spacing:0.1em}
	.slicknav_nav a:hover {text-decoration:underline}
	
	.slicknav_nav {background:#383737}
}

/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {}
	
	/* bigger desktop */
	@media only screen and (min-width: 1100px) and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 959px) and (max-width:1099px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.loginholder {width:100%;margin-bottom:40px}
}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		.mobilehide {display:none}
		h1 {font-size:18px;margin-bottom:0}
		
		.closevideo {top:20px;right:20px;width:30px;height:30px}
		
		.downarrow {height:10px;bottom:20px}
		.galleryoverhang {margin-top:0}
		.paddingtopdouble {padding-top:80px}
		.instagram {float:none;display:inline-block}
		.ukeuropean {float:none}
		
		.menubutton {top:20px;right:20px;width:30px;height:30px}
		.menuopen .navholder {width:100%;overflow:hidden}
		.navholder .nav {width:100vw}
		.navholder .nav ul li {padding:5px 15px}
		.navholder .nav ul li a {font-size:13px;line-height:16px}
		
		.navholder .nav .contact {bottom:20px;right:20px;font-size:13px;line-height:16px}
		.navholder .nav .contact p {margin-bottom:5px}
		
		.locationheading {text-align:left}
		.mapthumb {height:400px;margin-top:0}
		
		.bannerhome {top:30px}
		.logoholder {height:calc(100vh - 50px)}
		.tamarindologo {width:200px}
		.bannercontent {bottom:50px}
}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		.bannerhome {left: calc(50% - 90px);width: 180px;height: 15px;}
		.cycle-slideshow {height:50vh}
}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@font-face {font-family: 'BeaufortPro-Light';src: url('/webfonts/355882_0_0.eot');src: url('/webfonts/355882_0_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/355882_0_0.woff2') format('woff2'),url('/webfonts/355882_0_0.woff') format('woff'),url('/webfonts/355882_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'FuturaLTPro-Light';src: url('/webfonts/355882_1_0.eot');src: url('/webfonts/355882_1_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/355882_1_0.woff2') format('woff2'),url('/webfonts/355882_1_0.woff') format('woff'),url('/webfonts/355882_1_0.ttf') format('truetype');}