div.conteiner{
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}

section{
  min-height: 100vh;
  height: auto;
}

section#s1, section#s1-mac, section#s14, section#s16{
  z-index: 100;
}

section#s1, section#s1-mac{
  height: 100vh;
}

div.videos-scroll{
  height: auto;
  /*pointer-events: none;*/
}

div.videos-scroll-text.black{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

div.clients{
  height: auto;
}

div.re-bottom{
  background: transparent;
}

div.reb-center p, div.reb-center a{
  color: #000;
}

div.reb-content{
  border-bottom: 1px solid #000;
}

div.roseland-end{
  margin-top: auto;
}

div.re-top{
  height: auto;
}

div.videos-scroll-text.black span.gray{
  color: #CCC;
  white-space: normal;
}

div.videos-scroll-text.black span.white{
  color: #FFF;
}

div.cl-intro{
  background-color: #000;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-shrink: 0;
  position: relative;
}

div.cl-intro h1{
  font-size: 100px;
  top: -68px;
  display: block;
}

div.cl-intro img.cl-intro-back{
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
}

@media screen and (max-width:300px) and (max-height:640px) {
  section.home video{
    height: calc(100% + 50px);
    margin-top: -50px;
  }

  div.s1-message{
    width: 55%;
    bottom: 30vh;
  }

  @keyframes arrowIphone {
    0% {bottom: 90px;}
    50% {bottom: 100px;}
    100% {bottom: 90px;}
  }

  section a.arrow{
    animation-name: arrowIphone;
  }

}


@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

    @keyframes arrowIphoneFix {
      0% {bottom: 100px;}
      50% {bottom: 110px;}
      100% {bottom: 100px;}
    }

    section a.arrow{
      animation-name: arrowIphoneFix;
    }
}