/* TESTOVACÍ SÚBOR SHOPTET */

html, body {
    background-color: #ffffff !important;
}

/* Vytvorenie presného štvorca pre šípky */
.carousel-control.left::before,
.carousel-control.right::before {
    background-color: #00967d !important; /* Farba pozadia */
    border-radius: 0 !important;          /* Ostré rohy (štvorec) */
    width: 40px !important;               /* Šírka štvorca */
    height: 40px !important;              /* Výška štvorca */
    line-height: 40px !important;         /* Vycentrovanie šípky do stredu */
    text-align: center !important;
    display: inline-block !important;
    opacity: 1 !important;
}

/* Vycentrovanie štvorcov na výšku bannera a zrušenie pozadia bočných pásov */
.carousel-control.left,
.carousel-control.right {
    background: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Efekt pri prejdení myšou (hover) */
.carousel-control.left:hover::before,
.carousel-control.right:hover::before {
    background-color: #007a65 !important;
}
/* ==========================================================
   SHOPTET – HERO CAROUSEL
   Banner: Rozmaznávame vaše nohy
   ========================================================== */


/* ==========================================================
   1. CAROUSEL
   ========================================================== */

#carousel {
    position: relative;
}


/* ==========================================================
   2. ZRUŠENIE POSÚVACIEHO EFEKTU SHOPTETU
   ----------------------------------------------------------
   Žiadny pohyb:
   - zdola
   - zhora
   - zľava
   - sprava
   ========================================================== */

#carousel .carousel-inner > .item {
    transition: none !important;
    -webkit-transition: none !important;

    transform: none !important;
    -webkit-transform: none !important;
}


/* ==========================================================
   3. ZRUŠENIE POZÍCIOVANIA PRECHODU
   ========================================================== */

#carousel .carousel-inner > .item.next,
#carousel .carousel-inner > .item.prev,
#carousel .carousel-inner > .item.active,
#carousel .carousel-inner > .item.left,
#carousel .carousel-inner > .item.right,
#carousel .carousel-inner > .active.left,
#carousel .carousel-inner > .active.right,
#carousel .carousel-inner > .next.left,
#carousel .carousel-inner > .prev.right {
    transform: none !important;
    -webkit-transform: none !important;

    transition: none !important;
    -webkit-transition: none !important;
}


/* ==========================================================
   4. ZÁKLAD SLIDU
   ========================================================== */

#carousel .item {
    position: relative;

    animation: none !important;
}


/* ==========================================================
   5. HERO OBRÁZOK
   ========================================================== */

#carousel .hero-slide img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    animation: none !important;
    transition: none !important;
}


/* ==========================================================
   6. TEXTOVÁ VRSTVA
   ========================================================== */

#carousel .hero-content {
    position: absolute;

    left: 7%;
    top: 50%;

    transform: translateY(-50%) !important;

    width: 86%;
    max-width: 950px;

    z-index: 10;

    margin: 0;
    padding: 0;

    text-align: left;

    opacity: 1 !important;
    visibility: visible !important;

    animation: none !important;
    transition: none !important;
}


/* ==========================================================
   7. VŠETKY PRVKY TEXTU
   ========================================================== */

#carousel .hero-content *,
#carousel .hero-content *::before,
#carousel .hero-content *::after {
    animation: none !important;
    transition: none !important;
}


/* ==========================================================
   8. HLAVNÝ NADPIS
   ========================================================== */

#carousel .hero-content h2 {
    margin: 0 0 18px;
    padding: 0;

    font-size: 64px;
    line-height: 0.95;

    font-weight: 800;

    text-transform: uppercase;

    color: #ffffff;

    max-width: 900px;
}


/* ==========================================================
   9. POPIS
   ========================================================== */

#carousel .hero-content p {
    margin: 0 0 24px;
    padding: 0;

    font-size: 18px;
    line-height: 1.4;

    color: #ffffff;
}


/* ==========================================================
   10. TLAČIDLO
   ========================================================== */

#carousel .hero-button {
    display: inline-block;

    margin: 0;
    padding: 14px 26px;

    background: #ffffff;
    color: #000000;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition: none !important;
}


/* ==========================================================
   11. TLAČIDLO – HOVER
   ========================================================== */

#carousel .hero-button:hover {
    color: #000000;

    text-decoration: none;

    opacity: 0.85;
}


/* ==========================================================
   12. TABLET
   ========================================================== */

@media (max-width: 991px) {

    #carousel .hero-content {
        left: 6%;

        width: 88%;
    }

    #carousel .hero-content h2 {
        font-size: 48px;
        line-height: 1;
    }

    #carousel .hero-content p {
        font-size: 16px;
    }

}


/* ==========================================================
   13. MOBIL
   ========================================================== */

@media (max-width: 767px) {

    #carousel .hero-content {
        left: 20px;
        right: 20px;

        width: auto;
        max-width: none;
    }

    #carousel .hero-content h2 {
        margin: 0 0 10px;

        font-size: 30px;
        line-height: 1;

        max-width: 95%;
    }

    #carousel .hero-content p {
        margin: 0 0 14px;

        font-size: 14px;
        line-height: 1.3;
    }

    #carousel .hero-button {
        padding: 10px 17px;

        font-size: 13px;
    }

}