.accordion {
  background: #EEEEEE;
  color: #212121 !important;
  display: block;
  height: 350px;
  width: 100%;
  margin: 1em auto;
  padding: 0; }

.accordion p {
  color: #212121; }

/* LIST */
ul.hor-accordion {
  background: #EEEEEE;
  color: #212121;
  list-style: none;
  margin: 0;
  padding: 0; }

/* FORM */
.hor-accordion input {
  position: absolute;
  left: -9999px; }

.hor-accordion label {
  display: block;
  float: left;
  height: 350px;
  width: 80px;
  overflow: hidden;
  background: url(../images/o9.png);
  text-align: center;
  line-height: 90px;
  transition: background 300ms ease; }

.hor-accordion li {
  margin: 0; }

/*
.hor-accordion li:nth-child(even) > input + label {
  background: url(../images/o9.png); }
*/

.hor-accordion li:nth-child(1) > input + label {
  background: url(../images/o9.png); }
.hor-accordion li:nth-child(2) > input + label {
  background: url(../images/o8.png); }
.hor-accordion li:nth-child(3) > input + label {
  background: url(../images/o7.png); }
.hor-accordion li:nth-child(4) > input + label {
  background: url(../images/o6.png); }

.hor-accordion label:hover,
.hor-accordion li:nth-child(even) > input + label:hover {
  background: #fc992b;
  color: #fff;
  cursor: pointer; }

.hor-accordion input[type="radio"]:checked ~ label {
  background: #FF990A;
  color: #fff;
  cursor: default !important; }

/* SLIDES */
.hor-accordion .accslide {
  display: block;
  height: 100%;
  width: 0px;
  padding: 10px 0;
  float: left;
  overflow-x: hidden;
  font-sizes: 12px;
  line-height: 1.5;
  transition: all 700ms ease; }
  .hor-accordion .accslide * {
    padding-left: 10px; }
  .hor-accordion .accslide img {
    margin-top: 10px; }

.accslide h1 {
  font-size: 2em; }

.hor-accordion input[type="radio"]:not(:checked) ~ label > * {
  padding-left: 10px;
  font-size: 2em;
  white-space: nowrap;
  transform: rotate(90deg); }

.hor-accordion input[type="radio"]:checked ~ label > * {
  display: none; }

.silver .hor-accordion label {
  background: silver; }

.hor-accordion li:nth-child(1):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px); }

.hor-accordion li:nth-child(2):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 160px); }

.hor-accordion li:nth-child(1):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px); }

.hor-accordion li:nth-child(2):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px); }

.hor-accordion li:nth-child(3):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 240px); }

.hor-accordion li:nth-child(1):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px); }

.hor-accordion li:nth-child(2):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px); }

.hor-accordion li:nth-child(3):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px); }

.hor-accordion li:nth-child(4):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 320px); }

.hor-accordion li:nth-child(1):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 400px); }

.hor-accordion li:nth-child(2):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 400px); }

.hor-accordion li:nth-child(3):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 400px); }

.hor-accordion li:nth-child(4):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 400px); }

.hor-accordion li:nth-child(5):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 400px); }

.hor-accordion li:nth-child(1):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 480px); }

.hor-accordion li:nth-child(2):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 480px); }

.hor-accordion li:nth-child(3):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 480px); }

.hor-accordion li:nth-child(4):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 480px); }

.hor-accordion li:nth-child(5):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 480px); }

.hor-accordion li:nth-child(6):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 480px); }

.hor-accordion li:nth-child(1):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 560px); }

.hor-accordion li:nth-child(2):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 560px); }

.hor-accordion li:nth-child(3):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 560px); }

.hor-accordion li:nth-child(4):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 560px); }

.hor-accordion li:nth-child(5):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 560px); }

.hor-accordion li:nth-child(6):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 560px); }

.hor-accordion li:nth-child(7):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 560px); }

.hor-accordion li:nth-child(1):nth-last-child(8) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 640px); }

.hor-accordion li:nth-child(2):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 640px); }

.hor-accordion li:nth-child(3):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 640px); }

.hor-accordion li:nth-child(4):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 640px); }

.hor-accordion li:nth-child(5):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 640px); }

.hor-accordion li:nth-child(6):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 640px); }

.hor-accordion li:nth-child(7):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 640px); }

.hor-accordion li:nth-child(8):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
  width: calc(100% - 640px); }

.accordionHeight { max-height: 390px; }


@media only screen and (max-width: 992px) {
	.accordion { height: 250px; }
	.hor-accordion label { height: 250px; }
	.accordionHeight { max-height: 290px; }
}

@media only screen and (max-width: 768px) {
	.hor-accordion label {
	    float: none;
	    height: auto;
	    width: 100%;
	    overflow: hidden;
	    text-align: left;
	    line-height: inherit;
	    transition: linear;
	}
	.hor-accordion .accslide {
    	width: 100% !important;
	}
	.hor-accordion label { height: 2px !important; }
	.accordionHeight { height: auto;  max-height: inherit !important; }
	ul.hor-accordion { margin-bottom: 3em; }
	ul.hor-accordion li { background: #EEEEEE !important; height: auto !important; }
	.accordionHeight { background: #EEEEEE; }
	.accordion { border: none; }
}