@charset "UTF-8";

/* /////////////////////////////////////
   CotEditor Slider Style Sheet
   
   author  : 1024jp <wolfrosch.com>
   site    : coteditor.com
   target  : -
   lastMod : 2018-10
  ////////////////////////////////////// */

.slider {
	position: relative;
	overflow: hidden;
	
	text-align: center;
}
.slider input {
	display: none;
}
.slider label {
	cursor: pointer;
}

.slider #item1:checked ~ .slides { margin-left: 0; }
.slider #item2:checked ~ .slides { margin-left: -100%; }
.slider #item3:checked ~ .slides { margin-left: -200%; }
.slider #item4:checked ~ .slides { margin-left: -300%; }
.slider #item5:checked ~ .slides { margin-left: -400%; }

.slides {
	width: 500%;
	line-height: 0;
}
.slides figure {
	width: 20%;
	float: left;
	margin: 0;
}


/* Controls */

.slider .controls label {
	display: none;
	z-index: 2;
}

#item1:checked ~ .controls label:nth-child(5),
#item2:checked ~ .controls label:nth-child(1),
#item3:checked ~ .controls label:nth-child(2),
#item4:checked ~ .controls label:nth-child(3),
#item5:checked ~ .controls label:nth-child(4) {
	display: block;
}
#item1:checked ~ .controls label:nth-child(2),
#item2:checked ~ .controls label:nth-child(3),
#item3:checked ~ .controls label:nth-child(4),
#item4:checked ~ .controls label:nth-child(5),
#item5:checked ~ .controls label:nth-child(1) {
	display: block;
}


/* Animation */

.slides {
	transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);  /* ease-in-out */
}
.slider {
	transition: all 0.5s ease-out;
}
.slider .controls label {
	transition: opacity 0.2s ease-out;
}


/* Autoplay */

@keyframes slide {
   0%, 15%  { margin-left: 0; }
  20%, 35%  { margin-left: -100%; }
  40%, 55%  { margin-left: -200%; }
  60%, 75%  { margin-left: -300%; }
  80%, 95%  { margin-left: -400%; }
}
.slider > #item1:checked ~ .slides {
  animation: slide 25s infinite;
}