﻿/*.cat_slider {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.cat_slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 2.5s ease, opacity 2s ease, left 2s ease;
    left: 100%;
    opacity: 0.8;*/
    /*transform: scale(1.2);*/
    /*background-position: top;
}

.cat_slide_content {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    transition: bottom 3.5s ease;
}
.cat_slide_heading {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    transition: top 3.5s ease;
    opacity: 0;
    text-transform: uppercase;
}

    .cat_slide_content h2 {
        margin: 0;
        font-size: 2em;
        font-family: "aktiv-thin";
        text-transform: uppercase;
    }

    .cat_slide_content h3 {
        margin: 0;
        font-size: 2em;
        font-family: "aktiv-regular";
        text-transform: uppercase;
    }

    .cat_slide_content a {
        color: #fff;
        text-decoration: none;
        padding: 0px 20px;
    }

.cat_slide.active {
    transform: scale(1);
    opacity: 1;
    left: 0;
    background-size: cover;
    background-position: top;
}

    .cat_slide.active .cat_slide_content {
        bottom: 10%;
    }
@keyframes textTransition {
    to {
        top: 10%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
.cat_slide.active .cat_slide_heading {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, 50%) scale(0.5);
    opacity: 0;
    animation: textTransition 4s forwards;
}
        .cat_heading {
            position: absolute;
            z-index: 99;
            width: 100%;
            display: flex;
            padding-top: 40px;
            color: white;
            text-transform: uppercase;
        }

.cat_slide_heading h2, h2.heading {
    width: 100%;
    text-align: center;
    font-size: 2.0rem;
    font-family: "aktiv-thin";
    text-transform: uppercase;
}

    .cat_slide_heading h2 span,  h2.heading span {
        font-family: "aktiv-medium"
    }*/



.cat_arrow {
    position: absolute;
    top: 150vh;
    transform: translateY(-50%);
    font-size: 3em;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    width: 28px;
    height: 54px;
}

.cat_arrow_left {
    left: 8%;
    background-image: url("../images/cat_arrow_left.png");
}

.cat_arrow_right {
    right: 8%;
    background-image: url("../images/cat_arrow_right.png");
}


h2.heading {
    width: 100%;
    text-align: center;
    font-size: 2.0rem;
    font-family: "aktiv-thin";
    text-transform: uppercase;
}

  h2.heading span {
        font-family: "aktiv-medium"
    }
.collection-slick-slider{
    position: relative;
    width: 100vw;
    height: 100vh;
}

.collection-slick-slider .ct_slide {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: transform 2s ease;
        overflow: hidden;
    }

    .collection-slick-slider .ct_slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translateY(0) scale(1.2);
        transition: transform 2s ease;
    }

    .collection-slick-slider .heading {
        position: absolute;
        top: 30%;
        opacity: 0;
        transform: translateY(-50%) scale(0.7);
        color: white;
        font-size: 2em;
        text-align: center;
        transition: opacity 2s ease, transform 2s ease, top 2s ease;
        z-index: 1;
    }

    .collection-slick-slider .button-cat {
        position: absolute;
        bottom: -10%;
        opacity: 0;
        background-color: rgba(255, 255, 255, 0.7);
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: opacity 2s ease, bottom 2s ease;
        z-index: 1;
        width: 26vw;
        text-align: center;
    }

    .collection-slick-slider .arrows {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

        .collection-slick-slider .arrows button {
            pointer-events: all;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

/* .collection-slick-slider .slick-current .heading {
        opacity: 1;
        top: 10%;
        transform: translateY(0) scale(1);
    }

    .collection-slick-slider .slick-current .button {
        opacity: 1;
        bottom: 30%;
    }
       */
.slick-active {
    /*transform: scale(1);*/
}

.collection-slick-slider .slick-slide {
}

.collection-slick-slider .slick-initialized .slick-slide {
    display: flex;
}

@media (max-height:750px) {
    .bottomAdjusted {
        bottom: 30% !important
    }
        
}
@media (min-height:751px) {
    .bottomAdjusted {
        bottom: 20% !important
    }
}
@media (max-width: 480px) {
    
    .collection-slick-slider .cat_slide_content {
        width: 80%;
    }
    .collection-slick-slider .cat_slide.active .cat_slide_content {
        bottom: 35%;
    }
    .collection-slick-slider .button-cat {
        width: 70%;
    }
    .collection-slick-slider .cat_arrow_right {
        background-size: 24px;
        background-repeat: no-repeat;
    }
    .collection-slick-slider .cat_arrow_left {
        background-size: 24px;
        background-repeat: no-repeat;
    }
}

@media (max-width: 1024px) and (min-width: 481px) {
    .collection-slick-slider .cat_slide_content {
        width: 60%;
    }

    .collection-slick-slider .button-cat {
        width: 50%;
    }
}

@media (max-width: 1300px) and (min-width: 1025px) {


    .collection-slick-slider .button-cat {
        width: 40%;
    }
}
