#container_rg{
    display: flex;
justify-content: space-between;
margin: 0%;
position: relative;
overflow: hidden;
z-index: 999999;


}

#grad{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  
z-index: -1;
  
}

.rond{
  width: 400px;
  
  height: 400px;
  border-radius: 200%  ;
  background-color: #d08539;
  position: absolute;
  bottom: -50%;
  right: -200;
  animation-duration: 3s;
  animation-name: rond;
}
@keyframes rond {
  0% {
    bottom: -100%;
    right: -400;
      }
    100% {
     
      bottom: -50%;
      right: -200;
    }
    
}

.rond2{
  width: 200px;
  height: 200px;
  border-radius: 75% 75% 75% 75% ;
  background-color: #d08539c7;
  position: absolute;
  bottom: 7%;
  right: 16%;
  animation-duration: 2.5s;
  animation-name: rond2;
}

@keyframes rond2 {
  0% {
    bottom: 0;
    right: 0%;
      }
    100% {
     
      bottom: 7%;
  right: 16%;
    }
    
}

.rond3{
  width: 150px;
  height: 150px;
  border-radius: 75% 75% 75% 75% ;
  background-color: #e6b483;
  position: absolute;
  bottom: -10%;
  right: 30%;
  animation-duration: 3s;
  animation-name: rond3;
}

@keyframes rond3 {
  0% {
    bottom: -20%;
    right: 20%;
      }
    100% {
     
      bottom: -10%;
  right: 30%;
    }
    
}


.rond4{
  width: 70px;
  height: 70px;
  border-radius: 75% 75% 75% 75% ;
  background-color: #e2c7abea;
  position: absolute;
  bottom: 30%;
  right: 38%;
  animation-duration: 3.5s;
  animation-name: rond4;
}
@keyframes rond4 {
  0% {
    bottom: 0%;
    right: 25%;
      }
    100% {
     
      bottom: 30%;
      right: 38%;
    }
    
}

.rond5{
  width: 120px;
  height: 120px;
  border-radius: 75% 75% 75% 75% ;
  background-color: #cab59fea;
  position: absolute;
  bottom: 10%;
  right: 45%;
  animation-duration: 3.5s;
  animation-name: rond5;
}
@keyframes rond5 {
  0% {
    bottom: 0%;
    right: 30%;
      }
    100% {
      bottom: 10%;
      right: 45%;
    }
    
}

.rond6{
  width: 220px;
  height: 220px;
  border-radius: 75% 75% 75% 75% ;
  background-color: #fcc68cea;
  position: absolute;
  bottom: 15%;
  right: 5%;
  animation-duration: 3.5s;
  animation-name: rond6;
  z-index: -10;
}
@keyframes rond6 {
  0% {
    bottom: -10%;
    right: -10%;
      }
    100% {
      bottom: 15%;
      right: 5%;
    }
    
}

.rond7{
  width: 400px;
  
  height: 400px;
  border-radius: 200%  ;
  background-color: #d08539;
  position: absolute;
  top:-300;
 left: -200;
  animation-duration: 3s;
  animation-name: rond7;
}
@keyframes rond7 {
  0% {
    top:-700;
    left: -400;
      }
    100% {
     
      top:-300;
 left: -200;
    }
    
}

.rond8{
  width: 100px;
  
  height: 100px;
  border-radius: 200%  ;
  background-color: #cab59fea;
  position: absolute;
  top:40;
 left: 50;
  animation-duration: 3s;
  animation-name: rond8;
}
@keyframes rond8 {
  0% {
    top:-200;
    left: -10;
      }
    100% {
     
      top:40;
      left: 50;
    }
    
}


.rond9{
  width: 70px;
  
  height: 70px;
  border-radius: 200%  ;
  background-color: #fcc68cea;
  position: absolute;
  top:170;
 left: 40;
  animation-duration: 3s;
  animation-name: rond9;
}
@keyframes rond9 {
  0% {
    top:-200;
    left: -10;
      }
    100% {
     
      top:170;
      left: 40;
    }
    
}

.rondb{
  width: 50px;
  
  height: 50px;
  border-radius: 200%  ;
  background-color: #9d7040c9;
  position: absolute;
  top:250;
 left: 100;
  animation-duration: 3s;
  animation-name: rondb;
}
@keyframes rondb {
  0% {
    top:-200;
    left: -100;
      }
    100% {
     
      top:250;
      left: 100;
    }
    
}


.rondc{
  width: 72px;
  
  height: 72px;
  border-radius: 200%  ;
  background-color: #e6b483;
  position: absolute;
  top:350;
 left: 10;
  animation-duration: 3s;
  animation-name: rondc;
}
@keyframes rondc {
  0% {
    top:200;
    left: -100;
      }
    100% {
     
      top:350;
 left: 10;
    }
    
}

main{
  margin-bottom: 200px;
}
.right {
    
    padding-top: 150px;
    width: 50vw;
}
body{
    background-color: white;
    
}
.img_intro{
  
   
margin-left: 100px;
 display: block;
    margin-bottom: -5px;
    
    
}
.flex{
    display: flex;

}

.intro{
   padding: 0 auto;
   
    /* animation-name: moved; */
    animation-duration: 2s;
    padding-right: 50px;
   padding-bottom: 20px;
    overflow-x: hidden;
    margin-left: 20px;
}

html{
  margin: 0;
 
  padding: 0;
}

.intro p{
    text-align: justify;
  text-justify: inter-word;
}

@keyframes move {
    0% {
        margin-left: -100%;
        }
      100% {
       
        margin-left: 50%;
        transform:translateX(-50%);
      }
      
  }

  @keyframes moved {
    from {
        margin-left: 100%;
        }
      to {
       
        margin-left: 20px;
      }
      
  }

  #projet {
    background-color:  #d08539;
    scroll-behavior: smooth !important;
      display: flex;
      overflow-y: hidden !important;
      
      padding-bottom: 100px;
     
      
   
  }

  #projet_text{
    animation-name: textanim;
    animation-duration: 2s;
   
text-orientation: sideways-left;
    margin-left: 0px;
    padding-top: 55%;
    font-size: 5rem;
   color: white;
   transform: rotate(-90);
    transform: translateY(-50%);
    position: relative;
  }

  @keyframes textanim {
    from {
      padding-top: 100%;
        }
      to {
       
        padding-top: 55%;
      }
      
  }


  
  .container {
    position: relative;
    padding-top: 200px;
    width: 320px;
    margin: 100px auto 0 auto;
    perspective: 1000px;
    z-index: ;
  }
  
  .carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; 
    animation: rotate360 60s infinite forwards linear;
  }
  .carousel__face { 
    position: absolute;
    width: 300px;
    height: 187px;
    top: 20px;
    left: 10px;
    right: 10px;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
    display: flex;
  }
  
 
  
  
  .carousel__face:nth-child(1) {
    margin: auto;
    background-image: url("eolienne.jfif");
    transform: rotateY(  0deg) translateZ(430px); }
  .carousel__face:nth-child(2) { 
    background-image: url("spoon.png");
      transform: rotateY( 40deg) translateZ(430px); }
  .carousel__face:nth-child(3) {
    background-image: url("halfbike.jpg");
    transform: rotateY( 80deg) translateZ(430px); }
  .carousel__face:nth-child(4) {
    margin: auto;
    background-image: url("logo.jpg");
    transform: rotateY(120deg) translateZ(430px); }
  .carousel__face:nth-child(5) { 
    background-image: url("gaspard.jpg");
    margin: auto;
   
   transform: rotateY(160deg) translateZ(430px); }
  .carousel__face:nth-child(6) { 
    background-image: url("eolienne.jfif");
   transform: rotateY(200deg) translateZ(430px); }
  .carousel__face:nth-child(7) { 
    background-image: url("spoon.png");
   transform: rotateY(240deg) translateZ(430px); }
  .carousel__face:nth-child(8) {
    background-image: url("halfbike.jpg");
    transform: rotateY(280deg) translateZ(430px); }
  .carousel__face:nth-child(9) {
    background-image: url("logo.jpg");
    transform: rotateY(320deg) translateZ(430px); }
  
  
  
  @keyframes rotate360 {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(-360deg);
    }
  }

  #flexx{
    display: flex;
    padding-top: 10px;
    padding-inline: 50px;
    color: black;
   
    
  }

  .ligne{
    display: flex;
    flex-direction: row;
margin-top: 15px;
  }
  .logo{
   display: block;
    text-align: center;
   
  }

  .logov{
    display: block;
     text-align: center;
     width: 50px;
    
   }
  .logo img{
    margin-right: 10px;
    margin-bottom: 10px;
    width: 40px;
    vertical-align: middle;}
.explication{
  margin-left: 50px;
  font-weight: 10 !important;
}

  #flexx h2{
    margin-block: 20px;
    margin-top: 40px;
    margin-left: 50px;
    
  }
  #hobbies{
    margin-inline: 20px;
    font-weight: 400;
  }
  #education{
    margin-inline: 20px;
    font-weight: 400;
    font-size: 20px !important;
  }
  #flexx h3{
    font-size: 1.3rem;
    margin-top: 30px;
    font-weight: 1 !important;
    
  }
 
#flexx p{
font-size: 1.1rem;
}
#titre{
  font-size: 1.1rem!important;
  font-weight: 350;
 
 
 
  

  
}


#projet_h2{
  text-align: center;
  padding-top: 100px;
  margin-top: 1px;

  
  font-size: 3rem !important;
  font-weight: bold;
  color: #D08539;
 
}


  

   @media (max-width: 1130px) {

  .rond {
    display: none;
  }
  .rond2 {
    display: none;
  }
  .rond3 {
    display: none;
  }
  .rond4 {
    display: none;
  }
  .rond5 {
    display: none;
  }
  .rond6 {
    display: none;
  }
  .rond7 {
    display: none;
  }
  .rond8 {
    display: none;
  }
  .rond9 {
    display: none;
  }
  .rondb {
    display: none;
  }
  .rondc {
    display: none;
  }
    #container_rg {
      flex-direction: column;
     
      
    }
  
  }

    @media (max-width: 1130px) {
      .img_intro {
       width: 80vw;
       margin: auto;
       animation: none;
       display: block;
        
      }}

     

      @media (max-width: 1130px) {

        .slider-container{
          display:none !important;
        }

        .container-petit{
          display:  block!important;
        }
        
        #titre_nav {
         font-size: 1.2rem;
          
        }}

        @media (max-width: 1130px) {
          .right {
           animation: none!important;
           padding-top: 20px !important;
           margin: auto;
           
           display: block !important;
           width: 100%;
           text-align: center;
          }}
          @media (max-width: 1130px) {
            .intro {
             animation: none!important;
             margin: auto;
             display: block !important;
             padding-right: 0px;
             padding: 60px 30px;
            }}

            @media (max-width: 1130px) {
              #projet_text {
               animation: none!important;
               margin: auto;
               display: none;
               
              }}

              @media (max-width: 1130px) {

               
                #flexx {
                 flex-direction: column;
                 margin-bottom: 20px;
                 padding: 0px;
                }
               }





               .slider-container {
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                width: 100%;
                height: 100%;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                -ms-flex-pack: center;
                justify-content: center;
                margin-top: 100px;
            }

            .fw-slider_item {
              cursor:default;
              position: relative;
              overflow: hidden;
              width: 10rem;
              height: 100%;
              min-height: 80vh;
              -webkit-box-orient: horizontal;
              -webkit-box-direction: normal;
              -webkit-flex-direction: row;
              -ms-flex-direction: row;
              flex-direction: row;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
              -webkit-transition: all 350ms ease;
              transition: all 350ms ease;
          }
          .fw-slider_wrap {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            height: 100%;
            min-height: 80vh;
            min-width: 40vw;
            padding: 2rem 2rem 2rem 10rem;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
        }

        .fw-slider_content-container {
          position: relative;
          z-index: 5;
      }
      .fw-slider_background {
        position: absolute;
        left: 0%;
        top: 0%;
        right: 0%;
        bottom: 0%;
        z-index: -1;
        background-image: url(https://assets.website-files.com/6340347…/63403c2…_Capture%20d%E2%80%99e%CC%81cran%202022-10-07%20a%CC%80%2016.34.23.png);
        background-position: 0px 0px;
        background-size: cover;
    }

    .fw-slider_title-wrapper {
      position: absolute;
      left: 3.75rem;
      top: 50%;
      right: auto;
      bottom: auto;
      z-index: 5;
      -webkit-transform: translate(0px, -50%);
      -ms-transform: translate(0px, -50%);
      transform: translate(0px, -50%);
  }

  .active {
    width: 40vw;
}

.fw-slider_title {
  margin-right: 0px;
  margin-left: 0px;
  color: #fbfbfb;
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 10px;
transform: rotate(180deg);
justify-content: center;
  text-transform: none;
  writing-mode: vertical-rl;
  
}

.fw-slider_background1{
 
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 0;
  background-color: #e39d51ea;
  opacity: 0.8;
}
.fw-slider_background2{
 
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 0;
  background-color: #daaa76ea;
  opacity: 0.8;
}
.fw-slider_background3{
 
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 0;
  background-color: #bba389ea;
  opacity: 0.8;
}
.fw-slider_background4{
 
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 0;
  background-color: #cac3bcea;
  opacity: 0.8;
}

.intitule{
  font-weight: 400;
  color: black!important;
}

.date{
  
  font-size: 0.9rem;
}

.explic{
color: rgb(53, 53, 53);
  font-size: 0.9rem;
  font-weight: 10;
}


.container-petit{
  margin: 50px;
  display: none;
}

.container-petit h2{
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
}

#relative{
  height: 250px;
  
  
  position: relative;
}

#absolute{
  letter-spacing: 0.5rem;
  position: absolute;
  top:80;
  overflow: hidden;
  left: 50%;
  font-size: 4rem;
  color: #d6c5b36f;
  z-index: -3;
}
@media (max-width: 1130px) {
  #absolute{
    font-size: 1.5rem;
  }
  #projet_h2{
    font-size: 2.5rem !important;
  }
  #relative{
    height: 150px;
  }

  
}



html {
  scroll-behavior: smooth;
}