﻿.WrapperMinHeight {
    width: 100%;
    max-width: 97.5%;
    max-height: 68%;
    max-height: 68vh;
    min-height: 68%;
    min-height: 68vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.cb-slideshow li {
    list-style-type: none;
}

.cb-slideshow,
.cb-slideshow:after {
    width: 100%;
    max-width: 97.5%;
    height: 68vh;
    height: 68%;
    max-height: 68vh;
    max-height: 68%;
    top: 0;
    left: 0;
    z-index: 0;
}

    .cb-slideshow li span {
        width: 100%;
        max-width: 97.5%;
        height: 75vh;
        height: 75%;
        max-height: 75vh;
        max-height: 75%;
        position: absolute;
        top: 180px;
        left: 0;
        color: transparent;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        opacity: 0;
        z-index: 0;
        animation: imageAnimation 30s linear infinite 0s;
    }

    .cb-slideshow li:nth-child(1) span {
        background-image: url(/Resources/Images/Nine01Full.jpg);
    }

    .cb-slideshow li:nth-child(2) span {
        background-image: url(/Resources/Images/Nine02Full.jpg);
        animation-delay: 6s;
    }

    .cb-slideshow li:nth-child(3) span {
        background-image: url(/Resources/Images/Nine03Full.jpg);
        animation-delay: 12s;
    }

    .cb-slideshow li:nth-child(4) span {
        background-image: url(/Resources/Images/Nine04Full.jpg);
        animation-delay: 18s;
    }

    .cb-slideshow li:nth-child(5) span {
        background-image: url(/Resources/Images/Nine05Full.jpg);
        animation-delay: 24s;
    }

@keyframes imageAnimation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out;
    }

    17% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0
    }
}

.no-cssanimations .cb-slideshow li span {
    opacity: 1;
}

@media screen and (max-width: 1280px){
    .cb-slideshow li span {
        height: 43vh;
        height: 43%;
        max-height: 43vh;
        max-height: 43%;
    }
}


@media screen and (max-width: 840px) {
    .cb-slideshow, .cb-slideshow:after {
        height: 68vh;
        height: 68%;
        max-height: 68vh;
        max-height: 68%;
    }
    .cb-slideshow li span {
        height: 30vh;
        height: 30%;
        max-height: 30vh;
        max-height: 30%;
    }
}

@media screen and (max-width:800px) {
    .cb-slideshow li:nth-child(1) span {
        background-image: url(/Resources/Images/Nine01Tablet.jpg);
    }

    .cb-slideshow li:nth-child(2) span {
        background-image: url(/Resources/Images/Nine02Tablet.jpg);
        animation-delay: 6s;
    }

    .cb-slideshow li:nth-child(3) span {
        background-image: url(/Resources/Images/Nine03Tablet.jpg);
        animation-delay: 12s;
    }

    .cb-slideshow li:nth-child(4) span {
        background-image: url(/Resources/Images/Nine04Tablet.jpg);
        animation-delay: 18s;
    }

    .cb-slideshow li:nth-child(5) span {
        background-image: url(/Resources/Images/Nine05Tablet.jpg);
        animation-delay: 24s;
    }

    @keyframes imageAnimation {
        0% {
            opacity: 0;
            animation-timing-function: ease-in;
        }

        8% {
            opacity: 1;
            transform: scale(1.05);
            animation-timing-function: ease-out;
        }

        17% {
            opacity: 1;
        }

        25% {
            opacity: 0;
        }

        100% {
            opacity: 0
        }
    }

    .no-cssanimations .cb-slideshow li span {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {

        .cb-slideshow li span {
            height: 36vh;
            height: 36%;
            max-height: 36vh;
            max-height: 36%;
        }
}

@media screen and (max-width:500px) {
    .cb-slideshow li:nth-child(1) span {
        background-image: url(/Resources/Images/Nine01Mobile.jpg);
    }

    .cb-slideshow li:nth-child(2) span {
        background-image: url(/Resources/Images/Nine02Mobile.jpg);
        animation-delay: 6s;
    }

    .cb-slideshow li:nth-child(3) span {
        background-image: url(/Resources/Images/Nine03Mobile.jpg);
        animation-delay: 12s;
    }

    .cb-slideshow li:nth-child(4) span {
        background-image: url(/Resources/Images/Nine04Mobile.jpg);
        animation-delay: 18s;
    }

    .cb-slideshow li:nth-child(5) span {
        background-image: url(/Resources/Images/Nine05Mobile.jpg);
        animation-delay: 24s;
    }

    @keyframes imageAnimation {
        0% {
            opacity: 0;
            animation-timing-function: ease-in;
        }

        8% {
            opacity: 1;
            transform: scale(1.05);
            animation-timing-function: ease-out;
        }

        17% {
            opacity: 1;
        }

        25% {
            opacity: 0;
        }

        100% {
            opacity: 0
        }
    }

    .no-cssanimations .cb-slideshow li span {
        opacity: 1;
    }
}

@media screen and (max-width:450px) {
    .cb-slideshow li span {
        top: 150px;
    }
}

@media screen and (max-width: 360px){

    .cb-slideshow li span {
        height: 40vh;
        height: 40%;
        max-height: 40vh;
        max-height: 40%;
    }
}
