.video{
  width: 100%;
  margin-bottom: 20px;
  background-color: #121212;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video .videoLogo{
  display: none;
}


.btnAnim{
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.btnAnim img{
  height: 45px;
  width: auto;
  transition: all 0.5s ease;
  filter: invert(1);
}
.btnAnim img:hover{
  cursor: pointer;

}
.btnAnim h2{
  font-size: 18px;
  color: #fff;
}


.videoLayout{
  position: relative;
  background-color: #121212;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 2;
}

.btnAnimation{
  animation: screenOpacity 2s ease forwards;
}

.logoAnimation{
  position: absolute;
}

.logoAnimation .textContainer{
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-60%);
}

.logoAnimation h1{
  position: relative;
  font-size: 130px;
  letter-spacing: 2px;
  color: #fff;
  font-weight: 100;
}

.logoAnimation .barreVerticale{
  width: 10px;
  height: 240px;
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}

.logoAnimation .barreHorizontale{
  width: 80px;
  height: 9.5px;
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}



.logoAnimation .barreHorizontale:nth-child(2){
  transform: translateX(-210px) translateY(-17.5px);
  transform-origin: right;
}
.logoAnimation .barreHorizontale:nth-child(4){
  transform: translateX(110px) translateY(-17.5px);
  transform-origin: left;
}


.logoAnimation .barreVerticale:nth-child(1){
  transform: translateX(-235px) translateY(-55%);
}
.logoAnimation .barreVerticale:nth-child(5){
  transform: translateX(210px) translateY(-55%);
}




.barreGauche{
  animation: animBarreG 4s ease 0.1s forwards, barreClose 1s ease 4.1s forwards;
}
.barreDroite{
  animation: animBarreD 4s ease 0.1s forwards, barreClose 1s ease 4.1s forwards;
}
.batonGauche{
  animation: animBarreHorizontaleGauche 2s ease 0.1s forwards;
}
.batonDroit{
  animation: animBarreHorizontaleDroite 2s ease 0.1s forwards;
}
.texteAnim{
  animation: textClose 1.4s ease 2.45s forwards;
}

@keyframes animBarreHorizontaleGauche {
  50%{
    transform: translateX(-210px) translateY(5px) scaleX(1);
  }
  100%{
    transform: translateX(-210px) translateY(5px) scaleX(0);
  }
}
@keyframes animBarreHorizontaleDroite {
  50%{
    transform: translateX(110px) translateY(-40px) scaleX(1);
  }
  100%{
    transform: translateX(110px) translateY(-40px) scaleX(0);
  }
}

@keyframes animBarreG {
  50%{
    transform: translateX(-235px) translateY(-55%);
  }
  100%{
    transform: translateX(-50%) translateY(-55%);
  }
}

@keyframes animBarreD {
  50%{
    transform: translateX(210px) translateY(-55%);
  }
  100%{
    transform: translateX(-50%) translateY(-55%);
  }
}

@keyframes barreClose {
  100%{
    transform: translateX(-50%) translateY(-55%) scaleY(0);
  }
}


@keyframes textClose {
  100%{
    width: 0;
  }
}

@keyframes screenOpacity {
  100%{
    opacity: 0;
  }
}

@keyframes videoOpacity {
  100%{
    opacity: 1;
  }
}

.videoAnimation{
  animation: videoOpacity 3s ease 5s forwards;
}


video{
  width: 100vw;
  height: auto;
  opacity: 0;
}

.videoContainer{
  position: absolute;
  top: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  width: 100%;
  border-radius: 0px;
  border-top: none;
  opacity: 1;
}


@media (max-width: 840px) {

  .video{
    height: calc(100vh - 65px);
    width: 100%;
  }

  .videoLogo{
    display: flex !important;
    width: 70vw;
    height: auto;
    position: absolute;
    top: 40%;
    transform: translateX(1vw);
  }
  
  .videoContainer{
    display: none;
  }

  .videoLayout{
    display: none;
  }

  .btnAnim{
    position: absolute;
    bottom: 10%;
    transform: translateX(-50%);
  }

}