@charset "utf-8";
/* CSS Document */

body {
	margin: 0em auto;
	/*overflow-x:hidden;*/
    background-color:#fff;
    padding: 0;
    margin: 0;
	overflow-x:hidden
}

@font-face {
    font-family: "carson";
    src: url(../fonts/carson.otf) format("opentype")
}

@font-face {
    font-family: "magetasRegu";
    src: url(../fonts/magetasRegu.otf) format("opentype")
}

@font-face {
    font-family: "Roboto-Light";
    src: url(../fonts/Roboto-Light.ttf) format("truetype")
}



@font-face {
    font-family: "merriBold";
    src: url(../fonts/merriBold.otf) format("opentype")
}

@font-face {
    font-family: "merri";
    src: url(../fonts/merri.otf) format("opentype")
}


::placeholder{
	font-size:1.5em;
	color:#7c7a7a;font-family: "merri";	
}

input{
width:38%;height:40px; border:none	; background-color:#e7e7e7; outline:none
}

textarea{
width:38%;height:40px; border:none	; background-color:#e7e7e7; outline:none
}


a{
	font-family: "carson";	
text-decoration:none; 
outline:none;
}


h1{
	font-family: "Roboto-Light";
}



h2{
	font-family: "carson";	
}


h3{
 font-family: "Roboto-Light";
}


p{
	font-family: "Roboto-Light";
   }




#capa1{position: relative; width: 100%; height: 400px; background-color: #ccc; background-image: url(../imagenes/imgContacto.png); background-size: cover;}
.filaCapa1{position: relative;width: 100%; height: 100px;}
.txt1Capa1{position: relative; text-align: left; font-size: 3em; margin-left: 100px; color: #07498c;}

	
	

#capa2Body{
	width:100%;
	height:auto;
	background-color:#fff;
	background-size:cover;
}


		
		.txt2Capa2Body{ position:relative;  font-family: "merriBold";  color:#fff; font-size:3.5em;
		 width:100%; text-align:left; padding-left:100px; top:-50px
		}
		
		.txt3Capa2Body{ position:relative;   font-family: "Roboto-Light";  color:#828282; font-size:1.2em;
		 width:85%; text-align:justify; padding-left:100px; top:-70px
		}


	.fila1Capa2{
		position:relative;
		display:inline-block;
		width:100%;
		height:100px;
		}
	
		.fila2Capa2{
			position:relative;
			width:100%;
			height:600px;
		}
		
			.columna1Capa2Body{
				float:left;
				width:64%;
				height:100%;
				border-color:#c3c1c1;
				border-style: solid;
    			border-width: 0px 1px 0px 0px;
			}
			
			
					.fila3Capa2Body{
						position:relative;
						width:100%;
						height:auto;
					}
					
								.txt1Capa2Body{ position:relative; display:inline-block;  font-family: "Roboto-light";  
								color:#000; font-size:2.5em; width:100%; text-align:center; 
								}
								
								.txt2Capa2Body{ position:relative; display:inline-block;  font-family: "Roboto-light";  
								color:#333; font-size:1.2em;width:85%; text-align:center; padding-top:20px
								}
								
								
									
								.txtNombre{
									float:left;
									position:inherit;
									left:120px;
								}
								
								.txtTelefono{
									position:inherit;
									float:left;
									left:150px;
								}
								
								.txtInquietud{
									position:inherit;
									float:left;
									left:120px;
									width:79%;
									height:200px;
									top:10px
								}
								
								
								.txtMail{
									position:inherit;
									float:left;
									left:120px;
									top:20px
								}
								
								
								.btnEnviar{
									position:inherit;
									float:left;
									left:150px;
									top:20px;
									width:38%;
									height:42px;
									border:none; cursor:pointer;
									outline:none;color:#fff;font-family: "merri";font-size:1.5em; background-color:#00516b
								}
								
									.btnEnviar:hover{
										color:#fff;
										background-color:#000
										
									}
								
			
			.columna2Capa2Body{
				float:left;
				width:35%;
				height:100%;
			}
			
			
					.fila4Capa2Body{
						position:relative;
						width:90%;
						height:120px;
						border-color:#c3c1c1;
						border-style: solid;
						border-width: 0px 0px 1px 0px;
						display:block;
						margin-left:auto;
						margin-right:auto
					}
					
					
							.txt3Capa2Body{ position:relative;  font-family: "merriBold";  color:#000; font-size:1em;
							 width:100%; text-align:left; top:0px; left:-100px;
							}
			
							.logoRed{ top:5px; width:35px;height:auto; position:relative; left:-15px}
				
							.txt4Capa2Body{ position:relative;  font-family: "merri";  color:#5b5b5b; font-size:1.2em;
							 width:100%; text-align:left; top:0px; left:0px;
							}



#capa5Body{
	position:relative;
	width:100%;
	height:450px;
	background-color:#fff;
	background-size:cover;
}


	#veloMap1{
	position:absolute; top:75px; width:300px; height:185px; background:rgba(0,0,0,0.8); border-radius: 0px 150px 0px 0px; z-index:2000	
	}
	
	#veloMap2{
	position:absolute; top:260px; width:300px; height:40px; background:rgba(184,19,27,0.8);border-radius: 0px 0px 10px 0px;  z-index:2000	
	}
	
			.txt1CapaMap{
				position:absolute; top:-125px; font-family:jet; font-size:6.5em; color:#fff; left:110px;	
			}
			
			.txt2CapaMap{
				position:absolute; top:-16px; font-family:carson; font-size:1.37em; color:#fff; left:110px;
			}


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



/*Celular portrait*/
@media screen and (min-width: 1px) and (max-width: 360px) {
	#capa1{height: auto; background-image: url(../imagenes/imgContacto.png);}
	.filaCapa1{height: 50px;}
	.txt1Capa1{text-align: left; font-size: 2em; margin-left: 20px; }


	.txt1Capa1Body{ padding-top:150px; text-align:center; left:auto; display:block; margin-left:auto; margin-right:auto;}
	.txt2Capa1Body{ text-align:center; left:auto; display:block; margin-left:auto; margin-right:auto;}		


.fila2Capa2{ height:auto}
			.columna1Capa2Body{ position:relative; width:100%; height:auto}
					.fila3Capa2Body{position:relative;width:95%;height:auto;display:block; margin-left:auto; margin-right:auto}
					
							.txt2Capa2Body{position:relative;width:100%; text-align:center; display:none}
								
								.txtNombre{position:relative;width:100%;left:auto}
								.txtTelefono{position:relative;	width:100%;left:auto; top:5px}
								.txtInquietud{position:relative;width:99%;left:auto}
								.txtMail{position:relative;width:100%;left:auto; top:15px}
								.btnEnviar{	position:relative;width:100%;left:auto; top:20px}
			
			.columna2Capa2Body{ height:auto; position:relative; width:100%}
					.fila4Capa2Body{ padding-top:50px}

#logoMap{ width:100px; height:auto; left:10px; top:80px; position:absolute;}
	#veloMap1{width:130px;}
	#veloMap2{width:130px;}
			.txt2CapaMap{left:10px;	}

#footer{height:350px;}

}

/*Celular landscape*/
@media screen and (min-width: 361px) and (max-width: 640px) {
	#capa1{height: auto; background-image: url(../imagenes/imgContacto.png);}
	.filaCapa1{height: 50px;}
	.txt1Capa1{text-align: left; font-size: 2em; margin-left: 20px; }


	.txt1Capa1Body{ padding-top:150px; text-align:center; left:auto; display:block; margin-left:auto; margin-right:auto;}
	.txt2Capa1Body{ text-align:center; left:auto; display:block; margin-left:auto; margin-right:auto;}		
	
		.fila2Capa2{ height:auto}
			.columna1Capa2Body{ position:relative; width:100%; height:auto}
					.fila3Capa2Body{position:relative;width:95%;height:auto;display:block; margin-left:auto; margin-right:auto}
					
							.txt2Capa2Body{position:relative;width:100%; text-align:center; left:-100px; display:none }
								
								.txtNombre{position:relative;width:100%;left:auto}
								.txtTelefono{position:relative;	width:100%;left:auto; top:5px}
								.txtInquietud{position:relative;width:99%;left:auto}
								.txtMail{position:relative;width:100%;left:auto; top:15px}
								.btnEnviar{	position:relative;width:100%;left:auto; top:20px}
			
			.columna2Capa2Body{ height:auto; position:relative; width:100%}
					.fila4Capa2Body{ padding-top:50px}
					


#logoMap{ width:100px; height:auto; left:10px; top:80px; position:absolute;}
	#veloMap1{width:130px;}
	#veloMap2{width:130px;}
			.txt2CapaMap{left:10px;	}

#footer{height:300px;}


}

/*tablet 7.1 portrait*/
@media screen and (min-width: 641px) and (max-width: 960px) {
#S3{display:inline}


.txt1Capa1Body{ padding-top:150px; text-align:center; left:auto; display:block; margin-left:auto; margin-right:auto;}
	.txt2Capa1Body{ text-align:center; left:auto; display:block; margin-left:auto; margin-right:auto;}		

.fila2Capa2{ height:auto}
			.columna1Capa2Body{ position:relative; width:100%; height:auto}
					.fila3Capa2Body{position:relative;width:95%;height:auto;display:block; margin-left:auto; margin-right:auto}
					
							.txt2Capa2Body{position:relative;width:100%; text-align:center; left:-100px; display:none }
								
								.txtNombre{position:relative;width:100%;left:auto}
								.txtTelefono{position:relative;	width:100%;left:auto; top:5px}
								.txtInquietud{position:relative;width:99%;left:auto}
								.txtMail{position:relative;width:100%;left:auto; top:15px}
								.btnEnviar{	position:relative;width:100%;left:auto; top:20px}
			
			.columna2Capa2Body{ height:auto; position:relative; width:100%}
					.fila4Capa2Body{ padding-top:50px}


#logoMap{ width:100px; height:auto; left:10px; top:80px; position:absolute;}
	#veloMap1{width:130px;}
	#veloMap2{width:130px;}
			.txt2CapaMap{left:10px;	}

#footer{height:300px;}


}

/*tablet 7.1 landscape se puede utilizer las medidas iniciales*/
@media screen and (min-width: 961px) and (max-width: 1210px) {
#S4{display:inline}

.txt1Capa1Body{ padding-top:150px; text-align:center; left:auto; display:block; margin-left:auto; margin-right:auto;}
	.txt2Capa1Body{ text-align:center; left:auto; display:block; margin-left:auto; margin-right:auto;}		


.fila2Capa2{ height:auto}
			.columna1Capa2Body{ position:relative; width:100%; height:auto}
					.fila3Capa2Body{position:relative;width:95%;height:auto;display:block; margin-left:auto; margin-right:auto}
					
							.txt2Capa2Body{position:relative;width:100%; text-align:center; left:-100px; }
								
								.txtNombre{position:relative;width:100%;left:auto}
								.txtTelefono{position:relative;	width:100%;left:auto; top:5px}
								.txtInquietud{position:relative;width:99%;left:auto}
								.txtMail{position:relative;width:100%;left:auto; top:15px}
								.btnEnviar{	position:relative;width:100%;left:auto; top:20px}
			
			.columna2Capa2Body{ height:auto; position:relative; width:100%}
					.fila4Capa2Body{ padding-top:50px}

#logoMap{ width:100px; height:auto; left:10px; top:80px; position:absolute;}
	#veloMap1{width:130px;}
	#veloMap2{width:130px;}
			.txt2CapaMap{left:10px;	}

#footer{height:300px;}

}



/*pantallas grandes*/
@media screen and (min-width: 1211px) {
#S5{display:inline}
.container{position:relative; display:block; width:84.5em; height:700px; margin-left:auto; margin-right:auto;}
}