/*@import url(http://fonts.googleapis.com/css?family=Oswald|Roboto:500,300,700,500italic);*/
/*font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;*/
body{
	background:#b3d4ce;
	color:#333333;
	font-size:16px;
	font-family:tahoma;
	font-weight:normal;	
	margin:0 auto;
	padding:0 1em;
	text-align:center;
	height:auto;
	width:auto;
}
a:focus {
	outline:0px;
}
#rif{
	bottom:1em;
	color:#4B7373;
	position:fixed;
	right:3%;
}
/**************************************/
/**************HEADER******************/
header{
	background:transparent;
	border:none;	
	margin:4em 0 1em 0;
	padding:0 0 0 0;
	position:relative;	
	width:100%;
	z-index:3;
}
header #logo{
	display:inline-block;
	text-align:left;
	margin:0 1em 0 0;
	padding:0 0 0 0;
	vertical-align:top;
	width:91%;
}
header #logo:hover{
	cursor:pointer;
}
header #logo img{
	transition: 1s all ease;
	width:17%;
}
/*
header #logo img:hover{
	transform:rotatex(360deg);
}
*/
#texto_dinamico{
	animation:texto_dinamico 30s linear infinite;	
	color:#4B7373;
	font-family:tahoma;
	font-size:1.1em;	
	margin:0 0 0 0;
	padding:0 0 0 0;
	position:absolute;
	right:7%;
	top:0;	
	text-align:right;
	width:12%;
}
#texto_seccion{
	color:#4B7373;
	display:none;
	font-family:tahoma;
	font-size:1.1em;	
	margin:0 0 0 0;
	padding:0 0 0 0;
	position:absolute;
	right:7%;
	top:0;	
	text-align:right;
	width:12%;
	
}
#texto_dinamico span{
	font-size:1em;
	font-weight:normal;
}
header #redes{
	border-left:1px solid #4B7373;
	display:inline-block;
	text-align:right;
	margin:0 0 0 0;
	padding:0 0 0 0;
	vertical-align:top;
	width:3%;
}
header #redes a{	
	display:inline-block;
	margin:0 1em 0 1em;
	padding:0 0 0 0;
	width:80%;
}
header #redes a img{
	margin:0 0 0 0;
	padding:0 0 0 0;
	transition: 1s all ease;
	width:100%;
}
header #redes a img:hover{
	transform:rotate(360deg) scale(1.4,1.4);	
}

/****KEYFRAME****/
@keyframes texto_dinamico{
	0%{top:-60%;}
	1%{top:0%;}
	10%{transform: scale(1,1);}
	11%{transform: scale(1.2,1.2);}
	12%{transform: scale(1,1);}
	13%{transform: scale(1,1);}
	14%{transform: scale(1.2,1.2);}
	15%{transform: scale(1,1);}
	74%{transform: scale(1,1);}
	75%{transform: scale(1.2,1.2);}
	76%{transform: scale(1,1);}
	77%{transform: scale(1,1);}
	78%{transform: scale(1.2,1.2);}
	79%{transform: scale(1,1);}
	80%{top:0%;}
	82%{top:-300%;}
	100%{top:-300%;}
}
/**************************************/
/************CUERPO*******************/
#cuerpo{
	margin:1em 0 1em 0;
	padding:0 0 0 0;
	position:relative;		
	width:100%;
	height:auto;
}
#mascara{
	background:rgba(0,175,239,0.5);
	position:absolute;	
	display:none;
	height:35em;
	top:-12em;
	left:-1em;
	width:102.5%;
	z-index:2;
}
#centro{
	/*border:1px solid black;*/
	height:40em;
	background:url(../img/g4.png) no-repeat;
	background-position:0 0;
	background-size:100%;
	position:absolute;	
	top:-12.5em;
	left:32%;
	width:36%;
	z-index:1;
}
#humo{
	animation:humo 30s linear infinite;	
	height:40em;	
	background:url(../img/humo.png) no-repeat;
	background-position:0 0;
	background-size:100%;
	display:none;
	position:absolute;	
	top:-17em;
	left:-2%;
	width:30%;
	z-index:2;
}
#vaso_humo{	
	height:40em;
	background:url(../img/4_2.png) no-repeat;
	background-position:0 0;
	background-size:100%;
	display:none;
	position:absolute;	
	top:-17em;
	left:-2%;
	width:30%;
	z-index:1;
}
#vaso_centro_tranparent{
	height:40em;
	background:url(../img/transparent.png) no-repeat;
	background-position:0 0;
	background-size:100%;
	display:none;
	position:absolute;	
	top:-12.5em;
	left:32%;
	width:36%;
	z-index:1;
}
#humo_centro{	
	animation:humo_centro 30s linear infinite;	
	height:30em;	
	background:url(../img/humo_2.png) no-repeat;
	background-position:0 0;
	background-size:100%;
	position:absolute;	
	top:-17em;
	left:35%;
	width:30%;
	z-index:2;
}
#boton_vh{
	height:11em;
	border-radius:50%;
	background:transparent;
	position:absolute;	
	top:13em;
	left:6%;
	width:11em;
	z-index:3;
}
@keyframes humo{
	0%{transform: scale(1,1);}
	10%{transform: scale(1.1,1.1);}
	25%{transform: scale(1.2,1.2);}
	35%{transform: scale(1.1,1.1);}
	50%{transform: scale(1.2,1.2);}
	60%{transform: scale(1.1,1.1);}
	80%{transform: scale(1.3,1.3);}
	100%{transform: scale(1,1);}
}
@keyframes humo_centro{
	0%{transform: scale(1,1);}
	10%{transform: scale(1.1,1.1);}
	25%{transform: scale(1.2,1.2);}
	35%{transform: scale(1.1,1.1);}
	50%{transform: scale(1.2,1.2);}
	60%{transform: scale(1.1,1.1);}
	80%{transform: scale(1.3,1.3);}
	100%{transform: scale(1,1);}
}
/****MENU****/
#menu{	
	/*display:none;*/
	height:0;
	overflow:hidden;
	padding:0 2em;
	position:absolute;	
	top:-2.5em;
	right:15%;
	transition: 1s all ease;
	width:14%;
	z-index:3;
}
#menu a{
	background:#4B7373;
	border-radius:0.3em;
	color:#b3d4ce;
	display:block;
	font-family:tahoma;
	font-size:1.1em;	
	font-weight:bold;	
	margin:0.3em 0em 0.3em 0em;
	padding:0.3em 1em 0.3em 0.3em;
	text-align:right;
	text-decoration:none;
	transition:1s all ease;
}
#menu a:hover{
	transform:scale(1.1,1.1);
}
/****SECCIONES****/
.titulos{
	color:#4B7373;
	font-size:1.5em;
	margin:0;
	padding:0;
	text-align:left;
}
.resaltar{
	display:inline-block;
	font-size:1.2em;
	margin:0;
	padding:0;
}
.parrafos{
	color:#4B7373;
	transition:1s all ease;
	margin:0;
	padding:0;
	text-align:center;
}
.parrafos .resaltar{
	display:inline-block;
	font-size:2em;
	margin:0;
	padding:0;
}
.secciones{
	height:0;
	background:rgba(255,255,255,0.2);	
	overflow:hidden;
	padding:0;
	position:absolute;	
	transition:1s all ease;
	top:20em;
	right:6%;
	width:60%;
	z-index:2;
}
#sec_nosotros{
	/*top:6em;
	right:6%;*/
	background:transparent;
	width:85%;
}
#sec_contacto{	
	/*top:6em;
	right:6%;*/
	background:transparent;
	width:85%;
}
#sec_contacto .parrafos{
	text-align:left;
}
#sec_lonuevo{
	/*top:6em;
	right:6%;*/
	background:transparent;
	width:85%;
}
#sec_portafolio{
	/*top:6em;
	right:6%;*/
	background:transparent;
	width:85%;
}
.trabajos{
	display:inline-block;
	height:15em;
	margin: 0 0.5em 1em 0;
	position:relative;
	overflow:hidden;
	vertical-align:top;
	width:32.1%;
}
.trabajos img{
	left:0;
	position:absolute;
	transition:1s all ease;
	top:0;	
	width:100%;
	z-index:3;
}
.trabajos img:hover{
	cursor:pointer;
	transform:scale(1.1,1.1);
}
.trabajos figcaption{
	background:#4B7373;
	color:#b3d4ce;
	cursor:pointer;
	font-size:1em;
	height:2em;
	left:0;
	padding:0.3em 0.3em;
	position:absolute;
	text-align:center;
	top:13em;	
	width:100%;
	z-index:4;
}

/**************************************/
/**************************************/
/****TRABAJO***********************/
#caja_imagen_trabajo,#imagen_trabajo{
	display:inline-block!important;
	margin:1em;
	vertical-align:top;
	/*width:35%;*/
}
#caja_imagen_trabajo img{
	width:95%;
}
#trabajo{
	color:#4B7373;
	display:inline-block!important;
	margin:1em;
	vertical-align:top;
	width:35%!important;
}
/**************************************/
/****FOOTER***********************/
footer{
	border-top:2px solid #4B7373;
	font-weight:bold;
	margin:2em 0 0 0;
	padding:1em 0 1em 0;
	color:#4B7373;
}
/**************************************/
/****FORMULARIOS***********************/
form{
	margin:1em 0 0 0;
	padding:0;
	text-align:left;
	width:auto;
}
fieldset{
	border:1px solid #4B7373;
	border-radius:0.3em;
	color:#4B7373;
	margin:0 0 0.3em 0;
	width:96%;
}
.cajaformulario, .cajabarra{
	border:1px solid #4B7373;
	border-radius:0.3em;
	color:#4B7373;
	display:inline-block;
	font-size:0.9em;
	margin:0 0 0.3em 0;
	padding:0.2em;
	text-align:left;
	/*text-transform:uppercase;*/
	vertical-align:top;
	width:98%;		
}
.cajaformulario > input[type='text'],.cajaformulario > input[type='url'], .cajaformulario > input[type='time'],.cajaformulario > input[type='number'],select, input[type='password'], input[type='date'], .cajaformulario > textarea,.numbercierre, input[type='email'] {
	background:transparent;
	border:1px solid black;
	border:none;
	color:#333;
	display:inline-block;
	font-family:arial;
	float:right;
	margin:0;	
	padding:0.3em;
	vertical-align:top;	
	width:50%;
}
#enviar, .btn,.botoneliminar,.botoneditar{
	border:none;
	background:#4B7373;
	border-radius:0.3em;
	color:white;
	padding:0.5em 1em;
	text-decoration:none;	
}
#enviar:hover, .btn:hover, .botoneliminar:hover,.botoneditar:hover;{
	background:#3A5757;
}
/***************************************/
/******DISPOSITIVOS MOBILES*********/
/******************************************/
@media only screen and (max-width:2560px){
	body{
		font-size:25px;
	}	
	header{	
		margin:7em 0 1em 0;
	}
	#mascara{
		height:50em;
		top:-18em;
		left:-1em;
		margin-bottom:4em;
		width:102.5%;
	}
	#sec_nosotros{
		font-size: 1.5em;
		padding-top:7em!important;

	}
	
	#centro{		
		height:55em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#vaso_centro_tranparent{
		height:55em;		
		top:-12.5em;
		left:32%;
		width:36%;
	}
	#humo_centro{	
		/*border:1px solid black;*/
		height:55em;
		position:absolute;	
		top:-17em;
		left:35%;
		width:30%;
	}
	
}

@media only screen and (max-width:2048px){	
	body{
		font-size:25px;
	}
	header{	
		margin:7em 0 1em 0;
	}
	#mascara{
		height:37em;
		top:-12em;
		left:-1em;
		margin-bottom:4em;
		width:102.5%;
	}
	#sec_nosotros{
		font-size: 1em;
		padding-top:6em!important;

	}
	
	#centro{				
		height:37em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#vaso_centro_tranparent{		
		height:37em;		
		top:-12.5em;
		left:32%;
		width:36%;
	}
	#humo_centro{			
		height:37em;
		position:absolute;	
		top:-17em;
		left:35%;
		width:30%;
	}
}
@media only screen and (max-width:1920px){
	body{
		font-size:20px;
	}	
	header{	
		margin:7em 0 1em 0;
	}
	#mascara{
		height:45em;
		top:-15em;
		left:-1em;
		margin-bottom:4em;
		width:102.5%;
	}
	#sec_nosotros{
		padding-top:10em!important;
	}
	
	#centro{
		/*border:1px solid black;*/
		height:45em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#vaso_centro_tranparent{
		height:45em;		
		top:-12.5em;
		left:32%;
		width:36%;
	}
	#humo_centro{	
		/*border:1px solid black;*/
		height:45em;	
		position:absolute;	
		top:-17em;
		left:35%;
		width:30%;
	}
	
}
@media only screen and (max-width:1600px){	
	body{
		font-size:16px;
	}	
	header{	
		margin:7em 0 1em 0;
	}
	#mascara{
		height:65em;
		top:-15em;
		left:-1em;
		margin-bottom:4em;
		width:102.5%;
	}
	#sec_nosotros{
		padding-top:7em!important;
	}
	
	#centro{
		/*border:1px solid black;*/
		height:50em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#vaso_centro_tranparent{
		height:50em;		
		top:-12.5em;
		left:32%;
		width:36%;
	}
	#humo_centro{	
		/*border:1px solid black;*/
		height:50em;	
		position:absolute;	
		top:-17em;
		left:35%;
		width:30%;
	}
	
}
@media only screen and (max-width:1440px){	
	header{	
		margin:7em 0 1em 0;
	}
	#mascara{
		height:47em;
		top:-15em;
		left:-1em;
		margin-bottom:4em;
		width:102.5%;
	}
	#sec_nosotros{
		padding-top:5em!important;
	}
	
	#centro{		
		height:45em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#vaso_centro_tranparent{
		height:45em;		
		top:-12.5em;
		left:32%;
		width:36%;
	}
	#humo_centro{	
		/*border:1px solid black;*/
		height:45em;	
		position:absolute;	
		top:-17em;
		left:35%;
		width:30%;
	}
	
}
@media only screen and (max-width:1366px){	
	header{	
		margin:6em 0 1em 0;
	}
	#mascara{
		height:40em;
		top:-14em;
		left:-1em;
		margin-bottom:4em;
		width:102.5%;
	}
	#sec_nosotros{
		padding-top:5em!important;
		font-size: 1.3em
	}
	#humo_centro{			
		height:30em;	
		position:absolute;	
		top:-17em;
		left:35%;
		width:30%;
	}
	#centro{		
		height:37em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#vaso_centro_tranparent{
		height:37em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#humo_centro{	
		height:30em;
		top:-17em;
		left:35%;
		width:30%;
		z-index:2;
	}
}
@media only screen and (max-width:1280px){	
	header{	
		margin:4em 0 1em 0;
	}
	#mascara{
		height:42em;
		top:-13em;
		left:-1em;
		width:102.5%;
	}
	#sec_nosotros{
		padding-top:5.5em!important;
		font-size: 1.1em
	}
	#centro{		
		height:40em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#vaso_centro_tranparent{
		height:40em;
		top:-12.5em;
		left:32%;
		width:36%;
		z-index:1;
	}
	#humo_centro{	
		height:30em;
		top:-17em;
		left:35%;
		width:30%;
		z-index:2;
	}
}
@media only screen and (max-width:1150px){
	#mascara{
		height:42em;
		top:-11em;
		left:-0.8em;
		margin-bottom:4em;
		width:102.5%;
	}
	#sec_nosotros{
		padding-top:3em!important;
	}
	/************/
	/**VASO****/
	#centro{		
		height:30em;
	}
	#humo_centro{			
		height:30em;	
	}
	.window-container{		
		margin: 2em auto!important;
	}
}
@media only screen and (max-width:1024px){
	header{
		margin:4em 0 2em 0;
	}
	/**TRABAJOS*/
	.trabajos{
		width:31.8%;
	}
	/************/
	/**VASO****/
	#centro{		
		height:30em;
	}
	#humo_centro{			
		height:30em;	
	}
	/************/
	/**MASCARA*/
	#mascara{
		height:43em;
		top:-12em;
		left:-1em;
		margin-bottom:4em;
		width:103.2%;
	}
	/****TRANSPARENTE**/
	#vaso_centro_tranparent{
		height:30em;
	}
	.window-container{		
		margin: 2em auto!important;
	}
	#sec_nosotros{
		margin-top:-1.5em;
	}
}
/***    DISEÑO PARA TABLETAS           ****/
@media only screen and (max-width:800px){
	body{
		font-size:14px;
	}
	/**TRABAJOS*/
	.trabajos{
		width:31.7%;
	}
	/************/
	/**VASO****/
	#centro{
		margin-top:5em;		
		height:30em;
	}
	#humo_centro{	
		margin-top:5em;		
		height:30em;	
	}
	/************/
	/**MASCARA*/
	#mascara{
		height:37em;
		top:-11em;
		left:-1em;
		width:103.2%;
	}
	/****TRANSPARENTE**/
	#vaso_centro_tranparent{
		margin-top:5em;
		height:26em;
	}
	.window-container{		
		margin: 2em auto!important;
	}
	/**TEXTO DINAMICO*/
	#texto_dinamico{
		width:15%;
	}
	header{
		margin:4em 0 2em 0;
	}
	#pc{
		margin-top:-1.2em;
	}
	#sec_nosotros{
		font-size: 1em;
		margin-top:1em;
	}
	#caja_imagen_trabajo,#imagen_trabajo{
		width:45%;
	}
	#trabajo{
		width:43%;
	}
}
@media only screen and (max-width:768px){
	/**TEXTO DINAMICO*/
	#texto_dinamico{
		width:17%;
	}
	#mascara{
		height:37em;
		top:-11em;
		left:-0.9em;
		width:103.2%;
	}
	#caja_imagen_trabajo,#imagen_trabajo{
		width:45%;
	}
	#trabajo{
		width:43%;
	}
	#sec_nosotros p{
		margin-top:6em;
		font-size:0.8em!important;
	}
	#sec_nosotros{
		margin-top:-3em;
	}
	
}
@media only screen and (max-width:720px){
	/**TRABAJOS*/
	.trabajos{
		width:31.5%;
		height:12em;
	}
	.trabajos figcaption{
		top:10em;	
	}
	#sec_nosotros p{
		font-size:0.8em!important;
	}
	#sec_nosotros{
		margin-top:-3em;
	}
	#caja_imagen_trabajo,#imagen_trabajo{
		width:98%;
	}
	#trabajo{
		width:98%;
	}

}
@media only screen and (max-width:640px){
	/**TEXTO DINAMICO*/
	#texto_dinamico{
		font-size:0.9em;
		width:19%;
	}
	#texto_seccion{
		font-size:0.9em;
		width:17%;
	}
	#mascara{
		height:28em;
		top:-10em;
		left:-0.8em;
		width:104.2%;
	}	
	#sec_nosotros{
		margin-top:-6em;
	}
	#sec_nosotros p{
		font-size:0.8em!important;
	}
	.trabajos{
		width:31.2%;
		height:12em;
	}
	#caja_imagen_trabajo,#imagen_trabajo{
		width:98%;
	}
	#trabajo{
		width:98%;
	}
}
@media only screen and (max-width:540px){
	#sec_nosotros{
		margin-top:-6em;
	}
	#sec_contacto{
		font-size:0.8em!important;
	}
	#sec_nosotros p{
		font-size:0.6em!important;
	}
	.trabajos{
		width:31%;
		height:8em;
	}
	.trabajos figcaption{
		font-size:0.6em!important;
		top:11em;	
	}
	#caja_imagen_trabajo,#imagen_trabajo{
		width:98%;
	}
	#trabajo{
		width:98%;
	}
	#mascara{
		height:37em;
		top:-10em;
		left:-0.7em;
		width:104.2%;
	}
	
}
@media only screen and (max-width:480px){
	
}