@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

#repeatButton {
  appearance: none;  
  border: none;
  background: url("../png/boton-girar.png") no-repeat;
  background-size: cover;
  width: 132px;
  height: 103px;
  cursor: pointer;
  display: none;
  position:relative; 
  margin: 0 auto;
  top: 14%;
}

.modalchick{

  margin-top: 2%;
}

.modalcuerpochick{

  font-size: 20px;
  background-color: #ff1f2f;
  color: white;
  border: none;
  width: 100%;
  cursor: pointer;
}

.popupChick{

  width: 100%;
}

.icons { 
  display: inline-block;
  width: 300px;
  height: 475px;
  overflow: hidden;
  background: url("../png/empaques_todos.png") repeat-y;
  will-change: backgroundPosition;
  transition: 0.3s background-position ease-in-out;
  transform: translateZ(0);
}

.icons:nth-child(2) {
  margin: 0px 1px;
}

* { box-sizing: border-box; }

.r-content {
  padding-top: 34px;
}

.layout{
  background: url("../png/tragamonedas-2.png") no-repeat;
  background-size:contain; 
  height: 38%;
  width: 61%;
  padding-top: 4.7%;
  margin:0px auto; 
}
.spinner-container {
  overflow: hidden;
  height: 333px;  
  padding: 0;
  position: relative;
  transform: scale(0.88,0.88);
}

.app-wrap.winner-false {
  animation: linear 1s spin;
}

.spinner-container::after {
  position: absolute;
  content: '';
  display: block;
  height: 246px;
  top: 50%;
  right: 30px;
  left: 30px;
}

.gradient-fade {
  position: absolute;
  top: 32px;
  right: 32px;
  bottom: 32px;
  left: 32px;
}


@media screen and (min-width: 1711px){
  .layout{
    height: 649px;
  }
  .spinner-container {
    height: 411px;  
    margin-top: -2px;
    margin-right: 8%;
  }
  #repeatButton{
    top: 5%;
  }

   .icons:nth-child(2) {
    margin: 0 50px;
}

  .icons{
    width: 250px;
  }

}


@media screen and (min-width: 1367px) and (max-width: 1710px){
  .layout{
    height: 649px;
    margin-bottom: -8%;
  }
  .spinner-container {
    height: 350px;  
    margin-top: 1px;
  }
  #repeatButton{
    top: 3%;
  }

   .icons:nth-child(2) {
    margin: 0 0px;
}

.popupChick{
    width: 76%;
    height: auto;
    display: block;
    margin: 0 auto;
}

  .icons{
    width: 250px;
  }

}


@media screen and (min-width: 992px) and (max-width: 1366px){
  .layout{
    height: 659px;
  }
  .spinner-container {
    height: 314px;  
    margin-top: 2px;
    padding-left: 0%;
  }
  #repeatButton{
    top: 2%;
  }

  .icons:nth-child(2) {
    margin: 0 -29px;
}

  .icons{
    width: 250px;
  }
}

@media screen and (min-width: 769px) and (max-width:1024px){
  .layout{
    width: 100%;
    padding-top: 7.7%;
    height: 609px;
  }
  .spinner-container {
    height: 320px;  
    padding-left: 4%;
  }
  #repeatButton{
    
  }
}

@media only screen and (min-width:321px) and (max-width:768px){
  .layout{
    width: 100%;
    padding-top: 3.7%;
  }

  .spinner-container {
   margin-top: 4px;
  }

  .icons{
    width: 98px;
    height: 140px;
    background-size: cover;
  }
}

@media screen and (max-width: 320px) {
  .icons{
    width: 98px;
    height: 127px;
    background-size: cover;
  }
  .layout{
    width: 100%;
    padding-top: 7.7%;
  }
  .spinner-container {
    height: 320px;  
    padding-left: 4%;
  }
  #repeatButton{
    
  }
}