* { 
  box-sizing: border-box;
}
html {
  margin: 0;
  background-size: cover;
  background: url("") no-repeat center center fixed;
  background: rgb(0,0,0);
  transition: 2s;
}

.box-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .fullscreen-video {
    position: fixed;
    overflow: hidden;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 5;
    background-color: #000000;
    transform: translateX(-50%) translateY(-50%);
  }

  /*------- SLIDE 1 -------*/

  .bg-img {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transition-duration: 0.3s;
    transition-delay: 4.7s;
  }

.slide-active {
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transition-delay: 8s;
    transition-duration: 0.5s;
    /*box-shadow: -15em 0 6em -4em black inset, 15em 0 6em -4em black inset;*/
  
  }

/*------- SLIDE 2 -------*/

u {
    text-decoration: none;
    color: #ff3f3f;
    text-shadow: 0 2px 2px black, 0 5px 20px rgba(255, 33, 33, 0.25);
  }
  
  font {
    color: #fdfa59;
    font-family: 'Permanent Marker', cursive;
    text-shadow: 0 2px 2px black, 0 5px 20px rgba(253, 250, 89, 0.250);
    font-weight: 100;
    letter-spacing: 1.5px;
    word-spacing: 1px;
    padding-right: 15px;
  }
  
  p {
    position: absolute;
    display: inline-block;
    text-align:center;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 25px;
    color: #e7e7e7;
    font-family: 'Londrina Solid', cursive;
      text-shadow: 0 2px 2px black, 0 5px 20px rgba(255, 255, 255, 0.250);
      letter-spacing: 1.5px;
    word-spacing: 1px;
    margin: auto;
    padding: 28px 0;
    opacity: 1;
    user-select: none;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  .bande-top {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 120px;
    background-image: url("img/line_top.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  
  .bande-bottom {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background-image: url("img/line_bottom.png");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  
  .bg-img img {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    width: auto;
    height: auto;
    background-size: auto;
    background-position: left bottom;
    background-repeat: no-repeat;
    animation: slide;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 4.7s;
    animation-delay: 6.5s;
    opacity: 0;
    transition: 1s;
  }

#playMusic {
  transition: all 0.3s ease;
}

#playMusic:hover {
  transform: translateY(-3px);
}

  @keyframes slide {
    0% {
      opacity:0;
    }
    35% {
      margin-left: -150px;
      opacity:0;
    }
    45% {
      margin-left: 0;
      opacity:1;
    }
  }
  
  @keyframes fade {
    0% {
      opacity:0;
    }
    35% {
      opacity:0;
    }
    45% {
      opacity:1;
    }
  }