/*CSS RESET*/

html,
body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/*FONT IMPORT*/

@font-face {
    font-family: timeburner;
    src: url(timeburner.ttf);
}


/********** NEXT SLIDE ARROW NAVIGATION **********/


/*APPEARANCE*/

#cssSlider> input {
    display: none;
}

#cssSlider> #pageNav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 15;
    width: 100%;
    height: 10vw;
}

#cssSlider> #pageNav> #previousArrow> .slideL,
#cssSlider> #pageNav> #playPause> .playPauseBtn,
#cssSlider> #pageNav> #nextArrow> .slideR {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

#cssSlider> #pageNav> #previousArrow> .slideL {
    width: 10vw;
    height: 10vw;
    background: url('icons/previous.png');
    background-image: url('icons/previous.svg'), none;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}

#cssSlider> #pageNav> #nextArrow> .slideR {
    width: 10vw;
    height: 10vw;
    background: url('icons/next.png');
    background-image: url('icons/next.svg'), none;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}

#cssSlider> #pageNav> #playPause> #playBtn {
    width: 10vw;
    height: 10vw;
    background: url('icons/play.png');
    background-image: url('icons/play.svg'), none;
    background-repeat: no-repeat;
    background-size: 100%;
}

#cssSlider> #pageNav> #playPause> #pauseBtn {
    width: 10vw;
    height: 10vw;
    background: url('icons/pause.png');
    background-image: url('icons/pause.svg'), none;
    background-repeat: no-repeat;
    background-size: 100%;
}


/*POSITION*/

#cssSlider> #pageNav> #previousArrow> .slideL {
    left: 2vw;
}

#cssSlider> #pageNav> #playPause> .playPauseBtn {
    left: 50%;
    margin: 0 0 0 -5vw;
}

#cssSlider> #pageNav> #nextArrow> .slideR {
    right: 2vw;
}


/*ONLY DISPLAY IF ON SLIDER*/

#cssSlider> #pageNav:hover> #previousArrow> .slideL,
#cssSlider> #pageNav:hover> #playPause> .playPauseBtn,
#cssSlider> #pageNav:hover> #nextArrow> .slideR,
#cssSlider #sliderImages:hover~ #pageNav #previousArrow .slideL,
#cssSlider> #sliderImages:hover~ #pageNav> #playPause> .playPauseBtn,
#cssSlider> #sliderImages:hover~ #pageNav> #nextArrow> .slideR {
    opacity: 1;
}


/*DON'T SHOW PLAY AND PAUSE*/

#cssSlider> #play:not(:checked)~ #pageNav> #playPause> #pauseBtn {
    display: none;
}

#cssSlider> #play:checked~ #pageNav> #playPause> #playBtn {
    display: none;
}


/*WHICH ARROW SHOULD BE ON TOP*/

#cssSlider> #slide1:checked~ #pageNav> #previousArrow> #slideL6,
#cssSlider> #slide1:checked~ #pageNav> #nextArrow> #slideR2,
#cssSlider> #slide2:checked~ #pageNav> #previousArrow> #slideL1,
#cssSlider> #slide2:checked~ #pageNav> #nextArrow> #slideR3,
#cssSlider> #slide3:checked~ #pageNav> #previousArrow> #slideL2,
#cssSlider> #slide3:checked~ #pageNav> #nextArrow> #slideR4,
#cssSlider> #slide4:checked~ #pageNav> #previousArrow> #slideL3,
#cssSlider> #slide4:checked~ #pageNav> #nextArrow> #slideR5,
#cssSlider> #slide5:checked~ #pageNav> #previousArrow> #slideL4,
#cssSlider> #slide5:checked~ #pageNav> #nextArrow> #slideR6,
#cssSlider> #slide6:checked~ #pageNav> #previousArrow> #slideL5,
#cssSlider> #slide6:checked~ #pageNav> #nextArrow> #slideR1 {
    z-index: 15;
}


/*STARTING ARROW ANIMATION, FOR WHICH TO BE ON TOP*/

#cssSlider> #play:checked~ #pageNav> #previousArrow> #slideL6,
#cssSlider> #play:checked~ #pageNav> #nextArrow> #slideR2,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL6,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR2 {
    -webkit-animation: arrows 40000ms infinite 0ms;
    animation: arrows 40000ms infinite 0ms;
}

#cssSlider> #play:checked~ #pageNav> #previousArrow> #slideL1,
#cssSlider> #play:checked~ #pageNav> #nextArrow> #slideR3,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL1,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR3 {
    -webkit-animation: arrows 40000ms infinite 6666.6666666667ms;
    animation: arrows 40000ms infinite 6666.6666666667ms;
}

#cssSlider> #play:checked~ #pageNav> #previousArrow> #slideL2,
#cssSlider> #play:checked~ #pageNav> #nextArrow> #slideR4,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL2,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR4 {
    -webkit-animation: arrows 40000ms infinite 13333.333333333ms;
    animation: arrows 40000ms infinite 13333.333333333ms;
}

#cssSlider> #play:checked~ #pageNav> #previousArrow> #slideL3,
#cssSlider> #play:checked~ #pageNav> #nextArrow> #slideR5,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL3,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR5 {
    -webkit-animation: arrows 40000ms infinite 20000ms;
    animation: arrows 40000ms infinite 20000ms;
}

#cssSlider> #play:checked~ #pageNav> #previousArrow> #slideL4,
#cssSlider> #play:checked~ #pageNav> #nextArrow> #slideR6,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL4,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR6 {
    -webkit-animation: arrows 40000ms infinite 26666.666666666ms;
    animation: arrows 40000ms infinite 26666.666666666ms;
}

#cssSlider> #play:checked~ #pageNav> #previousArrow> #slideL5,
#cssSlider> #play:checked~ #pageNav> #nextArrow> #slideR1,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL5,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR1 {
    -webkit-animation: arrows 40000ms infinite 33333.333333333ms;
    animation: arrows 40000ms infinite 33333.333333333ms;
}


/********** END NEXT SLIDE ARROW NAVIGATION **********/


/********** SLIDE INDICATORS **********/


/*PAGE INDICATORS APPEARANCE*/

#cssSlider> #pageIndicators {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    z-index: 15;
}

#cssSlider> #pageIndicators> .indicator {
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    border-radius: 100%;
    background-color: #ABB7B7;
    /*color of page indicator*/
    cursor: pointer;
}

#cssSlider> #pageIndicators> .indicator> .hoverPoint {
    margin: .5em;
    display: inline-block;
    height: .5em;
    width: .5em;
    border-radius: 100%;
    background: transparent;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    z-index: 16;
}

#cssSlider> #pageIndicators> .indicator> .hoverPoint> .point {
    margin-bottom: .5em;
    display: inline-block;
    height: .5em;
    width: .5em;
    border-radius: 100%;
    background: transparent;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
}


/*STARTING PAGE INDICATOR WHICH TO BE LIT ANIMATION*/

#cssSlider> #play:checked~ #pageIndicators> .indicator> .hoverPoint> #point1,
#cssSlider> #pause:checked~ #pageIndicators> .indicator> .hoverPoint> #point1 {
    -webkit-animation: point 40000ms infinite 0ms;
    animation: point 40000ms infinite 0ms;
}

#cssSlider> #play:checked~ #pageIndicators> .indicator> .hoverPoint> #point2,
#cssSlider> #pause:checked~ #pageIndicators> .indicator> .hoverPoint> #point2 {
    -webkit-animation: point 40000ms infinite 6666.6666666667ms;
    animation: point 40000ms infinite 6666.6666666667ms;
}

#cssSlider> #play:checked~ #pageIndicators> .indicator> .hoverPoint> #point3,
#cssSlider> #pause:checked~ #pageIndicators> .indicator> .hoverPoint> #point3 {
    -webkit-animation: point 40000ms infinite 13333.333333333ms;
    animation: point 40000ms infinite 13333.333333333ms;
}

#cssSlider> #play:checked~ #pageIndicators> .indicator> .hoverPoint> #point4,
#cssSlider> #pause:checked~ #pageIndicators> .indicator> .hoverPoint> #point4 {
    -webkit-animation: point 40000ms infinite 20000ms;
    animation: point 40000ms infinite 20000ms;
}

#cssSlider> #play:checked~ #pageIndicators> .indicator> .hoverPoint> #point5,
#cssSlider> #pause:checked~ #pageIndicators> .indicator> .hoverPoint> #point5 {
    -webkit-animation: point 40000ms infinite 26666.666666666ms;
    animation: point 40000ms infinite 26666.666666666ms;
}

#cssSlider> #play:checked~ #pageIndicators> .indicator> .hoverPoint> #point6,
#cssSlider> #pause:checked~ #pageIndicators> .indicator> .hoverPoint> #point6 {
    -webkit-animation: point 40000ms infinite 33333.333333333ms;
    animation: point 40000ms infinite 33333.333333333ms;
}


/*WHICH INDICATOR SHOULD BE LIT*/

#cssSlider> #slide1:checked~ #pageIndicators> .indicator> .hoverPoint> #point1,
#cssSlider> #slide2:checked~ #pageIndicators> .indicator> .hoverPoint> #point2,
#cssSlider> #slide3:checked~ #pageIndicators> .indicator> .hoverPoint> #point3,
#cssSlider> #slide4:checked~ #pageIndicators> .indicator> .hoverPoint> #point4,
#cssSlider> #slide5:checked~ #pageIndicators> .indicator> .hoverPoint> #point5,
#cssSlider> #slide6:checked~ #pageIndicators> .indicator> .hoverPoint> #point6 {
    background: #F2F1EF;
    /*color of page indicator dot*/
}


/*used to override the animation for lit indicator*/

#cssSlider> #pageIndicators> .indicator:hover> .hoverPoint {
    background: #F2F1EF;
    /*color of page indicator dot*/
}


/********** END SLIDE INDICATORS **********/


/**********IMAGE/SLIDER STYLING **********/


/*don't show the other images*/

#cssSlider {
    position: relative;
    overflow: hidden;
}


/*the size of the responsixe slider, 
just replace your value based on the ratio equation*/

#cssSlider {
    padding-bottom: 43.95%;
    /*to find % aspect ratio, (height/width)100*/
    height: 0;
}


/*size of the images*/

#cssSlider> #sliderImages> img {
    width: 100vw;
    height: 100%;
    float: left;
}


/*transition slider size*/

#cssSlider> #sliderImages {
    position: absolute;
    left: 0;
    transition: 2.66666666668s;
    width: 600vw;
    -webkit-animation-name: slider;
    -webkit-animation-duration: 40s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-name: slider;
    animation-duration: 40s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}


/********** END IMAGE/SLIDER STYLING **********/


/********** SLIDER TEXT **********/

#cssSlider> #slideDesc> .slideText {
    position: absolute;
    bottom: 0;
    padding: .6em;
    margin: 2em;
    background-color: #ABB7B7;
    /*color of blurb box*/
    border-radius: .5em;
    z-index: -1;
    opacity: 0;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

#cssSlider> #slideDesc> .slideText> p {
    padding: .1em;
    margin: 0;
    color: black;
    /*color of blurb box text*/
    font-size: 2em;
    font-family: timeburner;
}


/*BRING THE TEXT FORWARD ON ITS PAGE*/

#cssSlider> #slide1:checked~ #slideDesc> #slideText1,
#cssSlider> #slide2:checked~ #slideDesc> #slideText2,
#cssSlider> #slide3:checked~ #slideDesc> #slideText3,
#cssSlider> #slide4:checked~ #slideDesc> #slideText4,
#cssSlider> #slide5:checked~ #slideDesc> #slideText5,
#cssSlider> #slide6:checked~ #slideDesc> #slideText6 {
    z-index: 2;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}


/*TEXT BOX ANIMATION*/

#cssSlider> #play:checked~ #slideDesc> #slideText1,
#cssSlider> #pause:checked~ #slideDesc> #slideText1 {
    -webkit-animation: textBoxBounce 40000ms infinite 0ms;
    animation: textBoxBounce 40000ms infinite 0ms;
}

#cssSlider> #play:checked~ #slideDesc> #slideText2,
#cssSlider> #pause:checked~ #slideDesc> #slideText2 {
    -webkit-animation: textBoxBounce 40000ms infinite 6666.6666666667ms;
    animation: textBoxBounce 40000ms infinite 6666.6666666667ms;
}

#cssSlider> #play:checked~ #slideDesc> #slideText3,
#cssSlider> #pause:checked~ #slideDesc> #slideText3 {
    -webkit-animation: textBoxBounce 40000ms infinite 13333.333333333ms;
    animation: textBoxBounce 40000ms infinite 13333.333333333ms;
}

#cssSlider> #play:checked~ #slideDesc> #slideText4,
#cssSlider> #pause:checked~ #slideDesc> #slideText4 {
    -webkit-animation: textBoxBounce 40000ms infinite 20000ms;
    animation: textBoxBounce 40000ms infinite 20000ms;
}

#cssSlider> #play:checked~ #slideDesc> #slideText5,
#cssSlider> #pause:checked~ #slideDesc> #slideText5 {
    -webkit-animation: textBoxBounce 40000ms infinite 26666.666666666ms;
    animation: textBoxBounce 40000ms infinite 26666.666666666ms;
}

#cssSlider> #play:checked~ #slideDesc> #slideText6,
#cssSlider> #pause:checked~ #slideDesc> #slideText6 {
    -webkit-animation: textBoxBounce 40000ms infinite 33333.333333333ms;
    animation: textBoxBounce 40000ms infinite 33333.333333333ms;
}


/********** END SLIDER TEXT **********/


/********** MANUAL PAGE ADVANCEMENT **********/

#cssSlider> #slide1:checked~ #sliderImages {
    margin-left: 0;
}

#cssSlider> #slide2:checked~ #sliderImages {
    margin-left: -100vw;
}

#cssSlider> #slide3:checked~ #sliderImages {
    margin-left: -200vw;
}

#cssSlider> #slide4:checked~ #sliderImages {
    margin-left: -300vw;
}

#cssSlider> #slide5:checked~ #sliderImages {
    margin-left: -400vw;
}

#cssSlider> #slide6:checked~ #sliderImages {
    margin-left: -500vw;
}


/********** END MANUAL PAGE ADVANCEMENT **********/


/********** PLAY PAUSE OF ALL ANIMATIONS **********/


/*restart the show*/

#cssSlider> #slide1:checked~ #sliderImages,
#cssSlider> #slide2:checked~ #sliderImages,
#cssSlider> #slide3:checked~ #sliderImages,
#cssSlider> #slide4:checked~ #sliderImages,
#cssSlider> #slide5:checked~ #sliderImages,
#cssSlider> #slide6:checked~ #sliderImages {
    -webkit-animation: none;
    animation: none;
}


/*pause all animations*/

#cssSlider> #pause:checked~ #sliderImages,
#cssSlider> #pause:checked~ #slideDesc> #slideText1,
#cssSlider> #pause:checked~ #slideDesc> #slideText2,
#cssSlider> #pause:checked~ #slideDesc> #slideText3,
#cssSlider> #pause:checked~ #slideDesc> #slideText4,
#cssSlider> #pause:checked~ #slideDesc> #slideText5,
#cssSlider> #pause:checked~ #slideDesc> #slideText6,
#cssSlider> #pause:checked~ #pageNav #previousArrow> #slideL6,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR2,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL1,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR3,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL2,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR4,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL3,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR5,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL4,
#cssSlider> #pause:checked~ #pageNav> #nextArrow> #slideR6,
#cssSlider> #pause:checked~ #pageNav> #previousArrow> #slideL5,
#cssSlider> #pause:checked~ #pageNav #nextArrow> #slideR1,
#cssSlider > #pause:checked ~ #pageIndicators > .indicator > .hoverPoint > #point1,
#cssSlider > #pause:checked ~ #pageIndicators > .indicator > .hoverPoint > #point2,
#cssSlider > #pause:checked ~ #pageIndicators > .indicator > .hoverPoint > #point3,
#cssSlider > #pause:checked ~ #pageIndicators > .indicator > .hoverPoint > #point4,
#cssSlider > #pause:checked ~ #pageIndicators > .indicator > .hoverPoint > #point5,
#cssSlider > #pause:checked ~ #pageIndicators > .indicator > .hoverPoint > #point6 {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}


/********** END PLAY PAUSE OF ALL ANIMATIONS **********/


/********** ANIMATIONS **********/


/*arrows*/

@-webkit-keyframes arrows {
    0%,
    16.656666666666666% {
        opacity: 1;
        z-index: 15;
    }
    16.666666666666668%,
    100% {
        opacity: 0;
        z-index: -1;
    }
}

@keyframes arrows {
    0%,
    16.656666666666666% {
        z-index: 15;
    }
    16.666666666666668%,
    100% {
        z-index: -1;
    }
}


/*page indicators*/

@keyframes point {
    1%,
    16% {
        background: #F2F1EF;
        /*color of page indicator dot*/
    }
    17%,
    100% {
        background: transparent;
    }
}

@-webkit-keyframes point {
    0%,
    16% {
        background: #F2F1EF;
        /*color of page indicator dot*/
    }
    17%,
    100% {
        background: transparent;
    }
}


/*slider*/

@keyframes slider {
    0%,
    10% {
        transform: translateX(0);
    }
    16.6666666667%,
    26.6666666667% {
        transform: translateX(-100vw);
    }
    33.3333333333%,
    43.3333333333% {
        transform: translateX(-200vw);
    }
    50%,
    60% {
        transform: translateX(-300vw);
    }
    66.6666666667%,
    76.6666666667% {
        transform: translateX(-400vw);
    }
    83.3333333333%,
    93.3333333333% {
        transform: translateX(-500vw);
    }
    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes slider {
    0%,
    10% {
        transform: translateX(0);
    }
    16.6666666667%,
    26.6666666667% {
        transform: translateX(-100vw);
    }
    33.3333333333%,
    43.3333333333% {
        transform: translateX(-200vw);
    }
    50%,
    60% {
        transform: translateX(-300vw);
    }
    66.6666666667%,
    76.6666666667% {
        transform: translateX(-400vw);
    }
    83.3333333333%,
    93.3333333333% {
        transform: translateX(-500vw);
    }
    100% {
        transform: translateX(0);
    }
}


/* IE 10+ hack - cant animate translate */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    #sliderImages {
        -webkit-animation-name: slider-ie;
        -webkit-animation-duration: 40s;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        animation-name: slider-ie;
        animation-duration: 40s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }
}

@keyframes slider-ie {
    0%,
    10% {
        margin-left: 0;
    }
    16.6666666667%,
    26.6666666667% {
        margin-left: -100vw;
    }
    33.3333333333%,
    43.3333333333% {
        margin-left: -200vw;
    }
    50%,
    60% {
        margin-left: -300vw;
    }
    66.6666666667%,
    76.6666666667% {
        margin-left: -400vw;
    }
    83.3333333333%,
    93.3333333333% {
        margin-left: -500vw;
    }
    100% {
        margin-left: -.1vw;
        /*can't be 0, gives blank page*/
    }
}

@-webkit-keyframes slider-ie {
    0%,
    10% {
        margin-left: 0;
    }
    16.6666666667%,
    26.6666666667% {
        margin-left: -100vw;
    }
    33.3333333333%,
    43.3333333333% {
        margin-left: -200vw;
    }
    50%,
    60% {
        margin-left: -300vw;
    }
    66.6666666667%,
    76.6666666667% {
        margin-left: -400vw;
    }
    83.3333333333%,
    93.3333333333% {
        margin-left: -500vw;
    }
    100% {
        margin-left: -.1vw;
        /*can't be 0, gives blank page*/
    }
}


/*text box*/

@-webkit-keyframes textBoxBounce {
    0.6927083333333334%,
    15.963958333333334% {
        opacity: 1;
        z-index: 2;
        visibility: visible;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    0.9895833333333334%,
    15.667083333333334% {
        opacity: 1;
        z-index: 2;
        visibility: visible;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    17.65625% {
        opacity: 0;
        z-index: 2;
        visibility: hidden;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    17.66625%,
    100% {
        z-index: 0;
    }
}

@keyframes textBoxBounce {
    0.6927083333333334%,
    15.963958333333334% {
        opacity: 1;
        z-index: 2;
        visibility: visible;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    0.9895833333333334%,
    15.667083333333334% {
        opacity: 1;
        z-index: 2;
        visibility: visible;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    17.65625% {
        opacity: 0;
        z-index: 2;
        visibility: hidden;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    17.66625%,
    100% {
        z-index: 0;
    }
}


/********** END ANIMATIONS **********/


/*FOR MOBILE*/

@media screen and (max-width: 1000px) {
    #cssSlider> #slideDesc> .slideText,
    #cssSlider> #pageIndicators {
        display: none;
    }
}