.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }
  .hide{
      display: none;
  }
  .final{         
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden; 
  border:solid 1px #000;
    
  }
  .final .final-inner{
    width: 350px;
    margin: auto;
    text-align: center;
    position: absolute;
    padding: 30px;
    background-color: #fff;
    transform: translateX(-50%);
    color: #77af40;
    border-radius: 20px;
    /*top: -50%;*/
    left: 50%;
    font-size: 30px;
    box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.3), 10px 10px 10px rgba(0, 0, 0, 0.2);
f    
  }
  .play-again{

  }
  .fadeOut {
      transform: scale(0.9) !important;
      transition: all 0.5s;
      pointer-events: none;
  }
  .fadeOut .flip-card.turn{
    transform: scale(1);
  }
  .fadeOut .flip-card-inner{
      opacityx: .7;
  }
  .flip-card {
    background-color: transparent;
    width: 100%;
    border: 1px solid #f1f1f1;
    transition: all 0.4s;
    aspect-ratio: 8/10;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  .flip-card.turn {
      transform: scale(1.1);
      pointer-events: none;
  }
  .flip-card.blocked {
      pointer-events: none;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    transition: all 0.5s;
    top: 0;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card.turn .flip-card-inner {
    transform: rotateY(180deg);
    transition: all 0.5s;
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  .flip-card-front img, .flip-card-back img {
      width: 100%;
      height: auto;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

.target > div{
    display: inline-block;
    border-radius: 8px;
    background-color: #d3bb1a;
    margin: 6px;
    border: 6px solid #d3bb1a;
    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.2);  
}

.target.qty8 > div {
    width: 120px;
}
.target.qty12 {
  width: 100%
  text-align:center;
}
.target.qty12 > div {
    width: 120px;
}
.target.qty24 {
  width: 100%
}
.target.qty24 > div {
    width: 120px;
}

.start {
  /*top: -200%;*/
}
.target {
  /*top: 200%;*/
}
.target, .start 
{
      opacity: 0.2;
      width: auto;
      margin: auto;
      text-align: center;
      /*position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);  */
      padding: 0px;
      /*background-color: #d3bb1a;
      background-color: #ff0;  */    
      color: #77af40;
      border-radius: 20px;
      font-size: 30px;
      /*box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.3), 10px 10px 10px rgba(0, 0, 0, 0.2);*/
}
.select-type-container
{
      display: inline-block;
      vertical-align: middle;
      width: 100%;
}
.select-type
{
      display: inline-block;
      vertical-align: top;
      width: 30%;
      text-align: center;
}
.select-type .header
{
      padding: 10px 20px;
      transition: all 0.5s;
      font-size:25px;
      font-family: 'Peralta', sans-serif;
      font-weight:400;
      color:#37363A;
}

.select-type:hover .select-level
{
      opacity:1;
      width: auto;
      height: auto;
      visibility: visible;
}
.select-level
{
      display: inline-block;
      vertical-align: middle;
      transition: all 0.5s;
}
.select-level a, .play-again, .target .play-again
{
      
      display:inline-block;
      padding:16px 66px 14px 36px;
      border-radius: 50px;
      border:none;
      cursor: pointer;
      font-size:19px;
      font-family: 'Inter', sans-serif;
      font-weight:700;
      color:#fff;     
      box-shadow: 0px 4px 2px 0px rgba(254, 221, 13, 1) inset, 0px 4px 10px 0px rgba(0, 0, 0, 0.25) inset, 0px -4px 10px 0px rgba(0, 0, 0, 0.1) inset, 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
      background:#D3BB1A url('images/img/play.png') no-repeat right 36px bottom 50%;
      margin:7px 0;
}

.back_br
{
      margin:7px 40%;    
}

.select-level a:hover, .play-again:hover
{
      background:#ED7F1D url('images/img/play.png') no-repeat right 36px bottom 50%;
      text-decoration:none;
}
.play-again-target
{
      width: auto !important;
}