/*------------------------*/
/*ESTRUCTURA 228 MARKETING*/
/*------------------------*/

/*VARS*/
:root{
  /*Estructura*/
  --movil-max: 500px;
  --tablet-max: 1024px;
  --main-column: 1300px;
  /*Colores*/
  --main-color:#e5b7d4;
  --sec-color:#bac6e5;
  --morado-dark:#c0b7e5;
  --morado-light:#d8bae8;
  --gris:#aaaaaa;
  --negro:#333;
  --black-trans: #333333b0;
  --light-black:#999;
  /*Espacios*/
  --padding: 20px;
  --max-pad: 80px;
  --min-pad: 5px;
  --margin: 30px;
  --max-margin: 80px;
  --min-margin: 10px;
  /*Animación*/
  --transition: 0.4s;
  --slider-time: 10s;
}

/*GENERAL*/
*{background-repeat: no-repeat;}
.block{display: block!important;}
.main-color{color: var(--main-color)!important;}
.sec-color{color: var(--sec-color)!important;}
.white-color{color: white!important;}
.black-color{color: var(--black)!important;}
.grey-color{color: var(--grey)!important;}
.light-black-color{color: var(--light-black)!important;}
.main-bg-color{background-color: var(--main-color)!important;}
.sec-bg-color{background-color: var(--sec-color)!important;}
/*Fuentes*/
.a-center{text-align: center;}

/*BOTONES*/
a[class*='boton']{margin-top: var(--margin); margin-bottom: var(--margin); background-color: var(--main-color); color: white; box-shadow: 0px 0px 5px #00000020; transition: box-shadow var(--transition), background-color var(--transition);}
a[class*='boton']:hover{cursor: pointer; box-shadow: 0px 0px 10px #00000040; transition: box-shadow var(--transition), background-color var(--transition);}
a.boton-s{padding: 5px 15px; font-size: 12px;}
a.boton-m{padding: 8px 20px; font-size: 14px;}
a.boton-l{padding: 10px 35px; font-size: 16px;}
a[class*='boton'].clear{display: table;}
@media only screen and (max-width: 501px){
a[class*='boton'].movil-full{width: 94%; margin: 10px 3%!important;}
}

/*TABS*/
.tabs-nav{margin: 15px 0px;}
.tabs-nav>span{background-color: var(--main-color); color: white; padding: var(--min-pad) var(--padding); transition: background-color var(--transition);}
.tabs-nav>span:hover{cursor: pointer; background-color: var(--sec-color); transition: background-color var(--transition);}
.tabs-nav>span.tab-nav-activo{background-color: var(--sec-color);}
/*Vertical*/
.tabs-full.vertical{display: flex;}
.tabs-full.vertical>div{margin-top: 0px;}
.tabs-full.vertical .tabs-nav{display: flex; flex-direction: column; min-width: 100px; margin-right: var(--margin);}
.tabs-full.vertical .tabs-nav>span{margin-bottom: var(--min-margin);}
.tabs-full.vertical .tabs-cont{width: 100%;}

/*SLIDER AUTO*/
/*Contenedor y slides*/
div.ddo-slider{height: 100vh; min-height: 500px; position: relative; width: 100%;}
div.ddo-slider>span{height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-size: cover; background-position: center center; z-index: 1;}
/*Definir la animación de cada slide y definir los keyframes*/
.ddo-slider.auto .slide-2{animation: slide-2 var(--slider-time) linear infinite normal;} .ddo-slider.auto .slide-3{animation: slide-3 var(--slider-time) linear infinite normal;} .ddo-slider.auto .slide-4{animation: slide-4 var(--slider-time) linear infinite normal;} .ddo-slider.auto .slide-5{animation: slide-5 var(--slider-time) linear infinite normal;}
/*Sombra*/
.slider-shadow{display: block; z-index:2;
background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, #00000090 0%, #00000000 100%);
background: -webkit-linear-gradient(90deg, #00000090 0%, #00000000 100%);
background: linear-gradient(90deg, #00000090 0%, #00000000 100%);
}
/*4 Slides*/
/*
@keyframes slide-2{0%{opacity: 0;} 22%{opacity: 0;} 28%{opacity: 1;} 47%{opacity: 1;} 53%{opacity:0;} 100%{opacity:0;}}
@keyframes slide-3{0%{opacity: 0;} 47%{opacity: 0;} 53%{opacity: 1;} 72%{opacity: 1;} 78%{opacity:0;} 100%{opacity:0;}}
@keyframes slide-4{0%{opacity: 0;} 72%{opacity: 0;} 78%{opacity: 1;} 95%{opacity: 1;} 100%{opacity:0;}}
*/
/*3 Slides*/
@keyframes slide-2{0%{opacity: 0;} 30%{opacity: 0;} 36%{opacity: 1;} 70%{opacity: 1;} 80%{opacity:0;} 100%{opacity:0;}}
@keyframes slide-3{0%{opacity: 0;} 60%{opacity: 0;}66%{opacity: 1;}94%{opacity: 1;}100%{opacity: 0;}}

/*SLIDER*/
.slide-oculto{display: none;}
.slide-activo{display: block;}
/*bullets*/
.slide-bullets{display: flex; width: 200px; position: absolute; bottom: 10px; justify-content: center; align-items: center; margin: 0px calc(50% - 100px); background: #ffffff63; z-index: 1; border-radius: 30px; box-shadow: 0px 0px 10px #00000099;  transition: background-color var(--transition);}
.slide-bullets:hover{background-color: #ffffffd1; transition: background-color var(--transition);}
.slide-bullets .bullet{background-color: #222; height: 15px; width: 15px; border-radius: 50%; margin: 5px; opacity: 0.3; z-index: 1; box-shadow: 0px 0px 10px white; transition: opacity var(--transition);}
.slide-bullets .bullet:hover{cursor: pointer; opacity: 0.8; transition: opacity var(--transition);}
.slide-bullets .bullet.bullet-activo{opacity: 1;}
/*arrows*/
arrow.ddo-slider-arrow{position: absolute; z-index: 1; top: calc(50% - 30px); background: white; padding: 10px 15px; display: block; opacity: 0.5; box-shadow: 0px 0px 10px #00000090; transition: opacity var(--transition), box-shadow var(--transition); font-size: 12px;}
arrow.ddo-slider-arrow:hover{opacity: 0.9; box-shadow: 0px 0px 15px #000000d1; transition: opacity var(--transition), box-shadow var(--transition); cursor: pointer;}
arrow.left-arrow{left: 0px;}
arrow.right-arrow{right: 0px;}


/*PARALLAX*/
/*fixed*/
.ddo-parallax-fixed{background-attachment: fixed; background-size: cover;}
.ddo-parallax-fixed{background-image: url("/dev/wp-content/uploads/v1.jpg");}
/*jquery*/
.ddo-parallax{min-height: 600px;}
.ddo-parallax{background-image:url("/dev/wp-content/uploads/h4.jpg");}

/*POPUP*/
/*Contenedor*/
.popup-cont{display:none; z-index: 99; position: fixed; top: 0px; left: 0px; width: 100vw; height: 100%; background-color: var(--black-trans);}
/*Contenido*/
.ddo-popup{padding: 10px 20px; background-color: white; width: 70vw; min-height: 100px; position: relative; margin: auto; opacity: 0; box-shadow: 0px 0px 10px var(--main-color); max-height:75vh; overflow: scroll;}
/*Cerrar*/
.popup-cont .close_popup{position: fixed; top: 20px; right: 20px; color: var(--light-black); background-color: white; font-family: Arial!important; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; font-weight: 100; font-size: 18px;
  box-shadow: 0px 0px 10px var(--black); transition: border-radius var(--transition), text-shadow var(--transition);}
.popup-cont .close_popup:hover{cursor: pointer; border-radius: 10px; text-shadow: 0px 0px 10px var(--light-black); transition: border-radius var(--transition), text-shadow var(--transition); }

@media only screen and (max-width: 500px){
.ddo-popup{width: 90vw;}
}

/*EFECTOS*/
.ddo-shadow{animation: ddo-shadow 6s linear infinite}
@keyframes ddo-shadow{0%{box-shadow: 100px 10px 0px black;} 25%{box-shadow: 0px 10px 0px black;} 50%{box-shadow: -10px 0px 0px black;} 75%{box-shadow: 20px -20px 0px black;}}


/****************************************
ESTRUCTURAESTRUCTURAESTRUCTURAESTRUCTURA
TURAESTRUCTURAESTRUCTURAESTRUCTURAESTRUC
ESTRUCTURAESTRUCTURAESTRUCTURAESTRUCTURA
****************************************/




/*CONTENEDOR FULL Y BOX*/
.full-no-pad{width: 100%;}
.full-box{margin:0px auto; padding: 20px;}
.full-box.no-pad{padding: 0px;}
@media only screen and (min-width: 1300px) {
  .full-box{max-width: var(--main-column);}
}

@media only screen and (max-width: 1300px) {
  .full-box{padding: 20px 35px;}
}

@media only screen and (max-width: 500px){
  .full-box .full-no-pad-m{width: 100vw; left: -20px;}
  .full-box{padding: 25px;}
}
.full-box.no-pad-top{padding-top:0px;}





/*FLEXIS*/
/*Contenedores: Que tengan todos sus bloques hijos de la misma proporción*/
div[class*='flexi']{display: flex; flex-wrap: wrap; position: relative;}

  div[class*='flexi-1']>*{width:100%;}
  div[class*='flexi-2']>*{width:50%;}
  div[class*='flexi-3']>*{width:33.33%;}
  div[class*='flexi-4']>*{width:25%;}
  div[class*='flexi-5']>*{width:20%;}
  div[class*='flexi-6']>*{width:16.666%;}

@media only screen and (min-width: 501px){
  div[class*='flexi-1-2']>*{width:50%;}  div[class*='flexi-1-3']>*{width:33.33%;} div[class*='flexi-1-4']>*{width:25%;}
  div[class*='flexi-2-3']>*{width:33.33%;} div[class*='flexi-2-4']>*{width:25%;} div[class*='flexi-2-5']>*{width:25%;}
  div[class*='flexi-3-4']>*{width:25%;} div[class*='flexi-3-5']>*{width:20%;} div[class*='flexi-3-6']>*{width:16.666%;}
  div[class*='flexi-4-5']>*{width:20%;} div[class*='flexi-4-6']>*{width:16.666%;} div[class*='flexi-4-7']>*{width:14.285%;} div[class*='flexi-4-8']>*{width:12.5%;}
  div[class*='flexi-5-6']>*{width:16.666%;} div[class*='flexi-5-7']>*{width:14.285%;} div[class*='flexi-5-8']>*{width:12.5%;}  div[class*='flexi-5-9']>*{width:11.111%;}
  div[class*='flexi-6-7']>*{width:14.285%;} div[class*='flexi-6-8']>*{width:12.5%;} div[class*='flexi-6-9']>*{width:11.111%;}  div[class*='flexi-6-0']>*{width:10%;}
}

@media only screen and (min-width: 1025px){
  div.flexi-1-1-2>*{width:50%!important;}
  div.flexi-1-1-3>*, div.flexi-1-2-3>*, div.flexi-2-2-3>*{width:33.33%!important;}
  div.flexi-1-1-4>*, div.flexi-1-2-4>*, div.flexi-1-3-4>*, div.flexi-2-2-4>*, div.flexi-2-3-4>*{width:25%!important;}
  div.flexi-1-1-5>*, div.flexi-1-2-5>*, div.flexi-1-3-5>*, div.flexi-1-4-5>*, div.flexi-2-2-5>*, div.flexi-2-3-5>*, div.flexi-2-4-5>*{width:20%!important;}
  div.flexi-1-1-6>*, div.flexi-1-2-6>*, div.flexi-1-3-6>*, div.flexi-1-4-6>*, div.flexi-1-5-6>*, div.flexi-2-2-6>*, div.flexi-2-3-6>*, div.flexi-2-4-6>*, div.flexi-2-5-6>*{width:16.666%!important;}
}


/*Bloques: Los bloques de un contenedor tienen un ancho determinado*/
/*Móvil*/
  .flx-m-4-4{width: 100%;} .flx-m-3-4{width: 75.000%;} .flx-m-2-4{width: 50.000%;} .flx-m-1-4{width: 25.000%;}
  .flx-m-3-3{width: 100%;} .flx-m-2-3{width: 66.666%;} .flx-m-1-3{width: 33.333%;}
  .flx-m-2-2{width: 100%;} .flx-m-1-2{width: 50.000%;}
  .flx-m-1{width: 100%;}
/*Tablet*/
@media only screen and (min-width: 501px) {
  .flx-t-6-6{width: 100%;} .flx-t-5-6{width: 83.333%;} .flx-t-4-6{width: 66.666%;} .flx-t-3-6{width: 50.000%;} .flx-t-2-6{width: 33.333%;} .flx-t-1-6{width: 16.666%;}
  .flx-t-5-5{width: 100%;} .flx-t-4-5{width: 80.000%;} .flx-t-3-5{width: 60.000%;} .flx-t-2-5{width: 40.000%;} .flx-t-1-5{width: 20.000%;}
  .flx-t-4-4{width: 100%;} .flx-t-3-4{width: 75.000%;} .flx-t-2-4{width: 50.000%;} .flx-t-1-4{width: 25.000%;}
  .flx-t-3-3{width: 100%;} .flx-t-2-3{width: 66.666%;} .flx-t-1-3{width: 33.333%;}
  .flx-t-2-2{width: 100%;} .flx-t-1-2{width: 50.000%;}
  .flx-t-1{width: 100%;}
}
/*Desktop*/
@media only screen and (min-width: 1025px) {
  .flx-d-0-0{width: 100%;} .flx-d-9-0{width: 90.000%;} .flx-d-8-0{width: 80.000%;} .flx-d-7-0{width: 70.000%;} .flx-d-6-0{width: 60.000%;} .flx-d-5-0{width: 50.000%;} .flx-d-4-0{width: 40.000%;} .flx-d-3-0{width: 30.000%;} .flx-d-2-0{width: 20.000%;} .flx-d-1-0{width:10.000%;}
  .flx-d-9-9{width: 100%;} .flx-d-8-9{width: 88.888%;} .flx-d-7-9{width: 77.777%;} .flx-d-6-9{width: 66.666%;} .flx-d-5-9{width: 55.555%;} .flx-d-4-9{width: 44.444%;} .flx-d-3-9{width: 33.333%;} .flx-d-2-9{width: 22.222%;} .flx-d-1-9{width: 11.111%;}
  .flx-d-8-8{width: 100%;} .flx-d-7-8{width: 87.500%;} .flx-d-6-8{width: 75.000%;} .flx-d-5-8{width: 62.500%;} .flx-d-4-8{width: 50.000%;} .flx-d-3-8{width: 37.500%;} .flx-d-2-8{width: 25.000%;} .flx-d-1-8{width: 12.500%;}
  .flx-d-7-7{width: 100%;} .flx-d-6-7{width: 85.741%;} .flx-d-5-7{width: 71.429%;} .flx-d-4-7{width: 57.143%;} .flx-d-3-7{width: 42.857%;} .flx-d-2-7{width: 28.571%;} .flx-d-1-7{width: 14.285%;}
  .flx-d-6-6{width: 100%;} .flx-d-5-6{width: 83.333%;} .flx-d-4-6{width: 66.666%;} .flx-d-3-6{width: 50.000%;} .flx-d-2-6{width: 33.333%;} .flx-d-1-6{width: 16.666%;}
  .flx-d-5-5{width: 100%;} .flx-d-4-5{width: 80.000%;} .flx-d-3-5{width: 60.000%;} .flx-d-2-5{width: 40.000%;} .flx-d-1-5{width: 20.000%;}
  .flx-d-4-4{width: 100%;} .flx-d-3-4{width: 75.000%;} .flx-d-2-4{width: 50.000%;} .flx-d-1-4{width: 25.000%;}
  .flx-d-3-3{width: 100%;} .flx-d-2-3{width: 66.666%;} .flx-d-1-3{width: 33.333%;}
  .flx-d-2-2{width: 100%;} .flx-d-1-2{width: 50.000%;}
  .flx-d-1{width: 100%;}
}

/*Partials*/
/*En un row donde una col está pegada al lateral, la otra col tiene que tener clase part-box con su dimensión y lado correspndiente de alineación*/
/*El row tiene que tener clase full-no-pad y el flexi que corresponda*/
.part-box-1-2{max-width: calc(var(--main-column) / 2);}
.part-box-1-3{max-width: calc(var(--main-column) / 3);}
.part-box-1-4{max-width: calc(var(--main-column) / 4);}
.part-box-1-5{max-width: calc(var(--main-column) / 5);}
.part-box-1-6{max-width: calc(var(--main-column) / 6);}
.part-box-1-7{max-width: calc(var(--main-column) / 7);}
.part-box-1-8{max-width: calc(var(--main-column) / 8);}
.part-box-1-9{max-width: calc(var(--main-column) / 9);}
.part-box-1-0{max-width: calc(var(--main-column) / 10);}

*[class^="part-box-"].part-left{float: left;}
*[class^="part-box-"].part-right{float: right;}

/*ESPACIOS*/
/*Paddings*/
.s-padding, div.padding[class*="flx"], div.padding[class*='flexi-']>*{padding: var(--padding);}
.p-top{padding-top: var(--padding);} .p-bottom{padding-bottom: var(--padding);} .p-left{padding-left: var(--padding);} .p-right{padding-right: var(--padding);}
.p-sides{padding-left: var(--padding); padding-right: var(--padding);} .p-cell{padding-top: var(--padding); padding-bottom:  var(--padding);}

.p-max-top{padding-top: var(--max-pad);} .p-max-bottom{padding-bottom: var(--max-pad);} .p-max-left{padding-left: var(--max-pad);} .p-max-right{padding-right: var(--max-pad);}

/*Margins*/
.s-margin, div.margin[class*="flx"], div.margin[class*='flexi-']>*{margin: var(--margin);}
.m-top{margin-top: var(--margin);} .m-bottom{margin-bottom: var(--margin);} .m-left{margin-left: var(--margin);} .m-right{margin-right: var(--margin);}
.m-sides{margin-left: var(--margin); margin-right: var(--margin);} .m-cell{margin-top: var(--margin); margin-bottom:  var(--margin);}

.m-max-top{margin-top: var(--max-margin);} .m-max-bottom{margin-bottom: var(--max-margin);} .m-max-left{margin-left: var(--max-margin);} .m-max-right{margin-right: var(--max-margin);}

/*Separadores*/
span[class^="espacio-"]{display: block;}
.espacio-10{height: 10px;} .espacio-20{height: 20px;} .espacio-30{height: 30px;} .espacio-40{height: 40px;} .espacio-50{height: 50px;} .espacio-60{height: 60px;} .espacio-70{height: 70px;} .espacio-80{height: 80px;}
.espacio-90{height: 90px;} .espacio-100{height: 100px;} .espacio-120{height: 120px;} .espacio-140{height: 140px;} .espacio-160{height: 160px;} .espacio-180{height: 180px;} .espacio-200{height: 200px;} .espacio-300{height: 300px;}
.espacio-400{height: 400px;} .espacio-500{height: 500px;} .espacio-600{height: 600px;} .espacio-700{height: 700px;} .espacio-800{height: 800px;} .espacio-900{height: 900px;} .espacio-1000{height: 1000px;}

/*SÓLO PARA DETERMINADOS DISPOSITIVOS*/
.solo-d, div.solo-d{display:none;}
@media only screen and (min-width:501px){
  .solo-d, div.solo-d{display: inherit;}
}
.solo-m, div.solo-m{display: none;}
@media only screen and (max-width:500px){
  .solo-m, div.solo-m{display: inherit;}
}