* {
  box-sizing: border-box;
}

html {
  font-size: 2em;

}

body {
  background-color: white;
  font-family:'Lausanne';
  margin-left: 0px;
  margin-right: 0px;

}

@font-face {
  font-family: 'Lausanne';
  src: url('../fonts/Lausanne-Regular.eot') format('eot'),
  url('../fonts/Lausanne-Regular.woff') format('woff'),
    url('../fonts/Lausanne-Regular.woff2') format('woff2');
  
}

h1 {
  margin-top: 20px;
  margin-left: 50px;
  font-size: 1em;
}

.cinema:hover {
  color: red;
}

a {
  color: black
}

/* lien non-visité */
a:visited {
  color: black
}

/* lien visité */
a:hover {
  color: red
}

/* lien au survol */
a:active {
  color: red
}

/* lien sélectionné */
/*pagefilms*/


.back {
  margin-left: 45px;
}

.back a:hover {
  color: red;
}

.video1 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin-left: 25%;
  margin-top: 0%;
}


.video-container2 {
  position: relative;
}


.rectfilm1 {
  display: block;
  position: fixed;
  width: 20vw;
  height: 20vw;
  top: 0;
  left: 0;
  background-color: red;
  animation-name: rectfilm1;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  z-index: 100;
}


@keyframes rectfilm1 {
  0% {
    transform: translate(0vw, 0vh);
  }

  15% {
    transform: translate(50vw, 50vh);
  }

  28% {
    transform: translate(20vw, 80vh);
  }

  50% {
    transform: translate(20vw, 30vh) scale(2);
  }

  80% {
    transform: translate(70vw, 2vh) scale(1);
  }

  100% {
    transform: translate(0vw, 0vh);
  }
}



.texte1 {
  font-size: 16px;
  font-size-adjust: none;
  padding-right: 50%;
  margin-left: 50px;
}

.texte2 {
  margin-left: 45px;
  padding-right: 5%;
}

.titre h1 {
  margin-bottom: 0px;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 48px;
  /* Gives that scrolling effect as the typing happens */
  animation: typing 4s steps(40, end), ink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

.texte1:hover {
  color: red;
}

.texte2:hover {
  color: red;
}

.h1 :hover {
  color: red;
}

h1:hover {
  color: red;
}

/*page acceuil*/
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 4px;
}

.column video {
  margin-left: 20px;
  margin-top: 8px;
  vertical-align: middle;
  width: 18%;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid .video-container {
  position: relative;
  width: 50%;
  display: flex;
  padding: 0px;
  overflow: hidden;
}

.grid .video-container video {
  width: 100%;
  background-color: red;
}

.grid .video-container a {
  display: flex;
  background-color: red;
  margin: 3px;
}

.links {
  font-size: 1.1em;
  padding-right: 10%;
  margin-left: 45%;
  margin-top: -16%;
  font-color: black;
}

.links:hover {
  color: white;
}

.stream {
  position: absolute;
  font-size: 1.1em;
  padding-right: 10%;
  margin-left: 5%;
  margin-top: 2%;
  margin-bottom: 20%;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

.stream a {
  animation-name: couleur;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes couleur {
  0% {
    color: white;
  }

  25% {
    color: black;
  }

  50% {
    color: white;
  }

  100% {
    color: black;
  }
}

h4 {
  font-size: 5.5em;
  margin-left: 5%;
  position: absolute;
  margin-top: 300px;
}

.back2 {
  font-size: 1.1em;
  margin-left: 45px;
  margin-top: -3%;
  position: absolute;
}

.back2 a:hover {
  color: white;
}

/*page acceuil*/
.video-1 {
  clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
  animation-name: video-1-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  background-color: red;
}

@keyframes video-1-animation {
  0% {
    clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
  }

  30% {
    clip-path: polygon(0px 0px, 300px 0px, 300px 300px, 0px 300px);
  }

  50% {
    clip-path: polygon(0px 0px, 400px 0px, 400px 300px, 0px 300px);
  }

  80% {
    clip-path: polygon(0px 0px, 600px 0px, 600px 300px, 0px 300px);
  }

  100% {
    clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
  }
}

.video-2 {
  clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
  background-color: red;
  animation-name: video-2-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes video-2-animation {
  0% {
    clip-path: polygon(0px 0px, 300px 0px, 300px 300px, 0px 300px);
  }

  20% {
    clip-path: polygon(0px 0px, 300px 0px, 300px 300px, 0px 300px);
  }

  30% {
    clip-path: polygon(0px 0px, 400px 0px, 400px 300px, 0px 300px);
  }

  70% {
    clip-path: polygon(0px 0px, 600px 0px, 600px 300px, 0px 300px);
  }

  100% {
    clip-path: polygon(0px 0px, 300px 0px, 300px 300px, 0px 300px);
  }
}

.video-3 {
  clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
  background-color: red;
  animation-name: video-3-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes video-3-animation {
  0% {
    clip-path: polygon(0px 0px, 200px 0px, 200px 200px, 0px 200px);
  }

  20% {
    clip-path: polygon(0px 0px, 500px 0px, 500px 500px, 0px 500px);
  }

  30% {
    clip-path: polygon(0px 0px, 400px 0px, 400px 300px, 0px 300px);
  }

  70% {
    clip-path: polygon(0px 0px, 600px 0px, 600px 300px, 0px 300px);
  }

  100% {
    clip-path: polygon(0px 0px, 200px 0px, 200px 200px, 0px 200px);
  }
}

.video-4 {
  clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
  background-color: red;
  animation-name: video-4-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes video-4-animation {
  0% {
    clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
  }

  20% {
    clip-path: polygon(0px 0px, 200px 0px, 200px 200px, 0px 200px);
  }

  30% {
    clip-path: polygon(0px 0px, 400px 0px, 400px 300px, 0px 300px);
  }

  70% {
    clip-path: polygon(0px 0px, 600px 0px, 600px 300px, 0px 300px);
  }

  100% {
    clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);
  }
}


.video-layer {
  position: absolute;
  /**Taille vidéo**/
  width: 47%;
  margin-left: 26%;
  height: auto;
}

.video-layer:hover {
  opacity: 0.5;
}