
body {
  position: relative;
}

.sliderWrap {
  /*max-width: 228px;*/
  position: relative;
  overflow: hidden;
}
/* NEW EXPERIMENT */
/* Slider Setup */

.sliderWrap input {
	display: none;
}

.sliderWrap #slide1:checked ~ #slides .inner { margin-left:0; }
.sliderWrap #slide2:checked ~ #slides .inner { margin-left:-100%; }
.sliderWrap #slide3:checked ~ #slides .inner { margin-left:-200%; }
.sliderWrap #slide4:checked ~ #slides .inner { margin-left:-300%; }
.sliderWrap #slide5:checked ~ #slides .inner { margin-left:-400%; }
.sliderWrap #slide6:checked ~ #slides .inner { margin-left:-500%; }
.sliderWrap #slide7:checked ~ #slides .inner { margin-left:-600%; }
.sliderWrap #slide8:checked ~ #slides .inner { margin-left:-700%; }


.sliderWrap #overflow {
	width: 100%; 
  /* max-width: 300px; */
	overflow: hidden;
}
.sliderWrap .inner {
  display: block;
}
.sliderWrap article ~ div {
	width: 100%;
}

.sliderWrap #slides .inner {
	width: 800%;
	line-height: 0;
}

.sliderWrap #slides article {
	width: 12.5%;
	float: left;
}

/* Slider Styling */

/* Control Setup */

.sliderWrap #controls {
	width: 100%;
  max-width: 228px;
	height: 17px;
  position: absolute;
  bottom: 6px;
}

.sliderWrap #controls label { 
	display: none;
	width: 17px;
	height: 17px;
	opacity: 0.3;
  text-indent: -6000em;
}

.sliderWrap #active {
	text-align: center;
  position: absolute;
  bottom: 4px;
  width: 100%;
  padding: 0 24px ;
  display: flex;
}
.sliderWrap #active label {
    border: 1px solid #d0d0d0;
    display: inline-block;
    font-family: Arial,Helvetica,Geneva,Futura,non-serif;
    font-size: 12px;
    height: 17px;
    line-height: 17px;
    margin: 0 4px 0 0;
    text-align: center;
    text-decoration: none;
    width: 17px;
}

.sliderWrap #active label:hover {
	background: #ccc;
	border-color: #777 !important;
}

.sliderWrap #controls label:hover {
	
}

.sliderWrap #slide1:checked ~ #controls label:nth-child(2), 
.sliderWrap #slide2:checked ~ #controls label:nth-child(3), 
.sliderWrap #slide3:checked ~ #controls label:nth-child(4), 
.sliderWrap #slide4:checked ~ #controls label:nth-child(5), 
.sliderWrap #slide5:checked ~ #controls label:nth-child(6), 
.sliderWrap #slide6:checked ~ #controls label:nth-child(7), 
.sliderWrap #slide7:checked ~ #controls label:nth-child(8), 
.sliderWrap #slide8:checked ~ #controls label:nth-child(1) {
	border: 1px solid #777;
	float: right;
	margin: 0 2px 0 0;
	display: block;
  background: url('../../shared/but-browser-right.gif') no-repeat center center;
}


.sliderWrap #slide1:checked ~ #controls label:nth-child(8),
.sliderWrap #slide2:checked ~ #controls label:nth-child(1),
.sliderWrap #slide3:checked ~ #controls label:nth-child(2),
.sliderWrap #slide4:checked ~ #controls label:nth-child(3),
.sliderWrap #slide5:checked ~ #controls label:nth-child(4),
.sliderWrap #slide6:checked ~ #controls label:nth-child(5),
.sliderWrap #slide7:checked ~ #controls label:nth-child(6),
.sliderWrap #slide8:checked ~ #controls label:nth-child(7) {
	border: 1px solid #777;
	float: left;
	margin: 0 0 0 2px;
	display: block;
  background: url('../../shared/but-browser-left.gif') no-repeat center center;
}

.sliderWrap #slide1:checked ~ #active label:nth-child(1),
.sliderWrap #slide2:checked ~ #active label:nth-child(2),
.sliderWrap #slide3:checked ~ #active label:nth-child(3),
.sliderWrap #slide4:checked ~ #active label:nth-child(4),
.sliderWrap #slide5:checked ~ #active label:nth-child(5),
.sliderWrap #slide6:checked ~ #active label:nth-child(6),
.sliderWrap #slide7:checked ~ #active label:nth-child(7),
.sliderWrap #slide8:checked ~ #active label:nth-child(8) {
    background-color: #5d2480;
    color: #fff;
}

.sliderWrap #controls label,
.sliderWrap #active label {
  position: relative;
  z-index: 1;
}
.sliderWrap #controls label {
  z-index: 2;
}

/* Info Box */
.sliderWrap .info {
  box-sizing: padding-box;
	line-height: 120%;
	margin: 0;
	/* padding: 10px; */
	opacity: 0;
	color: #000;
	text-align: left;
  /* width: 228px; */
  height: 180px;
}
.sliderWrap article .info:after {
  content: "";
  width: 100%;
  display: block;
}

.sliderWrap .info h3 {
  font-size: 1.2em;
  margin: 0 0 0.4em;
  padding: 0;  
}

/* Slider Styling */
.sliderWrap #slides {
	background: #fff;
  /* width: 228px; */
  min-height: 184px;
  /* border: 1px solid #ddd; */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding-bottom: 25px;
  box-sizing: border-box;
}


/* Animation */
.sliderWrap #slides .inner {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

.sliderWrap #slider {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.sliderWrap #controls label {
	-webkit-transform: translateZ(0);
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
}

.sliderWrap #slide1:checked ~ #slides article:nth-child(1) .info,
.sliderWrap #slide2:checked ~ #slides article:nth-child(2) .info,
.sliderWrap #slide3:checked ~ #slides article:nth-child(3) .info,
.sliderWrap #slide4:checked ~ #slides article:nth-child(4) .info,
.sliderWrap #slide5:checked ~ #slides article:nth-child(5) .info,
.sliderWrap #slide6:checked ~ #slides article:nth-child(6) .info,
.sliderWrap #slide7:checked ~ #slides article:nth-child(7) .info,
.sliderWrap #slide8:checked ~ #slides article:nth-child(8) .info {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
}

.sliderWrap .info, 
.sliderWrap #controls, 
.sliderWrap #slides, 
.sliderWrap #active, 
.sliderWrap #active label, 
.sliderWrap .info h3 {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}


/**/
.sliderWrap #slider .info .category {
    font-size: 0.8em;
}


@media only screen and (max-width: 989px) and (min-width: 480px) {


}


@media only screen and (max-width: 480px) {

}


@media only screen and (min-width: 990px) {

}