@keyframes layer2Anim {
    0%{opacity:0;}
    13.66%{opacity:0;}
    16.66%{opacity:1;}
    30.33%{opacity:1;}
    33.33%{opacity:0;}
    100%{opacity:0;}
}
@keyframes layer3Anim {
    0%{opacity:0;}
    30.33%{opacity:0;}
    33.33%{opacity:1;}
    47%{opacity:1;}
    50%{opacity:0;}
    100%{opacity:0;}
}
@keyframes layer4Anim {
    0%{opacity:0;}
    47%{opacity:0;}
    50%{opacity:1;}
    63.66%{opacity:1;}
    66.66%{opacity:0;}
    100%{opacity:0;}
}
@keyframes layer5Anim {
    0%{opacity:0;}
    63.66%{opacity:0;}
    66.66%{opacity:1;}
    80.33%{opacity:1;}
    83.33%{opacity:0;}
    100%{opacity:0;}
}
@keyframes layer6Anim {
    0%{opacity:0;}
    80.33%{opacity:0;}
    83.33%{opacity:1;}
    97%{opacity:1;}
    100%{opacity:0;}
}
.slideShow {
    position: relative;
}
.placeHolder {
    width: 100%;
    visibility: hidden;
}
.layer1, .layer2, .layer3, .layer4, .layer5, .layer6 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
}
.layer1 {
    background-image: url(../main-slider/1.jpg);
}
.layer2 {
    background-image: url(../main-slider/2.png);
    animation: layer2Anim 18s infinite;
}
.layer3 {
    background-image: url(../main-slider/3.jpg);
    animation: layer3Anim 18s infinite;
}
.layer4 {
    background-image: url(../main-slider/4.webp);
    animation: layer4Anim 18s infinite;
}
.layer5 {
    background-image: url(../main-slider/5.jpg);
    animation: layer5Anim 18s infinite;
}
.layer6 {
    background-image: url(../main-slider/6.webp);
    animation: layer6Anim 18s infinite;
}
.slideOverlay {
    background-image: url(https://s19.postimg.org/ckfjh8f77/overlay.png);
    background-attachment: fixed;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.slideOverlay p {
    position: relative;
    font-size: 6vw;
    color: #fff;
    text-shadow: 3px 3px 6px #000;
    text-align: center;
    top: 30%;
}