/*---------------------------------------------------------------- 
PATRONES ////////////////////////////////////////////////////////
----------------------------------------------------------------*/


/*---------------------------------
/// BOX INFO ///
----------------------------------*/
.box-info {
	font-size:0.9em;
	height:auto;
	padding:20px;
	margin:5px 0px; /* set */
	width:100%;
	}


/*---------------------------------
/// BANNER INSIDE  (#BA-INSIDE) ///
----------------------------------*/
.banner-inside{
	background-color:#dedede;/*set*/
	padding:80px 0px;/*set*/
	position:relative;
	text-align: center;
	}

.banner-inside > div.inside picture,
.banner-inside > div.inside picture img{
	height:auto;
	width:100%;
	z-index:1;
	}

.banner-inside div.inside{
	position:relative;
	}

.banner-inside div.inside > div{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	background-color:rgba(255, 255, 255, 0.2); /*delete*/
	height: auto;
	padding:80px;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	width:auto;
	z-index:2;
	}

.banner-inside div.inside > div *{
	text-align:left;
	}
	
/*---------------------------------
/// BANNER COVER  (#BA-COVER) ///
----------------------------------*/
.banner-cover{
	height:80vh;
	position:relative;
	}

.banner-cover picture{
	height:auto;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	width:auto;
	}

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

.banner-cover div.in {
	flex-direction:column;
	justify-content:center;
	height:100%;
	z-index:10;
	}


/*---------------------------------
/// PANELS  (#PANELS) ///
----------------------------------*/
section.panels div.in{
	align-items:stretch; /*usar si se quiere forzar misma altura a todos los paneles en caso de no tener altura fija*/
	justify-content:space-between;/* or center */
	}


section.panels div.in + *{
	height:300px; /* set */
	margin-bottom:20px; /* set */
	width:40%; /* determina cuantos paneles hay en un renglon*/
	}
	@media only screen and (max-width:1500px) {
	section.panels div.in + *{
	width:40%;
	}}
	@media only screen and (max-width:720px) {
	section.panels div.in div{
	width:100%;
	}}


/*---------------------------------
/// ZIG ZAG  (#ZIGZAG) ///
----------------------------------*/
ul.zigzag {
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
	justify-content:center;
	list-style: none;
	margin:20px 0px;
	padding:0px;
	width:100%;
	}


ul.zigzag li {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	list-style:none;
	width:100%;
	}


ul.zigzag div.info {
	width:48%;
	}


ul.zigzag div.imagen {
	width:48%;
	}


ul.zigzag li:nth-child(even) div.info{
	order:2;
	}
ul.zigzag li:nth-child(even) div.imagen{
	order:1;
	}


ul.zigzag li div.info {
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	align-items:center;
	text-align:left;
	}






@media only screen and (max-width:620px) {
	ul.zigzag div.info,
	ul.zigzag div.imagen {
	width:100%;
	}
	ul.zigzag li:nth-child(odd) div.info{
	order:2;
	}
	ul.zigzag li:nth-child(odd) div.imagen{
	background-color:#000; /* not necessary */
	order:1;
	}
	ul.zigzag li:nth-child(even) div.info{
	order:2;
	}
	ul.zigzag li:nth-child(even) div.imagen{
	background-color:#000; /* not necessary */
	order:1;
	}
}

/*---------------------------------
/// WALL SIMPLE (#WALLS) ///
----------------------------------*/
ul.walls {
	align-items:flex-start;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between; /*set*/
	margin:0px;
	padding:0px;
	width:100%;
	}

ul.walls li{
	display:block;
	list-style:none;
	height:320px; /*set*/
	margin:0px;
	margin-bottom:5px!important;
	overflow:hidden;
	padding:0px; /*set*/
	width:33%;/* con ancho determinamos cantos items por renglon */
	}
	@media only screen and (max-width:1500px) {
	ul.walls li{
	height:280px;
	}}
	@media only screen and (max-width:920px) {
	ul.walls li{
	height:200px;
	}}
	@media only screen and (max-width:720px) {
	ul.walls li{
	width:49%;
	}}
	@media only screen and (max-width:620px) {
	ul.walls li{
	height:160px;
	width:49%;
	}}


ul.walls li img {
	display:block;
	height:100%;
	width:100%;
	object-fit:cover;
	/*
	object-fit:cover;
	object-fit:contain;
	*/
	object-position: 50% 50%;
	}


/*---------------------------------
/// ANIMACIONES ///
----------------------------------*/
body#index .panel-servicios div.in > div span{
	opacity:0.0;
	transition:all 0.46s;
	transform: scale(0.3);
	}

body#index .panel-servicios div.in > div span.animate{
	opacity:1.0;
	transform: scale(1.0);
	}