@media (max-width: 766px) and (orientation:portrait) {}

@media (max-width: 766px) and (orientation:landscape) {}

@media only screen and (max-width:860px) and (orientation:portrait) {}

@media (max-width: 1024px) and (orientation: landscape) {}

@media only screen and (max-width: 1366px) {
    .start_popUp p {
        font-size: 1.3rem;
    }

    .red_text {
        color: #f3405c;
        font-size: 1.4rem;
        font-family: 'Raleway-bold';
    }

    #popup_med {
        font-size: 1.3rem;
        font-family: 'Raleway-bold';
    }

    .custom_btn {
        padding-block: 0.7rem;
        padding-inline: 2rem;
    }

    #start_btn,
    #play_again {
        font-size: calc(1rem + 1vw);
    }

    .start_popUp .hand {
        top: 50%;
        left: -11%;
        width: 9rem;
    }
}

@media only screen and (max-width: 1024px) {

    .start_popUp .hand {
        top: 50%;
        left: -12%;
        width: 7rem;
    }
}


@media only screen and (max-width: 992px) {
    .start_popUp .hand {
        top: 50%;
        left: -5%;
        width: 7rem;
    }
}

@media only screen and (max-width : 768px) {
    .start_popUp .hand {
        top: 50%;
        left: -5%;
        width: 5rem;
    }


}




/* old Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    .right_footer,
    .left_footer {
        width: 20% !important;
    }

    .popUp_content {
        width: 65%;
        padding: .5rem !important;
    }

    #congrat_title {
        padding: 0 !important;
        margin: 0;
        font-size: 1rem;
    }

    #congrat_text {
        padding: 0;
        margin: 0;
        font-size: 0.7rem;
    }

    #collected {
        padding: 2.5px;
        margin: 0;
        font-size: 1rem;
        padding: 0.1rem 1rem;
        border: 2px solid #f3405c;
    }

    #play_again {
        font-size: calc(0.2rem + 2vw);
        padding-block: 0.4rem;
        padding-inline: 1.2rem;
    }

    .start_popUp p {
        font-size: 0.7rem;
        margin: 0;
    }

    .red_text {
        color: #f3405c;
        font-size: .8rem;
        font-family: 'Raleway-bold';
    }

    #popup_med {
        font-size: .7rem;
        font-family: 'Raleway-bold';
    }

    .start_popUp .hand {
        top: 50%;
        left: -7%;
        width: 4rem;
    }

    .pointer_wrapper {
        width: 70%;
    }

    #play_btn,
    #start_btn {
        font-size: 1.2rem;
    }

}








/* Android Tablet (landscape) ----------- */
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) and (orientation : landscape) {

    .right_footer,
    .left_footer {
        width: 13% !important;
    }

    .popUp_content {
        width: 50%;
        padding: 1.5rem !important;
    }

    #congrat_title {
        padding: 0 !important;
        margin: 0;
        font-size: 2rem;
    }

    #congrat_text {
        padding: 0;
        margin: 0;
        font-size: 1rem;
    }

    #collected {
        padding: 2.5px;
        margin: 0;
        font-size: 1.6rem;
        padding: 0.5rem 1rem;
        border: 2px solid #f3405c;
    }

    #play_again {
        font-size: calc(0.2rem + 2vw);
        padding-block: 0.4rem;
        padding-inline: 1.2rem;
    }

    .start_popUp p {
        font-size: 0.7rem;
        margin: 0;
    }

    .red_text {
        color: #f3405c;
        font-size: 1.1rem;
        font-family: 'Raleway-bold';
    }

    #popup_med {
        font-size: 1rem;
        font-family: 'Raleway-bold';
    }

    .start_popUp .hand {
        top: 50%;
        left: -7%;
        width: 4rem;
    }

    .pointer_wrapper {
        width: 70%;
    }

    #play_btn,
    #start_btn {
        font-size: 1.2rem;
    }

    .qr_code,
    .fizer_logo {
        width: 30%;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    .right_footer,
    .left_footer {
        width: 13% !important;
    }

    .popUp_content {
        width: 50%;
        padding: .4rem !important;
    }

    #congrat_title {
        padding: 0 !important;
        margin: 0;
        font-size: 2rem;
    }

    #congrat_text {
        padding: 0;
        margin: 0;
        font-size: 1rem;
    }

    #collected {
        padding: 2.5px;
        margin: 0;
        font-size: 1.6rem;
        padding: 0.5rem 1rem;
        border: 2px solid #f3405c;
    }

    #play_again {
        font-size: calc(0.2rem + 2vw);
        padding-block: 0.4rem;
        padding-inline: 1.2rem;
    }

    .start_popUp p {
        font-size: 0.7rem;
        margin: 0;
    }

    .red_text {
        color: #f3405c;
        font-size: 1.1rem;
        font-family: 'Raleway-bold';
    }

    #popup_med {
        font-size: 1rem;
        font-family: 'Raleway-bold';
    }

    .start_popUp .hand {
        top: 50%;
        left: -7%;
        width: 4rem;
    }

    .pointer_wrapper {
        width: 70%;
    }

    #play_btn,
    #start_btn {
        font-size: 1.2rem;
    }

    .qr_code,
    .fizer_logo {
        width: 30%;
    }
}



/* Desire + Galaxy S2 (landscape) ----------- */
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) and (orientation : landscape) {

    .right_footer,
    .left_footer {
        width: 13% !important;
    }

    .popUp_content {
        width: 50%;
        padding: .5rem !important;
    }

    #congrat_title {
        padding: 0 !important;
        margin: 0;
        font-size: 1rem;
    }

    #congrat_text {
        padding: 0;
        margin: 0;
        font-size: 0.7rem;
    }

    #collected {
        padding: 2.5px;
        margin: 0;
        font-size: 1rem;
        padding: 0.1rem 1rem;
        border: 2px solid #f3405c;
    }

    #play_again {
        font-size: calc(0.2rem + 2vw);
        padding-block: 0.4rem;
        padding-inline: 1.2rem;
    }

    .start_popUp p {
        font-size: 0.7rem;
        margin: 0;
    }

    .red_text {
        color: #f3405c;
        font-size: .8rem;
        font-family: 'Raleway-bold';
    }

    #popup_med {
        font-size: .7rem;
        font-family: 'Raleway-bold';
    }

    .start_popUp .hand {
        top: 50%;
        left: -7%;
        width: 4rem;
    }

    .pointer_wrapper {
        width: 70%;
    }

    #play_btn,
    #start_btn {
        font-size: 1.2rem;
    }

    .qr_code,
    .fizer_logo {
        width: 35%;
    }

}