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

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

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

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


@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: "raleway";
    src: url(../fonts/raleway.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")
}


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


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


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


h1{
font-family: "magetasRegu";	
}



h2{
font-family: "carson";	
}


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



#loader{
	width:100%;
	height:6000px;
	background-color:#fff;
	position:fixed;
	z-index:20000
}

	.imgLoader{
		display:block;
		margin-left:auto;
		margin-right:auto;
		padding-top:10%;
		}

#capa1Body{
	width:100%;
	height:300px;
	background-color:#664f76;
	background-size:cover;
	background-image:url(../imagenes/imgServicios.png)
}


	
		.txt1Capa1Body{ position:relative; display:inline-block;   font-family: "merriBold"; color:#fff; font-size:3em;
		 width:100%; text-align:left; padding-top:60px; left:100px
		}
		.txt2Capa1Body{ position:relative; display:inline-block;   font-family: "merriBold"; color:#fff; font-size:1.6em;
		 width:100%; text-align:left; top:-35px; left:100px
		}	
	

#capa2Body{
	width:100%;
	height:1400px;
	background-color:#FFF;
	background-size:cover;
}


	.col1Capa2Body{
		display: none;
		float:left;
		width:30%;
		height:100%;
		background-color:#1e1e1e
	}
	
	
		.menuProductos{
			position:relative;
			width:80%;
			height:auto;
			background-color:#030;
			display:block;
			margin-left:auto;
			margin-right:auto;
			top:100px;
			
			
		}
		
		
			.itemMenuProductos{
				width:100%;
				height:70px;
				position:relative;
				background-color:#09F
				font-family: "merri";
				font-size:1.5em;
				border-color:#000;
				border-style: solid;
    			border-width:  1px;
				cursor:pointer; outline:none
				
			}
			
			
				.itemMenuProductos:hover{
					background-color:#fa9494
					
				}
		
		
	.col2Capa2Body{
		float:left;
		width:100%;
		height:100%;
	}
		
		.fila1Capa2Body{
			position:relative;
			width:100%;
			height:200px;
			border-color:#000;
			border-style: solid;
    		border-width:  0px 0px 1px 0px; 
		}
	
	
				.txt1Capa2Body{ position:relative;   font-family: "Dulcelin"; color:#1e1e1e; font-size:3.2em;
				 width:90%; text-align:right; padding-top:50px;
				}
				.txt2Capa2Body{ position:relative;   font-family: "Roboto-Light"; color:#a6a6a6; font-size:1.6em;
				 width:90%; text-align:right;
				}
			
			
		.fila2Capa2Body{
			position:relative;
			top:20px;
			width:98%;
			height:1000px;
			display:block;
			margin-left:auto;
			margin-right:auto;
			overflow-y:scroll; overflow-x:hidden; display: none;
		}	
		
				.fila2Capa2Body::-webkit-scrollbar-track
				{
					-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
					background-color: #F5F5F5; border-radius:10px;
				}
				
				.fila2Capa2Body::-webkit-scrollbar
				{
					width:12px;
					background-color: #F5F5F5;
				}
				
				.fila2Capa2Body::-webkit-scrollbar-thumb
				{
					border-radius: 10px;
					-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
					background-color: #2073a8;
				}
		
				.conteProd1{
				position:relative;
				width:100%;
				height:150px;
				background-color:#2b2b2b; background-size:cover; overflow:hidden;cursor:pointer;
				border-color:#fff;
				border-style: solid;
    			border-width:  0px 0px 3px 0px;
				}
				
				
					.txt3Capa2Body{ position:relative; display:inline-block;  font-family: "merri";  color:#fff; font-size:2em;
					 width:100%; text-align:right; padding-top:50px; right:60px;
					}



/*********************INICIAO SCROLLAO********************/
			
				#global {
					height: 900px;
					width:90%;
					overflow-y: scroll;
					overflow-x: hidden;
					top:10px;
					left:20px;
					position:relative;
					display: block;
					margin-left: auto;
					margin-right: auto;
				}
				
				#global::-webkit-scrollbar-track
				{
					-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
					background-color: #F5F5F5;border-radius:10px;
				}
				
				#global::-webkit-scrollbar
				{
					width:12px;
					background-color: #F5F5F5;
				}
				
				#global::-webkit-scrollbar-thumb
				{
					border-radius: 10px;
					-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
					background-color: #2073a8;
				}
				
				/************************FIN SCROLL****************************/
				
				
				
				
			/****************************INICIO MASCARA MODAL******************/		
							
			/* The Modal (background) */
				
				.modalmask {
				position: fixed;
				font-family: Arial, sans-serif;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.9);
				z-index: 99999;
				opacity:0;
				-moz-opacity: 0;
                 filter: alpha(opacity=0);
				
				-webkit-transition: opacity 400ms ease-in;
				-moz-transition: opacity 400ms ease-in;
				transition: opacity 400ms ease-in;
				pointer-events: none;
				}

				.modalmask:target {
					opacity:1;
					-moz-opacity: 0.1;
                    filter: alpha(opacity=1);
					pointer-events: auto;
				}
				
				
				
				.rotate {
				margin: 6% auto;
			
				}
				
				
				.modalmask:target .rotate{		
				transform: rotate(360deg) scale(1,1);
       			 -webkit-transform: rotate(360deg) scale(1,1);
				  -moz-transform: rotate(360deg) scale(1,1);
				}
				

				
				
				.close {
				background:#F00;
				color: #FFFFFF;
				line-height: 25px;
				position: absolute;
				right: -10px;
				text-align: center;
				top: -20px;
				left:1150px;
				width: 24px;
				text-decoration: none;
				font-weight: bold;
				border-radius:3px;
				z-index:10;
					border:1px solid #FFF;
			
				}

				.close:hover { 
					background: #000; 
					color:#F00;
				}
			/*Ejemplo de aplicaicon de estilo a un elemento lllamado four hr.style-four*/
			#imgFoto{position:relative; width:auto; height:75%;  top:5px;}
			#fotoModal{width:auto; height:500px;}
			/*************FIN MASCARA MODAL*******/





.celda{
	float:left; width:32%; height:600px; padding-left:10px; 
}

.marco{
	position:relative; width:90%; height:auto; top:0px; left:-15px; -moz-background-size: cover;
    	-webkit-background-size: cover; 	-o-background-size: cover; background-color:#fff;
			z-index:2000; margin-bottom:20px;
}

.imgCeldaGaleria{
	position:relative; width:100%; height:100%; top:0px;  -moz-background-size: cover;
    	-webkit-background-size: cover;padding:50px;
    	-o-background-size: cover; 
}
			

#capa3Body{
	width:100%;
	height:600px;
	background-color:#050506;
	background-size:cover;
	background-image:url(../imagenes/img2Quienes.png);
	background-attachment:fixed
}

		.txt1Capa3Body{ position:relative; display:inline-block;  font-family: "merri";  color:#FFF; font-size:3em;
		 width:100%; text-align:center; padding-top:50px;
		}
		.txt2Capa3Body{ position:relative; display:inline-block;   font-family: "Roboto-Light"; color:#fff; font-size:1.6em;
		 width:100%; text-align:center; 
		}
		
		.linea3{position:relative; width:200px; height:2px; background-color:#FF0; border:none}

		
		.txt3Capa3Body{ position:relative;display:block;    font-family: "Roboto-Light"; color:#fff; font-size:1.3em;
		 width:80%; text-align:center; margin-left:auto; margin-right:auto
		}

		.btnVer1{background-color:#b8131b; width:200px; height:55px; border:none; font-size:1.4em; position:relative;
		 display:block; margin-left:auto; margin-right:auto; color:#FFF;
		 -webkit-transition: .35s ease-in-out;
	  transition: .35s ease-in-out;}
			
			.btnVer1:hover{background-color:#050506; color:#FF0}





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



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


/*Celular portrait*/
@media screen and (max-width: 360px) {
#S1{display:inline}


#capa1Body{
	display:none
}


#capa2Body{ height:1600px}
	.col1Capa2Body{position:relative; width:100%; height:auto}
		.menuProductos{top:0px;}
	.col2Capa2Body{position:relative; width:100%; height:auto}
		
		
		
		.fila1Capa2Body{height:auto;}
				.txt1Capa2Body{text-align:center;}
				.txt2Capa2Body{text-align:center;}
		
		.fila2Capa2Body{width:95%;height:auto;}	
		
				.txt3Capa2Body{text-align:right; width:100%}
					#global {width:90%;}
					.conteProd1{width:95%;}

			.celda{ position:relative; width:100%;}

			.close {top: -10px;	left:0;	width: 10%; display:block; margin-left:auto; margin-right:auto}

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

#footer{height:300px;}

}

/*Celular landscape*/
@media screen and (min-width: 361px) and (max-width: 640px) {
#S2{display:inline}

#capa1Body{
	display:none
}

#capa2Body{ height:1600px}
	.col1Capa2Body{position:relative; width:100%; height:auto}
		.menuProductos{top:0px;}
	.col2Capa2Body{position:relative; width:100%; height:auto}
		
		
		
		.fila1Capa2Body{height:auto;}
				.txt1Capa2Body{text-align:center;}
				.txt2Capa2Body{text-align:center;}
		
		.fila2Capa2Body{width:95%;height:auto;}	
		
				.txt3Capa2Body{text-align:right; width:100%}
					#global {width:90%;}
					.conteProd1{width:95%;}

			.celda{ position:relative; width:100%;}

			.close {top: -30px;	left:0;	width: 10%; display:block; margin-left:auto; margin-right:auto}

#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}

#capa1Body{
	display:none
}

#capa2Body{ height:1600px}
	.col1Capa2Body{position:relative; width:100%; height:auto}
		.menuProductos{top:0px;}
	.col2Capa2Body{position:relative; width:100%; height:auto}
		
		
		
		.fila1Capa2Body{height:auto;}
				.txt1Capa2Body{text-align:center;}
				.txt2Capa2Body{text-align:center;}
		
		.fila2Capa2Body{width:95%;height:auto;}	
		
				.txt3Capa2Body{text-align:right; width:100%}
					#global {width:90%;}
					.conteProd1{width:95%;}


			.celda{ position:relative; width:100%;}
			.close {top: -30px;	left:0;	width: 10%; display:block; margin-left:auto; margin-right:auto}

#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}

#capa2Body{ height:1600px}
	.col1Capa2Body{position:relative; width:100%; height:auto}
		.menuProductos{top:0px;}
	.col2Capa2Body{position:relative; width:100%; height:auto}
		
		
		
		.fila1Capa2Body{height:auto;}
				.txt1Capa2Body{text-align:center;}
				.txt2Capa2Body{text-align:center;}
		
		.fila2Capa2Body{width:95%;height:auto;}	
		
				.txt3Capa2Body{text-align:right; width:100%}
					#global {width:90%;}
					.conteProd1{width:95%;}


			.celda{ position:relative; width:100%;}
			.close {top: -30px;	left:0;	width: 10%; display:block; margin-left:auto; margin-right:auto}

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