@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');	
}

@font-face{
	font-weight: normal;
	font-style: normal;
	font-family: 'Lovelo Black';
		src:url(../fonts/lovleo/Lovelo%20Black.otf);
}

@font-face{
	font-weight: normal;
	font-style: normal;
	font-family: 'Otama.ep';
		src:url(../fonts/otama/Otama-ep.otf);
}

@font-face{
	font-weight: normal;
	font-style: normal;
	font-family: 'Lato';
		src:url(../fonts/lato/Lato-Reg.ttf);
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body {
	background: #fff;
	color: #8a8c7e;
	font-size: 100%;
	line-height: 1.25;
	/*font-family: 'Lato', 'Avenir Next', Arial, sans-serif;*/
	/*font-family:Lato, sans-serif;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif*/
	/*font-family:"Lovelo Black", sans-serif*/
/*	font-family:"Lobster 1.3", Script;*/
}

.spaceout-reserve{
	width:100%;
	background:#fff;
	height:4px;
	clear:both;
	margin:0;
	padding:0px 0;
	display:none;
}

.mobilegallery{
	margin:0 auto;
	padding:0;
	display:none;
}
.mobilegallery2{
	margin:0 auto;
	padding:0;
	display:none;
}
.centered2{ /*i HOLD THE Destination boxes*/
	width:300px;
	overflow:hidden;
	background:#add;
	border:none;
	height:1300px;
	display: none;
}

.Antiguabtn{
	font-family:"Otama.ep", serif;
	font-size:1.5em;
	color:#fff;
	letter-spacing:.2em;
	margin:7px 0 0 0;
	padding:0
}

.topgallery{
	position:absolute;
	top:170px;
	left:-160px;
	right:0;
	z-index:10;
	width:100%;
	overflow:hidden;
}

.maps{
	position:absolute;
	top:0;
	right:0;
	/*background:#f00;*/
	z-index:1;
}

.Antiguabtn span{
	font-family:Lato, sans-serif;
}
.Antiguabtn:hover{
	color:#1abc9c;
}

.hometitle{
	position:absolute;
	top:60px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
	width:100%;
	/*background:#ff0;*/
}

.hometitle .title{
	color:#ff0;
	font-size:5em;
	font-family:"Otama.ep", serif;
	width:100%;
	 
}
.hometitle .subtext{
	/*padding:0px 0 0 0;
	color:#fff;
	border-radius:10px;
	background:rgba(184,132,0,0.3);*/
	
	position:absolute;
	font-size:.8em;
	margin:0;
	padding:0;
	top:220px;
	left:260px;
	color:#fff; /*original green #1abc9c*/
	font-family:Lato, sans-serif;
	/*background:rgba(209,84,1,.10);
	border-radius:25px 0 25px 0;*/
	width:100%;
}

.mainimg{
	margin:10px 0 0 0;
	padding:0;
}

/*.hometitle .subtext:hover{
	background:rgba(255,255,255,0.49);
	position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
	
}*/

.rot8{
	-webkit-transform: rotate(90deg);	
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
letter-spacing: 0.1em;
color: #fff;
margin:0;
padding:0;
font-size:.7em;
}

.mobilenavmovr{
	margin:0;
	padding:0;
	display:none;
}



a {
/*	color: #99cc33;*/
	text-decoration: none;
}

a:hover, a:focus {
	/*color: #373e18;*/
}

.codrops-header {
	margin: 0 auto;
/*	padding: 2em 0 0;*/
	text-align: center;
}

.codrops-header h1 {
	margin: 0;
	font-weight: 300;
	font-size: 2.5em;
}

.codrops-header h1 span {
	display: block;
	padding: 0 0 0.6em 0.1em;
	font-size: 0.6em;
	opacity: 0.7;
}

/* To Navigation Style */
.codrops-top {
	width: 100%;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.69em;
	line-height: 2.2;
	background: #fff;
}

.codrops-top a {
	display: inline-block;
	padding: 0 1em;
	text-decoration: none;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	display: block;
	float: left;
}

.codrops-icon:before {
	margin: 0 4px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

.codrops-demos {
	margin: 30px auto 0;
	padding: 30px 0;
}

.codrops-demos a,
section button {
	display: inline-block;
	background: #a9a9a9;
	color: #fff;
	font-weight: 400;
	padding: 10px 20px;
	margin: 5px -40px 5px 5px;
	text-transform: uppercase;
	border-radius: 2px;
	letter-spacing: 1px;
}

.codrops-demos a:hover,
.codrops-demos a:active,
.codrops-demos a.current-demo {
	background: #777;
}

section {
	padding: 1em 2em 5em;
	text-align: center;
	font-size: 1.5em;
}

section p {
	max-width: 600px;
	margin: 0 auto;
	padding: 0px 0;
	font-size:.7em;
}

.textcolor{
	color:#000;
}

section button { /*the main button for mobile*/
	border: none;
	padding: 6px 8px;
	outline: none;
	background: #0072C6;/*#85b91e;*/
}

.btnmovr{
	position:fixed;
	right:0px; 
	top:-20px;
	z-index:1000;
}

.related > a {
	border: 1px solid #99cc33;
	display: inline-block;
	text-align: center;
	margin: 20px 10px;
	padding: 25px;
	color: #99cc33;
	opacity: 0.8;
	-webkit-transition: color 0.3s, border-color 0.3s;
	transition: color 0.3s, border-color 0.3s;
	-webkit-backface-visibility: hidden;
}

.related a:hover {
	border-color: #82b222;
	color: #82b222;
}

.related a img {
	max-width: 100%;
}

.related a h3 {
	margin: 0;
	padding: 0.5em 0 0.3em;
	max-width: 300px;
	text-align: left;
	font-size: 65%;
	font-weight: 400;
}





body {
  margin: 0;
  padding: 0;
}

.page-header { /*this is the bg for desktop nav*/
  /*background: #1abc9c;*/ /*original color*/
  
/*  background: rgba(26,188,156,.3);*/

  background:rgba(0,114,198,.4); /*original blue #0072C6*/
  padding: .5em .5em 0em .5em;
  overflow: hidden;
  /*border-bottom: 6px solid #16a085;*/ /*original border*/
  border-bottom: none;
}

.page-logo {
  max-width: 100px;
  height : auto;
}

.pull-left { float: left; }

.pull-right 
{ float: right; 
font-family:Lato, sans-serif;
}

.float-left{
	float:left;
}
.float-right{
	float:none;
	clear:both;
	/*background:#a00;*/
	width:100%;
/*	margin:79px 0 0 0;*/
	margin:79px 0 0 0;
	position:absolute;
	left:0;
	right:0;
	z-index:3;

}

.navbtn{
	width:25%;
/*	background:#1184D7;*/
	background:hsla(205,85%,45%,0.80);
	color:#0F3757;
	float:left;
	font-size:2em;
	margin:0;
	padding:1em 0;
	border-right:3px #2C5E86 solid;
	letter-spacing:2px;
}
.navbtn a{
	color:#12426A;
}

.navbtn:hover, .navbtn:focus .navbtn a:hover{
/*	background:#185689;*/
	background:hsla(207,70%,32%,0.70);

	color:#D1E6F7;
}

#booking{
	position:absolute;
	right:0;
	top:250px;
	z-index:100;
}


.menu {
  overflow: hidden;
  list-style: none;
  	text-align:right;
	background:#1693EB;
}

.menu li { /*I control the look of the nav buttons*/
  float: left;
  font-family:Lato, sans-serif;
  /*margin-left: 2em;*/
  font-size:3em;
  letter-spacing:.2em;

  

  
  /*  font-family: sans-serif;*/ /*original font*/
/*font-family:Lato, sans-serif;*/ /*font idea for menu*/

/*font-family:"Gandhi Sans", sans-serif;*/
  
}

.menu li a {
  color: #fff;
  text-decoration: none;
}

.menu li a:hover {
  color: #58B8FF; /*original #58B8FF*/
  text-decoration: none;
}


.page-content {
  /*max-width: 600px;*/
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
}

.container .page-content .pagestitle{
	font-family:"Otama.ep", serif;
	font-size:3em;
	color:#000;
	
}

.container .page-content .pagestitle-destinations{
	font-family:"Otama.ep", serif;
	font-size:3em;
	color:#000;
	
}

.container .page-content .pagestitle-reservations{
	font-family:"Otama.ep", serif;
	font-size:3em;
	color:#000;
	
}

.container .page-content .pagestitle-mobile{
	font-family:"Otama.ep", serif;
	font-size:3em;
	color:#000;
	display:none;
}
/*.container .page-content .pagestitle2{
	font-family:"Otama.ep", serif;
	font-size:3em;
	color:#000;
	
}*/

p {
  font-family: sans-serif;
  font-size: 1em;
  color: #999;
  line-height: 1.3em;
}

/*
- - - Relevant to demo - - - */

.page-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  -webkit-transition: top 0.6s;
  -moz-transition: top 0.6s;
  transition: top 0.6s;
}

.page-header.off-canvas { top: -89px; }

.page-header.fixed {
  top: 0;
  z-index: 9999;
}
	
.menufont{
	font-size:.4em;
	color:#fff;
}

.content-left-res{
	width:50%;
	float:left;
	height:500px;
	background-color:rgba(0,144,198,0);/*#0090c6*/ /*original color*/
	text-align: center; 
	color:#f00;
	padding:0 0 0 0px;
	margin:0 0 0 0px;
	overflow-y:scroll;
	overflow-x:hidden;
	/*border:1px solid #000;*/
	
}

.content-left{
	width:50%;
	float:left;
	min-height:500px;
	/*background:#d9a;*/
	text-align: center; 
	color:#f00;
	padding:0;
	margin:0;
	
}




.content-right{
	width:50%;
	float:left;
	min-height:500px;
	/*background:#EE9933;*/
	text-align: center; 
	color:#f00;
	padding:0;
	margin:0;
	
}

.content-left-suite{
	width:50%;
	float:left;
	min-height:500px;
	/*background:#d9a;*/
	text-align: center; 
	color:#f00;
	padding:0;
	margin:0;
	
}

.topgallery_main{
	width:50%;
	float:left;
	min-height:500px;
	/*background:#d9a;*/
	text-align: center; 
	color:#f00;
	padding:0;
	margin:0;
	
}

.gallery_styles{
	border:none;
}


.content-left > .imgctrl {
	 margin: 0 auto;  
}

.content-left > .imgctrl2 {
	 margin: 0 auto;  
	 
}

.suitegallery{
	background: url(../img/suite-main-img.jpg);
	display: inline-block;
	 width:500px;
	 height:500px;
	 float:left;
	 margin:0 0 0 80px;
	 webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
		transition: all 300ms ease-out;

}

.suitegallery:hover {
	 display: inline-block;
	 width:500px;
	 height:500px;
	 background: url(../img/suite-hover1.jpg);
	 	 margin:0 0 0 80px;
}

#quoter{
	width:100%;
	height:200px;
	margin:0;
	padding:0;
	background: url(../img/quote-img7.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display:block;
	color:#fff;
	font-family:Lato, sans-serif;
	font-size:1em;
	padding:20px 0 0 0;
}

#quoter .text{
	/*color:#fff;*/
	color:#fff;
	font-family:Lato, sans-serif;
	font-size:2em;
	padding:20px 0 0 0;
	display:block;
	width:100%;
}

#quoter2{
	width:100%;
	height:200px;
	margin:0;
	padding:0;
	background: url(../img/water.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display:block;
	color:#fff;
	font-family:Lato, sans-serif;
	font-size:1em;
	padding:20px 0 0 0;
}



#quoter .text-slider{
	/*color:#fff;*/
	color:#fff;
	font-family:Lato, sans-serif;
	font-size:1em;
	padding:0px 0 0 0;
	display:block;
	width:100%;
	background:#fff;
	margin:0px 0 0 0;
	display:none;
}

.texth1{
	color:#fff;
	font-family:Lato, sans-serif;
	font-size:1.2em;
	padding:20px 0 0 0;
	display:block;
	width:100%;
	font-weight:500;
	font-style:italic;
}
.scroll{
	color:#f00;
}

.page-header.past-main {
    /*background-color:#f00;*/
	color:#000;
	background:rgba(0,114,198,.96);
}

.page-header.past-main a:hover{
	color:#FCD116; /*original:#005696;*/
}


.homebtnhover:hover{
	/*display:none;*/
	color:#70ECD3; /*original: #1abc9c;*/
}



.spaceout{
	width:100%;
	background:#fff;
	height:50px;
	clear:both;
	margin:0;
	padding:100px 0;
}

.spaceout2{
	width:100%;
	background:#fff;
	height:50px;
	clear:both;
	margin:0;
	padding:50px 0;
}

.spaceout-locale{
	width:100%;
	background:#fff;
	height:50px;
	clear:both;
	margin:0;
	padding:30px 0 100px 0;
}

.destinationbox{
	width:190px;
	height:190px;
	background:#f00;
	float:left;
	padding:0;
	margin:10px 0 0 10px;
}

.destinationbox:nth-child(even){
	background:#d0a;
}

.centered{ /*i HOLD THE Destination boxes*/
	width:100%;
	background:#fff; /*#AADDAA*/
	height:600px;
	margin:-60px 0 0 0;
	padding:0px 0 0 10px;
	color:#fff;
	font-size:.6em;

}

.responsivebox{
	display:block;
	outline:none;
}

.destinationbtn{
	display:block;
	overflow:scroll;
	filter: grayscale(80%);
	-moz-filter: grayscale(80%);
	-ms-filter: grayscale(80%);
	-o-filter: grayscale(80%);
	-webkit-filter: grayscale(80%);
	position:relative;
	margin:0;
	padding:0;

}

.destinationbtn:hover{
	display:block;
	overflow:scroll;
	filter: blur(0px) grayscale(0%);
	-moz-filter: blur(0px) grayscale(0%);
	-ms-filter: blur(0px) grayscale(00%);
	-o-filter: blur(00px) grayscale(00%);
	-webkit-filter: blur(00px) grayscale(00%);
	margin:0;
	padding:0;
}

.destinationtext{
	visibility:hidden;
	position:absolute;
	margin:85px 0 0 15px;
	z-index:100;
	padding:0;
	/*background:#f00;*/
	font-size:1em;
}

.destinationbox:hover .destinationtext{
	visibility:visible;
	/*display:block;*/
	color:#fff;
}

.finito{
	background:#185689; 
	width:100%;
	padding:30px 0 0 0;
	margin:0;
	position:relative;
	color:#fff;
	height:80px;
	font-size:1.4em;
	font-weight:100;
	letter-spacing:.1em;
}

.tops{
	position:absolute;
	right:20px;
	top:-50px;
	margin:0;
	padding:0;
	overflow:hidden;
	width:93px;
	height:93px;
}

.topper{
	visibility:visible;
	background:url(../img/top-btn.png);
	 webkit-transition: all 400ms ease-out;
		-moz-transition: all 400ms ease-out;
		-o-transition: all 400ms ease-out;
		-ms-transition: all 400ms ease-out;	
		transition: all 400ms ease-out;
}

.topper:hover{
	background:url(../img/top-btn3.png);
}

.mobilebg{
	background:#000;
	width:100%;
	height:400px;
	margin:0;
	padding:0;
	position:absolute;
	display:none;

}

@media screen and (max-width: 25em) { /*I am cellphone size*/
	
	.float-right, .float-left{ /*I turn off the original nav from desktop*/
		display:none;
	}

	.codrops-icon span {
		display: none;
	}
	
	/*.mainimg{
	margin:10px 0 0 0;
	padding:0;
	
}*/

.finito{
	background:#185689; 
	width:100%;
	padding:30px 0 0 0;
	margin:0;
	position:relative;
	color:#fff;
	height:80px;
	font-size:1.4em;
	font-weight:100;
	letter-spacing:.1em;
	border:none;
}


.hometitle{
	position:absolute;
	top:160px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
	/*background:#ad0;*/
/*	display:none;*/
}

.spaceout-locale{
	width:100%;
	background:#fff;
	height:0px;
	clear:both;
	margin:0;
	padding:0px 0 0px 0;
}


.mainimg{
	position:absolute;
	top:100px;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
	width:100%;
	height:50%;
	/*width:300px;
	height:100px;*/
}

.page-header{/*this is the bg for desktop nav*/
  /*background: #1abc9c;*/ /*original color*/
  
/*  background: rgba(26,188,156,.3);*/

  background:rgba(0,114,198,.4); /*original blue #0072C6*/
  padding: .5em .5em 0em .5em;
  overflow: hidden;
  /*border-bottom: 6px solid #16a085;*/ /*original border*/
  border-bottom: none;
  width:50%;
}

.content-left, .content-right{ /*I control most of the content of the site*/
	float:none;
	clear:both;
	/*display:none;*/
}

.content-right{
	width:100%;
	float:left;
	min-height:500px;
	/*background:#EE9933;*/
	text-align: center; 
	color:#f00;
	padding:0;
	margin:0;
	/*background:#DDAAFF;*/
	
}

.content-left{
	padding:0px 0 50px 0;
	margin:0;
	/*background:#ad0;*/
	display:block;
	min-height:100px;
/*	overflow:hidden;*/
}

.content-left > .imgctrl {
	 margin: 0 auto;  
	 max-width: 200%;
	 height: auto;
	 display:block;
}

.content-left-suite{ /*I am villas image gallery container*/
	/*display:none;*/
	display:none;
	width:100%;
	float:none;
	clear:both;
	min-height:10px;
	/*background:#d9a;*/
	text-align: center; 
	color:#f00;
	padding:0;
	margin:0;
	
}


.suitegallery{  /*I am villas image gallery*/
	background: url(../img/suite-main-img.jpg);
	/*display: inline-block;*/
		display:none;
	 width:250px;
	 height:100px;
	 float:none;
	 clear:both;
	 margin:0 0 0 0px;
	 webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
		transition: all 300ms ease-out;

}


html, bodyi{
	background:#FFFFFF;
/*	background:f0a;*/
/*	margin:0;
	padding:0;*/
}

#quoter{ /*I control first quote*/
	font-size:5px;
}

#quoter2{
	width:100%;
	height:600px;
	margin:0;
	padding:0;
	background: url(../img/water.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display:block;
	color:#fff;
	font-family:Lato, sans-serif;
	font-size:1em;
	padding:20px 0 0 0;
}

.texth1{
	color:#fff;
	font-family:Lato, sans-serif;
	font-size:.8em;
	padding:20px 0 0 0;
	display:block;
	width:100%;
	font-weight:500;
	font-style:italic;
}

.centered{ /*i HOLD THE Destination boxes*/
	width:300px;
	overflow:hidden;
	background:#add;
	border:none;
	height:1300px;
	display: none;
}

.centered2{ /*i HOLD THE Destination boxes in 25em*/
	width:300px;
	overflow:hidden;
	background:none;
	border:none;
	height:4300px;
	display: block;
	margin:0;
	padding:0 0 0 0px;
}

#mainwrapper .box {
	border: 5px solid #fff;
	cursor: pointer;
	height: 182px;
	float: none;
	clear:both;
	margin: 5px;
	position: relative;
	overflow: hidden;
	width: 200px;

}

.container .page-content .pagestitle{
	font-family:"Otama.ep", serif;
	font-size:2.3em;
	color:#000;
	display:block;
	margin:0 auto;
	padding:0;
	/*background:#AADDAA;*/
	overflow:hidden;
	width:250px;
}

.container .page-content .pagestitle-destinations{
	font-family:"Otama.ep", serif;
	font-size:1em;
	color:#000;
	display:none;
}

.container .page-content .pagestitle-reservations{
	font-family:"Otama.ep", serif;
	font-size:1em;
	color:#000;
	display:none;
}

.container .page-content .pagestitle-mobile{
	font-family:"Otama.ep", serif;
	font-size:2.3em;
	color:#000;
	display:block;
}
}

@media screen and (max-width: 40em) {
	.codrops-icon span {
		display: none;
	}
	.mobilenavmovr{
	margin:0;
	padding:0;
	display:block;
}

	.mainimg{
	margin:10px 0 0 0;
	padding:0;
	
}


}

@media screen and (max-width: 100em) {
/*.mainimg{
	margin:60px 0 0 0;
	padding:0;
}*/

}