body {
  margin: 0px;
}

@font-face {
    font-family: Gotham-Medium;
    src: url(/fonts/Gotham-Medium.otf);
}

.page {
  float: left;
  width: 100vw;
  height: 100vh;
}

.docScroller {
  overflow-x: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-scroll-snap-points-y: repeat(100%);
      -ms-scroll-snap-points-y: repeat(100%);
          scroll-snap-points-y: repeat(100%);
  -webkit-scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
          scroll-snap-type: mandatory;
  -webkit-scroll-snap-destination: 100% 0%;
      -ms-scroll-snap-destination: 100% 0%;
          scroll-snap-destination: 100% 0%;
}

.inside {
  width: 80vw;
  margin: 10vh 0 0 10vw;
  height: 80vh;
  text-align: center;
}


/* Header Text Section */
.rw-wrapper{
  width: 50%;
  position: relative;
  margin: 10px auto 0 auto;
  padding: 10px;
  font-size: 10px;
}

.rw-sentence{
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
  color: #444;
  white-space: nowrap;
  font-size: 200%;
  font-weight: normal;
}

.rw-words{
  display: inline;
  text-indent: 10px;
}

.rw-words span{
  position: absolute;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  color: #88a5d6;
}

.rw-words-1 span{
  animation: rotateWordsFirst 18s linear infinite 0s;
}

.rw-words-2 span{
  animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
  animation-delay: 3s; 
  color: #88a5d6;
}
.rw-words span:nth-child(3) { 
  animation-delay: 6s; 
  color: #88a5d6; 
}
.rw-words span:nth-child(4) { 
  animation-delay: 9s; 
  color: #88a5d6;
}
.rw-words span:nth-child(5) { 
  animation-delay: 12s; 
  color: #88a5d6;
}
.rw-words span:nth-child(6) {  
  animation-delay: 15s; 
  color: #88a5d6;
}

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
  25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
  20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

.one {
}

.one_content {
  padding-top: 40px;
  font-size: 45px;
  font-family: Gotham-Medium;
}

.small {
  width: 400px;
  padding-top: 100px;
  margin: 0px auto;
  font-size: 16px;
  text-transform: uppercase;
}

.smaller {
  width: 400px;
  padding-top: 100px;
  margin: 0px auto;
  font-size: 10px;
  text-transform: uppercase;
}

.smallest {
  color: #FFF;
  width: 400px;
  padding-top: 50px;
  margin: 0px auto;
  font-size: 18px;
  text-transform: uppercase;
}

.smallestest {
  color: #F0F0F0;
  font-size: 8px;
}
.two {
  background: #88a5d6;
}

.three {
  background: red;
}

.four {
  background: orange;
}