body {
  background-color: #6c4d2e;
  height:100%;
  width: 100%;
}
@font-face {
  font-family: 'Titre1';
  src: url('SOUTH-CREW.ttf');
  font-display: swap;
  }
  @font-face {
    font-family: 'Titre2';
    src: url('ReggaeOne-Regular.ttf');
    font-display: swap;
    }
  

  #contour4 {
    font-family: 'Titre1', sans-serif;
 
  }
  h1 {
    color: rgb(76,149,182);
    font-size: 12em;
    -webkit-text-stroke: 6px rgb(0, 0, 0); /* Bordure noire de 2 pixels */
 
  }
.wrapper {
    position: fixed;
    z-index:2;
    top: 0;
    /*left: -100%;*/
    right: -100%;
    height: 100%;
    width: 31%;
    background: #000;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
    /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
    transition: all 0.6s ease-in-out;
}

#active:checked~.wrapper {
    /*left: 0;*/
    right: 0;
}

.menu-btn {
    position: fixed;
    z-index: 3;
    right: 20px;
    /*left: 20px; */
    top: 20px;
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    /*color: #fff;*/
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
}

.menu-btn span,
.menu-btn:before,
.menu-btn:after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 30%;
    width: 40%;
    border-bottom: 3px solid #FFFFFF;
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.menu-btn:before {
    transform: translateY(-8px);
}

.menu-btn:after {
    transform: translateY(8px);
}


.close {
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background .6s;
}

/* Quand ma nav tire sa reverense */
#active:checked+.menu-btn span {
    transform: scaleX(0);
}

#active:checked+.menu-btn:before {
    transform: rotate(45deg);
    border-color: #fff;
}

#active:checked+.menu-btn:after {
    transform: rotate(-45deg);
    border-color: #fff;
}

.wrapper ul {
    position: absolute;
    top: 50%;
    left: 20%;
    height: 80%;
    width: 80%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
}

.wrapper ul li {
    height: 10%;
    margin: 45px 0;

}

.wrapper ul li a {
    text-decoration: none;
    font-size: 35px;
    font-weight: 500;
    padding: 5px 30px;
    color: #fff;
    border-radius: 50px;
    position: absolute;
    line-height: 50px;
    margin: 5px 30px;
    opacity: 0;
    transition: all 0.3s ease;
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    width:400px;

}

.wrapper ul li a:after {
    position: absolute;
    content: "";
    background: #E14B00;
    /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
    /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50px;
    transform: scaleY(0);
    z-index: -1;
    transition: transform 0.3s ease;
}

.wrapper ul li a:hover:after {
    transform: scaleY(1);
}

.wrapper ul li a:hover {
    color: #ffb703;
}
label {
  position: absolute;
}
input[type="checkbox"] {
    display: none;
    position: absolute;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    text-align: center;
    width: 100%;
    color: #202020;
}

.content .title {
    font-size: 40px;
    font-weight: 700;
}

.content p {
    font-size: 35px;
    font-weight: 600;
}

#active:checked~.wrapper ul li a {
    opacity: 1;
}

.wrapper ul li a {
    transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateX(100px);
}

#active:checked~.wrapper ul li a {
    transform: none;
    transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
    transition-delay: .6s;
    transform: translateX(-100px);
}

.video-background {

    width: 100%;
    height: 600px;
    object-fit: cover;
   
  }
  .logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .card {
    margin: 1rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-color: rgba(255, 0, 0, 0);
    border-style: none;

  }
  .card-img-top {
    height: 300px;
    object-fit: cover;
    
  }

  .card-body {
    background-color: rgba(35, 35, 35, 0);

  }

  .card>img {
    background-color: rgba(35, 35, 35, 0);
  }
  .card:hover{
    transform: scale(1.10);
    cursor: pointer;
   
  }
.max {
  position: relative;
  height:36vh;
}
  #contour {
    position: relative;
    background: radial-gradient(ellipse at center, rgb(155,135,111) 50%, rgb(76,149,182) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
      clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%); /* Utilisation de clip-path pour créer une forme personnalisée */
  height:37vh;
  z-index: 2;


}
#contour5 {
  content: ""; /* Ajout d'un contenu vide pour le pseudo-élément */
  position: absolute; /* Positionnement absolu par rapport à #contour */
  top: 0%;
  left: 0;
  width: 100%;
  height: 40vh;
  background: rgb(0, 0, 0); /* Couleur de fond de la bordure */
  clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%);
  z-index: 1; /* Pour superposer le pseudo-élément au contenu de #contour */
}
p {
  font-size: 1.6em;
}
  #contour2 {
    background-image: url(img/kobe4.jpg);
  background-size:cover ;
  background-repeat: no-repeat;
  background-position: center;
  background-position: top;
    -webkit-box-shadow: 0px 18px 24px 3px #000000; 
    box-shadow: 0px 18px 24px 3px #000000;
    border-radius: 20px;
    border: 7px solid black;
    font-family: 'Titre2', sans-serif;
    clip-path: polygon(0% 100%, 0% 20%, 50% 0%, 100% 20%, 100% 100%, 50% 88%);
    height:130vh;
   
   
   }
   #contour6 {
    background: radial-gradient(ellipse at center, rgb(155,135,111) 30%, rgb(76,149,182) 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-box-shadow: 0px 18px 24px 3px #000000; 
    box-shadow: 0px 18px 24px 3px #000000;
    font-family: 'Titre2', sans-serif;
    height: 110vh;
    clip-path: polygon(0% 74%, 0% 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%);
   position: relative;
    z-index: 3;
   
   }
   .text {
    font-size: 1.4em;
    -webkit-text-stroke: 1px rgb(0, 0, 0); /* Contour blanc pour WebKit (Chrome, Safari) */
    text-stroke: 1px white; /* Contour blanc pour les autres navigateurs */
    color: rgb(255, 255, 255);
    position: relative;
    background-color: #000;
    height: 100vh;
    z-index: 5;
    clip-path: polygon(0% 74%, 0% 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%);
   }
   .textee {
    
    height: 90vh;
    background-image: url(img/lum.jpg);
    background-size:100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-position: top;
    clip-path: polygon(1% 77%, 1% 25%, 50% 0%, 99% 26%, 99% 74%, 50% 100%);
  }

.bordtext {
  height: 114vh;
  clip-path: polygon(0% 74%, 0% 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%);
 position: absolute;
  z-index: 3;
  background-color: #000;

}

.gris2 {
  margin-top: -35vh;
  position: relative;
}

#contour10 {
  background-image: url(img/bar.webp);
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-position: top;
  -webkit-box-shadow: 0px 18px 24px 3px #000000; 
  box-shadow: 0px 18px 24px 3px #000000;


  font-family: 'Titre2', sans-serif;
  height: 90vh;
  clip-path: polygon(0% 74%, 0% 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%);
 position: relative;
  z-index: 2;
 
 }

.bordtext1 {
height: 94vh;
clip-path: polygon(0% 74%, 0% 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%);
position: absolute;
z-index: 1;
background-color: #000;
top: -2%;

}

.bordtext2 {
  height: 114vh;
  clip-path: polygon(0% 74%, 0% 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%);
 position: absolute;
  z-index: 3;
  background-color: #000;

  
  }

  #contour11 {
   
      background: radial-gradient(ellipse at center, rgb(155,135,111) 30%, rgb(76,149,182) 70%);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      -webkit-box-shadow: 0px 18px 24px 3px #000000; 
      box-shadow: 0px 18px 24px 3px #000000;
      font-family: 'Titre2', sans-serif;
      height: 110vh;
      clip-path: polygon(0% 74%, 0% 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%);
     position: relative;
      z-index: 4;

     
  }

.brique2 {
  position: relative;
  margin-top: -30vh;
}

.bas {
  display: flex;
  flex-direction: column;
  justify-content: end;
}


#contour12 {
  position: relative;
  background-image: url(img/brook.webp);
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-position: top;
  margin-top: -35vh;
  font-family: 'Titre2', sans-serif;
  height: 80vh;
  width: 100%;
  z-index: 2;
 
 }
#contour7 {
  content: ""; 
  background-color: rgb(0, 0, 0); 
  position: absolute;
  top: 185%;
  left: 0;
  width: 100%;
  height: 90%;
  z-index: -21; 
  clip-path: polygon(0 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%, 0 74%); 
}
#contour8 {
  content: ""; 
  background-image: url(img/graf1.webp);
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-position: top;
  position: absolute;
  top: 7.5%;
  left: 0;
  width: 100%;
  height: 95%;
  z-index: -21; 
  clip-path: polygon(0 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%, 0 74%); 
}
#contour9 {
  content: ""; 
  background-color: rgb(0, 0, 0); 
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -22; 
  clip-path: polygon(0 26%, 50% 0%, 100% 26%, 100% 74%, 50% 100%, 0 74%); 
}

  #foot {

    background-image: url(img/kin.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 20%;
  }  
td>img {
    width:10%;
}
#car {
    -webkit-box-shadow: 0px 18px 24px 3px #000000; 
  box-shadow: 0px 18px 24px 3px #000000;
  background-image: linear-gradient(to right, #333333 50%, #222222 50%)
  }

  .firstPicture {
    height:600px;
    width:100%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .savoirPicture {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-left: 7px solid black;
  }

  a {
    text-decoration: none;
    color:white;
  }
  a:hover {
    color:#ffb703
  }
  .fa-li {
    color:orange
  }
  
  p>span {
    color:#ffb703
  }

  
.svg-container {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
 top: -5vh;
  left: 0;
  height: 100%;
  width: 100%;
  
}
svg {
  display: block;
  animation: rotate 5s linear infinite;
  width: 160%; 
  height: 160%; 
  animation-delay: 4s;
}
/*
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
*/
.shoe-base {
  animation: 500ms shoe-base ease-in 1 alternate forwards;
  stroke-dasharray: 979, 979;
  stroke-dashoffset: 979;
  opacity: 0;
  fill: #6c4d2e;

}

.guy-chan {
  animation: 500ms guy-chan ease-in 500ms 1 alternate forwards;
  stroke-dasharray: 387, 387;
  stroke-dashoffset: 387;
  opacity: 0;

}

.suede-1 {
  animation: 500ms suede ease-in 1000ms 1 alternate forwards;
  stroke-dasharray: 410, 410;
  stroke-dashoffset: 410;
  opacity: 0;
 
}

.sep-low {
  animation: 500ms sep-low ease-in 1000ms 1 alternate forwards;
  stroke-dasharray: 221, 221;
  stroke-dashoffset: 221;
  opacity: 0;
 
}

.suede-2 {
  animation: 500ms suede-5 ease-in 1500ms 1 alternate forwards;
  stroke-dasharray: 96, 96;
  stroke-dashoffset: 96;
  opacity: 0;

}

.sep-top {
  animation: 500ms sep-top ease-in 1500ms 1 alternate forwards;
  stroke-dasharray: 155, 155;
  stroke-dashoffset: 155;
  opacity: 0;
 
}

.tongue {
  animation: 500ms tongue ease-in 2000ms 1 alternate forwards;
  stroke-dasharray: 258, 258;
  stroke-dashoffset: 258;
  opacity: 0;
    fill:#6c4d2e;
 
}

.lace-1 {
  animation: 500ms laces ease-in 2500ms 1 forwards;
  stroke-dasharray: 228, 228;
  stroke-dashoffset: 228;
  opacity: 0;
  fill: rgb(255, 255, 255);
  fill:#4C95B6;
}

.lace-2 {
  animation: 500ms laces ease-in 2750ms 1 forwards;
  stroke-dasharray: 228, 228;
  stroke-dashoffset: 228;
  opacity: 0;
  fill: rgb(255, 255, 255);
  fill:#4C95B6;
}

.lace-3 {
  animation: 500ms laces ease-in 3000ms 1 forwards;
  stroke-dasharray: 228, 228;
  stroke-dashoffset: 228;
  opacity: 0;
  fill: rgb(255, 255, 255);
  fill:#4C95B6;
}

.lace-4 {
  animation: 500ms laces ease-in 3250ms 1 forwards;
  stroke-dasharray: 228, 228;
  stroke-dashoffset: 228;
  opacity: 0;
  fill: rgb(255, 255, 255);
  fill:#4C95B6;
}


.loop {
  animation: 500ms loop ease-in 2500ms 1 alternate forwards;
  stroke-dasharray: 73, 73;
  stroke-dashoffset: 73;
  opacity: 0;

}

.heel {
  animation: 1000ms heel ease-in 3000ms 1 forwards;
  stroke-dasharray: 298, 298;
  stroke-dashoffset: 298;
  opacity: 0;
 
}

.bubble {
  animation: 500ms bubble ease-in 3000ms 1 forwards;
  stroke-dasharray: 306, 306;
  stroke-dashoffset: 306;
  opacity: 0;
  fill:#4C95B6;
}

.nike {
  animation: 500ms nike ease-in 3750ms 1 forwards;
  stroke-dasharray: 282, 282;
  stroke-dashoffset: 282;
  opacity: 0;
  fill:#4C95B6;
}

.tada {
  animation-delay: 4500ms;
}

@keyframes nike {
  0% {
    stroke-dashoffset: 282;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes laces {
  0% {
    stroke-dashoffset: 228;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes bubble {
  0% {
    stroke-dashoffset: 306;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes heel {
  0% {
    stroke-dashoffset: -298;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes loop {
  0% {
    stroke-dashoffset: 73;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes tongue {
  0% {
    stroke-dashoffset: -258;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes sep-top {
  0% {
    stroke-dashoffset: 155;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes suede-5 {
  0% {
    stroke-dashoffset: 96;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes sep-low {
  0% {
    stroke-dashoffset: 221;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes suede {
  0% {
    stroke-dashoffset: -410;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes guy-chan {
  0% {
    stroke-dashoffset: 387;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes shoe-base {
  0% {
    stroke-dashoffset: 979;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.sneaker-container {
  position: relative;
  cursor: col-resize;
  color: #EA0000;
}
.sneaker-container img {
  max-width: 100%;
}
.sneaker-container .sneaker-clean {
  float: left;
}
.sneaker-container .sneaker-dirty {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  clip-path: inset(0% 50% 0% 0%);
}