.ysl{
  &.dark{
    background: url("../images/logo_ysl_blanc_22-6d2c0e284916c128860b0052be9e53b7.png") no-repeat 10vw 2vh, #2F2A2A;
    background-size: 50px;
    .modal-backdrop{
      &.show{
        opacity: 0.25;
      }
    }
    @media(max-width: 991px){
      background-position-x: 90vw;
      background-size: 35px;
    }
  }
  &.pink_blanc{
    background: url("../images/logo_ysl_black_22-94993abf6ac497d7746e7dea696e05d4.png") no-repeat 10vw 2vh, #FFF;
    background-size: 50px;
    .modal-backdrop{
      &.show{
        opacity: 0.25;
      }
    }
    h1{
      color: #000;
    }
    h2{
      color: #000;
    }
    .btn{
      &.go{
        background-color: #000;
        color: #FFF;
        border-radius: 6px;
        font-size: 18px;
      }
    }
    @media(max-width: 991px){
      background-position-x: 90vw;
      background-size: 35px;
    }
    .wheel-body{
      .wheel-container{
        &:before{
          clip-path: polygon(50% 100%, 15% 0, 85% 0);
          background-color: #000;
          position: absolute;
          top: -10px;
          width: 20px;
          height: 14px;
          content: "";
          left: calc(50% - 10px);
          z-index: 12;
          @media(max-width: 650px){
            width: 20px;
            height: 20px;
          }
        }
        &:after{
          content: '';
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 100%;
          z-index: 9;
          background: linear-gradient(149deg, rgba(0, 0, 0, 0.26) 0%, rgba(112, 112, 112, 0.34) 25%, rgba(234, 234, 234, 0.53) 50%, rgba(68, 68, 68, 0.34) 75%, rgba(0, 0, 0, 0.25) 100%);
        }
        border: 10px solid rgba(255,255,255,0);
        box-shadow: 1px 1px 0px 5px #000, 14px 20px 20px 20px #000;
        .center{
          position: absolute;
          width: 70px;
          height: 70px;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s;
          &:before{
            content: '';
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 70px;
            height: 70px;
            border-radius: 100%;
            background: radial-gradient(rgba(247, 248, 248, 0.3), rgba(93, 93, 93, 0.3)), #FFF;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 9px 10px 5px;
          }
          &:after{
            content: '';
            background: linear-gradient(180deg, rgba(247, 248, 248, 1) 0%, rgba(146, 145, 145, 0.37) 65%, rgba(124, 124, 124, 1) 100%);
            min-width: 60px;
            min-height: 60px;
            border-radius: 100%;
            z-index: 2;
            position: absolute;
            top: 5px;
            left: 5px;
          }
        }
        .roue{
          .number{
            background: #F7F8F8;
            &:nth-of-type(2n + 2){
              background: #F5B5B8;
              span{
                background: #FFF;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
      }
    }
    #gainModal{
      .modal-content{
        box-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px rgba(245, 181, 184, 1), 0 0 82px rgba(245, 181, 184, 1), 0 0 92px rgba(245, 181, 184, 1);
      }
    }
  }

  &.pink{
    background: url("../images/logo_ysl_black_22-94993abf6ac497d7746e7dea696e05d4.png") no-repeat 10vw 2vh, rgba(235,204,205,0.64);
    background-size: 50px;
    h1{
      color: #000;
    }
    h2{
      color: #000;
    }
    .btn{
      &.go{
        background-color: #000;
        color: #FFF;
        border-radius: 6px;
        font-size: 18px;
      }
    }
    @media(max-width: 991px){
      background-position-x: 90vw;
      background-size: 35px;
    }
    .wheel-body{
      .wheel-container{
        &:before{
          clip-path: polygon(50% 100%, 15% 0, 85% 0);
          background-color: #000;
          position: absolute;
          top: -10px;
          width: 20px;
          height: 14px;
          content: "";
          left: calc(50% - 10px);
          z-index: 12;
          @media(max-width: 650px){
            width: 20px;
            height: 20px;
          }
        }
        &:after{
          content: '';
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 100%;
          z-index: 9;
          background: linear-gradient(149deg, rgba(0, 0, 0, 0.26) 0%, rgba(112, 112, 112, 0.34) 25%, rgba(234, 234, 234, 0.53) 50%, rgba(68, 68, 68, 0.34) 75%, rgba(0, 0, 0, 0.25) 100%);
        }
        border: 10px solid rgba(255,255,255,0);
        box-shadow: 1px 1px 0px 5px #000, 14px 20px 20px 20px #000;
        .center{
          position: absolute;
          width: 70px;
          height: 70px;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s;
          &:before{
            content: '';
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 70px;
            height: 70px;
            border-radius: 100%;
            background: radial-gradient(rgba(247, 248, 248, 0.3), rgba(93, 93, 93, 0.3)), #FFF;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 9px 10px 5px;
          }
          &:after{
            content: '';
            background: linear-gradient(180deg, rgba(247, 248, 248, 1) 0%, rgba(146, 145, 145, 0.37) 65%, rgba(124, 124, 124, 1) 100%);
            min-width: 60px;
            min-height: 60px;
            border-radius: 100%;
            z-index: 2;
            position: absolute;
            top: 5px;
            left: 5px;
          }
        }
        .roue{
          .number{
            background: #F7F8F8;
            &:nth-of-type(2n + 2){
              background: #F5B5B8;
              span{
                background: #FFF;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
      }
    }
    #gainModal{
      .modal-content{
        box-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px rgba(245, 181, 184, 1), 0 0 82px rgba(245, 181, 184, 1), 0 0 92px rgba(245, 181, 184, 1);
      }
    }
  }
}