﻿.image {
  width: 100%;
  /*height: 200px;*/
}
.radio {
  display: none;
}
.images {
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.images-inner {
  width: 500%;
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.image-slide {
  width: 20%;
  float: left;
}
.image-slide,
.fake-radio,
.radio-btn {
  transition: all 0.5s ease-out;
}
.fake-radio {
  /*float:left;*/
  margin:0 0 0 50% ;
}




/* Move slides overflowed container */
#slide1:checked ~ .images .images-inner {
  margin-left: 0;
}
#slide2:checked ~ .images .images-inner {
  margin-left: -100%;
}
#slide3:checked ~ .images .images-inner {
  margin-left: -200%;
}
#slide4:checked ~ .images .images-inner {
    margin-left: -300%;
}
#slide5:checked ~ .images .images-inner {
    margin-left: -400%;
}



/* Color of bullets */
#slide1:checked ~ div .fake-radio .radio-btn:nth-child(1),
#slide2:checked ~ div .fake-radio .radio-btn:nth-child(2),
#slide3:checked ~ div .fake-radio .radio-btn:nth-child(3),
#slide4:checked ~ div .fake-radio .radio-btn:nth-child(4),
#slide5:checked ~ div .fake-radio .radio-btn:nth-child(5) {
    background: #FFD700;
}
.radio-btn {
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background: gray;
  display: inline-block !important;
  /*margin: 0 1px;*/
  cursor: pointer;
  
  
}
/* Color of bullets - END */




/* Text of slides */
#slide1:checked ~ .labels .label:nth-child(1),
#slide2:checked ~ .labels .label:nth-child(2),
#slide3:checked ~ .labels .label:nth-child(3),
#slide4:checked ~ .labels .label:nth-child(4),
#slide5:checked ~ .labels .label:nth-child(5) {
    opacity: 1;
}

.label {
  opacity: 0;
  position: absolute;
}
/* Text of slides - END */



/* Calculate AUTOPLAY for BULLETS */
@keyframes bullet {
  
    0%, 11.87% {
        background: #FFD700;
    }

    20%, 31.87% {
        background: gray;
    }

    40%, 51.87% {
        background: gray;
    }

    60%, 71.87% {
        background: gray;
    }

    80%, 91.87% {
        background: gray;
    }
}


#play1:checked ~ div .fake-radio .radio-btn:nth-child(1) {
    animation: bullet 20500ms infinite -1000ms;
}

#play1:checked ~ div .fake-radio .radio-btn:nth-child(2) {
    animation: bullet 20500ms infinite 3100ms;
}

#play1:checked ~ div .fake-radio .radio-btn:nth-child(3) {
    animation: bullet 20500ms infinite 7200ms;
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(4) {
    animation: bullet 20500ms infinite 11300ms;
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(5) {
    animation: bullet 20500ms infinite 15400ms;
}
/* Calculate AUTOPLAY for BULLETS - END */




/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {
    0%, 11.87% {
        margin-left: 0;
    }
    20%, 31.87% {
        margin-left: -100%;
    }
    40%, 51.87% {
        margin-left: -200%;
    }
    60%, 71.87% {
        margin-left: -300%;
    }
    80%, 91.87% {margin-left: -400%;}
}


.st-slider > #play1:checked ~ .images .images-inner {
  animation: slide 20500ms infinite;	
}
/* Calculate AUTOPLAY for SLIDES - END */



/* Calculate AUTOPLAY for CAPTION */
@keyframes caption {
  0%, 20%	{
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}


#play1:checked ~ .labels .label:nth-child(1) {
  animation: caption 20500ms infinite -1000ms;
}

#play1:checked ~ .labels .label:nth-child(2) {
    animation: caption 20500ms infinite 3100ms;
}

#play1:checked ~ .labels .label:nth-child(3) {
    animation: caption 20500ms infinite 7200ms;
}
#play1:checked ~ .labels .label:nth-child(4) {
    animation: caption 20500ms infinite 11300ms;
}
#play1:checked ~ .labels .label:nth-child(5) {
    animation: caption 20500ms infinite 15400ms;
}
/* Calculate AUTOPLAY for CAPTION - END */


