@import 'https://fonts.googleapis.com/css?family=Roboto';

@font-face {
	font-family: 'Verdana';
	src: url('../fonts/Verdana.eot');
	src: url('../fonts/Verdana.eot?#iefix') format('embedded-opentype'),url('../fonts/Verdana.woff2') format('woff2'),url('../fonts/Verdana.woff') format('woff'),url('../fonts/Verdana.ttf') format('truetype');
}

@font-face {
	font-family: 'century-gothic';
	src: url('../fonts/century-gothic.eot');
	src: url('../fonts/century-gothic.eot?#iefix') format('embedded-opentype'),url('../fonts/century-gothic.woff2') format('woff2'),url('../fonts/century-gothic.woff') format('woff'),url('../fonts/century-gothic.ttf') format('truetype');
}

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto.eot');
	src: url('../fonts/Roboto.eot?#iefix') format('embedded-opentype'),url('../fonts/Roboto.woff2') format('woff2'),url('../fonts/Roboto.woff') format('woff'),url('../fonts/Roboto.ttf') format('truetype');
}


body{
	margin: 0;
	/*background:#2a2a2c;
	overflow-x: hidden;*/
	font-family: 'Roboto';
	overflow-x: hidden;
}

/*::-webkit-scrollbar {
    width: 7px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset  0  0 12px  rgba(0,119,255,.5); 
    border-radius: 0px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 6px 6px 6px 6px  rgba(0, 78, 255, 0.6); 
}
*/


#nav-toggle:focus{
	outline: 0
}


.header{
	position: fixed;
	float: left;
	width: 100%;
	z-index: 999;
}

.logo{
	position: relative;
	float: left;
	width: 30%;
	text-align: center;
	height: 40;
}

.logo img{
	max-width: 130px;
	z-index:100;
	position: relative;
	animation: tada 2s;
}

.contacto{
	position: relative;
	float: left;
	width: 25%;
	left: 45%;
	height: 40;
	z-index: 100;
}

.incont{
	position: relative; 
	float: left;
	width: 100%;
	text-align: right;
	
}

.incont a{
	color: #18458f;
	background: rgba(255, 255, 255,.95);
	padding: .2em 1em;
	border-radius: 5px 0px 0px 5px;
	font-size: 12pt;
	margin-top: 10px;
	position: relative;
	float: right;
	font-weight: 600;
}

.incont a:hover{
	animation: pulse 2s infinite;
}

.incont img{
	max-width: 20px;
    top: -2;
    position: relative;
    margin-right: 10px;
}

.menu2{
	position: relative;
	float: left;
	width: 100%;
	background: #fff;
	z-index: 99;
	height: 42px;
}

.menu{
	position: relative;
	left: 25%;
	width: 75%;
}


.slider{
	position: relative;
	float: left;
	width: 100%;
}

.cintillo{
	position: relative;
	float: left;
	width: 100%;
}

.descripcion{
	position: relative;
	float: left;
	width: 100%;
	padding-top: 3%;
	padding-bottom: 3%;
}

.indesc{
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
	text-align: center;
	font-family: 'Roboto';
	font-size: 16pt;
}

.indesc h3{
	font-family: 'Roboto';
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 25pt;
}

.indesc2{
	position: relative;
	float: left;
	width: 33%;
	text-align: left;
}

.indesc2 img{
	max-width: 50px;
}

.catalogo{
	position: relative;
	float: left;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 2%;
}

.incatalogo{
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
}

.cuatro{
	position: relative;
	float: left;
	width: 22%;
	margin-left: 1.5%;
	margin-right: 1.5%;
	margin-top: 1.5%;
	margin-bottom: 1.5%;
	text-align: center;
	background:#e6e6e6;
	border-left: 1px solid #1646a7;
	border-right: 1px solid #1646a7;
	border-bottom: 1px solid #1646a7;
	border-radius: 11px 11px 11px 11px;
}

.cuatro img{
	max-width: 90%;
	margin-top:10px;
}

.cuatro p{
	position: relative;
	width: 100%;
	background: #e6e6e6;
	padding: .2em;
	font-family: 'Roboto';
	text-transform: uppercase;
	font-weight: 600;
	color: #1646a7;
}

.cuatro:hover > #back{
	animation-name: arriba;
	animation-duration: 1s;
}

.cuatro:hover > p{
	top:-20px
}


@keyframes arriba {
  from {
	top: 0;
  }

  to {
    top: -20px;
  }
}



.mapform{
	position: relative;
	float: left;
	width: 100%;
	background: #272626;
}

.mapa{
	position: relative;
	float: left;
	width: 65%;
	border-bottom: 4px solid #0862b0;
}

#back2{
	width: 100%;
	height: 100%;
	background: rgba(36, 236, 247, 0.7);
	position: absolute;
}

.mapa:hover > #back2{
	display: none;
	transition: display 420ms linear;
}

.formulario{
	position: relative;
	float: left;
	width: 35%;
	background: url('../images/forma.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	height: 361px;
}


.formulario table{
	color: #fff;
	margin-top: 4%;
	width: 50%;
    left: 10%;
    position: relative;
	font-family: 'Roboto';
}

.formulario input{
	outline: 0;
	font-family: 'Roboto';
	color: #2e2e2e;
	padding: .2em;
	width: 100%;
	border: 2px solid #fff;
    border-radius: 5px;
	transition: border 420ms linear;
}

.formulario input:focus{
	border: 2px solid #018aff;
	transition: border 420ms linear;
	animation: pulse 2s infinite;
}

.formulario textarea{
	outline: 0;
	font-family: 'Roboto';
	color: #2e2e2e;
	padding: .2em;
	height: 70px;
	width: 100%;
	border: 2px solid #fff;
	border-radius: 5px;
}

.formulario textarea:focus{
	border: 2px solid #018aff;
	transition: border 420ms linear;
	animation: pulse 2s infinite;
}

#ti{
	font-family: 'Roboto';
	font-weight: 600;
	text-align: center;
	font-size: 25px;
}

#envia{
	padding: .2em .9em .2em .9em;
	background: #0862b0;
	border: 1px solid #0862b0;
	border-radius: 7px;
	width: 100%;
	color: #fff;
	font-family: 'Roboto';
	transition: background 420ms linear;
}


#envia:hover{
	background: #0b4373;
	transition: background 420ms linear;
	animation: pulse 3s infinite;
}


.feet{
	position: relative;
	float: left;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 2%;
	background: #272626;
}

.direccion{
	position: relative;
	float: left;
	width: 60%;
	border-left: 2px solid #fff;
	padding: .5em;
	left: 5%;
	color: #fff;
	font-family: 'Roboto';
}

.direccion a{
	color: #fff;
}

.direccion h4{
	font-family: 'Roboto';
}

.direccion p{
	color: #0862b0;
	padding:0;
	margin: 0;
}

.social{
	position: relative;
	float: left;
	left: 5%;
	width: 30%;
	text-align: center;
}

.social img{
	background: #fff;
	border-radius: 50%;
	max-width: 40px;
	margin-top: 10%;
	margin-right: 20px;
	transition: background 420ms linear;
}

.social img:hover{
	background: #0862b0;
	transition: background 420ms linear;
}


@media screen and (max-width: 1041px){
	
	.header{
		position: relative;
	}
	
	.logo{
		position: relative;
		float: left;
		width: 30%;
		left: 0;
		height: auto;
	}
	
	.contacto{
		width: 70%;
		height: auto;
		left:0;
	}

	
	.indesc2{
		font-size: 11pt;
	}
	
	.menu2{
		position: relative;
		margin-top: 0;
		background: #2b2b2b;
		height: auto;
	}
	
	.menu{
		position: relative;
		width: 100%;
		left: 0%;
	}
	
	.cuatro{
		width: 30%;
	}
	
}

@media screen and (max-width: 800px){
	
	.mapa{
		width: 100%;
	}
	
	.formulario{
		width: 100%;
	}
	
	.indesc2{
	width: 50%
	}
	
	.formulario table{
		width: 80%;
	}
	
	.cuatro{
		width: 47%;
	}
	
}


@media screen and (max-width: 500px){
	
	.logo{
		width: 100%;
		text-align: center;
	}
	
	.contacto{
		width: 100%;
	}
	
	.incont{
		text-align: center;
	}
	
	.incont a{
		float: none;
		font-size: 10pt;
	}
	
	.indat{
		text-align: center;
		right: 0;
		padding: .35em;
	}
	
	.indat a{
		font-size: 10pt;
	}
	
	.indesc2{
		width: 100%;
		text-align: left;
		font-size: 10pt;
	}
	
	.cuatro{
		width: 97%;
	}
	
	.direccion{
		width: 90%;
	}
	
	.social{
		width: 90%;
	}
	
}

.informacion{
	position: relative;
	float: left;
	width: 100%;
}

.fabrica{
	position: relative;
	float: left;
	width: 60%;
	height: 500px;
	background: url("../images/fabrica.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	font-family: 'Roboto';
}

.infabrica{
	margin-top: 15%;
	display: none;
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
}

.infabrica h2{
	font-family: 'Roboto';
	border-bottom: 2px solid #fff;
	width: 50%;
	padding-bottom: 10px;
	position: relative;
	float: left;
	left: 25%;
	color: #fff;
}

.infabrica p{
	font-family: 'Roboto';
	font-size: 10pt;
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
	color:#fff;
}

.fabrica:hover > .infabrica{
	display: block;
	color: #fff;
	background: rgba(0,0,0,.65);
	border-radius: 5px;
	animation: pulse 2s infinite;
}

.trabajo{
	position: relative;
	float: left;
	width: 40%;
	height: 250px;
	background: url("../images/trabajo.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	font-family: 'Roboto';
}

.intrabajo{
	margin-top: 10%;
	display: none;
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
}

.intrabajo h2{
	font-family: 'Roboto';
	border-bottom: 2px solid #fff;
	width: 50%;
	padding-bottom: 10px;
	position: relative;
	float: left;
	left: 25%;
	color: #fff;
}

.intrabajo p{
	font-family: 'Roboto';
	font-size: 10pt;
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
	color: #fff;
}

.trabajo:hover > .intrabajo{
	display: block;
	color: #fff;
	background: rgba(0,0,0,.65);
	border-radius: 5px;
	animation: pulse 2s infinite;
}

.trabajo2{
	position: relative;
	float: left;
	width: 40%;
	height: 250px;
	background: url("../images/trabajo2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	font-family: 'Roboto';
}

.intrabajo2{
	margin-top: 10%;
	display: none;
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
}

.intrabajo2 h2{
	font-family: 'Roboto';
	border-bottom: 2px solid #fff;
	width: 50%;
	padding-bottom: 10px;
	position: relative;
	float: left;
	left: 25%;
	color: #fff;
}

.intrabajo2 p{
	font-family: 'Roboto';
	font-size: 10pt;
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
	color: #fff;
}

.trabajo2:hover > .intrabajo2{
	display: block;
	color: #fff;
	background: rgba(0,0,0,.65);
	border-radius: 5px;
	animation: pulse 2s infinite;
}


@media screen and (max-width: 1041px){
	
	.fabrica{
		width: 100%;
		height: auto;
		
	}
	
	.infabrica{
		display: block;
		color: #fff;
		margin-top: 5%;
		margin-bottom: 5%;
		background: rgba(0,0,0,.65);
	}
	
	.trabajo{
		width: 100%;
		height: auto;
		
	}
	
	.intrabajo{
		display: block;
		color: #fff;
		margin-top: 5%;
		margin-bottom: 5%;
		background: rgba(0,0,0,.65);
	}
	
	.trabajo2{
		width: 100%;
		height: auto;
		
	}
	
	.intrabajo2{
		display: block;
		color: #fff;
		margin-top: 5%;
		margin-bottom: 5%;
		background: rgba(0,0,0,.65);
	}
	
	
}

/*=====================NOSOTROS=====================*/


.nosotros{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 3%;
	font-family: 'Roboto';
}

.fachada{
	position: relative; 
	float: left;
	width: 100%;
	text-align: center;
	margin-top: 2%;
	margin-bottom: 2%;
}

.fachada h2{
	font-family: 'Roboto';
	color: #2e5eb9;
}

.fachada img{
	max-width: 50%;
    border: 5px solid #2e5eb9;
    border-radius: 5%;
}

.fachada p{
	position: absolute;
    float: left;
    text-align: center;
    width: 20%;
	left: 40%;
    top: 50%;
    z-index: 99;
	color: #fff;
	background: #2e5eb9;
	font-size: 14pt;
	padding: .5em;
	border-radius: 5px;
	display: none;
}

.fachada img:hover{
	animation: pulse 2s infinite;
}

.fachada:hover > p{
	display: block;
}

.innos{
	position: relative;
	float: left;
	width: 80%;
	left: 10%;
	font-family: 'Roboto'
}

.innos h1{
	font-family: 'Roboto';
	text-align: center;
	padding: .7em;
	border-bottom: 2px solid;
	color: #2e5eb9;
}

.innos p{
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
	padding: .5em;
	font-size: 14pt;
	color: #2e5eb9;
}

.mivi{
	position: relative;
	float: left;
	width: 100%;
}

.vision{
	background: url('../images/nos.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	width: 50%;
	height: 350px;
	position: relative;
	float: left;
}

.invi{
	position: relative;
	float: left;
	width: 80%;
	left: 10%;
	font-size: 14pt;
	text-align: center;
	font-family: 'Roboto';
	background: rgba(78, 163, 255, 0.8);
	margin-top: 10%;
	color: #fff;
	padding: 20px;
}

.vision  h2{
	font-family: 'Roboto';
	color: #fff;
	text-align: center;
	padding: 15px;
	background: rgba(20, 133, 255, 0.8);
	margin:0;
}

.vision:hover > .invi{
	display: block;
	animation: pulse 2s infinite;
}


.mision{
	background: url('../images/nos2.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	width: 50%;
	height: 350px;
	position: relative;
	float: left;
}

.inmi{
	position: relative;
	float: left;
	width: 80%;
	left: 10%;
	font-size: 14pt;
	text-align: center;
	font-family: 'Roboto';
	
	background: rgba(78, 163, 255, 0.8);
	margin-top: 10%;
	color: #fff;
	padding: 20px;
}

.mision  h2{
	font-family: 'Roboto';
	color: #fff;
	text-align: center;
	padding: 15px;
	background: rgba(20, 133, 255, 0.8);
	margin:0;
}

.mision:hover > .inmi{
	display: block;
	animation: pulse 2s infinite;
}


@media screen and (max-width: 800px){
	
	.vision{
		width: 90%;
		left: 5%;
	}
	
	.mision{
		width: 90%;
		left: 5%;
	}
	
	.invi{
		display: block;
		font-size: 12pt;
	}
	
	.inmi{
		display: block;
		font-size: 12pt;
	}
	
	.innos h1{
		font-size: 14pt;
	}
	
	.innos p{
		font-size: 10pt;
	}
	
}


/*===============PRODCUTOS=====================*/


.productos{
	position: relative;
	float: left;
	width: 100%;
	padding-top: 5%;
}

.inprod{
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
	margin-bottom: 20px;
	margin-top: 20px;
}



.informacionp{
	position: relative;
	float: left;
	width: 90%;
	left:5%;
}

.infop{
	position: relative;
	float: left;
	width: 90%;
	left: 5%;
}

.infotop{
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.infotop img{
	max-width: 400px;
	border: 5px solid #2e5eb9;
}

.infop h2{
	font-family:'Roboto';
}

.infop h3{
	font-family:'Roboto';
}

.quadro{
	position: relative;
	float: left;
	width: 23%;
	margin-top: 1%; 
	margin-bottom: 1%; 
	margin-left: 1%; 
	margin-right: 1%; 
	text-align: center;
}

.quadro img{
	max-width: 90%;
}

.quadro p{
	font-size: 14pt;
	font-weight: 600;
}

.quadro img:hover{
	animation: pulse 2s infinite;
}

@media screen and (max-width: 500px){
	
	.infotop img{
		max-width: 90%;
	}	
}

/*===============CONTACTO=======================*/

.contact{
	position: relative;
	float: left; 
	width: 100%;
	margin-top: 10%;
	margin-bottom: 2%;
}

.dats{
	position: relative;
	float: left;
	width: 65%;	
}

.contact h1{
	font-family: 'Roboto';
	color:#2e5eb9;
	text-transform: uppercase;
	margin: .7em;
}

.indats{
	position: relative;
	float: left;
	width: 80%;
	left: 10%;
	padding: 10px;
	color: #2e5eb9;
	font-size: 14pt;
}

.indats h3{
	font-family: 'Roboto';
	text-transform: uppercase;
	text-shadow: 2px 2px 2px #9e98fd;
	color: #2e5eb9;
	font-weight: bold;
}

.indats a{
	color: #2e5eb9;
	font-size: 14pt;
}

.indats a:hover{
	color: #0044c5;
	font-style: italic;
	animation: flash 2s infinite;
}

.dats2{
	position: relative;
	float: left;
	width: 35%;
}

.dats2 > .formulario{
	width: 100%;
	border-radius: 20px 0px 0px 20px;
}

@media screen and (max-width: 1040px){
	
	.dats{
		width: 100%;
	}
	
	.dats2{
		width: 100%;
	}
	.dats2 > .formulario {
		border-radius: 0;
	}
	
}

@media screen and (max-width:800px){
	
	.quadro{
		width: 48%;
	}
	
}

@media screen and (max-width: 500px){
	
	.quadro{
		width: 98%;
	}
}