@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,700&display=swap');
/*
* Made by Erik Terwan
* 24th of November 2015
* MIT license
*
*
* If you are thinking of using this in
* production code, beware of the browser
* prefixes.
*/

html{
   box-sizing: border-box;
}

html *{
   box-sizing: border-box;
}
body
{
 margin: 0;
 padding: 0;
 
 /* make it look decent enough */
 background: #F4F0E7;
 color: #cdcdcd;
 font-family: "Avenir Next", "Avenir", sans-serif;
 
 overflow-x: hidden; /* needed because hiding the menu on the right side is not perfect,  */
}

a
{
 text-decoration: none;
 color: #232323;
 
 transition: color 0.3s ease;
}
.logo-image img{
 z-index: 2;
}

#menu a:hover
{
 font-weight: 600;
 color: #232323;
}

#menuToggle
{
 display: block;
 position: fixed;
 top: 50px;
 right: 50px;
 
 z-index: 1;
 
 -webkit-user-select: none;
 user-select: none;
}

#menuToggle input
{
 display: block;
 width: 40px;
 height: 32px;
 position: absolute;
 top: -7px;
 left: -5px;
 
 cursor: pointer;
 
 opacity: 0; /* hide this */
 z-index: 2; /* and place it over the hamburger */
 
 -webkit-touch-callout: none;
}

/*
* Just a quick hamburger
*/
#menuToggle span
{
 display: block;
 width: 33px;
 height: 4px;
 margin-bottom: 5px;
 position: relative;
 
 background: #232323;
 border-radius: 3px;
 
 z-index: 1;
 
 transform-origin: 4px 0px;
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             opacity 0.55s ease;
}

#menuToggle span:first-child
{
 transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
 transform-origin: 0% 100%;
}

/* 
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
 opacity: 1;
 transform: rotate(45deg) translate(-2px, -1px);
 background: #232323;
}

/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
 opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
 opacity: 1;
 transform: rotate(-45deg) translate(0, -1px);
}

/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
 position: absolute;
 width: 100vw;
 height: 120vh;
 margin: -100px 0 0 0;
 padding: 50px;
 padding-top: 180px;
 right: -50px;
 
 background: #ededed;
 list-style-type: none;
 -webkit-font-smoothing: antialiased;
 /* to stop flickering of text in safari */
 
 transform-origin: 0% 0%;
 transform: translate(100%, 0);
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
 padding: 10px 0;
 font-size: 80px;
 
}

/*
* And let's fade it in from the left
*/
#menuToggle input:checked ~ ul
{
 transform: none;
 opacity: 1;
}

#menu a{
   position: relative;
   width: fit-content;
   
  
}
#menu li{
   position: relative;
   width: fit-content;
   display: inline-block;
  
  
   
  
   
}
#menu{
display: flex;
flex-direction: column;
}

.home-menu{

}
.home-menu:after {
 content: '';
 position: absolute;
 width: 110%;
 transform: scaleX(0);
 rotate: -2deg;
 height: 7px;
 bottom: 40%;
 left: -10px;
 background-color: black;
 transform-origin: bottom right;
 transition: transform 0.4s ease-out;
 
}

.portfolio-menu:after {
 content: '';
 position: absolute;
 width: 110%;
 transform: scaleX(0);
 rotate: -1deg;
 height: 7px;
 bottom: 40%;
 left: -10px;
 background-color: black;
 transform-origin: bottom right;
 transition: transform 0.4s ease-out;
}

.about-menu:after {
 content: '';
 position: absolute;
 width: 110%;
 transform: scaleX(0);
 rotate: 2deg;
 height: 7px;
 bottom: 45%;
 left: -10px;
 background-color: black;
 transform-origin: bottom right;
 transition: transform 0.4s ease-out;
}
.contact-menu:after {
 content: '';
 position: absolute;
 width: 110%;
 transform: scaleX(0);
 rotate: -2deg;
 height: 7px;
 bottom: 40%;
 left: -10px;
 background-color: black;
 transform-origin: bottom right;
 transition: transform 0.4s ease-out;
}
#menu a:hover:after {
 transform: scaleX(1);
 transform-origin: bottom left;
}
.o-container{
 padding: 0px;
   
}
.c-direction-block_item span{
   background-color: #ff392e;
   color: #232323;
}

.c-section_infos{
 height: 250vh;
 padding: 0px;
 max-width: 100vw;
 max-height: 2400px;
}
.c-direction-block{
 height: 240vh;
 max-height: 2400px;
 
 
}
.c-direction-block_wrapper {
 margin-bottom: 0px;
}
.c-section_infos_inner{
 padding: 0px;
 margin: 0px;
}
.c-section_infos_inner img{
 width: 100vw;
 height: 100vh;
 object-fit: cover;
 z-index: 0;

 
}
.text-hero{
 
position: relative;
 color: black;
 transform: translateX(2000px);
 right: -50px;
 font-family: poppins;
 font-size: 150px;
 
 
 
}
.-six{
 top:75%;
 left: 50%;
 transform: translateY(60px);
 transform: translateX(-50%);

 
}


.c-direction-block_item .-six span{
   background-color: white;
   color: #232323;
}
.ok{
 font-size: 200px;
}
.-six>*{opacity:0;transform:translateY(60px);transition:opacity 1s cubic-bezier(.215,.61,.355,1),transform 1s cubic-bezier(.215,.61,.355,1)}
.-six.is-inview>*{opacity:1;transform:translateY(=60px);}
.intro-text{
 position: relative;
 top: 75%;
 

 
}
.intro-text h1{
 text-align: center;
 font-weight: 700;
 color: white;
 
 
}
.intro-text span{
 color:  white;
 
}
.delay-text{
 font-size: 0;
 
 display: block;
 margin-top: -100px;
 
}
.delay-text span{
 display: inline-block;
 font-size: 13.5vw;

 background-color: black;
 opacity: 1;
 

}
.delay-text br{
 
}
.o-container{
 max-width: 100vw;
}
.graphic-sides{
   display: flex;
}

.graphic{

 overflow: hidden;
 height: 100vh;
 position: relative;
 width: 50%;
}
.graphic-picture{
 margin-left: 10%;
 width: 90%;
 height: 100vh;
 background-image: url(img/hero1.jpg);
 position: absolute;
 top: -100vh;
}
.graphic-picture-limit{
 height: 300vh;
 width: 500px;
 position: absolute;
 top: -100vh;
}
.graphic-content{
    width: 50%;
    display: flex;
    align-self: center;
    padding-left: 20px;
    position: relative;
}
.graphic-content h1{
   font-size: 60px;
   color: #232323;
}
.graphic-content b{
   font-size: 120px;
  display: block;
  margin-top: 20px;
}
.graphic-content span{
   font-size: 150px;
}
.graphic-content p{
   font-size: 24px;
   padding-left: 40px;
   padding-right: 40px;
}
.right-number{
   position: relative;
   right: 250px;
   top: 50px;
}
.c-lerp-block_index:before{
  
   
   
   
   
}
.graphic-designer{
   margin-top: 200px;
}
.designer-sides{
   display: flex;
}
.designer-text{
   width: 60%;
   position: relative;
   padding-left: 200px;
   height: 100vh;
   display: flex;
   flex-direction: column;
   
   padding-top: 250px;
   
   
}
.designer-text h1{
   color: #232323;
   font-size: 120px;
   
}
.design-text{
   position: relative;
}
.number-block{
   position: absolute;
   right: 0px;
}
.left-number{
   left: auto;
   right: 0px !important;
}
.graphic-2{
   overflow: hidden;
 height: 100vh;
 position: relative;
 width: 40%;
}



@media (min-width:769px) and (max-width:1200px){
 html{
   overflow-x: hidden;
 }
 .c-section_infos_inner{
 width: 100vw;
 height: 100%;


 
}
 .c-section_infos_inner img{
 width: 100vw;
 height: 140%;
 max-height: 1200px;
 object-fit: cover;
 z-index: 0;

 
}
.c-section_infos_inner img{
object-position: 20% 80%;
 
}
.c-direction-block {
   
   top: -20vh;
}
.-six{
 top: 65%;
}
.-four{
 transform: translateX(-30vw) rotate(-7deg) !important;
}
.menu-input{
 z-index: 200;
}
#menuToggle{
 z-index: 3000;

}
.o-container{
 height: 1500px;
}
.c-section_infos{
height: 2000px;
}

.c-direction-block{
 height: 2000px ;
}
.delay-text{
 margin-top: 0px;
}
}


@media screen and (max-width: 768px) {
 html{
   overflow-x: hidden;
 }
 #menu {
   
   opacity: 0;

   transition: opacity 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 #menu li{
   font-size: 50px;
 }
 .c-section_infos_inner img{
object-position: 20% 80%;
 
}
.c-section_infos{
 height: 1000px;
}
.o-container{
 height: 1000px;
 
}
.c-direction-block{
 height: 140vh;
 top: -40vh;
 
 
}
.-six{
 top:100%;
}
.menu-input{
 z-index: 200;
}
#menuToggle{
 z-index: 3000;

}
.-one{
 top: 40% !important;
 transform: translateX(-5vw) rotate(10deg) !important;
}
.-two{
 top: 50% !important;
}
.-three{
 top: 65% !important;
}
.-four{
 top: 75% !important;
 transform: translateX(0vw) rotate(-5deg) !important;
}
.-five{
 top: 85% !important;
 transform: translateX(0vw) rotate(3deg) !important;
}
.delay-text{
 margin-top: 0px;
}
.c-section{
 margin-bottom:   40vh !important;
 padding-bottom: 0px !important;
}
.intro-text{
 top: 110%;

 
}
.intro-text h1{
 font-size: 70px;
 color: black;
}
.delay-text{
 font-size: 0 !important;
}
.intro-text span{
 font-size: 70px;
 color:  white;
 padding: 5px;
}
.graphic-sides{
   display: flex;
   flex-direction: column;
}
.graphic-picture{
 margin-left: 0px;
 width: 100%;
 height: 50vh;
 
 position: absolute;
 top: 0;
 
 
}
.graphic-picture-limit{
 height: 50vh;
 width: 500px;
 position: absolute;
 
}
.graphic{
   width: 100%;
 height: 50vh;
 overflow: visible;
}
.graphic-content{
   margin-top: 20px;
   width: 100%;
    height: 200px;
    
    
    
}
.graphic-content h1{
   font-size: 40px;
   color: #232323;
}
.graphic-content b{
   font-size: 60px;
  display: block;
  margin-top: 20px;
  
}
.graphic-content span{
   font-size: 80px;
}
.right-number{
   right: 50px;
   top: -20px;
}
.graphic-2{
   order: 1;
   width: 100%;
 height: 50vh;
 overflow: visible;
}
.designer-text{
   order: 2;
}
.designer-sides{
   flex-direction: column;
}
.designer-text h1{
   color: #232323;
   font-size: 70px;
   
}
.designer-text{
   width: 100%;
   padding-top: 20px;
   padding-left: 0px;
   
}
.left-number{
   top: -80px;
   left: -20px;
}
}