/* (A) TABS CONTAINER */
.tab {
  position: relative;
  width: 100%;
}

/* (B) HIDE CHECKBOX */
.tab input { display: none; }

/* (C) TAB LABEL */
.tab label {
  display: block;
  margin-top: 10px;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  background: #2d5faf;
  cursor: pointer;
}

/* (D) TAB CONTENT */
.tab .tab-content {
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}
.tab .tab-content p { padding: 10px; }

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .tab-content { max-height: 100%; }

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
  content: "\25b6";
  position: absolute;
  right: 10px;
  top: 10px;
  display: block;
  transition: all 0.4s;
}
.tab input:checked ~ label::after { transform: rotate(90deg); }


.slideshow {
  list-style-type: none;
}

/** SLIDESHOW **/
.slideshow,
.slideshow:after { 
    top: -16px; /*Not sure why I needed this fix*/
    width: 100%;
    height: 100%;
    left: 0px;
    z-index: 0; 
}

.slideshow li span { 
	align: center;
	position: absolute;
    width: 80%;
    height: 10%;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 20% 20%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 30s linear infinite 0s; 
}



.slideshow li:nth-child(1) span { 
    background-image: url(https://www.filmbol.org/wp-content/uploads/kirik-linkler-yok.png); 
}
.slideshow li:nth-child(2) span { 
    background-image: url(https://www.filmbol.org/wp-content/uploads/Market-Ozellikler-02.png);
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url(https://www.filmbol.org/wp-content/uploads/Market-Ozellikler-03.png);
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url(https://www.filmbol.org/wp-content/uploads/Market-Ozellikler-04.png);   
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url(https://www.filmbol.org/wp-content/uploads/Market-Ozellikler-05.png);
    animation-delay: 24s; 
}



@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}


@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}


.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}