@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: #0c0c0c;
  color: #fff;
  font-family: "Lato", sans-serif;
}

/* LIST */
ul {
  list-style: none;
}

/* FORM */
input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: block;
  float: left;
  height: 100vh;
  width: 40px;
  overflow: hidden;
  background: #262626;
  text-align: center;
  font-size: 14px;
  line-height: 50px;
  -webkit-transition: background 300ms ease;
  transition: background 300ms ease;
}

label:hover {
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
}

li:nth-child(even) > input + label {
  background: #323232;
}

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

input[type="radio"]:checked ~ label {
  background: #cc1616;
  color: #fff;
  cursor: default !important;
}

/* SLIDES */
.accslide {
  display: block;
  height: 100%;
  width: 0px;
  padding: 10px 0;
  float: left;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 24px;
  text-align: justify;
  -webkit-transition: all 700ms ease;
  transition: all 700ms ease;
}

.accslide * {
  padding-left: 10px;
}

.accslide img {
  margin-top: 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

li:nth-child(8):nth-last-child(1)
input[type="radio"]:checked
~ .accslide {
  width: calc(100% - 320px);
}
/*# sourceMappingURL=main.css.map */