:root {
    --c_white: #ffffff;
    --c_warning: #ca851e;
    --bg_warning: #ca851e;
}

body {
    background-image: url("../img/desktop.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.bg_warning {
    background-color: var(--bg_warning);
}

.main_sec {
    padding: 40px 0px;
    min-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}
.banner_img{
    position: relative;
    z-index: 1000;
}
.box {
    height: 0px;
    width: 100%;
    padding-bottom: 107.5697%;
    background-image: url("../img/box-bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
    -webkit-filter: drop-shadow(0px 0px 10px #fe9011);
    filter: drop-shadow(0px 0px 10px #fe9011);
   /* -webkit-animation: pulse-n-shining 2s linear 0s infinite;
    animation: pulse-n-shining 2s linear 0s infinite;*/
    -webkit-animation: float-n-shining 2s linear 0s infinite;
    animation: float-n-shining 2s linear 0s infinite;
    -webkit-animation-delay: calc(0.3s * var(--num));
    animation-delay: calc(0.3s * var(--num));
}

.box.active {
    -webkit-animation: tilt-n-move-shaking 0.1s linear 0s 4 forwards;
    animation: tilt-n-move-shaking 0.1s linear 0s 4 forwards;
}

.box-container {
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: -ms-grid;
    display: grid;
    place-items: center;
    opacity: 0;
    -webkit-transition: 0.75s ease 0s;
    -o-transition: 0.75s ease 0s;
    transition: 0.75s ease 0s;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.box.active .box-container {
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.prize-img {
    width: 45%;
    -webkit-filter: drop-shadow(0px 5px 15px white);
    filter: drop-shadow(0px 5px 15px white);
}

.box:hover .prize-img{
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
}


.box-side {
    position: absolute;
    z-index: 3;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    -webkit-transition: 0.75s ease 0s;
    -o-transition: 0.75s ease 0s;
    transition: 0.75s ease 0s;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.box.active .box-side{
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    opacity: 0.1;
}
.box-top {
    z-index: 1;
}

.box.active .box-top {
    -webkit-transform: translateY(-3rem);
        -ms-transform: translateY(-3rem);
            transform: translateY(-3rem);
}
.box.active .box-left {
    -webkit-transform: translateX(-3rem);
        -ms-transform: translateX(-3rem);
            transform: translateX(-3rem);
}
.box.active .box-right {
    -webkit-transform: translateX(3rem);
        -ms-transform: translateX(3rem);
            transform: translateX(3rem);
}

.prize-modal .modal-content {
    background-color: transparent;
    border: none;
}

.prize-modal .modal-body>img {
    pointer-events: none;
    -webkit-animation: shining 3s linear 0s infinite forwards;
    animation: shining 3s linear 0s infinite forwards;
}

.prize-modal-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    color: var(--c_white);
    padding: 50% 26% 16% 26%;
    text-align: center;
}

.prize-modal-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.prize-modal-preview {
    margin-bottom: 16px;
    height: 120px;
}

.prize-preview-img {
    height: 100%;
    width: auto;
}

.prize-claimBtn {
    color: #22582f;
    font-weight: bold;
    -webkit-box-shadow: -3px 3px 10px black;
    box-shadow: -3px 3px 10px black;
}

.prize-preview-text {
    color: #efd36f;
    text-shadow: -0.075em 0.075em black;
    font-size: 40px;
    font-weight: bold;
    padding-top: 0.5em;
}

.modal-backdrop {
    background-image: url("../img/desktop.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.modal-backdrop.show {
    opacity: 1;
}

.prize-modal>canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

#confetti {
    position: fixed;
    z-index: 1100 !important;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.form-box {
    background-color: #742201;
    -webkit-filter: drop-shadow(0px 0px 10px #fe9011);
    filter: drop-shadow(0px 0px 10px #fe9011);
    max-width: 400px;
    margin: auto;
}

#toggleAudio,
#live_chatBtn{
    position: fixed;
    top: 20px;
    cursor: pointer;
    z-index: 1200;
}
#toggleAudio {
    width: 35px;
    height: 35px;
    left: 20px;
}

#live_chatBtn{
    right: 20px; 
}
#live_chatBtn img{
    width: 80px; 
}
/*  */
.custom_modal{
    position: fixed;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 320px 40px 60px 40px;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
}
.custom_modalContainer{
    max-width: 320px;
    margin: auto;
}
.custom_modalContainer .btn{
    display: block;
    width: 100%;
}
.coupon_codeModal{
    display: none;
}
.inner_showCouponBtnArea{
    display: none;
}
.show_innerCouponBtn .inner_showCouponBtnArea{
    display: block;
}
.shake_err{
    -webkit-animation: tilt-n-move-shaking 0.1s linear 0s 4 forwards;
            animation: tilt-n-move-shaking 0.1s linear 0s 4 forwards;
    border-color: red;
}

@-webkit-keyframes float-n-shining {
    0%,
    100% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
        -webkit-filter: drop-shadow(0px 0px 10px #fe9011);
                filter: drop-shadow(0px 0px 10px #fe9011);
    }
    50% {
        -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
        -webkit-filter: drop-shadow(0px 0px 20px #fe9011);
                filter: drop-shadow(0px 0px 20px #fe9011);
    }
}
@keyframes float-n-shining {
    0%,
    100% {
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
        -webkit-filter: drop-shadow(0px 0px 10px #fe9011);
                filter: drop-shadow(0px 0px 10px #fe9011);
    }
    50% {
        -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
        -webkit-filter: drop-shadow(0px 0px 20px #fe9011);
                filter: drop-shadow(0px 0px 20px #fe9011);
    }
}


@-webkit-keyframes pulse-n-shining {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-filter: drop-shadow(0px 0px 10px #fe9011);
        filter: drop-shadow(0px 0px 10px #fe9011);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
        -webkit-filter: drop-shadow(0px 0px 20px #fe9011);
        filter: drop-shadow(0px 0px 20px #fe9011);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-filter: drop-shadow(0px 0px 10px #fe9011);
        filter: drop-shadow(0px 0px 10px #fe9011);
    }
}

@keyframes pulse-n-shining {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-filter: drop-shadow(0px 0px 10px #fe9011);
        filter: drop-shadow(0px 0px 10px #fe9011);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
        -webkit-filter: drop-shadow(0px 0px 20px #fe9011);
        filter: drop-shadow(0px 0px 20px #fe9011);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-filter: drop-shadow(0px 0px 10px #fe9011);
        filter: drop-shadow(0px 0px 10px #fe9011);
    }
}

@-webkit-keyframes tilt-n-move-shaking {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        -webkit-transform: translate(3px, 3px) rotate(3deg);
        transform: translate(3px, 3px) rotate(3deg);
    }
    50% {
        -webkit-transform: translate(0, 0) rotate(0eg);
        transform: translate(0, 0) rotate(0eg);
    }
    75% {
        -webkit-transform: translate(-3px, 3px) rotate(-3deg);
        transform: translate(-3px, 3px) rotate(-3deg);
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes tilt-n-move-shaking {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        -webkit-transform: translate(3px, 3px) rotate(3deg);
        transform: translate(3px, 3px) rotate(3deg);
    }
    50% {
        -webkit-transform: translate(0, 0) rotate(0eg);
        transform: translate(0, 0) rotate(0eg);
    }
    75% {
        -webkit-transform: translate(-3px, 3px) rotate(-3deg);
        transform: translate(-3px, 3px) rotate(-3deg);
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg);
    }
}

@-webkit-keyframes shining {
    0% {
        -webkit-filter: drop-shadow(0px 0px 0px var(--c_warning)00);
        filter: drop-shadow(0px 0px 0px var(--c_warning)00);
    }
    50% {
        -webkit-filter: drop-shadow(0px 0px 80px var(--c_warning));
        filter: drop-shadow(0px 0px 80px var(--c_warning));
    }
}

@keyframes shining {
    0% {
        -webkit-filter: drop-shadow(0px 0px 0px var(--c_warning)00);
        filter: drop-shadow(0px 0px 0px var(--c_warning)00);
    }
    50% {
        -webkit-filter: drop-shadow(0px 0px 80px var(--c_warning));
        filter: drop-shadow(0px 0px 80px var(--c_warning));
    }
}

@media(min-width:992px) {
    .main_container {
        max-width: 820px;
    }
}

@media (max-width:1799.98px) {
    .prize-modal .modal-dialog {
        max-width: 450px;
    }
    .prize-modal-preview {
        height: 120px;
    }
    .prize-preview-text {
        font-size: 36px;
    }
}

@media (max-width:1399.98px) {
    .prize-modal .modal-dialog {
        max-width: 400px;
    }
    .prize-modal-title {
        font-size: 16px;
    }
    .prize-modal-preview {
        height: 100px;
    }
    .prize-preview-text {
        font-size: 26px;
    }
    .custom_modal {
        padding: 250px 40px 60px 40px;
      }
}
@media(max-width:1199.98px){
    .custom_modal {
        padding: 360px 40px 60px 40px;
      }
}
@media(max-width:991.98px){
    .main_sec {
        padding: 100px 0px 20px 0px;
    }
    .custom_modal {
        padding: 420px 40px 80px 40px;
      }
}
@media (max-width:575.98px) {
    .prize-modal .modal-dialog {
        max-width: 320px;
        margin: auto;
    }
    .prize-modal-title {
        font-size: 14px;
    }
    .prize-modal-preview {
        height: 80px;
    }
    .prize-modal-content {
        padding: 46% 26% 16% 26%;
    }
    .prize-preview-text {
        font-size: 22px;
    }
    .custom_modal {
        padding: 320px 40px 80px 40px;
      }
}

@media(max-width:419.98px){
    .box_container>*{
        padding-left: 5px;
        padding-right: 5px;
    }
}