@import url('https://fonts.googleapis.com/css2?family=Alata&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alata&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
   
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*
debido a que un archivo css no puede cargar variables php
se genera un archivo php que contenga las variables css nesesarias para la pagina 
se establese un root por cada página con el siguinte parametro:
pagina-Nombre del archivo 
encaso de que se requiera la misma imagen en secciones diferentes esta deberan de copiarse por cada seccion 
y generarrse la variable por seccion
por cada seccion se generara un root
*/

/*clases de utilidad establesidas por WL*/

/*ESTAS SON LAS MEDIAS QUE SE UTILIZARAN */
/*
    @media (max-width: 1400px) {}
    @media(max-width: 1200px) {}
    @media(max-width: 992px) {}
    @media (max-width: 768px) {}
    @media (max-width: 576px) {}
*/
/*utilerias*/
.container-wlxl {
    max-width: 1800px !important;
    margin: 0 auto;
}

.container-wl {
    max-width: 1500px !important;
    margin: 0 auto;
}

h1,h2,h3,h4,h5,a{
    font-family: var(--font-family01);
}


.placeheholderImg{
    position: absolute;
    z-index: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.wl-util-paralax {
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

.woocommerce-billing-fields__field-wrapper p{
    margin-bottom: 1rem;
}

/* rebot */
.container-fluid{
    position: relative;
}

.container{
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0;
}

/* stylos main  formularios*/
#main input[type=text], 
#main input[type=number], 
#main input[type=email], 
#main input[type=tel], 
#main input[type=url], 
#main input[type=password], 
#main input[type=search], 
#main textarea, 
#main .input-text {
    font-family: var(--font-family01);
}

#main textarea{
    font-family: var(--font-family01);
}

#main input[type=submit]{
    font-family: var(--font-family01);
}

#main select{
    font-family: var(--font-family01);
}


#main button, 
#main input[type=button], 
#main input[type=reset], 
#main .button, 
#main .wc-block-grid__products .wc-block-grid__product .wp-block-button__link, 
#main .added_to_cart{
    font-family: var(--font-family01);
}

#main .entry-header .entry-title{
    font-family: var(--font-family01);
}

#main .woocommerce h2{
    font-family: var(--font-family01);
}

#main form {
    margin-bottom: 1.618em;
    font-family: var(--font-family01);
}

#main .woocommerce-message, 
#main .woocommerce-info, 
#main .woocommerce-error, 
#main .woocommerce-noreviews, 
#main p.no-comments {
    font-family: var(--font-family01);    
}

#main .woocommerce{
    font-family: var(--font-family01);
}

#main .col-1{
    width: 100%;
}

#main .col-2{
    width: 100%;
}
/*--------------------*/
.clear{
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    margin: 0px;
}

.wlclear,
.wlClear{
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    margin: 0px;
}

.clear_padding{
    padding-left: 0px;
    padding-right: 0px;
}

.clear_margin{
    margin-left: 0px;
    margin-right: 0px;
}

.center-v{
    position: relative;
    top: 50%;
    transform: translate(0px,-50%);
}

.center-h{
    position: relative;
    left: 50%;
    transform: translate(-50%,0%);
}

.center-center{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

/*--------------------*/
.flex {
    display: flex;
}

.uno {
    order: 1;
}

.dos {
    order: 2;
}

.block{
    display: block;
}

.none{
    display: none;
}

/*col-xl-12 col-lg-12 col-md-12 col-sm-12*/

@media (max-width: 1400px) {
    /*xxl: 1320px*/

    .xxl-uno {
        order: 2;
    }

    .xxl-dos {
        order: 1;
    }
    
    .xxl-block{
        display: block;
    }

    .xxl-none{
        display: none;
    }


}

@media(max-width: 1200px) {
    /*xl: 1140px,*/
    .xl-uno {
        order: 2;
    }

    .xl-dos {
        order: 1;
    }
    
    .xl-block{
        display: block;
    }

    .xl-none{
        display: none;
    }
}

@media(max-width: 992px) {
  /*lg: 960px,*/  
    .lg-uno {
        order: 2;
    }

    .lg-dos {
        order: 1;
    }

    .lg-block{
        display: block;
    }

    .lg-none{
        display: none;
    }
}

@media (max-width: 768px) {
    /*md: 720px,*/
    .md-uno {
        order: 2;
    }

    .md-dos {
        order: 1;
    }

    .md-block{
        display: block;
    }

    .md-none{
        display: none;
    }
}

@media (max-width: 576px) {
    /*sm: 540px,*/
    .sm-uno {
        order: 2;
    }

    .sm-dos {
        order: 1;
    }

    .sm-block{
        display: block;
    }

    .sm-none{
        display: none;
    }
}

@media (max-width: 400px) {
    /*xsm: 100%,*/
    .xsm-uno {
        order: 2;
    }

    .xsm-dos {
        order: 1;
    }
    
    .xsm-block{
        display: block;
    }

    .xsm-none{
        display: none;
    }

}