/*--------------------------------------------------
BANNER COVER ///////////////////////////////////////
---------------------------------------------------*/

/* --------------------------------------------------
DO ---------------------------------------- ANCHO ---
---------------------------------------------------*/

/* 

Usamos las mismas clases predefinidas from: www/style.css para determinar padding laterales.

none │ in-full │ in-full-to-none │ in-wide │ in │ in-thin │ in-to-wide │ in-thin-to-wide

ejemplo: <div class="banner-cover in">

 */



/* --------------------------------------------------
DO --------------------------------------- ALTURA ---
---------------------------------------------------*/

/*

Usamos las clases predefinidas 

default │ short │ 

Usualmente la altura default para el banner principal y short para banners interiores

ejemplo: <div class="banner-cover short">

*/


/* --------------------------------------------------
DO ---------------------------------- BACKGROUND ---
---------------------------------------------------*/

/* 

www/style.css 
*[data-element='banner-main']

 */



/* --------------------------------------------------
DO ----------------------------------------- MAS ---
---------------------------------------------------*/

/* Alineación
------------------------------*/
/* 

Default = left
Podemos añadir las clases center o rigth
Ejemplo: <div class="banner-cover acenter">

 */



/* Padding top y bottom
------------------------------*/

.banner-cover{
	padding-bottom:0px;
	padding-top:0px;
	}



/* Opacidad de la imagen
------------------------------*/
.banner-cover .inside picture{
	opacity:0.4;
	}



/* Titulos y texto
------------------------------*/
/* 

Se define en www/style.css elemento .banner-box

 */




/* --------------------------------------------------
DO ---------------------------------------- MOVIL ---
---------------------------------------------------*/


/* 

Usamos las clases predefinidas para determinar como se vera en móvil

movil-opacity │ movil-gradient │ movil-box │ movil-block

ejemplo: <div class="banner-cover movil-block">

 */





/* --------------------------------------------------
------------------------------------------- BASE ---
---------------------------------------------------*/


/* 00 - Z index
------------------------------*/
.banner-cover .inside > * {z-index:2}
.banner-cover .inside > picture {z-index:1}




/* 01 - General
------------------------------*/
.banner-cover{
	display:flex;
	flex-flow:row wrap;
	overflow:hidden;
	position:relative;
	max-width:100%;
	width:100%;
	}



/* 02 - Altura
------------------------------*/
.banner-cover{
	height:64vh;
	min-height:320px;
	}
	@media only screen and (max-width:620px) {
	.banner-cover{
	height:60vh;
	min-height:380px;
	}}


/* Altura short */
.banner-cover.short {
	height:40vh;
	min-height:260px;
	}
	@media only screen and (max-width:620px) {
	.banner-cover.short{
	height:30vh;
	min-height:260px;
	}}




/* 03 - Inside
------------------------------*/
.banner-cover .inside{
	align-items:center;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	height:100%;
	padding:5vw 5vw;
	position:relative;
	width:100%;
	}



/* 04 - Imagen de fondo
------------------------------*/
.banner-cover .inside > picture{
	height:auto;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	width:auto;
	}


.banner-cover .inside > picture img{
	height:100%;
	width:100%;
	object-fit:cover;
	object-position:center center;
	}


/* 05 - Banner box
------------------------------*/

/* Diseño en www/style.css  */

.banner-cover .banner-box{
	width:100%;
	}




/* --------------------------------------------------
------------------------------------- IF ANIMATE ---
---------------------------------------------------*/


/* Play
------------------------------

00:00 - 
00:05 - Imagen de fondo
00:08 - Banner box

*/


/* 00:05 */
.banner-cover picture.animate img{
	transition-delay:0.5s;
	}

/* 00:08 */
.banner-cover .banner-box.animate {
	transition-delay:0.8s!important;
	}






/* IMG
------------------------------*/
.banner-cover picture.animate img{
	transition:var(--add-transition-very-slow);
	transform: scale(1.06);
	opacity:0.0;
	}
/* ---/ animated */
.banner-cover  picture.animated img{
	transform: scale(1.0);
	opacity:1.0;
	}




/* Banner box
------------------------------*/
/*
animaciones predefinidas en style.css 
*/