/* Media queries for responsive */

@media (min-width: 768px) and (max-width: 979px) {
}

/* ANDROID TABLETS */
@media (max-width: 767px) {

    #checkout_timeline.horizontal.text li {
        font-size: 15px;
    }

    #checkout-wrapper.timeline-vertical {
        width: 60%;
    }

    form.checkout.woocommerce-checkout h3 {
        margin-bottom: 15px;
        margin-top: 0;
    }

    #checkout_timeline.horizontal.style2 li .timeline-wrapper {
        padding: 10px 10px 10px 45px;
    }

    #checkout_timeline.horizontal.style2 li {
        border-width: 1px;
    }
}

/* MOBILE PHONES */
@media (max-width: 480px) {

    /* === General Style === */

    /* Fix for iPhone */
    #checkout_timeline {
        display: block !important;
    }

    #checkout_timeline.vertical,
    #checkout-wrapper.timeline-vertical {
        width: 100%;
        float: none;
        padding: inherit;
    }

    /* === Text === */

    #checkout_timeline.text li{
        display: block;
    }

    #checkout_timeline.horizontal.text li:not(:last-child) .timeline-wrapper:after{
        display: none;
    }
    
    #checkout_timeline li .timeline-wrapper .timeline-label{
        padding-left: 0 !important;
    }

    /* === Style 1 === */

    #checkout_timeline.style1 li {
        display: block;
        height: auto;
        padding: 0;
        margin-bottom: 10px;
    }

    /* === Style 2 === */
    .show_checkout_login_reminder #checkout_timeline.horizontal.style2 li,
    .logged-in #checkout_timeline.horizontal.style2 li,
    #checkout_timeline.horizontal.style2 li {
        display: block;
        width: 100%;
        border-left-width: 1px;
    }

    #checkout_timeline.vertical.style2 li .timeline-wrapper {
        padding: 10px 10px 10px 55px;
        margin-bottom: 0;
    }

    #checkout_timeline.horizontal.style3 li,
    .logged-in #checkout_timeline.horizontal.style3 li {
        width: 100% !important;
        display: block;
        margin-bottom: 10px;
    }
}

/* IPHONE */
@media (max-width: 320px){
}

/* IPAD PORTRAIT */
@media (min-width: 768px) and (max-width: 979px) {
}

/* IPAD LANDSCAPE */
@media (min-width: 980px) and (max-width: 1199px) {
}

/** RETINA */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}