/*
Theme Name: Maria Lebredo
Author: Lattedev
Author URI: https://www.lattedev.com
Description: The Maria Lebredo official theme, by lattedev.com
Version: 1.0
*/



/* MAPA DE CONTENIDOS:

1) =ROOT:
  1.1) =Variables de personalizacion de pagina
  1.2) =Variables de cambio visual relacionado a al ancho de la pantalla

2) =MEDIA QUERIES:
  2.1) min-width:  360px
  2.2) min-width:  576px
  2.3) min-width:  768px
  2.4) min-width:  992px
  2.5) min-width: 1200px

3) =TIPOGRAFIAS:

4) =ETIQUETAS GLOBALES:

5) =ESTRUCTURA:

5.1) =COSAS QUE NO SE DONDE PONER 😊

6) =COMPONENTES:
6.00) =load:
6.01) =header:
6.02) =ATFs:
6.02.0) =homeATF:
6.02.1) =ShopATF:
6.02.2) =ContactATF:
6.02.3) =storiesATF:
6.03) =slider:
6.04) =multiCards:
6.04.0) =card:
6.05) =NAVIGATION BARS:
6.05.0) =navBar:
6.05.1) =FooterNav:
6.05.2) =MobileNav:
6.05.3) =pagination:
6.06) =BUTTONS:
6.06.0) =btn:
6.06.1) =sliderArrow:
6.06.2) =cartButton:
6.07) =suscribe:
6.08) =filterBars
6.09) =colors
6.10) =TITLES:
6.11) =FORMS:
6.11.1) =contact Form
6.12) =MAINS
6.12.1) =SINGLE PRODUCT MAIN





9.99) =footer

FIN DE MAPA DE CONTENIDOS */


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                              1) =ROOT:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

:root {
  font-size: var(--sizeR);
  /* ---------------------------------------------------------------------------
  ------------------------------------------------------------------------------
                 1.1) =Variables de personalizacion de pagina
  ------------------------------------------------------------------------------
  --------------------------------------------------------------------------- */
  /* la idea de esto es que sean como controles con los
  que hacer facilmente diferentes versiones de la pagina */

  --lateral:1rem;

  /* COLORS */
  /* Al editar colores siempre usar HEX y nunca
  dejar espacio entre los dos puntos y el color */
  --color1: #202020;
  --color2: white;
  --color3: black;
  /* --color4:#EBE1C8; */
  /* --color5:#F5F0DC; */
  /* --color6:#FFFAE6; */

  /* SIZES */
  /* Al editar los tamaños, hacerlo siempre sin unidades
  sabiendo que el numero corresponde a la cantidad de pixeles */
  --sizeRa:16;--sizeRb:20;--sizeRc:20;--sizeRd:24;
  /* !PREGUNTA: cual es el tamaño minimo de letra? */

  --sizeR: calc(var(--sizeRa) * 1px);

  --fontSize1: 28px;
  --fontSize2: 24px;
  --fontSize3: 21px;
  --fontSize4: 16px;
  --fontSize5: 14px;

  /* SHADOWS */

  /**MATERIAL DESIGN'S ELEVATION: POINTS*/

  /*---- Nav drawer: 16dp
         App bar:     4dp
         Card:        1dp to 6dp
         FAB:         6dp
         Button:      2dp to 8dp
         Dialog:      24dp ----*/

    --DP0:  0px 0px 0px  rgba(0, 0, 0, 0.0),  0px 0px 0px  rgba(0, 0, 0, 0.00), 0px 0px 0px   rgba(0, 0, 0, 0.00);
    --DP1:  0px 1px 3px  rgba(0, 0, 0, 0.2),  0px 2px 2px  rgba(0, 0, 0, 0.12), 0px 0px 2px   rgba(0, 0, 0, 0.14);
    --DP2:  0px 1px 5px  rgba(0, 0, 0, 0.2),  0px 3px 4px  rgba(0, 0, 0, 0.12), 0px 2px 4px   rgba(0, 0, 0, 0.14);
    --DP3:  0px 1px 8px  rgba(0, 0, 0, 0.2),  0px 3px 4px  rgba(0, 0, 0, 0.12), 0px 3px 3px   rgba(0, 0, 0, 0.14);
    --DP4:  0px 1px 10px rgba(0, 0, 0, 0.2),  0px 4px 5px  rgba(0, 0, 0, 0.12), 0px 2px 4px   rgba(0, 0, 0, 0.14);
    --DP6:  0px 3px 5px  rgba(0, 0, 0, 0.2),  0px 1px 18px rgba(0, 0, 0, 0.12), 0px 6px 10px  rgba(0, 0, 0, 0.14);
    --DP8:  0px 4px 5px  rgba(0, 0, 0, 0.2),  0px 3px 14px rgba(0, 0, 0, 0.12), 0px 8px 10px  rgba(0, 0, 0, 0.14);
    --DP9:  0px 5px 6px  rgba(0, 0, 0, 0.2),  0px 3px 16px rgba(0, 0, 0, 0.12), 0px 9px 12px  rgba(0, 0, 0, 0.14);
    --DP12: 0px 7px 8px  rgba(0, 0, 0, 0.2),  0px 5px 22px rgba(0, 0, 0, 0.12), 0px 12px 17px rgba(0, 0, 0, 0.14);
    --DP16: 0px 8px 10px rgba(0, 0, 0, 0.2),  0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14);
    --DP24: 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14);

    /* =TIPOGRAFIAS */



    --DMSerif: 'DM Serif Display', serif;
    --spartanSans: 'Spartan', sans-serif;
  /* ---------------------------------------------------------------------------
  ------------------------------------------------------------------------------
      1.2) =Variables de cambio visual relacionado a al ancho de la pantalla
  ------------------------------------------------------------------------------
  --------------------------------------------------------------------------- */
  --onlyDesktopF:none;
  --onlyDesktopG:none;
  --onlyMobileF:flex;
  --onlyMobileG:grid;

  /* ?HEADER */
  --headerDisplay: none;
  --mobileHeaderDisplay: flex;
  --navBarGridGap: .5rem;
  --navBarItemFS: 12px;

  /* ?FOOTER */
  --footerTemplateColumns: 1fr;
  --footerGridGap: 1.5rem;

  /* ?SLIDER */
  --frontPageSilderTemplateColumns: 1fr 1fr;

  /* ?COLOR SECTION */
  --colorImgTemplateRows: unset;
  --colorImgTemplateColumns: 1;
  --colorTxtTxtAlign: justify;
  --colotTitleWidth:  100%;
  --colorTitleTextAlign: center;
  --colorCaptionBtnMargin: 1rem auto;

  /* STICKY SECTION FRONT PAGE */

  --stickyBannerAndStoriesDisplay: flex;
  --colorCaptionBackground: rgba(255,255,255,.8);
  /* --colorCaptionTop: 5rem; */
  --cardStorieDatePosition:0;

  /* ATFS */

  --ATFMarginTop: 5rem;

  /* HOME ATF */

  /* SHOP ATF */
  --shopATFTxtWidth: 90%;
  --shopATFTxtMargin: auto var(--lateral);
  --shopBannerHeight: 100%;
  --shopATFMT: 2.5rem;

  --shopFilterBarChild11MarginRight: 1rem;

  --shopFilterBarMR: calc(var(--lateral) * 2);


  /* GALLERY */
  --galleryPosition:relative;


  /* STORIES ATF */
  /*                               vw - scrollbar - lateral */
  --storiesATFaspectRatio: calc((100vw - 16px - var(--lateral) * 2 - 2rem) / 2 / .72);
  --storiesATFaspectRatio3and4: calc(var(--storiesATFaspectRatio) );
  --storiesATFgridAreas: "featuredStorie1 featuredStorie1 featuredStorie1 featuredStorie1"
                         "featuredStorie2 featuredStorie2 featuredStorie3 featuredStorie3"
                         "featuredStorie4 featuredStorie4 featuredStorie4 featuredStorie4";
  /*SINGLE STORIE*/
  --singleStorieCaptionTextAlign: left;

  --singleStorieCaptionmargin:0;

  /* STORIES GALLERY */

  --archiveStoriesGTC:  repeat(1,1fr);



  /* FORMS */
  --formPadding: 1rem;

  /* CONTACT FORM */
  --contactBoxMargin: -3rem 5% auto 5%;
  --contactBoxTemplateR: 2;
  --contactBoxTemplateC:  unset;
  --contactFormGridC: unset;
  --contactInformationFlexD: row;
  --contactInformationItemWidth: 100%;
  --contactInformationItemMarginBottom: 1rem;
  --contactInformationPadding: 1rem;
  --contactInformationTextAlign: center;

  /* SINGLE */
  --singleProductMainDisplay: flex;
  --SingleProductInteractionM: 3rem auto 1.2rem auto;
  --textAlignCenterLeft: center;
  --textAlignJustifyLeft: justify;
  --singleSideFontSize: 1.5rem;
  --singleSideTxtalign: center;
  --singleSideTxtMarginBottom: 1rem;
  --singleProductButtonWidth: 60%;
  --singleProductButtonMargin: .2rem auto;
  --singleProductInteractionBtnPadding: 1rem;
  --relatedProductDisplay: block;
  --relatedProductsCardMarginBottom: 2rem;
  --singleProductDescriptionMarginTop: 3rem;


  /* CARDS */


  /* BRAND */
  --brandATFCaptionMaxWidth: unset;
  --brandTxt5: auto 0 0 auto;

  /* BRAND ANIMATION */
  --brandImg1GridC: 1/span 6;
  --brandTxt1GridC: 2/ span 5;
  --brandTxt1GridR: 2;
  --brandTxt1Margin: unset;

  --brandImg2GridC: 2/-1;
  --brandImg2GridR: 3;

  --brandTxt2GridC: 2/ span 5;
  --brandTxt2GridR: 4;

  --brandImg3GridC: 1/ span 6;

  --brandTxt3GridC:  2/ span 5;
  --brandTxt3GridR: 2;

  --brandImg4GridC: 2/-1;
  --brandImg4GridR: 3;

  --brandTxt4GridC: 2/ -2;
  --brandTxt4GridR: 4;



}



/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                            2) =MEDIA QUERIES:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          2.1) min-width:  =360px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media screen and (min-width: 410px) {
  :root {
  /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - 400px) / (1024 - 400))); */
  --sizeR: calc(calc(var(--sizeRa) * 1px) + (var(--sizeRb) - var(--sizeRa)) * ((100vw - 360px) / (768 - 360)));

    /* ?HEADER */
    /* ?FOOTER */
    /* ATFS */
    /* SHOP ATF */
    --shopFilterBarChild11MarginRight: .5rem;
  }
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          2.2) min-width:  =576px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media screen and (min-width: 576px) {
  :root {
    /* ?HEADER */
    /* ?FOOTER */

    /* ATFS */

    /* SHOP ATF */
    --shopBannerHeight: auto;
    --shopFilterBarChild11MarginRight: .5rem;


  }
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          2.3) min-width:  =768px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  :root {
    --sizeR: calc(calc(var(--sizeRc) * 1px) + (var(--sizeRd) - var(--sizeRc)) * ((100vw - 768px) / (1200 - 768)));
    --onlyDesktopG:grid;
    --onlyDesktopF:flex;
    --onlyMobileF:none;
    --onlyMobileG:none;

    /* ?HEADER */
    --headerDisplay: grid;
    --mobileHeaderDisplay: none;
    --navBarItemFS: 13px;



    /* ?FOOTER */

    --footerGridGap: .5rem;


    /* ?SLIDER */
    --frontPageSilderTemplateColumns: repeat(4,1fr);


    /* ?COLOR SECTION */
    --colorImgTemplateRows: 1;
    --colorImgTemplateColumns: 2/5;
    --colorTxtTxtAlign: left;
    --colotTitleWidth:  max-content;
    --colorTitleTextAlign: left;
    --colorCaptionBtnMargin: 1rem 0;

    /* STICKY GRONT PAGE */
    --stickyBannerAndStoriesDisplay: grid;
    --colorCaptionBackground: none;
    /* --colorCaptionTop: 8rem; */
    --cardStorieDatePosition: -.5rem;

    /* ATFS */

    --ATFMarginTop: unset;

    /* HOME ATF */

    /* SHOP ATF */
    --shopATFTxtWidth: 60%;

      --shopFilterBarMR: var(--lateral);

    /* STORIES ATF */
    --storiesATFaspectRatio: calc((100vw - 16px - var(--lateral) * 2 - 2rem) / 2 / .72);
    --storiesATFaspectRatio3and4:  calc((var(--storiesATFaspectRatio) - 1rem)/ 2);
    --storiesATFgridAreas: "featuredStorie1 featuredStorie1 featuredStorie1 featuredStorie1"
                           "featuredStorie2 featuredStorie2 featuredStorie3 featuredStorie3"
                           "featuredStorie2 featuredStorie2 featuredStorie4 featuredStorie4";
    /*SINGLE STORIE*/
    --singleStorieCaptionTextAlign: left;

    --singleStorieCaptionmargin: 2rem  var(--lateral);

    /* STORIES GALLERY */

    --archiveStoriesGTC: repeat(2,1fr);
    --cardGalleryGridGap: 2rem;

    /* FORMS  */
    --formPadding: 2rem;

    /* CONTACT FORM */
    --contactBoxTemplateR: unset ;
    --contactBoxTemplateC:   repeat(4, 1fr);
    --contactFormGridC: 1/4;
    --contactInformationFlexD: column;
    --contactInformationItemWidth: unset;
    --contactInformationItemMarginBottom: unset;
    --contactInformationPadding: 2rem 1.5rem;
    --contactInformationTextAlign: left;

    /* SINGLE */
    --singleProductMainDisplay: grid;
    --SingleProductInteractionM: 1.2rem auto;
    --textAlignCenterLeft: left;
    --textAlignJustifyLeft: left;
    --singleSideFontSize: .65rem;
    --singleSideTxtalign: left;
    /* --singleSideTxtMarginBottom: unset; */
    --singleSideTxtMarginBottom: 2rem;
    --singleProductButtonWidth: 100%;
    --singleProductButtonMargin: .2rem 0;
    --singleProductInteractionBtnPadding: .25rem;
    --relatedProductDisplay: grid;
    --relatedProductsCardMarginBottom: unset;
    --singleProductDescriptionMarginTop: 1rem;


    /* GALLERY */
    --galleryPosition:sticky;


    /* CARDS */

    /* BRAND */
    --brandATFCaptionMaxWidth: 60%;
    --brandTxt5: auto 0 4rem auto;


    /* BRAND ANIMATION */
    --brandImg1GridC: 2/span 3;
    --brandTxt1GridC: 5/ span 2;
    --brandTxt1GridR: 1;
    --brandTxt1Margin: auto;

    --brandImg2GridC: 4/ span 4;
    --brandImg2GridR: 2;

    --brandTxt2GridC: 2/ span 2;
    --brandTxt2GridR: 2;

    --brandImg3GridC: 1/ span 4;

    --brandTxt3GridC:  5/ span 2;
    --brandTxt3GridR: 1;

    --brandImg4GridC: 4/ span 3;
    --brandImg4GridR: 2;

    --brandTxt4GridC: 2/ span 2;
    --brandTxt4GridR: 2;

  }
}


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          2.4) min-width:  =992px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  :root {
    /* ?HEADER */
    --navBarItemFS: var(--fontSize5);


    /* ?FOOTER */

    --contactBoxMargin: -3rem 5% auto 5%;
    --footerTemplateColumns: 1fr 1fr 1fr;

    /* FORMS */

    /* CONTACT FORM */
    --contactBoxMargin: -3rem 13% auto 13%;

    /* ATFS */

    /* SHOP ATF */
    --shopATFTxtWidth: 50%;

    /* STORIES ATF */
    --storiesATFaspectRatio: calc((100vw - 16px - var(--lateral) * 2 - 2rem) / 4 / .72);
    --storiesATFgridAreas: "featuredStorie1 featuredStorie1 featuredStorie2 featuredStorie3"
                           "featuredStorie1 featuredStorie1 featuredStorie2 featuredStorie4";

    /* STORIES GALLERY */




  }
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          2.5) min-width:  =1200px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media  screen and (min-width: 1200px) {
  :root {
    --lateral:3rem;
    --sizeR: calc(var(--sizeRd) * 1px);

    /* ?HEADER */


    /* ?FOOTER */

    /* STORIES GALLERY */
    --archiveStoriesGTC: repeat(3,1fr);
  }
}


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          2.5) min-width:  =1300px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media  screen and (min-width: 1300px) {
  :root {

    /* ?HEADER */


    /* ?FOOTER */

  }
}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          2.5) min-width:  =1200px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media  screen and (min-width: 1500px) {
  :root {
    --lateral:5rem;
    --sizeR: calc(var(--sizeRd) * 1px);

    /* ?HEADER */
        --navBarGridGap: 1.5rem;
    /* ?FOOTER */
  }
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          2.5) min-width:  =1200px
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
@media  screen and (min-width: 1700px) {
  :root {
    --lateral:10rem;
    --sizeR: calc(var(--sizeRd) * 1px);

    /* ?HEADER */
    /* ?FOOTER */
  }
}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------
                                 =LOGIC FOLD
------------------------------------------------------------------------------
------------------------------------------------------------------------------
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                           3) =TIPOGRAFIAS:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                           4) =TOPOGRAFIAS:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
/*
@font-face {
    font-family: 'bask';
    src: url('fonts/bask.woff2') format('woff2'),
         url('fonts/bask.woff') format('woff');
    font-weight: lighter;
    font-style: normal;

}

@font-face {
    font-family: 'parad';
    src: url('fonts/parad.woff2') format('woff2'),
         url('fonts/parad.woff') format('woff');
    font-weight: lighter;
    font-style: normal;

} */


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                           4) =ETIQUETAS GLOBALES:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
html{overflow-x:hidden}
body{display:grid;}
img{object-fit:cover;width:100%}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}

main {
  display: flex;
  flex-direction: column;
}
main p, main li {
  margin-bottom: .5rem;
  line-height: 1.65;
  font-size: 16px;
  text-align: var(--textAlignJustifyLeft);
}

main li {
  padding-left: 16px;
}

main a,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  margin-bottom: 1rem;
}

hr {margin: 1rem 0}

main a,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main ol,
main ul {list-style-type: circle}
main ul ul {list-style-type: square;}



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

/* h1, h2, h3, h4, h5 {font-family: 'parad', sans-serif; font-weight: lighter!important;} */
/* li a {font-family: 'parad', sans-serif; font-weight: lighter!important;} */

/* p, a, button {font-family: 'bask', serif; font-weight: lighter!important;} */

li {letter-spacing: .1rem;}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                              5) =ESTRUCTURA:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.rowcol1{grid-row:1;grid-column:1}
.onlyDesktopF{display:var(--onlyDesktopF)}
.onlyDesktopG{display:var(--onlyDesktopG)}
.onlyMobileF{display:var(--onlyMobileF)}
.onlyMobileG{display:var(--onlyMobileG)}


.flex2,.flex3,.flex4{display:flex;flex-wrap:wrap}
.flex2>*{flex:2 1 calc(50% - 1rem)}
.flex3>*{flex:3 1 calc(33% - 1rem)}
.flex4>*{flex:4 1 calc(25% - 1rem)}



/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                  5.1) =COSAS QUE NO SE DONDE PONER 😊
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.pageMain{
  padding: 2rem var(--lateral);
  margin-top: var(--ATFMarginTop);
}




/* esto lo podemos encontrar en single-product.php */
.addToCartQntContainer{
  position:relative;
  display:flex;
  border-bottom:2px solid #666;
  /* border-right :2px solid #666; */
}
.addToCartQnt{
  margin:.5rem 0;
  padding:0 16px;
  /* border:1px solid var(--color1); */
  border:none;
  width:100%;
  font-size:var(--fontSize3);
  pointer-events:none;
}
.addToCartQntBtn{
  align-items:center;
  background:none;
  border:none;
  color:black;
  display: grid;
  transition:.4s;
  /* min-width:2rem; */
  /* transform:scale(1.5); */
}
.addToCartQntBtn:focus{
  outline:1px solid #666;
  /* transform:rotate(90deg); */
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                              6) =COMPONENTES:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.title {margin: 1rem 0;}

/* SOCIAL MEDIA */

.socialMedia {
  display: flex;
  margin: auto;
  width: min-content;
}

.socialSVGLink {
  margin-left: .25rem;
  padding: .3rem;
  width: 1.3rem;
  height: 1.3rem;
  transition: .25s;
}

.socialSVG {
  margin: auto;
  height: 100%;
  width: auto;
}


/* .socialSVGPinterest:hover {background: #E60023}
.socialSVGInstagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%)}
.socialSVGFacebook:hover {background: #4267B2} */


/* CONTACT SOCIAL MEDIA */

.contactMain .contactSocialBox {
  margin: auto;
  margin-bottom: 3rem;
}
.contactSocialBox {
  text-align: center;
  text-transform: capitalize;
}
.contactMain .socialMedia .cartButton {display: none}

.contactMain .contactSocialBox .socialSVGLink {
  margin: 1rem;
  padding: .5rem;
  width: 3rem;
  height: 3rem;
}




/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                              6.00) =load:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.load{
  background: var(--color2);
  display: grid;
  height: 100vh;
  width:  100vw;
  position: fixed;
  top:0;
  left:0;
  transition:.5s;
  z-index: 10000;
}
.circle{
  width:  50px;
  height: 50px;
  border-radius: 50%;
  border-top: 2px solid var(--color1);
  margin: auto;
  animation: wheel 1s infinite;
}
@keyframes wheel{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                            6.01) =header:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.header {
  color: black!important;
  align-items:center;
  background:white;
  display:var(--headerDisplay);
  grid-template-columns: 1fr 1fr 1fr;
  left: 0;
  padding:  .75rem var(--lateral);
  position:sticky;
  top: 0;
  width:100%;
  z-index:15;
  transition:.7s;
}

.home .header.observed .headerLogo {
  color: white;
}

.home .mobileHeader.observed .headerLogo {
  color: white;
}

.home .mobileHeader.observed .menuStripe {
  background: white;
}


.home .mobileHeader.observed svg {
  color: white;
}

.home .mobileHeader.observed .initialNavMobile{
  background: transparent!important;
}

.home .mobileHeader.observed .cartButton .cartButtonCant {
  color: white!important;
}

.header.alt,
.header.observed{
  background:transparent;
  border: none;
  color: white!important;
}

.header .socialMedia{margin: auto 0 0 auto;}

.header .socialMedia .socialSVGFacebook  {display: none;}

.home .header{position:fixed}

.headerSocial{
  margin-left:auto;
}

.logo {
  height: .75rem;
  color: transparent;
  width:100%;
  animation-delay: 2s;
}

.logo.loaded path{
  stroke-dasharray:  var(--strokeDashLenght);
  stroke-dashoffset: var(--strokeDashLenght);
  animation: line-anim 1.6s ease forwards;
  animation-delay: var(--strokeDashAnimDelay);
}
.logo path:nth-child(1)  {--strokeDashLenght: 174.30;--strokeDashAnimDelay: 0.5s}
.logo path:nth-child(2)  {--strokeDashLenght: 150.56;--strokeDashAnimDelay: 0.6s}
.logo path:nth-child(3)  {--strokeDashLenght: 199.08;--strokeDashAnimDelay: 0.7s}
.logo path:nth-child(4)  {--strokeDashLenght:  56.94;--strokeDashAnimDelay: 0.8s}
.logo path:nth-child(5)  {--strokeDashLenght: 150.56;--strokeDashAnimDelay: 0.9s}
.logo path:nth-child(6)  {--strokeDashLenght: 107.30;--strokeDashAnimDelay: 1.0s}
.logo path:nth-child(7)  {--strokeDashLenght: 207.61;--strokeDashAnimDelay: 1.1s}
.logo path:nth-child(8)  {--strokeDashLenght: 232.46;--strokeDashAnimDelay: 1.2s}
.logo path:nth-child(9)  {--strokeDashLenght: 199.08;--strokeDashAnimDelay: 1.3s}
.logo path:nth-child(10) {--strokeDashLenght: 207.61;--strokeDashAnimDelay: 1.4s}
.logo path:nth-child(11) {--strokeDashLenght: 180.64;--strokeDashAnimDelay: 1.5s}
.logo path:nth-child(12) {--strokeDashLenght: 159.82;--strokeDashAnimDelay: 1.6s}

@keyframes line-anim{
  to{
    stroke-dashoffset: 1;
    color: #757575;
  }
}

/* DESKTOP HEADER */

.headerLogoLink {
  margin: auto auto 0 auto;
  display: flex;
  width: min-content;
}

.headerLogo {
  margin: auto;
  height: 1.3rem;
  width: auto;
  transition:.7s;

}


/* MOBILE HEADER */

.mobileHeader {
  display: var(--mobileHeaderDisplay);
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 5;
  top: 0;
}

.mobileHeader .socialMedia .socialSVGFacebook {display: none;}

.initialNavMobile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  padding: 16px;
  background: white;
  height: 5rem;
  grid-row-gap: 8px;
}

.initialNavMobile .socialMedia {
  grid-column: 3;
  grid-row: 1;
  margin-right: 0;
}

/* .initialNavMobile .socialSVGInstagram {
  width: 1.5rem;
  height: 1.5rem;
}
.initialNavMobile .cartButton {
  width: 1.3rem;
  height: 1.3rem;
} */


.headerLogoLinkMob {
  margin: auto;
  grid-column: 2;
  grid-row: 2;
}



/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.02) =ATFs:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.ATF {
  display: grid;
  margin-top: var(--ATFMarginTop);
}


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.69) =redDots:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.redDot {
position: absolute;
width: 3rem;
height: 3rem;
border-radius: 50%;
top: 45vh;
right: 10vw;
}

.redDot.test{
  background: red;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.02.0) =homeATF:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.homeATF {
  margin-top: 0!important;
}

.homeATFVideo {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
}

.homeATFTitle {
  margin: auto;
  z-index: 1;
  /* display: none; */
}

.homeATFTitle svg {
  height: 1.8rem;
  color: white;
  width: auto;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.02.1) =ShopATF:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.shopATF {margin-top: var(--shopATFMT)}
.ShopOverlay {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: .5;
}

.ShopBanner {
  grid-column: 1;
  grid-row: 1;
  height: var(--shopBannerHeight)!important;
}

.ShopATFTxt {
  color: white;
  grid-column: 1;
  grid-row: 1;
  width: var(--shopATFTxtWidth);
  z-index: 1;
  margin: var(--shopATFTxtMargin);
}

.ShopATFTitle {
  font-size: var(--fontSize1);
  text-transform: uppercase;
}

.ShopATFSubtitle {
  font-size: var(--fontSize3);
  margin-bottom: 1rem;
}




/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.02.2) =ContactATF:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.contactBanner {
  max-height: 250px;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.02.3) =storiesATF:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.storiesATF{
  display: grid;
  grid-template-areas: var(--storiesATFgridAreas);
  grid-gap: 1rem;
  height: min-content;
}

.featuredStorie .storieImg{
  height: inherit;
  opacity: 0;
  transition: 1.5s ease-in;
}

.featuredStorie .storieImg.animate{
  opacity: 1;
}

.storiesATF .featuredStorie:nth-child(1) .storieImg{
  transform:  translateX(-5rem);
}
.storiesATF .featuredStorie:nth-child(1) .storieImg.animate{
  transform: translateX(0);
}

.storiesATF .featuredStorie:nth-child(2) .storieImg{
  transform: translateY(-7rem);
}
.storiesATF .featuredStorie:nth-child(2) .storieImg.animate{
  transform: translateY(0);
}

.storiesATF .featuredStorie:nth-child(3) .storieImg{
  transform: translateX(30%);
}
.storiesATF .featuredStorie:nth-child(3) .storieImg.animate{
  transform: translateY(0);
}

.storiesATF .featuredStorie:nth-child(4) .storieImg{
  transform: translateX(30%);
}
.storiesATF .featuredStorie:nth-child(4) .storieImg.animate{
  transform: translateY(0);
}




.featuredStorie {
  position: relative;
}

.featuredStorie .storieLink{
  display: grid;
  height: var(--storiesATFaspectRatio);
}

.storiesATF .featuredStorie:nth-child(1){grid-area:featuredStorie1}
.storiesATF .featuredStorie:nth-child(2){grid-area:featuredStorie2}
.storiesATF .featuredStorie:nth-child(3){grid-area:featuredStorie3}
.storiesATF .featuredStorie:nth-child(4){grid-area:featuredStorie4}


.storiesATF .featuredStorie:nth-child(3) .storieLink,
.storiesATF .featuredStorie:nth-child(4) .storieLink{
  height: var(--storiesATFaspectRatio3and4);
}

.featuredStorieTitle{
  position: absolute;
  background: white;
  text-transform: uppercase;
  font-size: 1rem;
  font-size: var(--fontSize5);
  padding: .2rem .5rem;
}


.storiesATF .featuredStorie:nth-child(1) .featuredStorieTitle{top: 30%;}

.storiesATF .featuredStorie:nth-child(2) .featuredStorieTitle{bottom: 20%;left: 10%;}

.storiesATF .featuredStorie:nth-child(3) .featuredStorieTitle{bottom: 50%;left: 0;}

.storiesATF .featuredStorie:nth-child(4) .featuredStorieTitle{bottom: 50%;right: 0;}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.02.3) =storiesATFAlternativa:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */




/*

  storiesGeneral

*/

.storiesTitle {
  text-align: center;
  padding: 1rem 0;
  font-size: var(--fontSize2);
}


.archiveStories {
  display: grid;
  grid-template-columns: var(--archiveStoriesGTC);
  padding-bottom: 2rem;
  grid-gap: 7px;
  transition: 2s;
  transition-delay: .3s;
}
.archiveStories .pagination {grid-column:1/-1}
.archiveStories .card {
  /* opacity: 0; */
}


.singleStorieOthers .cardCaption {
  color: white;
  padding: 1rem 0;
}



/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.02.4) =singleStoriesATF:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */


.singleStorie{
  width: 100%;
  position: relative;
}

.singleStorieImg{
  max-height: 75vh;
}

.singleStorieCaption{
  padding: 2.5rem 1rem;
  background: white;
  z-index: 1;
  box-shadow: var(--DP6);
  margin: var(--singleStorieCaptionmargin);
  margin-top: -3rem;
  position: relative;
  text-align: var(--singleStorieCaptionTextAlign);
}

.singleStorieCaption .cardStorieDate{
  border: none;
  top: 0;
  left: 0;
}


h3.singleStorieTitle{
  text-align: center;
  text-transform: uppercase;
  padding: .5rem;
}


/*singleStorieContent*/

.singleStorieContent ul, .singleStorieContent ol {
  padding-left: 16px;
}

.singleOthersTitle{
  width: 100%;
  padding-top: 8rem;
  background: black;
  margin-top: -3rem;

}

.storieSocialSharing{
  margin: auto;
  text-align: center;
  background: rgba(0,0,0,0);
  color: white;
  width: 100%;
  transform: translateY(15rem);
  transition: .7s ease-in;
  opacity: 0;
}

.storieSocialSharing .socialSVGFacebook {
  display: none;
}

.storieSocialSharing .socialMedia .cartButton {display: none}

.storieSocialSharing.alt{
  transform: translateY(-5rem);
  transition: 1.5s ease-in-out;
  opacity: 1;
  margin-bottom: -4rem;
}


.storieSocialSharing .storieSocialSharingTitle{
  font-weight: 100;
  background: black;
  color: white;
  font-size: var(--fontSize2);
  margin-bottom: .5rem;
}

.storieSocialSharing .socialMedia .socialSVGLink {
  height: 1.5rem;
  width: 1.5rem;
}


.singleOthersTitle .titleMoreStories{
  margin: 0 var(--lateral) 0 ;
  color: white;

}

.singleStorieOthers{
  display: grid;
  grid-template-columns: var(--archiveStoriesGTC);;
  padding: 1rem var(--lateral) 2rem var(--lateral);
  grid-gap: 7px;
}

.cardStorieDate{
  /* position: absolute;
  top: var(--cardStorieDatePosition);
  left: var(--cardStorieDatePosition);
  background: white;
  text-align: center;
  padding: .5rem!important;
  border-top: solid var(--color1) 2px;
  border-left: solid var(--color1) 2px; */
  display: none;

}
.singleStorieOthers .cardStorieDate{

}

.cardAuthor{
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 1rem;
}


.pruebaPaginacion{
  display: flex;
  background: white;
}

.readMore {
  display: flex;
}

.readMore svg{
  margin: auto .5rem;
  color: white;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.02.3) =brandATF:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.brandATFCaption {
  /* background: white; */
  margin: 4rem auto auto 0;
  padding: 1rem;
  max-width: var(--brandATFCaptionMaxWidth);
}

.brandLogo {
  height: 1.5rem;
  margin-bottom: 1rem;
  width: auto;
}


.brandATFTxt {font-size: var(--fontSize5); margin: 1rem;}
.brandSection h3 {font-size: var(--fontSize3);margin-bottom: .5rem;}



.brandSection {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: min-content;
  padding-top: 1rem;
  overflow-x: hidden;
}

.brandSection3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin-top: 1rem;
}

.brandImg1 {
  grid-column: var(--brandImg1GridC);
  grid-row: 1;
  transition: 1.5s ease-out;
  opacity: 0;
}
.brandImg1.alt {
  opacity: 1;
}

.brandTxt1 {
  grid-column: var(--brandTxt1GridC);
  grid-row: var(--brandTxt1GridR);
  margin: var(--brandTxt1Margin);
  transform: translateX(5rem);
  opacity: 0;
  transition: 1.5s ease-out;
}

.brandTxt1.alt {
  transform: translateX(0);
  opacity: 1;
}

.brandTxt2 {
  grid-column: var(--brandTxt2GridC);
  grid-row: var(--brandTxt2GridR);
  height: max-content;
  margin: auto;
  opacity: 0;
  transition: 1.5s ease-out;
}

.brandTxt2.alt {
  opacity: 1;
}

.brandImg2 {
  grid-column: var(--brandImg2GridC);
  grid-row: var(--brandImg2GridR);
  opacity: 0;
  transition: 1.5s ease-out;
  transform: translateX(5rem);
}

.brandImg2.alt {
  opacity: 1;
  transform: translateX(0rem);
}

.brandImg3 {
  grid-column: var(--brandImg3GridC);
  grid-row: 1;
  transition: 1.5s;
  opacity: 0;
}

.brandImg3.alt {
  opacity: 1;
}

.brandTxt3 {
  grid-column: var(--brandTxt3GridC);
  grid-row: var(--brandTxt3GridR);
  height: max-content;
  margin: auto;
  z-index: -1;
  transform: translateX(-5rem);
  transition: 1.5s;
  transition-delay: .5s;
  opacity: 0;
}

.brandTxt3.alt {
  transform: translateX(0rem);
  opacity: 1;
}

.brandImg4 {
  grid-column: var(--brandImg4GridC);
  grid-row: var(--brandImg4GridR);
  transition: 1.5s;
  opacity: 0;
}

.brandImg4.alt {
  opacity: 1;
}

.brandTxt4 {
  grid-column: var(--brandTxt4GridC);
  grid-row: var(--brandTxt4GridR);
  height: min-content;
  margin: auto;
  transform: translateX(5rem);
  transition: 1.5s;
  opacity: 0;
  z-index: 0;
}


.brandTxt4.alt {
  transform: translateX(0rem);
  opacity: 1;
}

.brandImg5 {
  opacity: 0;
  transition: 2s ease-in-out;
}

.brandImg5.alt {
  opacity: 1;
}

.brandTxt5 {
  margin: var(--brandTxt5);
  max-width: var(--brandATFCaptionMaxWidth);
  padding: 1rem 4rem 1rem 1rem;
  /* background: white; */
  z-index: 2;
}


.page-id-108 {overflow-x:hidden;}
.blog {overflow-x:hidden;}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.03) =slider:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */


.slider .pagination{grid-column:1/-1}
.slider .slider{grid-column:1/-1}
.slider,.sliderCards{
  display:grid;
  grid-template-columns: var(--frontPageSilderTemplateColumns);
  grid-gap: 7px;
  padding:1rem 0;
  position: relative;
  overflow:hidden;
  z-index: 1;
}
.home .slider {
  padding:1rem 0;
}
.sliderCards{
  grid-column:1/-1;
  padding:0;
}
.sliderTitle{
  grid-column:1/-1;
  text-align: center;
  font-size: var(--fontSize3)
}
.slider .btn{
  grid-column:1/-1;
}

.slider .load{
  position:absolute;
  z-index:10;
  background:white;
  width:100%;
  top:0!important;
  bottom:0;
  height: unset;
  opacity:0;
  transition:none;
  pointer-events:none;
  /* transition-delay:opacity 10s; */
}
.slider.loading .load{
  /* transition-delay:opacity 0s; */
  opacity:1;
}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.04) =multiCards:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.04.0) =card:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.card{
  position: relative;
  display: grid;
  /* background: white; */
  transition:.5s ease-in;
  transition-delay: .15s;
  margin-bottom: auto;
}
.card.alt{
  opacity: 1;
}



.cardCaption{
  display: grid;
  padding: .5rem;
  grid-gap: .5rem;
  text-align: center;
}

.cardCaption .btn {
  background: none!important;
  color: black!important;
  border: none!important;
  position: relative;
  padding: 0;
  padding-bottom: .5rem;
}

.cardCaption .btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: black;
  transform: scaleX(1);
  bottom: 4px;
  left: 0;
  transition: .25s;
  transform-origin: left;
}

.cardCaption .btn:hover::after {
  transform: scaleX(0);
}

.singleStorieOthers .cardCaption .btn {
  color: white!important;
  background: transparent!important;
}

.singleStorieOthers .cardCaption .btn::after {
  background: white;
}

.cardTitle{
  font-size: var(--fontSize4);
  text-transform: uppercase;
}

.cardDescription{
  height: min-content;
  overflow-y: hidden;
  font-size: var(--fontSize5);
}

.card .btn{
  margin-left: 0;
}


.productCardPrice {
  font-size: var(--fontSize5);
  font-weight: bold;
}
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.05) =NAVIGATION BARS:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.05.0) =navBar:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.navBar {
  display: grid;
  grid-auto-flow: column;
  grid-gap: var(--navBarGridGap);
  width: max-content;
  margin: auto auto 0 0;
}

.navBar .menu-item {
  text-transform: uppercase;
  font-size: var(--navBarItemFS);
  position: relative;
  letter-spacing: inherit;
}

.navBar .menu-item::after {
  background: black;
  bottom: -.05rem;
  content: ' ';
  height: 1px;
  left:0;
  position: absolute;
  transform: scale(0);
  transition: .25s;
  transform-origin: center;
  width: 100%;
}

.navBar .menu-item.current-menu-item::after,
.navBar .menu-item:hover::after {transform: scale(1);}


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.05.1) =footerNav:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */


.footerNav {
  color: black;
  display: flex;
  flex-direction: column;
  font-size: var(--fontSize5);
  height: 100%;
  justify-content: space-between;
  text-transform: uppercase;
  align-items: center;
}

.footerNav li {
  margin: .25rem 0;
  font-size: var(--fontSize5);
  position: relative;
  width: max-content;
}


.footerNav li::after {
  background: white;
  bottom: -.05rem;
  content: ' ';
  height: .1rem;
  left:0;
  position: absolute;
  transform: scale(0);
  transition: .25s;
  transform-origin: center;
  width: 100%;
}

.footerNav li:hover::after {transform: scale(1);}


.footer .socialMedia .cartButton {display: none}

.footer .suscribe {width: 60%;margin: auto;}


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.05.2) =mobileNav:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */


.hamburger {
  display: flex;
  flex-direction: column;
  height: 1.5rem;
  width: 1.5rem;
  justify-content: space-around;
  cursor: pointer;
  grid-column: 1;
  grid-row: 1;
  margin: auto;
  margin-left: 0;
}

.menuStripe {
  width: 100%;
  height: 2px;
  background: black;
}

.mobileNavBar {
  position: fixed;
  top: 5rem;
  height: calc(100vh - 5rem);
  width: 100vw;
  background: white;
  transition: .5s;
  left: 100vw!important;
  display: grid;
  border-top: solid 2px black;
  grid-template-rows: 1fr auto auto;
  grid-gap: 1.5rem;
  padding: 1.5rem 0;
  z-index: 10;
}

  .mobileNavBar.mobileNavBarVisible {
  left: 0!important;
}


.mobileNavBar .suscribe {
  margin: 0 auto;
}

.mobileNavBar .suscribe>* {
  width: 100%;
}

.mobileNavBar .suscribe .suscribeButton {
  width: 100%;
  color: white!important;
  background: black!important;
  margin: .5rem auto;
}
.mobileNavBar .suscribe .suscribeButton:hover {
  color: black;
  background: white;
  border: solid 1px var(--color3);
}


.mobileNavBar .socialMedia .socialSVGFacebook {
  display: none;
}

.mobileNavBar .socialMedia .cartButton {
  display: none;
}





.mobileNavBar .socialMedia {
  margin: auto;
}


.navBarMobile {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.navBarMobile li {
  font-size: var(--fontSize4);
  margin: 1rem auto;
  width: max-content;
}

.mobileHeader .socialSVGPinterest {
  background: #E60023;
  border: none;
  color: white;
}

.mobileHeader .socialSVGFacebook {
  background: #4267B2;
  border: none;
  color: white;
}

.headerLogoMob {
  height: 1.2rem;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.05.3) =pagination:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.pagination{
  margin:auto;
  display: grid;
  grid-gap:.5rem;
  grid-auto-flow:column;
}
.paginationLink,
.paginationCurrent{
  padding:.3rem;
  /* border-radius:50%; */
  border-bottom:1px solid white;
  transition:.3s;
  font-weight: 100;
  /* font-family: 'bask', serif; */
}
.paginationCurrent{
  border-bottom:1px solid grey;
}
.paginationLink{
  cursor:pointer;
}
.paginationLink:hover{
  border-bottom:1px solid black;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.06) =BUTTONS:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.06.0) =btn:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.btn,.woocommerce a.button, .added_to_cart.wc-forward, .checkout-button{
  background:var(--color1)!important;
  color:var(--color2)!important;
  cursor:pointer;
  margin: auto;
  padding:.5rem;
  text-transform:uppercase;
  border: var(--color1) solid 1px;
  transition: .25s;
  font-size: var(--fontSize5);
  font-weight:100;
  border-radius:0;
  text-align: center;
}
.woocommerce a.button,.added_to_cart.wc-forward {width:100%; margin: .5rem auto;}
.btn:disabled{background:#555!important;}
.btn:disabled:hover{background:#555!important;color:var(--color2)!important;}

.thinBtn {
  background: var(--color1);
  color:var(--color2);
  margin: auto;
  padding: .25rem;
  text-transform: uppercase;
  border: var(--color1) solid 1px;
  transition: .25s;
}
.thinBtn:hover {
  background: var(--color2);
  color: var(--color3);
  border: var(--color3) solid 1px;

}

.btn:hover,.woocommerce a.button:hover {
  background: var(--color2)!important;
  color: var(--color3)!important;
  border: var(--color3) solid 1px;
}

.btnWhite {
  background: var(--color2)!important;
  color: var(--color3)!important;
  border: var(--color3) solid 1px;
}

.btnWhite:hover {
  color: var(--color2)!important;
  background: var(--color1)!important;
}

.shopBtn {
  margin: 2rem auto;
  margin-top: 0;
}

.ShopATFTxt .btn {
  margin-top: 2rem;
  border: none;
}


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.06.1) =sliderArrow:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.sliderArrow {
  cursor:pointer;
  --size:1.5rem;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  transform-origin: center;
  right:.75rem;
  background:var(--color2);
  border-radius:50%;
  height:var(--size);
  width: var(--size);
  border:none;
  font-size:1.2rem;
  font-weight:100;
  z-index: 10;
  display: flex;
}
.sliderArrow svg {margin:auto}

.slideLeft{
  transform: translateY(-50%) rotate(180deg) ;
  left: .75rem;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.06.2) =cartButton:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.header .cartButton{
  color: unset;
  height: 1.3rem;
  width: 1.3rem;
}

.cartButton{
  height:1.4rem;
  width: 1.4rem;
  color:black;
  transition:.3s;
  padding:.3rem;
  border-radius:50%;
  position:relative;
}
.cartButton:hover{
  background:black;
  color:white;
}
.cartButtonCant{
  position:absolute;
  top:  -.3rem;
  right:-.3rem;
  color:black;
  border-radius:50%;
  font-size:.5rem;
  height: .9rem;
  width:  .9rem;
  text-align: center;
  padding:.2rem;
}



/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.07) =suscribe:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.suscribe {
  color: black;
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
}

.suscribeInput {
  background:none;
  border: 1px solid black;
  padding: .5rem;
  width: 100%;
  margin-top: .4rem;
}

.suscribeButtonP {
  align-self: flex-end;
}

.suscribeTitle {
  word-spacing: 2px;
  font-weight: bold;
}

.suscribeButton {
  transition: .25s;
  font-weight: bold;
  margin: .5rem auto;
  margin-right: 0;
}


/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.08) =filterBars:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.shopFilterBar {
  display: flex;
  justify-content: flex-end;
  margin: 1rem var(--lateral);
  margin-right: var(--shopFilterBarMR);
  grid-column: 1/-1;
}

.filterBarItem {
  margin: 0 1rem;
  width: 5rem;
  padding: .5rem;
}
.shopFilterBar .selectBox:nth-child(1){margin-right: var(--shopFilterBarChild11MarginRight)}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.08.1) =selectBox:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.selectBox{
  --selectBoxHeight:40px;
  display: grid;
  align-items: center;
  grid-template-rows: var(--selectBoxHeight);
  position: relative;
  width:max-content;
  min-width: 4rem;
}


.selectBoxButton{
  background: white;
  color:#333;
  cursor: pointer;
  display:grid;
  grid-row:1;
  grid-column:1;
  height: var(--selectBoxHeight);
  position: relative;
  transition:.4s;
  width:100%;
  /* width:max-content; */
  height:40px;
  z-index:1;
}

.selectBoxPlaceholder {
  font-size: var(--fontSize4);
  height:1rem;
  line-height:1rem;
  left:16px;
  position: absolute;
  top:calc(50% - .5rem);
  transition:.3s;
  transform-origin:left;
}
.selectBoxCurrent{
  padding-top:16px;
  padding-bottom:2px;
  font-size: var(--fontSize5);
  position: relative;
  text-transform: uppercase;
}




.selectBox:focus{
  outline:none;
}
.selectBox:focus .selectBoxCurrent::after,
.selectBox.alt .selectBoxCurrent::after{
  /* background:#F78D15; */
  background:var(--color1);
  transform:scaleX(1);
}
.selectBox:focus .selectBoxPlaceholder,
.selectBox.alt .selectBoxPlaceholder{
  transform:translateY(-50%) scale(.6);
}


.selectBoxList{
  align-items: center;
  background: #FFF;
  display: grid;
  grid-gap: .2rem;
  /* grid-auto-rows:1.5rem; */
  padding: .2rem;
  left:0;
  position: absolute;
  pointer-events: none;
  opacity:0;
  right:0;
  top:0;
  transition:.3s;
  transition-delay:.2s;
  width: max-content;
  z-index: 10;
}
.selectBox:focus .selectBoxList{
  opacity:1;
  top:40px;
  pointer-events: unset;

}
.selectBoxOption:first-child{height:1.5rem}
.selectBoxOption{
  cursor:pointer;
  font-size: var(--fontSize4);
  /* height: 1.5rem; */
  line-height: 1.8rem;
  transition:.3s;
  padding:0 16px;
  width:max-content;
}
.selectBoxOption:hover{
  background:#BBB;
}
.hidden{display:none!important}
.selectBoxInput{
  display: none;
}
.selectBoxCurrent:focus + .selectBoxList{
  transform: translateY(calc(-20px - 50%));
  background: red;
  transition: .7s;
}
.colrOptP{
  /* width:max-content; */
  /* height: var(--selectBoxHeight); */
  line-height: var(--selectBoxHeight);
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.09) =color:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.colorImg{
  grid-row: 1;
  grid-column: 3/ span 3;
  order: 1;
}
.colorCaption {
  display: flex;
  grid-column: 1 / span 2;
  grid-row: 1;
  flex-direction: column;
  background: var(--colorCaptionBackground);
  margin:auto 0;
  z-index: 2;
  order: 2;
}
.colorTitle{
  font-size: var(--fontSize3);
  text-align: var(--colorTitleTextAlign);
}

.colorTxt {
  text-align: var(--colorTxtTxtAlign);
  font-size: var(--fontSize5);
}

.colorCaption .btn {
  margin: var(--colorCaptionBtnMargin);
  width: max-content
}

/*  ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          FRONT STORIES
---------------------------------------------------------------------------
------------------------------------------------------------------------------*/

.stickyBannerAndStories{
  display: var(--stickyBannerAndStoriesDisplay);
  flex-direction: column;
  position: relative;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(4,1fr);
  padding:1rem var(--lateral);
}

.frontStories{
  grid-column: 3 / span 2;
  display: grid;
  grid-gap: 1.5rem;
}




/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.10) =TITLES:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.ShopTitle2 {
  grid-column: 1/-1;
  font-size: var(--fontSize2);
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  padding: 1rem;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                        6.11) =FORMS:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.form {
  background: white;
  display: flex;
  flex-direction: column;
  padding: var(--formPadding);
  text-transform: uppercase;
  box-shadow: var(--DP6);
}

.form .formTitle {
  font-weight: 100;
  margin-bottom: 1.5rem;
  font-size: var(--fontSize2);

}

.form label {
  font-size: var(--fontSize5);
  margin-top: .5rem;
}

.form input, textarea {
  border: none;
  border-bottom: 1px solid black;
}

.form input:focus, textarea:focus {
  outline: none;
}

.form input {
  height: 2rem;
}

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.11.1) =contactForm:
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.contactForm {
  grid-column: var(--contactFormGridC);
  box-shadow: none!important;
}

.contactForm textarea {
  height: 4rem;
}

.contactBox {
  background: var(--color1);
  display: grid;
  grid-template-columns: var(--contactBoxTemplateC);
  grid-template-rows: var(--contactBoxTemplateR);
  margin: var(--contactBoxMargin);
  margin-bottom: 2rem;
  box-shadow: var(--DP6);
}

.contactForm .btn {
  margin: 3rem 0 auto auto;
  border: black 1px solid;
}

.contactInformation {
  display: flex;
  flex-direction: var(--contactInformationFlexD);
  justify-content: center;
  padding: var(--contactInformationPadding);
  color: white;
  flex-wrap: wrap;
  text-align: var(--contactInformationTextAlign);
}

.contactInformationItem {width: var(--contactInformationItemWidth);}

.contactInformationItem:nth-child(1) {
  margin-bottom: var(--contactInformationItemMarginBottom);
}

.contactInformationItemTitle {
  text-transform: uppercase;
  font-size: var(--fontSize4);
  margin-bottom: .3rem;
  font-weight: 100;
}

.contactInformationItemTxt {
  font-size: var(--fontSize5);
  text-align: var(--textAlignCenterLeft);
}




/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.12) =MAINS
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          6.12.1) =SINGLE PRODUCT MAIN
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */

.singleProductMain {
  display: var(--singleProductMainDisplay);
  flex-direction: column;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: min-content 1fr;
  grid-gap: 1rem;
  padding: 1rem calc(var(--lateral) * 2);
  margin-top: var(--ATFMarginTop);
}

.gallery {
  grid-column: span 2;
  grid-row: span 2;
  width: 100%;
  display:grid;
  /* flex-direction: column; */
  order: 2;
  margin-bottom:auto;
  /* position:sticky; */
  position:var(--galleryPosition);
  top:3rem;
}
.element{
  opacity:1;
  transition:.4s;
}
.element.inactive{
  opacity:0;
}


.singleProductsgalleryBtnsContainer {
  margin: auto;
  margin-top: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: absolute;
  top: 50%;
}
.singleProductArrowSVG {color: var(--color1);}

.singleProductsGalleryBtns {
  border: none;
  background-color: transparent;
  color: var(--color3);
  transition: .25s;
  height: 2rem;
  width: 2rem;
}



.SingleProductInteraction {
  display:grid;
  grid-gap:.5rem;
  grid-column: 4/ span 1;
  grid-row: 1;
  margin: var(--SingleProductInteractionM);
  width: 100%;
  order: 3;
}

.SingleProductInteraction  .selectBox {
  width: 100%;
}

.selectBoxButton {
  border-bottom:2px solid #666;
}


.SingleProductInteraction button {
  width: var(--singleProductButtonWidth);
  font-size: var(--fontSize4);
  padding: var(--singleProductInteractionBtnPadding);
}

.singleProductSizeBtn {margin-bottom: 1.5rem!important;}

.singleSideTitle {
  /* opacity: .8; */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--fontSize3);
}

.singleSideTitle, .singleSidePrice {
  text-align: var(--singleSideTxtalign);
  margin-top: var(--singleSideTxtMarginBottom);

}

.singleSideTitle {
  font-size: var(--fontSize5);
}

.singleSidePrice {
  font-weight: 800;
  line-height: var(--fontSize3);
  font-size: var(--fontSize5);
}

.singleProductDescription {
  grid-column: 4/ span 2;
  grid-row: 2;
  margin: auto;
  margin-top: var(--singleProductDescriptionMarginTop);
  order: 1;
}

/* .singleProductTitle {
  font-size: var(--fontSize2);
  font-weight: 100;
  text-align: var(--textAlignCenterLeft);
  text-transform: uppercase;
} */
/* .singleProductSubtitle {
  font-size: 1rem;
  margin-bottom: .5rem;
  text-align: var(--textAlignCenterLeft);
} */
.singleProductTxt {
  font-size: var(--fontSize4);
  opacity: .8;
  text-align: var(--textAlignJustifyLeft);
}

.relatedProducts {
  display: var(--relatedProductDisplay);
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap:.5rem;
  padding: 0 calc(var(--lateral) * 2);
  margin-bottom: var(--lateral);
}

.relatedProducts .sliderTitle {
  text-align: left;
}

/* .relatedProducts .card {
  margin-bottom: var(--relatedProductsCardMarginBottom);
} */

/* ---------------------------------------------------------------------------
------------------------------------------------------------------------------
                          9.99) =footer
------------------------------------------------------------------------------
--------------------------------------------------------------------------- */
.footer{
  display:grid;
  grid-template-columns: var(--footerTemplateColumns);
  grid-gap:var(--footerGridGap);
  padding: 4rem  1rem calc(var(--lateral) / 2 );
  font-size: var(--fontSize5);
  grid-row-gap: 3rem;
  align-items: center;
  justify-content: center;
  border-top: 1px solid black;
}
.logoFooterContainer{
  display: grid;
  justify-content: center;
  align-items: center;
  grid-gap: 1rem;
  margin: auto;
}

.logoFooter {height: .75rem; width: auto;}


.footer .socialMedia {color: black; margin: auto;}
.footer .socialSVGLink  {border-color: black; margin: .5rem}

.signature{
  display:grid;
  grid-column:1/-1;
  justify-content:center;
  margin: .25rem auto;
}
.signature span:hover{color: #ffcc00!important;transition: .25s; cursor: pointer; }



/* FIXES PARA ESTILOS DE PLUGINS */
#cookie-law-info-bar {
  /* font-family: 'parad', sans-serif!important; */
  font-size: 16px!important;
}


/* Tamaños de fuentes para el carrito */

.woocommerce-notices-wrapper >*, .woocommerce-error >* {
  font-size: var(--fontSize5);
}

.shop_table >*, .button {font-size: var(--fontSize4)!important}
.cart_totals >* {font-size: var(--fontSize3)!important}
.checkout-button {width: max-content!important; font-size: var(--fontSize4)}