@charset "utf-8";
/* CSS Document */
body {
	margin: 0em auto;
	overflow-x:hidden;
    background-color:#fff;
	width:auto;
    padding: 0;
    margin: 0;

}



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


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


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

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


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

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


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

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


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

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

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



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

#capa3Header{
	position:relative;
	width:100%;
	height:auto;
	background-color:#b72a2f
	}
				
				
				
					.slider{
					position:relative;
					left:0px;
					top:0px;
					z-index:3;
					width:100%;
					height:100%;
					/*-webkit-animation: animarSlider  100s infinite 5s; 
					-moz-animation: animarSlider  100s infinite 5s; 
					animation: animarSlider  100s infinite 5s; */
					}
					
						
					.txt1Slider1{
						position:relative;
						display: inline-block;
						margin-left:auto;
						margin-right:auto;
                    
						font-size:2.5em;
						width:100%;
						text-align:center;
						color:#FFF;
						
					}
					
				
					
	

#capa2{
position:relative;
width:100%;
height:auto;
background-color:#e9eaea;

}
							
								.fila{position:relative; width:100%; height:auto; }
									.txt{position:relative; width:100%; text-align:center; font-size:2.7em; font-family:Dulcelin; display:inline-block}
									.linea3{position:relative; background-color:#000; border-color:#000; width:200px; height:1px; display:block; margin-left:auto;
									margin-right:auto}
								
								
									.subCapa1Body{
										position:relative;
										width:100%;
										height:auto;
									}
											.txt1CapaBody{
												position:relative; display: inline-block; width:100%; text-align:center; font-size:3em; color:#3E3E3E; padding-top:50px;			
											}
											
											
								
								
										.linea{
											position: relative;
											width: 30%;
											top: -20px;
											height: 2px;
											background-color: #3E3E3E;
											margin-left: auto;
											margin-right: auto;
										}
								
								
								
								.subCapa2Body{
									position:relative;
									width:100%;
									height:auto
								}
								
											/*********************INICIAO SCROLLAO********************/
												#global {
													position: relative;
													margin-left: auto;
													margin-right: auto;
													
													height: auto;
													width:1300px;
													overflow-y: scroll;
													overflow-x: hidden;
													top:30px;
												}
												
												#global::-webkit-scrollbar-track
												{
													-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
													border-radius: 2px;
													background-color: #F5F5F5;
												}
												
												#global::-webkit-scrollbar
												{
													width: 8px;
													background-color:#000;
												}
												
												#global::-webkit-scrollbar-thumb
												{
													border-radius: 2px;
													-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
													background-color:#000;
												}
												/************************FIN SCROLL****************************/
												
												
											/****************************INICIO MASCARA MODAL******************/		
											/* The Modal (background) */
												.modalmask {
												position: fixed;
												font-family: Arial, sans-serif;
												top: -80px;
												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:1000;
												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:90%; height:auto;  top:5px; }
											#fotoModal{width:30%; height:auto;}
											/*************FIN MASCARA MODAL*******/
								
											
								
								
								
								
								.celda{
									float:left; width:25%; height:300px; 
								}
								
								.marco{
									position:relative; width:93%; height:95%; top:15px; -moz-background-size: cover;
										-webkit-background-size: cover; 	
									-o-background-size: cover; 
									background-color:#000; 
									border-radius: 5px ;
										
								}
								
									.imgCeldaGaleria{
									position:relative; width:100%; height:96%; top:5px;  -moz-background-size: cover;
									-webkit-background-size: cover;
									-o-background-size: cover;}
										
											
							/*************FIN MASCARA MODAL*******/
							
							
	
/*Celular portrait*/
@media screen and (min-width: 1px) and (max-width: 360px){

	#capa3Header{height:auto;}
		.txt1Slider1{padding-top: 10px;font-size:2em;}
			
	#capa2{height: auto !important; }

	
	.celda{
		position: relative;
		width: 95%;
		height: 300px;
		left: 5%;
	}
	
	
		#global { width:95%; height:800px; }
		.close {left:120px; top: 100px;}	
		.imgFoto{width:100%; height:auto;  top:150px;}
		#fotoModal{width:90%; height:auto;}
	
	
	}
	
	/*Celular landscape*/
	@media screen and (min-width: 361px) and (max-width: 640px) {
		#capa3Header{height:150px;}
		.txt1Slider1{padding-top: 10px;font-size:2em;}
			
	
		#capa2{height: auto !important; }
		
		
	
	.celda{
		position: relative;
		width: 95%;
		height: 300px;
		left: 5%;
	}
	
	
		#global { width:95%; height:1000px; }
		.close {left:120px; top: 100px;}	
		.imgFoto{width:100%; height:auto;  top:150px;}
		#fotoModal{width:90%; height:auto;}
	
	
	
	}
	
	/*tablet 7.1 portrait*/
	@media screen and (min-width: 641px) and (max-width: 960px) {
		
		#capa2{height: auto !important; }
	
	
	
	.corner{display:none}
	
		
		
	
	.celda{
		position: relative;
		width: 95%;
		height: 300px;
		left: 5%;
	}
	
	
		#global { width:95%; height:1000px; }
		.close {left:120px; top: 100px;}	
		.imgFoto{width:100%; height:auto;  top:150px;}
		#fotoModal{width:90%; height:auto;}
	
	
	
	}
	
	/*tablet 7.1 landscape se puede utilizer las medidas iniciales*/
	@media screen and (min-width: 961px) and (max-width: 1329px) {
		#capa2{height: auto !important; }
	
	}