.gallery {position: relative;top:65px;width:1020px;height: 619px; margin:0 auto}
.gallery .item {margin: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity .25s}
.gallery .item:first-of-type {opacity: 1} 
.gallery .controls {width:1020px;height:70px;color: whiteSmoke;color: rgba(255, 255, 255, 0.4);position: absolute;bottom:0;width:100%;font-size:3em;text-align:center}
.gallery .controls a {transition: color .5s}
.gallery .controls a:hover {color: white}
@keyframes galleryAnimation {
  0% {
    opacity: 0; 
  }

  9.5%, 33% {
    opacity: 1; 
  }

  42.9%, 100% {
    opacity: 0; 
  } 
}

@keyframes controlAnimation {
  0% {
    color: whiteSmoke;
    color: rgba(255, 255, 255, 0.4); 
  }

  9.5%, 33% {
    color: white;
    color: white; 
  }

  42.9%, 100% {
    color: whiteSmoke;
    color: rgba(255, 255, 255, 0.4); } 
}
.gallery .item {animation: galleryAnimation 37s infinite}
.gallery .controls .control-item {animation: controlAnimation 37s infinite}
.gallery .control-operator {display: none}
.gallery .control-operator:target ~ .item {animation:none}
.gallery .control-operator:target ~ .controls .control-item {color: whiteSmoke;color: rgba(255, 255, 255, 0.4);animation: none}
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {opacity: 1}
.gallery .control-operator:nth-of-type(1):target ~ .controls 
.control-item:nth-of-type(1) {color: white;color: white}
.gallery .item:nth-of-type(1), .gallery .control-item:nth-of-type(1) {animation-delay: -2s}
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {opacity: 1}
.gallery .control-operator:nth-of-type(2):target ~ .controls .control-item:nth-of-type(2) {color: white}
.gallery .item:nth-of-type(2), .gallery .control-item:nth-of-type(2) {animation-delay: 5s}
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {opacity: 1}
.gallery .control-operator:nth-of-type(3):target ~ .controls .control-item:nth-of-type(3) {color: white}
.gallery .item:nth-of-type(3), .gallery .control-item:nth-of-type(3) {animation-delay: 12s}
.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {opacity: 1}
.gallery .control-operator:nth-of-type(4):target ~ .controls .control-item:nth-of-type(4) {color: white}
.gallery .item:nth-of-type(4), .gallery .control-item:nth-of-type(4) {animation-delay: 19s}
.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {opacity: 1}
.gallery .control-operator:nth-of-type(5):target ~ .controls .control-item:nth-of-type(5) {color: white}
.gallery .item:nth-of-type(5), .gallery .control-item:nth-of-type(5) {animation-delay: 26s}




/*Έπ΅¨2*/

.gallery_2 {position: relative;top:65px;width:1020px;height: 619px; margin:0 auto}
.gallery_2 .item {margin: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity .25s}
.gallery_2 .item:first-of-type {opacity: 1} 
.gallery_2 .controls {width:1020px;height:70px;color: whiteSmoke;color: rgba(255, 255, 255, 0.4);position: absolute;bottom:0;width:100%;font-size:3em;text-align:center}
.gallery_2 .controls a {transition: color .5s}
.gallery_2 .controls a:hover {color: white}
@keyframes galleryAnimation {
  0% {
    opacity: 0; 
  }

  9.5%, 33% {
    opacity: 1; 
  }

  42.9%, 100% {
    opacity: 0; 
  } 
}

@keyframes controlAnimation {
  0% {
    color: whiteSmoke;
    color: rgba(255, 255, 255, 0.4); 
  }

  9.5%, 33% {
    color: white;
    color: white; 
  }

  42.9%, 100% {
    color: whiteSmoke;
    color: rgba(255, 255, 255, 0.4); } 
}
.gallery_2 .item {animation: galleryAnimation 37s infinite}
.gallery_2 .controls .control-item {animation: controlAnimation 37s infinite}
.gallery_2 .control-operator {display: none}
.gallery_2 .control-operator:target ~ .item {animation:none}
.gallery_2 .control-operator:target ~ .controls .control-item {color: whiteSmoke;color: rgba(255, 255, 255, 0.4);animation: none}
.gallery_2 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {opacity: 1}
.gallery_2 .control-operator:nth-of-type(1):target ~ .controls 
.control-item:nth-of-type(1) {color: white;color: white}
.gallery_2 .item:nth-of-type(1), .gallery .control-item:nth-of-type(1) {animation-delay: -2s}
.gallery_2 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {opacity: 1}
.gallery_2 .control-operator:nth-of-type(2):target ~ .controls .control-item:nth-of-type(2) {color: white}
.gallery_2 .item:nth-of-type(2), .gallery .control-item:nth-of-type(2) {animation-delay: 5s}
.gallery_2 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {opacity: 1}
.gallery_2 .control-operator:nth-of-type(3):target ~ .controls .control-item:nth-of-type(3) {color: white}
.gallery_2 .item:nth-of-type(3), .gallery .control-item:nth-of-type(3) {animation-delay: 12s}
.gallery_2 .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {opacity: 1}
.gallery_2 .control-operator:nth-of-type(4):target ~ .controls .control-item:nth-of-type(4) {color: white}
.gallery_2 .item:nth-of-type(4), .gallery .control-item:nth-of-type(4) {animation-delay: 19s}
.gallery_2 .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {opacity: 1}
.gallery_2 .control-operator:nth-of-type(5):target ~ .controls .control-item:nth-of-type(5) {color: white}
.gallery_2 .item:nth-of-type(5), .gallery .control-item:nth-of-type(5) {animation-delay: 26s}