body {
    font-family: 'Yatra One', cursive;
}

.terms {
    width: 100%;
    height: 100%;
    margin: 0;
}

.terms_holderx {
    height: 27px;
    margin-top: 10px;
    font-size: 18px;
    color: #F44336;
}

.terms_holderx a {
    color: #F44336!important;
    font-size: 18px;
}

@media (min-width: 1025px) {
    .q_done {
        background-color: #00C853 !important;
    }
    .q_done_spin {
        background-color: #2979FF !important;
    }
    .progress_tracker {
        width: 100%;
        background-color: transparent;
        height: 100px;
        margin-top: 10%;
    }
    .progress {
        width: 100px;
        height: 100px;
        background-color: #F44336;
        /* border: 2px solid #000; */
        float: left;
        margin-left: 2%;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wn {
        display: none;
    }
    .terms_holder {
        padding-top: 8%;
    }
    /*********************** 8 WHEEL *******************/
    .q_bottom {
        width: 80%;
        margin-left: 10%;
    }
    #canvasContainer {
        position: relative;
        width: 500px;
    }
    .wheel_canvas {
        z-index: 1;
        width: 500px;
        height: 500px;
        /* background-color: grey; */
    }
    #prizePointer {
        position: absolute;
        left: 225px;
        top: -27px;
        z-index: 999;
    }
    .spin_button {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: green;
        border: 2px solid #fff;
        color: #fff;
        font-size: 20px;
        position: absolute;
        top: 200px;
        left: 200px;
        font-weight: bold;
    }
    .spin_wheel_holder {}
    .spin_left {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        /* float: left; */
        height: 100%;
    }
    .spin_right {
        width: 45%;
        margin: 2%;
        float: left;
        height: 100%;
    }
    .reveal_gift {
        width: 320px;
        height: 320px;
    }
    .show_gift {
        width: 200px;
        height: 200px;
    }
    /*********************** 8 WHEEL *******************/
    .content {
        text-align: center;
    }
    .big_slash {
        font-size: 20px;
    }
    .big_circle_div {
        width: 200px;
        height: 200px;
        margin-top: 10%;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_div {
        float: left;
        width: 100%;
        height: 200px;
        margin-top: auto;
        margin-right: auto;
        /* margin-left: 10%; */
        /* border-radius: 105px; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_holders {
        max-width: 50%;
        max-height: 200px;
        padding-top: 10%;
    }
    .checkbox-text--description {
        font-size: 14px;
        padding-top: 8px;
        height: 60px;
        border-top: 1px solid #d9d9d9;
    }
    .middle_text {
        margin-top: 27%;
        font-size: 24px;
        font-weight: bold;
        display: inline-block;
    }
    .image_slide {
        height: 411px;
        margin-top: 20px;
    }
    .img_bg {
        width: 98%;
        height: auto;
        margin-bottom: 5px;
    }
    .swiper-container {
        width: 100%;
        height: 407px;
        margin-top: 40px;
    }
    .baloon_separator {
        width: 40%;
        float: left;
        margin-left: 5%;
        margin-right: auto;
        /* background-color: red; */
        height: 125px;
    }
    .balloon {
        width: 100%;
        padding-top: 20px !important;
        /* position: relative; */
    }
    .actual_baloon2 {
        width: 108px;
        height: 143px;
        border-radius: 0;
        border-radius: 80% 80% 80% 80%;
        margin: 0 auto;
        /* position: absolute; */
        padding: 10px;
        -webkit-transform-origin: bottom center;
    }
    .actual_baloon {
        width: 100%;
        height: 100px;
        cursor: pointer;
        margin: 0 auto;
        /* border-left: 100px solid transparent; */
        /* border-right: 100px solid transparent; */
        /* border-bottom: 200px solid ; */
        -webkit-transform-origin: bottom center;
    }
    .hidden_baloon {
        width: 100%;
        height: 100px;
        border: 1px solid grey;
        padding: 10px;
    }
    .baloon_text {
        text-align: center;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        /* padding-top: 20px; */
        line-height: 14px;
        height: 100px;
        font-family: 'Yatra One', cursive;
        width: 100%;
        /* position: relative; */
        /* top: 27px; */
    }
    .actual_baloon:before {
        /* color: rgba(182, 15, 97, 0.9); */
        position: absolute;
        bottom: -18px;
        left: 62px;
        /* content: "*"; */
        font-size: 23px;
    }
    .tq {
        margin-right: 20px;
        margin-left: 10%;
    }
    .my_icon {
        width: 60px;
        height: 60px;
    }
    h1 {
        font-size: 36px;
        color: black;
        padding-left: 20px;
    }
    p {
        font-size: 24px;
        text-align: center;
        /* padding-left: 40px; */
    }
    .formy {
        padding-top: 13%;
        text-align: left;
        padding-left: 26px;
    }
    .input {
        border-radius: 10px;
        border: 2px solid #2ab24b;
        width: 30%;
        height: 80px;
        margin-top: 10px;
        font-size: 30px;
        padding-left: 8px;
    }
    .input:focus {
        border: 4px solid #FFD600;
    }
    .butty {
        margin-top: 40px;
        width: 30%;
        height: 80px;
        font-size: 24px;
        border-radius: 3px;
        color: white;
    }
    .page1 {
        background-image: url(bg/desktop_3.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #quiz {
        background-image: url(bg/desktop_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .terms {
        background-image: url(bg/desktop_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .score_display {
        background-image: url(bg/desktop_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .spin_wheel {
        background-image: url(bg/desktop_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .display_points {
        font-size: 40px;
    }
    .counter {
        font-size: 40px;
    }
    .ordinary {
        width: 60%;
        height: 40px;
        font-size: 34px;
    }
    .eskew {
        font-size: 20px;
    }
    .skewed_button {
        width: 25%;
        height: 40px;
    }
    .skewed_input {
        width: 50%;
        height: 50px;
    }
    .ribbon {
        line-height: 1.5em;
        padding: 0.5em;
        font-size: 16px;
        margin: 20px 0 0 -1.925em;
    }
    .box_answer {
        line-height: 24px;
        font-size: 24px;
    }
    .counter {
        float: left;
        height: 50%;
        width: 100%;
        /* line-height: 50px; */
        text-align: center;
        min-height: 90px;
        border-radius: 8px;
        /* font-size: 64px; */
        color: #fff;
        /* font-family: 'Orbitron', sans-serif; */
    }
    .ribbon:before,
    .ribbon:after {
        font-size: 1.714em;
    }
    .bottom {
        background-image: url(900_stream_3_plain.jpg);
        background-repeat: no-repeat;
        background-color: black;
        background-size: contain;
    }
    .box {
        width: 90%;
        /* height: 20%;*/
        border: 1px solid #4CAF50;
        font-size: 2.2rem;
        box-shadow: inset 0 0 5px #4CAF50;
    }
    li {
        font-size: 18px;
        margin-bottom: 10px;
        border-radius: 2px;
        margin-top: 10px;
        border-left: 8px solid #4CAF50;
        border-bottom: 3px dashed #4CAF50;
    }
}


/* 
   ##Device = Tablets, Ipads (portrait)
   ##Screen = B/w 768px to 1024px
 */


/* 
   ##Device = Tablets, Ipads (landscape)
   ##Screen = B/w 768px to 1024px
 */

@media (min-width: 768px) and (max-width: 1024px) {
    .q_done {
        background-color: #00C853 !important;
    }
    .q_done_spin {
        background-color: #2979FF !important;
    }
    .progress_tracker {
        width: 100%;
        background-color: transparent;
        height: 100px;
        margin-top: 10%;
    }
    .progress {
        width: 100px;
        height: 100px;
        background-color: #F44336;
        /* border: 2px solid #000; */
        float: left;
        margin-left: 2%;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wn {
        display: none;
    }
    .terms_holder {
        padding-top: 14%;
    }
    /*********************** 8 WHEEL *******************/
    #canvasContainer {
        position: relative;
        width: 500px;
    }
    .wheel_canvas {
        z-index: 1;
        width: 500px;
        height: 500px;
        /* background-color: grey; */
    }
    #prizePointer {
        position: absolute;
        left: 225px;
        top: -27px;
        z-index: 999;
    }
    .spin_button {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: green;
        border: 2px solid #fff;
        color: #fff;
        font-size: 20px;
        position: absolute;
        top: 200px;
        left: 200px;
        font-weight: bold;
    }
    .spin_wheel_holder {}
    .spin_left {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        /* float: left; */
        height: 100%;
    }
    .spin_right {
        width: 45%;
        margin: 2%;
        float: left;
        height: 100%;
    }
    .reveal_gift {
        width: 320px;
        height: 320px;
    }
    .show_gift {
        width: 200px;
        height: 200px;
    }
    /*********************** 8 WHEEL *******************/
    .big_slash {
        font-size: 20px;
    }
    .big_circle_div {
        width: 200px;
        height: 200px;
        margin-top: 10%;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_div {
        width: 100%;
        height: 150px;
        float: left;
        /* margin-left: 10%; */
        margin-right: auto;
        margin-top: auto;
        /* border-radius: 75px; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .q_done {
        background-color: #00C853 !important;
    }
    .q_done_spin {
        background-color: #2979FF !important;
    }
    .progress_tracker {
        width: 100%;
        background-color: transparent;
        height: 100px;
        margin-top: 10%;
    }
    .progress {
        width: 100px;
        height: 100px;
        background-color: #F44336;
        /* border: 2px solid #000; */
        float: left;
        margin-left: 2%;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_holders {
        max-width: 75%;
        max-height: 250px;
        padding-top: 20%;
    }
    .checkbox-text--description {
        font-size: 14px;
        padding-top: 8px;
        height: 60px;
        border-top: 1px solid #d9d9d9;
    }
    .middle_text {
        margin-top: 27%;
        font-size: 24px;
        font-weight: bold;
        display: inline-block;
    }
    .image_slide {
        height: 411px;
        margin-top: 20px;
    }
    .img_bg {
        width: 98%;
        height: auto;
        margin-bottom: 5px;
    }
    .swiper-container {
        width: 100%;
        height: 407px;
        margin-top: 40px;
    }
    .baloon_separator {
        width: 42%;
        float: left;
        margin-left: 5%;
        /* background-color: red; */
        height: 120px;
    }
    .balloon {
        width: 100%;
        padding-top: 20px !important;
        /* position: relative; */
    }
    .actual_baloon2 {
        width: 108px;
        height: 143px;
        border-radius: 0;
        border-radius: 80% 80% 80% 80%;
        margin: 0 auto;
        /* position: absolute; */
        padding: 10px;
        -webkit-transform-origin: bottom center;
    }
    .actual_baloon {
        width: 100%;
        height: 100px;
        margin: 0 auto;
        /* border-left: 100px solid transparent; */
        /* border-right: 100px solid transparent; */
        /* border-bottom: 200px solid red; */
        -webkit-transform-origin: bottom center;
    }
    .hidden_baloon {
        width: 100%;
        height: 100px;
        border: 1px solid grey;
        margin: auto;
        padding: 10px;
    }
    .baloon_text {
        text-align: center;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        /* padding-top: 20px; */
        line-height: 14px;
        height: 100px;
        font-family: 'Yatra One', cursive;
        width: 100%;
        /* position: relative; */
        /* top: 27px; */
    }
    .actual_baloon:before {
        /* color: rgba(182, 15, 97, 0.9); */
        position: absolute;
        bottom: -18px;
        left: 62px;
        /* content: "*"; */
        font-size: 23px;
    }
    .tq {
        margin-right: 20px;
        margin-left: 10%;
    }
    .my_icon {
        width: 90px;
        height: 90px;
    }
    h1 {
        font-size: 36px;
        color: black;
        padding-left: 20px;
    }
    p {
        font-size: 24px;
        text-align: center;
        /* padding-left: 40px; */
    }
    .formy {
        padding-top: 30%;
        text-align: left;
        padding-left: 40px;
    }
    .input {
        border-radius: 5px;
        border: 2px solid #2ab24b;
        width: 50%;
        height: 80px;
        margin-top: 11px;
        font-size: 30px;
        padding-left: 8px;
    }
    .input:focus {
        border: 4px solid #FFD600;
    }
    .butty {
        margin-top: 40px;
        width: 40%;
        height: 80px;
        font-size: 30px;
        border-radius: 3px;
        color: white;
    }
    .page1 {
        background-image: url(bg/768_3.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .score_display {
        background-image: url(bg/768_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #quiz {
        background-image: url(bg/768_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .terms {
        background-image: url(bg/768_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .spin_wheel {
        background-image: url(bg/768_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .display_points {
        font-size: 40px;
    }
    .counter {
        font-size: 5em;
    }
    .ordinary {
        width: 60%;
        height: 40px;
        font-size: 34px;
    }
    .eskew {
        font-size: 20px;
    }
    .skewed_button {
        width: 25%;
        height: 40px;
    }
    .skewed_input {
        width: 50%;
        height: 50px;
    }
    .ribbon {
        line-height: 1.5em;
        padding: 0.5em;
        font-size: 1.5em;
        margin: 20px 0 0 -1.925em;
    }
    .box_answer {
        line-height: 24px;
        font-size: 24px;
    }
    .counter {
        float: left;
        height: 70%;
        width: 100%;
        /* line-height: 90px; */
        text-align: center;
        /* min-height: 90px; */
        display: flex;
        border-radius: 8px;
        font-size: 40px;
        /* color: black; */
        /* font-family: 'Orbitron', sans-serif; */
        justify-content: center;
        align-items: center;
    }
    .ribbon:before,
    .ribbon:after {
        font-size: 1.714em;
    }
    .bottom {
        background-image: url(900_stream_3_plain.jpg);
        background-repeat: no-repeat;
        background-color: black;
        background-size: contain;
    }
    .box {
        width: 90%;
        /* height: 20%;*/
        border: 1px solid #4CAF50;
        font-size: 2.2rem;
        box-shadow: inset 0 0 5px #4CAF50;
    }
    li {
        font-size: 18px;
        margin-bottom: 20px;
        border-radius: 2px;
        margin-top: 20px;
        border-left: 8px solid #4CAF50;
        border-bottom: 3px dashed #4CAF50;
    }
}


/* 
   ##Device = Low Resolution Tablets, Mobiles (Landscape)
   ##Screen = B/w 481px to 767px
 */

@media (min-width: 480px) and (max-width: 767px) {
    /*********************** 8 WHEEL *******************/
    .q_done {
        background-color: #00C853 !important;
    }
    .q_done_spin {
        background-color: #2979FF !important;
    }
    .progress_tracker {
        width: 100%;
        background-color: transparent;
        height: 100px;
        margin-top: 10%;
    }
    .progress {
        width: 70px;
        height: 70px;
        background-color: #F44336;
        /* border: 2px solid #000; */
        float: left;
        margin-left: 2%;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wn {
        display: none;
    }
    .terms_holder {
        padding-top: 10%;
    }
    #canvasContainer {
        position: relative;
        width: 450px;
    }
    .wheel_canvas {
        z-index: 1;
        width: 450px;
        height: 450px;
        /* background-color: grey; */
    }
    #prizePointer {
        position: absolute;
        left: 200px;
        top: -14px;
        z-index: 999;
    }
    .spin_button {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: green;
        border: 2px solid #fff;
        color: #fff;
        font-size: 20px;
        position: absolute;
        top: 175px;
        left: 175px;
        font-weight: bold;
    }
    .spin_wheel_holder {}
    .spin_left {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* float: left; */
        height: 100%;
    }
    .spin_right {
        width: 45%;
        margin: 2%;
        float: left;
        height: 100%;
    }
    .reveal_gift {
        width: 320px;
        height: 320px;
    }
    .show_gift {
        width: 200px;
        height: 200px;
    }
    /*********************** 8 WHEEL *******************/
    .big_slash {
        font-size: 20px;
    }
    .big_circle_div {
        width: 150px;
        height: 150px;
        margin-top: 10%;
        border-radius: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_div {
        width: 100%;
        height: 150px;
        /* margin-left: 10%; */
        float: left;
        margin-right: auto;
        margin-top: auto;
        /* border-radius: 75px; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_holders {
        max-width: 80%;
        max-height: 200px;
        padding-top: 25%;
    }
    .checkbox-text--description {
        font-size: 14px;
        padding-top: 8px;
        height: 60px;
        border-top: 1px solid #d9d9d9;
    }
    .middle_text {
        margin-top: 25%;
        display: inline-block;
    }
    .image_slide {
        height: 300px;
    }
    .img_bg {
        width: 98%;
        height: auto;
        margin-bottom: 5px;
    }
    .swiper-container {
        width: 100%;
        height: 423px;
    }
    .baloon_separator {
        width: 82%;
        float: left;
        margin-left: 8%;
        /* background-color: red; */
        height: 90px;
    }
    .actual_baloon {
        width: 100%;
        height: 80px;
        margin: 0 auto;
        /* border-left: 80px solid transparent; */
        /* border-right: 80px solid transparent; */
        /* border-bottom: 120px solid red; */
        -webkit-transform-origin: bottom center;
    }
    .hidden_baloon {
        width: 100%;
        height: 100px;
        border: 1px solid grey;
        margin: auto;
        padding: 10px;
    }
    .baloon_text {
        text-align: center;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        /* padding-top: 10px; */
        line-height: 12px;
        height: 100px;
        font-family: 'Yatra One', cursive;
        width: 100%;
        /* position: relative; */
        /* top: 27px; */
    }
    .actual_baloon:before {
        /* color: rgba(182, 15, 97, 0.9); */
        position: absolute;
        bottom: -18px;
        left: 62px;
        /* content: "*"; */
        font-size: 23px;
    }
    .tq {
        padding-right: 20px;
    }
    .my_icon {
        width: 64px;
        height: 64px;
    }
    h1 {
        font-size: 24px;
    }
    p {
        font-size: 16px;
    }
    .formy {
        padding-top: 20%;
        text-align: left;
        padding-left: 30px;
    }
    .input {
        border-radius: 2px;
        border: 3px solid #2ab24b;
        width: 53%;
        height: 50px;
        margin-top: 20px;
        font-size: 30px;
        padding-left: 8px;
    }
    .input:focus {
        border: 4px solid #FFD600;
    }
    .butty {
        margin-top: 30px;
        width: 40%;
        height: 50px;
        font-size: 25px;
        border-radius: 3px;
        color: white;
    }
    .page1 {
        background-image: url(bg/768_3.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #quiz {
        background-image: url(bg/768_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .terms {
        background-image: url(bg/768_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .score_display {
        background-image: url(bg/768_3_plain.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .spin_wheel {
        background-image: url(bg/768_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .display_points {
        font-size: 40px;
    }
    .counter {
        font-size: 3em;
    }
    .ordinary {
        width: 60%;
        height: 40px;
        font-size: 34px;
    }
    .eskew {
        font-size: 20px;
    }
    .skewed_button {
        width: 25%;
        height: 40px;
    }
    .skewed_input {
        width: 50%;
        height: 50px;
    }
    .ribbon {
        line-height: 1.5em;
        padding: 0.5em;
        font-size: 14px;
        /* margin: 0 0 0 -1.925em; */
    }
    .box_answer {
        line-height: 1.5em;
        font-size: 1.5em;
    }
    .counter {
        float: left;
        height: 70%;
        width: 100%;
        /* line-height: 40px; */
        text-align: center;
        /* min-height: 60px; */
        display: flex;
        border-radius: 8px;
        font-size: 40px;
        color: #fff;
        /* font-family: 'Orbitron', sans-serif; */
        justify-content: center;
        align-items: center;
    }
    .ribbon:before,
    .ribbon:after {
        font-size: 1.714em;
    }
    .bottom {
        background-image: url(700_stream_3_plain.jpg);
        background-repeat: no-repeat;
        background-color: black;
        background-size: contain;
    }
    .box {
        width: 90%;
        /*height: 20%;*/
        border: 1px solid #4CAF50;
        font-size: 2.2rem;
        box-shadow: inset 0 0 5px #4CAF50;
    }
    li {
        font-size: 14px;
        margin-bottom: 20px;
        border-radius: 2px;
        margin-top: 20px;
        border-left: 4px solid #4CAF50;
        /* border-bottom: 3px dashed #4CAF50; */
    }
}


/* 
   ##Device = Most of the Smartphones Mobiles (Portrait)
   ##Screen = B/w 320px to 479px
 */

@media (min-width: 321px) and (max-width: 480px) {
    .q_done {
        background-color: #00C853 !important;
    }
    .q_done_spin {
        background-color: #2979FF !important;
    }
    .progress_tracker {
        width: 100%;
        background-color: transparent;
        height: 100px;
        margin-top: 10%;
    }
    .progress {
        width: 50px;
        height: 50px;
        background-color: #F44336;
        /* border: 2px solid #000; */
        float: left;
        margin-left: 2%;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wn {
        display: block;
    }
    .terms_holder {
        padding-top: 21%;
    }
    /*********************** 8 WHEEL *******************/
    #canvasContainer {
        position: relative;
        width: 300px;
    }
    .wheel_canvas {
        z-index: 1;
        width: 300px;
        height: 300px;
        /* background-color: grey; */
    }
    #prizePointer {
        position: absolute;
        left: 125px;
        top: -27px;
        z-index: 999;
    }
    .spin_button {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: green;
        border: 2px solid #fff;
        color: #fff;
        font-size: 20px;
        position: absolute;
        top: 100px;
        left: 100px;
        font-weight: bold;
    }
    .spin_wheel_holder {}
    .spin_left {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* float: left; */
        height: 100%;
    }
    .spin_right {
        width: 45%;
        margin: 2%;
        float: left;
        height: 100%;
    }
    .reveal_gift {
        width: 320px;
        height: 320px;
    }
    .show_gift {
        width: 200px;
        height: 200px;
    }
    /*********************** 8 WHEEL *******************/
    .big_slash {
        font-size: 20px;
    }
    .big_circle_div {
        width: 150px;
        height: 150px;
        margin-top: 10%;
        border-radius: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_div {
        width: 100%;
        height: 120px;
        /* margin-left: 10%; */
        float: left;
        margin-right: auto;
        margin-top: auto;
        /* border-radius: 75px; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_holders {
        max-width: 90%;
        max-height: 213px;
        padding-top: 35%;
    }
    .checkbox-text--description {
        font-size: 14px;
        padding-top: 8px;
        height: 60px;
        border-top: 1px solid #d9d9d9;
    }
    .middle_text {
        margin-top: 30%;
        font-size: 12px;
        font-weight: bold;
        display: inline-block;
    }
    .image_slide {
        height: 224px;
        margin-top: 20px;
    }
    .img_bg {
        width: 98%;
        height: auto;
        margin-bottom: 5px;
    }
    .swiper-container {
        width: 100%;
        height: 250px;
        margin-top: 30px;
    }
    .baloon_separator {
        width: 85%;
        /* float: left; */
        margin-left: 7%;
        /* background-color: red; */
        height: 90px;
    }
    .actual_baloon2 {
        width: 110px;
        height: 150px;
        border-radius: 0;
        border-radius: 80% 80% 80% 80%;
        margin: 0 auto;
        /* position: absolute; */
        padding: 10px;
        -webkit-transform-origin: bottom center;
    }
    .actual_baloon {
        width: 100%;
        height: 80px;
        margin: 0 auto;
        /* border-left: 80px solid transparent; */
        /* border-right: 80px solid transparent; */
        /* border-bottom: 120px solid red; */
        -webkit-transform-origin: bottom center;
    }
    .hidden_baloon {
        width: 100%;
        height: 60px;
        border: 1px solid grey;
        margin: auto;
        padding: 10px;
    }
    .baloon_text {
        text-align: center;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        /* padding-top: 10px; */
        /* line-height: 12px; */
        height: 80px;
        font-family: 'Yatra One', cursive;
        width: 100%;
        /* position: relative; */
        /* top: 27px; */
    }
    .actual_baloon:before {
        /* color: rgba(182, 15, 97, 0.9); */
        position: absolute;
        bottom: -18px;
        left: 62px;
        /* content: "*"; */
        font-size: 23px;
    }
    .tq {
        /* padding-right: 20px; */
        margin-right: 10px;
        margin-left: 10%;
    }
    .my_icon {
        width: 50px;
        height: 50px;
    }
    h1 {
        font-size: 24px;
        color: black;
        padding-left: 10px;
    }
    p {
        font-size: 16px;
        text-align: center;
        /* padding-left: 20px; */
    }
    .formy {
        padding-top: 32%;
        text-align: left;
        padding-left: 30px;
    }
    .input {
        border-radius: 5px;
        border: 3px solid #2ab24b;
        width: 60%;
        height: 50px;
        margin-top: 10px;
        font-size: 20px;
        /* padding-left: 8px; */
    }
    .input:focus {
        border: 4px solid #FFD600;
    }
    .butty {
        margin-top: 10px;
        width: 40%;
        height: 60px;
        font-size: 20px;
        border-radius: 3px;
        color: white;
    }
    .display_points {
        font-size: 30px;
    }
    .counter {
        font-size: 30px;
    }
    .ordinary {
        font-size: 20px;
    }
    .eskew {
        font-size: 18px;
    }
    .ribbon {
        line-height: 1.43em;
        padding: 0.5em;
        font-size: 14px;
        margin: 20px 0 0 -0.625em;
    }
    .box_answer {
        line-height: 1.43em;
        font-size: 16px;
    }
    .ribbon:before,
    .ribbon:after {
        font-size: 0.714em;
    }
    .bottom {
        background-image: url(streambar_3_plain.jpg);
        background-repeat: no-repeat;
        background-color: black;
        background-size: contain;
    }
    .box {
        width: 90%;
        /* height: 20%; */
        border: 1px solid #4CAF50;
        font-size: 1.50rem;
        box-shadow: inset 0 0 5px #4CAF50;
    }
    li {
        font-size: 12px;
        margin-bottom: 10px;
        border-radius: 2px;
        margin-top: 10px;
        border-left: 4px solid #4CAF50;
        border-bottom: 1px dashed #4CAF50;
    }
    .page1 {
        background-image: url(bg/360_3.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #quiz {
        background-image: url(bg/360_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .terms {
        background-image: url(bg/360_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .score_display {
        background-image: url(bg/360_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .spin_wheel {
        background-image: url(bg/360_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@media (max-width: 320px) {
    .q_done {
        background-color: #00C853 !important;
    }
    .q_done_spin {
        background-color: #2979FF !important;
    }
    .progress_tracker {
        width: 100%;
        background-color: transparent;
        height: 100px;
        margin-top: 10%;
    }
    .progress {
        width: 40px;
        height: 40px;
        background-color: #F44336;
        /* border: 2px solid #000; */
        float: left;
        margin-left: 2%;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wn {
        display: block;
    }
    .terms_holder {
        padding-top: 17%;
    }
    /*********************** 8 WHEEL *******************/
    #canvasContainer {
        position: relative;
        width: 280px;
    }
    .wheel_canvas {
        z-index: 1;
        width: 280px;
        height: 280px;
        /* background-color: grey; */
    }
    #prizePointer {
        position: absolute;
        left: 115px;
        top: -27px;
        z-index: 999;
    }
    .spin_button {
        width: 90px;
        height: 90px;
        border-radius: 100%;
        background-color: green;
        border: 2px solid #fff;
        color: #fff;
        font-size: 16px;
        position: absolute;
        top: 95px;
        left: 95px;
        font-weight: bold;
    }
    .spin_wheel_holder {}
    .spin_left {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* float: left; */
        height: 100%;
    }
    .spin_right {
        width: 45%;
        margin: 2%;
        float: left;
        height: 100%;
    }
    .reveal_gift {
        width: 320px;
        height: 320px;
    }
    .show_gift {
        width: 200px;
        height: 200px;
    }
    /*********************** 8 WHEEL *******************/
    .big_slash {
        font-size: 20px;
    }
    .big_circle_div {
        width: 150px;
        height: 150px;
        margin-top: 7%;
        border-radius: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_div {
        width: 150px;
        height: 150px;
        /* margin-left: 10%; */
        margin-right: auto;
        margin-top: auto;
        /* float:left; */
        border-radius: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle_holders {
        max-width: 91%;
        max-height: 200px;
        padding-top: 22%;
        text-align: center;
    }
    .checkbox-text--description {
        font-size: 14px;
        padding-top: 8px;
        height: 60px;
        border-top: 1px solid #d9d9d9;
    }
    .middle_text {
        margin-top: 30%;
        font-size: 12px;
        font-weight: bold;
        display: inline-block;
    }
    .checkbox-text--description {
        font-size: 14px;
        padding-top: 8px;
        height: 60px;
        border-top: 1px solid #d9d9d9;
    }
    .image_slide {
        height: 183px;
        margin-top: 20px;
    }
    .img_bg {
        width: 98%;
        height: auto;
        margin-bottom: 5px;
    }
    .swiper-container {
        width: 100%;
        height: 188px;
        margin-top: 20px;
    }
    .baloon_separator {
        width: 85%;
        float: left;
        margin-left: 7%;
        /* background-color: red; */
        height: 110px;
    }
    .balloon {
        width: 100%;
        padding-top: 20px !important;
        /* position: relative; */
    }
    .actual_baloon2 {
        width: 108px;
        height: 143px;
        border-radius: 0;
        border-radius: 80% 80% 80% 80%;
        margin: 0 auto;
        /* position: absolute; */
        padding: 10px;
        -webkit-transform-origin: bottom center;
    }
    .actual_baloon {
        width: 100%;
        height: 100px;
        margin: 0 auto;
        /* border-left: 77px solid transparent; */
        /* border-right: 75px solid transparent; */
        /* border-bottom: 120px solid red; */
        -webkit-transform-origin: bottom center;
    }
    .hidden_baloon {
        width: 100%;
        height: 60px;
        border: 1px solid grey;
        margin: auto;
        /* padding: 10px; */
    }
    .baloon_text {
        text-align: center;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        /* padding-top: 10px; */
        /* line-height: 12px; */
        /* height: 140px; */
        /* font-family: 'Yatra One', cursive; */
        width: 100%;
        height: 100%;
        /* position: relative; */
        /* top: 27px; */
    }
    .actual_baloon:before {
        /* color: rgba(182, 15, 97, 0.9); */
        position: absolute;
        bottom: -18px;
        left: 62px;
        /* content: "*"; */
        font-size: 23px;
    }
    .tq {
        margin-right: 10px;
        margin-left: 10%;
        /* padding-right: 20px; */
    }
    .my_icon {
        width: 48px;
        height: 48px;
    }
    h1 {
        font-size: 20px;
        color: black;
        padding-left: 2px;
    }
    p {
        font-size: 16px;
        text-align: center;
    }
    .counter {
        float: left;
        height: 50%;
        width: 100%;
        line-height: 60px;
        text-align: center;
        min-height: 60px;
        border-radius: 8px;
        font-size: 24px;
        /* color: black; */
        /* font-family: 'Orbitron', sans-serif; */
    }
    .formy {
        padding-top: 32%;
        text-align: left;
        padding-left: 20px;
    }
    .input {
        border-radius: 5px;
        border: 2px solid #2ab24b;
        width: 50%;
        height: 40px;
        margin-top: 10px;
        font-size: 16px;
        padding-left: 8px;
    }
    .input:focus {
        border: 4px solid #FFD600;
    }
    .butty {
        margin-top: 20px;
        width: 40%;
        height: 40px;
        font-size: 16px;
        border-radius: 3px;
        color: white;
    }
    .display_points {
        font-size: 2em;
    }
    .counter {
        font-size: 2em;
    }
    .page1 {
        background-image: url(bg/320_3.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #quiz {
        background-image: url(bg/320_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .terms {
        background-image: url(bg/320_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .score_display {
        background-image: url(bg/320_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .spin_wheel {
        background-image: url(bg/320_3_plain.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .ordinary {
        font-size: 18px;
    }
    .eskew {
        font-size: 16px;
    }
    .ribbon {
        line-height: 1.43em;
        padding-top: 1em;
        font-size: 16px;
        margin: 2em 1em 0 1em;
        width: 90%;
        height: 70%;
        display: flex;
        /* float: left; */
    }
    .box_answer {
        line-height: 1.2em;
        font-size: 16px;
    }
    .ribbon:before,
    .ribbon:after {
        font-size: 0.714em;
    }
    .bottom {
        background-image: url(320_stream_3_plain.jpg);
    }
    .box {
        width: 90%;
        /*height: 20%;*/
        border: 1px solid #4CAF50;
        font-size: 1.30rem;
        box-shadow: inset 0 0 5px #4CAF50;
    }
    li {
        font-size: 10.5px;
        margin-bottom: 5px;
        border-radius: 2px;
        border-left: 2px solid #4CAF50;
        /* border-bottom: 1px dashed #4CAF50; */
    }
}