/*
 * Created by    PhpStorm 2018.2
 * User:         Rillox, Benedikt
 * Company:      vano. Agentur - www.vano-agentur.de
 * Date:         24.11.20
 * Time:         10:50
 * Project:      www.benntec.de
 * 2020 - Copyright by vano. Agentur - Rillox, Benedikt
**/


@media (max-width: 425px) and (orientation: portrait) {
    #intro {
        height: unset;
        min-height: 31.6vh;
    }

    #intro>.big-image {
        background-size: contain;
        background-repeat: no-repeat;
    }

    #gts { display: none; }

    #intro>.big-image:nth-child(1) {
        background-image: url(../img/l/intro-one.jpg) !important;
    }

    #intro>.big-image:nth-child(2) {
        background-image: url(../img/l/intro-two.jpg) !important;
    }

    #intro>.big-image:nth-child(3) {
        background-image: url(../img/l/intro-three.jpg) !important;
    }

    #intro>.big-image:nth-child(4) {
        background-image: url(../img/l/intro-four.jpg) !important;
    }
}

@media (max-width: 425px) and (-webkit-min-device-pixel-ratio: 3) {
    #intro {
        height: unset;
        min-height: 26.1vh;
    }
}

.slick-slider.is__stage-slider {
    bottom: 32px;
    margin-top: 40px;
}

.slick-slider.is__stage-slider .slick-dots {
    bottom: 0;
    position: relative;
}

.slick-slider.is__stage-slider .slick-dots li button:before {
    content: '';
}

.slick-slider.is__stage-slider .slick-dots li button {
    width: 20px;
    height: 20px;
    border-radius: 30px;
    border: 1px solid rgba(124, 131, 143, 1.0);

}

.slick-slider.is__stage-slider .slick-dots li.slick-active button {
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 30px;
    border: 1px solid rgba(124, 131, 143, 1.0);

}

.slick-slider.is__stage-slider .slick-prev,
.slick-slider.is__stage-slider .slick-next {
    width: 69px;
    height: 60px;
}

.slick-slider.is__stage-slider .slick-prev::before {
    background-image: url('../img/icons/arrow-prev.svg');
    background-size: contain;
    background-repeat: no-repeat;
    color:rgba(255,255,255, 0.0);
    opacity: 1;
    font-size: 40px;
}

.slick-slider.is__stage-slider .slick-next::before {
    background-image: url('../img/icons/arrow-next.svg');
    background-size: contain;
    background-repeat: no-repeat;
    color:rgba(255,255,255, 0.0);
    opacity: 1;
    font-size: 40px;
}

.bt__custom-teaser p {
    color: white;
    font-size: 30px;
    line-height: 36px;
    text-align: center;
}

.bt__custom-teaser {
    background: rgba(124, 131, 143, 0.9);
    position: relative;
    bottom: 20px;
    padding: 32px 20px;
    max-width: 620px;
}

.bt__custom-teaser a {
    color: white;
    font-size: 14px;
}

.bc__teaser-link {
    border: 1px solid white;
    border-bottom-right-radius: 10px;
    padding: 10px 32px;
    text-align: center;
}

.bt__custom-teaser a::before {
    content: "\00bb";
    display: inline-block;
    font-size: 100%;
    margin: 0 0.25rem 0 0;
}

@media screen and (min-width: 660px) {
    .bt__custom-teaser {
        padding: 32px 50px;
        max-width: unset;
        width: 100%;
    }
}

@media screen and (min-width: 1300px) {
    .bt__custom-teaser {
        position: absolute;
        bottom: 6vh;
        padding: 32px 70px;
        max-width: 630px;
    }

    .slick-slider.is__stage-slider {
        max-height: calc(100vh - 260px);
    }

    .bt__custom-teaser p {
        font-size: 32px;
        line-height: 36px;
    }

    .slick-slider.is__stage-slider .slick-dots li button,
    .slick-slider.is__stage-slider .slick-dots li.slick-active button {
        border: 1px solid white;
    }


    .bt__custom-teaser a { font-size: initial; }

    .slick-slider.is__stage-slider .slick-dots {
        position: absolute;
        bottom: 40px;
    }
}

@media screen and (min-width: 1680px) {
    .bt__custom-teaser {
        bottom: 11vh;
        max-width: 800px;
    }

    .slick-slider.is__stage-slider {
        max-height: 900px;
        overflow: hidden;
    }

    .bt__custom-teaser p {
        font-size: 36px;
        line-height: 45px;
    }

    .slick-slider.is__stage-slider .slick-prev,
    .slick-slider.is__stage-slider .slick-next {
        height: 70px;
    }

    .slick-slider.is__stage-slider .slick-prev::before,
    .slick-slider.is__stage-slider .slick-next::before {
        font-size: 70px;
    }
}

@media screen and (min-width: 1800px) {
    .bt__custom-teaser {
        bottom: unset;
        top: 560px;
    }
}