@font-face {
   font-family: "GTEesti";
   src: url("fonts/GT-Eesti-Display-Regular.woff") format("woff"),
      url("fonts/GT-Eesti-Display-Regular.woff2") format("woff2");
}

html, body{margin: 0; padding: 0; box-sizing: border-box; width: 100%; height: 100%;overflow: hidden;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -o-text-size-adjust: none;
  -webkit-text-size-adjust: none;}
html {
}
body {
    width: 100%;
    font-family: "GTEesti";
    font-size: 0.8em;
    background-color: #000;
    -webkit-text-size-adjust: none;
}

.credits{
  font-size: 80%;
  color: #FFF;
  width: 95.8%;
  left: 2.1%;
  height: 3.3%;
  position: fixed;
  bottom: 0;
  letter-spacing: 0.12em;
}
.credits a{
  color: #FFF;
  text-decoration: none;
}

.credits ul{
  margin: 0;
  padding: 0;
  height: 100%;
}
.credits li{
  position: relative;
  list-style-type: none;
  float: left;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.credits li:last-of-type{
  float: right;
}

.video{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  max-width: 95%;
  width: 650px;
}

.video img{
  position: relative;
  max-width: 100%;
  height: auto;
}

#intro{
  max-width: 100%;
  height: auto;
  width: 650px;
  left: 50%;
  position: relative;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  background-color: #FFF;
}

.texte-intro{
  color: #FFF;
  text-align: right;
  font-size: 1em;
  letter-spacing: 1pt;
}

#intro::-webkit-media-controls-play-button{display: none;}
#intro::-webkit-media-controls-volume-slider{display: none;}
#intro::-webkit-media-controls-mute-button{display: none;}
#intro::-webkit-media-controls-fullscreen-button{display: none;}
#intro::-webkit-media-controls-time-remaining-display{display: none;}
#intro::-webkit-media-controls-current-time-display{display: none;}
#intro::-webkit-media-controls-toggle-closed-captions-button{display: none;}
#intro::-internal-media-controls-download-button {display:none;}

#bouton-passer{
  right: 0;
  position: absolute;
  font-size: 1em;
  display: block;
  cursor: pointer;
  padding-top: 0.2em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  user-select: none;
  -webkit-user-select: none;
}

.contanim{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  margin: -5px;
}

#animation{
  width: 100%;
  height: 100%;
  display: none;
}

.texte{
  color: #FFF;
  opacity: 100%;
  transition-duration: 0.3s;
  position: fixed;
  margin: 0;
  padding: 0;
  top: calc(3.79% - 5px);
  left: calc(2.32% - 5px);
  width: calc(95.36% + 10px);
  height: 3.3%;
}

.texte li{
  list-style-type: none;
  float: left;
  width: 2.1%;
  height: 100%;
  text-align: center;
  margin-right: 0.41%;
}

.texte li div{
    position: relative;
  top: 50%;
  margin-top: 0.05em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}


.nom li{
  float: right;
  margin-left: 0.41%;
  margin-right: 0;
}


.bouton{
  position: fixed;
  margin: 0;
  padding: 0;
  top: calc(81.498% + 5px);
  left: 2.32%;
  width: 95.36%;
  height: 15.006003%;
}

.bouton div{
  position: relative;
  width: 100%;
  text-align: center;
top: 50%;
margin-top: 0.05em;
transform: translateY(-50%);
text-transform: uppercase;
letter-spacing: 0.2em;
-webkit-user-select:none;
user-select:none;
}


.bouton{
  top: calc(81.198% + 5px);
   left: calc(2.32% - 5px);
   width: calc(95.36% + 10px);
}

.bouton-click {
  animation: blinker 0.9s linear infinite;
  cursor: pointer;
}

@keyframes blinker {
  70% {
    opacity: 0.4;
  }
}



.letexte{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  top: calc(3.79% - 5px);
  left: calc(2.32% - 5px);
  width: calc(95.36% + 10px);
  height: 93.84%;
  text-align: center;
  display: none;
  opacity: 0;
}

.partie1, .partie2{
  height: 45.4%;
  color: #000;
  overflow: hidden;
}

.bande{
  height: 9.2%;
  color: #FFF;
  text-transform: uppercase;
}

.titexte{
  width: 93%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  position: relative;
  line-height: 1.5;
}

.bande .titexte{
  letter-spacing: 0.3em;
}

@media only screen and (max-width: 800px) and (orientation: landscape) {
    body{
    font-size: 10px;

  }
  .video{
    display: none;
  }

  .credits{
    height: 2%;
  }

}

@media only screen and (orientation : portrait) {
  body{
    font-size: 10px;

  }

  .nom, .prenom, .texte-intro{
    font-size: 6px;
  }

  .contanim{
    margin-left: 5px;
    margin-right: 5px;
  }
  .texte{
    left: calc(2.32% + 5px);
    width: calc(95.36% - 10px);
  }

.partie1, .partie2{
  font-size: 9px;
}

.credits{
  height: 3%;
  width: 94%;
  left: 3.3%;
  font-size: 5.2px;
}

}

/*   13" 15"   */
@media all and (min-width: 768px) and (max-width: 1480px) {
  body{
    font-size: 0.88em;
  }

  .letexte{
    font-size: 1.5em;
  }

}


/*   graaaaaaand  */
@media all and (min-width: 1480px) and (max-width: 1920px) {
  body{
    font-size: 1em;
  }

  .letexte{
    font-size: 1.5em;
  }

}

/*
  .contanim{
    margin-top: -25px;
    margin-bottom: -25px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .texte{
    top: calc(3.79% - 22.8px);
    left: 2.32%;
    width: 95.36%;
    height: 3.4%;
  }

  .bouton{
    top: calc(81.498% + 15px);
    left: 2.32%;
    width: 95.36%;
    height: 16.006003%;
  }

  .letexte{
    top: calc(3.79% - 10px);
    left: 2.32%;
    width: 95.36%;
    height: 93.84%;
  }*/











/*@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
  body{
    font-size: 0.9em;
    background: #0FF;

  }


  .contanim{
    margin-top: -25px;
    margin-bottom: -25px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .texte{
    top: calc(3.79% - 22.8px);
    left: 2.32%;
    width: 95.36%;
    height: 3.4%;
  }

  .bouton{
    top: calc(81.498% + 15px);
    left: 2.32%;
    width: 95.36%;
    height: 16.006003%;
  }

  .letexte{
    top: calc(3.79% - 10px);
    left: 2.32%;
    width: 95.36%;
    height: 93.84%;
  }
}*/

/*@media only screen
    and (min-device-width : 375px) // or 213.4375em
    and (max-device-width : 667px) // or 41.6875em
    and (width : 375px) // or 23.4375em
    and (height : 559px) // or 34.9375em
    and (orientation : portrait)
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{

  body{
    font-size: 0.9em;
    background: #0FF;

  }


  .contanim{
    margin-top: -25px;
    margin-bottom: -25px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .texte{
    top: calc(3.79% - 22.8px);
    left: 2.32%;
    width: 95.36%;
    height: 3.4%;
  }

  .bouton{
    top: calc(81.498% + 15px);
    left: 2.32%;
    width: 95.36%;
    height: 16.006003%;
  }

  .letexte{
    top: calc(3.79% - 10px);
    left: 2.32%;
    width: 95.36%;
    height: 93.84%;
  }

}*/


/*@media (min-width: 320px) and (max-width: 480px) {
  body{
    font-size: 0.7em;
    background: #0FF;

  }


  .contanim{
    margin-top: -25px;
    margin-bottom: -25px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .texte{
    top: calc(3.79% - 22.8px);
    left: 2.32%;
    width: 95.36%;
    height: 3.4%;
  }

  .bouton{
    top: calc(81.498% + 15px);
    left: 2.32%;
    width: 95.36%;
    height: 16.006003%;
  }

  .letexte{
    top: calc(3.79% - 10px);
    left: 2.32%;
    width: 95.36%;
    height: 93.84%;
  }


}*/

/*@media (min-width: 480px) and (max-width: 768px) {
  body{
    background: #0FF;

    font-size: 0.8em;
  }


  .contanim{
    margin-top: -25px;
    margin-bottom: -25px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .texte{
    top: calc(3.79% - 22.8px);
    left: 2.32%;
    width: 95.36%;
    height: 3.4%;
  }

  .bouton{
    top: calc(81.498% + 15px);
    left: 2.32%;
    width: 95.36%;
    height: 16.006003%;
  }

  .letexte{
    top: calc(3.79% - 10px);
    left: 2.32%;
    width: 95.36%;
    height: 93.84%;
  }


}*/


/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  body{
    font-size: 0.8em;
    background: #0FF;
  }


  .contanim{
    margin-top: -25px;
    margin-bottom: -25px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .texte{
    top: calc(3.79% - 22.8px);
    left: 2.32%;
    width: 95.36%;
    height: 3.4%;
  }

  .bouton{
    top: calc(81.498% + 15px);
    left: 2.32%;
    width: 95.36%;
    height: 16.006003%;
  }

  .letexte{
    top: calc(3.79% - 10px);
    left: 2.32%;
    width: 95.36%;
    height: 93.84%;
  }

}*/

/*@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  body{
    font-size: 0.8em;
    background: #0FF;
  }


  .contanim{
    margin-top: -25px;
    margin-bottom: -25px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .texte{
    top: calc(3.79% - 22.8px);
    left: 2.32%;
    width: 95.36%;
    height: 3.4%;
  }

  .bouton{
    top: calc(81.498% + 15px);
    left: 2.32%;
    width: 95.36%;
    height: 16.006003%;
  }

  .letexte{
    top: calc(3.79% - 10px);
    left: 2.32%;
    width: 95.36%;
    height: 93.84%;
  }

}*/