@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap");
/*font-family: 'Playfair Display', serif;*/
html {
  font-size: 10px;
  color: black;
  cursor: url("../Assets/cursor-mini.png"), auto;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Playfair Display", serif;
  background-color: #d1b33b;
  overflow: hidden;
}

a:hover, #icon:hover {
  cursor: url("../Assets/cursor-mini.png"), auto;
}

#cursor {
  height: 4rem;
  width: 4rem;
  background: #a31717;
  border-radius: 50%;
  position: absolute;
  display: none;
  transition: 0.3s;
  transition-timing-function: ease-out;
}

div:hover ~ #cursor {
  transform: scale(0.5);
}

.slide {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
  position: relative;
}

.blocHorizontal {
  display: flex;
  flex-direction: row;
  width: 660vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

#container-slides {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-x: hidden;
  /*pour mozilla et ie*/
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar {
  width: 1.5rem;
}

::-webkit-scrollbar-thumb {
  background: #141414;
}

.one {
  background-color: #d1b33b;
}

.two {
  background-color: #30548a;
  width: 230vw;
}

.three {
  background-color: #6d3434;
  width: 130vw;
}

.four {
  background-color: #D5D5D5;
}

.five {
  background-color: #141414;
  color: #D5D5D5;
}

#container-nav {
  z-index: 1;
  position: absolute;
  top: 10%;
  left: 3%;
  overflow: hidden;
  transition: box-shadow 1s;
}

#wrapper-nav {
  display: flex;
  flex-direction: column;
  border-left: 0.2rem solid #141414;
  padding: 2rem;
  overflow: hidden;
}
#wrapper-nav a {
  z-index: 2;
  color: #141414;
  font-size: 2.5rem;
  text-decoration: none;
  border-bottom: solid 0.1rem #141414;
  text-align: left;
  width: 20%;
  transition: 0.6s ease-in;
  margin-bottom: 1rem;
  animation: translate-left-to-right 2.5s;
}
#wrapper-nav a:hover {
  color: white;
  width: 100%;
}

/*Premiere slide*/
.container-slide {
  align-items: flex-end;
  justify-content: center;
  display: flex;
}
.container-slide .container-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30%;
  overflow: hidden;
  position: relative;
}
.container-slide .container-text h2 {
  font-size: 6rem;
  margin-bottom: 15vh;
  animation: translate-right-to-left 3s ease;
}
.container-slide .container-text .middle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.container-slide .container-text .mouse {
  width: 6rem;
  height: 10rem;
  border: 0.4rem solid #333;
  border-radius: 6rem;
}
.container-slide .container-text .mouse::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  background: #333;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 1;
  animation: mouse 2s infinite;
}
.container-slide h3 {
  font-size: 2.5rem;
  text-align: justify;
  margin-right: 2.5rem;
  padding-bottom: 1rem;
  animation: translate-down-to-up 2s ease;
}
.container-slide .card {
  height: 80vh;
  width: 50vw;
  background-color: #141414;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(rgba(0, 0, 0, 0), black), url(http://cinema-athena.fr/wp-content/uploads/2021/03/frequentation-salles-cinema-cesse-daugmenter-atteint-20112156-millions-dentrees_0_1399_933-1024x683.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  animation: fade 2.5s;
}
.container-slide .card::before {
  content: "01 - Charles-Adrien Vlamynck";
  position: absolute;
  font-size: 6rem;
  top: -6%;
  color: rebeccapurple;
  background: linear-gradient(#141414 60%, #ebc119 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container-slide .card a {
  display: flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  height: 15rem;
  width: 15rem;
  right: -5%;
  bottom: -5%;
  font-size: 3rem;
  border-radius: 50%;
  background-color: #D5D5D5;
  color: #000;
  position: absolute;
  transition: 0.8s ease;
}
.container-slide .card a:hover {
  background-color: #141414;
  color: #D5D5D5;
  height: 16rem;
  width: 16rem;
}
.container-slide .card h2 {
  margin: 0;
  font-size: 10rem;
  color: #fff;
  transform-origin: bottom left;
  transform: rotate(-90deg) translateY(100%);
  animation: 5s ease fade;
}

/*Fin première slide*/
/*Deuxième slide*/
.container-slide-two {
  align-items: flex-end;
  justify-content: center;
  display: flex;
}
.container-slide-two .background-1 {
  height: 70vh;
  width: 55vw;
  margin-right: 10vw;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url(https://images.pexels.com/photos/4595636/pexels-photo-4595636.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.3s;
  position: relative;
}
.container-slide-two .background-1::before {
  content: "02.1 - Faites vivre vos projets";
  position: absolute;
  font-size: 9rem;
  width: 113%;
  top: 40%;
  left: -5%;
  background: linear-gradient(#d1b33b 60%, #D5D5D5 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container-slide-two .background-1:hover {
  filter: grayscale(100%);
  transform: scale(0.98);
}
.container-slide-two #container-background-2 {
  display: flex;
  flex-direction: column;
}
.container-slide-two .background-2 {
  height: 75vh;
  width: 60vw;
  margin-right: 5vw;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)), url(https://images.pexels.com/photos/7909364/pexels-photo-7909364.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.3s;
  position: relative;
}
.container-slide-two .background-2::before {
  content: "02.2 - Une équipe à votre disposition";
  position: absolute;
  font-size: 8rem;
  width: 112%;
  bottom: -5%;
  left: -5%;
  background: linear-gradient(#9c3535 60%, #d1b33b 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container-slide-two .background-2:hover {
  filter: grayscale(100%);
  transform: scale(0.98);
}
.container-slide-two .background-2 a {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  text-decoration: none;
  height: 15rem;
  width: 15rem;
  left: 50%;
  top: -10%;
  transform: translateX(-50%);
  font-size: 2.2rem;
  border-radius: 50%;
  background-color: #d1b33b;
  color: #000;
  position: absolute;
  transition: 0.8s ease;
}
.container-slide-two .background-2 a:hover {
  background-color: #141414;
  color: #D5D5D5;
  height: 16rem;
  width: 16rem;
}
.container-slide-two .container-text-two {
  margin-left: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 15%;
  overflow: hidden;
  position: relative;
}
.container-slide-two .container-text-two h2 {
  font-size: 6rem;
  margin-bottom: 15vh;
}
.container-slide-two .container-text-two .middle-two {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.container-slide-two .container-text-two .mouse-two {
  width: 10rem;
  height: 8rem;
  border: 0.4rem solid #333;
  border-radius: 1rem;
}
.container-slide-two .container-text-two .mouse-two::after {
  content: "";
  width: 7rem;
  height: 0.5rem;
  border-radius: 1rem;
  background: #333;
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
}
.container-slide-two .container-text-two .mouse-two::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  background: #333;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 1;
  animation: line 2s infinite;
}
.container-slide-two h3 {
  font-size: 2.5rem;
  text-align: justify;
  margin-right: 2.5rem;
  padding-bottom: 1rem;
}
.container-slide-two .card-two {
  margin-right: 10vw;
  height: 80vh;
  width: 50vw;
  background-color: #141414;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(rgba(0, 0, 0, 0), black), url(https://images.pexels.com/photos/5314213/pexels-photo-5314213.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.container-slide-two .card-two::before {
  content: "02 - Charles-Adrien Vlamynck";
  position: absolute;
  font-size: 6rem;
  top: -6%;
  background: linear-gradient(#141414 60%, #2664c0 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container-slide-two .card-two a {
  display: flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  height: 15rem;
  width: 15rem;
  right: -5%;
  bottom: -5%;
  font-size: 2.5rem;
  border-radius: 50%;
  background-color: #141414;
  color: #D5D5D5;
  position: absolute;
  transition: 0.8s ease;
}
.container-slide-two .card-two a:hover {
  background-color: #D5D5D5;
  color: #141414;
  height: 16rem;
  width: 16rem;
}
.container-slide-two .card-two h2 {
  margin: 0;
  font-size: 10rem;
  color: #fff;
  transform-origin: bottom left;
  transform: rotate(-90deg) translateY(100%);
}

/*Fin deuxième slide*/
/*Début troisieme slide*/
.container-slide-three {
  align-items: flex-end;
  justify-content: center;
  display: flex;
}
.container-slide-three .avm {
  margin-right: 2vw;
  height: 80vh;
  width: 35vw;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url(https://images.pexels.com/photos/34140/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500);
  background-repeat: no-repeat;
  background-size: cover;
  color: #D5D5D5;
  position: relative;
}
.container-slide-three .avm h3 {
  position: absolute;
  top: -10%;
  left: -15%;
  font-size: 6rem;
  width: 120%;
  text-align: center;
  margin: 3rem;
  background: linear-gradient(#141414 50%, #D5D5D5 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container-slide-three .avm h4 {
  position: absolute;
  bottom: 0%;
  margin: 2rem;
  font-size: 5rem;
}
.container-slide-three .avm h4::after {
  content: "";
  display: block;
  width: 10%;
  height: 1rem;
  background-color: #D5D5D5;
  bottom: 0%;
}
.container-slide-three .container-text-three {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20%;
  margin: 0 2rem;
  overflow: hidden;
  position: relative;
}
.container-slide-three .container-text-three h2 {
  font-size: 6rem;
  margin-bottom: 15vh;
}
.container-slide-three .container-text-three .middle-three {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.container-slide-three .container-text-three .mouse-three {
  width: 6rem;
  height: 10rem;
  border: 0.4rem solid #333;
  border-radius: 6rem;
}
.container-slide-three .container-text-three .mouse-three::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  background: #333;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 1;
  animation: mouse 2s infinite;
}
.container-slide-three h3 {
  font-size: 2.5rem;
  text-align: justify;
  margin-right: 2.5rem;
  padding-bottom: 1rem;
}
.container-slide-three .card-three {
  height: 80vh;
  width: 50vw;
  margin-right: 2rem;
  background-color: #141414;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url(https://images.pexels.com/photos/2047905/pexels-photo-2047905.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.container-slide-three .card-three::before {
  content: "03 - Robin Pluviaux";
  position: absolute;
  font-size: 6rem;
  top: -6%;
  background: linear-gradient(#141414 60%, #973636 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container-slide-three .card-three a {
  display: flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  height: 15rem;
  width: 15rem;
  right: -5%;
  top: -5%;
  font-size: 2.5rem;
  border-radius: 50%;
  background-color: #d1b33b;
  color: #000;
  position: absolute;
  transition: 0.8s ease;
}
.container-slide-three .card-three a:hover {
  background-color: #141414;
  color: #D5D5D5;
  height: 16rem;
  width: 16rem;
}
.container-slide-three .card-three h2 {
  margin: 0;
  font-size: 6rem;
  color: #fff;
  transform-origin: bottom left;
  transform: rotate(-90deg) translateY(100%);
}

/*Fin Troisieme slide*/
/*Début quatrieme slide*/
.container-slide-four {
  align-items: flex-end;
  justify-content: center;
  display: flex;
}
.container-slide-four .container-text-four {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30%;
  overflow: hidden;
  position: relative;
}
.container-slide-four .container-text-four h2 {
  font-size: 5.5rem;
  margin-bottom: 15vh;
}
.container-slide-four .container-text-four .middle-four {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.container-slide-four .container-text-four .mouse-four {
  width: 10rem;
  height: 8rem;
  border: 0.4rem solid #333;
  border-radius: 1rem;
}
.container-slide-four .container-text-four .mouse-four::after {
  content: "";
  width: 7rem;
  height: 0.5rem;
  border-radius: 1rem;
  background: #333;
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
}
.container-slide-four .container-text-four .mouse-four::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  background: #333;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 1;
  animation: line 2s infinite;
}
.container-slide-four h3 {
  font-size: 2.5rem;
  text-align: justify;
  margin-right: 2.5rem;
  padding-bottom: 1rem;
}
.container-slide-four .card-four {
  height: 80vh;
  width: 50vw;
  background-color: #141414;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url(https://images.pexels.com/photos/416405/pexels-photo-416405.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.container-slide-four .card-four::before {
  content: "04 - Vous";
  position: absolute;
  font-size: 6rem;
  top: -6%;
  background: linear-gradient(#141414 60%, #fff 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container-slide-four .card-four a {
  display: flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
  height: 15rem;
  width: 15rem;
  right: -5%;
  bottom: -5%;
  font-size: 3rem;
  border-radius: 50%;
  background-color: #141414;
  color: #D5D5D5;
  position: absolute;
  transition: 0.8s ease;
}
.container-slide-four .card-four a:hover {
  background-color: #D5D5D5;
  color: #141414;
  height: 16rem;
  width: 16rem;
}
.container-slide-four .card-four h2 {
  margin: 0;
  font-size: 6.5rem;
  color: #fff;
  transform-origin: bottom left;
  transform: rotate(-90deg) translateY(100%);
}

/*Fin quatrieme slide*/
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #3f2424;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader-wrapper .loader {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  position: relative;
  border: 4px solid #fff;
  animation: loader 3s infinite ease;
}
.loader-wrapper .loader .loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 3s infinite ease-in;
}

#song {
  border-radius: 50%;
  top: 5%;
  right: 3%;
  position: absolute;
}

#icon {
  box-shadow: 5px 5px 10px #141414;
  width: 10vh;
  cursor: pointer;
}

#icon-slide {
  position: absolute;
  bottom: 0%;
  left: 1%;
  height: 10vh;
  width: auto;
}

/*Animation*/
@keyframes mouse {
  0% {
    opacity: 1;
    top: 1rem;
  }
  100% {
    opacity: 0;
    top: 8rem;
  }
}
@keyframes line {
  0% {
    opacity: 1;
    left: 2rem;
  }
  100% {
    opacity: 0;
    left: 9rem;
  }
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
    transform: translateY(10rem);
    border-radius: 3rem;
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
    border-radius: 0rem;
  }
}
@keyframes loader-inner {
  0% {
    height: 0%;
  }
  25% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes translate-left-to-right {
  0% {
    transform: translateX(-20rem);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes translate-right-to-left {
  0% {
    transform: translateX(60rem);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes translate-down-to-up {
  0% {
    transform: translateY(20rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
@keyframes translate-up-to-down {
  0% {
    transform: translateY(-10rem);
  }
  100% {
    transform: translateY(0rem);
  }
}

/*# sourceMappingURL=projets.css.map */