@charset "utf-8";

/* =========================
   BASE
========================= */
body{
    color: #333;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
}

.wrapper{
	padding-top:44px;
}

@media (min-width:481px){
	.wrapper{
		padding-top:67px;
	}
}

/* Background helpers (si aún los usas) */
.bg-size,
.bg-fixed{
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
}

.bg-fixed{
	background-attachment:fixed;
}

.bg-fixed:before{
	content:'';
	position:absolute;
	inset:0;
	z-index:1;
}

.bg-fixed > div{
	position:relative;
	z-index:2;
}

.bg-left{
	background-repeat:no-repeat;
	background-size:50% auto;
	background-position:-1% center;
}

.before-item-10,.before-item-20,.before-item-30,.before-item-40,.before-item-50,.before-item-60,.before-item-70,.before-item-80,.before-item-90,.before-item-100{position:absolute;z-index:0;top:0;left:0;right:0;bottom:0;z-index:0}
.before-item-10{opacity:.1}
.before-item-20{opacity:.2}
.before-item-30{opacity:.3}
.before-item-40{opacity:.4}
.before-item-50{opacity:.5}
.before-item-60{opacity:.6}
.before-item-70{opacity:.7}
.before-item-80{opacity:.8}
.before-item-90{opacity:.9}
.before-item-100{opacity:1}

.banner-slider h1,
.banner-slider h2,
.banner-slider p{
	opacity: 0;
	text-shadow: .05em .05em .1em #000;
	transition: all ease-in-out .3s; }
 
 .banner-slider figure{
 	padding-bottom: 0; }

@media screen and (min-width:768px){
    .banner-slider figure{
    	padding-bottom: 40%;
    	position: relative; }
    
    .banner-slider figure > div{
    	line-height: normal;
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 100%;
    	width: 100%; }
}

.banner-slider .slick-current h1,
.banner-slider .slick-current h2,
.banner-slider .slick-current p{
	animation: fadeRight .75s ease-in-out both; }

.banner-slider .slick-current h2{
	animation-delay: .25s;
}

.banner-slider .slick-current p{
	animation-delay: .75s; }

@keyframes fadeRight{
	from{
		opacity: 0;
		transform: translateX(-50px);
	} to{
		opacity: 1;
		transform: translateX(0);
	}
}

.img-fadeUp {
    animation-name: fadeUpBanner;
    animation-duration: 2.4s;
    animation-timing-function: ease-in-out;
}

@keyframes fadeUpBanner {
	0%{
	    opacity: 0;
	    transform: translateY(150px);
	    transition: .6s ease-in-out
	}
	66%{
	    opacity: 0;
	    transform: translateY(150px);
	    transition: .6s ease-in-out
	}
	100% {
	    opacity: 1;
	    transform: none
	}
}

/* =========================
   HEADER
========================= */
header{
    position:static;
    top: -175px;
}

.header-fixed{
	background:#fff;
	color:#333;
	box-shadow:0 0 5px rgba(0,0,0,.25);
	position:sticky;
	top:0;
	transition: all ease-in-out 1s;
}

.header-fixed img {
    max-height:60px;
}

nav{
	position:relative;
}

nav ul{
	width:100%;
	list-style:none;
}

nav ul li{
	display: inline-block;
}

nav ul li > a{
	display:block;
	padding:10px 15px;
	position:relative;
	cursor: pointer;
}


nav ul li a span{
	width: 0;
	opacity: 0;
	transition: all ease-in-out .3s;
}

nav ul li a:hover span{
	opacity: 1;
	width: 100%;
}
/* =========================
   MENU MOBILE
========================= */

@media (max-width:767px){

	#back.fondo{
		display:none;
		position:fixed;
		background:rgba(0,0,0,.5);
		inset:0;
		z-index:25;
	}

	nav{
		background:#2d2d2d;
		box-shadow:-2px 6px 5px rgba(0,0,0,.4);
		height:100%;
		right:-120%;
		position:fixed;
		top:0;
		width:80%;
		z-index:90;
	}

	nav ul{
		text-align:right;
	}

    nav ul li{
    	display: block;
    }

	nav ul li a{
		border-bottom:1px solid rgba(255,255,255,.3);
		color:#fff;
		font-size:.8em;
		padding:10px 17px 10px 33px;
		text-align:right;
	}

}

.menu_bar .bt_menu{
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	color:#fff;
	font-size:1.15em;
	line-height: 1.55;
	padding: 8px 7px;
	position:relative;
	text-align:right }

.bt_menu span{
	display: inline-block;
	vertical-align: middle; }

.bt_menu i{
	display: inline-block;
	vertical-align: middle;
	margin-left: 7px;
	height: 2px;
	width: 15px;
	left: 0;
	position: relative;
	-webkit-transition: all ease-in-out 0.4s;
	-o-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s; }

.bt_menu i:before,
.bt_menu i:after{
	content: '';
	height: 2px;
	width: 15px;
	position: absolute;
	background: inherit;
	top: -5px;
	left: 0;
	-webkit-transition: all ease-in-out 0.4s;
	-o-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s; }

.bt_menu i:before{
	top: 5px; }

.menu_bar.pulled i{
	height: 0; }

.menu_bar.pulled i:before{
	width: 21.21px;
	left: -3px;
	top: 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg); }

.menu_bar.pulled i:after{
	width: 21.21px;
	left: -3px;
	top: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg); }

/* =========================
   HOME SLIDER
========================= */

.home-slider .video-container{
	position:relative;
}

.home-slider .video-container video{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	min-width:100%;
	min-height:100%;
}

.home-slider .slick-track{
	display:flex !important;
}

.home-slider .slick-slide{
	height:inherit !important;
}

/* =========================
   CARD FLIP
========================= */

.content-inner{
	width:100%;
	position:relative;
	transform-style:preserve-3d;
	perspective:1000px;
	transition:.9s cubic-bezier(.68,-.55,.265,1.55);
}

.content-inner:hover .content-front{
	transform:rotateY(-180deg);
}

.content-inner:hover .content-back{
	transform:rotateY(0deg);
}

.content-front,
.content-back{
	position:relative;
	backface-visibility:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}

.content-back{
	position:absolute;
	inset:0;
	transform:rotateY(180deg);
}

/* =========================
   MAP
========================= */

.map iframe,
.contact-map iframe{
	width:100%;
	height:400px;
}

/* =========================
   PRODUCTOS
========================= */

.producto{
	padding:30px 20px 0;
	background:#ececec;
	margin-bottom:20px;
}

@media (min-width:768px){
	.producto{
		padding:30px 0;
	}
}

.producto figure{
	padding:0 30px;
}

.info-prod{
	color:#143d75;
	text-align:left;
}

/* =========================
   FORMULARIOS
========================= */

.search-form{
	padding:30px 15px;
	margin-bottom:30px;
}

.search-form input{
	width:100%;
	padding:10px 15px;
	border:0;
	background:#fff;
}

.search-form button{
	border:none;
	width:100%;
	text-align:left;
	padding:10px 15px;
}

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

.contact-form{
	margin-top:120px;
}

.contact-form form input,
.contact-form form textarea{
	width:100%;
	padding:10px 15px;
	border:1px solid #ccc;
	border-radius: 10px;	
}

.contact-form textarea{
	min-height:150px;
}

.contact-form button{	
	padding:5px;
	border:none;
}

/* =========================
   ERROR 404
========================= */

.E404{
	margin:30px auto;
	max-width:600px;
	border:1px solid #ccc;
	padding:20px;
	border-radius:5px;
	background:linear-gradient(#fafafa,#eee);
	text-align:center;
}


/*=========================
FOOTER
=========================*/
footer{
	font-weight: 300;
	display: block;
	width: 100%; }