/* ..............................
.								.
.	Cliente: METAUKA		 	.
.	Agencia: APEPU. 			.
.	Copyright 2016 				.
.	- Estilos Generales			.
.								.
.............................. */



/* BODY .......................................................................................*/
html { font-size: 62.5%; }


body {
	margin: 0;
	padding: 0;
	font: 300 18px/1.4 "Gautami", sans-serif;
	background: rgb(245,245,245);
}

a {
	text-decoration: none;
	color: white;
	outline: none;
}

a:hover { color: black }


/* Tipografias a utilizar ......................................................................*/
@font-face {
	font-family: "Gautami";
	src: 	url(../../assets/fonts/gautami/gautami.eot);
	src: 	url(../../assets/fonts/gautami/gautami.eot?#iefix)format("embedded-opentype"),
			url(../../assets/fonts/gautami/gautami.woff)format("woff"),
			url(../../assets/fonts/gautami/gautami.ttf)format("truetype"),
			url(../../assets/fonts/gautami/gautami.svg#gautami)format("svg");
	font-style: normal
}


@font-face {
	font-family: "Gautami-Bold";
	src: 	url(../../assets/fonts/gautami-bold/gautami-bold.eot);
	src: 	url(../../assets/fonts/gautami-bold/gautami-bold.eot?#iefix)format("embedded-opentype"),
			url(../../assets/fonts/gautami-bold/gautami-bold.woff)format("woff"),
			url(../../assets/fonts/gautami-bold/gautami-bold.ttf)format("truetype"),
			url(../../assets/fonts/gautami-bold/gautami-bold.svg#gautami-bold)format("svg");
	font-style: normal
}


@font-face {
	font-family: "Swiss721BT-Black";
	src: 	url(../../assets/fonts/Swiss721BT-Black/Swiss721BT-Black.eot);
	src: 	url(../../assets/fonts/Swiss721BT-Black/Swiss721BT-Black.eot?#iefix)format("embedded-opentype"),
			url(../../assets/fonts/Swiss721BT-Black/Swiss721BT-Black.woff)format("woff"),
			url(../../assets/fonts/Swiss721BT-Black/Swiss721BT-Black.ttf)format("truetype"),
			url(../../assets/fonts/Swiss721BT-Black/Swiss721BT-Black.svg#Swiss721BT-Black)format("svg");
	font-style: normal
}

@font-face {
	font-family: "bpicons";
	font-weight: normal;
	font-style: normal;
	src:	url(../../assets/fonts/bpicons/bpicons.eot);
	src:	url(../../assets/fonts/bpicons/bpicons.eot?#iefix) format(embedded-opentype),
			url(../../assets/fonts/bpicons/bpicons.woff) format(woff),
			url(../../assets/fonts/bpicons/bpicons.ttf) format(truetype),
			url(../../assets/fonts/bpicons/bpicons.svg#bpicons) format(svg);
}

@font-face {
	font-family: "icomoon";
	font-weight: normal;
	font-style: normal;
	src:	url(../../assets/fonts/icomoon/icomoon.eot);
	src:	url(../../assets/fonts/icomoon/icomoon.eot?#iefix) format(embedded-opentype),
			url(../../assets/fonts/icomoon/icomoon.woff) format(woff),
			url(../../assets/fonts/icomoon/icomoon.ttf) format(truetype),
			url(../../assets/fonts/icomoon/icomoon.svg#icomoon) format(svg);
}
@font-face {
	font-family:'FontAwesome';
	font-weight: normal;
	font-style: normal;
	src: 	url(../../assets/fonts/font-awesome/fontawesome-webfont.eot?v=4.5.0);
	src: 	url(../../assets/fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.5.0) format(embedded-opentype),
			url(../../assets/fonts/font-awesome/fontawesome-webfont.woff2?v=4.5.0) format(woff2),
			url(../../assets/fonts/font-awesome/fontawesome-webfont.woff?v=4.5.0) format(woff),
			url(../../assets/fonts/font-awesome/fontawesome-webfont.ttf?v=4.5.0) format(truetype),
			url(../../assets/fonts/font-awesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular) format(svg);
}


/* Resets ........................................................................................*/
* {
	margin: 0;
	padding: 0;
	border: 0px none;
	box-sizing: border-box;
}

*:after,
*:before { box-sizing: border-box; }


/* Helper classes */
.clear { *zoom: 1; }
.clear:before,
.clear:after { content:''; display: table; }
.clear:after { content:''; display: block; clear: both; }




/* ········································
	Colores para la web :
	1: rojo:		rgb(229,38,42);
	2: Amarillo: 	rgb(255,190,15);
	3: Gris: 		rgb(43,43,43);
	4: Gris Claro: 	rgb(245,245,245);
········································*/

/* AUTOADMINISTRABLE*/

.colorf{
 background-color: rgb(43,43,43);
}
.fondo{
	margin: 0 auto;
	background-color: rgb(39, 17, 17);
	width: 80%;
	padding-top: 1%;  
}
.menucerrar a{
	float: right;
	text-align: center;
	color: #e6212b;
	padding-top: 20px;
}
.admmenu{
	padding-bottom: 3%;
}
.centrar{
	color: #fff;
	width: 75%;
    clear: none;
    margin: 0 auto;
}
.formAdm { width: 100%; position: relative; margin: 3% auto; }
.formAdm h2 { font-size: 1.50em; text-transform: uppercase; color: rgb(255,190,15); font-weight: 700; }
.formAdm #Login1 h2::after {
	border: 0px;
	}
.formAdm h3 { 
	font-size:  14px;
	padding: 3%;
}
th{


}
.formAdm input[type="text"], .formAdm input[type="password"], .formAdm textarea {
	width: 100%;
	margin: 10px auto;
	padding: 20px;
	background: rgb(250,250,250);
	border: 0;
	border: 1px solid rgb(225,225,225);
	outline: none;
	color: #6D7781;
	font-size: 16px;
}
.formAdm textarea { height: 300px; padding: 20px;}
.formAdm label {
	display: inline-block;
	margin: 0 auto;
	width: 150px;
	height: 30px;
	background: transparent;
	content: "";
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.formAdm input[type="submit"] {
	background: #1FCE6D;
	border: 0;
	width: 30%;
	border-radius: 3px;
	color: #fff;
	font-size: 1.20em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	padding: 13px;
	transition: background 0.3s ease-in-out;
	margin-top: 5%;

}
.formAdm select {
	padding: 8px;
	margin-top: 2%;
}

#Login1Button_DoLogin{
	width: 55%;
	margin-top: 5%;
	padding: 10px;
	text-align: center;

}
#Login1login , #Login1password{
	padding: 10px;
	text-align: center;

}
.lista{
	list-style: none;
	width: 70%;
	text-align: center;
	margin: 0 auto;
}
.lista ul { 
	list-style: none;
	width: 90%;
	margin: 0 auto;
}

.lista ul li { 
	margin-top: 5%;
	background: #1FCE6D;
	width: 100%;
	border-radius: 3px;
	color: #fff;
	font-size: 1.20em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 12px ; 
}

.lista h1{
	color: rgb(255,190,15);
	font-size: 50px;
}
.cerrar{
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	margin: 0 auto;
	padding-top: 10%;
}



.parallax-container {
      height: "400px";
    }


/* CONTENIDO & PAGINAS
- Portada / Nosotros / Productos / Taller / Contactenos
................................................................................................*/

/* Header ······················································································*/
canvas { display: block; vertical-align: bottom; }
header { height: auto; width: 100%; overflow:hidden }

.cabezera { display: inline-block; width: 50%; background: url(../../assets/imagenes/headerBg1.png) no-repeat top right; height: 700px}

.logos { float: right; padding: 30%}
.isotipo { width: 100%; }
.isotipo img { width: 80%; vertical-align: middle; margin: 0 auto;}


/* slideshow */
.logo { position:absolute; top:23%; width:50%; left: 0; z-index: 9999; text-align: right; }
.logo img { bottom:10px;bottom:calc(100% - 90%); padding-right: 300px }

.slideshow { position:relative; height: 700px }
.slideshow>.bgRojo { position:absolute; width:50%; top: 0; right:0; height:100%; background:rgb(229,38,42); z-index:1;}
.slideshow>.particulas { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.slideCont { position:absolute; bottom:100px; bottom:calc(100% - 60%); width:550px; left: 0; text-align: right; }
.slideCont h2 { color: rgb(0,0,0); font-size:3.50em; margin: 30px 0; text-transform: uppercase; font-family: "Gautami-Bold";}
.slideCont h3 { font-size: 3em; color: rgb(255,255,255); text-transform: uppercase; font-family: "Gautami-Bold"; }
.slideshow p { font-size: 1.10em; color: white; }

.unslider-vertical li { margin: 20px 0; }

/* ---- particles.js container ---- */
#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
}


.isologoCenter {
	position:absolute;
	top: 25%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index:2
}
.isologoCenter { fill:#212121; }

/*······························································································*/

.parallax {	}

/* Navegación ··················································································*/
nav .row { margin: 0; padding: 0 }
nav {
	background:rgb(255,255,255); width:100%; color:black; padding:0;
	border-top: 1px solid rgb(225,225,225);
	border-bottom: 1px solid rgb(225,225,225);
}
nav ul { list-style: none; margin: 0; padding: 0; text-align: center;}
nav ul li { display: inline-block; padding: 0 20px; }
nav ul li span a { font-size: 0.80em; color: black; text-transform: uppercase; text-align: center; font-family: "Gautami-Bold"; }
nav ul li span a:hover { text-decoration: none; color: rgb(229,38,42); }
nav ul li span a.active { color: rgb(229,38,42); }

nav ul li span {
	position: relative;
	display: block;
	cursor: pointer;
	padding: 22px 0 15px;
	margin: 0;
}
nav ul li span:before, nav ul li span:after {
	content: '';
	position: absolute;
	width: 0%;
	height: 5px;
	bottom: 0%;
	margin-top: -0.5px;
	background: rgb(229,38,42);
}
nav ul li span:before { left: -2.5px; }
nav ul li span:after {
	right: 2.5px;
	background:rgb(229,38,42);
	-webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
nav ul li span:hover:before {
	color: rgb(229,38,42);
	background:rgb(229,38,42);
	width: 100%;
	-webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
nav ul li span:hover:after {
	color: rgb(229,38,42);
	background: transparent;
	width: 100%;
	-webkit-transition: 0s;
	transition: 0s;
}

.ocultar { display: none !important }


.uk-thumbnail-caption { margin-top: 10px; }


/* Seccion Empresa ·············································································*/

section p { color: rgb(150,150,150); font-family: "Gautami"; }

.titulo { margin: 3% 0; }
.titulo h6, .titulo h2 { margin: 0; text-transform: uppercase;  }
.titulo h2 { font-family: "Gautami-Bold" }

.empresa { padding: 0% 0 0%; }
.empresa p { line-height: 25px; text-align: justify; margin-bottom: 30px; }
.empresa b { color: rgb(229,38,42)}
.empresa div.uk-clearfix {margin: 3% 0; }
.empresa img.uk-align-medium-left { margin-right: 3%; }
.empresa img.uk-align-medium-right { margin-left: 3%; }

.servicios h2 { color: rgb(229,38,42); margin: 30px 0;}
.servicios p { color: rgb(255,255,255) !important; }
.servicios i { font-size: 450%;  }

.parallax1 {
	width: 100%;
	height: auto;
	background-image: url(../../assets/imagenes/slideshow/slide1.jpg);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0;
}
.bienvenido { height: 600px; }
.bienvenido img { width: 100%; height: 100% }
.bienvenido h3 {
	position: absolute; font-size: 3em; color: white; text-transform: uppercase; font-style: 400; left: 0; right: 0; text-align: center;
	top: 50%;
	transform: translateY(-50%); }



.parallax3 {
	width: 100%;
	height: auto;
	background-image: url(../../assets/imagenes/slideshow/slide2.jpg);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	padding: 13% 0;
}

.parallaxGeneral { margin: 0; padding: 0;}
.parallaxGeneral h2 { color: rgb(255,255,255); font-size: 3em; }
.parallaxGeneral .uk-margin { margin: 0; }
.parallax2 {
	width: 100%;
	height: auto;
	background-image: url(../../assets/imagenes/parallax2.jpg);
	background-size: 1600px 1000px;
	background-position: 100% -80%;
	background-repeat: no-repeat;
	padding: 2% 0;
}
.divide {margin: 7% 0; content: ""}



.uk-slidenav-position .uk-slidenav-next { right: -50px !important; }
.uk-slidenav-position .uk-slidenav-previous { left: -50px !important; }


.taller { padding: 5% 0 0; }
.taller h2, .taller h4 { margin: 0; line-height: 25px; }
.taller h4 { margin: 0 0 30px; color: rgb(229,38,42); }
.taller i { color: rgb(229,38,42); margin-right: 10px; }
.taller li { font-size: 0.90em; }



/*······························································································*/


#cf {
	position:relative;
	width:570px;
	height:360px;
	margin:0 0 0 30px;
}
#cf1 {
	position:relative;
	width:570px;
	height:360px;
	margin:0 30px 0 0;
}
#cf2 {
	position:relative;
	width:545px;
	height:360px;
	margin:0 30px 0 0;
}
#cf img,
#cf1 img,
#cf2>div {
	position:absolute;
	left:0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

#cf2 .uk-thumbnail-caption { background: white; padding: 10px; }

@keyframes cf3FadeInOut {
	0% { opacity:1; }
	45% { opacity:1; }
	55% { opacity:0; }
	100% { opacity:0; }
}

#cf img.top,
#cf1 img,
#cf2>div {
	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: alternate;
}

#cf1 img:nth-of-type(1) { animation-delay: 0s; }
#cf1 img:nth-of-type(2) { animation-delay: 6s; }
#cf1 img:nth-of-type(3) { animation-delay: 8s; }
#cf1 img:nth-of-type(4) { animation-delay: 10s; }

#cf2>div:nth-of-type(1) { animation-delay: 0s; }
#cf2>div:nth-of-type(2) { animation-delay: 6s; }
#cf2>div:nth-of-type(3) { animation-delay: 8s; }



#cf4a {
	position:relative;
	width:450px;
	height:281px;
	margin:0 auto;
}
#cf4a img { position:absolute; left:0; }

#cf4a img {
	-webkit-animation-name: cf4FadeInOut;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 8s;

	-moz-animation-name: cf4FadeInOut;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 8s;

	-o-animation-name: cf4FadeInOut;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 8s;

	animation-name: cf4FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 8s;
}
#cf4a img:nth-of-type(1) {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-o-animation-delay: 4s;
	animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-o-animation-delay: 2s;
	animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
	-webkit-animation-delay: 0;
	-moz-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
}


.tiras { margin: 40px 0; }

/*······························································································*/
.social ul { list-style: none; }
.social ul li {
	display: inline-block;
	padding: 15px 10px;
}
.social a { color: black; font-size: 1.20em; }
.social a:hover { color: rgb(229,38,42); }
.iconoFonts { position: relative; display: inline-block; text-align: left; }
.iconoFonts > span { display: none; }
.iconoFonts:hover:before {
	content: attr(data-info);
	font-size: 0.85em;
	position: absolute;
	top: 100%;
	left: 0;
	width: 1600%;
	text-align: left;
	pointer-events: none;
	font-family: "Gautami";
	color: silver
}


.contacto { padding: 5% 0; }
.formulario { padding: 5% 0; }

em { color: rgb(229,38,42); }
/* Footer ······················································································*/
footer { background: rgb(0,0,0); color: rgb(255,255,255); padding: 50px 0;  }
footer ul.uk-subnav li a { color: rgb(255,255,255); }
footer ul.uk-subnav li a:hover { color: rgb(229,38,42); }
footer hr.uk-article-divider { border-color: rgba(229,38,42,0.60) }
footer span { font-size: 1.50em; line-height: 20px; color: rgb(229,38,42); }
/*······························································································*/
.formulario form input { height: 50px }
.formulario form input,
.formulario form textarea {
	max-width: 100%;
	padding: 4px 6px;
	border: 1px solid #bebebe;
	background: transparent;
	color: #808080;
	-webkit-transition: all linear 0.2s;
	transition: all linear 0.2s;
	border-width: 0 0 1px 0;
}


em { color: rgb(229,38,42) !important }
.productos { padding: 5% 0; }
.uk-breadcrumb a { text-decoration: none; color: rgb(229,38,42) }
.uk-breadcrumb a:hover { text-decoration: none; color: black }
.marcas { margin: 70px 0; }
.marcas li figure {
	background: white;
	border: 1px solid rgb(229,38,42);;
}

.marcas li figure.uk-overlay-background { background: rgb(229,38,42,0.3); }
.marcas figure h5 { text-align: left; padding: 10px 0 10px 10px; width: 100%; background: rgb(229,38,42); color: white; line-height: 0; margin: 0; }
.marcas figure h5 a { color: white; text-decoration: none; }
.marcas figure h5 a:hover { color: black }
.marcas figcaption p { color: white; font-size: 0.90em }
.prod-sudtitulo {
	padding-left: 6px;
	border-left: 3px solid rgb(229,38,42);
	font-size: 16px;
	line-height: 16px;
	text-transform: uppercase;
}
.prod-imagen { border: 5px solid rgb(245,245,245) }
.main-blanco { background: white; padding: 30px !important; }
.main-blanco .uk-align-right { margin: 0;}

.main-blanco img.uk-overlay-spin {width: 200% !important;}





/* GRILLA
································································································*/

.contenedor { width: 1180px; margin: 0 auto; }
.flexbox {
	display: -webkit-flex;
	display: flex;
}

.row { margin: 20px 0; }
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Establecer valores por defecto en todas las columnas */
[class*="colM"] {
	margin-right: 2%;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
[class*="colM"]:last-child { margin-right: 0; }


.muestraCol [class*="colM"] {
	background: rgba(255,0,0,0.05);
	padding: 15px;
	text-align: center;
}

.colM1 { width: 6.5%; }
.colM2 { width: 15%; }
.colM3 { width: 23.5%; }
.colM4 { width: 32%; }
.colM5 { width: 40.5%; }
.colM6 { width: 49%; }
.colM7 { width: 57.5%; }
.colM8 { width: 66%; }
.colM9 { width: 74.5%; }
.colM10 { width: 83%; }
.colM11 { width: 91.5%; }
.colM12 { width: 100%; float: none; }


/*	Smaller Screens
**********************************/
@media only screen and (max-width: 1200px) {
	.contenedor { width: 960px; }
}

/* Tablets
**********************************/
@media only screen and (max-width: 1024px) {
	.contenedor { width: 760px; }
}

@media only screen and (max-width: 1366px) {
	.slideCont { top: 40% }
	.logo { top:45%; }
	.isologoCenter {
		top: 45%;
		left: 50%;
	}
}

@media only screen and (max-width: 1920px) {
	.slideCont { top: 40% }
	.logo { top:35%; }
	.isologoCenter {
		top: 35%;
		left: 50%;
	}
}


/* Mobile Devices -	All columns are full width
**********************************/
@media only screen and (max-width: 767px) {
	.isologoCenter {
		top: 45%;
		left: 50%;
	}

	header { display: none !important; }
	.ocultar { display: block !important; }
	.navgeneral { display: none !important }
	.contenedor { width: 96%; }
	.row { margin: 0; }
	[class*="colM"] { margin: 15px 0; float: none; width: 100%; }
}

/*······························································································*/











/* ANIMACIONES 
································································································*/

/*······························································································*/