@media screen and (max-width: 1920px) and (min-width: 1920px) {
    .contentFeatured {
        position: absolute;
        top: 0;
        left: 60px;
    }
}

@media screen and (max-width: 1440px){
    .contentFeatured {
        position: absolute;
        top: 0;
        left: -60px;
    }
}

@media screen and (max-width: 1024px) {
    .contentFeatured {
        position: absolute;
        top: -15px;
        left: -170px;
    }

    #smartKey {
        top: 240px;
        left: 455px;
    }
    
    #luggage {
        top: 250px;
        left: 255px;
    }
    
    #smartFrontRefuel {
        top: 270px;
        left: 455px;
    }
    
    #blueCore {
        top: 375px;
        left: 300px;
    }
    
    #seat {
        top: 220px;
        left: 355px;
    }
    
    #led {
        top: 130px;
        left: 515px;
    }
    
    #footstep {
        top: 340px;
        left: 280px;
    }
    
    #tire {
        top: 440px;
        left: 630px;
    }
    
    #speedo {
        top: 115px;
        left: 460px;
    }

    header nav .menu-wrap {
        margin-top: 8px;
        font-size: 15px;
    }

    .button-order {
        background-color: #27ba4e;
        color: aliceblue;
        padding: 10px 10px;
        border-radius: 20px 10px;
        transition: .25s;
        font-size: 10px;
    }

    .card {
        display: inline-block;
        margin: 10px 2px;
        width: 300px;
        border-radius: 20px 30px;
        border: none;
    }
    
    .card-title {
        height: 100px;
        background-color: #146C94;
        color: #ffffff;
        padding: 16px 13px 8px;
        position: relative;
        font-size: 15px;
    }
    
    .card-title .harga {
        display: inline-block;
        position: absolute;
        right: -3px;
        top: -18px;
        height: 30px;
        width: 170px;
        padding-top: 4px;
        border-radius: 0 50px 0 50px;
        background-color: #EB455F;
        font-weight: bold;
        text-align: center;
        outline: 3px dashed #f26b7f;
        outline-offset: 4px;
    }

    .sales-wrap .nomor {
        font-size: 14px;
    }
    
    .sales .name {
        margin-top: 6px;
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .contentFeatured {
        position: absolute;
        top: 0;
        left: -260px;
    }

    #smartKey {
        top: 180px;
        left: 470px;
    }
    
    #luggage {
        top: 190px;
        left: 340px;
    }
    
    #smartFrontRefuel {
        top: 210px;
        left: 470px;
    }
    
    #blueCore {
        top: 275px;
        left: 355px;
    }
    
    #seat {
        top: 165px;
        left: 400px;
    }
    
    #led {
        top: 100px;
        left: 515px;
    }
    
    #footstep {
        top: 250px;
        left: 340px;
    }
    
    #tire {
        top: 315px;
        left: 605px;
    }
    
    #speedo {
        top: 90px;
        left: 480px;
    }

    #smartKeyContent {
        top: 100px;
        left: 500px;
    }
    
    #luggageContent {
        top: 100px;
        left: 80px;
    }
    
    #smartFrontRefuelContent {
        top: 170px;
        left: 500px;
    }
    
    #blueCoreContent {
        top: 200px;
        left: 90px;
    }
    
    #seatContent {
        top: 10px;
        left: 135px;
    }
    
    #ledContent {
        top: 5px;
        left: 550px;
    }
    
    #footstepContent {
        top: 190px;
        left: 75px;
    }
    
    #tireContent {
        top: 200px;
        left: 335px;
    }
    
    #speedoContent {
        top: 10px;
        left: 510px;
    }

    .sales img {
        width: 150px;
    }

    .sales .nomor {
        font-size: 15px;
    }

    .sales .name {
        margin-top: 11px;
        font-size: 18px;
    }

    header {
        width: 100%;
    }

    footer iframe {
        height: 200px;
    }

    footer .partner-wrap {
        margin-top: 20px;
        padding: 0 5px;
    }

    .card {
        display: inline-block;
        margin: 10px 2px;
        width: 220px;
        border-radius: 20px 30px;
        border: none;
    }
    
    .card-title {
        font-size: 12px;
    }
    
    .card-title .harga {
        display: inline-block;
        position: absolute;
        right: -3px;
        top: -20px;
        font-size: 14px;
    }

    .marketplace span {
        font-size: 15px;
    }
    
    .marketplace img {
        width: 50px;
    }
    
    .marketplace a {
        width: 120px;
        font-size: 15px;
        margin: 10px;
    }
}

@media screen and (max-width: 425px) {
    .header-desktop {
        display: none;
    }

    .header-mobile {
        display: block;
        background-color: #080707;
        background-image: url("../../img/xv.png");
        /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
        text-align: center;
    }

    .header-mobile img {
        width: 300px;
        padding: 5px 0;
    }

    .menu-mobile {
        display: block;
    }

    .stage {
        top: -80px;
        width: 90%;
        height: 100px;
    }

    .contact-widget {
        display: none;
    }

    .display-widget-mobile {
        display: block;
    }

    .marketplace-desktop {
        display: none;
    }

    .marketplace-mobile {
        display: inline-block;
    }

    .featured-desktop {
        display: none;
    }

    .featured-mobile {
        display: block;
    }

    .sales img {
        width: 150px;
    }

    .sales .nomor {
        font-size: 15px;
    }

    .sales .name {
        margin-top: 11px;
        font-size: 18px;
    }

    header {
        width: 100%;
    }

    footer iframe {
        height: 200px;
    }

    footer .partner-wrap {
        margin-top: 20px;
        padding: 0 5px;
    }

    .card {
        display: inline-block;
        margin: 10px 2px;
        width: 200px;
        border-radius: 20px 30px;
        border: none;
    }
    
    .card-title {
        font-size: 12px;
    }
    
    .card-title .harga {
        display: inline-block;
        position: absolute;
        right: 15px;
        top: -22px;
        font-size: 14px;
    }

    .owl-prev,
    .owl-next {
        display: none;
    }
    
    .sales .name {
        margin-top: 11px;
        font-size: 20px;
    }

    .sales a {
        display: inline-block;
        margin-bottom: 15px;
    }

    footer iframe {
        border-radius: 20px;
    }

    footer .partner-mobile {
        display: block;
        text-align: center;
    }

    footer .partner-mobile img {
        width: 180px;
    }

    footer .partner-desktop {
        display: none;
    }

    .credit {
        font-size: 12px;
        padding-bottom: 70px;
    }
}

@media screen and (max-width: 384px) {
    .card {
        width: 180px;
    }
    
    .card-title {
        font-size: 12px;
    }
    
    .card-title .harga {
        top: -10px;
        font-size: 12px;
        height: 20px;
        width: 150px;
        outline: 2px dashed #f26b7f;
        outline-offset: 3px;
        padding-top: 2px;
    }

    .credit {
        font-size: 10px;
        padding-bottom: 70px;
    }
}

@media screen and (max-width: 320px) {
    .card {
        width: 150px;
    }
    
    .card-title {
        font-size: 12px;
    }
    
    .card-title .harga {
        right: 10px;
        font-size: 11px;
        width: 130px;
    }

    .featured-mobile .title {
        font-size: 12px;
    }

    .sales img {
        width: 120px;
    }

    .sales-wrap .nomor {
        font-size: 12px;
        width: 180px;
        height: 25px;
        padding-top: 4px;
        outline: 2px solid #19A7CE;
        outline-offset: 3px;
    }
    
    .sales .name {
        margin-top: 10px;
        font-size: 18px;
        width: 80px;
        height: 25px;
        border-radius: 0 0 10px 10px;
    }

    footer .partner-mobile img {
        width: 130px;
    }

    .credit {
        font-size: 9px;
        padding-bottom: 70px;
    }
}