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

  .btn {
    background-color: red;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 35px;
    border-radius: 10px;
    margin-inline: auto;
    margin-top: 30px;
    display: block;
    transition: all 0.3s ease;
    border: 0px solid transparent;
  }
  .btn:active {
    transform: scale(0.9);
  }
  .machine{
    display: grid;
    position: relative;
    margin-top: 80px;
    opacity: 0;
  }
  .container{
    width : 100%;
    margin-inline: auto;
    height : 400px;
    display : flex;
    background: linear-gradient(to bottom, #696992 0%, #afb0b7 20%, #e9e9e9 35%, #8f9e90 69%, #e7e7e7 100%);
    box-shadow: inset 0 0 50px #000000;
    position: relative;
    overflow: hidden;
    float: left;
    background-clip: content-box;
  }
  .container:before{
    content: '';
    position: absolute;
    width: 100%;
    top : calc(50% - 20px);
    left: 0;
    border-style: solid;
    border-width: 20px 20px;
    border-color: transparent hsla(0,70%,50%,0.75) transparent hsla(0,70%,50%,0.75);
    height : 2px;
    background-color: rgba(250,250,250,0.5);
    overflow: hidden;
    z-index: 1;
    background-clip: content-box;
  }
  .container:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background : linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,0.8) 100%);
  }
  .col{
    width: 100%;
   /* transition: transform 0.2s linear; */
  }
  .row{
    border-style: solid;
    border-color : #eee;
    border-width: 2px;
    /* border-radius : 50%; */
  }
  .row:after{
    content: '';
    display: block;
    padding-top: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .seven:after      {background-image : url("./seven.svg");}
  .lemon:after      {background-image : url("./lemon.svg");}
  .cherry:after     {background-image : url("./cherry.svg");}
  .watermelon:after {background-image : url("./waterMelon.svg");}
  .banana:after     {background-image : url("./banana.svg");}
  .bar:after        {background-image : url("./bar.svg");}
  .prune:after      {background-image : url("./prune.svg");}
  .bigwin:after     {background-image : url("./bigwin.svg");}
  .orange:after     {background-image : url("./orange.svg");}
  .seven:after      {background-image : url(//bannerflow.blob.core.windows.net/resources/seven-6803e6a7-66bb-475d-b201-e2551ac41f77.svg?v=636058905940602803);}
  .lemon:after      {background-image : url(//bannerflow.blob.core.windows.net/resources/lemon-427191a8-0a28-43fb-8bf9-6a68df0d8d0d.svg?v=636058905940602803);}
  .cherry:after     {background-image : url(//bannerflow.blob.core.windows.net/resources/cherry-73d79a68-bece-46b2-9f93-fcc4617b6dbc.svg?v=636058905940602803);}
  .watermelon:after {background-image : url(//bannerflow.blob.core.windows.net/resources/watermelon-53668bfb-8cd0-4107-b9be-b2379984b9fb.svg?v=636058905940602803);}
  .banana:after     {background-image:  url(//bannerflow.blob.core.windows.net/resources/banana-a70ac7d5-feda-4c4a-80bc-1fefc5cf1f9f.svg?v=636058905940602803);}
  .bar:after        {background-image : url(//bannerflow.blob.core.windows.net/resources/bar-69414337-7bd5-4fa0-9dfd-3f73eb313a4d.svg?v=636058905940602803);}
  .prune:after      {background-image : url(//bannerflow.blob.core.windows.net/resources/prune-eb66576f-c6ba-4c4a-88c6-b659ce01f771.svg?v=636058905940602803);}
  .bigwin:after     {background-image : url(//bannerflow.blob.core.windows.net/resources/bigwin-ea7b5813-de4b-40c6-b708-e992f57be3e0.svg?v=636058905940602803);}
  .orange:after     {background-image : url(//bannerflow.blob.core.windows.net/resources/orange-625c9be2-9b9e-45aa-b574-808930b71c41.svg?v=636058905940602803);}
  /*-------------=== winner style ===-------------*/
  .winner{
    background-color: transparent;
    -webkit-transition: transform 0.1s linear,background-color 0.1s ease;
    -moz-transition: transform 0.1s linear,background-color 0.1s ease;
    -o-transition: transform 0.1s linear,background-color 0.1s ease;
    transition: transform 0.1s linear,background-color 0.1s ease;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  .winner.active{
    -webkit-transition: transform 0.1s linear,background-color 0.5s ease;
    -moz-transition: transform 0.1s linear,background-color 0.5s ease;
    -o-transition: transform 0.1s linear,background-color 0.5s ease;
    transition: transform 0.1s linear,background-color 0.5s ease;
    background-color: rgba(0,0,0,0.5);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  .winner,.winner:before,.winner:after{
    position: absolute;
    top: 0;
    left :0;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    z-index: 3;
  }
  .winner:before,.winner:after{
    width: 100vw;
    height: 100vw;
    top : -25vw;
  }
  .winner:before{
    background : url(//bannerflow.blob.core.windows.net/resources/winner2-d4e9ae90-43f8-4575-99b9-fc675462bc35.svg?v=636058905940602803) no-repeat center;
    background-size: cover;
    -webkit-animation: rotateBackground 12s linear infinite;
    -moz-animation:    rotateBackground 12s linear infinite;
    -o-animation:      rotateBackground 12s linear infinite;
    animation:         rotateBackground 12s linear infinite;
  }
  .winner:after{
    background : url(//bannerflow.blob.core.windows.net/resources/winner1-e3971196-c01b-4985-8303-3a1829f2d529.svg?v=636058905940602803) no-repeat center;
    background-size: 50% 50%;
    -webkit-animation: scaleForeground 2s linear infinite;
    -moz-animation:    scaleForeground 2s linear infinite;
    -o-animation:      scaleForeground 2s linear infinite;
    animation:         scaleForeground 2s linear infinite;
  }
  @-webkit-keyframes rotateBackground {
    100% { -webkit-transform: rotate(360deg); }
  }
  @-moz-keyframes rotateBackground {
    100% { -moz-transform: rotate(360deg); }
  }
  @-o-keyframes rotateBackground {
    100% { -o-transform: rotate(360deg); }
  }
  @keyframes rotateBackground {
    100% { transform: rotate(360deg); }
  }
  @-webkit-keyframes scaleForeground {
    50% { -webkit-transform: scale(0.5); }
  }
  @-moz-keyframes scaleForeground {
    50% { -moz-transform: scale(0.5); }
  }
  @-o-keyframes scaleForeground {
    50% { -o-transform: scale(0.5); }
  }
  @keyframes scaleForeground {
    50% { transform: scale(0.5); }
  }
  /*-----------------------------------------------*/
  .handle{
    position: relative;
    float: left;
    vertical-align: top;
    height : 60px;
    margin-top : 70px;
    width : 15px;
    border-radius: 0 5px 5px 0/20px;
    border : 1px solid rgba(189, 160, 112, 0.5);
    background : linear-gradient(to bottom, #CD9819 0%,#f5f5f5 20%,#e2ba78 67%, #b6783d 90%, #CD9819 100%);
  }
  .handle,.handle:before,.handle:after{
    transition: all 0.2s linear;
    cursor: pointer;
  }
  .handle:before,.handle:after{
    content: '';
    display: block;
    position: absolute;
  }
  .handle:before{
    border-style: solid;
    border-width: 1px;
    border-color: rgba(163,126,67,0.1);
    background: linear-gradient(to right, #f5d6b1 0%, #cc9310 20%,#f1e767 60%,#f5f5f5 90%,#f1e767 100%);
    width: 8px;
    height: 80px;
    bottom: 30px;
    right: -10px;
    border-bottom-right-radius: 10px 8px;
  }
  .handle:after{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    top: -64px;
    right: -17px;
    border: 1px solid rgba(204,147,16,0.3);
    background: radial-gradient(ellipse at 75% 25%, #ffffff 0%,#f1e767 25%,#cc9310 60%,#feb645 91%);
  }
  .handle.active{
    background-position:0 47px;
  }
  .handle.active:before{
    height: 0px;
    border-bottom-right-radius: 2px;
    transform: translateY(5px);
  }
  .handle.active:after{
    transform: translateY(85px);
  }