/*
* 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
================================================== */

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

*{
  margin: 0;
padding:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}
	

body{
	/*background: #f27421;*/
	font-family: Arial, Helvetica, sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	background: rgb(255,255,255);
	/*
    background: linear-gradient(90deg, rgba(223,235,243,1) 0%, rgba(241,245,249,1) 19%, rgba(255,255,255,1) 37%, rgba(255,255,255,1) 64%, rgba(241,245,249,1) 82%, rgba(230,239,245,1) 100%);
    */
}

#mainContainer{
	width: 100%;
	height: auto;
	overflow: hidden;
}

section{
	position: relative;
	width: 100%;
}

.mobile{
	display: none;
}
.regular{
	display: block;
}

.center{
	text-align: center;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
}

#head, #inicio, #nosotros, #servicios, #clientes, #contacto{
	overflow: hidden;
}

.flare{
	background: rgb(255,255,255);
	background: url("../images/flare-2.png") no-repeat center center;
	-webkit-background-size: 50% cover;
    -moz-background-size: 50% cover;
    -o-background-size: 50% cover;
    background-size: 50% cover;
}

.clear{
	clear: both;
}

.mensajeSend{
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	font-weight: 500;
	color: #a9c4d6;
}

.hide{
	display: none;
}

.show{
	display: block;
}

#catcher1{
	display: none;
}

#catcher2{
	display: none;
}

#mainNav, #mainNav2{
	position: relative;
	height: 50px;
	background: rgba(255, 255, 255, 0.9);
	margin-top: -5px;
	padding: 5px 0 5px 0;
	z-index: 999;
	width: 100%;
	-webkit-border-radius: 0px 0px 0px 20px; 
 	-moz-border-radius: 0px 0px 0px 20px; 
 	border-radius: 0px 0px 0px 20px; 
 	-webkit-box-shadow: 0px 0px 5px 3px rgba(20,73,93, 0.9);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  	-moz-box-shadow:    0px 0px 5px 3px rgba(20,73,93, 0.9);  /* Firefox 3.5 - 3.6 */
  	box-shadow:         0px 0px 5px 3px rgba(20,73,93, 0.9);
}

#mainNav ul, #mainNav2 ul{
	position: absolute;
	text-align: center;
	height: 50px;
	width: 100%;
	right: 0px;
	top:15px;
}
	#mainNav ul li, #mainNav2 ul li{
		display: inline;
		float: left;
		width: 20%;
		font-size: 1.2em;
		font-weight: 600;
		color: #14495d;
		font-family: 'Open Sans', sans-serif;
		text-transform: uppercase;
		-moz-transition: all 0.3s ease-out;
    	-webkit-transition: all 0.3s ease-out;
    	-o-transition: all 0.3s ease-out;
    	-ms-transition: all 0.3s ease-out;
    	transition: all 0.3s ease-out;
	}

	#mainNav ul li:hover, #mainNav2 ul li:hover{
    	color:#000;
	}
#mainNav2{
	-webkit-border-radius: 0px 0px 10px 10px; 
 	-moz-border-radius: 0px 0px 10px 10px; 
 	border-radius: 0px 0px 10px 10px; 
 	height: 40px;
}

#mainNav2 ul li{
	width: 25%;
	font-size: 1em;
}

#head{
	height: 720px;
	width: 60%;
	background: url('../images/bgn-head-1.jpg') no-repeat right center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	position: absolute;
	top:0px;
	right: 0px;
}
	#head hgroup{
		width: 100%;
		background: rgba(20, 73, 93, .80);
		position: absolute;
		bottom: 0px;
		padding: 20px 40px 20px 40px;
		padding-right: 20%;
	}	

		#head hgroup h1, #head hgroup h4{
			color: #f9fcf9;
			font-family: 'Open Sans', sans-serif;
			text-align: right;
		}

		#head hgroup h1{
			font-size: 1.8em;
			font-weight: 600;
		}

		#head hgroup h4{
			font-size: 1.4em;
			font-weight: 400;
			margin-top: -10px;
			letter-spacing: 1px;
			line-height: 1.4em;
		}

		#head hgroup h4 span{
			font-weight: 800;
		}

#inicio{
	height: 720px;
	width: 40%;
	min-width: 400px;
	max-width: 800px;
	background: #353d42;
	background: linear-gradient(to bottom, #fff 0%,#fff 35%, 
		        rgba(53,61,66,1) 35%,rgba(53,61,66,1) 100%); 
}

#inicio aside{
	min-height: 700px;
	width: 100%;
}
	#inicio aside figure{
		height: 35%;
		text-align: center;
		/* margin-bottom: 50px; */
	}
		#inicio aside figure img{
			width: 80%;
			margin-top: 50px;
		}
	#inicio aside article{
		height: 65%;
		padding: 40px 20px 20px 20px;
		text-align: center;
	}
		#inicio aside article h3{
			font-family: 'Open Sans', sans-serif;
			font-size: 1.8em;
			color: #d0d7dc;
			margin-bottom: 30px;
			margin-top: -10px;
		}
		#inicio aside article h4{
			font-family: 'Open Sans', sans-serif;
			font-weight: 600;
			font-size: 1.8em;
			color: #fff;
			margin-bottom: 40px;
		}
		.mainForm{
			width: 95%;
			margin-left: 5%;
			max-width: 500px;
		}
			.mainForm table{
				width: 100%;
			}
				.mainForm input[type = text], .mainForm input[type = email], .mainForm textarea, .mainForm select{
					width: 95%;
					height: 40px;
					background: #89a7ba;
					color: #353d42;
					font-size: 1.2em;
				  	font-weight: 600;
				  	-webkit-box-shadow: inset 0px 0px 2px 2px rgba(0,0,0, 0.2);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  					-moz-box-shadow:    inset 0px 0px 2px 2px rgba(0,0,0, 0.2);  /* Firefox 3.5 - 3.6 */
  					box-shadow:         inset 0px 0px 2px 2px rgba(0,0,0, 0.2);
  					border: 1px solid #1d2225;
				}

				::-webkit-input-placeholder { /* Chrome/Opera/Safari */
				  color: #51616b;
				}
				::-moz-placeholder { /* Firefox 19+ */
				  color: #51616b;
				}
				:-ms-input-placeholder { /* IE 10+ */
				  color: #51616b;
				}
				:-moz-placeholder { /* Firefox 18- */
				  color: #51616b;
				}

				.mainForm textarea{
					height: 80px;
					width: 97%;
				}
				
				.mainForm select{
					width: 97%;
				}

				.mainForm input[type = submit]{
					width: 50%;
					height: 40px;
					font-size: 1em;
				} 



#nosotros{
	min-height: 900px;
	background: #f9fcf9 url(../images/bgn-nosotros-3.jpg) no-repeat center 100px;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 20px;
}

#nosotros-1, #nosotros-2, #nosotros-3, #nosotros-4{
	margin-bottom: 20px;
	padding-top: 20px;
}

#nosotros-1 h3, #nosotros-2 h3, #nosotros-3 h3, #nosotros-4 h3{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	color: #14495d;
}

#nosotros-1 p, #nosotros-2 p, #nosotros-3 p, #nosotros-4 p{
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: 400;
}

#nosotros-1 img, #nosotros-2 img, #nosotros-3 img, #nosotros-4 img{
	width: 300px;
}

#nosotros-1 img, #nosotros-3 img{
	margin-left: 20%;
}

#nosotros-2 img, #nosotros-4 img{
	margin-right: 20%;
}


#nosotros-1{
	background: rgba(89, 118, 123, 0.8);
	background: linear-gradient(to right, rgba(89, 118, 123, 0.8) 0%,rgba(89, 118, 123, 0.8) 40%, 
		        rgba(255, 255, 255, 0.5) 40%,rgba(255, 255, 255, 0.5) 100%);
}
#nosotros-2{
	background: rgba(0, 128, 146, 0.8);
	background: linear-gradient(to left, rgba(0, 128, 146, 0.8) 0%,rgba(0, 128, 146, 0.8) 40%, 
		        rgba(255, 255, 255, 0.5) 40%,rgba(255, 255, 255, 0.5) 100%);
}
#nosotros-3{
	background: rgba(20, 73, 94, 0.8);
	background: linear-gradient(to right, rgba(20, 73, 94, 0.8) 0%,rgba(20, 73, 94, 0.8) 40%, 
		        rgba(255, 255, 255, 0.7) 40%,rgba(255, 255, 255, 0.7) 100%);
}
#nosotros-4{
	background: rgba(53, 61, 66, 0.8);
	background: linear-gradient(to left, rgba(53, 61, 66, 0.8) 0%,rgba(53, 61, 66, 0.8) 40%, 
		        rgba(255, 255, 255, 0.7) 40%,rgba(255, 255, 255, 0.7) 100%);
}


	#nosotros header{
		padding-top: 40px;
	}
		#nosotros header p{
			font-family: 'Open Sans', sans-serif;
			font-size: 1.2em;
			line-height: 1.2em;
		}
		#nosotros header p.center{
			font-size: 1.4em;
			line-height: 1.4em;
			font-weight: 600;
			margin-bottom: 40px;
		}
		#nosotros header p span{
			font-weight: 800;
			color: #14495d;
		}
		#nosotros header p.left, #nosotros header p.right{
			font-weight: 400;
			width: 70%;
		}
		#nosotros header p.right{
			margin-left: 30%;
		}
	#nosotros h2{
		width: 100%;
		text-align: center;
		font-family: 'Open Sans', sans-serif;
		font-size: 2.4em;
		color: #14495d;
		font-weight: 700;
		height: 150px;
		padding-top: 50px;
	}

	#nosotros aside{
		background: rgba(20, 73, 93, .80);
		-webkit-border-radius: 20px; 
 		-moz-border-radius: 20px; 
 		border-radius: 20px;
 		margin: 20px 0 40px 0;
 		padding: 10px 20px 10px 20px;
	}

	#nosotros aside p{
		margin-left: auto;
		margin-right: auto;
		color: #f9fcf9;
		text-align: center;
		font-weight: 600;
		padding: 20px 0 20px 0;
		font-size: 1.2em;
		line-height: 1.2em;
	}

#servicios{
	min-height: 700px;
	/*
	background: rgb(0,173,185);
    background: linear-gradient(180deg, rgba(0,173,185,1) 0%, rgba(0,173,185,1) 47%, rgba(2,124,133,1) 100%);
    */
    background: #387297;
    background: linear-gradient(180deg, rgba(2,124,133,.7) 0%, rgba(0,173,185,.3) 50%, rgba(2,124,133,.7) 100%),
                #387297 url("../images/bgn-servicios-3.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 30px;
}
	#servicios h2{
		text-align: center;
		font-family: 'Open Sans', sans-serif;
		font-size: 2.6em;
		font-weight: 600;
		color: #14495d;
		margin-top: 20px;
		margin-bottom: 40px;
		color: #f9fcf9;
	}

	#servicios article{
		text-align: center;
	}
		#servicios article h3{
			font-size: 1.2em;
			font-weight: 600;
			color: #f9fcf9;
			font-family: 'Open Sans', sans-serif;
			padding-top: 10px;
		}

		#servicios article figure{

			margin-left:auto;
			margin-right: auto;
			position: relative;

		}

		#servicios article figure img{
			width: 250px;
			height: 250px;
			border: 15px solid rgba(255,255,255,1);
			-webkit-border-radius: 50%; 
 			-moz-border-radius: 50%; 
 			border-radius: 50%;
 			-webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,0,0, 0.5), 0px 0px 5px 3px rgba(20,73,93, 0.9);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  			-moz-box-shadow:    inset 0px 0px 4px 2px rgba(0,0,0, 0.5), 0px 0px 5px 3px rgba(20,73,93, 0.9);  /* Firefox 3.5 - 3.6 */
  			box-shadow:         inset 0px 0px 4px 2px rgba(0,0,0, 0.5), 0px 0px 5px 3px rgba(20,73,93, 0.9);
		}

			.servicio-1{
				background: url("../images/servicio-1.jpg") no-repeat center center;
				-webkit-background-size: contain;
    			-moz-background-size: contain;
    			-o-background-size: contain;
   				 background-size: contain;
			}
			.servicio-2{
				background: url("../images/servicio-2.jpg") no-repeat center center;
				-webkit-background-size: contain;
    			-moz-background-size: contain;
    			-o-background-size: contain;
   				 background-size: contain;
			}
			.servicio-3{
				background: url("../images/servicio-3.jpg") no-repeat center center;
				-webkit-background-size: contain;
    			-moz-background-size: contain;
    			-o-background-size: contain;
   				 background-size: contain;
			}
			.servicio-4{
				background: url("../images/servicio-4.jpg") no-repeat center center;
				-webkit-background-size: contain;
    			-moz-background-size: contain;
    			-o-background-size: contain;
   				 background-size: contain;
			}
			.servicio-5{
				background: url("../images/servicio-5.jpg") no-repeat center center;
				-webkit-background-size: contain;
    			-moz-background-size: contain;
    			-o-background-size: contain;
   				 background-size: contain;
			}
			.servicio-6{
				background: url("../images/servicio-6.jpg") no-repeat center center;
				-webkit-background-size: contain;
    			-moz-background-size: contain;
    			-o-background-size: contain;
   				 background-size: contain;
			}

			.consultar{
				position: absolute;
				z-index: 999;
				top:15px;
				left:40px;
				padding-top: 95px;
				background: rgba(20, 73, 93, .0);
				text-transform: uppercase;
				width: 220px;
				height: 220px;
				-webkit-border-radius: 50%; 
 				-moz-border-radius: 50%; 
 				border-radius: 50%;	
 				cursor: pointer;
			}
			.consultar:hover{
				background: rgba(20, 73, 93, .6) url("../images/consultar-2.png") center center;
				-webkit-background-size: cover;
    			-moz-background-size: cover;
    			-o-background-size: cover;
   				 background-size: cover;
			}

#clientes{
	min-height: 600px;
	background: #f7fcf8;
	background: #f7fcf8 url("../images/bgn-clientes-3.jpg") no-repeat center center;
				-webkit-background-size: contain;
    			-moz-background-size: contain;
    			-o-background-size: contain;
   				 background-size: contain;
}

	#clientes h3{
		font-family: 'Open Sans', sans-serif;
		font-weight: 800;
		font-size: 1.8em;
		color: #353d42;
		text-align: center;
		margin-top: 40px;
		margin-bottom: 30px;
	
		text-transform: capitalize;
	
	}

	.marcas figure img{ 
		width: 100%;
	}
	
	#certificaciones figure{
		text-align: center;
	}
	
	#certificaciones figure img{ 
		width:40%;
	}


#contacto{
	min-height: 400px;
	background: rgb(34,39,41);
    background: linear-gradient(90deg, rgba(34,39,41,1) 10%, rgba(66,77,84,1) 56%);
    padding-top: 40px;
}
	#contacto figure img{
		width: 95%;
		margin-top: 20%;
	}
	#contacto aside h3{
			font-family: 'Open Sans', sans-serif;
			font-size: 1.8em;
			color: #d0d7dc;
			margin-bottom: 40px;
			text-align: center;
	}
	
	#contacto aside h4{
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
		font-size: 1.8em;
		color: #fff;
		margin-bottom: 40px;
		text-align: center;
	}
		
	#contacto form.mainForm input[type = submit]{
		width: 50%;
		height: 40px;
		font-size: 1em;
		margin-left: 25%;
	} 
	
	
	button{
		width: 50%;
		height: 40px;
		font-size: 1em;
	}
	
	#form1 button{
		margin-left: 0;
	}
	
	#form2 button{
		margin-left: 25%;
	}

#footer{
	min-height: 100px;
	background: #1c2022;
}

a, a:active, a:visited{
	text-decoration: none;
}
.anchor{
	height: 80px;
	width: 100%;
	clear: both;
}
.clear{
	clear: both;
}

.g-recaptcha div{
	margin-left: auto;
	margin-right: auto;
}

.g-recaptcha{
	margin-bottom: 10px;
}

.mainAddress{
	text-align: left;
	margin-top: -25px;
	padding-left: 20px;
}


.mainAddress a{
	color: #fff;
	font-size: 0.9em;
	margin-right: 5px;
}

.mainAddress a img{
	width: 30px;
	vertical-align: middle;
	margin-right: 5px;
	margin-top: 5px;
}

/* #Media Queries
================================================== */

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

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

		.mobile{
			display: none;
		}
		.regular{
			display: block;
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

	.mobile{
		display: block;
	}
	.regular{
		display: none;
	}
	
	.regular-inline{
		display: none;
	}

	#head{
	height: 300px;
	width: 100%;
	position: relative;
	top:0px;
	left: 0px;
	}

	#topLogo{
		position: relative;
		height: 100px;
		background: #fff;
		text-align: center;
		padding: 20px 0px 20px 0px;
	}

	#topLogo img{
		width: 40%;
	}

	#head hgroup{
		width: 80%;
		background: rgba(20, 73, 93, .85);
		position: absolute;
		bottom: 20px;
		left: 0px;
		padding: 10px 20px;
		padding-right: 10px;
	}	
	
	    #head video{
	    width: 100%;
	    margin: auto;
    }

		#head hgroup h1, #head hgroup h4{
			text-align: left;
		}

		#head hgroup h1{
			font-size: 1.5em;
			font-weight: 600;
		}

		#head hgroup h4{
			font-size: 1.1em;
			font-weight: 400;
			margin-top: -10px;
			letter-spacing: 1px;
			line-height: 1.4em;
		}

		#inicio{
			height: 340px;
			width: 100%;
			background: #353d42; 
		}

		#inicio aside{
			min-height: 300px;
			width: 100%;
			overflow-x: hidden;
		}
		#inicio aside figure{
			display:none;
		}
		#inicio aside article{
			height: 100%;
			width: 100%;
			padding: 20px 10px 20px 10px;
			overflow-x: hidden;
		}
		#inicio aside article h3{
			font-family: 'Open Sans', sans-serif;
			font-size: 1.6em;
			color: #d0d7dc;
			margin-bottom: 20px;
		}
		.mainAddress{
			margin-top: -25px;
			margin-left: 0px;
			padding-left: 0px;
		}
		.mainAddress a img{
			margin-top: 0px;
		}
		.mainForm{
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}
			.mainForm table{
				width: 100%;
			}
				.mainForm input[type = text], .mainForm input[type = email], .mainForm textarea{
					width: 95%;
					height: 30px;
					background: #89a7ba;
					color: #353d42;
					font-size: 1.1em;
				  	font-weight: 600;
				}

				.mainForm textarea{
					height: 70px;
					width: 97%;
				}

				.mainForm input[type = submit]{
					width: 40%;
					height: 35px;
					font-size: 1em;
					margin-top: -5px;
				}
				
				button{
					width: 40%;
					height: 40px;
					font-size: 1em;
				}

		#nosotros-1{
		background: rgba(255, 255, 255, 0.7);
		}
		#nosotros-2{
		background: rgba(255, 255, 255, 0.7);
		}
		#nosotros-3{
		background: rgba(255, 255, 255, 0.7);
		}
		#nosotros-4{
		background: rgba(255, 255, 255, 0.7);
		}

		#nosotros-1 figure, #nosotros-3 figure{
		margin-left:0px;
		margin-bottom: 10px;
		padding-top: 10px;
		}
		#nosotros-1 img, #nosotros-3 img{
		margin-left:40%;
		}
		#nosotros-2 figure, #nosotros-4 figure{
		margin-left: 0px;
		margin-bottom: 10px;
		padding-top: 10px;
		}

		#nosotros-2 img, #nosotros-4 img{
		margin-right: 60%;
		}

		#nosotros-1 figure{
		background: rgba(89, 118, 123, 0.8);
		}
		#nosotros-2 figure{
		background: rgba(0, 128, 146, 0.8);
		}
		#nosotros-3 figure{
		background: rgba(20, 73, 94, 0.8);
		}
		#nosotros-4 figure{
		background: rgba(53, 61, 66, 0.8);
		}	


		#servicios article{
		text-align: center;
		width: 49%;
		}
		#servicios article h3{
			font-size: 0.9em;
			padding-top: 5px;
			line-height: 1.1em;
		}

		#servicios article figure img{
			width: 120px;
			height: 120px;
			border: 5px solid rgba(255,255,255,1);
			-webkit-border-radius: 50%; 
 			-moz-border-radius: 50%; 
 			border-radius: 50%;
 			-webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,0,0, 0.5), 0px 0px 5px 3px rgba(20,73,93, 0.9);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  			-moz-box-shadow:    inset 0px 0px 4px 2px rgba(0,0,0, 0.5), 0px 0px 5px 3px rgba(20,73,93, 0.9);  /* Firefox 3.5 - 3.6 */
  			box-shadow:         inset 0px 0px 4px 2px rgba(0,0,0, 0.5), 0px 0px 5px 3px rgba(20,73,93, 0.9);
		}

		
		.consultar{
			top:0px;
			left:43px;
			padding-top: 80px;
			width: 120px;
			height: 120px;
		}




		#clientes figure{
			width: 50%;
		}

		#clientes figure img{
			width: 90%;
			margin-top: 10px;
		}

		#contacto figure img{
		width: 95%;
		margin-top: 20px;
		}
		


	}

	/* 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) {}


/* #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; }
*/