@import './font-families.css';

:root {
    --bodyBg: #f5f7f7;
    --headerBg: rgba(0,0,0,.9); /**#000407**/;
    --navBg: transparent;
    --asideBg: #e09e50;
    --footerBg: #2d3e4e;
    --mainBg: transparent;
}

body::-webkit-scrollbar {
    width: 1em;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background: rgb(56, 56, 56);
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(34, 33, 33);
    outline: 1px solid rgb(49, 49, 49);
}

body {
    background: var(--bodyBg);
    max-width: 100vw;
}

.progress {
    height: 0.5rem !important;
    background: green;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index:9999;
    transform-origin: 0 50%;
    animation: scaleProgress auto linear;
    animation-timeline: scroll(root);
  }
  
  @keyframes scaleProgress {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }
  
/** CUSTOM GLOBAL **/
.reveal {
    transform: translateY(150px);
    opacity: 0;
    transition: all 2s ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

/** POPUP DISCLAIMER*/
.iAgreePopup .popupContainer .popupContent {
    background: transparent;
    text-align: center;
    margin-top: 100px;
}

.iAgreePopup .popupContainer .popupChoices .yesNo {
    float: none;
    text-align: center;
}

/** MINI CART FLOATING BUTTON */
#mini-cart-button {
    background: #358341;
    color: lightgreen;
    padding: 20px;
    border-radius: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    position: fixed;
    /*top: calc(50% - 30px);*/
    top: 85px;
    right: 0;
    z-index: 9999;
    /* transition: all 300ms 100ms ease-in; */
    transition: all 1s 50ms ease-in-out;

}

#mini-cart-button:hover {
    cursor: pointer;
}

/** MINI CART **/
#frontpage-minicart {
    position: fixed;
    height: 100vh;
    min-width: 650px;
    background: #c6c5c5;
    border-left: 5px solid green;
    width: auto;
    z-index: 9999;
    right: -650px;
    padding: 10px;
    color: #000;
    transition: all 1s 50ms ease-in-out;
}

#frontpage-minicart ul {
    list-style: none;
    padding: 0;
}

#frontpage-minicart ul li {
    padding: 10px;
    background: #f2f2f2;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

#frontpage-minicart ul li:nth-child(odd) {
    background: #d8d8d8;
}

#frontpage-minicart a {
    color: #3e8500;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'SulphurPoint-Regular';
}

#frontpage-minicart li > a:nth-child(2) {
    flex: 1;
}

#frontpage-minicart img {
    max-width: 100px;
    width: 100%;
    height: auto;
    border-radius: 25px;
    margin-right: 20px; 
}

#frontpage-minicart #img-bg {
    width: 100%;
    max-width: 100%;
    position: fixed;
    z-index: 9999;
    bottom: 0;
}

#frontpage-minicart .woocommerce-mini-cart__total, #frontpage-minicart .woocommerce-mini-cart__buttons {
    text-align: center;
}

/** WELCOME SECTION **/
#welcome {
    background: grey;
    /* background-size: contain; */
    width: 100vw;
    height: 100vh;
    color: white;
    text-align: center;
    vertical-align: center;
    position: relative;
    z-index: 9997;
    animation: 2700ms linear infinite alternate colorGlowAnimation;
    text-align: center;
}

#welcome img {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    padding: 50px;
    width: 300px;
    position: relative;
    top: 40%;
    animation: 1s ease-in-out infinite alternate zoomAnimation;
}

#welcome video {
    max-width: 100vw;
    max-height: 100vh;
}

/** BACKGROUND **/
#background {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    padding: 0 !important;
}

#background video {
    object-fit: contain;
}

.modal {
    background: black;
}

.modal-header { 
    background: #171717;
    color: white;
}


.modal-header img{ 
    max-height: 70px;
    width: auto;
    order: 1;
    background-color: white;
}

.modal-header .modal-title { 
    flex: 1;
    order: 2;
    text-align: center;
    font-family: "Chalmone-Regular";
}

.woocommerce-products-wizard .nav-tabs .active button {
    background-color: #2e312f !important;
    color: white !important;
}

.modal-dialog-scrollable .modal-content {
    /* border-color: white; */
    /* color: white; */
}

.modal.show .modal-dialog {
    transform: none;
    max-width: 98%;
}

.woocommerce-products-wizard .nav-tabs .nav-link,
.modal-content p {
    /* color: white */
}

.woocommerce div.product .product_title {
    font-size: 2rem;
}

.woocommerce div.product div.images.woocommerce-product-gallery {
    box-shadow: 0 0 10px #979494;
    padding: 50px;
}

    .woocommerce div.product {
        margin-bottom: 0;
        position: relative;
        margin: 50px;}

.woocommerce span.onsale {
    top: 5em;
    left: 5em;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    margin: 5px;
}

.modal-header {
    border-radius: 0;
}

.modal-dialog-scrollable .modal-content {
    border-radius: 0;
}

.pswp {
    z-index: 9999;
}

.btn-close {
    background-color: white !important;
    padding: 10px;
    order: 3;
}

.btn-close:hover {
    color: green !important;
}

/** MAIN SLIDER **/
#main-slider {
    width: 100%;
    font-family: "SulphurPoint-Regular" !important;
}

#main-slider img {
    width: 100vw;
    position: absolute;
    z-index: 9997;
}

#main-slider .n2-ss-slider-4 {
    max-height: calc(100vh - 163px);
}

.n2-ss-slider .n2-ss-slide-background, .n2-ss-slider .n2-ss-slide-background * {
    max-height: 400px;
}

/** #n2-ss-2 > div > div.n2-ss-slider-1.n2_ss__touch_element.n2-ow > div > div > div.n2-ss-slider-4.n2-ow **/

#main-slider span {
    font-size: 3rem !important;
    font-family: "SulphurPoint-Regular" !important;
    font-style: normal !important;
}

#main-slider span:nth-child(1) {
    font-family: "Chalmone-Regular" !important;
    text-shadow: 0 0 5px rgb(0,0,0) !important;
    color: #64ce60 !important;
}

#main-slider span + span {
    font-size: 1.7rem !important;
}

#main-slider li::marker {
    content: "";
}

.n2-ss-slider .n2-ss-slide-background, .n2-ss-slider .n2-ss-slide-background * {
    max-height: 100vh;
}

/** HEADER SECTION (header, logotype, search, nav) **/
#header {
    display: grid;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 9998;
    width: 100%;
    padding-top: 20px;
    transition: all 1s ease-in-out;
    background: rgba(0,0,0,.9);
}

#header div.logotype {
    grid-area: logotype;
    justify-self: center;
    text-align: center;
    /* background: rgba(0,0,0,0.5); */
    border-radius: 50%;
    padding: 10px;
    transform: translate(0, -300px);
    transition: all 1s 500ms ease-in-out
}

#header div.logotype img {
    width: 100%;
    height: 100%;
    transition: all 1s ease-in-out;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
}

#header div.logotype img:hover {
    background: rgba(255, 255, 255, 1);
}

#header div.header-search-form {
    grid-area: search;
    padding: 20px;
    text-align: center;
    transform: translate(-200%);
    transition: all 2s 500ms ease-in-out
}


#header div.header-search-form input {
    border-radius: 20px;
    padding: 10px;
}

/** NAV **/
nav {
    background: var(--navBg);
}

nav#navigation {
    grid-area: secondary-menu;
    background: transparent;
    font-family: "Chalmone-Regular";
    transform: translate(200%);
    transition: all 2s 500ms ease-in-out;
    display: flex;
    justify-self: center;
    gap: 50px;
}

nav#navigation .dropdown-menu span {
    color: #e09e50;
}

nav#navigation .dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 20px;
    color: wheat;
}


nav#navigation .dropdown-menu a:hover {
    background: #d8d8d8;
    background:#358341;
    color: white;
}

nav#navigation button {
    display: flex;
    gap: 10px;
    vertical-align: middle;
    align-items: center;
    box-shadow: 0 0 20px #2eb837;
    background: #358341;
}

nav#navigation button span {
    color: lightgreen;
}

nav#navigation button:hover span {
    color: rgb(103, 230, 103);
    
}

nav#navigation > ul {
    display: flex;
}

nav#navigation .dropdown-menu.show {
    background: #f2f2f2;
    background: #616161;
}

nav#navigation > ul li a {
    color: #00a473;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px;
    transition: all 0.4s ease-in-out;
    font-size: 1rem;
    display: flex;
    gap: 10px;
    align-items: center;
}

nav#navigation > ul li a:hover {
    border: 1px solid #fff;
    color: #fff;
}

nav#navigation > ul li a span {
    color: var(--asideBg);
    vertical-align: middle;
}

nav#main-menu {
    grid-area: main-menu;
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav#main-menu > ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    list-style: none;
    font-family: "Chalmone-Regular";
    margin-bottom: 0;
}

nav#main-menu > ul li {
    padding: 15px;
    cursor: pointer;
    color: #fff; /* #00a473;*/
    padding-bottom: 0;
    font-size: 0.8rem;
    padding-bottom: 1rem;
    position: relative;
}

nav#main-menu > ul li:hover {
    cursor: pointer;
    color: #fff;
    transition: all 500ms ease-in-out;
}

nav#main-menu  ul li a {
    text-decoration: none;
    font-family: 'Chalmone-Regular';
    font-size: 0.9rem;
}

nav#main-menu > ul li span {
    color: greenyellow;
    font-weight: bold;
    margin-right: 5px;
}

/** SUB MENUS */
body header #main-sub-menus {
    display: flex;
    flex-direction: column;
    align-items: center;
    display: none;
    background: rgba(53, 131, 65, 0.9);
    background:rgba( 0,0,0,0.9);
    background: #191919;
    position: fixed;
    top: 183px;
    color: #fff;
    width: 100%;
    border-top: 1px solid rgba(53, 131, 65, 0.9);
    border-bottom: 1px solid rgba(53, 131, 65, 0.9);

}

body header #main-sub-menus > ul {
    color: #00a473;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 10px;
    list-style: none;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
}

body #main-sub-menus li {
    color: #00a473 !important;
    flex: 1;
    min-height: 100px;
    text-transform: uppercase;
    padding: 5px;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

body #main-sub-menus ul li:nth-child(1) {
    grid-column: span 2;
}

body #main-sub-menus ul li:nth-child(2) {
    grid-row: span 2;
}


body #main-sub-menus ul li:nth-child(3) {
    grid-column: span 1;
    grid-row: span 3;
}

body #main-sub-menus ul li:nth-child(4) {
    grid-column: span 1;
    grid-row: span 2;

}

body #main-sub-menus ul li:nth-child(5) {
    grid-row: span 3;
}

body #main-sub-menus ul li:nth-child(6) {
    grid-column: span 1;
    grid-row: span 1;
}

body #main-sub-menus ul li:nth-child(8) {
    grid-column: span 1;
    grid-row: span 4;
}

body #main-sub-menus li img {
    position: absolute;
    z-index: -1;
    border-radius: 50px;
    max-width: none;
}

body #main-sub-menus li a {
    color: #fff;
    display: flex;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: 10px;
}

body #main-sub-menus li:hover {
    background: rgba( 0,0,0,0.8);
}

body #main-sub-menus li a:hover {
    color: #90ee90;
    font-weight: bold;
    transition: all 0.8s 100ms ease-out;
    font-size: 1.4rem;
}

#main-sub-menu-secciones, 
#main-sub-menu-grow, 
#main-sub-menu-smoke {
    display: none;
}

/** BREADCUMB */
.woocommerce .woocommerce-breadcrumb li {
    color: white;
}

.woocommerce .woocommerce-breadcrumb a {
    color: wheat;
    grid-column: 1 / -1;
}


/** MAIN *-*/
.main-wrapper {
    position: relative;
    z-index: 9997;
    overflow: hidden;
}

section.container, article.content {
    background: var(--mainBg);
}

article > section {
    min-height: 100vh;
    padding-bottom: 25px;
}

article > section h2 {
    margin-top: 40px;
    text-transform: uppercase;
    text-shadow: 0 0 10px grey;
}

article > section:nth-child(even) {
    background: #f2f2f2;
}

article > section:nth-child(odd) {
    background: #fff;
}

article > section:nth-child(2) header {
    background: transparent;
}

article > section header h1 {
    margin-top: 25px;
}

article > section header h2 {
    margin-top: 40px;
    color: #fff;

}

/** FRASES **/
#frase {
    min-height: auto;
    text-align: center;
    background:rgba( 0,0,0,0.9); /* rgb(37 37 37)*/
    color: #fff;
    font-size: 3rem;
    padding:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 50px;
    font-family: "Chalmone-Regular";
}

#frase p {
    max-width: 65%;
    flex: 1;
    width: 100%;
}

#frase .brand {
    color: #878787;
    font-family: Nature-Beauty-Regular;
    text-align: right;
}

/** POLLS / ENCUESTAS **/
.ays-poll-main p {
    color: black !important;
    font-family: 'SulphurPoint-Regular' !important;
}

.ays-poll-answers p {
    font-weight: bold;
}

.apm-choosing .ays-poll-each-image-grid {
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius:  10px;
}

/** SECCION SEMILLAS **/

#semillas {
    min-height: auto;
    color: black;
}

#semillas {
    padding: 0;
}

#semillas h2 {
    color: #358341;
    text-align: center;
    font-family: 'Chalmone-Regular';
    margin: 0 auto;
    padding: 20px;
}

#last-seeds {
    display: flex;
    flex-direction: row;
    background: #fff;
    background: #2e312f;
    background: #306642;
    padding: 20px 10px;
    box-shadow: 0 0 15px #d8d8d8;
    border-top: 5px solid #358341;
    border-bottom: 5px solid #358341;
}

#last-seeds .seed {
    flex: 1;
    text-align: center;
    display: flex;
    padding: 10px;
    flex: 1;
    font-family: 'SulphurPoint-Regular';

}

#last-seeds .seed > div {
    display: flex;
    flex-direction: column;
}

#last-seeds .seed .producto-botones {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#last-seeds .seed .producto-botones a:nth-child(1) {
    width: fit-content;
}

#last-seeds .seed:nth-child(2) {
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

#last-seeds .seed p {
    text-align: center;
    color: #fff;
    margin-top: 20px;
    color: #85ff84;
    font-weight: bold;
    flex: 1;
    font-size: 1.1rem;
}

#last-seeds .seed img {
    border-radius: 100%;
}

/** SECCION ESQUEJES **/
#esquejes {
    min-height: auto;
    color: black;
}

#esquejes h2 {
    color: #358341;
    text-align: center;
    font-family: 'Chalmone-Regular';
    margin: 0 auto;
    padding: 20px;
}

#last-cuttings {
    display: flex;
    flex-direction: row;
    background: #f2f2f2;
    background: #2e312f;
    box-shadow: 0 0 15px #d8d8d8;
    padding: 20px 10px;
    border-top: 5px solid #358341;
    border-bottom: 5px solid #358341;
}

#last-cuttings .cutting {
    flex: 1;
    text-align: center;
    display: flex;
    padding: 10px;
    font-family: 'SulphurPoint-Regular';
}

#last-cuttings .cutting > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#last-cuttings .cutting .producto-botones {
    display: flex;
    flex-direction: column;
}


#last-cuttings .cutting .producto-botones a:nth-child(1) {
    width: fit-content;
}

#last-cuttings .cutting:nth-child(2) {
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

#last-cuttings .cutting p {
    text-align: center;
    color: #fff;
    margin-top: 20px;
    color: #85ff84;
    font-weight: bold;
    flex: 1;
    font-size: 1.1rem;
}

#last-cuttings .cutting img {
    border-radius: 100%;
}

/** SECTION TOUR CULTIVO Y CALCULADORA INDOOR **/
#tour-section {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr;
    grid-template-rows: min-content;
    grid-auto-rows: minmax(400px, 100%);
    grid-template-areas:
        "cabezera cabezera cabezera cabezera"
        ". tour . calculadora";
    gap: 10px;
    background: transparent;
    margin-top: 40px;
    transition: 300ms;
}

#tour-section > div p {
    background: none;
}

#tour-section:has(#tour:hover) {
    grid-template-columns:  1fr 2fr 2fr 1fr;
}

/* #tour-section:has(.image1:hover) {
    grid-template-columns: 2fr 1fr 1fr 2fr;
} */

#tour-section:has(#calculadora-indoor:hover) {
    grid-template-columns: 2fr 1fr 1fr 2fr;
}

/* #tour-section:has(.image2:hover) {
    grid-template-columns: 1fr 2fr 2fr 1fr;
} */

#tour-section > div {
    padding: 10px;
    border-radius: 10px;
    font-family: SulphurPoint-Regular;
    cursor: pointer;
    transition: all 1s ease-in-out;
    grid-row: 100px;
    background: rgba( 0,0,0,0.9);
    font-size: 1.3rem;
    max-height: 550px;
}

#tour-section header {
    grid-area: cabezera;
    background: transparent;
    text-align: center;
    grid-column: 1/-1;
}

#tour-section h2 {
    font-family: SulphurPoint-Regular;
    font-family: WeedFace-Regular;
    font-family: SeaWeed-Regular;
    color: rgb(63, 158, 63);
    color: rgb(72 73 72);
    font-size: 6rem;
    margin-top: 0;
    margin-bottom: 10px;
}

#tour-section h3 {
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transition: all 1s 100ms ease-in-out;
    text-align: center;
}

#tour-section #tour:hover .tour-description,
#tour-section #calculadora-indoor:hover .calculadora-description {
    color: #000;
    display: block;
}

#tour-section #tour:hover h3,
#tour-section #calculadora-indoor:hover h3 {
    writing-mode: inherit;
    border-bottom: 1px solid #f2f2f2;
}

.image1, .image2 {
    background-attachment: fixed !important;
}

.image1 {
    background-image: url('../images/indoor.jpg') !important;
}

.image2 {
    background-image: url('../images/outdoor.webp') !important;
}

#tour {
    grid-area: tour;
    color: rgb(8 179 226);
    max-height: 550px;
    overflow: hidden;
}

#tour:hover {
    /* background: rgba(255, 255, 255, 0.9);
    background: rgb(42 159 76 / 90%);
    background: rgb(8 179 226); */
    background: rgb(4 115 145);
    color: #000;
}

#tour .tour-description {
    display: none;
}

#calculadora-indoor {
    grid-area: "calculadora";
    color: #ffed84;
    max-height: 550px;
    overflow: hidden;
}

#calculadora-indoor .calculadora-description {
    display: none;
}

#calculadora-indoor:hover {
    background: #ffed84;
    background: #af6402;
}


/** EL JARDIN DEL PERRI **/
#eljardindelperri {
    min-height: 100px;
    padding: 0;
    /* border-top: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px; */
    max-width: auto;
    cursor: url(../images/weedicon64rotate.webp) 32 50, auto;
    margin: 0;
    background: rgba( 0,0,0,0.9);   
    padding-top: 20px;
    padding-bottom: 0;
    background: rgb(25,25,25);
    background: -moz-linear-gradient(0deg, rgba(25,25,25,1) 9%, rgba(206,208,215,1) 53%, rgba(247,247,255,1) 94%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(25,25,25,1) 9%, rgba(206,208,215,1) 53%, rgba(247,247,255,1) 94%, rgba(255,255,255,1) 100%);
    background: linear-gradient(0deg, rgba(25,25,25,1) 9%, rgba(206,208,215,1) 53%, rgba(247,247,255,1) 94%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#191919",endColorstr="#ffffff",GradientType=1);
}

#eljardindelperri > div {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0;
    /* box-shadow: 0 0 5px grey; */
    overflow: hidden;
}

#eljardindelperri > .container > header:nth-child(1) {
    text-align: left;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
    background: #191919;
    /* background: #42713f;
    background: #69d363; */
    padding-top: 40px;
    opacity: 1;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

#eljardindelperri h2 {
    color: #64cd64;
    /*background: rgba( 0,0,0,0.7);*/
    text-shadow: none;
    font-family: Marijuana-Regular;
    margin-top: 0;
    font-size: 8rem;
    letter-spacing: 3px;
    text-shadow: 0 0 25px green;
}

#eljardindelperri h2 span {
    font-size: 4rem;
    color: #168f30;
}

#eljardindelperri h3 {
    color: rgb(59 175 60);
}

#eljardindelperri h2 a {
    color: #64cd64;
    /*color: #003900;*/
    text-decoration: none;
}


#eljardindelperri h2 a:hover {
    color: rgb(107, 228, 109);
}

#eljardindelperri:hover {
    transform: translateY(0);
}

#eljardindelperri #secciones {
    background: #d8d8d8 url('../images/eljardindelperri4.png') right top no-repeat;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    padding-top: 10px;
}

#eljardindelperri #secciones img {
    max-width: 150px;
    mix-blend-mode: luminosity;
}

#eljardindelperri #secciones ul {
    display: flex;
    gap: 10px;
    list-style: none;
    flex-wrap: wrap;
    padding-left: 0;
    padding: 0 10px;
}

#eljardindelperri #secciones ul li {
    background: rgba( 0,0,0,0.7);
    flex: 1;
    text-align: center;
    min-height: 180px;
    color: #fff;
    min-width: 48%;
    gap: 10px;
    display: flex;
    text-align: center;
    align-content: center;
    align-items: center;
    padding: 10px 50px;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

#eljardindelperri #secciones ul li a {
    color: #000;
    font-size: 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Chalmone-Regular";
    transition: all 500ms 100ms ease-in-out;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.6);
    width: 100%;
}


#eljardindelperri #secciones ul li:hover a {
    color: rgb(16 60 16);
}

#eljardindelperri #secciones ul li img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100% !important;
}

#eljardindelperri #secciones ul li:hover img {
    mix-blend-mode: normal;
    transform: scale(1.3);
}

#eljardindelperri #secciones ul li:nth-child(even) {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}


#eljardindelperri #secciones ul li:nth-child(odd) {
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
}

/** SECCION PRODUCTOS DESTACADOS **/
#productos-destacados {
    background: linear-gradient(0deg, rgba(25,25,25,1) 9%, #d8d8d8 100%);
    max-width: 100vw;
    padding: 20px 0;
    color: #fff;
    grid-template-columns: 2fr;
    grid-template-rows: auto;
    grid-auto-rows: min-content;
    min-height: auto;
    padding: 0;
    display: none;
    font-family: 'SulphurPoint-Regular';
    overflow: hidden;

}

#eljardindelperri #productos-destacados > header {
    background: rgb(25 25 25);
    background: transparent;
    padding: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    text-align: center;
}

#eljardindelperri #productos-destacados h2 {
    border-bottom: none;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    margin-top: 30px;
    flex: 1;
    color: black;
    font-size: 3rem;
    font-family: 'Chalmone-Regular';
    text-shadow: none;
}

#productos-destacados > div {
    background: transparent; /*#3e7007; /*#07bc86*/;
    padding: 10px;
}

#productos-destacados p {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 100vw;;
}

#productos {
    display: flex;
    gap: 10px;
    animation-name: infiniteScroll;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 1;
}

#productos:hover {
    animation-play-state: paused;
}

.producto {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: minmax(100px, 100px) minmax(200px, 200px) minmax(100px, 100px);
    min-width: 300px;
    text-align: center;
    background: radial-gradient(#000, transparent);
    background: rgba(255, 255, 255, 0.3);
    background: #555151;
    flex-direction: column;
    border-radius: 25px;
    color: #fff;
    overflow: hidden;
    transition: all 1s 1s ease-in-out;
    position: relative;
}

.producto:hover {
    background: rgba( 0,0,0,0.7);
    transition: all 1s 200ms ease-in-out;
    color: #fff;
}

.producto .nombre {
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgb(31, 88, 31);
    background: rgb(78 151 78);
    background: rgb(10 10 10);
}

.producto-imagen {
    padding: 20px;
    text-align: center;
    position: relative;
}

.producto-imagen a {
    display: none;
    color: rgb(70, 233, 70);
    position: absolute;
    top: calc(15%);
    left: calc(50% - 20px);
    z-index: 9999;
    transform: translateY(-30px);
    background: rgba( 0,0,0,0.6);
    padding: 10px;
    text-decoration: none;
    transition: all 1s 200ms ease-in-out;
}


.producto-imagen:hover a {
    display: block;
    transform: translateY(30px);
    transition: all 1s 200ms ease-in-out;
}


.producto-imagen a:hover {
    color: rgb(35, 160, 35);
    border: #fff;
    background: black;
    transition: all 1s 200ms ease-in-out;

}


.producto img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    transition: all 1s 200ms ease-in-out;
    border-radius: 100%;
}

.producto:hover img, .producto:hover img:hover {
    transform: scale(0.5) translateY(-100px);
    /* border-radius: 100%; */
}
.producto .producto-description {
    text-align: center;
    position: relative;
    transition: all 1s 1s ease-in-out;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    position:absolute;
    bottom: -100px;
    width: 100%;
}

.producto:hover .producto-description {
    transition: all 1s 100ms ease-in-out;
    transform: translateY(110);
    bottom: 110px;
}

.producto-botones {
    padding-top: 5px;
    display: flex;
    gap: 10px;
}

.producto-botones .price {
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    font-weight: bold;
    color: rgb(48, 185, 48);
    color: white;
}

.producto-botones .price > span {
    color: rgb(48, 185, 48);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.producto-botones .btn-primary {
    background: transparent;
}

.producto-botones a:nth-child(1) {
    background: #679b67;
    display: flex;
    align-items: center;
}


.producto-botones a:nth-child(1):hover {
    background: lightgreen;
    color: #000;
}

.producto-botones a:nth-child(1):hover span {
    color: #000;
}

/** SECCION SPONSORS */
#sponsors {
    height: auto;
    background: white;
    margin-top: 0;
    min-height: auto;
    padding-bottom: 0;
    border: 0;
}

#sponsors ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 10px;
    background: #191919;
    padding: 20px;
    min-height: 200px;
    align-items: center;
    margin-bottom: 0;
}

#sponsors ul li {
    flex-grow: 1;
    text-align: center;
}

#sponsors ul li img {
    height: 100px;
}

/** POSTS (noticias, tutoriales, quienes somos) **/
#posts {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    max-width: 100%;
    padding: 0;
    background: linear-gradient(0deg, rgb(41 50 61) 9%, #191919 100%);
    color: #fff;
}

#posts > article {
    padding: 50px 25px;
}


#posts > article > section > header {
    display: grid;
    align-items: center;
    grid-gap: 10px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #d8d8d8;
}   


#posts > article > section > div {
    padding-top: 20px;
}

/** LAST NEWS **/
#last-news {
    background: transparent;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto; /*300px, min-content);*/
    grid-gap: 10px;
    height: min-content;
}

#last-news > header {
    grid-column: 1;
    font-family: "Chalmone-Regular";
    text-align: center;
}

#last-news h2 {
}

#last-news #news {
    grid-column: 2 / -1;
    display: flex;
    gap: 10px;
}

#last-news .new {
    border: 3px solid #000;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: auto;
    transition: all 1s 200ms ease-in;
    flex: 1;
    box-shadow: 0 0 50px #000;
    background: #1B423F;
    position: relative;
}


#last-news .new > * {
    padding: 10px;
}

#last-news .new header {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

#last-news > header > img {
    border-radius: 100%;
    max-width: 230px;
    height: 100%;
    max-height: 220px;
}


#last-news .new header > * {
    flex: 0;
}

#last-news .new footer {
    text-align: center;
    background: #fff;
    color: #000;
    font-size: 1.5rem;
}

#last-news .new footer a {
    text-decoration: none;
}

#last-news .new:hover {

}

#last-news .new span {
    font-weight: bold;
}

#last-news .new .new-date {
    grid-column: 1 / 3;
}

#last-news .new .new-category {
    grid-column: 3 / -1;
    text-align: left;
}

#last-news .new .new-image {
    grid-column: 1;
    text-align: center;
}

#last-news .new .new-image img {
    border-radius: 15px;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#last-news .new .new-title {
    grid-column: 2 / -1;
    font-size: 1.3rem;
    text-align: center;
}



/** LAST TUTORIALS **/
#last-tutorials {
    background: transparent;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    grid-gap: 10px;
    height: min-content;
    min-height: auto;
}

#last-tutorials > header {
    grid-column: -2/-1;
    font-family: "Chalmone-Regular";
    text-align: center;
}

#last-tutorials > header > img {
    border-radius: 100%;
}

#last-tutorials h2 {
}

#last-tutorials #tutorials {
    grid-column: 1/3;
    display: flex;
    gap: 10px;
}

#last-tutorials .tutorial {
    border: 3px solid #000;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: auto;
    transition: all 1s 200ms ease-in;
    flex: 1;
    box-shadow: 0 0 50px #000;
    background: #1B423F;
    position: relative;
}


#last-tutorials .tutorial > * {
    padding: 10px;
}

#last-tutorials .tutorial header {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

#last-tutorials .tutorial header > * {
    flex: 0;
}

#last-tutorials .tutorial footer {
    text-align: center;
    background: #fff;
    color: #000;
    font-size: 1.5rem;
}

#last-tutorials .tutorial footer a {
    text-decoration: none;
}

#last-tutorials .tutorial:hover {

}

#last-tutorials .tutorial span {
    font-weight: bold;
}

#last-tutorials .tutorial .tutorial-date {
    grid-column: 1 / 3;
}

#last-tutorials .tutorial .tutorial-category {
    grid-column: 3 / -1;
    text-align: left;
}

#last-tutorials .tutorial .tutorial-image {
    grid-column: 1;
    text-align: center;
}

#last-tutorials .tutorial .tutorial-image img {
    border-radius: 15px;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#last-tutorials .tutorial .tutorial-title {
    grid-column: 2 / -1;
    font-size: 1.3rem;
    text-align: center;
}

/** QUIENES SOMOS **/
#quienes-somos {
    grid-column: 1 / -1;
    z-index: 2;
    color: #fff;
    height: auto;
    text-align: left;
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    background: black;
}

#quienes-somos header {
    grid-column: 1 / -1;
}

#quienes-somos h1 {
    padding: 50px;
    text-align: left;
    text-transform: uppercase;
    /* color: #358341; */
    font-family: 'Chalmone-Regular';
}

#quienes-somos video {
    position: absolute;
    z-index: -1;
    width: 100%;
}

#quienes-somos p {
    color:#000;
    font-size: 1.3rem;
    padding: 0;
    text-align: left;
    padding-left: 50px;
    padding-right: 50px;
    font-family: 'SulphurPoint-Regular';
}


#quienes-somos div:nth-child(3) {
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    padding-top: 15px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

#quienes-somos div:nth-child(4) {
    text-align: center;
}

#quienes-somos iframe {
    border-radius: 15px;
}

#contactanos {
    margin-top: 20px;
    margin-bottom: 20px;
}

#contactanos ul {
    list-style: none;
    font-size: 1.1rem;
}
/** ASIDE **/
aside {
    background: var(--asideBg);
    display: none;
}

/** FOOTER **/

main > footer {
    background: var(--footerBg);
    background: #000  url(../images/marco-hojas-cannabis-removebg-bottom.png) no-repeat bottom center!important;
    color: #fff;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
    padding: 50px;
    background-size: contain !important;
}

.woocommerce-page #footer {
    background:#358341 !important;
}

.woocommerce-page h3, .woocommerce-page h1 {
    color: lightgreen;
    font-family: "Chalmone-Regular"
}

.woocommerce-page h1 {
    color: #000;
}

.woocommerce-page .main-header.woocommerce-products-header {
    position: relative;
    padding-bottom: 40vh;
    display: flex;
    flex-direction: column;
}

.woocommerce-page .product-category {
    text-align: center;
}

.woocommerce-page > ul.products {
    background: #191919;
    padding: 10px;
}


main > footer div {
    margin-bottom: 150px;
    padding-top: 0;
    font-size: 1.3rem;
}

main > footer a {
    color: #90ee90;
    text-decoration: none;
}

main > footer h3, #contactanos {
    color: lightgreen;
    font-family: "Chalmone-Regular";
    text-align: center;
}

main > footer ul, #contactanos ul {
    font-family: 'SulphurPoint-Regular';
    font-weight: bold;
}

main > footer ul li, #contactanos ul li {
    display: flex;
    padding: 10px;
    color: #fff;
    text-align: left;
    gap: 20px;
    align-items: center;
}

main > footer ul li, #contactanos ul li span {
    color: #d8d8d8;
}

main > footer #copyright {
    text-align: center;
    grid-column: 1 / -1;
    border-radius: 50px;
}

main > footer #copyright  p {
    padding: 10px;
    margin: 0;
    font-family: 'Chalmone-Regular';
}

main > h3 {
    text-align: center;
    border-bottom: 1px solid white;
    padding-bottom: 20px;
    text-transform: uppercase;
}

main > #copyright {
    grid-column: 1 / -1;
    text-align: center;
}

main > ul {
    list-style: none;
}

main > p {
    margin-bottom: 0;
    color: #fff;
}

/** PAGE.PHP **/
body:has(#page) header{
    position: sticky;
    margin-bottom: 20px;
}

#page {
    padding: 0;
}

.page-title {
    text-align: center;;
}

#page > .container {
    max-width: 100vw !important;
}

#page .container .container {
    padding: 50px;
}

.outstanding-image {
    height: 50vh;
    max-height: 50vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-attachment: fixed !important;
    flex-direction: column;
}

.outstanding-image img{
    width: 100%;
    max-width: 100vw;
}

.term-description {
    background: #358341;
    padding: 50px;
    color: white;
    text-align: center;
    font-size: 1.6rem;
    text-transform: uppercase;
    position: absolute;
    max-width: 70%;
    align-self: center;
    bottom: 5vh;
    /* border-radius: 30px; */
}

.woocommerce .woocommerce-breadcrumb {
    background: #191919;
    padding: 10px;
    margin-bottom: 0;
}

.term-description > p {
    margin: 0;
    color: lightgreen;
    /* font-weight: bold; */
    font-family: 'SulphurPoint-Regular';
}
.main-header h1{
    background: rgba(255, 255, 255, 0.7);
    background: rgba( 0,0,0,0.8);
    color: #fff;
    border: 1px solid #fff;
    padding: 10px;
    height: min-content;
    text-transform: uppercase;
    font-family: "Chalmone-Regular";
    font-size: 4rem;
}


#page .container .container {
    font-family: 'SulphurPoint-Regular';
    font-size: 1.4rem;
}
/** SINGLE.PHP **/
body:has(#single) header{
    position: sticky;
    margin-bottom: 20px;
}

/** ARCHIVE.PHP **/
body:has(#archive) header {
    position: sticky;
    margin-bottom: 20px;
}

/** WOOCOMMERCE / TAXONOMY-PRODUCT-CAT.PHP **/
.woocommerce img, .woocommerce-page img {
    border-radius: 25px;
}

.woocommerce ul.products a:nth-child(2) {
    display: none !important;
}

.woocommerce .products .product {
    padding: 10px !important;
    transition: all 1s 200ms ease-in-out;
}

.woocommerce .products .product:hover {
    border: 1px solid #d8d8d8;
}

/** ANIMATIONS **/
@keyframes infiniteScroll {
    from {transform: translate(0)}
    to {transform: translate(calc(0px - 50%));}
}

@keyframes fadeAnimation {
    from {transform: translate(0)}
    to {transform: translate(calc(0px - 50%));}
}

@keyframes colorGlowAnimation {
    from {box-shadow:inset 0 0 15px grey; background-color: #f2f2f2; color: black;}
    30% {box-shadow: inset 0 0 500px #1919; background-color: #64cd64; color: #fff;}
    60% {box-shadow:inset 0 0 15px #fff; background-color: white; color: black;}
    80% {box-shadow: inset 0 0 500px #1919; background-color: #64cd64; color: #fff;}
    to {box-shadow: inset 0 0 500px #191919; background-color: #191919; color: #fff;}
}

@keyframes zoomAnimation {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.5);
    }
}