html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

/* ============================= FORM ================================= */
.form-container {
    top: 17.8%;
    left: 15%;
}

.form-container input {
    font-size: 12px;
    width: 65%;
    box-sizing: border-box;
    height: 6vw;
    border: 3px solid gold;
    border-radius: 8px;
    padding: 6px;
    margin: 5px 0;
}

.form-control::placeholder {
    font-size: 18px;
    transform: translate3d(0, 1px, 0)
}

.claim-form .form-container .err-msg-container {
    margin: 0 auto;
    width: 99%
}

/* ============================= CAPTCHA ================================= */
.generated-captcha {
    font-size: 18px;
    float: left;
    height: 30px;
    width: auto;
    text-decoration: line-through;
    font-weight: bold;
    margin-left: 3px;
    padding-top: 3px;
    padding-right: 15px;
    outline: none;
    margin-bottom: 0px;
}

.captcha-field input {
    display: inline-block;
    width: 20%;
}

.captcha-error {
    display: inline-block;
    text-align: center;
}

#entered-captcha {
    width: 65%;
    display: inline-block;
}

.fs-msg {
    font-size: 14px;
}

/* ============================= CLAIM NOW BTN ================================= */
.btn1 {
    top: 27.5%;
}

.btn1 img {
    width: 75%;
    max-width: 599px;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
}

.disabled {
    pointer-events: none;
}

/* ============================= ELEMENT 1 ================================= */
.elem1 {
    top: 33.5%;
    left: 2.5%;
}

.elem1 img {
    width: 50%;
    animation: elem1 4s ease-in-out infinite;
}

/* ============================= ELEMENT 2 ================================= */
.elem2 {
    top: 33%;
    right: -35%;
    z-index: 100;
}

.elem2 img {
    width: 55%;
    animation: elem2 4s ease-in-out infinite;
}

/* ============================= ELEMENT 3 ================================= */
.elem3 {
    top: 42.1%;
    left: -3%;
}

.elem3 img {
    width: 50%;
    animation: elem3 4s ease-in-out infinite;
}

/* ============================= ARROW ================================= */
.arrow {
    margin-bottom: 30px;
    top: 33.5%;
    left: 41%;
    z-index: 555;
}

.arrow img {
    width: 15vw;
}

/* ============================= WHEEL ================================= */
.wheel {
    top: 34.5%;
    left: 8%;
    z-index: 500;
}

.wheel img {
    width: 80vw;
    transform: rotate(135deg);
}

/* ============================= SPIN NOW BTN ================================= */
.spin_btn {
    top: 44%;
    z-index: 1000;
}

.spin_btn img {
    width: 67%;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
}

/* ============================= SPIN EFFECT ================================= */
.image1 {
    animation: spinWin 4s ease normal forwards;
}

.image2 {
    animation: spinCounterClockwise 4s ease normal forwards;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes elem1 {
    0% {
        transform: translate(0, 0) rotate(10deg)
    }

    50% {
        transform: translate(-25px, 25px) rotate(10deg)
    }

    100% {
        transform: translate(0, 0) rotate(10deg)
    }
}

@keyframes elem2 {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(-25px, 25px)
    }

    100% {
        transform: translate(0, 0)
    }
}

@keyframes elem3 {
    0% {
        transform: translate(0, 0) rotate(-10deg);
    }

    50% {
        transform: translate(25px, 25px) rotate(-10deg);
    }

    100% {
        transform: translate(0, 0) rotate(-10deg);
    }
}

@keyframes spinCounterClockwise {
    0% {
        transform: rotate(0deg);
    }

    90% {
        transform: rotate(-2859deg);
    }

    95% {
        transform: rotate(-2857deg);
    }

    100% {
        transform: rotate(-2858deg);
    }
}

@keyframes spinWin {
    0% {
        transform: rotate(0deg);
    }

    90% {
        transform: rotate(2875deg);
    }

    95% {
        transform: rotate(2873deg);
    }

    100% {
        transform: rotate(2874deg);
    }
}

/* ============================= DESKTOP RESPONSIVE ================================= */
@media only screen and (min-width: 768px) {
    .form-container input {
        font-size: 20px;
        max-width: 599px;
        height: 80%;
        width: 34vw;
    }

    .form-control::placeholder {
        font-size: 16px;
        transform: translate3d(0, -2px, 0)
    }

    .generated-captcha {
        font-size: 25px;
        padding-top: 8px;
    }

    #entered-captcha {
        width: 29.5vw;
    }

    .fs-msg {
        font-size: 16px;
    }
}

/* ============================= MOBILE RESPONSIVE ================================= */
@media (max-width: 922px) {

    .form-container input {
        font-size: 28px;
        height: 9vw;
        width: 73vw;
    }

    .form-control::placeholder {
        font-size: 20px;
        transform: translate3d(0, -2px, 0)
    }

    .generated-captcha {
        font-size: 30px;
        padding-top: 12px;
    }

    #entered-captcha {
        width: 59.5vw;
    }

    .fs-msg {
        font-size: 16px;
    }
}

/* Small devices (mobile, 767px and below) */
@media (max-width: 769px) {

    .form-container input {
        font-size: 20px;
        height: 9vw;
        width: 72vw;
    }

    .form-control::placeholder {
        font-size: 16px;
        transform: translate3d(0, -2px, 0)
    }

    .generated-captcha {
        font-size: 30px;
        padding-top: 12px;
    }

    #entered-captcha {
        width: 59.5vw;
    }

    .fs-msg {
        font-size: 16px;
    }
}

/* Small devices (mobile, 425px and below) */
@media (max-width: 580px) {

    .form-container input {
        font-size: 12px;
        height: 9vw;
        width: 72vw;
    }

    .form-control::placeholder {
        font-size: 9px;
        transform: translate3d(0, -1px, 0)
    }

    .generated-captcha {
        font-size: 16px;
        padding-top: 8px;
    }

    #entered-captcha {
        width: 57.5vw;
    }

    .fs-msg {
        font-size: 12px;
    }
}

/* Small devices (mobile, 374px and below) */
@media (max-width: 375px) {

    .form-container input {
        font-size: 16px;
        height: 11vw;
        width: 72vw;
    }

    .form-control::placeholder {
        font-size: 14px;
        transform: translate3d(0, -1px, 0);
        font-style: bold;
    }

    .generated-captcha {
        font-size: 14px;
        padding-top: 8px;
    }

    #entered-captcha {
        width: 56vw;
    }

    .fs-msg {
        font-size: 10px;
    }
}