html, body {
	height: 100%;
	width: 100%;
}

body {
	color: #353535;
	font-family: 'Roboto', Arial, sans-serif;
	line-height: 1.4;
}

a {
	text-decoration: none;
}

mark {
	background: none;
	color: #E35121;
	font-weight: 700;
}

/* Fonts */
@font-face {
    font-family: 'Climacons';
    src: url('../font/climacons-webfont.eot');
    src: url('../font/climacons-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/climacons-webfont.woff') format('woff'),
         url('../font/climacons-webfont.ttf') format('truetype'),
         url('../font/climacons-webfont.svg#climacons-fontfont') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Sidebar */
aside {
	height: auto;
	left: 50%;
	position: absolute;
	right: auto;
	text-align: center;
	top: 0;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

aside ul {
	color: #FFF;
	margin: 0 auto;
	padding: 10px 0;
	width: 180px;
}

aside ul span {
	border-bottom: 1px solid #006ec8;
	display: inline-block;
	padding: 0 0 5px;
}

aside ul > li {
	opacity: 0;
	-webkit-transform: translateY(-20px);
	        transform: translateY(-20px);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	        transition: transform 0.4s, opacity 0.4s;
}

aside ul > li > a {
	color: inherit;
	display: inline-block;
	font-size: 18px;
	font-weight: 300;
	padding: 5px 15px 10px;
	text-align: center;
	white-space: nowrap;
}

aside ul > li > a:hover {
	color: #00283c;
	font-weight: 700;
}

aside ul > li > a:hover > span {
	border-color: #FFF !important;
}

aside ul > li > a.selected > span {
	border-color: #00283c;
	font-weight: 700;
}

/* Header */
header {
	background-color: #FFF;
	height: 90px;
	left: 0;
	position: relative;
	right: 0;
	top: 0;
	z-index: 1000;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

header ul {
	height: 90px;
	margin: 0;
	overflow: hidden;
	padding: 25px 0;
}

header ul > li {
	display: block;
	float: left;
	margin-left: 4px;
	position: relative;
}

header ul > li:first-child {
	margin: 0;
}

header ul > li > a {
	border: 2px solid transparent;
	color: inherit;
	display: block;
	font-size: 14px;
	font-weight: 700;
	padding: 4px;
	position: relative;
}

header ul > li > a:hover {
	border-color: #3694CF;
}

header ul > li > a:active,
header ul > li > a.selected {
	background-color: #3694CF;
	color: #FFF;
}

header ul.navicon a {
	padding-left: 45px;
	position: relative;
}

header ul.navicon a::after {
	content: "";
	display: block;
	height: 0;
	left: 10px;
	position: absolute;
	top: 10px;
	width: 20px;
	-webkit-box-shadow: 0  0   0 2px #3694CF,
	                    0  8px 0 2px #3694CF,
	                    0 16px 0 2px #3694CF;
	   -moz-box-shadow: 0  0   0 2px #3694CF,
	                    0  8px 0 2px #3694CF,
	                    0 16px 0 2px #3694CF;
	        box-shadow: 0  0   0 2px #3694CF,
	                    0  8px 0 2px #3694CF,
	                    0 16px 0 2px #3694CF;
}

header .navicon a:active::after {
	-webkit-box-shadow: 0  0   0 2px #FFF,
	                    0  8px 0 2px #FFF,
	                    0 16px 0 2px #FFF;
	   -moz-box-shadow: 0  0   0 2px #FFF,
	                    0  8px 0 2px #FFF,
	                    0 16px 0 2px #FFF;
	        box-shadow: 0  0   0 2px #FFF,
	                    0  8px 0 2px #FFF,
	                    0 16px 0 2px #FFF;
}

header .column-logo {
	margin: 5px 0;
	padding-left: 10px;
}

@media only screen and (max-width: 640px) {
	header .column-logo {
		padding: 0;
	}
}

header .column-languages {
	margin: 20px 0 0;
	position: absolute;
	right: 20px;
	top: 12px;
}

/* Slideshow */
.slideshow {
	margin: 0;
	max-height: 500px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.slideshow2 {
	margin: 0;
	max-height: 900px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.slide, 
.canvas_map {
	min-height: 500px;
	overflow: hidden;
}

@media only screen and (max-width: 810px) and (min-width: 641px) {
	.slide, 
	.canvas_map {
		max-height: 500px;
		min-height: 390px;
	}
}

@media only screen and (max-width: 640px) and (min-width: 481px) {
	.slide, 
	.canvas_map {
		max-height: 390px;
		min-height: 280px;
	}
}

@media only screen and (max-width: 480px) and (min-width: 321px) {
	.slide, 
	.canvas_map {
		max-height: 280px;
		min-height: 190px;
	}
}

@media only screen and (max-width: 320px) {
	.slide, 
	.canvas_map {
		min-height: 150px;
	}
}

.slide-image {
	text-align: center;
}

.slide-caption {
	color: #FFF;
	display: block;
	line-height: 1;
	text-shadow: 0 2px 4px rgba(0,0,0,0.6);
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

.slide-caption-group {
	height: 275px;
	left: 50%;
	margin-left: -320px;
	margin-top: -170px;
	position: absolute;
	top: 50%;
	width: 640px;
}

.slide-caption-group .small {
	font-size: 38px;
}
.slide-caption-group .medium {
	font-size: 68px;
}
.slide-caption-group .large {
	font-size: 98px;
}
.slide-caption-group .x-large {
	font-size: 128px;
}

@media only screen and (max-width: 640px) {
	.slide-caption-group {
		height: 180px;
		margin-left: -210px;
		margin-top: -100px;
		width: 420px;
	}
	.slide-caption-group .small {
		font-size: 28px;
	}
	.slide-caption-group .medium {
		font-size: 48px;
	}
	.slide-caption-group .large {
		font-size: 68px;
	}
	.slide-caption-group .x-large {
		font-size: 88px;
	}
}

@media only screen and (max-width: 480px) {
	.slide-caption-group {
		height: 135px;
		margin-left: -120px;
		margin-top: -75px;
		width: 240px;
	}
	.slide-caption-group .small {
		font-size: 18px;
	}
	.slide-caption-group .medium {
		font-size: 36px;
	}
	.slide-caption-group .large {
		font-size: 44px;
	}
	.slide-caption-group .x-large {
		font-size: 62px;
	}
	
	.slide-club .x-large {
		margin-left: -5px; }
	.slide-restaurant .large {
		margin-left: -10px; }
	.slide-rooms .x-large { 
		margin-left: -15px; }
}

/* Home Page */
.home .column-content { 
	background-color: #FFF;
}

.home .column-title {
	background-color: #3694CF;
}

.home .column-link:hover .column-title {
	background-color: #065C92;
}

.home .column-form {
	padding-bottom: 18px;
}

/* Membership */
.membership .column-title {
	background-color: #82a032;
}

/* Restaurant */
.restaurant .column-title {
	background-color: #d28200;
}

/* Beach Club */
.club .column-title {
	background-color: #82a032;
}

.club .column-text p {
	margin: 10px 0;
}

/* Tourism */
.tourism .column-title {
	background-color: #82a032;
}

/* Events */
.events .column-title {
	background-color: #3694CF;
}

/* Rooms */
.rooms .column-title {
	background-color: #961519;
}

/* group */
.group .column-header {
	color: #888;
	margin: 0 0 40px;
	font-weight: 700;
	font-size: 56px;
	line-height: 0.8;
	text-shadow: 0 1px 0 #FFF;
}

.group.with-background {
	background: url('../images/group-bg.png') center 5px repeat;
}

/* Contact */
.contact .column-title {
	background-color: #3694CF;
}

.contact .column-contact-us {
	padding: 20px;
}

.contact-address, 
.contact-phone {
	margin: 0 0 20px;
}

.maps, .canvas_map {
	background-color: #afcdff !important;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* General Classes */
/** for column-group */
.column-content {
	background-color: #FFF;
	height: auto;
	margin: 0 0 20px;
	//overflow: hidden;
	position: relative;
}

.column-title {
	color: #FFF;
	display: block;
	font-family: 'Expletus Sans';
	font-size: 18px;
	padding: 18px;
	position: relative;
	text-transform: uppercase;
	width: 100%;
}

.column-image {
	overflow: hidden;
	position: relative;
}

.column-image.square {
	max-height: 225px;
	min-height: 225px;
}
.column-image.rectangle {
	max-height: 130px;
	min-height: 128px;
}

@media only screen and (max-width: 64.063em) {
	.column-image.square {
		max-height: 345px;
		min-height: 220px;
	}
	.column-image.rectangle {
		max-height: 200px;
		min-height: 128px;
	}
}

@media only screen and (max-width: 40.063em) {
	.column-image.square {
		max-height: 440px;
		min-height: 150px;
	}
	.column-image.rectangle {
		max-height: 256px;
		min-height: 88px;
	}
}

.column-list {
	margin: 20px 0 50px;
}

.column-list ul,
.column-list ol,
.column-list dl {
	margin: 0;
	padding: 0 0 0 25px;
}

.column-list ul > li {
	color: #72bf66;
	list-style-image: url('../images/check.png');
}

.column-list ol > li {
	list-style-type: disc;
}

.column-form {
	padding: 15px;
}

.column-form h3 {
	color: #065C92;
	margin: 0;
}

.column-form h5 {
	color: #3694CF;
	margin: 0 0 15px;
}

.column-form label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 5px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.column-form input, 
.column-form select {
	background-color: #FFF;
	border: 2px solid #ebebeb;
	color: #999;
	display: block;
	font-size: 14px;
	height: 34px;
	outline: 0;
	padding: 6px 0 6px 12px;
	vertical-align: middle;
	width: 100%;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.column-form-control {
	margin: 0 0 10px;
	width: 45%;
}

.column-form-button {
	background-color: #3694CF;
	padding: 9px 15px;
	width: 100%;
}

.column-text {
	padding: 20px;
}

.column-text p {
	color: #777;
	margin: 10px 0 20px;
}

.column-text span {
	color: #065C92;
	display: block;
	font-family: 'Expletus Sans';
	font-size: 21px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
}

.column-text ol {
	color: #777;
}

.column-languages a {
	color: #0099cc;
	font-size: 14px;
}

.column-contact-us a {
	color: #E35121;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.column-contact-us span {
	color: #0099cc !important;
	display: block;
	font-size: 30px;
	font-weight: 300;
}

.column-contact-us strong {
	display: block;
}

/** with column-group */
.with-background {
	background-color: #f2f2f2;
}

.with-small-negative {
	margin-top: -20px;
}
.with-medium-negative {
	margin-top: -60px;	
}
.with-large-negative {
	margin-top: -100px;
}

@media only screen and (max-width: 640px) {
	.with-small-negative {
		margin-top: -15px;
	}
	.with-large-negative {
		margin-top: -35px;
	}
}

@media only screen and (max-width: 480px) {
	.with-small-negative {
		margin-top: -10px;
	}
}

.with-padding {
	padding: 50px 0 30px;
}

.with-no-padding {
	padding: 0;
}

.with-no-margin {
	margin: 0;
}

.with-shadow {
	box-shadow: 0 1px 8px rgba(100, 100, 100, 0.4);
}

.at-bottom {
	bottom: 0;
	position: absolute;
}

.on-bottom {
	padding-bottom: 82px !important;
}

blockquote {
	font-size: 24px;
	font-weight: 300;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 0 50px;
	text-align: center;
	width: 90%;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 40.063em) {
	blockquote {
		font-size: 20px;
	}
	blockquote a {
		font-size: 12px;
	}
}

blockquote span {
	color: #777;
	display: block;
	font-size: 18px;
	font-weight: 400;
}

/* Footer */
footer {
	background-color: #00283c;
	color: #FFF;
	padding: 50px 0;
}

footer .column-content {
	background-color: transparent !important;
	margin: 0 0 0 10px;
}

@media only screen and (max-width: 640px) {
	footer {
		padding: 0 0 50px;
	}
	footer .column-content {
		margin: 50px auto 0;
		width: 240px;
	}
}

footer .column-logo {
	height: 86px;
}

footer .column-heading {
	font-size: 18px;
	font-weight: 400;
}

footer .column-button {
	margin: 10px 0 0;
}

footer .column-button a {
	background-color: #285096;
	border-color: #285096;
	color: #FFF;
}

footer .column-button a:hover {
	background-color: #285096;
	border-color: #285096;
}

footer .column-languages {
	margin: 20px 0 0;
}

/* Weather */
.climacons {
	font-family: 'Climacons';
}

.weather-city {
	font-size: 18px;
	font-weight: 700;
}

.weather-country {
	line-height: 1;
	margin: 0 0 8px;
}

.weather-condition {
	font-weight: 700;
	margin: 0 0 20px;
}

.weather-temperature {
	float: left;
	font-size: 56px;
	font-weight: 300;
	height: 86px;
	margin-left: 15px;
}

.weather-temperature sup {
	font-size: 60%;
	left: -10px;
}

.weather-icon {
	float: left;
	font-size: 86px;
	line-height: 1;
	text-align: center;
	width: 86px;
}

.weather-sunrise,
.weather-sunset {
	float: left;
	text-align: center;
	margin: 0 10px;
}

.weather-sunrise {
	padding-right: 15px;
}

.weather-sunrise-icon,
.weather-sunset-icon {
	font-size: 58px;
	height: 52px;
	line-height: 1;
	margin: 0 auto;
	width: 52px;
}

.weather-sunrise-title,
.weather-sunset-title {
	font-weight: 700;
}

/* Background Colors */
/**home*/
.slide-home {
	background-color: #9bcdff; }
.image-membership {
	background-color: #3c6932; }
.image-events {
	background-color: #645f41; }
.image-club {
	background-color: #8c5a32; }
.image-restaurant {
	background-color: #c3875f; }
.image-tourism {
	background-color: #414146; }

/**club*/
.slide-club {
	background-color: #a57341; }
.image-hammock {
	background-color: #d22d87; }
.image-nature {
	background-color: #198c0a; }
.image-beach {
	background-color: #4b7dc8; }
.image-games {
	background-color: #237d5f; }
.image-conference {
	background-color: #82878c; }
.image-pool {
	background-color: #46b4c3; }
.image-ranch {
	background-color: #be8764; }

/**membership*/
.slide-membership {
	background-color: #78c8ff; }

/**restaurant*/
.slide-restaurant {
	background-color: #eba587; }
.image-soup {
	background-color: #87502d; }
.image-burger {
	background-color: #ffb937; }
.image-pasta {
	background-color: #c31914; }

/**rooms*/
.slide-rooms {
	background-color: #558732; }

/**events*/
.slide-events {
	background-color: #37cdcd; }
.image-ceremony {
	background-color: #b9a07d; }
.image-decor {
	background-color: #5f3c41; }
.image-ornament {
	background-color: #697d87; }

/* Color Buttons */
.color-orange {
	border: 2px solid #E35121;
	background-color: #E35121;
	color: #FFF;
}

.color-orange:hover {
	background-color: #F33C00;
	border-color: #F33C00;
}

.border-blue {
	border: 2px solid #3694CF;
	color: #353535;
}

.border-blue:hover {
	background-color: #3694CF;
	color: #FFF;
}

.border-grey {
	border: 2px solid #353535;
	color: #353535;
}

.border-grey:hover {
	background-color: #353535;
	color: #FFF;
}

.border-grey:active {
	background-color: #000;
	border-color: #000;
}

.button {
	cursor: pointer;
	display: block;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	outline: 0;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	vertical-align: middle;
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

/* Icons */
.icon-calendar {
	background: url('../images/calendar.png') #FFF no-repeat right;
	background-position: 98% 1px;
}

@media only screen and (max-width: 360px) {
	.icon-calendar {
		background-image: none;
	}
}

/* Sidebar */
/** containers */
.perspective {
	background-color: #3694CF;
	background-image: url('../images/logo-bg.png');
	background-repeat: no-repeat;
	background-position: center 200px;
	height: 100%;
	position: relative;
	width: 100%;
}

.perspective.modalview {
	position: fixed;
	-webkit-perspective: 1500px;
	        perspective: 1500px;
}

.container {
	background-color: #FFF;
	min-height: 100%;
	outline: 1px solid rgba(0,0,0,0);
	position: relative;
	z-index: 10;
}

.container::after {
	background-color: rgba(0,0,0,0.3);
	content: '';
	height: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-webkit-transition: opacity 0.4s, height 0s 0.4s;
	        transition: opacity 0.4s, height 0s 0.4s;
}

.wrapper {
	position: relative;
}

.modalview .container {
	cursor: pointer;
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 100%;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}

.modalview .wrapper {
	/*
	-webkit-transform: translateZ(-1px);*/
}

/** animate container */
.container {
	-webkit-transition: -webkit-transform 0.4s;
	        transition: transform 0.4s;
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
}

.animate .container {
	-webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
	        transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
	-webkit-transform: translateY(100%) translateZ(-1500px);
	        transform: translateY(100%) translateZ(-1500px);
}

.animate .container::after {
	height: 101%;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	        transition: opacity 0.3s;
}

.no-csstransforms3d .animate .container {
	top: 75%;
}

/** animate navigation list */
.animate aside {
	z-index: 100;
}

.animate aside ul > li {
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
}

.animate aside ul > li:nth-child(2) {
	-webkit-transition-delay: 0.04s;
	        transition-delay: 0.04s;
}

.animate aside ul > li:nth-child(3) {
	-webkit-transition-delay: 0.08s;
	        transition-delay: 0.08s;
}

.animate aside ul > li:nth-child(4) {
	-webkit-transition-delay: 0.12s;
	        transition-delay: 0.12s;
}

.animate aside ul > li:nth-child(5) {
	-webkit-transition-delay: 0.16s;
	        transition-delay: 0.16s;
}

.animate aside ul > li:nth-child(6) {
	-webkit-transition-delay: 0.2s;
	        transition-delay: 0.2s;
}

.animate aside ul > li:nth-child(7) {
	-webkit-transition-delay: 0.24s;
	        transition-delay: 0.24s;
}

.animate aside ul > li:nth-child(8) {
	-webkit-transition-delay: 0.28s;
	        transition-delay: 0.28s;
}

#contact-form {
	margin: 0;
}

.modal-backdrop {
	background: white;
	background: rgba(255,255,255,.75);
	bottom: 0;
	left: 0;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999;
}

.modal {
	background: white;
	box-shadow: 0 1px 8px rgba(100, 100, 100, 0.4);
	left: 50%;
	margin-left: -200px;
	position: fixed;
	top: 20%;
	width: 400px;
	z-index: 999;
}

.modal-header {
	background-color: #3694CF;
	color: #FFF;
	display: block;
	font-family: 'Expletus Sans';
	font-size: 18px;
	padding: 18px;
	position: relative;
	text-transform: uppercase;
	width: 100%;
}

.modal-body {
	padding: 18px;
}

.modal-close {
	background-color: #E35121;
	color: white;
	display: block;
	float: right;
	height: 24px;
	font-size: 24px;
	line-height: 27px;
	text-align: center;
	width: 24px;
}

@media screen and (max-width: 400px) {
	.modal {
		left: 5%;
		margin-left: 0;
		width: 90%;
	}
}

.ie6 .modal, .ie7 .modal, .ie8 .modal, .ie6 .modal-backdrop, .ie7 .modal-backdrop, .ie8 .modal-backdrop {
	position: absolute;
}