@media screen and (min-width: 2000px) {
    
    /*-----------------cms----------------------------*/
    /*-----------------cms----------------------------*/
    
    
    .banner-trapezoid:after {
        
                        left: -45em;
    width: 75%;
    }
     .title-new-line hr {
   
    top: 43px;
}
    .footer-bottom-mobile{
        display:none;
    }
    .mobile-menu-wrapper {
        display: none;
    }
    .select-mobile-wrapper,
    .banner-none-slash,
    .section-about-mobile {
        display: none;
    }
    .menu-banner,
    .banner-slash,
    .section-about-banner {
        display: block;
    }
    .h-about {
        height: 58vh;
    }
    .banner-product-view .container .row .col .wrap {
        margin-top: 14em;
    }
    .history-banner {
        margin-top: 8em;
    }
    .section-banner-global img {
        height: 145%;
    }
    .banner-product-view {
        padding: 0px 0px 40px 0px;
    }
    .global-pos-wrap {
        margin-top: -65em !important;
    }
    
    .pr-ess{
        padding-right:unset;
    }
    
    
}



@media screen and (max-width: 1999px) {
    
    /*-----------------cms----------------------------*/
    .grid-main {
    padding: 7em 30px 15px 0px;
    grid-template-columns: 1fr 5fr;
    grid-column-gap: 15px;
}
    /*-----------------cms----------------------------*/
    
    .banner-trapezoid:after {
        
                        left: -28em;
    width: 52%;
    }
    .footer-bottom-mobile{
        display:none;
    }
    .mobile-menu-wrapper {
        display: none;
    }
    .select-mobile-wrapper,
    .banner-none-slash,
    .section-about-mobile {
        display: none;
    }
    .menu-banner,
    .banner-slash,
    .section-about-banner {
        display: block;
    }
    .h-about {
        height: 58vh;
    }
    .global-pos-wrap {
        margin-top: -50em !important;
    }
    .banner-product-view {
        padding: 0px 0px 40px 0px;
    }
    .h-about {
        height: 88vh;
    }
    .banner-product-view .container .row .col .wrap {
        margin-top: 10em;
    }
    .history-banner {
        margin-top: 7em;
    }
    .section-banner-global img {
        height: 115%;
    }
    
}

@media screen and (max-width: 1441px) {
    
    
    /*-----------------cms----------------------------*/
    .grid-main {
        grid-template-columns: 1fr 4.5fr;
    }
    /*-----------------cms----------------------------*/
    
    .banner-trapezoid:after {
        
        left: -14em;
        
    }
    
    .banner-slash .img-banner {
        width: 56%;
    }
    .wrap-overview .banner-product-wrapper {
        margin-top: 7em;
    }
    .wrap-overview {
        margin-top: 11em;
    }
    .h-overview {}
    .global-pos-wrap {
        margin-top: -37em !important;
    }
    .section-banner-global img {
        height: 107%;
    }
    .h-about {
        height: 80vh;
    }
    .banner-product-view .container .row .col .wrap {
        margin-top: 9em;
    }
    .history-banner {
        margin-top: 4em;
    }
        .desc-kawa1 {
   
    right: 0%;
    
}

.desc-kawa3 {
   
    right: 0%;
    
}

    .title-new-line hr {
   
    top: 43px;
}

 .navbar-main .menu-logo .container .row .col .logo-header a img{
                   
                    width: 18em;
                        padding: 15px 0px 0px 45px;
                    
        }
}

@media screen and (max-width: 1024px) {
    
    /*-----------------cms----------------------------*/
    .grid-main {
        grid-template-columns: 1fr 3.5fr;
        grid-column-gap: 15px;
        padding: 7em 20px 15px 0px;
    }
    
    .auth-wrapper {
   
        margin: 20em 9em;
    }
    /*-----------------cms----------------------------*/
    .card-bike {
    
    height: 8.6em;
   
}
    .img-card-bike {
    
    object-fit: fill;
}
    
    .banner-trapezoid:after {
        
            left: -10em;
    width: 45%;
        
    }

    .banner-event-wrapper-lg {
        height: 380px;
    }
    .banner-event-wrapper-lg .banner-sub-lg {
        left: 28%;
        top: 46%;
    }
    .banner-event-wrapper .banner-sub {
        left: 28%;
    }
    .about-banner .img2 {
        right: -14em;
    }
    .about-banner .img1 {
        right: 3.5em;
    }
    .desc-global {
        left: 25%;
    }
    .banner-slash:after {
        width: 69%;
    }
    .section-banner-global:after {
        width: 70%;
    }
    .title-white50-os {
        font-size: 36px;
    }
    .title-white40-os {
        line-height: 43px !important;
    }
    .banner-product-view .container .row .col .wrap {
        margin-top: 10em;
    }
    .history-banner {
        margin-top: 5em;
    }
    .align-left-wrapper {
        padding-left: 2em;
        padding-top: 10px;
    }
    .align-right-wrapper {
        padding-right: 2em;
        padding-top: 10px;
    }
    .history-img-wrapper {
        width: 434px;
        height: 336px;
    }
    .align-left-wrapper h4,
    .align-right-wrapper h4 {
        margin-bottom: 15px;
    }
    .banner-grid2-wrapper .banner-grid-card .banner-grid-sub {
        left: 38%;
    }
    .carousel-item .sub-carausel {
        left: 44%;
    }
    
    .section-essense {
    padding: 100px 0px;
}
.title-black40-os {
   
    font-size: 25px;
    
}

    .title-new-line hr {
   
    top: 30px;
}
}

@media screen and (max-width: 780px) {
    
    /*-----------------cms----------------------------*/
    .auth-wrapper {
   
        margin: 14em 5em;
    }
    .sidemenu-togle,.closesidemenu{
    display:block;
}

    .grid-main {
        grid: unset;
        position: relative;
        padding: 5em 0px 14px 0px;
    }
    
    .side-menu {
        background: #222;
        min-height: 100vh;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index:1;
        display:none;
        padding-top: 50px;
    }
    /*-----------------cms----------------------------*/
    
    .card-bike {
    height: 35em;
}
    
    .align-ess-btn {
    margin-bottom: 5em;
    margin-top: 3em;
}
    
    .banner-trapezoid:after {
        
                left: -8em;
    width: 55%;
        
    }
    #filter-hidden{
    display:block;
}
#filter-menu,.navbar-main{
    display:none;
}
    .slide-menu-wrapper {
    
    overflow: auto;
    overflow-x: unset; 
    
}
    
    .slide-menu-inner {
     float: unset; 
    width: 100em;
    display: inline-block;
}
    
    .banner1 {
    background-image: url('../img/logo/banner-modenas-mobile1.png');
   
}

.banner2 {
    background-image: url('../img/logo/banner-modenas-mobile2.png');
   
}

.banner3 {
    background-image: url('../img/logo/banner-modenas-mobile3.png');
   
}
.banner4 {
    background-image: url('../img/logo/banner-modenas-mobile4.png');
   
}

.banner5 {
    background-image: url('../img/logo/banner5.png');
   
}

.banner6 {
    background-image: url('../img/gallery/banner/elegan-banner-mobile.png');
   
}


.banner7 {
    background-image: url('../img/gallery/banner/modenas-banner-mobile.png');
   
}




    .product-grid {
   
    grid-template-columns: 1fr;
   
}
    .modal-gallery {
    
    height: 60vh;
}
    .section-essense {
    padding: 20px 0px;
}
    .footer-bottom-mobile{
        display:block;
    }
    .footer-bottom{
        display:none;
    }
    .mobile-footer-hide {
        display: none;
    }
    .mobile-footer-large {
        width: 100%;
    }
    .mobile-footer-title {
        border: none;
        margin-bottom: 20px;
    }
    .mobile-menu-wrapper {
        display: block;
    }
    .banner-grid2-wrapper .banner-grid-card .banner-grid-sub {
        left: 27%;
        max-width: 340px;
    }
    .banner-grid-card,
    .banner-grid-card img {
        border-radius: 6px;
    }
    .banner-grid2-wrapper {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    .banner-event-wrapper-lg .banner-sub-lg {
        left: 37%;
    }
    .banner-event-wrapper .banner-sub {
        left: 37%;
    }
    .desc-about p {
        width: 25em;
    }
    .banner-vertical2:after {
        right: -276px;
    }
    .banner-vertical2 .img-banner {
        z-index: 1;
    }
    .desc-global {
        left: 35%;
    }
    .wrap-overview {
        margin-top: 5em !important;
    }
    .wrap-overview .banner-product-wrapper {
        margin-top: 2em;
    }
    .banner-global {
        width: 410px;
    }
    .section-banner-global:after {
        width: 150%;
    }
    .banner-global {
        margin-top: 3.5em;
    }
    .global-pos-wrap {
        margin-top: -28em !important;
    }
    .section-banner-global img {
        height: 110%;
    }
    .align-right-wrapper {
        padding-left: 20px;
    }
    .right-img-wrapper {
        padding: 20px;
    }
    .left-img-wrapper {
        padding: 20px;
    }
    .history-img-wrapper {
        width: 100%;
        height: 477px;
    }
    .row-history {
        flex-direction: column-reverse;
    }
    .row-history .col-lg-6 .align-left-wrapper {
        padding: 0px 20px;
    }
    .h-about {
        height: 56vh;
    }
    .banner-product-view .container .row .col .wrap {
        margin-top: 2em;
    }
    .history-banner {
        margin-top: 3em;
    }
    .title-white50-os {
        font-size: 26px;
    }
    .link-grey14 {
        font-size: 12px;
    }
    .enquiry-form {
        margin-left: 0px;
        margin-top: 20px;
    }
    .float-menu {
        display: none;
    }
    .header-top {
        display: none;
    }
    .product-section-banner {
        margin-top:0px;
    }
    
    #section-main{
        min-height:40px;
    }
    .section-enquiry {
        padding-top: 40px;
        padding-bottom: 10px;
    }
    .mid-m {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .dealer-wrap {
        margin-bottom: 130px;
    }
    .deal-m {
        margin-bottom: 0!important;
    }
    .banner-product-view {
        margin-top: 0px;
    }
    .align-left-wrapper {
        padding-left: 0;
        padding-top: 0;
    }
    .tab-link:after {
        top: 5.5px;
    }
    .desc-about {
        width: 100%;
    }
    .wrap-overview .banner-product-wrapper {
        width: 100%;
    }
    .select-mobile-wrapper,
    .banner-none-slash,
    .section-about-mobile {
        display: block;
    }
    .menu-banner,
    .banner-slash,
    .section-about-banner {
        display: none;
    }
    .carousel-item .sub-carausel {
        left: 38%;
    }
    .carousel-item .sub-carausel h2 {
        width: 8em;
    }
    .modal-mobile{
        max-width:unset !important;
    }
    .part-container {
    
    left: 35%;
    
    }
    
    .part-wrapper:after{
        content:none;
    }
    .banner-feature:after{
        content:none;
    }
    
    .banner-feature .feature-wrap{
            left: 33%;

    }
    
    .concept-img-wrapper {
    
    padding: 10px;
    
    }
    
    .mobile-ess-white-align-image{
        direction:rtl;
    }
    
    .pl-ess{
        padding-left:unset;
        text-align:left !important;
    }
    
    .pr-ess{
        padding-right:unset;
    }
    
    .layout-ess-1,.layout-ess-2,.layout-ess-3,.layout-ess-4,.layout-ess-5,.layout-ess-6,.layout-ess-7,.layout-ess-8,.layout-ess-9,.layout-ess-10{
        position:unset;
        top:0px;
            
    }
    
    .section-essense{
        margin-bottom:unset;
            margin-top: -6em !important;
    margin-bottom: -3em !important;
    }
    
    .grid-essence ul li {
            margin-bottom: 30px;
                grid-column-gap: 10px;
    }
    
    .grid-essence ul{
        padding-left:0px;
    }
    
    .mobile-product-view-wrap{
            margin-top: 6em !important;
    }
    
    .mobile-product-view{
        height: 530px;
    }
    .concept-img-wrapper{
        min-height: 300px;
            margin-top: 30px;
            margin-bottom: 34px;
    }
    
    .img-ess {
    height: 211px;
   
}

.img-ess-dark{
    height: 432px !important;
}

.title-black40-os {
   
    font-size: 25px;
    
}



.grid-ess-black-mobile{
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
} 
.grid-ess-black-mobile-align{
    
}

.grid-mobile-ess-inverse{
    flex-direction: column-reverse;
}

.video-mobile{
    height: 18em;
    object-fit: cover;
}

    .title-new-line hr {
   
    top:21px;
}

.desc-contact {
    margin-left: 0px;
}

.desc-slashbanner-left,.desc-slashbanner-right{
    position: unset; 
    transform: unset;
     width: unset;
}



.banner-kriss:after, .banner-white-right-slash:after,.banner-white-left-slash:after{
    content: unset;
    
}

.banner-kriss:before {
    content: '';
    top: unset;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 79%;
    background: url(../img/gallery/mobile-kriss.png);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.banner-shop:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    top: unset;
    width: 100%;
    height: 60%;
    background: url(../img/gallery/service-mobile.png);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.banner-launching:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
        top: unset;
    width: 100%;
    height: 75%;
    background: url(../img/gallery/launch-mobile.png);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.banner-factory:before {
    content: '';
    position: absolute;
    bottom: 0;
    top: unset;
    right: 0;
    width: 100%;
    height: 79%;
    background: url(../img/gallery/factory-mobile.png);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.banner-white-left-slash,.banner-white-right-slash{
    background:transparent;
        height: 50em;
}

.img-overview-logo-align {
    width: 116px !important;
    height: 38px !important;
    object-fit: contain !important;
}

.h-single{
    height: 42em !important;
}
    

}

@media screen and (max-width: 450px) {
    
    /*-----------------cms----------------------------*/
    .auth-wrapper {
   
        margin: 10em 1em;
    }
    /*-----------------cms----------------------------*/
    .card-bike {
    height: 28em;
}
    
    .chat-main {
   
    width: 23em;
    height: 32em;
}
  
    .banner-kriss:before ,.banner-factory:before,.banner-launching:before {

   
    height: 55%;
   
}

.h-single {
    height: 30em !important;
}

    
    .banner-shop:before {
   
    height: 40%;
    
}

.banner-white-left-slash, .banner-white-right-slash {
    background: transparent;
    height: 41em;
}
  
    
    .banner-trapezoid {
   position:unset;
    padding-top: 5em;
}
    
    .banner-trapezoid:after {
        
                left: -6em;
    width: 57%;
        
    }
    
    .video-mobile{
    height: 13em;
}
    
    .modal-gal-mobile{
        
    width: 90% !important;

    }
    .modal-gallery {
    
    height: 33vh;
}
    
    .slash3 {
        right: 17.8%;
    }
    .slash2 {
        right: 21%;
    }
    .mobil-icon .circle.dolar {
            padding: 3px 0px 0px 7px;
    font-size: 15px;
    }
    .mobil-icon .circle.ask {
        padding: 5px 0px 0px 6px;
    font-size: 13px;
    }
    .circle {
        width: 28px;
        height: 28px;
    }
    .mobil-icon i {
        font-size: 22px;
    }
    .mobile-search-wrapper button {
        width: 9%;
    }
    .carousel-item .sub-carausel {
        left: 52%;
    }
    .title-white60 {
        font-size: 45px;
    }
    .carousel-item .sub-carausel p {
        width: 21em;
    }
    .carousel-item .sub-carausel h2 {
        width: 6em;
    }
    .banner-event-wrapper-lg .banner-sub-lg {
        left: 49%;
        width: 23em;
        max-width: 60em;
        top: 49%;
    }
    .banner-grid2-wrapper .banner-grid-card .banner-grid-sub {
        left: 50%;
        width: 23em;
        max-width: 80em;
    }
    .banner-event-wrapper .banner-sub {
        top: 45%;
        width: 22em;
    }
    .banner-event-wrapper .banner-sub {
        left: 50%;
    }
    .desc-global p {
        width: 95%;
    }
    .desc-global {
        left: 52%;
    }
    .tab-link:after {
        top: 5.5px;
    }
    .link-black20-os,
    .link-black12-os {
        font-size: 15px;
        position: relative;
        bottom: 5px;
    }
    .title-black26-os {
        font-size: 18px !important;
    }
    .title-white26-os {
        font-size: 18px;
    }
    .section-banner-global:after {
        width: 186%;
    }
    .title-global {
        margin-top: 30px !important;
    }
    .history-img-wrapper {
        height: 270px;
    }
    .history-banner {
        width: 24em;
    }
    .product-section-banner {
        height: 200px;
    }
    .link-grey14 {
        font-size: 11px;
    }
    .bread-crumb:after {
        top: 59%;
        font-size: 10px;
    }
    .title-product-line .green-line-banner {
        width: 79%;
    }
    .title-white50-os {
        font-size: 18px;
    }
    .product-section-banner {
        padding-top: 0em;
    }
    .title-white40-os {
        font-size: 27px;
    }
    .enquiry-form {
        padding: 6px 20px 20px 20px;
    }
    .align-m {
        margin-top: 15px;
    }
    .contact-detail {
        padding-top: 21px;
        padding-bottom: 24px;
    }
    .text-white26 {
        font-size: 20px;
    }
    .align-c {
        margin-bottom: 2rem!important;
    }
    .align-csl {
        left: 41% !important;
    }
    
    .banner-product-wrapper {
    width: 350px;
    
    }
    
    .title-black40-os {
        
        font-size: 25px;
        
    }
    .img-ess {
        height: 130px;
        
    }
    
    .banner-feature .feature-wrap {
        left:44%;
        
    }
    
    .banner-feature .feature-wrap{
        width:280px;
    }
    .part-container {
    left: 49%;
}
.part-container {
    width: 310px;
   
}
.title-black40-os {
    font-size: 20px;
}

.title-black50-os {
    
    font-size: 29px;
    
}

.title-white30-os {
   
    font-size: 20px;
   
}
.img-ess-dark {
    height: 250px !important;
}
    .title-new-line hr {
   
    top: 12px;
}
}

@media screen and (max-width: 375px) {
    
    /*-----------------cms----------------------------*/
    /*-----------------cms----------------------------*/
    
    
    .card-bike {
    height: 20em;
}
    
    
    
    .img-overview-logo img {
    
    margin-top: -9px;
    
}
    
    .img-overview-logo-align {
    width: 61px !important;
    
}

.banner-shop:before {
    height: 29%;
}
    
    .banner-trapezoid:after {
        
                    left: -4em;
    width: 58%;
    }
    
    .title-new-line hr {
   
    top: 12px;
}
      .video-mobile{
    height: 11em;
}
    .banner-feature .feature-wrap {
    width: 226px;
}
    .concept-img-wrapper {
    min-height: 211px;
   
}
    .section-banner-accesories .container .row .col .flex-between h4, .section-similar .container .row .col .flex-between h4, .section-product-gallery .container .row .col .flex-between h4, .section-specification .container .row .col .flex-between h4, .section-feature .container .row .col .flex-between h4, .section-essense .container .row .col .flex-between h4, .section-concept .container .row .col .flex-between h4 {

    font-size: 18px;
    
}


    .link-black20-os, .link-black12-os {
    font-size: 11px;
  
}
    .title-black40-os {
    font-size: 16px;
}
    .img-ess {
    height: auto;
}
    .modal-gallery {
    
    height: 27vh;
}
    .part-container {
    left: 45%;
}
.part-container {
    width: 258px;
    
}
    .banner-product-wrapper {
    width: 200px;
}
    .mobil-icon .circle.dolar {
        padding: 3px 0px 0px 6px;
        font-size: 17px;
    }
    .mobil-icon .circle.ask {
        padding: 5px 0px 0px 7px;
        font-size: 13px;
    }
    .circle {
        width: 29px;
        height: 29px;
    }
    .mobile-accordion-header a {
        font-size: 13px;
    }
    .mobile-search-wrapper button {
        width: 11%;
    }
    .mobile-search-wrapper input {
        font-size: 15px;
    }
    .mobile-search-wrapper {
        height: 47px;
    }
    .slash1 {
        right: 22.2%;
    }
    .slash2 {
        right: 19%;
    }
    .slash3 {
        right: 13.8%;
    }
    .carousel-item .sub-carausel h2 {
        width: 10em;
    }
    .align-csl {
        left: 51% !important;
    }
    .carousel-item .sub-carausel p {
        width: 17em;
    }
    .carousel-item .sub-carausel {
        left: 70%;
    }
    .title-white60 {
        font-size: 24px;
    }
    .banner-event-wrapper-lg {
        height: 430px;
    }
    .banner-event-wrapper-lg .banner-sub-lg {
        left: 52%;
        width: 18em;
        top: 50%;
    }
    .banner-grid2-wrapper .banner-grid-card .banner-grid-sub {
        left: 53%;
        width: 18em;
    }
    .banner-event-wrapper .banner-sub {
        width: 17em;
    }
    .desc-global h4 {
        width: 68%;
    }
    .desc-global p {
        width: 68%;
    }
    .desc-global {
        left: 71%;
    }
    .desc-about p {
        width: 95%;
    }
    .banner-global {
        width: 306px;
    }
    .section-banner-global:after {
        width: 219%;
    }
    .history-banner img {
        width: 100%;
    }
    .history-banner {
        width: 18em;
    }
    .title-white20-os {
        font-size: 17px;
    }
    .title-white40-os {
        font-size: 24px;
    }
    .history-img-wrapper {
        height: 220px;
    }
    .title-white50-os {
        font-size: 15px;
    }
    .link-grey14 {
        font-size: 9px;
    }
    .section-enquiry {
        padding-top: 22px;
    }
    .form-container-dark .bootstrap-select>.dropdown-toggle.bs-placeholder,
    .bootstrap-select>.dropdown-toggle.bs-placeholder:active,
    .bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
    .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
        font-size: 19px;
    }
    .btn-white {
        font-size: 12px;
        padding: 7px 15px;
    }
    .align-c {
        margin-bottom: 1rem!important;
    }
    .text-white26 {
        font-size: 17px;
    }
    .img-ess-dark {
    height: 185px !important;
}
}