* {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.3;
  font-family: 'Noto Kufi Arabic';
  display: flex;
  flex-direction: column;
  height: 100vh;
}
 
body .wrapper {
  flex: 1 0 auto;
}

section {
  background: #FFFFFF;
}
section.motion {
  background: transparent;
  text-align: center;
  color: #FFFFFF;
  position: relative;
  height: 100px; 
}
section.motion::before {
  content: "";
  background-color:black;
  opacity: 0.5;
  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;
}
section.motion .slideshow .slide img {
  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 {
  font-size: 3.5em;
  margin-top:30vh;
  color:#EFEFEF; text-transform:uppercase; font-size:80px; margin-bottom:30px
}
section.motion p {
  max-width: 860px;
  font-size: 24px;
  margin: 0 auto 3em; color:#B4B4B4; font-weight:300; text-transform:uppercase
}
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 h1 {
        font-size: 2.9em !important;
        margin-top: 0;
        color: #EFEFEF;
        text-transform: uppercase;
        font-size: 80px;
        margin-bottom: 30px;
        padding-top: 40vh
    }
    section.motion p {
  max-width: 860px;
  font-size: 20px;
  margin: 0 auto 3em; color:#B4B4B4; font-weight:300; text-transform:uppercase
}
    section.motion .slideshow .slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
  height:100vh;
}
section.motion .slideshow .slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  height:100%
}
}