body {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /* width: 100vw;*/
    height: 100vh;   
    background: url("../assets/EXPONOR/background.png");    
    font-family: "Montserrat", sans-serif !important;
    background-size: contain;
    background-attachment: fixed;
    margin: 0px;
}


 .contenedor-ruleta {
     transform: rotate(180deg);
 }

 .contenedor-ruleta::before {
     content: "";
     width: 50px;
     height: 50px;        
     background-image: url(../assets/exponor/ponteiro_roleta.png);
     position: absolute;
     z-index: 99999;
     top: 45%;
     left: -4%;
     transform: rotate(90deg) scale(1.5);
     pointer-events: none;
     background-size: contain;        
     background-repeat:no-repeat;
 }

 .contenedor-ruleta::after{
     content: "";
     width: 135px;
     height: 100px;    
     background-image: url(../assets/exponor/logotipo_roleta_branco.png);
     position: absolute;
     z-index: 99999;
     top: 50%;
     left: 50%;
     transform: translate(-51%, -50%) rotate(180deg);
     pointer-events: none;
     background-size: contain;   
     background-repeat: no-repeat;
     background-position: center;        
 }

.ruleta {
    /*background-color: #303030;*/
    border-radius: 360px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 0px 10px #ed7520, 0px 0px 20px 3px rgba(0, 0, 0, .25);
    -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1.04);
    animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1.04);
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

    .ruleta::before {
        content: "";
        width: 150px;
        height: 150px;
        background-color: #ed7520;
        position: absolute;
        z-index: 9999;
        border-radius: 360px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        font-weight: 500;
        box-shadow: 0px 0px 10px 4px rgb(0 0 0 / 40%);
    }

 .opcion {
     border: 0 solid transparent;
     position: absolute;
     transform-origin: top center;
     top: 50%;
 }

    .opcion::before {
        z-index: 99999;
        position: absolute;
        display: block;
        text-align: center;
        font-size: 23px;
        color: #fff;
        font-weight: 600;
        width: 104px;
        line-height: 21px;
        left: -55px;
        bottom: -230px;
        margin-top: 125px;
        transform: rotate(90deg);       
 }

    .opcion::after {
        z-index: 99999;
        position: absolute;
        display: block;
        text-align: center;
        font-size: 14px;
        color: rgb(255 255 255 / 70%);
        font-weight: 500;
        width: 40px;
        line-height: 20px; 
        left: -62px;
        bottom: -239px;
        margin-top: 125px;
        transform: rotate(100deg);       
    }

 .btn-spin{
     background-color: #ed7520;
     box-shadow: 2px 2px 11px 1px rgba(0, 0, 0, .5);
     color: white;
     border: none;
     border-radius: 20px;
     width: 500px;
     height: 100px;
     font-size: 64px;
     font-family:  "Montserrat", sans-serif!important;  
     font-weight:600;
 }
 header{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
     margin-top:3.5vh

 }
 header h1{
     text-align: center;
     color: white;
     font-size: 54px;
     margin: 1rem;      
     font-weight: 600;
 }
 header h1 span{
     font-weight: 400;
 }

 .header-img-container{
     height:110px;
 }
    header img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
 .header-message{
     background-color: white;
     width: 100%;
     padding:2rem 0rem;
     color: #ed7520;
     text-align: center;
     font-size: 24px;
 }
 .header-message p{
     margin: 0px;
 }
 .header-message span{
     font-weight: 600;
 } 
 .my-container{
     display: flex;
     flex-grow:  1;
     flex-direction: column;
     align-items: center;
     gap: 2rem;    
    
 }

 input:focus-visible {
    border: 2px solid #ed7520;
    outline: unset;
    box-shadow: 0px 0px 11px 1px rgb(237 117 32 / 25%);
}
select:focus-visible {
    border: 2px solid #ed7520;
    outline: unset;
    box-shadow: 0px 0px 11px 1px rgb(237 117 32 / 25%);
}


  input[type="checkbox"]{
    width: 25px;
    height: 25px;   
  } 

  form a{
    color: black;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 1rem;
  }

  .btn-confirm{
    margin: .75rem 0rem;
    border: none;
    background: #ed7520;
    border-radius: 5px;
    color: white;
    padding: .5rem 1rem;
    font-weight: 500;
    font-size: 20px;
    width: 100%;
    box-shadow: 2px 2px 11px 1px rgba(0, 0, 0, .25);
  }

  footer{
    background-color: white;
    color: #ed7520;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding: 1rem;
    max-height: 300px;
  }
.social-media-links{
    display: flex;
    flex-wrap:wrap;
    width: 100%;
    justify-content: space-evenly;
    color: #ed7520;
    font-size: .875rem;
}
.social-media-links img{
    width: 26px;
    height: 26px;
}

.prize-container {
    background: white;
    border-radius: 12px;
    padding: 2rem 3rem;
    width: 20%;
    text-align: center;
    height: 250px;
    place-content: center;
}

    .prize-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .text-orange {
        color: #ed7520 !important;
    }
.text-blue {
    color: rgba(19, 29, 65, 1) !important;
}
.filter-for-icon {
    filter: brightness(0) saturate(100%) invert(13%) sepia(11%) saturate(3428%) hue-rotate(189deg) brightness(96%) contrast(102%);
}
.select2-search__field{
    display:none!important;
}



@media screen and (min-width: 1600px) {  
 header h1{
   
     font-size: 54px;
    
 }
 .header-message{          
     padding:1rem 0rem;           
     font-size: 2rem;
 }

 .btn-spin{                    
     width: 400px;
     height: 80px;
     font-size: 42px;
 }



 }


@media screen and (max-width: 1400px) {
    header img {
        width: 20%;
        height: 100%;
    }

    header h1 {
        font-size: 54px;
    }

    .header-message {
        padding: 1rem 0rem;
        font-size: 2rem;
    }

    .btn-spin {
        width: 350px;
        height: 70px;
        font-size: 34px;
    }
  
    .opcion::before{
        font-size:16px;
        bottom:-190px;
    }
}



 @media (max-width:500px){
    .contenedor-ruleta::before {
        content: "";
        width: 100px;
        height: 75px;
        background-image: url(../assets/ponteiro_roleta.png);
        position: absolute;
        z-index: 99999;
        top: 38%;
        left: -23%;
        transform: rotate(180deg) scale(1);
        pointer-events: none;
        background-size: cover;
    }
    .opcion::before {
        z-index: 99999;
        position: absolute;
        display: block;
        text-align: center;
        font-size: 15px;
        color: #fff;
        font-weight: 500;
        width: 40px;
        line-height: 40px;
        left: -20px;
        bottom: -100px;
        margin-top: 125px;
        transform: rotate(90deg);
    }
    .ruleta::before {
        content: "";
        width: 100px;
        height: 100px;
        background-color: #fff;
        position: absolute;
        z-index: 9999;
        border-radius: 360px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        font-weight: 500;
    }
    .contenedor-ruleta::after {
        content: "";
        width: 78px;
        height: 100px;
        background-image: url(../assets/exponor/logo_roleta_branco.png);
        position: absolute;
        z-index: 99999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(180deg);
        pointer-events: none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .btn-spin {
        background-color: rgba(19, 29, 65, 1);
        box-shadow: 2px 2px 11px 1px rgba(0, 0, 0, .5);
        color: white;
        border: none;
        border-radius: 15px;
        width: 300px;
        height: 65px;
        font-size: 32px;
        font-family: "Montserrat", sans-serif !important;
    }
 }