html {height:100%;}

*, body {
	box-sizing:border-box;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
}

body {font-family: 'corbel_regular', sans-serif; height:100%; display:block; margin:0;}

@font-face {
    font-family: 'corbel_bold';
    src: url(../font/corbel_bold/corbelb_1.ttf) format('truetype');
}

@font-face {
    font-family: 'corbel_regular';
    src: url(../font/corbel_regular/corbel_1.ttf) format('truetype');
}

/* BACKGROUND */

.wrapper { height: 100%; box-sizing:border-box;}

.imagenes {
	background: url(../img/bg-img/bg-01.jpg) no-repeat;
	width:100%;
	height:100%;
	background-position:50%;
	background-size:cover;
	transition:all ease-in-out;
	-moz-transition:all ease-in-out;
	-webkit-transition:all ease-in-out;
	
	animation: landscapes 27s infinite;
	-o-animation: landscapes 27s infinite;
	-ms-animation: landscapes 27s infinite;
	-moz-animation: landscapes 27s infinite;
	-webkit-animation: landscapes 27s infinite;
}

@-ms-keyframes landscapes {
    0% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
    28% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	33% {background: url(../img/bg-img/bg-02.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	61% {background: url(../img/bg-img/bg-02.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	66% {background: url(../img/bg-img/bg-03.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	95% {background: url(../img/bg-img/bg-03.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	100% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
}

@-moz-keyframes landscapes {
    0% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
    28% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	33% {background: url(../img/bg-img/bg-02.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	61% {background: url(../img/bg-img/bg-02.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	66% {background: url(../img/bg-img/bg-03.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	95% {background: url(../img/bg-img/bg-03.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	100% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes landscapes {
    0% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
    28% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	33% {background: url(../img/bg-img/bg-02.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	61% {background: url(../img/bg-img/bg-02.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	66% {background: url(../img/bg-img/bg-03.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	95% {background: url(../img/bg-img/bg-03.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	100% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
}

/* Standard syntax */
@keyframes landscapes {
    0% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
    32% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	33% {background: url(../img/bg-img/bg-02.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	65% {background: url(../img/bg-img/bg-02.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	66% {background: url(../img/bg-img/bg-03.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	99% {background: url(../img/bg-img/bg-03.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
	100% {background: url(../img/bg-img/bg-01.jpg) no-repeat; width:100%; height:100%; background-position:50%; background-size:cover;}
}

.gradiente {
	background: -o-linear-gradient(top,rgba(0,0,0,.25),transparent 20%,transparent 60%,rgba(0,0,0,.3));
	background: -ms-linear-gradient(top,rgba(0,0,0,.25),transparent 20%,transparent 60%,rgba(0,0,0,.3));
	background: -moz-linear-gradient(top,rgba(0,0,0,.25),transparent 20%,transparent 60%,rgba(0,0,0,.3));
	background: -webkit-linear-gradient(top,rgba(0,0,0,.25),transparent 20%,transparent 60%,rgba(0,0,0,.3));
	background: linear-gradient(180deg,rgba(0,0,0,.25) 0,transparent 20%,transparent 60%,rgba(0,0,0,.3));
}

header {width:100%; position:fixed; top:0; box-sizing:border-box; z-index:50;}

.relative {position:relative;}

.container {position:relative;}

.alto {position:relative; height:50vh;}

.foto {
	display:inline-block; 
	vertical-align:top;
	width: 384px;
	height: 222px;
	background-position:50%;
	position:absolute; 
	top:56%; 
	right:-70px;
	z-index:40;
	
	animation: entrance 9s infinite;
	-o-animation: entrance 9s infinite;
	-ms-animation: entrance 9s infinite;
	-moz-animation: entrance 9s infinite;
	-webkit-animation: entrance 9s infinite;
}

@-ms-keyframes entrance {
	0% {
    	transform: translate(80%, 0);
		opacity:0;
	}
	10.25% {
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
    	transform: translate(0, 0);
		opacity:0;
	}
}

@-moz-keyframes entrance {
	0% {
    	transform: translate(80%, 0);
		opacity:0;
	}
	10.25% {
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
    	transform: translate(0, 0);
		opacity:0;
	}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes entrance {
	0% {
		-moz-transform: translate(80%, 0);
		-ms-transform: translate(80%, 0);
    	-webkit-transform: translate(80%, 0);
    	transform: translate(80%, 0);
		opacity:0;
	}
	10.25% {
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:0;
	}
}

/* Standard syntax */
@keyframes entrance {
	0% {
		-moz-transform: translate(80%, 0);
		-ms-transform: translate(80%, 0);
    	-webkit-transform: translate(80%, 0);
    	transform: translate(80%, 0);
		opacity:0;
	}
	10.25% {
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
		-moz-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
		-ms-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:0;
	}
}

.ejemplos {
	display:block;
	width: 100%;
	height: 100%;
	background-repeat:no-repeat;
	
	animation: daikirai 27s infinite;
	-o-animation: daikirai 27s infinite;
	-ms-animation: daikirai 27s infinite;
	-moz-animation: daikirai 27s infinite;
	-webkit-animation: daikirai 27s infinite;
}

@-o-keyframes daikirai {
	0% , 33.3% {background-image: url(../img/img-01.png);}
	33.4% , 66.6% {background-image: url(../img/img-02.png);}
	66.7% , 100% {background-image: url(../img/img-03.png);}
}

@-ms-keyframes daikirai {
	0% , 33.3% {background-image: url(../img/img-01.png);}
	33.4% , 66.6% {background-image: url(../img/img-02.png);}
	66.7% , 100% {background-image: url(../img/img-03.png);}
}

@-moz-keyframes daikirai {
	0% , 33.3% {background-image: url(../img/img-01.png);}
	33.4% , 66.6% {background-image: url(../img/img-02.png);}
	66.7% , 100% {background-image: url(../img/img-03.png);}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes daikirai {
	0% , 33.3% {background-image: url(../img/img-01.png);}
	33.4% , 66.6% {background-image: url(../img/img-02.png);}
	66.7% , 100% {background-image: url(../img/img-03.png);}
}

/* Standard syntax */
@keyframes daikirai {
	0% , 33.3% {background-image: url(../img/img-01.png);}
	33.4% , 66.6% {background-image: url(../img/img-02.png);}
	66.7% , 100% {background-image: url(../img/img-03.png);}
}

.titulo, .amarillo {
	vertical-align:top;
	text-shadow: 1px 1px 6px #000000;
	color: #FFF;
	text-transform: uppercase;
	line-height: 100%;
}

.amarillo {color:#ffb80e; font-size:1.5em;}

.titulo {font-size:1.9em;}

/* ANIMACION PALABRAS */

.palabras {
	width:390px;
	padding:12px 18px; 
	padding-right:34px; 
	border:#FFF solid 4px; 
	display:inline-block; 
	vertical-align:top; 
	position:absolute; 
	top:80%;
	z-index: 30;
	
	animation: entrada 9s infinite;
	-o-animation: entrada 9s infinite;
	-ms-animation: entrada 9s infinite;
	-moz-animation: entrada 9s infinite;
	-webkit-animation: entrada 9s infinite;
}

@-o-keyframes entrada {
	0% {
		-ms-transform: translate(-80%, 0);
		-moz-transform: translate(-80%, 0);
    	-webkit-transform: translate(-80%, 0);
    	transform: translate(-80%, 0);
		opacity:0;
	}
	10.25% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:0;
	}
}

@-ms-keyframes entrada {
	0% {
		-ms-transform: translate(-80%, 0);
		-moz-transform: translate(-80%, 0);
    	-webkit-transform: translate(-80%, 0);
    	transform: translate(-80%, 0);
		opacity:0;
	}
	10.25% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:0;
	}
}

@-moz-keyframes entrada {
	0% {
		-ms-transform: translate(-80%, 0);
		-moz-transform: translate(-80%, 0);
    	-webkit-transform: translate(-80%, 0);
    	transform: translate(-80%, 0);
		opacity:0;
	}
	10.25% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:0;
	}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes entrada {
	0% {
		-ms-transform: translate(-80%, 0);
		-moz-transform: translate(-80%, 0);
    	-webkit-transform: translate(-80%, 0);
    	transform: translate(-80%, 0);
		opacity:0;
	}
	10.25% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:0;
	}
}

/* Standard syntax */
@keyframes entrada {
	0% {
		-ms-transform: translate(-80%, 0);
		-moz-transform: translate(-80%, 0);
    	-webkit-transform: translate(-80%, 0);
    	transform: translate(-80%, 0);
		opacity:0;
	}
	10.25% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	89.75% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:1;
	}
	100% {
		-ms-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
    	-webkit-transform: translate(0, 0);
    	transform: translate(0, 0);
		opacity:0;
	}
}

.amarillo {
	text-shadow: 1px 1px 6px #000000;
	text-transform: uppercase;
	line-height: 100%;
	color:#ffb80e; 
	font-size:1.5em;
}

.primerafrase:before{
	content:"Servicios Especializados";
	-o-animation: content 27s infinite;
	-ms-animation: content 27s infinite;
	-moz-animation: content 27s infinite;
	-webkit-animation: content 27s infinite;
    animation: content 27s infinite;
}

@-ms-keyframes content {
	0% , 33.3% {content: "Servicios Especializados";}
	33.4% , 66.6% {content: "Variedad en productos";}
	66.7% , 100% {content: "Soporte técnico";}
}

@-moz-keyframes content {
	0% , 33.3% {content: "Servicios Especializados";}
	33.4% , 66.6% {content: "Variedad en productos";}
	66.7% , 100% {content: "Soporte técnico";}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes content {
	0% , 33.3% {content: "Servicios Especializados";}
	33.4% , 66.6% {content: "Variedad en productos";}
	66.7% , 100% {content: "Soporte técnico";}
}

/* Standard syntax */
@keyframes content {
	0% , 33.3% {content: "Servicios Especializados";}
	33.4% , 66.6% {content: "Variedad en productos";}
	66.7% , 100% {content: "Soporte técnico";}
}

.segundafrase:before{
	content:"para la minería y construcción";
	-o-animation: contenido 27s;
	-ms-animation: contenido 27s;
	-moz-animation: contenido 27s;
	-webkit-animation: contenido 27s;
    animation: contenido 27s;
	
	animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@-o-keyframes contenido {
	0% , 33.3% {content: "para la minería y construcción";}
	33.4% , 66.6% {content: "hidraúlicos";}
	66.7% , 100% {content: "a tus proyectos";}
}

@-ms-keyframes contenido {
	0% , 33.3% {content: "para la minería y construcción";}
	33.4% , 66.6% {content: "hidraúlicos";}
	66.7% , 100% {content: "a tus proyectos";}
}

@-moz-keyframes contenido {
	0% , 33.3% {content: "para la minería y construcción";}
	33.4% , 66.6% {content: "hidraúlicos";}
	66.7% , 100% {content: "a tus proyectos";}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes contenido {
	0% , 33.3% {content: "para la minería y construcción";}
	33.4% , 66.6% {content: "hidraúlicos";}
	66.7% , 100% {content: "a tus proyectos";}
}

/* Standard syntax */
@keyframes contenido {
	0% , 33.3% {content: "para la minería y construcción";}
	33.4% , 66.6% {content: "hidraúlicos";}
	66.7% , 100% {content: "a tus proyectos";}
}

.modelo {
	/*width: 340px;
	height: 520px;*/
	width: 100%;
	height: 100%;
	background-size:cover;
	-o-animation: kirai 27s;
	-ms-animation: kirai 27s;
	-moz-animation: kirai 27s;
	-webkit-animation: kirai 27s;
    animation: kirai 27s;
	
	animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@-o-keyframes kirai {
	0% , 33.3% {background-image: url(../img/modelo/modelo_01.png);}
	33.4% , 66.6% {background-image: url(../img/modelo/modelo_02.png);}
	66.7% , 100% {background-image: url(../img/modelo/modelo_03.png);}
}

@-ms-keyframes kirai {
	0% , 33.3% {background-image: url(../img/modelo/modelo_01.png);}
	33.4% , 66.6% {background-image: url(../img/modelo/modelo_02.png);}
	66.7% , 100% {background-image: url(../img/modelo/modelo_03.png);}
}

@-moz-keyframes kirai {
	0% , 33.3% {background-image: url(../img/modelo/modelo_01.png);}
	33.4% , 66.6% {background-image: url(../img/modelo/modelo_02.png);}
	66.7% , 100% {background-image: url(../img/modelo/modelo_03.png);}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes kirai {
	0% , 33.3% {background-image: url(../img/modelo/modelo_01.png);}
	33.4% , 66.6% {background-image: url(../img/modelo/modelo_02.png);}
	66.7% , 100% {background-image: url(../img/modelo/modelo_03.png);}
}

/* Standard syntax */
@keyframes kirai {
	0% , 33.3% {background-image: url(../img/modelo/modelo_01.png);}
	33.4% , 66.6% {background-image: url(../img/modelo/modelo_02.png);}
	66.7% , 100% {background-image: url(../img/modelo/modelo_03.png);}
}

/*MENU*/

.navbar-default { background-image:url(../img/barra.png);  background-size:cover; text-transform: uppercase; text-align: center; border:none; border-radius:0; border-top:3px solid #ffb80e; height:71px; width:100%; background-color:rgba(0,0,0,0);}

.navbar-nav { width:100%; text-align:center;}

.nav li {float:none; display:inline-block; vertical-align:top; /*margin:0 21px;*/ margin:0 16px;}

.nav div>li>a {padding:0;}

.navbar-default .navbar-nav div>li>a {
	display:inline-block;
	vertical-align:top;
	color: #FFF;
	opacity: 1.0;
	padding-top: 4px;
	padding-bottom: 5px;
	margin-top:16px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.navbar-default .navbar-nav div>.active>a {
	color:#ffb80e;
	background-color:transparent;
}

.navbar-default .navbar-nav div>.active>a:hover {
	color:#ffb80e;
	background-color:transparent;
}

.navbar-default .navbar-nav div>li>a:hover {
	color:#ffb80e;
	text-decoration:none;
}

.navbar-nav>li {
	border-bottom: 0 solid #ebba16;
	color:#FFF;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
	
.navbar-nav>li:hover, .navbar-nav>.active {
	border-bottom: 2px solid #ebba16;
	box-sizing:border-box;
	color:#ebba16;
}

/*LOGO*/

.nav {position:relative;}
.logo h1 a {
	display: block;
	width: 194px;
	height: 134px;
	/*width: 252px;
	height: 134px;*/
	background: url(../img/logo-hpp-v4.png) no-repeat center center;
	font-size: 0;
	transition:all ease 0.6s;
}
.nav div li.logo {
	margin:0;	
	position:absolute;
	top:0;
	left:50%;
	margin-left:-95px;
	/*margin-left:-120px;*/
	z-index:10;
}

.fondo-logo {
	background: url(../img/logo-hpp-v3.png) rgba(0,0,0,0.6) no-repeat center center;
	width:252px;
	height:90px;
	overflow:hidden;
	border-radius:20%;
}

.logo h1 {margin:0;}

/*REDES SOCIALES*/

.social {
	position: fixed;
	top: 50%;
	margin-top: -60px;
	left: 20px;
	z-index: 10;
}

.social li {
	display:block;
	/*padding:12px;*/
	margin:16px 0;
	background-color:rgba(6,143,227,0.8);
	border-radius:100%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.8);
	transition:all ease 0.3s;
}

.social a {
	display:inline-block;
	width:30px;
	height:30px;
	text-align:center;
	color:#FFF;
	opacity:.8;
}

.social li:hover {
	background-color:rgba(6,143,227,,1);
	box-shadow: 0 1px 5px rgba(0,0,0,0.6);
}

.social li:hover a {
	opacity:1;
	color:#ffb80e;
}

.social .fa {padding-top:8px;}

/*FOOTER*/

footer {
	background-color: rgba(0,0,0,0.9);
	padding: 10px;
	box-sizing: border-box;
	position: fixed;
	width: 100%;
	bottom: 0;
	color: rgba(255,255,255,1);
	font-size: 13px;
	text-align: center;
	z-index: 40;
}

footer div { display:inline-block; vertical-align:top;}

footer span {
	display: inline-block;
	vertical-align: top;
	margin: 0 16px 0 8px;
	opacity: 0.5;
}

footer .glyphicon {
	margin: 0;
	font-size:16px;
}

.copy {
	color: #707070;
}

/*UBICACION*/

#ubicacion {
	position: fixed;
	top: 50%;
	margin-top: -62px;
	right: 0;
	z-index: 20;
}

/*TEXTO*/

.sumilla {color:#FFF; text-shadow:0 0 3px rgba(0,0,0,0.7), 2px 0 8px rgba(0,0,0,0.4); font-size:21px;}
.productos {text-align:center; margin-top:10%;}
.productos h2 {
	font-size: 1em;
    color: #FFF;
    margin: 6px 0;
    line-height: 1.3;
    padding: 0 8px;
    min-height: 40px;
}
.productos a.cuadro-interno:hover{text-decoration:none;}
.productos li.cuadro-externo {position:relative; display:inline-block; vertical-align:top; width:145px; height:154px; background: #2258ac no-repeat center center; margin:0 8px; border:white 2px solid; box-sizing:border-box;}
.productos a.cuadro-interno {
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	width:134px;
	height:143px;
	vertical-align:top;
	transition: top ease .2s;
	transition: background ease .6s;
	background: #068fe3; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(140deg, #068fe3, #2258ac); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(140deg, #068fe3, #2258ac); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(140deg, #068fe3, #2258ac); /* For Firefox 3.6 to 15 */
	background: linear-gradient(140deg, #068fe3, #2258ac); /* Standard syntax */
	box-shadow: 10px 12px 21px rgba(0,0,0,0.47);
}
.productos a.cuadro-interno:hover {
	top:3px;
	background: #068fe3; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(40deg, #0a7cff, #04366e); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(40deg, #0a7cff, #04366e); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(40deg, #0a7cff, #04366e); /* For Firefox 3.6 to 15 */
	background: linear-gradient(40deg, #0a7cff, #04366e); /* Standard syntax */
}

.productos li .img-responsive {width: 60%; display: inline-block; vertical-align: top; margin: 0 auto;}
.productos h2 strong {text-transform: uppercase;}
.glyphicon-plus-sign {color:#000; font-size:2em; position:absolute; top:98px; left: 55px;}

/* ---------------------------------------------PÁGINA INTERNA EMPRESA------------------------------------------------*/

.fondo-productos {
	background:url(../img/bg-img/bg-header-05b.jpg) no-repeat;
	background-position:50%;
	background-size:cover;
	height:400px;
	position:fixed;
	top:0;
	width:100%;
	-webkit-animation: products 2s ; /* Chrome, Safari, Opera */
    animation: products 2s;
	animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes products {
    from {background: url(../img/bg-img/bg-header-05.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-05b.jpg) no-repeat center; background-size:cover;}
}

/* Standard syntax */
@keyframes products {
    from {background: url(../img/bg-img/bg-header-05.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-05b.jpg) no-repeat center; background-size:cover;}
}

.fondo-empresa {
	background:url(../img/bg-img/bg-header-03b.jpg) no-repeat;
	background-position:50%;
	background-size:cover;
	height:400px;
	position:fixed;
	top:0;
	width:100%;
	-webkit-animation: corp 2s ; /* Chrome, Safari, Opera */
    animation: corp 2s;
	animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes corp {
    from {background: url(../img/bg-img/bg-header-03.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-03b.jpg) no-repeat center; background-size:cover;}
}

/* Standard syntax */
@keyframes corp {
    from {background: url(../img/bg-img/bg-header-03.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-03b.jpg) no-repeat center; background-size:cover;}
}

.fondo-contactenos {
	background:url(../img/bg-img/bg-header-04b.jpg) no-repeat;
	background-position:50%;
	background-size:cover;
	height:400px;
	position:fixed;
	top:0;
	width:100%;
	-webkit-animation: contact 2s ; /* Chrome, Safari, Opera */
    animation: contact 2s;
	animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes contact {
    from {background: url(../img/bg-img/bg-header-04.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-04b.jpg) no-repeat center; background-size:cover;}
}

/* Standard syntax */
@keyframes contact {
    from {background: url(../img/bg-img/bg-header-04.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-04b.jpg) no-repeat center; background-size:cover;}
}

.fondo-proyectos {
	background:url(../img/bg-img/bg-header-01b.jpg) no-repeat;
	background-position:50%;
	background-size:cover;
	height:400px;
	position:fixed;
	top:0;
	width:100%;
	-webkit-animation: pro 2s ; /* Chrome, Safari, Opera */
    animation: pro 2s;
	animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes pro {
    from {background: url(../img/bg-img/bg-header-01.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-01b.jpg) no-repeat center; background-size:cover;}
}

/* Standard syntax */
@keyframes pro {
    from {background: url(../img/bg-img/bg-header-01.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-01b.jpg) no-repeat center; background-size:cover;}
}

.fondo-marcas {
	background:url(../img/bg-img/bg-header-07b.jpg) no-repeat;
	background-position:50%;
	background-size:cover;
	height:400px;
	position:fixed;
	top:0;
	width:100%;
	-webkit-animation: brands 2s ; /* Chrome, Safari, Opera */
    animation: brands 2s;
	animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes brands {
    from {background: url(../img/bg-img/bg-header-07.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-07b.jpg) no-repeat center; background-size:cover;}
}

/* Standard syntax */
@keyframes brands {
    from {background: url(../img/bg-img/bg-header-07.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-07b.jpg) no-repeat center; background-size:cover;}
}

.fondo-experiencia {
	background:url(../img/bg-img/bg-header-01b.jpg) no-repeat;
	background-position:50%;
	background-size:cover;
	height:400px;
	position:fixed;
	top:0;
	width:100%;
	-webkit-animation: clients 2s ; /* Chrome, Safari, Opera */
    animation: clients 2s;
	animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes clients {
    from {background: url(../img/bg-img/bg-header-01.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-01b.jpg) no-repeat center; background-size:cover;}
}

/* Standard syntax */
@keyframes clients {
    from {background: url(../img/bg-img/bg-header-01.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-01b.jpg) no-repeat center; background-size:cover;}
}

#empresa, #contactenos {
	padding-top:120px;
	width: 100%;
}

#productos, #proyectos, #marcas {
	padding-top:120px;
}

#empresa .row {
	margin-right:0;
}

.subheader {
	text-align: center;
	margin: 0 auto;
	color:#3d64a2;
}

.subheader h2 {
	padding: 20px 80px 0px;
	font-size: 24px;
}

.subheader h3 {
	padding: 20px 80px 10px;
	font-size: 40px;
	border-bottom: 2px solid #ffb80e;
	font-weight: 400;
	color:#FFF;
	text-shadow: 1px 1px 6px #000000;
	margin-bottom: 34px;
	max-width: 30%;
	display: inline-block;
	vertical-align: top;
	text-transform:uppercase;
}

.subheader h4 {
	padding: 20px 80px 20px;
	font-size: 20px;
	border-bottom: 1px solid #ffb80e;
	font-weight: 400;
	margin-bottom: 30px;
}

.empresa_info {
	height: 100%;
	padding:0;
	padding-bottom:24px;
	box-sizing: border-box;
}

.empresa_info .personal{
	border: 1px solid #CCC;
    border-radius: 10px;
	overflow:hidden;
	padding:0;
	margin:0 8px;
}

.nosima {
	padding:0;
	position:relative;
	height:100vh;
}

.nos {
	position:fixed;
	bottom:-120px;
	width:inherit;
	transition: all ease-in-out .5s;
}

.fixed {
	bottom:36px;
}

#empresa .porcentaje {
	padding: 16px 32px;
}

.porcentaje .img-circle {
	background:#068fe3;
	display:inline-block;
	vertical-align:middle;
	padding:21px;
	margin:21px 0;
}

h5 {
	font-size: 24px;
	line-height: 130%;
	color:#3d64a2;
	text-transform:uppercase;
}

.empresa_info p, .valores {
	line-height: 150%;
	display:inline-block;
	vertical-align:top;
	width:76%;
	padding:24px 24px 24px 32px;
}

.valores span.bloque {
	display:block;
	line-height:30px;
}

.cleaner {
	clear: both;
}

/* --------------------------------------- PÁGINA INTERNA PRODUCTOS ------------------------------------------- */

.productos-galeria {
	width: 90%;
    margin-left: auto;
    margin-right: auto;
	padding:24px 24px 32px;
	box-sizing:border-box;
	text-align:center;
}
.productos-galeria>li {
	display:inline-block;
	vertical-align:top;
	margin:8px 8px 16px;
	width:18%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	overflow:hidden;
}
.productos-galeria>li>a {
	display:inline-block;
	vertical-align:top;
	text-decoration:none;
	text-transform:uppercase;
}
.hov {
	background-color:rgba(0,0,0,0.6);
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:40;
	opacity:0;
	transition:all .3s ease-in;
}
.productos-galeria>li>a:hover .hov {
	opacity:1;
}
.productos-galeria h2 {
	display:inline-block;
	vertical-align:top;
	/*position:absolute;
	left:0;
	bottom:-43px;*/
	width:100%;
	font-size:16px;
	text-align:center;
	margin:0;
	padding:16px 5px 8px;
	color:#2258ac;
	background-color:rgba(255,255,255,0.7);
	min-height:62px;
	/*z-index:60;*/
	transition:all .3s ease-in;
}
.productos-galeria .glyphicon-plus {
	margin-top:-7px;
	color:#FFF;
	position:absolute;
	opacity:0;
	left:50%;
	top:50%;
	z-index:60;
	margin-left:-7px;
}
.productos-galeria>li>a:hover .glyphicon-plus {
	opacity:1;
}
.productos-galeria>li>a:hover h2 {
	bottom:0;
	background-color:rgba(0,0,0,0.9);
	color:#FFF;
}

.btn {
	margin-top:16px;
	background-color:#3d64a2;
	padding: 8px 16px;
}

.btn:hover {
	background-color:#333;
}

.btn a {
	color:#FFF;
	font-weight:bold;
	text-transform:uppercase;
}

/*----------------------------------------- PÁGINA INTERNA COLECCIÓN ------------------------------------------*/

#coleccion, #sale {
	margin: 112px auto 30px;
}

#coleccion .fondo {
	background-color: #FFF;
	box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.4), -6px 0 20px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	z-index: 10;
	padding-top: 24px;
	margin: 0;
	left: 0;
}

#empresa .fondo {
	background-color: #FFF;
	box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.4), -6px 0 20px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	z-index: 10;
	padding-top: 24px;
	margin: 0;
	left: 0;
}

#proyectos .fondo {
	background-color: #FFF;
	box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.4), -6px 0 20px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	z-index: 10;
	padding: 24px 10% 40px;
	margin: 0;
	left: 0;
	width:100%;
}

#productos .fondo {
	background-color: #FFF;
	box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.4), -6px 0 20px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	z-index: 10;
	padding: 5% 24px;
	margin: 0;
	left: 0;
	width:100%;
}

#contactenos .fondo {
	background-color: #FFF;
	box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.4), -6px 0 20px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	z-index: 10;
	padding-top: 24px;
	margin: 0;
	left: 0;
	width: 100%;
}

#marcas .fondo {
	background-color: #FFF;
	box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.4), -6px 0 20px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	z-index: 10;
	padding-top: 24px;
	margin: 0;
	left: 0;
	width: 100%;
}

.tarjeta, .tarjeta-soft {display:inline-block; vertical-align:top; width:100%; background-color:#FFF; border:1px solid #c3c3c3; border-radius:10px; box-shadow: 0 0 12px 0 rgba(80, 80, 80, 0.1), 0 0 2px 0 rgba(80, 80, 80, 0.1); padding:16px; margin:12px 0;}
.tarjeta-soft {border:none; width:33.3%; margin:8px;}
.categorias h3{font-size:2em; font-weight:400; text-transform:none; border-bottom: #d1d1d1 1px solid; margin:0 0 12px 0; padding: 8px 0; color:#d1d1d1;}
.glyphicon-menu-right { display:inline-block; vertical-align:top; color:#FFF; background-color:#ffb80e; font-size:6px; width:12px; height:12px; padding:3px; border-radius:100%; margin:8px 8px 0 0;}
.categorias a {color:#3d64a2; line-height:2em;}
.categorias a:hover {color:#2258ac;}
.categorias a.active {color:#2258ac; text-transform:uppercase; font-weight:bold;}
.categorias a.active .glyphicon {background-color:#3d64a2;}

.galeria h2 {color:#3d64a2; font-size:1.2em; text-transform:uppercase; padding: 0 15px; font-weight:bold;}
.galeria {height: auto; text-align: center; margin-bottom: 48px;}
.galeria h4 {color:#3d64a2; text-align:left;}
.galeria p {text-align:left;}

#coleccion ul, #sale ul {
	width: 100%;
	box-sizing: border-box;
	margin-top: 24px;
}

#coleccion .galeria li, #sale li {
	width: 22%;
	height: auto;
	overflow: hidden;
	background-color: white;
	display: inline-block;
	vertical-align: top;
	margin: 10px;
}

#coleccion .galeria li {border: 1px solid #CCC; border-radius:10px; transition:border ease .3s;}

#coleccion .galeria li:hover {border-color:#506ec4;}

#sale li {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

.galeria img {
	display: block;
    margin: auto;
    width: 100%;
}

.galeria img.sombra {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.galeria li a span {
	/*display:block;*/
	display: none;
	text-transform:capitalize;
	border-bottom:1px dashed #CCC;
	padding:8px 0;
	text-align:center;
	font-size:0;
	width:0;
}

.galeria p.tipo {text-align:center; padding:8px; color:#666; font-size:1em;}

.galeria a {text-decoration:none;}

#coleccion .galeria #lista>li {
	box-shadow: none;
	width: 100%;
    height: auto;
    display: block;
    margin: 4px 0;
	text-align:left;
	border:none;
}

#coleccion .galeria #lista h3 {
	color: #3d64a2;
    font-size: 1.2em;
    text-transform: uppercase;
	text-align:left;
}

#coleccion .galeria #lista>li:before {
	content:"\e080";
	color:#2258ac;
	font-family:'Glyphicons Halflings';
	font-size:8px;
	margin-right:4px;
}

.lectura {width:100%; height:auto;}

/*--------------------------------- PÁGINA INTERNA PROYECTOS ---------------------------------*/

.fondo-proyectos {
	background:url(../img/bg-img/bg-header-01b.jpg) no-repeat;
	background-position:50%;
	background-size:cover;
	height:400px;
	position:fixed;
	top:0;
	width:100%;
	-webkit-animation: proy 2s ; /* Chrome, Safari, Opera */
    animation: proy 2s;
	animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes proy {
    from {background: url(../img/bg-img/bg-header-01.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-01b.jpg) no-repeat center; background-size:cover;}
}

/* Standard syntax */
@keyframes proy {
    from {background: url(../img/bg-img/bg-header-01.jpg) no-repeat center; background-size:cover;}
    to {background: url(../img/bg-img/bg-header-01b.jpg) no-repeat center; background-size:cover;}
}

/*----------------------------------------- PÁGINA INTERNA MARCAS ----------------------------------------*/

.marcas-galeria {
	text-align:center; 
	width: 82%;
    margin-left: auto;
    margin-right: auto;
	padding:24px 24px 60px;
	box-sizing:border-box;
}

.marcas-galeria>li {
	display:inline-block;
	vertical-align:top;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin:16px;
	max-width:28%;
}

.clientes-galeria {
	text-align:center; 
	width: 90%;
    margin-left: auto;
    margin-right: auto;
	padding:24px 24px 60px;
	box-sizing:border-box;
}

.clientes-galeria>li img, .clientes-galeria>li h3, .clientes-galeria>li span {
	display:inline-block;
	vertical-align:top;
}

.clientes-galeria>li {
	padding:8px 16px;
	display:block;
	border-bottom:1px #ccc dotted;
}

.clientes-galeria>li:first-child {
	border-btop:1px #ccc solid;
}

.clientes-galeria span.campos {width:1500px; display:inline-block; margin-left:-432px;}

.clientes-galeria span h4 {display:inline-block; vertical-align:top; margin-left:20%;}

.clientes-galeria>li h3 {font-size:21px; width:400px; text-align:left; padding-left:50px; margin-top:30px;}

.clientes-galeria>li h3:before {content:'';}
.clientes-galeria>li h3:after{content:'';}

.clientes-galeria>li span { width:34%; text-align:left; padding-left:24px; margin-top:34px;}

/*----------------------------------------- PÁGINA INTERNA CONTÁCTENOS ----------------------------------------*/

.contenedor {
	width: 80%;
	margin: 30px auto 0;
}

.info, .datos {
	padding: 0 20px;
	line-height: 150%;
	box-sizing: border-box;
}

#contactenos .glyphicon {
	color:#ffb80e;
	padding:0 8px 0 0;
}

.info h4 {
	padding-top: 10px;
	color: #3d64a2;
	font-weight:bold;
}

.datos {
	box-sizing: border-box;
	/*padding-top: 10px;
	padding-bottom: 30px;
	background-color: rgba(6,143,227,0.9);*/
}

label {
	color: rgba(6,143,227,0.9);
}

input {
	width: 100%;
}

textarea {width:100%;}

.enviar {
	width: 120px;
	padding: 8px 16px;
	background-color: #FFF;
	color: #068fe3;
	border-radius: 4px;
	font-weight: bold;
	font-size: 100%;
	margin-left: 58%;
}