* {
  box-sizing: border-box;
}

body .wrapper {
  flex: 1 0 auto;
}

section.motion {
  background: transparent;
  text-align: center;
  color: #FFFFFF;
  position: relative;
  height: 90vh; 
}
section.motion::before {
  content: "";
  background-color:#04979a;
  opacity: 0.4;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  z-index: -1;
}
section.motion .slideshow {
  position: absolute;
  z-index: -5;
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
section.motion .slideshow .slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
  width:100%
}
section.motion .slideshow .slide img {
  display: block;
  width: 100%;
  object-fit: cover;
}
section.motion .slideshow .slide video {
  display: block;
  width: 100%;
  object-fit: cover;
}
section.motion .slideshow .slide.active {
  opacity: 1;
}
section.motion .slideshow .slide.active.right-down {
  animation: right-down 20s infinite linear;
  transform: translate3d(5%, 5%, 0) scale(1.5);
}
section.motion .slideshow .slide.active.right-up {
  animation: right-up 20s infinite linear;
  transform: translate3d(5%, -5%, 0) scale(1.5);
}
section.motion .slideshow .slide.active.left-up {
  animation: right-up 20s infinite linear;
  transform: translate3d(-5%, -5%, 0) scale(1.5);
}
section.motion .slideshow .slide.active.left-down {
  animation: right-up 20s infinite linear;
  transform: translate3d(-5%, 5%, 0) scale(1.5);
}
section.motion h1 {
  padding-top:35vh;
  color:#fff;  font-size:80px; margin-bottom:30px; margin-top:0;  font-family:'fbold'
}
section.motion p{
      max-width: 860px;
      margin: 0 auto 3em;
      margin-top:80px
}
section.motion p a
{

  font-size: 22px;
  color:#fff;  background-color:#04979a ; padding:2px 20px 5px 20px
}
section.motion a {
  color: #FFF;
}
section.motion a.button {
  color: #FFFFFF;
  text-decoration: none;
  border: 1px solid #FFFFFF;
  padding: 0.75em 1em;
  border-radius: 5px;
  transition: color 0.2s, border 0.2s;
}
section.motion a.button:hover {
  color: steelblue;
  border: 1px solid steelblue;
}

@keyframes right-down {
  to {
    transform: translate3d(-5%, -5%, 0) scale(1.25);
  }
}
@keyframes right-up {
  to {
    transform: translate3d(-5%, 5%, 0) scale(1.25);
  }
}
@keyframes left-up {
  to {
    transform: translate3d(5%, 5%, 0) scale(1.25);
  }
}
@keyframes left-down {
  to {
    transform: translate3d(5%, -5%, 0) scale(1.25);
  }
}


@media screen and (max-width: 460px) {

    section.motion {
  background: transparent;
  text-align: center;
  color: #FFFFFF;
  position: relative;
  height: 95vh; 
}
    section.motion h1 {
        font-size: 2.9em !important;
        margin-top: 0;
        text-transform: uppercase;
        font-size: 90px;
        margin-bottom: 30px;
        padding-top: 35vh
    }
section.motion p {
  max-width: 100%;
  font-size: 22px;
  margin: 0 auto 3em; color:#B4B4B4; font-weight:300; text-transform:uppercase; line-height:36px
}
    section.motion .slideshow .slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
  height:100vh;
}
section.motion .slideshow .slide video {
  display: block;
  width: auto;
  object-fit: cover;
  height:100vh;
  text-align:center
}
section.motion .slideshow .slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  height:100%
}
}