@media only screen and (min-width: 768px) {
    .ticker .ticker-container {
        flex-direction: row;
        justify-content: center;
    }
    
    .ticker .ticker-container > div:not(:last-child) { margin-right: 5px; }
}

@media only screen and (max-width: 991px) {
    header .side-scrolling {
        height: 80px;
        margin: 0 10px 0 0;
        width: 80px;
    }
    
    header .side-scrolling .scroller {
        border-width: 3px;
    }
    
    header .side-scrolling .scroller img {
        margin: 38px auto 0 -38px;
        width: 112px;
    }
    
    .how-works-main.faqs { padding: 65px 0 0; }
    
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        background: #fff;
        padding: 24px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    header .navbar-nav .nav-item {
        margin: 10px 0;
    }
    
    header .navbar-nav li:last-of-type {
        margin: 0;
        margin-top: 15px;
    }
    
    .heroMain .bgCard {
        min-height: 450px;
    }
    
    .howWorks {
        padding: 65px 0;
    }
    
    .servingGtha .img-holder,
    .about-us .img-holder,
    .howWorks .img-holder {
        text-align: center;
        margin-top: 30px;
    }
    
    .footer {
        text-align: center;
    }
    
    .footer .quickLinks {
        margin: 30px 0;
    }
    
    .footer .social-links {
        justify-content: center;
    }
    
    .how-works-main .row:not(.home-cards) [class*="col-"]:not(:last-child) {
        margin-bottom: 50px;
    }
    
    .how-works-main .row.home-cards [class*="col-"]:not(:last-child) {
        margin-bottom: 140px;
    }
}

@media only screen and (min-width: 992px) {
    header .side-scrolling {
        height: 100px;
        margin: 0 10px 0 0;
        width: 100px;
    }
    
    header .side-scrolling .scroller img {
        margin: 42px auto 0 -50px;
        width: 136px;
    }
    
    header .navbar { padding: 26px 0 10px; }
    
    .ticker .ticker-container { justify-content: flex-end; }
    
    .sell-my-car-button.mobile-only-button { display: none; }
    
    header img.logo { width: 200px; }
    
    header .navbar-nav li:not(:last-child) { margin-right: 20px; }
    
    header .navbar-nav li:last-child { margin-left: 20px; }
    
    /*stack-layout*/
    .how-works-main.stack-layout .row [class*="col-"]:not(:last-child) { margin-bottom: 50px; }

    .how-works-main.stack-layout .stepCard {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    
    .how-works-main.stack-layout .stepCard img {
        margin: 0;
        max-height: unset;
        width: 200px;
    }
    
    .how-works-main.stack-layout .stepCard > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: calc(100% - 200px);
        padding-left: 30px;
    }
    
    .how-works-main.stack-layout .bonus-card .stepCard > div {
        align-items: center;
        width: 100%;
        padding-left: 0;
    }
}

@media only screen and (min-width: 1200px) {
    header .side-scrolling {
        height: 110px;
        margin: 0 10px 0 0;
        width: 110px;
    }
    
    header .side-scrolling .scroller img {
        margin: 51px auto 0 -57px;
        width: 157px;
    }
    
    .moving-shapes.mobile-shape { display: none; }
    
    header img.logo {
        width: 300px;
    }
    
    .container {
        max-width: 1140px;
    }
    
    .how-works-main .row {
        margin: 0 -33.5px;
    }
    
    .how-works-main .row [class*="col-"] {
        padding: 0 33.5px;
    }
    
    .terms-and-policies .row:not(:last-child) {
        margin-bottom: 3rem;
    }
}

@media only screen and (max-width: 1199px) {
    .moving-shapes.desktop-shape { display: none; }
    
    .heroWrapper .shape1 {
        left: -40px;
    }
    
    .servingGtha .container::before {
        left: -30px;
    }
    
    .navbar-toggler:focus,
    .navbar-toggler {
        padding: 0;
        margin: 0;
        border: none;
        box-shadow: none;
    }
    
    .navbar-toggler[aria-expanded="false"] .cross {
        display: none;
    }
    
    .navbar-toggler[aria-expanded="true"] .menu {
        display: none;
    }
    
    .how-works-main .shape {
        left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .ticker .ticker-container {
        flex-direction: column;
        margin: 0 auto;
        max-width: 600px;
    }
    
    .ticker .ticker-container > div:not(:last-child) { margin-bottom: 5px; }
    
    .copyrights {
        flex-direction: column-reverse;
        justify-content: center;
    }
    
    .copyrights p {
        margin: 7px 0 0;
    }
}

@media only screen and (max-width: 575px) {
    .container {
        padding: 0 21px;
    }
    
    header .navbar {
        padding: 20px 0;
    }
    
    .heroMain .bgCard {
        min-height: 203px;
        margin-bottom: 20px;
    }
    
    .heroMain a.btn {
        max-width: 100%;
        position: relative;
        z-index: 5;
    }
    
    .heroWrapper:after,
    .heroWrapper::before {
        width: 54px;
        height: 54px;
    }
    
    .heroWrapper:after {
        left: -15px;
        bottom: -15px;
    }
    
    .heroWrapper:before {
        top: -15px;
        right: -15px;
    }
    
    .heroWrapper .shape1 {
        left: -31px;
        width: 24px;
        height: 24px;
        top: 39px;
    }
    
    .heroWrapper .shape2 {
        display: none;
    }
    
    .howWorks {
        padding: 35px 0;
    }
    
    .content h3 {
        font-size: 30px;
        line-height: 47px;
        margin-bottom: 6px;
    }
    
    .content p {
        font-size: 14px;
        line-height: 150%;
        margin-bottom: 20px;
    }
    
    .servingGtha .content {
        position: relative;
        z-index: 5;
    }
    
    .footer .quickLinks {
        flex-direction: column;
    }
    
    .footer .quickLinks li {
        margin: 5px;
    }
    
    .footer {
        padding: 25px;
    }
    
    .copyrights a,
    .copyrights p {
        font-size: 12px;
    }
    
    .copyrights p {
        max-width: 200px;
        margin: 7px auto 0;
    }
    
    .servingGtha .container::before {
        width: 20px;
        height: 20px;
    }
    
    .servingGtha .container::before {
        width: 24px;
        height: 24px;
        bottom: 67%;
        left: 34px;
        top: auto;
    }
    
    .how-works-main {
        padding: 18px 0 0;
    }
    
    .caption h2 {
        font-size: 30px;
    }
    
    .caption h3 {
        font-size: 24px;
    }
    
    .caption p {
        font-size: 18px;
    }
    
    .how-works-main .shape {
        left: -12px;
        width: 24px;
        height: 24px;
    }
    
    .bonus-card:before,
    .bonus-card:after,
    .cardWrapper:before,
    .cardWrapper:after {
        width: 50px;
        height: 50px;
    }
    
    .bonus-card:before,
    .cardWrapper:before {
        top: -5px;
        right: -5px;
    }
    
    .bonus-card:after,
    .cardWrapper:after {
        bottom: -5px;
        left: -5px;
    }
    
    .bonus-card .content-bonus h3,
    .stepCard h2 {
        font-size: 28px;
        margin-bottom: 3px;
    }
    
    .stepCard {
        padding: 25px;
    }
    
    .how-works-main .row:not(.home-cards) [class*="col-"]:not(:last-child) {
        margin-bottom: 50px;
    }
    
    .how-works-main .row.home-cards [class*="col-"]:not(:last-child) {
        margin-bottom: 140px;
    }
    
    .bonus-card .content-bonus h3 {
        text-align: left;
    }
    
    .bonus-card .content-bonus p {
        text-align: left;
    }
    
    .bonus-card .content-bonus {
        padding: 25px;
    }
    
    .faqs .caption {
        margin-bottom: 10px;
    }
    
    .faqs .accordion-button {
        font-size: 22px;
        line-height: 130%;
    }
    
    .faqs .accordion-item {
        padding: 20px;
    }
    
    .faqs .accordion-body {
        font-size: 14px;
    }
    
    .faqs .accordion-item {
        margin-bottom: 10px;
    }
    
    .faqs.how-works-main .shape {
        top: 30px;
    }
}

@media only screen and (min-width: 1400px) {
    .floating-phone-container {
        right: 100px;
    }
}