/* Fuente primaria
------------------------------*/
html, body{
	font-family: "Poppins", sans-serif!important;
  	font-weight: 600;
  	font-style: normal;
	}

html, body {
	color: var(--color-black);
	font-weight:normal;

	}


/*---------------------------------------------------------------- 
--- S3 DIV IN ////////////////////////////////////////////////////
----------------------------------------------------------------*/
.in.full,
.in-full,
.in-full-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

.in.wide,
.in-wide,
.in-wide-to-none{
	padding-left:6vw;
	padding-right:6vw;
	/*width:90vw;*/
	}


.in,
.in-to-full,
.in-to-wide,
.in-to-none{
	padding-left:10vw;
	padding-right:10vw;
	}

.in.thin,
.in-thin,
.in-thin-to-full,
.in-thin-to-wide,
.in-thin-to-none{
	padding-left:20vw;
	padding-right:20vw;
	}

/*                                       
-----------------------------------------  2200 ---
--------------------------------------------------*/
@media only screen and (max-width:2200px) {
	.in.full,
	.in-full,
	.in-full-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.in.wide,
	.in-wide,
	.in-wide-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.in,
	.in-to-full,
	.in-to-wide,
	.in-to-none{
	padding-left:10vw;
	padding-right:10vw;
	/*width:80vw;*/
	}

	.in.thin,
	.in-thin,
	.in-thin-to-full,
	.in-thin-to-wide,
	.in-thin-to-none{
	padding-left:20vw;
	padding-right:20vw;
	/*width:60vw;*/
	}

}



/*                                       
-----------------------------------------  1200 ---
--------------------------------------------------*/
@media only screen and (max-width:1200px) {
	.in.thin,
	.in-thin,
	.in-thin-to-full,
	.in-thin-to-wide,
	.in-thin-to-none{
	padding-left:15vw;
	padding-right:15vw;
	/*width:70vw;*/
	}
}


/*                                       
-----------------------------------------  1020 ---
--------------------------------------------------*/
@media only screen and (max-width:1020px) {

	.in,
	.in-to-full,
	.in-to-wide,
	.in-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}
}



/*                                       
-----------------------------------------  820 ---
--------------------------------------------------*/
@media only screen and (max-width:820px) {

	.in,
	.in-to-full,
	.in-to-wide,
	.in-to-none{
	padding-left:6vw;
	padding-right:6vw;
	}

	.in.thin,
	.in-thin,
	.in-thin-to-full,
	.in-thin-to-wide,
	.in-thin-to-none{
	padding-left:10vw;
	padding-right:10vw;
	}
}


/*                                       
------------------------------------------  720 ---
--------------------------------------------------*/
@media only screen and (max-width:720px) {

	.in,
	.in-to-full,
	.in-to-wide,
	.in-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.in.thin,
	.in-thin,
	.in-thin-to-full,
	.in-thin-to-wide,
	.in-thin-to-non{
	padding-left:8vw;
	padding-right:8vw;
	}

}

/*                                       
------------------------------------------  620 ---
--------------------------------------------------*/
@media only screen and (max-width:620px) {

	.in-full,
	.in-to-full,
	.in-thin-to-full{
	padding-left:3vw;
	padding-right:3vw;
	}

	.in-wide,
	.in-to-wide,
	.in-thin-to-wide{
	padding-left:3vw;
	padding-right:3vw;
	}


	.in{
	padding-left:7vw;
	padding-right:7vw;
	}


	.in.thin,
	.in-thin{
	padding-left:10vw;
	padding-right:10vw;
	}

	.in-full-to-none,
	.in-wide-to-none,
	.in-to-none,
	.in-thin-to-none{
	padding-left:0vw;
	padding-right:0vw;
	}
	
}

/*                                       
------------------------------------------  520 ---
--------------------------------------------------*/
@media only screen and (max-width:520px) {
	.in{
	padding-left:5vw;
	padding-right:5vw;
	}
	.in.thin,
	.in-thin{
	padding-left:8vw;
	padding-right:8vw;
	}
}

/*                                       
------------------------------------------  420 ---
--------------------------------------------------*/
@media only screen and (max-width:420px) {
	.in{
	padding-left:3vw;
	padding-right:3vw;
	}
	.in.thin,
	.in-thin{
	padding-left:3vw;
	padding-right:3vw;
	}
}


/* titles
------------------------------*/
.title-1 {
	color: var(--color-black);
	text-align: center;
	font-size: 1.8rem;
	font-weight:400;
	letter-spacing: 0.4rem;
	}



/*--------------------------------------------------
SWIPER SLIDER  ///////////////////////////////////////
---------------------------------------------------*/
.swiper-container.leather {
	width:100%;
	}	

.swiper-container.leather  .swiper-slide.foto{ 
	position:relative;
	}	


.swiper-container.leather  .swiper-slide.foto .panel-foto{
	height:100%;
	position:relative;
	}	


.swiper-container.leather  .swiper-slide.foto .panel-foto picture{ 
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	}	

.swiper-container.leather  .swiper-slide.foto .panel-foto picture img{ 
	height:100%;
	object-fit:contain;
	width:100%;
	}	



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

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

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



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




/* --------------------------------------------------
BANNER COVER ------------------------------ 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
------------------------------*/
.swiper-container.leather .swiper-slide,
.banner-cover{
	height:90vh!important;
	max-height:1200px!important;
	min-height:340px!important;
	}
	@media only screen and (max-width:620px) {
	.swiper-container.leather .swiper-slide,
	.banner-cover{
	height:120vh!important;
	min-height:520px!important;
	}}


/* 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:flex-end;
	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;
	}
	@media only screen and (max-width:620px) {
	.banner-cover .inside > picture img{
	object-position:center 16%;
	}}








/*---------------------------------------------------
//////////           MOVIL GRADIENT         //////////
---------------------------------------------------*/
@media only screen and (max-width:620px) {


*[data-element='banner-main'].movil-gradient .inside,
*[data-element='banner'].movil-gradient .inside{
	padding:0px 0px;
	}

*[data-element='banner-main'].movil-gradient .banner-box,
*[data-element='banner'].movil-gradient .banner-box{
	background-image:linear-gradient(to bottom, transparent 40%, #cdd6da 102%);
	align-content:flex-end;
	height:100%;
	width:100%;
	}

/* neutralizamos if animated  */
*[data-element='banner-main'].movil-gradient .banner-box.animate,
*[data-element='banner'].movil-gradient .banner-box.animate{
	transform: translateY(0px)!important;
	}

}


/* --------------------------------------------------
BANNER COVER ------------------------ 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 
*/


/*---------------------------------------------------------------- 
--- BAN2 BANNER BOX /////////////////////////////////////////////
----------------------------------------------------------------*/
.banner-box {
	align-items:center;
	align-content:center;
	display:flex;
	flex-flow:row wrap;
	gap:var(--gap-inside-small);
	height:auto;
	justify-content:flex-start;
	z-index:10;
	max-width: 50%;
	width:50%;
	}

.banner-box .leather-care{
	padding:0px;
	margin:0px;
	}

.banner-box .subtitle{
	padding:0px;
	margin:0px;
	}

.banner-box > p{
	text-align:left;
	padding:20px 0px;
	margin:0px;
	}


.banner-box > *:not(a){
	width:100%;
	}



/* If center
------------------------------------------*/
 .banner-box.center{
	justify-content:center;
	}

.banner-box.center > * {
	text-align: center;
	}



/*                                       
-------------------------------------  MOVIL 620 ---
--------------------------------------------------*/
@media only screen and (max-width:620px) {

	.banner-box{
	padding:20px 5vw;
	max-width: 100%;
	width:100%;
	z-index:99;
	}

	.banner-box > *:not(a){
	width:100%;
	}

}


/* --------------------------------------------------
DO ----------------------------------- BANNER BOX ---
---------------------------------------------------*/
.leather-care-logo{
	color:#000!important;
	font-family: "Roboto Condensed", sans-serif!important;
	font-optical-sizing: auto;
  	font-weight:normal!important;
  	font-style: normal!important;
	}

.banner-box .leather-care-logo{
	font-size:4em!important;
	text-align:left;
	order:1;
	}

.banner-box  .subtitle{
	font-size:1rem;
	color:var(--color-black);
	order:2;
	}

.banner-box > p{
	color:var(--color-black);
	font-size:1rem;
	font-weight:normal;
	order:3;
	}

.banner-box .button{
	order:4;
	}


/*                                       
-------------------------------------  MOVIL 620 ---
--------------------------------------------------*/

@media only screen and (max-width:620px) {

	.movil-block .banner-box{
	background-color:var(--color-main);
	}


	.banner-box .title{
	color: var(--color-black);
	font-size:1.4rem;
	}

	.banner-box .subtitle{
	color: var(--color-black);
	font-size:1.2rem;
	}

	.banner-box p{
	color: var(--color-black);
	font-size:1rem;
	}


}





/*--------------------------------------------------
PANEL-FOTO ///////////////////////////////////////
---------------------------------------------------*/
.panel-foto{
	position:relative;
	width: 100%;
	}	

.panel-foto picture{
	width: 100%;
	}	

.panel-foto picture img{
	width: 100%;
	}	





/*--------------------------------------------------
PANEL ZIG ZAG //////////////////////////////////////
---------------------------------------------------*/
.panel-zigzag {
	background-color:var(--color-white);
	}




/* -------------------------------------------------
PANEL ZIG ZAG  ----------------------- BASE ---
--------------------------------------------------*/
.panel-zigzag {
	align-items:flex-start;
	display:flex;
	flex-flow:	row wrap;
	font-size:inherit;
	justify-content:center;
	list-style: none;
	padding-top: 40px;
	padding-bottom: 20px;
	margin:40px 0px;
	width:100%;
	}


/* item
------------------------------*/
.panel-zigzag .item {
	background-color:var(--color-white);
	align-items:stretch;
	border-radius:var(--rounded);
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	height:auto;
	justify-content:space-between;
	list-style:none;
	overflow:hidden;
	text-decoration:none;
	padding:20px 0px;
	width:100%;
	}


/* Ancho de paneles
------------------------------------------*/
.panel-zigzag .panel-info {
	color: var(--color-black);
	flex-grow:9;
	width:50%;
	}
.panel-zigzag .panel-img {
	flex-grow:9;
	width:30%;
	}



/* order 
------------------------------*/

/* ODD */
.panel-zigzag .item:nth-child(odd) .panel-info{
	order:1;
	}
.panel-zigzag .item:nth-child(odd) .panel-img{
	order:2;
	}

/* EVEN */
.panel-zigzag .item:nth-child(even) .panel-info{
	order:2;
	}
.panel-zigzag .item:nth-child(even) .panel-img{
	order:1;
	}





.panel-zigzag .panel-info,
.panel-zigzag .panel-img {
	display:flex;
	flex-flow:row wrap;
	}


.panel-zigzag .title{
	color: var(--color-black);
	text-align: center;
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: 0.4rem;
	}




/* Panel info
------------------------------*/
.panel-zigzag .panel-info {	
	align-items:center;
	align-content:center;
	justify-content:flex-start;
	height:auto;
	}


.panel-zigzag .item:nth-child(odd) .panel-info {
	padding:20px 4vw 20px 4vw;
	}

.panel-zigzag .item:nth-child(even) .panel-info {
	padding:20px 0vw 20px 4vw;
	}

.panel-zigzag .panel-info ul li{
	font-size:1.3rem;
	font-weight:normal;
	padding-bottom: 20px;
	}

.panel-zigzag .panel-info > *:not(a) {
	width:100%;
	}


/* Panel imagen
------------------------------*/
.panel-zigzag .panel-img{
	justify-content:center;
	}

.panel-zigzag .panel-img img{
	height:100%;
	max-height:100%;
	max-width:100%;
	object-fit:cover;
	width:100%;
	}





/*                                       
------------------------------------  MOVIL 620 ---
--------------------------------------------------*/
@media only screen and (max-width:620px) {

	.panel-zigzag .panel-info,
	.panel-zigzag .panel-img {
	width:100%;
	}
	.panel-zigzag .item:nth-child(odd) .panel-img{
	order:1;
	}
	.panel-zigzag .item:nth-child(odd) .panel-info{
	padding:20px 4vw 20px 4vw;
	order:2;
	}
	.panel-zigzag .item:nth-child(even) .panel-img{
	order:1;
	}
	.panel-zigzag .item:nth-child(even) .panel-info{
	padding:20px 4vw 20px 4vw;
	order:2;
	}
	
	}




/*---------------------------------------------------------------- 
--- PAN3 PANEL ITEMS GRID ///////////////////////////////////////
----------------------------------------------------------------*/

/* 

Temporal: se especificara en cada panel el tamaño de los items

*/

.panel-items-grid{
	align-items:stretch;
	display:grid;
	grid-gap:var(--gap-inside);
	grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); /*set*/
	width:100%;
	}




/*---------------------------------------------------
//////////           CARD DOS            //////////
---------------------------------------------------*/
.insert-card-dos{
	background-color:var(--color-white);
	}

/* Cover
------------------------------------------*/
.insert-card-dos .item .cover,
.card-dos .cover{
	 background:var(--color-neutro-softer);
	}


/* --------------------------------------------------
------------------------------------------- BASE ---
---------------------------------------------------*/
.insert-card-dos{
	font-size:1rem;
	}


/* Card
------------------------------*/
.insert-card-dos .item,
.card-dos{
	align-items:center!important;
	background-color:var(--color-white);
	color: inherit;
	display:flex;
	flex-flow:column wrap!important;
	font-size:inherit;
	gap:var(--gap-inside);
	justify-content:flex-start;
	height:auto;
	overflow:hidden;
	padding:2px;
	transition: all 0.1s;
	transform: scale(1.0);
	width:100%;
	}


/* IF: rounded
------------------------------*/
.insert-card-dos.rounded .item,
.card-dos.rounded{
	border-radius:var(--rounded);
	}



/* IF: anchor
------------------------------*/
.insert-card-dos a.item,
a.card-dos{
	color:inherit;
	text-decoration:none;
	}

.insert-card-dos a.item:hover,
a.card-dos:hover{
	box-shadow:0px 0px 2px rgba(0, 0, 0, 0.2);
	text-decoration:none;
	}


/* Cover
------------------------------*/
.insert-card-dos .cover,
.card-dos .cover{
	border-radius:50%;
	overflow:hidden;
	height:160px;
	margin-bottom:20px;
	width:160px;
	}

/* Info
------------------------------*/
.insert-card-dos .info,
.card-dos .info{
	align-items:flex-start;
	align-content:flex-start;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	flex-grow:99;
	gap:var(--gap-inside);
	height:auto;
	width:100%;
	}


/* Order
------------------------------*/
.insert-card-dos .cover,
.card-dos .cover{
	order:1;
	}

.insert-card-dos .info,
.card-dos .info{
	order:2;
	}



/* Icon or IMG
------------------------------*/
.insert-card-dos .cover img,
.insert-card-dos .cover svg,
.card-dos .cover img,
.card-dos .cover svg{
	height:100%;
	object-fit:contain;
	width:100%;
	}

.insert-card-dos .cover svg,
.card-dos .cover svg{
	padding:2px;
	}


/* Title
------------------------------*/
.insert-card-dos .item .title,
.card-dos .title{ 
	color: var(--color-black);
	font-size:1.3rem;
	font-weight:400;
	height:auto;
	margin:0px;
	padding:0px;
	text-align:center;
	text-transform:uppercase;
	width:100%;
	margin: 20px 0px;
	}


/* Lista
------------------------------*/
.insert-card-dos .item .lista{
	height: auto;
	border: 1px solid var(--color-black);
	border-radius: 10px;
	padding: 0px 20px;
	width: 100%;
	}

.insert-card-dos .item ul li,
.card-dos ul li{ 
	color:var(--color-black);
	font-size:0.8rem;
	font-weight:normal;
	height:auto;
	margin:0px;
	padding:0px;
	width:100%;
	}


/* Links	
------------------------------*/
.insert-card-dos .item .link,
.card-dos .link{ 
	color:var(--color-neutro-soft);
	font-size:0.7rem;
	text-transform:uppercase;
	text-decoration:none;
	}


.insert-card-dos .item .link:hover,
.card-dos .link:hover,
.insert-card-dos a.item:hover .link,
a.card-dos:hover .link  { 
	text-decoration:underline;
	}



/*---------------------------------------------------------------- 
--- PANEL CONTACTANOS    ///////////////////////////////////////
----------------------------------------------------------------*/

.panel-contactanos{
	display: flex;
	flex-direction:column;
	align-items: center;
	align-content: flex-start;
	height: auto;
	text-align: center;
	padding: 30px 0px;
	width: 100%;
	}

.panel-contactanos .leather-care-logo{
	font-size: 3rem;
	text-align:center;
	}

.panel-contactanos h2.title{
	padding-left: 40px;
	color: var(--color-black);
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing:1.9rem;
	}

.panel-contactanos h5{
	padding-left: 20px;
	color: var(--color-black);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing:1.1rem;
	margin: 20px 0px;
	text-transform: uppercase;
	}

.panel-contactanos hr {
	align-self: center;
	text-align: center;
 	height: 1px;
  	width: 36%;
  	margin: 20px 33%;
  	background-color: black;
}

.panel-contactanos p{
	color: var(--color-black);
	text-align: center;
	}




/* ----------------------------------------
SOCIAL BAR
---------------------------------------- */
.panel-contactanos ul.social-bar{

	justify-content:center /* or flex-end */

	}

/* icons  */
.panel-contactanos ul.social-bar .svg-icon {
	height:60px;
	padding:2px;/* set */
	width:60px;
	}

.panel-contactanos ul.social-bar .svg-icon {
	border-radius:50%;
	background-color:var(--color-white);
	fill:var(--color-black);
	}
/* hover */

.panel-contactanos ul.social-bar a:hover .svg-icon {
	background-color:var(--color-white);
	fill:var(--color-neutro);
	}


/* ----------------------------------------
BOTÓN DESCARGAR
---------------------------------------- */
ul.actions li a.catalogo{
	background-color: var(--color-black);
	}