/**************************
		* Name: 							cc-style.css
		* Description:					Careening Cay
		* Author: 						ANGEL GONZALEZ
		* For:							VISUAL ADVENTURES
		* Date last update:			05/12/2016
**************************/		

@import '../css/font-awesome.css';
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,400,700);

* {
	margin:0; 
	padding:0;
	}
html, body {
	height: 100%;
	}

body {
	font-family: 'Open Sans Condensed', sans-serif; 
	line-height:20px; 
	font-size:18px; 
	color:#3d3935; 
	
	}

.clear {
	display:block; 
	clear:both; 
	height:0;
	}
li.clear {
	display:block !important; 
	clear:both !important; 
	height:0 !important; 
	float:none !important;
	}
	
/* Links */

a  {
	color: #8FBC8F;
	word-wrap: break-word;
	-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
	-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
	-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
	-o-transition: color 0.1s ease-in, background 0.1s ease-in;
	transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
	color: #7FFF00;
	text-decoration: none;
	outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

a img {
	border:none;
	}
a {
	outline:none;
	}

p {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 18px;
	line-height: 20px;
	font-weight: 400;
}
h1 {
	 font-size: 40px;
	line-height: 45px;
	}
h2 {
	 font-size: 35px;
	line-height: 40px;
	}
h3 {
	 font-size: 30px;
	line-height: 30px;
	}
h4 {
	font-family: 'Open Sans Condensed', sans-serif; 
	 font-size: 25px;
	line-height: 25px;
	font-weight: 400;
	}
h5 {
	 font-size: 20px;
	line-height: 20px;
	}
h6 {
	 font-size: 10px;
	line-height: 10px;
	}

.centered {
    text-align: center;
	}
	
.left {
	text-align: left;
	}
.right {
	text-align: right;
	}

.floatright {
	float: right;
}
	
	/* Green Wrap */
#green {
	background: #8AFF17;
	padding-top: 35px;
	padding-bottom: 35px;
	text-align: left;
}

#green h4 {
	color: black;
	font-weight: 700;
}

#green p {
	color: black;
}

	/* White Wrap */
#white {
	background: White;
	padding-top: 35px;
	padding-bottom: 35px;
	text-align: left;
}

#white h4 {
	color: black;
	font-weight: 700;
}

#white p {
	color: black;
}

/* Brown Wrap */

#brown {
	background: #EBD0B0;
	padding-top: 35px;
	padding-bottom: 35px;
}

#brown h4 {
	color: black;
	font-weight: 700;
}

#brown p {
	color: black;
}

/* Light Grey */
#lg {
	background: #ebebeb;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
	color: black
}

#lg h4 {
	color: black
	font-weight: 700;
}
#lg p {
	color: black;
}

/* Dark Grey Wrap */
#dg {
	background: #e0e0e0;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}

#dg h4 {
	font-weight: 700;
}

/* Yellow Wrap */

#yellow {
	background: #FEFF62;
	padding-top: 35px;
	padding-bottom: 35px;
}

#yellow h4 {
	color: Black;
	font-weight: 700;
}

#yellow p {
	color: Black;
}

/* Teal Wrap */

#teal {
	background: #00CED1;
	padding-top: 35px;
	padding-bottom: 35px;
}

#teal h4 {
	color: Black;
	font-weight: 700;
}

#teal p {
	color: Black;
}

/* Pale Turquoise Wrap */

#pale {
	background: #AFEEEE;
	padding-top: 35px;
	padding-bottom: 35px;
}

#pale h4 {
	color: Black;
	font-weight: 700;
}

#pale p {
	color: Black;
}

.loaded a {
	-moz-transition: all 0.2s ease-in; 
	-webkit-transition: all 0.2s ease-in; 
	-o-transition: all 0.2s ease-in;
	}

.wrapper {
	z-index:9999; 
	width:100%; 
	height:100%; 
	position:relative; 
	top:0;
	}

div.col.last {
	margin-right:0px !important;
	}


/***** Header *****/

#header-container {
	width: 100%;
	background-color: transparent;
	position: fixed;
	z-index: 9000;
	height: 0px;
}

#header { 
	width:90%; 
	margin-left:3%; 
	margin-right:3%;  
	height:0px;
	} /* max-width: 1180, left 5% */

#wrapper { 
	overflow:auto; 
	position:relative; 
	width:100%; 
	height:100%;
	}


/***** Logos *****/
.logo-1 { 
	margin:13px 0 0 0;
	position: fixed;
	}
.logo-1:hover {
	opacity:0.7; 
	}

.logo-2 {
	float: right;
	margin: 13px 20px 0 0px;
}
.logo-2:hover {
	opacity:0.7; 
	}

/***** Mobile Logos *****/
.mobile-logo-1 {
	display:none; 
	list-style:none; 
	z-index:9000;
	position:fixed; 
	top:0; 
	height:34px; 
	line-height:34px; 
	width:20%;
	}
.mobile-logo-1:hover {
	opacity:0.7; 
	}

.mobile-logo-2 {
	position: fixed;
	margin: 13px 0px 0 0px;
}
.mobile-logo-2:hover {
	opacity:0.7; 
	}


/***** Menu *****/

#menu-container {
	z-index:8000; 
	width:100%; 
	position:relative; 
	height:35px; 
	top:0px; 
	background-color: #666; 
	background-color: rgba(0,0,0,0.5);  
	} /* background: #fff url(images/menu-bg.png) repeat-x left top; */

#menu {
	max-width:1180px; 
	width:100%; 
	margin-left:10%;
	margin-right:10%;
	height:35px;  
	line-height:25px; 
	list-style:none;
	}
#menu li {
	float:left;
	}
#menu li a {
	text-decoration:none; 
	text-transform:uppercase; 
	color:#ffffff; 
	font-size:20px; 
	font-family: 'Open Sans Condensed', sans-serif;
 	display:block; 
	padding-left:25px; 
	padding-right:25px;
	height:35px; 
	line-height:30px; 
	margin-top:0px;
	}

#menu li a:hover, #menu li a.active {
	background-color: #FFA07A;
	border-color: #df5913;
}


/***** Mobile Menu *****/
#mobile-menu {
	display:none; 
	list-style:none; 
	z-index:9000; 
	background-color:#9ea7aa; 
	position:fixed; 
	top:0; 
	height:34px; 
	line-height:34px; 
	width:100%;
	}
#mobile-menu li {
	float:left; 
	height:34px; 
	line-height:34px; 
	text-transform:uppercase; 
	color:#ffffff; 
	font-family: 'Open Sans Condensed', sans-serif; 
	font-size:13.7px; 
	text-align:center; 
	width:15%;
	}
#mobile-menu li:first-child {
	width:24.5%; 
	text-align:center;
	}
#mobile-menu li a {
	float:left; 
	height:34px; 
	line-height:34px; 
	text-transform:uppercase; 
	text-decoration:none; 
	color:#ffffff; 
	font-family: 'Open Sans Condensed', sans-serif; 
	font-size:13.7px; 
	display:block; 
	text-align:center; 
	width:100%;
	}
#mobile-menu li a.active, #mobile-menu li a:hover {
	background-color:#99a0a3
	}
	
/***** Section 1 *****/

#section-1 {
	width: 100%;
	overflow: hidden;
	top: 1px;
	position: absolute;
	z-index: 500;
}
#mapas-1 {
	margin-left: 100px;
}

/***** Section 0 *****/

#section-0 {
	width: 100%;
	overflow: hidden;
	top: 1px;
	position: absolute;
	z-index: 500;
}

/***** Footer *****/
#footer {
	background: #ACFFE3;
	color: #006400;
	font-size: 14px;
	line-height: 16px;
	font-weight: 400;
	padding: 18px 0;
}

#footer-top {
	width: 100%;
	background: #E7F7F0;
	color: #006400;
	font-size: 14px;
	line-height: 16px;
	font-weight: 400;
	padding: 18px 0 10px;
}

iframe {border:none !important;}


/***** Loader *****/
#loaderMask {
	width:90%; 
	height:4px; 
	text-align: center; 
	background-color:#888d92; 
	position:fixed; 
	top:50%; 
	left:5%; 
	z-index:100;
	}
#loaderMask div.loading {height:4px; width:0; background:#df5913; position:relative; z-index:101; left:0; 
	font-family: 'Open Sans Condensed', sans-serif;
#loaderMask p {color:#59595b; font-size:14px; display:block; font-style:normal; 
	font-family: 'Open Sans Condensed', sans-serif; 
	text-align:left; position:absolute; left:1px; top:-25px;}


/***** Slider Counter *****/
.slider-counter {
	list-style:none; 
	padding:18px 0 0 4px; 
	z-index:9999; 
	position:relative;
	}
.slider-counter li {
	float:left;
	}
.slider-counter li a {
	float:left; 
	text-decoration:none; 
	display:block; 
	height:8px; 
	width:8px; 
	background-color:#ffffff; 
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	border-radius: 4px; 
	margin-right:6px;
	}
.slider-counter li a:hover, .slider-counter li a.active {
	background-color:#f68d24;
	}

/***** Disclaimer *****/
#disclaimer {
	width:90%; 
	padding:97px 5% 110px 5%; 
	background-color:#f4f3ef;
	}
#disclaimer h2 {
	font-weight:normal; 
	color:#55544e; 
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:14px; 
	line-height:20px;
	}
#disclaimer p {padding:0px; color:#99988f; font-size:12px; line-height: 20px; font-family:Lato;}

#disclaimer div.col {float:left; width:auto; margin-right:44px;}
#disclaimer div.col.small {max-width:420px; margin-top:45px;}



/***** Media Queries *****/

@media screen and (max-width: 1130px){
    #section-5 div.col.building {margin-left:0;}
    
    #section-4 {padding-left:5%; padding-right:5%; width:90%; margin-left:0px;}
    
    #section-4 div.col {width:100% !important; margin:0px !important; padding:0px !important;}
    
    #section-4 div.col.increase-decrease {text-align:center;}
    #section-4 div.col.increase-decrease img {float:none;}
    
    ul.benefits {margin:20px 0 40px 0; width:100%; 
	 	max-width:100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    ul.benefits li p {padding:5px 0 6px 0 !important;}
    
    #section-4 blockquote {max-width:100%;}
    #section-4 p {padding-right:0 !important;}
    
    #case-studies-navigation li a {width:80px; height:54px;}
    #case-studies-navigation li a img {width:100%; height:auto;}    
    #case-studies-navigation li a span {
	 	display:block; 
		width:80px; 
		height:54px; 
		background: transparent url(../images/front/case-studies-slider-nav-bg.png) repeat left top; 
		z-index:100; top:0; left:0; position:absolute;} 
 
    #disclaimer {padding-bottom:30px;}
    #disclaimer div.col {float:left; width:100%; margin-right:0px;}
    #disclaimer div.col.small {max-width:100%; width:100%; margin-top:45px;}

}


@media screen and (max-width: 1000px){

	#section-2, #section-3, #section-4, #section-5, #section-7 {
		width:90%; padding-left:5%; padding-right:5%; margin-left:0px !important; margin-right:0px !important;}
    div.col {float:none; clear:both; width:100% !important; margin:0 !important; padding:0 !important;} 
    #disclaimer div.col.small {margin-top:45px !important;}
    
    #section-5 #building {max-width:500px; margin-bottom:30px; float:left; clear:both;}
    #section-5 #building img {float:left;}
    #section-5 #building p {float:left; font-size:18px !important; display:block; line-height:22px; padding:0px; width:150px;}
    #section-5 #building p.first { padding:39px 0 0 27px !important;}
    #section-5 #building p.second { padding:95px 0 119px 27px !important;}
    #section-5 #building p.third { padding:0 0 0 27px !important;}
    #section-5 h2 {margin-bottom:0px;}
    #section-5 div.col.collaboration-col {margin-top:40px !important;}
    
    #section-7 div.content {float:none; width:100%;}
    #section-7 div.contact-buttons {float:none; margin:13px 0 0 0;}
    #section-7 div.contact-buttons a, #section-7 div.contact-buttons span {font-size:13px !important; text-align:center;}
    
    #case-studies-navigation li a {width:70px; height:47px;}
    #case-studies-navigation li a img {width:100%; height:auto;}    
    #case-studies-navigation li a span {
	 	display:block; width:70px; height:47px; 
		background: transparent url(../images/front/case-studies-slider-nav-bg.png) repeat left top; 
		z-index:100; top:0; left:0; position:absolute;}

}

@media screen and (max-width: 860px){
    #menu {margin-right:5%; width:95%;}
    #menu li a {width:auto; padding:0 10px;}
    
    #section-5 {padding:53px 5% 339px 5%;}
    
    #case-studies-navigation {display:none;}
    #case-studies-slider {width:100% !important;}
    #case-studies-slider img {width:100%; height:auto;}
    div.case-studies-slide {float:none; width:100%;}
    #case-studies-slider div.case-studies-slide-content {
	 	position:relative; left:0; top:0; height:auto; width:90%; background-image:none; padding:24px 5% 30px 5%;}
    #section-6 h2 {padding-bottom:20px;}
    #case-studies-slider h1 {font-size:24px !important; line-height:28px !important;}
}

@media screen and (max-width: 630px){

    #header-container {top:34px;}
    
    #section-1 {top:128px !important;}
    
    #menu-container {display:none;}
    #mobile-menu {display:block;}
	 #mobile-logo-1 {display:block;}
	 #mobile-logo-2 {display:block;}
    
    
    #section-3 div.section-3-arrow {
	 	max-width:100%; width:100%; min-height:1px; background-image: none;  padding:0 0 0 0; margin:20px 0 0 0;}
    #section-3 div.section-3-arrow blockquote {
	 	color:#ffffff; font-style:normal; font-size:14px; line-height:21px;}
    #section-3 div.section-3-arrow cite {font-size:13px; line-height:20px; color:#ffffff; font-style:normal; padding-top:2px; display:block;}

    #section-4 ul.benefits li p {text-transform:uppercase; color:#3b3e4c; font-size:14px; padding:5px 0 6px 0; line-height:21px;}
    #section-4 ul.benefits li h2 {font-size:18px; line-height:22px;}
    #section-4 blockquote {font-size:18px; line-height:22px;}
    
    #section-5 blockquote {font-size:18px; line-height:22px;}
    
    p {font-size:14px; line-height:21px; padding:11px 0 !important;}
    ul li {font-size:14px; line-height:21px;}
    h1 {font-size:30px !important; line-height:34px !important;}
    h2 {font-size:18px !important; line-height:22px !important;}
    #section-2 h2 {font-size:25px !important; line-height:28px !important;}
    
    #section-1 #slider img.arrows {position:absolute; left:0; top:0; max-width:350px; height:100%;}
    
    #disclaimer h2 {font-size:14px !important; line-height:20px !important;}
    #disclaimer p {padding:0px !important; font-size:12px !important; line-height: 20px !important;}
}

@media screen and (max-width: 600px){
    iframe {width:100%;}
}

@media screen and (max-width: 400px){
    #section-5 #building {text-align:center; width:100%;}
    #section-5 #building img {width:100%; height:auto;}
    #section-5 #building-overflow-hidden {max-width:40%; float:left;}
    #section-5 #building p {
	 	font-size:14px !important; 
		width:50%; line-height:18px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    #section-5 #building p.first {padding:30px 0 0 15px !important;}
    #section-5 #building p.second {padding:60px 0 0 15px !important;}
    #section-5 #building p.third {padding:60px 0 0 15px !important;}
    
    #section-1 #slider div.slider-content a.arrow-button {margin:20px 0;}
    #section-1 #slider div.slider-content {top:60px; max-width:78% !important;}
    #section-1 #slider div.slider-content h1 {font-size:20px !important; line-height:24px !important;}
    #section-1 #slider div.slider-content h2 {font-size:16px !important; line-height:20px !important;}
    
    #section-1 #slider div.slide.last div.slider-content h2 {padding:20px 0 11px 0;}
    
    #section-1 #slider a.arrow-button {height:40px; width:40px; background-image:url(../images/front/slider-arrow-button-small.png);}
    #section-1 #slider a.arrow-button-down {
	 	height:65px; 
		width:73px; 
		background-image:url(../images/front/slider-arrow-button-down-small.png); 
		margin-top:20px !important;}
}

@media screen and (max-height: 600px){
    #section-1 #slider div.slider-content a.arrow-button {margin:20px 0;}
    #section-1 #slider div.slider-content {top:60px;}
    #section-1 #slider div.slider-content h1 {font-size:20px !important; line-height:24px !important;}
    #section-1 #slider div.slider-content h2 {font-size:16px !important; line-height:20px !important;}
    #section-1 #slider div.slide.last div.slider-content h2 {padding:20px 0 11px 0;}
    
    #section-1 #slider a.arrow-button {height:40px; width:40px; background-image:url(../images/front/slider-arrow-button-small.png);}
    #section-1 #slider a.arrow-button-down {
	 	height:65px; width:73px; background-image:url(../images/front/slider-arrow-button-down-small.png); margin-top:20px !important;}
}

@media screen and (max-height: 400px), screen and (max-width:630px){
    div.parallax {margin-top:528px !important;}
	 #mobile-logo-1 {z-index:9999;}
	 #mobile-logo-2 {z-index:9999;}
    #mobile-menu {z-index:9999;}
    #section-1 {height:400px !important;}
    #section-1 #slider {height:400px !important;}
    #section-1 #slider div.slide {height:400px !important; }
    #section-1 #slider div.slide img {height:400px !important; width:auto !important;}
    #section-2 {padding-top:40px;}
    #section-1 #slider div.slide.last div.slider-content h2 {padding:20px 0 0px 0;}
}