html {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.4;
}

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

*, *:before, *:after { box-sizing: border-box; }

h1 {
  color: #fff;
  font-size: 2em;
  font-size: 6vw;
  line-height: 1.2;
  margin: 0.5em 0 3em;
  text-shadow: 1px 1px 1px #333;
}

.css-slider {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: scroll;
  background: #120103;
  color: #703200;
  text-align: center;
}

label {
  cursor: pointer;
  display: inline-block;
}

header {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 900;
  width: 100%;
}

header label {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin: 20px 10px;
}

nav {
  position: absolute;
  top: 50%;
  margin-top: -42px;
  z-index: 900;
  width: 100%;
}

nav label { font-size: 50px; }

header label:hover { background: #2e353b; }

.prev {
  position: absolute;
  left: 10px;
}

.next {
  position: absolute;
  right: 10px;
}

.slide {
  height: 100%;
  width: 100%;
  max-width: 1920px;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 0px;
  background-color: #120103;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transition: left 0s .75s;
  transition: left 0s .75s;
}

.slide-one { background-image: url("../img/slide_1.jpg"); }

.slide-two { background-image: url("../img/slide_2.jpg"); }

.slide-three { background-image: url("../img/slide_3.jpg"); }

.slide-four { background-image: url("../img/slide_4.jpg"); }

.slide-five { background-image: url("../img/slide_5.jpg"); }

.slide-six { background-image: url("../img/slide_6.jpg"); }

.slide-seven { background-image: url("../img/slide_7.jpg"); }

.slide-eight { background-image: url("../img/slide_12.jpg"); }

.slide-nine { background-image: url("../img/slide_2.jpg"); }

.slide-ten { background-image: url("../img/slide_1.jpg"); }

.slide-eleven { background-image: url("../img/slide_4.jpg"); }

.slide-twelve { background-image: url("../img/slide_3.jpg"); }

.slide-thirteen { background-image: url("../img/slide_13.jpg"); }

.slide-fourteen { background-image: url("../img/slide_14.jpg"); }

.slide-fifteen { background-image: url("../img/slide_15.jpg"); }

.slide-sixteen { background-image: url("../img/slide_16.jpg"); }

.slide-seventeen { background-image: url("../img/slide_17.jpg"); }

.slide-eighteen { background-image: url("../img/slide_18.jpg"); }

.slide-nineteen { background-image: url("../img/slide_19.jpg"); }

.slide-twenty { background-image: url("../img/slide_20.jpg"); }

.slide-twentyone { background-image: url("../img/slide_21.jpg"); }

.slide-twentytwo { background-image: url("../img/slide_22.jpg"); }

.slide-twentythree { background-image: url("../img/slide_23.jpg"); }

.slide-twentyfour { background-image: url("../img/slide_24.jpg"); }

.slide-twentyfive { background-image: url("../img/slide_25.jpg"); }

.slide-twentysix { background-image: url("../img/slide_26.jpg"); }

.slide-49 { background-image: url("../img/slide_27.jpg"); }

.slide-50 { background-image: url("../img/slide_28.jpg"); }

.slide-twentynine { background-image: url("../img/slide_29.jpg"); }

.slide-30 { background-image: url("../img/slide_30.jpg"); }

.slide-31 { background-image: url("../img/slide_31.jpg"); }

.slide-32 { background-image: url("../img/slide_32.jpg"); }

.slide-33 { background-image: url("../img/slide_33.jpg"); }

.slide-34 { background-image: url("../img/slide_34.jpg"); }

.slide-35 { background-image: url("../img/slide_35.jpg"); }

.slide-36 { background-image: url("../img/slide_36.jpg"); }

.slide-37 { background-image: url("../img/slide_37.jpg"); }

.slide-38 { background-image: url("../img/slide_38.jpg"); }

.slide-39 { background-image: url("../img/slide_39.jpg"); }

.slide-40 { background-image: url("../img/slide_40.jpg"); }

.slide-41 { background-image: url("../img/slide_41.jpg"); }

.slide-42 { background-image: url("../img/slide_42.jpg"); }

.slide-43 { background-image: url("../img/slide_43.jpg"); }

.slide-44 { background-image: url("../img/slide_44.jpg"); }

.slide-45 { background-image: url("../img/slide_45.jpg"); }

.slide-46 { background-image: url("../img/slide_46.jpg"); }

.slide-47 { background-image: url("../img/slide_47.jpg"); }

.slide-48 { background-image: url("../img/slide_48.jpg"); }

.slide-twentyseven { background-image: url("../img/slide_49.jpg"); }

.slide-twentyeight { background-image: url("../img/slide_50.jpg"); }



.slide h1 {
  opacity: 0;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform .5s .5s, opacity .5s;
  transition: transform .5s .5s, opacity .5s;
}

.slide .prev, .slide .next { opacity: 0; }

input#slide-1:checked ~ header label#slide-1, input#slide-2:checked ~ header label#slide-2, input#slide-3:checked ~ header label#slide-3 { background: #2e353b; }

[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  -webkit-transition: left .65s ease-out;
  transition: left .65s ease-out;
}

[id^="slide"]:checked + .slide h1 {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all .5s .5s;
  transition: all .5s .5s;
}

[id^="slide"]:checked + .slide .prev, [id^="slide"]:checked + .slide .next {
  opacity: 1;
  -webkit-transition: all .5s .5s;
  transition: all .5s .5s;
}