@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,300);

/* ------------------------------------
   CSS Prefix
   -----------------------
   <div> - layer
   <table> - table
   <tr> - row
   <td> -column
   <h1>~<h6> - header
   <span> - style
   <a> - link
   <ul>/<ol> - listing
   <li> - list
   <img> - img
   <p> - panel  
---------------------------------------*/

@media all{
@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
	border:0;
	outline:0; 
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	color:#888888;
	line-height:24px;
	font-weight:400;
}

a {
	color: #83bc69;
	text-decoration:none;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	transition: all .5s ease-out;
	-webkit-user-modify: read-only;
	-moz-user-modify: read-only;
}

a:hover{
	color: #0d9c92;
	text-decoration:none;
}


/* Text Style*/
h1 {
	font-size: 32px;
	font-weight:400;
	color:#000000;
	letter-spacing:2px;
	text-transform:uppercase;	
	margin:0;
	padding:0;
}
h2 {
	font-size: 24px;
	font-weight:500;
	color:#000000;
	line-height:30px;
	letter-spacing:2.5px;
	text-transform:uppercase;
	text-align:cener;
	margin:0 0 60px;
	padding:0;
}
h2:before{
  content: "";
  display: block;
  text-align: center;
  border-bottom: 2px solid black;
  width: 60px;
  padding: 0;
  position: relative;
  top:50px;
  left: 50%;
  margin-left: -30px;
  right: 0;	
}
h3 {
	font-size: 24px;
	font-weight:500;
	color:#000000;
	line-height:30px;
	letter-spacing:2.5px;
	text-align:cener;
	text-transform:uppercase;
	margin:0 0 60px;
	padding:0;
}
h4 {
	font-size: 18px;
	font-weight:500;
	color:#000000;
	line-height:26px;
	letter-spacing:2.5px;
	text-transform:uppercase;
	margin:0 0 30px;
	padding:0;
}

p{
	margin:0 0 60px;
	padding:0;	
}

.layer-more a{
	font-size:11px;
	font-weight:400;
	color:#b4b4b4;
	letter-spacing:2.5px;
	text-transform:uppercase;
	padding:0 0 15px;
}
.layer-more a:hover{
	color:#000;
}
.layer-more2, .layer-more2 a{
	font-size:16px;
	font-weight:400;
	color:#000;
	letter-spacing:2.5px;
	text-transform:uppercase;
	padding:0 0 15px;
}
.layer-more2 a:hover{
	color:#b4b4b4;
}
.layer-more:before, .layer-more2:before{
    content: "";
	display:block;
	width:60px;
	border-bottom:1px solid #b4b4b4;
	text-align:center;
	position: relative;
	top:30px;
    left: 50%;
    margin-left: -30px;
}
.spanbox-home .fa {font-size:14px;color:#ccc;padding:0 10px;}
.youtube-video {width:100%;max-height:400px;}

.red {color:#FF0000;}
.orange {color:#f5ac1c;}
.grey {color:#666666;}
.green {color:#73AD00;}
.blue {color:#0069b3;}
.black {color:#000000;}
.blackbold {color:#000000; font-weight:bold;}
.white {color:#ffffff;}
.gold {color:#b8a252;}
.bgRed {background:#FF0000;}
.bgOrange {background:#FF6600;}
.bgGrey {background:#666666;}
.bgGreen {background:#73AD00;}
.bgBlue {background:#2d95d1;}
.bgBlack {background:#000000;}
.bgWhite {background:#ffffff;}

/* reusable classes */
.floatLeft {float:left;width:auto;}
.floatRight {float:right;width:auto;}
.right {text-align:right;}
.left {text-align:left}
.center {text-align:center;}
.justify {text-align:justify}
.blank {border:1px solid #bbb;padding:0;margin:0;}
.subtitle {color:#000000;padding:15px 15px 0 15px;}
.caption {font-family:arial,verdana;font-size:10px;font-style:normal;font-weight:bold;color:#999999;}
.alert {color:#CC0000;font-size:15px;}
.spacer {line-height:1px;}
small {color:#999;font-size:80%;}
.line {border-top: 1px solid #999999;height: 1px;margin-top:6px;margin-bottom:6px;padding:0px;clear:both;}
.dotted {border-top: 1px dotted #999999;height: 1px;margin-top:3px;margin-bottom:3px;padding:0px;}
.imgFloatLeft {float:left;padding:0 20px 20px 0;display:block;}
.imgFloatRight {float:right;padding:0 0 20px 20px;display:block;width:auto;}
.btn-submit a{
	background:#64c4b0;
	padding:10px 20px;
	color:white!important;
	font-size:16px;
	font-weight:400!important;
	text-transform:uppercase;
	letter-spacing:2px;
	display:inline-block;
}
.btn-submit a:hover{
	background:#00a99d;
	padding:12px 22px;
}
img.img-responsive{
	width:100%;
	height:auto;
}

/*general*/
.clear{clear:both;}

.clearfloat:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
* html .clearfloat {
    height: 1%;
}
.clearfix {
    display: block;
}

.hide {
	display: none;
}

.center{
		text-align: center;    
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }


input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
#element::-webkit-scrollbar { 
    display: none; 
}

/* Alignment Style */
body {
	padding:0;
	margin:0 auto;
	background: white;
}


/*Controls Section*/
.layer-wrapper {
	width: 100%;
	margin: 0 auto;
	padding:0;
	background:white;
	position:relative;
	z-index:0;
}
.layer-content{
	width: 980px;
	margin: 0 auto;
	padding: 0;	
	position:relative;
	z-index:110;
}
section{
	text-align:center;
}

/**** Header ****/
header{
	width:100%;
	position:absolute;
	z-index:20;
}
.header2{
	position: static!important;
	border-bottom:1px solid #a3d8cd;
}
	header .layer-topLine{
		margin:10px 0;
		width:100%;
		height:6px;
		background:#64c4b0;
	}
	header .layer-header{
		padding:5px 0 0;
		background: url(../img/bar-bg.png) repeat transparent;
	}
	header .layer-header .layer-logo{
		width:200px;
		float:left;
	}
	/* Nav */
	header .layer-header nav{
		float:right;
		padding-right:115px;
		margin-top: 12px;
	}
	header .layer-header nav ul{
		list-style-type:none;
		margin:0;
		padding:26px 0 0;
	}	
	header .layer-header nav ul li{
		float:left;
	}
	header .layer-header nav ul li a{
		color:black;
		font-size:12px;
		text-transform:uppercase;
		margin:0 0 0 20px;
	}
	header .layer-header nav ul li a:hover{
		color:#0d9c92;
		text-decoration:none;
	}
	header .layer-header nav ul li a.selected{
		color:#0d9c92;
		font-weight:700;
		text-decoration:none;
		border-bottom:2px solid #0d9c92;
		padding:0 0 12px;
	}	
	header .layer-header nav ul li.listing-home{
		vertical-align:middle;
		margin:-3px 0 0;
	}	
	header .layer-header nav ul li.listing-home a{
		opacity:1.0;
	}
	header .layer-header nav ul li.listing-home a:hover{
		vertical-align:middle;
		opacity:0.6;
	}	
	header .layer-header nav ul li.listing-brochure a{
		color:#83bc69!important;
		font-weight:700!important;
	}
	header .layer-header nav ul li.listing-brochure a:hover{
		color:#639d49!important;
	}	
	/* end Nav */
	header .layer-header .layer-btnRegister{
		width:85px;
		height:85px;
		margin:0 0 0 20px;
		position:absolute;
		top:35px;
		right:0;
	}
	header .layer-header .layer-btnRegister a{
		width:85px;
		height:40px;	
		background:url(../img/icon-register.png) center 11px no-repeat #00a99d;
		border-radius: 50%;	
		display:block;
		font-size:12px;
		font-weight:700;
		color:white;
		text-align:center;
		text-transform:uppercase;
		padding:45px 0 0;
		-webkit-transition: all 200ms linear;
		-moz-transition: all 200ms linear;
		-ms-transition: all 200ms linear;
		transition: all 200ms linear;
		-webkit-user-modify: read-only;
		-moz-user-modify: read-only;		
	}
	header .layer-header .layer-btnRegister a:hover{
		box-shadow: 0px 0px 20px 10px #ffffff;
	}

/***** Banner *****/
/* Slider goDown */
span.style-goDown{
	position:absolute;
	top:600px;
	left:0;
	right:0;
	text-align:center;
	z-index:30;	
}
span.style-goDown a{
	opacity:1.0;
}
span.style-goDown a:hover{
	opacity:0.6;
}
/* Banner Title Tag */
.style-titleTag{
	position: absolute;
    top: 270px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 30;
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 2px;
    color: white;
    text-shadow: 0px 0px 15px #000000;
    text-transform: uppercase;
    margin: 0 0 20px;
    padding: 0;	
}
.style-titleTag:before{
    content: "";
    display: block;
    text-align: center;
    border-bottom: 2px solid white;
    width: 60px;
    padding: 30px 0 0;
    position: relative;
    top: 55px;
    left: 50%;
    margin-left: -30px;
    right: 0;
}

h3.header-title{
	position:absolute;
	top:385px;
	left:0;
	right:0;
	text-align:center;
	z-index:30;	
	font-size:16px;
	font-weight:700;
	letter-spacing:2px;
	color:white;
	text-shadow: 0px 0px 15px #000000;
	text-transform:uppercase;
	margin:0;	
}

.zoom.visible > img {
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: move;
  animation-name: move;
  animation-direction: alternate;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  -o-animation-direction: alternate;
  -ms-transform-origin: middle center;
  transform-origin: middle center;
  -webkit-transform-origin: middle center;
  -o-transform-origin: middle center;
  -moz-transform-origin: middle center;
}
.zoom > img {
  height: auto!important;
  width: 100%!important;
}
.imagen1 {
  top: 0px;
  visibility: visible;
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  left: 0px;
  z-index: 1;
}
#block1, #block2 {
  position: relative;
  width: 100%;
  height: 900px;
  overflow: hidden;
}

/**** Content *****/
/* Section About */
.layer-about{
	text-align:center;
	height:730px;
	padding:80px 0 60px;
	margin:0 auto;
	position:relative;
}
	.layer-about .layer-info{
	  width: 100%;
	  position: absolute;
	  text-align:center;		
	}
	.layer-about .layer-deco, .layer-contact .layer-deco, .layer-page .layer-deco{
	  width: 100%;
	  position: absolute;
	  right: 0;
	  text-align: right;
	  top: 30px!important;
	  background:url(../img/deco.png) right top no-repeat;
	  height:360px;
	}
	.layer-page .layer-decoLeft{
	  width: 100%;
	  position: absolute;
	  right: 0;
	  text-align: left;
	  top: 30px!important;
	  background:url(../img/deco-left.png) left 2550px no-repeat;
	  height:3000px;
	}
	
/* Section Quote */	
#quote .header{background:url(../img/bgPic.jpg) no-repeat fixed;background-size:cover;padding:0;margin:0 auto;position:relative;line-height:0!important;}
#quote h2.quote{color:#fff; text-align:center;margin:80px auto 94px;}
#quote h2.quote:before{
  content: "";
  display: block;
  text-align: center;
  border-bottom: 2px solid white;
  width: 60px;
  padding: 30px 0 0;
  position: relative;
  top:80px;
  left: 50%;
  margin-left: -30px;
  right: 0;	
}
#quote .header-facilities{background:url(../img/bgPic-facilities.jpg) no-repeat fixed;background-size:cover;padding:0;margin:0 auto;position:relative;line-height:0!important;}
#quote .header-residence{background:url(../img/bgPic-residence.jpg) no-repeat fixed;background-size:cover;padding:0;margin:0 auto;position:relative;line-height:0!important;}

/* Section Contact */
.layer-contact{
	text-align:center;
	padding:60px 0;
	margin:0 auto;
	position:relative;
}
	.layer-contact .layer-logoKeringat{
		margin:0 0 20px;
	}
	.layer-contact .layer-logoKeringat a{
		opacity:1.0;
	}
	.layer-contact .layer-logoKeringat a:hover{
		opacity:0.6;
	}
	.layer-contact ul{
		list-style-type:none;
		padding:25px 0 0;
		margin:0;
	}
	.layer-contact ul li{
		width:315px;
		float:left;
		text-align:center;
		font-size:16px;
		font-weight:400;
		color:#00a99d;
	}	
	.layer-contact ul li.listing-center{
		width:315px;
		float:left;		
		margin:0 15px;
	}	
	.layer-contact ul li span.style-minFont{
		font-size:12px;
		font-weight:400;
		color:#00a99d;		
	}
	.layer-contact ul li a{
		color:#00a99d;
		text-decoration:none;
	}
	.layer-contact ul li a:hover{
		text-decoration:underline;
	}	
	.layer-contact ul li img{
		margin:0 0 15px;
	}
	.layer-contact .layer-mapIcon{
		margin:-40px 0 20px;
	}
	.layer-contact .layer-mapIcon img{
		margin:0 5px;
	}
	.layer-contact .layer-mapIcon{
		margin:-40px 0 20px;
	}
	.layer-mapIcon img{
		margin:0 5px;
	}	
/* Page */
.layer-page{
	text-align:center;
	padding:60px 0;
	margin:0 auto;
	position:relative;
}
/*Residence*/
.layer-floorPlan{
}
	.layer-floorPlan ul, .layer-floorPlan2 ul{
		list-style-type:none;
		margin:0;
		padding:0;
	}
	.layer-floorPlan ul li, .layer-floorPlan2 ul li{
		float:left;
		text-align:left;
		margin:0 0 20px 0;
	}
	.layer-floorPlan ul li.listing-right{
		padding:50px 0 0 50px;
	}
	.layer-floorPlan2 ul li.listing-left{
		padding:50px 0 0 0;
	}
	.layer-floorPlan2 ul li.listing-right{
		float:right;
	}
.layer-levelPlan{
	text-align:center;
	line-height:0;
	background:#8dd2cf;
}
.layer-spec{
	padding:0;
}
	
/* Form */
.layer-form{
	text-align:center;
	padding:0;
	margin:0 auto;
	background:#ddd;
	line-height:0!important;
}
.layer-form .layer-content{
	padding:30px 0!important;
}
	.layer-form .layer-left{
		float:left;
		width:445px;
	}	
	.layer-form .layer-right{
		float:right;
		width:445px;
	}	
	.layer-form label{
		display:block;
		text-transform: uppercase;
		font-size: 14px;
  		letter-spacing: 1px;
	}
	.layer-form input, .layer-form textarea{
	  display: block;
	  margin: 3px 0 15px;
	  width: 440px;
	  padding: 6px 10px;
	  background: #cccccc;
      color: black;
	}
	.captcha{
		vertical-align:middle;
		width:120px;
		margin:0 0 10px;
	}
	a .img-refresh{
		-webkit-transition: all .5s ease-out;
		-moz-transition: all .5s ease-out;
		-ms-transition: all .5s ease-out;
		transition: all .5s ease-out;
		-webkit-user-modify: read-only;
		-moz-user-modify: read-only;	
		opacity:0.6;	
	}
	a:hover .img-refresh{
		opacity:1.0;
	}
/* Register */
.layer-register{
	    text-align: center;
    padding: 60px 0;
    margin: 0 auto;
    position: relative;
}
.layer-register ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
.layer-register ul li{
	width:100%;
	float:none;
}
.layer-register ul li .col-6{
	width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    float: left;
    margin-bottom: 15px;
}
.layer-register ul li .col-12{
	width: 98%;
    display: block;
    margin: 0 auto 15px;
}
.layer-register ul li input, .layer-register ul li textarea{
	width: 100%;
	height: 45px;
    border: 0px solid #ccc;
    padding: 10px 15px;
    font-size: 14px;
    display: block;
	border-radius: 0px;
	background:#e4e4e4;
	color:#555;
}
.layer-register ul li select{
	width: 100%;
	height: 45px;
    border: 0px solid #ccc;
    padding: 10px 15px;
    font-size: 14px;
    display: block;
	border-radius: 0px;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background: url(../img/arrow-selection.png) no-repeat 435px center #e4e4e4;
	color:#777;
	letter-spacing: 1px;
}

img.img-responsive{
	width:100%;
	height:auto;
}

/**** Footer ****/
footer{
	padding:0 0 70px;
	background:#00a99d;
	text-align:center;
}
	footer .img-top{
		margin:0 0 20px;
	}
	footer .img-arrowUp{
		margin:0 0 35px;
		opacity:1.0;
	}
	footer a .img-arrowUp{
		-webkit-transition: all .5s ease-out;
		-moz-transition: all .5s ease-out;
		-ms-transition: all .5s ease-out;
		transition: all .5s ease-out;
		-webkit-user-modify: read-only;
		-moz-user-modify: read-only;		
	}
	footer a:hover .img-arrowUp{
		opacity:0.6;
	}
	footer .img-logo{
		margin:0 0 20px;
	}
	footer .layer-nav, footer .layer-nav a{
		font-size:10px;
		font-weight:400;
		color:white;
		text-transform:uppercase;
		letter-spacing:2.5px;
		margin:0 0 5px;
		cursor:pointer;
	}	
	footer .layer-nav a:hover{
		color:#7d7d7d;
	}
	footer .layer-copyright{
		font-size:10px;
		font-weight:400;
		color:white;
		text-transform:uppercase;
		letter-spacing:2.5px;	
	}
	footer .layer-copyright a{
		font-size:10px;
		font-weight:400;
		color:white;
		text-transform:uppercase;
		cursor:pointer;
	}
	footer .layer-copyright a:hover{
		color:#96e7e1;
	}
	footer .layer-apdl{
	  padding: 20px;
	  background: #64c4b0;
	  color: white;
	  font-size: 11px;
	  font-weight: 400;
	  letter-spacing: 1px;
	  line-height: 16px;
	  text-align: left;
	}

/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/	
@media screen and (max-width: 1200px) {
	span.style-goDown{
		top:540px;
	}
}
 @media screen and (max-width: 1050px) {
	span.style-goDown{
		top:500px;
	}
}