html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

@font-face {
  font-family: 'GothamBlack';
  src: url('../fonts/GothamBlack.eot?#iefix') format('embedded-opentype'),  url('../fonts/GothamBlack.woff') format('woff'), url('../fonts/GothamBlack.ttf')  format('truetype'), url('../fonts/GothamBlack.svg#GothamBlack') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GothamBook';
  src: url('../fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),  url('../fonts/Gotham-Book.otf')  format('opentype'),
       url('../fonts/Gotham-Book.woff') format('woff'), url('../fonts/Gotham-Book.ttf')  format('truetype'), url('../fonts/Gotham-Book.svg#Gotham-Book') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'UniversNextArabic';
  src: url('../fonts/UniversNextArabic-Regular.eot?#iefix') format('embedded-opentype'),  url('../fonts/UniversNextArabic-Regular.woff') format('woff'), url('../fonts/UniversNextArabic-Regular.ttf')  format('truetype'), url('../fonts/UniversNextArabic-Regular.svg#UniversNextArabic-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  overflow: hidden;
  background: #20211f;
  font-family: 'GothamBook', sans-serif;
}
.is-arabic {
  direction: rtl;
  font-family: 'UniversNextArabic', sans-serif !important;
  font-size: 1.1em;
}

.intro-video {
  position: absolute;
  width: 100%;
  height: 100%;
}

#canvas {
  display: block;
  position: absolute;
  z-index: 8;
  background-color: rgba(255,255,255,0);
  transform: scale(1.1);
}
#canvas2 {
  display: block;
  position: absolute;
  z-index: 7;
  background-color: rgba(255,255,255,0);
  transform: scale(1.1);
}

.animation,
.loop {
    width: 640px;
    height: 640px;
}

.animation-2,
.loop-2 {
  position: absolute;
  width: 650px;
  height: 650px;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0) scale(.5);
}
.loop-2 {
  top: 40% !important;
}
.animation-2 {
  /*background: url(../images/sprite-1.png);*/
}
.loop-2 {
  /*background: url(../images/sprite-2.png);*/
  z-index: 99;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position-x: 0;
}
.final-call {  
  position: absolute;
  left: 50%;
  bottom: 120px;
  width: 70%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.2em;
  font-family: 'GothamBlack', sans-serif;
}
.final-call .final {
  display: none;
}

#video-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);

}
.intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  text-align: center;
  font-size: 1.9em;
  line-height: .2em;
  letter-spacing: -2px;
  opacity: 0;

}
.intro-text span {
  display: block;
  line-height: 40px;
}
.add-text-anime {
  animation: shine 6s ease-in-out forwards;
}
@keyframes shine {
    0%  {
      transform: translate3d(-50%,-50%,0) scale(.8);
      opacity: 0;
      letter-spacing: -2px;
    }
    10%  {
      transform: translate3d(-50%,-50%,0) scale(1);
      opacity: 1;
    }
    90%  {
      transform: translate3d(-50%,-50%,0) scale(1);
      opacity: 1;
    }
    100%  {
      transform: translate3d(-50%,-50%,0) scale(1);
      opacity: 0;
      letter-spacing: 0px;
    }
  }

:root {
  --myWeight: 100;
}
.intro-logos {
  position: absolute;
  width: 100%;
  height: 100%;

  /*-webkit-mask: -webkit-linear-gradient(black, transparent 30%, black);
  -webkit-mask: linear-gradient(black, transparent 30%, black);
  -webkit-filter: blur(3px);
  mask: url('#mask-linear');
  filter: url('#filtre1');*/
}
.text-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
  width: 300px;
  height: 114px;
  opacity: 0;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: auto;
  transform-style: preserve-3d;
}


.app {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.checking {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  font-family: 'GothamBlack', sans-serif;
}
.checking .timelapse {
  position: absolute;
  width: 0%;
  height: 5px;
  background: #fff;
  left: 0;
  bottom: 0;
  z-index: 99;
}
.checking #checking-text {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  font-size: 1.2em;
  
}
.checking #checking-text span {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
}
.checking #checking-text .checking-text {
  display: none;
}
.checking #checking-text .waiting-text {
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
#console {
  color: #fff;
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .7;
  }
  100% {
    opacity: 1;
  }
}

.intro {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  z-index: 9;

}

.intro .intro-logo {
  width: 40%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,calc(-30% + 150px),0);
  opacity: 0;

  animation-name: intro-logo-anime;
  animation-timing-function: ease-in-out;
  animation-delay: 9s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  z-index: 2;
}

@keyframes intro-logo-anime {
  0% {
    transform: translate3d(-50%,calc(-50% - 80px),0) scale(.4);
    opacity: 0;
  }
  100% {
    transform: translate3d(-50%,calc(-50% - 60px),0) scale(.5);
    opacity: 1;
  }
}

.intro .intro-pack {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translate3d(0,-75%,0);

  animation-name: intro-pack-anime;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes intro-pack-anime {
  0% {
    transform: translate3d(0,-75%,0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0,-200%,0);
    opacity: 0;
  }
}

.intro .intro-title {
  width: 30%;
  height: auto;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  opacity: 0;

  animation-name: intro-title-anime;
  animation-timing-function: ease-in-out;
  animation-delay: 5s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes intro-title-anime {
  0% {
    transform: translate3d(-50%,-50%,0) scale(1.2);
    opacity: 0;
  }
  100% {
    transform: translate3d(-50%,-50%,0) scale(1);
    opacity: 1;
  }
}

.intro .intro-noise {
  position: absolute;
  width: 490px;
  height: 490px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  opacity: 0;
  z-index: 9;
  background-size: cover;
}

.add-noise-move {
  animation-name: intro-noise-anime;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes intro-noise-anime {
  0% {
    transform: translate3d(-50%,-50%,0) scale(0);
    opacity: 0;
  }
  20% {
    transform: translate3d(-50%,-50%,0) scale(.6);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%,-50%,0) scale(.6);
    opacity: 1;
  }
}

.intro .intro-home {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translate3d(0,-50%,0);
  opacity: 0;

  animation-name: intro-home-anime;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes intro-home-anime {
  0% {
    transform: translate3d(0,-50%,0) scale(1.5);
    opacity: 0;
  }
  100% {
    transform: translate3d(0,-50%,0) scale(1);
    opacity: 1;
  }
}

.btn {
  padding: 25px;
  padding-right: 35px;
  padding-left: 35px;
  position: absolute;
  top: calc(100% + 60px);
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid #90908f;
  border-radius: 50px;
  background: transparent;
  text-transform: uppercase;
  color: #90908f;
  font-family: 'GothamBlack';
  z-index: 99;
  width: 70%;
  white-space:nowrap;
  text-align: center;
  cursor: pointer;

  animation-name: btn-anime;
  animation-timing-function: ease-in-out;
  animation-delay: 10s;
  animation-duration: 1s;
  animation-fill-mode: forwards;

  transition: border 1s ease-in-out;
  overflow: hidden;
}
.btn:before {
  content: 'CHECK THE NOISE';
  position: absolute;
  width: 100%;
  height: 100%;
  color: #000;
  background: #fff;
  padding:25px;
  left: 0;
  top: 50%;
  opacity: 0;
  border-radius: 50px;
  transition: all .3s ease-in-out;
}
.btn.is-arabic:before {
  content: ' تحقق من معدل الضوضاء ' !important;
}
.btn:hover:before {
  top: 0;
  opacity: 1;
}
.btn:hover span {
  transform: translateY(-50px);
}

@keyframes btn-anime {
  0% {
    top: calc(100% + 60px);
  }
  100% {
    top: calc(80% + 60px);
  }
}

.intro-logo {
  position: absolute;
  width: 25%;
  left: 50%;
  transform: translate3d(-50%, 0px, 0px);
}

.title-dcb {
  opacity: 0;
  font-family: 'GothamBlack', sans-serif;
}
.title-dcb p {
  margin-top: -20px;
}
.intro-text span,
.btn span,
.result .buy-now span,
.checking #checking-text span,
.title-dcb p {
  /*background: rgb(155,155,154);
  background: rgb(155,155,154);
  background: radial-gradient(circle, rgba(155,155,154,1) 0%, rgba(71,71,70,1) 34%, rgba(68,68,67,1) 50%, rgba(70,70,69,1) 65%, rgba(155,155,154,1) 100%);
  background-size: 200% auto;*/
  
  color: #FFF;
  /*background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: anime-btn 6s linear infinite;*/

}
@keyframes anime-btn {
    to {
      background-position: 200% center;
    }
  }


.bg {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #20211f;
  opacity:1;

  animation-name: bg-anime;
  animation-timing-function: ease-in-out;
  animation-delay: 1.2s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes bg-anime {
  0% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}
.filtre {
  position: absolute;
}

.filtre--l{
  -webkit-mask: -webkit-linear-gradient(black, transparent 30%, black);
  -webkit-mask: linear-gradient(black, transparent 30%, black);
  -webkit-filter: blur(3px);
  mask: url('#mask-test');
  filter: url('#filtre2');
}
.filtre--r{
  -webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
  -webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
  -webkit-filter: blur(5px);
  mask: url('#mask-radial');
  filter: url('#filtre1');
  /*filter: url('#f');*/
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0;
  line-height: 1;
  font-family: "GothamBlack";
  color: white;
  font-size: 5vw;
  font-weight: var(--myWeight);
  text-transform: uppercase;
  letter-spacing: -0.2vw;
  white-space: nowrap;
  overflow: hidden;
  z-index: 8;

  opacity: 0;
}

.result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  display: none;
}
.result .dcb {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.5em;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
}
.result .dcb h2 {
  font-size: 3em;
  position: relative;
  font-family: 'GothamBlack', sans-serif;
  margin: 0;
  padding: 0;

  transform: translate3d(0,-500px,0);
}
.result .discount-wrapper h2,
.result .discount-wrapper p {
  margin: 0;
  padding: 0;
}
.discount-wrapper .level {
  display: none;
}
.result .discount-wrapper h2 {
  font-size: 3em;
}
.result .discount-wrapper p {
  font-size: 1.5em; 
  text-transform: uppercase;
}
.result .pct-top {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 70px;
  left: -50px;
  background-image: url(../images/pct-top.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  transform: translate3d(0, -50%, 0);
  opacity: 0;
}
.result .pct-footer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: calc(50% - 270px);
  left: calc(50% + 60px);
  background-image: url(../images/pct-footer.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  transform: translate3d(-50%, 0, 0);
  opacity: 0;
}

.anime-dcb {
  animation: animeDcb 2.2s ease-in-out forwards;
}
@keyframes animeDcb {
  0% {
    transform: translate3d(0,500px,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}
.result .dcb .plains {
  position: relative;
  z-index: -1;
  top: -82px;
}
.result .dcb .plain {
  font-size: 3em;
  font-family: 'GothamBlack', sans-serif;
  color: #20211f;
  -webkit-text-fill-color: #20211f;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;

  position: absolute;
  left: 50%;
  transform: translate3d(-50%,0,0);
  opacity: 0;
}
.result .discount {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center center;
  display: none;

  animation-name: loopZoom;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes loopZoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
.discount .discount-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}


.result .discount .discount-info {
  position: absolute;
  color: #20211f;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  font-size: 15px;
  

  background: #fff;
  border-radius: 100%;
}
.discount-wrapper {
  font-family: 'GothamBlack', sans-serif;
}
.result .pack {
  width: 100%;
  height: 100%;
  display: none;
  
}

.bg-pack {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate3d(-50%,-50%,0);
  animation: loopPack 30s linear infinite;
}

.result .pack::before {
  content: "";
  position: absolute;
  width: 250%;
  height: 250%;
  top: 40%;
  left: 50%;
  z-index: -1;
  background-color: #20211f;
  background-image: url('../images/bg-pack.png?v=1.0');
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;

  transform: translate3d(-50%,-50%,0);
  animation: loopPack 30s linear infinite;
}
@keyframes loopPack {
  to {
      transform: translate3d(-50%,-50%,0) rotate(359deg);
  }
}
.result .buy-now {
  position: absolute;
  color: #fff;
  padding: 25px;
  padding-right: 35px;
  padding-left: 35px;
  width: 70%;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 50px;
  bottom: 50px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  cursor: pointer;
  font-family: 'GothamBlack', sans-serif;
  cursor: pointer;
  overflow: hidden;
}
.result .buy-now:before {
  content: 'GET COUPON';
  position: absolute;
  width: 100%;
  height: 100%;
  color: #000;
  background: #fff;
  padding:25px;
  left: 0;
  top: 50%;
  opacity: 0;
  border-radius: 50px;
  transition: all .3s ease-in-out;
}
.result .buy-now.is-arabic:before {
  content: 'احصل على القسيمة' !important;
}
.result .buy-now:hover:before {
  top: 0;
  opacity: 1;
}
.result .buy-now:hover span {
  transform: translateY(-50px);
}
.mobile {
  display: none;
}


.form-app {
  width: 100%;
  height: 100%;
  position: absolute;
}
.form-wrapper {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}
.form-wrapper h2 {
  color: #fff;
  text-align: center;
}
.form-wrapper .inputxt {
  width: 100%;  
  border: 0px;
  height: 50px;
  line-height: 50px;
  padding: 10px;
  font-family: 'GothamBook', sans-serif;
  margin-bottom: 30px;
}
.form-wrapper .button {
  padding: 25px;
  padding-right: 35px;
  padding-left: 35px;
  border: 1px solid #fff;
  border-radius: 50px;
  background: transparent;
  text-transform: uppercase;
  color: #fff;
  font-family: 'GothamBlack';
  z-index: 99;
  width: 100%;
  white-space:nowrap;
  text-align: center;
  cursor: pointer;
}
.form-wrapper .inputxt::placeholder {
  color: #ccc;
}
.hidden {
  display: none;
}

@media only screen and (min-width: 600px) {
  /*.app {
    display: none;
  }
  .mobile {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

  }
  .mobile .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    text-align: center;
    color: #fff;
  }
  .mobile .wrapper .logo {
    width: 200px;
    height: auto;
  }*/
  .result .buy-now,
  .btn {
    width: 280px;
  }
  .result .pack::before {
    width: 150%;
  }
  .result .loop-2 {
    transform: translate3d(-50%,-50%,0) scale(.8);
  }
  .intro-logo {
    width: 120px;
  }
  @keyframes intro-noise-anime {
  0% {
    transform: translate3d(-50%,-50%,0) scale(0);
    opacity: 0;
  }
  20% {
    transform: translate3d(-50%,-50%,0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%,-50%,0) scale(1);
    opacity: 1;
  }
}
}