/********* Defaults **********
 ****  ***** *****  ***  *   * *     *****
 *   * *     *     *   * *   * *       *
 *   * ***   ***   ***** *   * *       *
 *   * *     *     *   * *   * *       *
 ****  ***** *     *   *  ***  *****   *
*/

#gpayoverlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6); /* Black background with opacity */
    z-index: 10000; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

@media only screen and (min-width: 736px) {

    .buy-now-quick {
        width: 78%;
        float: right;
        text-align: center;
        font-size: 13px;
        height: 40px;
    }

    .apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        -apple-pay-button-type: buy;
        margin-bottom: 3px;
        margin-top: 1px;
        height: 40px;
        width: 190px
    }

    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }

    .apple-pay-button-white {
        -apple-pay-button-style: white;
    }

    .apple-pay-button-white-with-line {
        -apple-pay-button-style: white-outline;
    }

    #gpay-button {
        display: inline-block;
        height: 40px;
        margin-bottom: 3px;
        width: 190px
    }

    #paypal-button {
        display: inline-block;
        height: 40px;
        margin-bottom: 3px;
        width: 190px
    }
}


/********* Tablet Portrait / Large Mobile Landscape **********
 *****  ***  ****  *     ***** *****      ****   ***  ****  *****
   *   *   * *   * *     *       *        *   * *   * *   *   *
   *   ***** ****  *     ***     *        ****  *   * ****    *
   *   *   * *   * *     *       *        *     *   * *   *   *
   *   *   * ****  ***** *****   *        *      ***  *   *   *
*/
/*@media only screen and (min-width: 660px) and (max-width: 999px) {*/
@media only screen and (min-width: 736px) and (max-width: 1024px) {

    .apple-pay-button {
        width: 190px
    }

    #gpay-button {
        width: 190px
    }

    #paypal-button {
        width: 190px
    }
}

/*************** Mobile ****************
 *     *  ****  ****  ***** *     *****
 **   ** *    * *   *   *   *     *
 * *** * *    * ****    *   *     ***
 *     * *    * *   *   *   *     *
 *     *  ****  ****  ***** ***** *****
*/
/*@media only screen and (min-width: 0px) and (max-width: 659px) {*/

@media only screen and (min-width: 0px) and (max-width: 735px) {

    .buy-now-quick {
        width: 78%;
        float: right;
        text-align: center;
        font-size: 13px;
        height: 40px;
    }

    #apple-pay-button {
        display: none !important; /* Hidden by default */
    }

        /* When the style attribute is removed by JavaScript, this will show the button */
        #apple-pay-button:not([style]) {
            display: inline-block !important;
            -webkit-appearance: -apple-pay-button;
            -apple-pay-button-type: buy;
            margin-bottom: 3px;
            height: 40px;
            width: 290px;
        }

    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }

    .apple-pay-button-white {
        -apple-pay-button-style: white;
    }

    .apple-pay-button-white-with-line {
        -apple-pay-button-style: white-outline;
    }

    #gpay-button {
        display: inline-block;
        height: 40px;
        margin-bottom: 3px;
        width: 290px;
    }

    #paypal-button {
        display: inline-block;
        height: 40px;
        margin-bottom: 3px;
        padding-top: 5px;
        width: 290px;
    }
}