@font-face {
    font-family: 'Visby';
    src: url('/fonts/VisbyRegular.woff') format('woff'),
         url('/fonts/VisbyRegular.otf') format('opentype');
}
@font-face {
    font-family: 'VisbyLight';
    src: url('/fonts/VisbyLight.woff') format('woff'),
         url('/fonts/VisbyLight.otf') format('opentype');
}
@font-face {
    font-family: 'VisbyLightItalic';
    src: url('/fonts/VisbyLightItalic.woff') format('woff'),
         url('/fonts/VisbyLightItalic.otf') format('opentype');
}
@font-face {
    font-family: 'VisbyThin';
    src: url('/fonts/VisbyThin.woff') format('woff'),
         url('/fonts/VisbyThin.otf') format('opentype');
}
@font-face {
  font-family: 'VisbyMedium';
  src: url('/fonts/VisbyMedium.woff') format('woff'),
       url('/fonts/VisbyMedium.otf') format('opentype');
}



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    width: 100%;
    height: 100%;
}

body {
  overflow: hidden;
}

a {
  text-decoration: none;
}



/* Largeur de la barre de défilement */
::-webkit-scrollbar {
  width: 4px;
}
/* Couleur de fond de la barre de défilement */
::-webkit-scrollbar-track {
  background-color: #ffffff;
}
/* Couleur de la poignée de défilement */
::-webkit-scrollbar-thumb {
  background-color: #141414;
}







#transition-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}
.transition {
  position: absolute;
  width: 100%;
  height: 50%;
  background-color: #fafafa;
}
.transition-top {
  top: 0;
  left: 0;
}
.transition-bottom {
  bottom: 0;
  left: 0;
}








#top{
    position: absolute;
    top: 0%;
    width: 100%;
    height: 50vh;
    z-index: 20;
    overflow: hidden;
    background-color: #fafafa;
  }

.nav_logo {
  width: 100%;
  height: 50vh;
  position: absolute;
  bottom: 0%;
  left: 0%;
  mix-blend-mode: multiply;
  animation: moveToTop 1.5s ease forwards 1.8s ; 
 }
 @keyframes moveToTop {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-50%);
    }
 }
  .logo img{
    position: absolute;
    transform: translate(-50%);
    bottom: 0%;
    left: 50%;
    width: 17vh;
    z-index: 100;
  }








#bottom {
  position: absolute;
  bottom: 0%;
  width: 100%;
  height: 50vh;
  z-index: 20;
  overflow: hidden;
  background-color: #fafafa;
}

.wrapper-services {
  width: 100%;
  height: 50vh;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transform: translateY(3vh);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.list {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-family: 'Visby';
  font-size: 2.2vh;
  color: #141414;
  text-align: center;
}
ul {
  list-style: none;
}
.service-heading {
  font-family: 'VisbyThin';
}
.show {
  opacity: 1 !important;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#main h1 {
  width: 100%;
  position: absolute;
  left: 50%;
  font-family: 'VisbyThin';
  font-weight: normal;
  color: #141414;
  font-size: 20vh;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  max-width: 100%;
}
#top-h1 {
  bottom: -26%;
}
#bottom-h1 {
  top: 18% !important;
}
@media (max-width: 750px) {
  #main h1 {
    font-size: 12vh;
  }
  #top-h1 {
    bottom: -15.5%;
  }
  #bottom-h1 {
    top: 11% !important;
  }
  .logo img{
    width: 14vh;
  }
}

.animated-text {
  opacity: 0;
}
.animated-text.show {
  opacity: 1;
}


.bandeau {
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  color: #141414;
  font-size: 3vh;
}

.bandeau span {
  display: inline-block;
  padding-left: 100%;
  font-family: 'Visby';
  text-transform: uppercase;
  white-space: nowrap;
  animation: bandeau 25s linear infinite;
}

@keyframes bandeau {
  0% {
      transform: translateX(18%);
  }
  100% {
      transform: translateX(-100%);
  }
}
 







#center{
    position: relative;
    width: 100%;
    height: 100vh;
    transform-origin: center;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
    overflow: hidden;
    background-color: #ffffff;
}

.nav_logo2 {
  position: fixed;
  top: 5.5vh;
  width: 100%;
  display: flex;
  padding: 0;
  margin: 0;
  justify-content: center;
  align-items: center;
  mix-blend-mode: multiply;
  z-index: 1;
}
.logo_inside img{
width: 12vh;
}

.cta_formulaire {
  position: absolute;
  top: 4vh;
  right: 4vh;
  padding: 3vh 4vh 2.6vh 4vh;
  font-family: 'VisbyMedium';
  color: #141414;
  text-transform: uppercase;
  border: 0.211vh solid #141414;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1.9vh;
  line-height: 0;
  z-index: 2;
}
.cta_formulaire:hover {
  background-color: #141414;
  color: #fff;
  transition: ease-out 0.3s;
}
.cta_formulaire:not(:hover){
  transition: ease-out 0.3s;
}

@media only screen and (max-width: 700px){
  .cta_formulaire {
    display: none;
  }}




/* BOOK */

#portfolio{
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 26.5vh;
  margin-top: 70vh;
  transform-origin: center;
  transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
}

.cursor {
  position: absolute;
  width: 410px;
  height: 260px;
  top: 50%;
  left: 50%;
  transform: scale(0.1);
  opacity: 0;
  margin: -43vh 0 0 30vh;
  background-size: cover;
  z-index: 0;
  overflow: hidden;
}
@media only screen and (max-width: 1200px){
  .cursor {
    margin: -45vh 0 0 20vh;
    }}
@media only screen and (max-width: 1000px){
  .cursor {
    margin: -45vh 0 0 10vh;
    }}
@media only screen and (max-width: 750px){
  .cursor {
    margin: -45vh 0 0 -20vh;
    }}
@media only screen and (max-width: 1000px) and (max-height: 500px){
  .cursor {
    width: 200px;
    height: 125px;
    }}
@media only screen and (max-height: 400px){
  .cursor {
    width: 200px;
    height: 125px;
    }} 
@media (min-height: 400px) and (max-height: 600px){
  .cursor {
    width: 300px;
    height: 200px;
    }}

.wrapper {
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.project {
  width: 40%;
  margin: auto;
  cursor: pointer;
  border-bottom: 0px solid #141414;
  padding-top: 2vh;
  padding-bottom: 2vh;
  align-items: center;
  justify-content: space-between;
  flex-basis: 1;
  position: relative;
  mix-blend-mode: multiply;
}
@media only screen and (max-width: 1000px){
  .project {
    width: 100%;
  }}

.project-title {
  width: 100%;
  margin: auto;
  font-family: 'VisbyLight';
  font-weight: 100;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 4.5vh;
  padding-bottom: 1vh;
  color: #141414;
}

.project-categ {
  width: 100%;
  font-family: 'VisbyLightItalic';
  font-size: 2vh;
  justify-content: center;
  text-align: center;
  color: #141414;
}

.project:hover .project-title {
  color: #CCCCCC;
  transition: ease-out 0.3s;
}
.project-title:not(:hover){
  transition: ease-out 2s;
}
.project:hover .project-categ {
  color: #CCCCCC;
  transition: ease-out 0.3s;
}
.project-categ:not(:hover){
  transition: ease-out 2s;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* BOOK */





/* Menu burger */

.wrapperburger {
  width: 100vw;
  height: 100vh;
  top: 0%;
  position: absolute;
  overflow: hidden;
}

.slide-in {
  transform: translate3d(0, 0, 0) !important;
}

.menu-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  align-items: center;
  transform: translate3d(0, -100%, 0);
  transition: all 0.9s ease;
  z-index: 10;
  background-color: #fafafa;
}
.menu-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transform: translate3d(0, 100%, 0);
  transition: all 0.9s ease;
  z-index: 10;
  background-color: #fafafa;
}

.onglet-top {
  font-family: 'VisbyLight';
  text-transform: uppercase;
  text-decoration: none;
  color: #141414;
  font-size: 4.5vh;
  text-align: center;
  overflow: hidden;
  position: relative; 
  white-space: nowrap;
}
.onglet-portfolio {
  font-family: 'VisbyLight';
  text-transform: uppercase;
  text-decoration: none;
  color: #CCCCCC;
  font-size: 4.5vh;
  text-align: center;
  overflow: hidden;
  position: relative; 
  white-space: nowrap;
}
.onglet-bottom {
  font-family: 'VisbyLight';
  text-transform: uppercase;
  text-decoration: none;
  color: #141414;
  font-size: 4.5vh;
  text-align: center;
  overflow: hidden;
  position: relative; 
  white-space: nowrap;
}


.onglet-top:hover,
.onglet-bottom:hover {
  color: #CCCCCC;
  transition: ease-out 0.3s;
}
.onglet-top:not(:hover),
.onglet-bottom:not(:hover) {
  transition: ease-out 2s;
}
.onglet-portfolio:hover {
  color: #141414;
  transition: ease-out 0.3s;
}
.onglet-portfolio:not(:hover){
  transition: ease-out 2s;
}

.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.menu-links a {
  display: block;
  white-space: nowrap;
  text-align: center;
}





.logo_menu_wrapper {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.logo_menu {
  width: 12vh;
  margin-top: 5.5vh;
  text-align: center;
}

.mentions {
  width: 100%;
  position: absolute;
  bottom: 5%;
  font-size: 1.9vh;
  font-family: 'Visby';
  color: #141414;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo_mentions {
  width: 5.5vh;
  text-align: center;
}





.navburger {
  position: relative;
  z-index: 10;
  top: 5vh;
  left: 4vh;
  --color: #141414;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: multiply;
}

.navburger svg {
  height: 4vh;
  fill: none;
  stroke: var(--color);
  stroke-width: 0.45vh;
}

.navburger svg use:nth-of-type(1) {
  opacity: 1;
  stroke-dashoffset: 221;
  stroke-dasharray: 46 249;
  transition: stroke-dashoffset .12s linear .2s, stroke-dasharray .12s linear .2s, opacity 0s linear .2s;  
}

.navburger svg use:nth-of-type(2) {
  -webkit-animation: stroke-animation-reverse 1.2s ease-out forwards;
  animation: stroke-animation-reverse 1.2s ease-out forwards;
}

.navburger input {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}

.navburger input:checked + svg use:nth-of-type(1) {
  stroke-dashoffset: 175;
  stroke-dasharray: 0 295;
  opacity: 0;
  -webkit-transition: stroke-dashoffset .07s linear .07s, stroke-dasharray .07s linear .07s, opacity 0s linear .14s;
  transition: stroke-dashoffset .07s linear .07s, stroke-dasharray .07s linear .07s, opacity 0s linear .14s;  
}

.navburger input:checked + svg use:nth-of-type(2) {
  -webkit-animation: stroke-animation 1.2s ease-out forwards;
  animation: stroke-animation 1.2s ease-out forwards;
}

@keyframes stroke-animation {
  0% {
    stroke-dashoffset: 295;
    stroke-dasharray: 25 270;
  }
  50% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
  65% {
    stroke-dashoffset: 59;
    stroke-dasharray: 59 236;
  }
  100% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
}

@keyframes stroke-animation-reverse {
  0% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
  50% {
    stroke-dashoffset: 290;
    stroke-dasharray: 25 270;
  }
  65% {
    stroke-dashoffset: 295;
    stroke-dasharray: 25 270;
  }
  100% {
    stroke-dashoffset: 290;
    stroke-dasharray: 25 270;
  }
}

@-webkit-keyframes stroke-animation {
  0% {
    stroke-dashoffset: 295;
    stroke-dasharray: 25 270;
  }
  50% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
  65% {
    stroke-dashoffset: 59;
    stroke-dasharray: 59 236;
  }
  100% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
}

@-webkit-keyframes stroke-animation-reverse {
  0% {
    stroke-dashoffset: 68;
    stroke-dasharray: 59 236;
  }
  50% {
    stroke-dashoffset: 290;
    stroke-dasharray: 25 270;
  }
  65% {
    stroke-dashoffset: 295;
    stroke-dasharray: 25 270;
  }
  100% {
    stroke-dashoffset: 290;
    stroke-dasharray: 25 270;
  }
}