/* zoom en ruleta */
 

.zoomruleta {
  
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}



@media (max-width:768px)

 {
    img.zoomruleta {
        
        display: flex;
        align-items: center;
        
    }
 }  


 .encabezadoruleta {
margin: 0 auto;
display: flex;
align-items: center;
flex-direction: column;
 }


 .rotateruleta {
    animation: rotation 1s infinite linear;
  }
  
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  .maparuleta {
      width: 24rem;
  }

  @media (max-width:768px) {
    .maparuleta {
      width: 15rem;
  }
  }

.cartita_random {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
}

@media (max-width:768px)

 {
  .cartita_random {
    max-width: 400px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }
 }

.centrado {
  margin: 0 auto;
}

.centrar_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
}



.carta_resultado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 10rem;
  padding-bottom: 10rem;  
  margin: 0 auto;
  max-width: 70%;

}

@media (max-width:768px)
{
  .carta_resultado {
    display: block;
    text-align: center;
    margin: 0 auto;
    height: 70rem;
    padding-top: 5rem;
  padding-bottom: 5rem;  
  }
}


.btnruleta2 {
    
  background-color: #933f83;
  color: #fff;
  border: 0;
  padding: 0.8rem 1.3rem;
  display: block;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  margin: 1rem 0;
  max-width: 30rem;
  border-radius: 3rem;
  
}
@media(min-width: 768px)
{
  .btnruleta2 {
      display: inline-block;
      
  }
}


.btnruleta3 {
    
  background-color: #933f83;
  color: #fff;
  border: 0;
  padding: 0.8rem 1.3rem;
  
  text-align: center;
  text-decoration: none;
  margin-top: 2rem;
  max-width: 30rem;
  border-radius: 20%;
  
}
@media(min-width: 768px)
{
  .btnruleta2 {
      display: inline-block;
  }
}



.ocultar {
  display: none;
}



#cartitas {
  animation-name: cartassup;
  animation-duration: 3s;
  position: relative;
  animation-iteration-count: infinite;
}

@keyframes cartassup {
  0% { left: 0; top: 0px;}
  50% { left: 0px; top: 0px}
  100% { left:  0px; top: 0px;}
}

.cartax {
  width: 18rem;
  
}
@media (min-width: 768px){
  .cartax {
    width: 20rem;
  }
}

.titulo_baraja {
 
}

@media (min-width: 768px){
.titulo_baraja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

}

.imgcolores {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.ruedabanner {
  width: 20rem;
  
}
@media (max-width: 768px) 
{
  .ruedabanner {
    width: 10rem;
    
  }
}
.header_ruleta {
  background-image: url(../img/fondo-V2.jpg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0 4rem 0;
  
}

.rueda_banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cartaflip {
  width: 20rem;
  
  
}

@media (max-width: 768px) 
{
  .cartaflip {
    width: 18rem;
    margin-top: 2rem;
  }
}

.fondoruleta {
  background: url(../img/Fondo-Web-Cartas-.jpg);
  background-size: cover;
}

.ruletita{ 
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.btncartasacar {
  cursor: pointer;
}