@import url(https://fonts.googleapis.com/css?family=Roboto:300);
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  color: white;
}

body, .horizontal-parent {
  overflow: hidden;
}

.horizontal-parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.horizontal-child {
  position: relative;
  display: block;
  width: 100vh;
  height: 100vw;
  overflow: scroll;
  transform-origin: 100% 0%;
  transform: rotate(-90deg) translateY(-100vh);
}
.horizontal-child .slide {
  z-index: 2;
  display: flex;
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  text-align: center;
  transform-origin: 0% 0%;
}
.horizontal-child .slide:after {
  content: "";
  position: absolute;
  background-image: linear-gradient(#358F49, #358F49);
  background-attachment: fixed;
  background-position: 0 0;
  background-repeat: no-repeat;
  z-index: -1;
}
.horizontal-child .slide:nth-child(1) {
  transform: rotate(90deg) translateY(-100%) translateX(0vw);
  background-color: #ff2b00;
}
.horizontal-child .slide:nth-child(1):after {
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  background-size: 200% 200%;
  transform: scale(1);
}
.horizontal-child .slide:nth-child(2) {
  transform: rotate(90deg) translateY(-100%) translateX(99.9vw);
  background-color: #ff5500;
}
.horizontal-child .slide:nth-child(2):after {
  top: -200%;
  left: -200%;
  width: 400%;
  height: 400%;
  background-size: 400% 400%;
  transform: scale(0.75);
}
.horizontal-child .slide:nth-child(3) {
  transform: rotate(90deg) translateY(-100%) translateX(199.8vw);
  background-color: #ff8000;
}
.horizontal-child .slide:nth-child(3):after {
  top: -300%;
  left: -300%;
  width: 600%;
  height: 600%;
  background-size: 600% 600%;
  transform: scale(0.5);
}
.horizontal-child .slide:nth-child(4) {
  transform: rotate(90deg) translateY(-100%) translateX(299.7vw);
  background-color: #ffaa00;
}
.horizontal-child .slide:nth-child(4):after {
  top: -400%;
  left: -400%;
  width: 800%;
  height: 800%;
  background-size: 800% 800%;
  transform: scale(0.25);
}
.horizontal-child .slide .slide-heading {
  margin: auto;
}
.horizontal-child .slide img {
  display: block;
  width: 50%;
  height: auto;
  margin: auto;
}

#hand-left {
  fill: red;
}

.slide-heading h1 {
  font-size: 7vw;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1vw;
 /* transform: rotate(180deg);*/
}

.slide-heading h2 {
  font-size: 2vw;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1vw;
}

.horizontal-child::-webkit-scrollbar {
  display: none;
}
.horizontal-child::-webkit-scrollbar-track {
  display: none;
}
.horizontal-child::-webkit-scrollbar-thumb {
  display: none;
}
.horizontal-child::-webkit-scrollbar-thumb:window-inactive {
  display: none;
}