/* https://www.devtwins.com/blog/css-cross-fading-images */

.fade-image-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%;

    /* 1:1 aspect ratio */
    position: relative;
    overflow: hidden;
}

.fade-image-container .pic8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* maintains aspect ratio while filling container */
}

.fade-image-container .pic14 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* maintains aspect ratio while filling container */
}

.fade-image-container .pic28 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* maintains aspect ratio while filling container */
}

/* NASTAR */
.pic8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto !important;
    opacity: 0;
    -webkit-animation: fade 40s infinite;
    animation: fade 40s infinite;
}
/* RTG */
.pic14 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto !important;
    opacity: 0;
    -webkit-animation: fade 70s infinite;
    animation: fade 70s infinite;
}

/* Leith */
.pic28 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto !important;
    opacity: 0;
    -webkit-animation: fade 140s infinite;
    animation: fade 140s infinite;
}

#pic1 {
    z-index: 1;
    animation-delay: 0s;
}

#pic2 {
    z-index: 2;
    animation-delay: 5s;
}

#pic3 {
    z-index: 3;
    animation-delay: 10s;
}

#pic4 {
    z-index: 4;
    animation-delay: 15s;
}

#pic5 {
    z-index: 5;
    animation-delay: 20s;
}

#pic6 {
    z-index: 6;
    animation-delay: 25s;
}

#pic7 {
    z-index: 7;
    animation-delay: 30s;
}

#pic8 {
    z-index: 8;
    animation-delay: 35s;
}

#pic9 {
    z-index: 9;
    animation-delay: 40s;
}

#pic10 {
    z-index: 10;
    animation-delay: 45s;
}

#pic11 {
    z-index: 11;
    animation-delay: 50s;
}

#pic12 {
    z-index: 12;
    animation-delay: 55s;
}

#pic13 {
    z-index: 13;
    animation-delay: 60s;
}

#pic14 {
    z-index: 14;
    animation-delay: 65s;
}

#pic15 {
    z-index: 15;
    animation-delay: 70s;
}

#pic16 {
    z-index: 16;
    animation-delay: 75s;
}

#pic17 {
    z-index: 17;
    animation-delay: 80s;
}

#pic18 {
    z-index: 18;
    animation-delay: 85s;
}

#pic19 {
    z-index: 19;
    animation-delay: 90s;
}

#pic20 {
    z-index: 20;
    animation-delay: 95s;
}

#pic21 {
    z-index: 21;
    animation-delay: 100s;
}

#pic22 {
    z-index: 22;
    animation-delay: 105s;
}

#pic23 {
    z-index: 23;
    animation-delay: 110s;
}

#pic24 {
    z-index: 24;
    animation-delay: 115s;
}

#pic25 {
    z-index: 25;
    animation-delay: 120s;
}

#pic26 {
    z-index: 26;
    animation-delay: 125s;
}

#pic27 {
    z-index: 27;
    animation-delay: 130s;
}

#pic28 {
    z-index: 28;
    animation-delay: 135s;
}

/* @-webkit-keyframes fade {
    0% {
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} */
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* @media only screen and (max-width: 768px) {
    .container {
        max-width: 100%;
    }
} */