body{
/*    padding-right: 0 !important;*/
background-color: #fff !important;
  margin-right: unset !important;
  margin-left:  unset !important;
}
#spinWheelModal .modal-dialog-centered {
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#spinWheelModal .modal-header{
    display: inline-block;
}
#spinWheelModal .modal-footer button{
    float: unset;
}
#spinWheelModal .modal-title{
    margin: 10px 0;
    font-size: 2rem;
}
#spinWheelModal .modal-body{
    padding: 30px 0 !important;
}
#spinWheelModal .modal-content{
    padding: 20px;
}
#terms .content{
    padding-right:0 !important;
}

.app {
    width: 100%;
    height: auto400px;
    margin: 0 auto;
    position: relative;
    transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.wheel {
    width: 100%;
    height: 100%;
}
.spin-the-wheel{
    position: relative;
/*    display: flex;*/
/*    justify-content: center;*/
}
.reduceWheel{
    width:300px;
    height:auto;
    transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.marker {
    position: relative;
    display: block;
    margin: auto;
    width: 65px;
    margin-top:-50px;
/*    left: 172px;*/
    top: 65px;
    z-index: 2;
    transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
  }
  .reduceMarker{
        transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    position: relative;
    display: block;
    margin: auto;
    width: 26px;
    margin-top: -30px;
    /* left: 172px; */
    top: 28px;
    z-index: 2;
  }
.drop-shadow{
    display: block;
    margin: 10px auto 0;
    opacity: 1;
    width: 440px;
    transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;

}
.reduce-dropShadow{
    width: 145px;
/*    opacity: 0.6;*/
    transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;

}
.spin-button {
    top:0;
    font-size:28px !important;
    font-weight: 800 !important;
    position: relative;
    display: block;
    /* width: 250px; */
    margin: 40px auto;
    padding: 10px 60px !important;
    float:unset !important;
    cursor: pointer;
    transition: all 0.8s;
    margin-top:30px !important;
}
.spin-button img{
    margin-top: -4px;
    margin-left: 10px;
    margin-right: -10px;
    transition: all 0.3s;
    rotate:0deg;
}
.spin-button:hover {
/*    opacity: 0.8;*/
/*    top:-5px;*/
    transition: all 0.2s;
  }
.spin-button:hover img {
    transition: all 0.3s;
    rotate: -360deg;
}
.blurred {
        filter: blur(1px)

}
#confettiCanvas {
/*    z-index: 9999;*/
    display: block;
    position: absolute;
    top: -10%;
    height: 120%;
    width: 120%;
    z-index: -1;
    left: -10%;
}
.display-4{
    font-size: 1.5rem;
}
.display-3{
    font-size: 1.4rem;
}
.spin-result{
    display: none;
    opacity: 0;
    margin-top: -20px;
        transition: all 1s;
}
.display-result{
    margin-top:2.5rem;
    display: inline-block;
    opacity: 1;
    transition: all 1s;
}
.result-heading{
    font-size: 26px;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 35px;
    overflow: hidden;
}
/*  BLUR ANIMATION ON WHEEL SPIN  */
.blur {
    animation: blur 10s;
}

@keyframes blur {
    20% {
        filter: blur(1.5px)
    }
    80% {
        filter: blur(0.5px)
    }
    100% {
        filter: blur(0)
    }
}
/*  WIND UP ANIMATION ON WHEEL SPIN BEFORE MAIN SPIN  */
.wind-up{
    animation: windUp 1s;
    animation-fill-mode: forwards;
    animation-timing-function: 'ease-out';
    animation-fill-mode: forwards;
}

@keyframes windUp {
    100% {
        rotate: 120deg;
    }   
}
/*  MAIN SPIN ANIMATION FOR WHEEL  */
.spin-it{
    animation: spinIt 5s;
    animation-fill-mode: forwards;
    animation-timing-function: 'ease-out';
}

@keyframes spinIt {
    0% {
        rotate: 120deg;
        filter: blur(0px)

    }   
    20% {
        filter: blur(1px)

    }
    100% {
        rotate: -3020deg;
        filter: blur(0px)

    }
}
/*responsive*/
@media (max-width: 768px) {
    .main-content {
        padding:20px 5px 60px 5px !important;
    }
}