/*
Theme Name:   Titi Saquitos
Author:       David Lopez
Author URI:   https://www.linkedin.com/in/dlopezwd/
Description:  Saquitos is a Storefront child theme.
Version:      1.12.3
Template:	  storefront
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  titisaquitos
*/
.contained {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.spacing {
    padding: 50px 20px 50px
}
.contained.spacing h2 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}
.storefront-breadcrumb {
    width: 1200px;
    margin: 0 auto;
}
html, body, button, input, textarea {
    font-family: 'Poppins', sans-serif;
}

p {
    color: black;
}

.col-full {
    max-width: 100%;
}

.primary-navigation a {
    font-size: 13px;
}

button.menu-toggle, button.menu-toggle:hover {
    border-color: white;
}

a.header-account-btn.header-extra-btn {
    transition: .5s;
}

a.header-account-btn.header-extra-btn:hover {
    transform: rotate(30deg);
}

/* mobile logo size */
.site-header .site-logo-anchor img, .site-header .site-logo-link img, .site-header .custom-logo-link img {
    max-width: 170px;
}

/* mobile menu */
.handheld-navigation {
    position: absolute;
    width: 100%;
    top: 161px;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0px 30px 41px 0px #717070;
}
.handheld-navigation ul.menu > li:first-child {
    border-top: 1px solid #e0e0e0;
}

.handheld-navigation ul.menu > li {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}
.main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, .site-header ul.menu li.current-menu-item > a {
    color: black;
    font-weight: bold;
}

.main-navigation ul li {
    text-align: center;
    border-bottom: 1px solid #eaeaea;
    text-transform: uppercase;
}

.main-navigation div.menu {
    transform: translateY(10px);
}

.main-navigation div.menu ul li {
    border-top: 1px solid #80808029;
}

.main-navigation ul ul li {
    border-bottom: none;
}

/* button LINE */


.button {
    transition: .3s;
    color: #000;
    border: 2px solid black;
    background: transparent;
    padding: 5px 10px;
}

.button:hover, .button:focus {
    color: white;
    background-color: black;
    border-color: #000;
}

.button.btn-hero {
    background-color: #dba9ff;
    color: white;
    border: none;
    font-weight: 100;
    padding: 10px 15px;
}

.button.btn-hero:hover {
    background-color: #000000;
    border: none;
}

.button.inverse {
    color: white;
    border-color: white;
}

/* dark background */
.dark-bg {
    background-color: #f9f9f9;
}

/* HEADER */
.site-header {
    padding: 10px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: 0;
}

/* header envio gratis */
section.envio-gratis-home-page {
    position: relative;
    width: 100%;
    background-color: #baa3d5;
}
section.envio-gratis-home-page .wrap img {
    height: 20px;
    margin: 7px 5px 4px;
}
section.envio-gratis-home-page .wrap p {
font-size: 9px;
color: white;
margin: 0;
margin-left: 5px;
text-align: center;
}
section.envio-gratis-home-page .wrap {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding-bottom: 4px;
}


/* header extras btns */
.site-header .extras {
    grid-area: extras;
    width: 100px;
    display: none;
    justify-self: end;
}
.site-header .extras ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.saquitos-header-widget {
    display: none;
    grid-area: header-search-box;
    text-align: center;
    justify-self: end;
}
.site-header .extras .header-extra-btn {
    height: 50px;
    width: 50px;
    display: block;
    position: relative;
    text-indent: -9999px;
    z-index: 999;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}
.site-header .extras .header-extra-btn:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    line-height: inherit;
    vertical-align: baseline;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 3;
    font-size: 16px;
    text-indent: 0;
    display: block;
    cursor: pointer;
    color: #000;
}
.header-search-btn:before {
    content: "\f002";
}
.header-account-btn:before {
    content: "\f007";
}

/* entry-header */
header.entry-header {
    margin: 0 auto;
    text-align: center;
    background-color: #a482cd78;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}

header.entry-header:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(163,129,204);
    background: linear-gradient(129deg, rgba(163,129,204,1) 0%, rgba(224,199,255,1) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

header.entry-header h1 {
    margin: 0;
    color: white;
    position: relative;
    z-index: 2;
    font-size: 25px;
}

/* primary menu */
.main-navigation ul li {
    border-bottom: none;
}

/* SECTION TITLE */
h2.section-title {
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
}

/* WOOCOMMERCE */

header.woocommerce-products-header {
    width: 100%;
    max-width: 1200px;
    margin: 15px auto;
    padding: 35px 15px 15px;
    background-color: #f1eaf6;
}

/* woocommerce product navigation */
nav.storefront-product-pagination {
    display: none;
}

/* PRODUCTS PAGE CONTENT WRAPPER */
.storefront-sorting,
ul.products,
.entry-content .woocommerce,
.single-product div.product{
    width: 100%;
    max-width: 1200px;
    margin: 15px auto;
    padding: 15px;
}

/* CART */
.cart-envio-gratis img {
    width: 100%;
    max-width: 300px;
    margin-bottom: 20px;
}
.single-product div.product form.cart {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.single-product div.product p.price {
    margin: 1.4em 0 0 0;
}
.variations label {
    font-size: 25.888px;
    font-weight: 100;
    color: black;
}
.cart-tejidos-btn  {margin-bottom: 1em;}
#cart-tejidos-small-view a {
    text-decoration: underline;
    margin: 20px 0;
    display: block;
}

/* cart header */
.storefront-full-width-content.woocommerce-cart .entry-header {
    width: 100%;
    max-width: 1200px;
    margin: 15px auto;
    padding: 15px;
}
.cart_totals h2, .cart_totals table {display: none;}

/* CHECKOUT */
.storefront-full-width-content.woocommerce-checkout .entry-header {
    width: 100%;
    max-width: 1200px;
    margin: 15px auto;
    padding: 15px;
}

/* HOME PAGE */
.saquitos-home-page > section:not(:first-child) {
    padding: 100px 15px 50px;
}
#popup-homepage-modal {
    padding: 10px;
}

/* HERO IMAGE */
.hero-image {
    padding: 30px 10px 50px 10px;
}

.hero-image__content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-image__content-wrapper img {
    width: 100%;
}

.hero-image__text {
    padding: 10px 30px;
    width: 100%;
    text-align: center;
}

.hero-image__text .price {
    display: block;
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #6d6d6d;
}

.hero-image__text h2 {
    font-weight: revert;
    font-size: 30px;
}
.hero-text {
    font-size: 15px;
}

/* CATEGORIES SECTION */

.home-categories-cards ul {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style-type: none;
}

.home-categories-cards ul li {
    max-width: 46%;
    margin: 0 2%;
}

.home-categories-cards ul li .name {
    text-align: center;
    display: block;
    margin: 10px 0 30px;
}

/* BENEFICIOS SECTION */
.beneficios {
    position: relative;
}

.beneficios p {
    margin: 0 10px;
}

.beneficios .expansion-container .expansion-visible {
    padding-bottom: 20px;
}
.beneficios .expansion-container .expansion-visible h3 {
    font-size: 19px;
}
.beneficios .expansion-container .expansion-hidden img {
    margin: 0;
    padding: 0 0 25px;
    width: 100%;
}
.beneficios .expansion-container .expansion-hidden ul {
    margin: 0;
    padding: 0 20px 45px;
}
.benefits-expansion {
    margin-top: 15px;
}
.benefits-expansion .expansion-container .expansion-item:first-child {
    border: 1px solid #ff9797;
}
.benefits-expansion .expansion-container .expansion-item:last-child {
    border: 1px solid #9b9bff;
}


/* TESTIMONIALS */

.testimonial-wrap {
    display: grid;
    grid-gap: 10px;
    text-align: center;
}

.testimonial-img {
    margin: 0 auto;
}

.round-img {

    border-radius: 50%;
    overflow: hidden;
}

.testimonial-wrap .round-img {
    width: 110px;
    height: 110px;
}

.empleo-calor .round-img,
.empleo-frio .round-img {
    width: 50%;
    height: 50%;
    max-width: 250px;
    margin: 0 auto;
}
.empleo-buttons {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.testimonial .ratings {
    color: #ffb200;
}

.testimonial .text {
    font-family: serif;
    max-width: 80%;
    margin: 0 auto;
}

.testimonial .name {
    color: black;
}

.testimonial .position {
    font-style: italic;
    font-size: 11px;
}

.testimonial .testimonial-divider {
    display: block;
    width: 10%;
    height: 2px;
    background: #a482cd;
    margin: 20px auto 10px;
}

.testimonio-meta {
    display: flex;
    margin: 0 auto;
}

.testimonio-meta .testimonio-logo img {
    max-width: 100px;
}

.testimonio-meta .testimonio-logo {
    margin-right: 20px;
}

/* CLIENTS */
.clients ul {
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.clients ul li {
    padding: 0;
    width: 70%;
    max-width: 220px;
    margin: 0 20px 50px;
}

.clients ul li:nth-child(odd) {
    /*transform: translateX(-40px);*/
}

.clients ul li:nth-child(even) {
    /*transform: translateX(40px);*/
}



/* EMPLEO */
.empleo-wrap .round-img {
    margin-bottom: 30px;
}
.empleo h3 {
    font-size: 20px;
}
.empleo .expansion-container .expansion-visible {
    padding-bottom: 20px;
}
.empleo .expansion-container .expansion-hidden {
    padding-bottom: 40px;
}
.empleo .expansion-container .expansion-visible h3 {
    font-size: 17px;
}
.empleo .expansion-container .expansion-hidden ul {
    padding-bottom: 20px;
    margin: 0;
    list-style-type: none;
}


.empleo-calor {
    padding: 10px 10px 10px 30px;
    border-left: 1px solid #ff0009;
}
.empleo-text {
    text-align: left;
}
.empleo-text ul {
    margin-left: 5px;
}
.empleo-text h3 {
    text-align: center;
    margin: 10px;
}

.empleo-frio {
    padding: 10px 10px 10px 30px;
    border-left: 1px solid #81237e;
}

.empleo ul {
    margin: 0 0 20px 20px;
}

.empleo ul li {
    margin-bottom: 10px;
    color: black;
    position: relative;
    padding-top: 10px;
}
.empleo.expansion-container ul li:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    width: 50%;
    margin: 0 auto;
    background-color: #f1eaf6;
}
.empleo ul li:last-child:after {
    content: none;
}

/* TEJIDOS */
section.tejidos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.featured-tejido {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
.tejidos-feat-img {
    border-radius: 40px;
    overflow: hidden;
}

.tejido-img-wrap {
    border-radius: 20px;
    overflow: hidden;
}


.feat-tejido-text .section-title {
    text-align: left;
    margin: 20px 0 10px;
}

div#tejidos-filters-js {
    width: 100%;
}

.tejidos-list {

}
.tejidos-list {
    list-style-type: none;
    margin: 0 0 50px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.tejidos-list li {
    margin: 0;
    width: 46%; /* 28% */
    margin-bottom: 6%;
    border-radius: 18px; /* 30px */
    overflow: hidden;
    position: relative;
}
.tejidos-list:hover {
    cursor: pointer;
}
#tejido-page-modal-js.tejido-page-modal {
    position: fixed;
    top: 0;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    background-color: #fffffff5;
    z-index: 1099;
    transform: translateX(100%);
    transition: .5s;
}
#tejido-page-modal-js.show-tejido-modal {
    transform: translateX(0);
}

.tejido-page-modal .tpm-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 30px;
    text-align: center;
}
.tejido-page-modal .tmp-content div {
    padding: 20px;
    font-weight: 100;
    font-size: 16px;
    color: mediumpurple;
    border-bottom: 1px solid mediumpurple;
    margin-bottom: 15px;
}

.tejido-page-modal .tpm-wrapper div span {
    font-weight: bold;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: mediumpurple;
    border-radius: 12px;
    line-height: 1.9;
    color: white;
    margin-left: 15px;
    font-size: 26px;
}
.tejidos-list li img {
    width: 100%;
}
.tejidos-list li .tejido-number {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #a482cdd9;
    color: white;
    transition: .5s;
    text-align: center;
    font-size: 25px;
    padding: 6px;
    height: 50px;
    transform: translateY(0);
    border-top: 2px solid #9877bf;
}
/*.tejidos-list li:hover .tejido-number {*/
    /*transform: translateY(100%);*/
/*}*/
.tejidos-list .sale {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background: red;
    color: white;
    width: 100%;
    text-align: center;
}

.tejidos-list h2 span {
    display: block;
    font-size: small;
    color: gray;
    font-style: italic;
}
.tejidos button {
    margin-top: 30px;
}

.tejidos-inner-buttons {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
    margin-top: 10px;
}

#tejidos-search {
    width: 100%;
    padding: 15px;
    text-align: center;
}

.tejidos-inner-buttons button {
    min-width: 215px;
    margin: 0 0px 5px 0;
    width: 100%;
}
.tejidos-inner-search {
    display: flex;
    align-items: center;
}

button#tejidos-search-clear {
    margin: 0 0 0 20px;
    font-size: 21px;
}
span.tejido-cat {
    display: none;
}

span.tejido-nombre {
    display: none;
}

span.tejido-color {
    display: none;
}

/* footer menu */
.site-footer h3, .site-footer h2 {
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 25.88px;
    position: relative;
}
.site-footer h3:after, .site-footer h2:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ffffff17;
}
.saquitos-footer-widget.contained img {
    text-align: center;
    margin: 0 auto 50px;
    width: 150px;
}

.site-footer {
    background-color: #a381cc;
}
.site-footer p{
    color: white;
}
.site-footer .contained,
.footer-pago-seguro {
    margin: 25px 0;
    padding: 0 20px;
}

ul#menu-footer-menu {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    list-style-type: none;
}

ul#menu-footer-menu li {
    padding: 10px 5px;
    width: 100%;
    text-align: center;
}

ul#menu-footer-menu li a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
}
.footer-pago-seguro ul {
    list-style-type: none;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.footer-pago-seguro ul li {
    max-width: 90px;
}
.footer-pago-seguro ul li span {
    font-size: 9px;
    display: block;
    text-align: center;
}
/* -- social media icons */
.footer-social-media-links ul {
    list-style-type: none;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

.footer-social-media-links ul li {
    max-width: 70px;
}

.footer-social-media-links {
    padding: 20px;
}
.footer-credits {
    border-top: 1px solid #ffffff2e;
    margin-top: 65px;
    padding: 25px 20px 15px;
    margin-bottom: 20px;
}
.footer-credits span {
    display: block;
    text-align: center;
}
#design-by {
    font-size: 0.7em;
    opacity: 0.2;
}

#colophon.site-footer .footer-credits span a {
    color: white;
    font-weight: bold;
}

/* CONTACT PAGE */
.contact-page {
    padding: 50px 20px 50px;
}
.contact-info {
    margin-bottom: 50px;
}

.contact-info .wrap section {
    display: flex;
    align-items: center;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 10px;
    margin: 15px 0;
}

.contact-info .wrap section span:last-child {
    width: 100%;
    padding-left: 28px;
}

.contact-info .wrap section span img {
    font-size: 50px;
}



/* FAQ PAGE */
.expansion-container {
    list-style-type: none;
    margin: 0;
}

.expansion-item {
    border: 1px solid #dedede;
    border-radius: 4px;
    position: relative;
    padding: 0px 20px 0 20px;
    overflow: hidden;
    transition: .5s;
    margin-bottom: 7px;
}
.expansion-item.opened h3 {
    font-weight: bold;
}

.expansion-button {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    padding: 8px 15px;
}
.expansion-button:hover {
    background: none;
}
.expansion-button:focus {
    outline: none !important;
}

.expansion-hidden p {
    margin: 0;
    padding-bottom: 20px;
    font-size: 13px;
}

.expansion-visible h3 {
    padding: 10px 0;
    margin: 0;
    font-size: 13px;
    width: 80%;
}

/* DISTRIBUIDORES */


/* scroll to top module */
#back2Top {
    position: fixed;
    bottom: 160px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: #b096d0e0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px #5f4b7794;
}
#back2TopWrapper {
    display: none;
}

#back2Top:hover {
    cursor: pointer;
}
#back2Top svg {
    fill: #fff;
    width: 20px;
    height: 20px;
    transform: translateY(-1px);
}

/* CARRITO */
.tejido-carrito {
    margin-top: 1em;
    margin-bottom: 1em;
}
.tejido-carrito ul li.animate-btn {
    transform: scale(1.5);
}

.single-product div.product p.price {
    font-size: 50px;
    color: #9c72ce;
}

.related.products span.woocommerce-Price-amount.amount {
    font-size: 25px;
    color: #9c72ce;
}

.tejido-carrito ul li:hover,
.tejido-carrito ul li.tejido-selected{
    cursor: pointer;
    box-shadow: 1px 1px 6px #80008087;
    border: none;
    background-color: purple;
    color: white;
    font-weight: bold;
    transition: transform .3s;
}
.tejido-carrito ul {
    display: flex;
    list-style-type: none;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.tejido-carrito ul li {
    padding: 5px;
    border: 1px solid gray;
    width: 30px;
    height: 30px;
    display: block;
    box-sizing: content-box;
    line-height: 1.7;
    margin-bottom: .5em;
    margin-right: .5em;
    text-align: center;
    border-radius: 5px;
}

#cart-tejidos-small-view {
    margin-top: 1em;
    margin-bottom: 1em;
    display: none;
}

#cart-tejidos-small-view ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    align-items: center;
}

#cart-tejidos-small-view ul li {
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    width: 50px;
    border-bottom-right-radius: 21px;
    border-bottom-left-radius: 7px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-color: purple;
}
.cart-tejido-small-view-element {
    transition: .5s;
}
.cart-tejido-small-view-element.outline-tejido {
    border: 2px solid purple;
    box-shadow: 0 0 10px #6b6b6b;
}
.cart-tejido-small-view-element.tejido-zoom-in {
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
}

#cart-tejidos-small-view ul li span {
    background-color: #baa3d5;
    width: 100%;
    display: block;
    text-align: center;
    color: white;
    border-bottom-right-radius: 19px;
    border-bottom-left-radius: 5px;
}
#cart-tejidos-small-view ul li img {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}


table.cart td.actions .coupon {
    display: none;
}

/* ABOUT US */
.contained.spacing.about-titisaquitos section div img {
    margin-bottom: 30px;
    width: 100%;
    max-width: 400px;
}
.contained.spacing.about-titisaquitos section div div img {
    margin: 0 auto;
    float: none;
}
.contained.spacing.about-titisaquitos section > img {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}
.contained.spacing.about-titisaquitos section {
    margin-bottom: 60px;
    position: relative;
}
.contained.spacing.about-titisaquitos section h2 {
    font-size: 25px;
    text-align: left;
}

/* CTA SECTION */
section.cta-big {
    padding: 60px 20px 220px !important;
    position: relative;
}
section.cta-big .cta-big-wrap h3 {
    color: white;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
}
section.cta-big .cta-big-wrap {
    text-align: center;
}
.cta-instructions {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #000000c4;
    width: 100%;
    display: flex;
    justify-content: center;
}

.cta-instructions ul {
    margin: 20px;
    list-style-type: none;
}

.cta-instructions ul li {
    color: white;
    padding: 10px;
}
.cta-instructions ul li span {
    background-color: white;
    color: black;
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    line-height: 1.9;
    margin-right: 10px;
}

/* welcome page */
.welcome-page-img {
    box-shadow: 0 0 20px #dedede;
}
.welcome-page-section {
    margin-bottom: 100px;
}

.welcome-page-menu ul li {
    list-style-type: none;
}

.welcome-page-menu ul {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.welcome-page-menu ul li a {
    padding: 20px;
    border: 2px solid black;
    display: block;
    margin: 0 10px 20px;
    font-size: 30px;
    text-align: center;
    transition: .3s;
    color: #000;
    background: transparent;
}
.welcome-page-menu ul li a:hover, .welcome-page-menu ul li a:focus {
    color: white;
    background-color: black;
    border-color: #000;
}
.welcome-page-login-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}
.welcome-page-login-btn {
    height: 61px;
    width: 50px;
    display: block;
    position: relative;
    text-indent: -9999px;
    z-index: 999;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: .5s;
}
.welcome-page-login-btn:before {
    content: "\f007";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    line-height: inherit;
    vertical-align: baseline;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 40px;
    text-indent: 0;
    display: block;
    cursor: pointer;
    color: #000;
}
.welcome-page-login-btn:hover {
    transform: rotate(30deg);
}

@media (min-width: 500px) {
    /* envio gratis */
    section.envio-gratis-home-page .wrap p {
        font-size: 13px;
    }

    .empleo-calor,
    .empleo-frio {
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .empleo-text {
        margin-left: 40px;
        width: 100%;
    }
    .tejidos-inner-buttons {
        justify-content: space-between;
    }
    .tejidos-inner-buttons button {
        margin: 0 0px 15px 0;
        width: 49%;
    }
    .tejidos-list li {
        width: 32%;
    }

    /* about us */
    .contained.spacing.about-titisaquitos section div img {
        float: left;
        width: 50%;
        margin-right: 20px;
    }
    .contained.spacing.about-titisaquitos section:after {
        clear: both;
        content: "";
        display: block;
    }
}

@media (min-width: 635px) {
    section.cta-big {
        padding: 150px 20px 170px !important;
    }
    .cta-instructions ul {
        display: flex;
    }
    section.cta-big .cta-big-wrap h3 {
        font-size: 50px;
    }
}

@media (min-width: 768px) {
    
    /* extras links */
    .site-header .extras {
        display: block;
    }

    /* REGULAR PAGES HEADER */
    header.entry-header h1 {
        font-size: 45px;
    }

    header.entry-header {
        height: 130px;
    }

    /* WOOCOMMERCE */
    .storefront-full-width-content .woocommerce-products-header {
        padding: 4% 0 2%;
    }

    /* PRODUCTS PAGE HEADER */
    .woocommerce-cart header.entry-header {
        height: 200px;
    }

    .woocommerce-cart header.entry-header h1 {
        font-size: 75px;
    }

    .contained.spacing h2 {
        font-size: 32px;
    }
    /* header grid config */
    .site-header .site-logo-anchor img, .site-header .site-logo-link img, .site-header .custom-logo-link img {
        margin: 0 auto;
        padding: 15px 0;
    }

    .site-header {
        justify-content: center;
        display: grid;
        grid-template-areas: "logo logo" "menu extras" "cart cart" "header-search-box header-search-box";
    }

    .storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
        grid-area: logo;
        width: 100%;
        margin: 0;
        place-self: center;
    }

    .woocommerce-active .site-header .main-navigation {
        grid-area: menu;
        width: 100%;
        margin: 0;
    }

    .woocommerce-active .site-header .site-header-cart {
        grid-area: cart;
        width: auto;
        padding-left: 1em;
        padding-right: 1em;
    }

    .site-header-cart .cart-contents::after {
        padding-left: 20px;
    }

    .site-header-cart .cart-contents {
        padding: 15px 0;
        text-align: right;
    }

    #menu-menu-principal {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, .site-header ul.menu li.current-menu-item > a {
        color: black;
        font-weight: bold;
    }

    .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
        color: black;
    }

    /* TEJIDOS PAGE */
    .tejidos-page-content {
        width: 100%;
    }

    .tejidos-list li {
        width: 21%;
    }
    /* TEJIDOS PAGE */
    .tejidos .tejidos-list h2 {
        text-align: left;
        font-size: 25px;
    }

    .featured-tejido {
        flex-direction: row;
        justify-content: space-between;
    }

    .tejidos-feat-img {
        display: block;
        border-radius: 30px;
        overflow: hidden;
        width: 40%;
    }

    .feat-tejido-text {
        width: 55%;
    }

    .feat-tejido-text .section-title.hero-title {
        font-size: 25px;
        text-align: left;
        margin-bottom: 16px;
    }

    .hero-text {
        font-size: 20px;
    }

    /* FOOTER */
    .site-footer {
        padding: 50px 30px 0;
    }
    .footer-credits {
        margin-top: 50px;
    }
    .saquitos-footer-sections {
        display: flex;
        justify-content: center;
    }

    #colophon .saquitos-footer-sections > div {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .site-footer h3, .site-footer h2 {
        font-size: 20px;
        line-height: 1.5;
    }

    .footer-pago-seguro ul li {
        max-width: 96px;
    }

    .footer-pago-seguro ul {
        justify-content: space-evenly;
    }

    .footer-credits {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
    }

    #design-by {
        text-align: right;
    }

    #back2Top {
        bottom: 70px;
        right: 60px;
    }

    /* faq */
    ul.expansion-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    ul.expansion-container li {
        width: 49%;
    }

    /* BENEFICIOS */
    section.benefits-expansion .expansion-container {
        display: flex;
        justify-content: space-around;
    }

    section.benefits-expansion .expansion-container .expansion-item {
        width: 48%;
        border: 1px solid #80808030 !important;
    }

    .benefits-expansion .expansion-item {
        height: auto !important;
    }

    .benefits-expansion button.expansion-button {
        display: none;
    }

    /* ABOUT US */
    .contained.spacing.about-titisaquitos section h2 {
        font-size: 45px;
    }
    .contained.spacing.about-titisaquitos section div img {
        margin-right: 60px;
    }

    /* HOME PAGE */
    #popup-homepage-modal {
        padding: 30px;
    }

    /* MI CUENTA */
    .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content .woocommerce-products-header {
        padding: 4% 20px;
    }

}

@media (min-width: 830px) {

    .hero-image__content-wrapper {
        flex-direction: row;
    }

    .hero-image__content-wrapper img {
        width: 50%;
        max-width: 500px;
    }

    .hero-image__text h2 {
        font-size: 40px;
    }

    .clients ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .clients ul li {
        max-width: 300px;
    }

    .clients ul li:nth-child(odd) {
        transform: none;
    }

    .clients ul li:nth-child(even) {
        transform: none;
    }

    /* contact page */
    .contact-page {
        padding: 50px 20px 50px;
        display: flex;
        justify-content: space-between;
    }

    .contact-page .contact-info {
        width: 43%;
        order: 2;
    }

    .contact-page .contact-form {
        width: 50%;
    }

    /* about us */
    .contained.spacing.about-titisaquitos h2:before {
        left: -40px;
        top: -9px;
        width: 340px;
        height: 100px;
    }
}

@media (min-width: 860px) {

    #menu-menu-principal {
        align-items: unset;
    }

    .hero-image {
        padding: 90px 10px 120px 10px;
    }

    .site-header {
        padding: 10px 20px;
    }

    .saquitos-footer-sections {
        justify-content: space-evenly;
    }
    #colophon .saquitos-footer-sections > div {
        width: 30%;
    }

    /* TEJIDOS */

}

@media (min-width: 1000px) {
    .tejidos-inner-buttons button {
        width: 24%;
    }
    .tejidos-inner-buttons {
        margin-bottom: 40px;
        margin-top: 40px;
    }
    .tejidos-list li {
        margin-bottom: 3%;
    }

    /* about us */
    .contained.spacing.about-titisaquitos section div div img {
        float: left;
    }
}

@media (min-width: 1200px) {
    .site-header {
        display: grid;
        grid-template-areas: "logo menu extras"
        "header-search-box header-search-box header-search-box"
        "cart cart cart";
        justify-content: space-between;
    }
    .storefront-full-width-content.woocommerce-checkout .entry-header,
    .storefront-full-width-content.woocommerce-account .entry-header{
        height: 200px;
        padding: 4% 0;
    }


    /* MENU CART */
    .woocommerce-active .site-header .site-header-cart {
        width: 50%;
        justify-self: end;
    }

    h2.section-title {
        font-size: 43px;
    }
    .spacing {
        padding: 50px;
        margin: 0 auto 50px;
    }
    p {
        font-size: 17px;
        font-weight: 200;
        color: #333;
    }

    /* EMPLEO */
    .empleo-calor, .empleo-frio {
        align-items: flex-start;
    }

    .empleo h3 {
        font-size: 30px;
    }

    .empleo-wrap {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        max-width: 1540px;
        margin: 0 auto;
        flex-direction: column;
    }

    .empleo-calor {
        width: 100%;
        border: none;
    }

    .empleo-frio {
        border: none;
    }

    /* BENEFICIOS */

    .beneficios .expansion-container .expansion-visible h3 {
        font-size: 30px;
    }

    header.entry-header {
        height: 450px;
    }

    header.entry-header h1 {
        font-size: 130px;
    }


    .hero-image__content-wrapper img {
        max-width: 60%;
    }

    .hero-title {
        font-size: 50px;
    }

    .hero-image__text .price {
        font-size: 40px;
    }

    .hero-image__text button {
        font-size: 26px;
    }

    .home-categories-cards ul li {
        max-width: 29%;
    }



    /* TEJIDOS PAGE */
    .tejidos-list h3 {
        text-align: left;
        font-size: 40px;
        margin-left: 30px;

    }
    .tejidos-list li {
        width: 15%;
    }

    .featured-tejido {
        flex-direction: row;
        justify-content: space-between;
    }

    .tejidos-feat-img {
        display: block;
        border-radius: 30px;
        overflow: hidden;
        width: 40%;
    }

    .feat-tejido-text {
        width: 55%;
    }

    .hero-title {
        font-size: 50px;
    }

    /* contact page */
    .contact-page .contact-info {
        width: 29%;
    }

    .contact-page .contact-form {
        width: 60%;
    }

    /* FAQ */
     .contained.spacing h2 {
        text-align: left;
    }

     /* DISTRIBUIDORES */
    .page-template-template-distribuidores-php section.spacing {
        padding: 50px 0;
    }


}

@media (orientation: landscape ) {
    .tejido-page-modal .tpm-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1000px;
    }
    .tejido-page-modal .tpm-wrapper .tmp-image-wrap .tmp-content {
        width: 100%;
    }
    .tejido-page-modal .tmp-content div {
        width: 100%;
    }
    .tejido-page-modal .tpm-wrapper .tmp-content {
        width: 50%;
    }
    .tejido-page-modal .tpm-wrapper .tmp-image-wrap {
        width: 50%;
    }
    .tejido-page-modal .tpm-wrapper .tmp-image-wrap img{
        max-width: 100% !important;
    }
}