body {
    font-family: 'Roboto';
    font-style: normal;
}

.title-blue26-os{
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    
    
    color: #212D65;
}

.card-service{
    background: #F2F2F2;
    border-radius: 6px;
    padding: 30px;
    min-height: 15em;
    position:relative;
}

.card-service .bottom{
    position: absolute;
    bottom: 20px;
}

.card-operation .title{
    width:40%;
}

.btn-light{
        background: none !important;
    border: none !important;
}


.btn-light:hover{
        background: none !important;
    border: none !important;
}


.btn-light:focus{
        outline: none !important;
         box-shadow: none !important;
}
.link-create{
    
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #222;
    transition: .3s ease-out;
}

.link-create:hover{
    
   
    color: #111;
    transition: .3s ease-inb;
}

.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 {
    margin-top: 9px;
}




.title-orange26-os{
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    
    
    color: #F9450C;
}
.card-operation{
        padding: 28px;
    background: #F9450C;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-height: 12em;
}
.bot-40{
    bottom:40px !important;
}

.text-justify {
    margin: 0;
    text-indent: 2rem;
    text-align: justify;
}

#section-main {
    min-height: 80px;
    position: relative;
}


.navbar-main{
                height: 80px;
                background: #222;
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 10;
        }
        
        .main-navbar-wrapper{
                width: 100%;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: flex-end;
                margin-top: -10px;
        }
        
        .navbar-main{
                height: 100px;
                cursor:pointer;
        }
        
        .navbar-main .menu-logo{
                height: 100px;
        }
        
        .navbar-main .menu-logo .container .row .col .logo-header a img{
                    /* transform: scale(1.3); */
                    padding: 8px 0px 0px 45px;
                    width: 20em;
                    /* height: 3em; */
                    object-fit: cover;
                    object-position: center;
        }
        
        .navbar-main .navbar .container .main-navbar-wrapper .upper-navbar{
                display:block;
        }
        
       /* .navbar-main:hover{
                height: 100px;
                cursor:pointer;
        }
        
        .navbar-main:hover .menu-logo{
                height: 100px;
        }
        
        .navbar-main:hover .menu-logo .container .row .col .logo-header a img{
                transform: scale(1.3);
                padding: 10px 0px 0px 45px;
        }
        
       
        
        .navbar-main:hover .navbar .container .main-navbar-wrapper .upper-navbar{
                display:block;
        }
        
        */
        
          .upper-navbar{
            height:38px;
            width:50%;
            display:none;
            margin-top: -17px;
            margin-bottom: 11px;
        }
        
        .flex-nav-upper{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-end;
            align-items: center;
            border-bottom: 1px solid #333333;
        }
        
        .flex-nav-upper .nav-upper-item{
           
            border-left: 1px solid #333333;
        }
        
        .nav-upper-item a{
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;
                padding: 10px 11px 10px 15px;
                text-decoration: none;
        }
        
        .nav-upper-item a:hover{
                cursor: pointer;
            text-decoration: none;
            transition: .3s ease-in;
            transform: translateY(-2px);
            text-shadow: 1px 1px 1px rgb(165 161 161), 0 0 25px #bbb, 0 0 5px #828282;
        }
        
        
        
        .nav-upper-item a span{
                font-weight: 400;
                font-size: 12px;
                line-height: 14px;
                
                
                color: #828282;
        }
        
        
        
        .nav-upper-item a i{
            
            font-size: 20px;
                margin-left: 7px;
                color: #828282;
                
        }
        
        
        .nav-upper-item a i.loc{
            
            font-size: 18px;
                
                
        }
        
        .logo-header {
            padding: 10px;
        }
        
        
        
        .menu-logo{
            position: relative;
            height: 80px;
        }
        
        .menu-logo:after{
            content: '';
            position: absolute;
            top: -9px;
            left: -40px;
            width: 130%;
            height: 100%;
            background: #212D65;
            -webkit-transform-origin: 100% 0;
            -ms-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-transform: skew(18deg);
            -ms-transform: skew(18deg);
            transform: skew(18deg);
            z-index: -1;
        }
.header-social {
    background: #fff;
    height: 90px;
    padding-top: 15px;
}

.ul-main {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
}

.header-top {
    /*background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    /*background:yellow;*/
    height: 350px;
}

.link-region{
    text-decoration:none;
}

.header-top-bg {
    padding-top: 20px;
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
}

.nav-top-main {
    position: relative;
    min-height: 80px;
}

.nav-top {
    padding: 0px 0px 0px 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    position: absolute;
    bottom: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 1s ease;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.header-top:hover .nav-top {
    bottom: 0;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
}

.nav-top-slide {
    bottom: 0;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))
}

ul.navbar-nav li.nav-item .navbar-link:hover {
    color: #2D9CDB !important;
}

ul.navbar-nav li.nav-item:hover>.nav-arrow:after {
    border-top: 6px solid #2D9CDB !important;
    transition: .2s ease-in !important;
}

.nav-arrow {
    position: relative;
}

.nav-arrow:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -13%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
}

.nav-arr2:after {
    right: -20% !important;
}

.nav-arr3:after {
    right: -23% !important;
}

.card-nav {
    min-height: 116px;
    background: #f2f2f2;
    margin-top:-15px;
}



ul.navbar-nav li.nav-item .curr-menu {
    color: #2D9CDB !important;
}

ul.navbar-nav li.nav-item .curr-menu:after {
    border-top: 6px solid #2D9CDB !important;
    transition: .2s ease-in !important;
}

.parent {
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    left: 20px
}

.child-container {
    width: 2730px;
    left: -710px;
    min-height: 116px;
    position: relative;
}

#child1,
#child2,
#child2b,
#child3,
#child4,
#child6
{
    width: 2000px;
    min-height: 116px;
    float: left;
    font-size: 15px;
    font-family: arial;
    padding: 10px 5px 10px 0;
    left: 720px;
    /*border-right:4px solid yellow;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: stretch;
}

.clear {
    clear: both;
}


.title-black26-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    color: #222222;
}

.title-grey26-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    color: #828282;
}

.title-green26-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    color: #62BE1B;
}

.br-null {
    border-right: none !important;
}

.align-main-menu {
    position: relative;
    top: 19px;
}

.align-main-menu-wrapper {
    padding: 0px 0px 0px 0px !important;
    position: relative;
    top: -29px;
}

.menu-card ul.list-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-card ul.list-menu li {
    padding: 1px;
    margin-bottom: 5px;
}

.menu-card ul.list-menu a {
    text-decoration: none;
    cursor: pointer;
    padding: 0px 20px;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    /* identical to box height */
    text-transform: capitalize;
    /* Grey 0 */
    color: #222222;
    transition: .3s ease-out;
}

.menu-card ul.list-menu a:hover,
.menu-card .link-title:hover {
    color: #62BE1B;
    transition: .3s ease-in;
}

.menu-card ul.list-menu a.active,
.menu-card .link-title.active {
    color: #62BE1B;
}

.menu-card .link-news {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 140%;
    /* identical to box height, or 17px */
    /* Kawaski green */
    color: #62BE1B;
    text-decoration: none;
}

.menu-card .link-title {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    /* or 20px */
    text-transform: uppercase;
    /* Grey 0 */
    color: #222222;
    width: 280px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-decoration: none;
}

.motor {
    position: relative;
}

.motor .navbar-button {
    padding: 10px 41px 7px 10px!important;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #62BE1B;
}

.motor:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f21c";
    position: absolute;
    top: 45%;
    right: 0%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    color: #fff;
}

.nav-arr3:after {
    right: -23% !important;
}

.nav-arr3:hover {
    cursor: pointer;
}

.ul-main li {
    margin-right: 15px;
}

.ul-main li a {
    display: block;
    transition: .3s ease-out;
    text-decoration: none;
}

.ul-main li a:hover {
    cursor: pointer;
    text-decoration: none;
    transition: .3s ease-in;
    transform: translateY(-2px);
    text-shadow: 1px 1px 1px rgb(165, 161, 161), 0 0 25px #bbb, 0 0 5px #828282;
}

.ul-main li a:active {
    transform: translateY(1px);
}

.ul-main li a i {
    color: rgba(130, 130, 130, 1);
    font-size: 18px;
}

.ul-main li a i.lang {
    position: relative;
    top: 2px;
    right: -4px;
}

.header-social-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.flex-between .br-grey {
    border-right: 1px solid rgba(130, 130, 130, 1);
    padding-right: 17px;
}

.header-social-align {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.header-social-align a {
    display: block;
}

.header-social-align a span {
    position: relative;
    top: -3px;
}

.header-social-align a .lang {
    position: relative;
    right: 3px;
}

.header-social-align a .loc {
    position: relative;
    right: -3px;
}

.text-grey12 {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #828282;
}

.header-main {
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    padding-top: 12px;
    padding-bottom: 13px;
}

.flex-between {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.logo-header-wrapper {
    height: 6vh;
    width: 30vw;
    position: relative;
    top: -6px;
}

.logo-header-wrapper img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.green-line {
    background: rgba(98, 190, 27, 1);
    width: 100%;
    margin-bottom: 3px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
}

.section-banner-wrapper {
    position: relative;
    background: #333;
    height: 90vh;
}

.nav-wrapper {
    position: fixed;
    z-index: 10;
    width: 100%;
    padding: 0px 0px 10px 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.lining-bottom {
    position: relative;
    top: 12px;
    display: none;
}

.nav-main {
    margin-top: 10px;
}

.navbar-link {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */
    text-transform: uppercase;
    color: #FFFFFF !important;
}

.navbar-button {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #fff !important;
    border: 0.5px solid #2D9CDB;
    background:#2D9CDB;
    border-radius: 6px;
    text-align: center;
}

li.nav-item.pt {
    padding-top: 0px;
    margin-right: 22px;
}

.float-menu {
    position: fixed;
    top: 50%;
    right: -42px;
    transform: translate(-50%, -50%);
    background: #F9450C;
    border-radius: 6px 0px 0px 6px;
    z-index: 10;
    text-align: center;
    padding: 0px 0px;
}

.float-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.float-menu ul li {
    padding: 20px 20px 20px 20px;
    transition: .3s ease-out;
}

.float-menu ul li:after {
    display: block;
    content: '';
    border-bottom: solid 4px #fff;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    position: relative;
    top: 10px;
}

.float-menu ul li:hover:after {
    transform: scaleX(1);
}

.float-menu ul li:hover {
    background: rgb(192, 183, 183, .2);
    cursor: pointer;
    transition: .3s ease-in;
    transform: translateY(-2px);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.float-menu ul li:hover:first-child {
    border-radius: 6px 0px 0px 0px;
}

.float-menu ul li:hover:last-child {
    border-radius: 0px 0px 0px 6px;
}

.float-menu ul li:last-child {}

.float-menu ul li a {
    text-decoration: none;
    cursor: pointer;
}

.float-menu ul li a i {
    color: #DADADA;
    font-size: 30px;
}

.float-menu ul li a p {
    padding: 5px 0px 0px 0px;
    margin: 0;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #fff;
}

.circle {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 2px 0px 0px 0px;
}

.menu-search-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0px 5px 0px 5px;
    margin-left: 10px;
}

.menu-text-container.grow {
    width: 200px;
}

.menu-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F2F2F2;
    overflow: hidden;
    width: 0px;
    height: 100%;
    transition: width 1s;
    border: 0px solid #F2F2F2;
    border-radius: 6px;
    margin-right: 5px;
}

.menu-text-container input {
    width: 100%;
    height: 100%;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
    border: none;
    background: transparent;
    padding-left: 8px;
}

.menu-text-container input:focus {
    outline: none;
}

.search-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search {
    background: transparent;
    border: none;
    transition: .3s ease-out;
}

.btn-search:hover {
    transition: .3s ease-in;
    transform: translateY(-2px);
}

.btn-search:active {
    transform: translateY(2px);
}

.btn-search:focus {
    outline: none;
}

.btn-search i {
    color: #2D9CDB;
}

.banner-slider {
    position: relative;
}

.carousel .carousel-item {
    height: 93vh;
}

.carousel-item img.d-block {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    object-fit: cover;
    object-position: center center;
    z-index: -2;
}

.carousel-indicators {
    margin-right: 8%;
    margin-left: 8%;
}

.carousel-indicators [data-bs-target] {
    position: relative;
    height: 6px;
    border: none;
    border-radius: 24px;
    width: 100%;
}

.carousel-indicators [data-bs-target] span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #2D9CDB;
    border-radius: inherit;
}
.lh-45{
    line-height:45px !important;
}
.carousel-item .sub-carausel {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: 9;
    border-left: 10px solid #2D9CDB;
    padding-left: 20px;
}

.carousel-item .sub-carausel h2 {
    max-width: 9em;
}

.wd-350 {
    width: 350px !important;
}

.carousel-item .sub-carausel p {
    width: 450px;
}

.carousel-item .sub-carausel img {
    width: 384px;
}

.title-white60 {
    font-weight: 900;
    font-size: 60px;
    line-height: 90%;
    color: #FFFFFF;
}

.title-grey26 {
    font-weight: 400;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0.1em;
    color: #828282;
}

.title-black16 {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #222222;
}

.section-product {
    padding-top: 50px;
    padding-bottom: 80px;
}

.ul-product {
    list-style-type: none;
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.ul-product li {
    margin-right: 20px;
    position: relative;
    top: 6px;
}

.ul-product li:after {
    display: block;
    content: '';
    border-bottom: solid 5px #62BE1B;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
}

.ul-product li:hover:after {
    transform: scaleX(1);
}

.ul-product li.active:after {
    display: block;
    content: '';
    border-bottom: solid 5px #62BE1B;
    transform: scaleX(1);
}

.ul-product li.active:hover:after {
    transform: scaleX(1) !important;
}

.ul-product li:last-child {
    margin-right: 0px;
}

.ul-product li a {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-decoration: none;
    color: #BDBDBD;
    display: block;
    padding: 16px 20px;
}

.ul-product .active a {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    text-transform: capitalize;
    /* Grey 0 */
    color: #222222;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 60px;
    margin-top: 60px;
}

.grid-card {
    height: 284px;
    text-align: center;
    position: relative;
    transition: .3s ease-out;
    border-radius: 10px;
}

.grid-card:hover {
    cursor: pointer;
    transition: .3s ease-in;
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.grid-card:active {
    transform: translateY(2px);
}

.grid-card img {
    width: 100%;
    height: 85%;
    object-fit: contain;
    border-radius: 10px;
}

.grid-card p {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    border-radius: 10px;
}

.more_link {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #333333;
    text-decoration: none;
    display: block;
    padding: 10px 26px;
}

.more_link:hover {
    color: #333333;
    cursor: pointer;
}

.see-align {
    text-align: center;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.show-all {
    border: 1px solid #333333;
    border-radius: 6px;
    transition: .3s ease-out;
}

.show-all:hover {
    transition: .3s ease-in;
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.show-all:active {
    transform: translateY(2px);
}

.banner-event-wrapper {
    height: 360px;
    position: relative;
    border-radius: 6px;
}

.banner-event-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.banner-event-wrapper .banner-sub {
    position: absolute;
    top: 42%;
    left: 22%;
    transform: translate(-50%, -50%);
    max-width: 450px;
    z-index:2;
}

.banner-event-wrapper:after,.banner-grid-card:after,li.card-slider:after,.card-event:after,.banner-event-wrapper-lg:after {
    background: #222;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    border-radius: 6px;
    left: 0;
    position: absolute;
    opacity: 0.5;
}

li.card-slider:after,.card-event:after {
    
    height: 60%;
   
    border-radius: 6px 6px 0px 0px;
    
}

.card-event:after {
    
    height: 50%;
   
    
}


.title-green14 {
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    color: #62BE1B;
}


.title-blue14{
     font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    color: #2D9CDB;
}

.title-aqua14{
     font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    color: #2D9CDB;
}
.title-white30 {
    font-weight: 900;
    font-size: 30px;
    line-height: 90%;
    color: #FFFFFF;
}


.banner-grid2-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-row-gap: 0px;
    grid-column-gap: 20px;
}

.banner-grid2-wrapper .banner-grid-card {
    height: 360px;
    border-radius: 6px;
    position: relative;
    border-radius: 6px;
    ;
}

.banner-grid2-wrapper .banner-grid-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    ;
}

.banner-grid2-wrapper .banner-grid-card .banner-grid-sub {
    max-width: 300px;
    position: absolute;
    top: 50%;
    left: 33%;
    z-index:2;
    transform: translate(-50%, -50%);
}

.banner-event-wrapper-lg {
    height: 360px;
    position: relative;
    border-radius: 6px;
}

.banner-event-wrapper-lg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.banner-event-wrapper-lg .banner-sub-lg {
    position: absolute;
    top: 46%;
    left: 22%;
    transform: translate(-50%, -50%);
    max-width: 450px;
    z-index:2;
}

.title-green14 {
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    color: #62BE1B;
}

.title-white30 {
    font-weight: 900;
    font-size: 30px;
    line-height: 90%;
    color: #FFFFFF;
}

.learn-more-link {
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    background: transparent;
    text-align: center;
    transition: .3s ease-out;
    width: 140px;
    padding: 5px 0px 5px 0px;
}

.learn-more-link:hover {
    cursor: pointer;
    transition: .3s ease-in;
    transform: translateY(-2px);
}

.learn-more-link:active {
    transform: translateY(2px);
}

.learn-more-link a {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #FFFFFF;
    text-decoration: none;
        display: block;
}

.text-grey20 {
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    /* or 20px */
    letter-spacing: -0.28px;
    /* Gray 3 */
    color: #828282;
}

.title-lightgrey14 {
    font-weight: 900;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.28px;
    /* Text/Secondary */
    color: #BDBDBD;
}

.product-gallery {
    padding-top: 40px;
    padding-bottom: 40px;
}

li.card-slider {
    background: #F2F2F2;
    border-radius: 6px;
    min-height: 380px;
    position: relative;
    transition: .3s ease-out;
}

li.card-slider:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
    transition: .3s ease-in;
    transform: translateY(-1px);
}

li.card-slider:active {
    transform: translateY(1px);
}

li.card-slider:last-child {
    margin-right: 0px !important;
}

li.card-slider:hover .overlay {
    background: rgba(24, 23, 23, .4);
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 6px;
    transition: .3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:3;
}

li.card-slider .overlay a {
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 3px 15px;
    border-radius: 6px;
    transition: .3s ease-out;
}

li.card-slider .overlay a:hover {
    transition: .3s ease-in;
    transform: translateY(-2px);
}

li.card-slider .overlay a:active {
    transform: translateY(2px);
}

li.card-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    border-radius: 6px 6px 0px 0px;
}

li.card-slider .sub-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    border-radius: 0px 0px 6px 6px;
    padding: 20px 20px 20px 20px;
}

.footer-main {
    height: 320px;
    background: rgba(34, 34, 34, 1);
    border-top: 2px solid rgba(98, 190, 27, 1);
}

.footer-logo {
    margin-top: 20px;
}

.footer-logo img {
    object-fit: cover;
    width: 343px;
    height: 69px;
}

.title-white14 {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    /* Gray 6 */
    color: #F2F2F2;
}

.text-white14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #F2F2F2;
}

.footer-menu {
    margin-top: 20px;
    margin-bottom: 30px;
}

.footer-menu .ul-main li {
    margin-right: 50px;
}

.footer-menu .ul-main li:last-child {
    margin-right: 0px;
}

.footer-menu .ul-main li a {
    color: #F2F2F2;
}

.footer-social {
    margin-top: 30px;
}

.footer-social div .ul-main li a i {
    color: rgba(242, 242, 242, 1);
}

.tab-link {
    margin-bottom: -1px;
    background: 0 0;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    padding: 0px 0px 18px 0px;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #BDBDBD;
    min-width: 60px;
    margin-right: 20px;
}

.tab-link.active {
    background-color: transparent !important;
    border-color: transparent !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #222222;
}

.tab-link:hover,
.tab-link:focus {
    border-color: transparent transparent transparent !important;
    isolation: isolate;
    color: #222222;
}

.tab-link:after {
    display: block;
    content: '';
    border-bottom: solid 5px #62BE1B;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    position: relative;
    top: 24.5px;
    border-radius: 6px
}

.tab-link.active:after {
    transform: scaleX(1);
}

.tab-link:hover:after,
.tab-link:focus:after {
    transform: scaleX(1);
}

*/
/**
 * ==============================================
 * Dot Elastic
 * ==============================================
 */

.dot-elastic {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotElastic 1s infinite linear;
}

.dot-elastic::before,
.dot-elastic::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-elastic::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotElasticBefore 1s infinite linear;
}

.dot-elastic::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotElasticAfter 1s infinite linear;
}

@keyframes dotElasticBefore {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1.5);
    }
    50% {
        transform: scale(1, 0.67);
    }
    75% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes dotElastic {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 1.5);
    }
    75% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes dotElasticAfter {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 0.67);
    }
    75% {
        transform: scale(1, 1.5);
    }
    100% {
        transform: scale(1, 1);
    }
}


/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */

.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    box-shadow: 9999px 0 0 -5px #fff;
    animation: dotPulse 1.5s infinite linear;
    animation-delay: .25s;
}

.dot-pulse::before,
.dot-pulse::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
}

.dot-pulse::before {
    box-shadow: 9984px 0 0 -5px #fff;
    animation: dotPulseBefore 1.5s infinite linear;
    animation-delay: 0s;
}

.dot-pulse::after {
    box-shadow: 10014px 0 0 -5px #fff;
    animation: dotPulseAfter 1.5s infinite linear;
    animation-delay: .5s;
}

@keyframes dotPulseBefore {
    0% {
        box-shadow: 9984px 0 0 -5px #fff;
    }
    30% {
        box-shadow: 9984px 0 0 2px #fff;
    }
    60%,
    100% {
        box-shadow: 9984px 0 0 -5px #fff;
    }
}

@keyframes dotPulse {
    0% {
        box-shadow: 9999px 0 0 -5px #fff;
    }
    30% {
        box-shadow: 9999px 0 0 2px #fff;
    }
    60%,
    100% {
        box-shadow: 9999px 0 0 -5px #fff;
    }
}

@keyframes dotPulseAfter {
    0% {
        box-shadow: 10014px 0 0 -5px #fff;
    }
    30% {
        box-shadow: 10014px 0 0 2px #fff;
    }
    60%,
    100% {
        box-shadow: 10014px 0 0 -5px #fff;
    }
}


/**
 * ==============================================
 * Dot Flashing
 * ==============================================
 */

.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotFlashing 1s infinite linear alternate;
    animation-delay: .5s;
}

.dot-flashing::before,
.dot-flashing::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-flashing::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 0s;
}

.dot-flashing::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 1s;
}

@keyframes dotFlashing {
    0% {
        background-color: #fff;
    }
    50%,
    100% {
        background-color: #ebe6ff;
    }
}


/**
 * ==============================================
 * Dot Collision
 * ==============================================
 */

.dot-collision {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
}

.dot-collision::before,
.dot-collision::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-collision::before {
    left: -10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotCollisionBefore 2s infinite ease-in;
}

.dot-collision::after {
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotCollisionAfter 2s infinite ease-in;
    animation-delay: 1s;
}

@keyframes dotCollisionBefore {
    0%,
    50%,
    75%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-15px);
    }
}

@keyframes dotCollisionAfter {
    0%,
    50%,
    75%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(15px);
    }
}


/**
 * ==============================================
 * Dot Revolution
 * ==============================================
 */

.dot-revolution {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
}

.dot-revolution::before,
.dot-revolution::after {
    content: '';
    display: inline-block;
    position: absolute;
}

.dot-revolution::before {
    left: 0;
    top: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    transform-origin: 5px 20px;
    animation: dotRevolution 1.4s linear infinite;
}

.dot-revolution::after {
    left: 0;
    top: -30px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    transform-origin: 5px 35px;
    animation: dotRevolution 1s linear infinite;
}

@keyframes dotRevolution {
    0% {
        transform: rotateZ(0deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotateZ(360deg) translate3d(0, 0, 0);
    }
}


/**
 * ==============================================
 * Dot Carousel
 * ==============================================
 */

.dot-carousel {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    box-shadow: 9984px 0 0 0 #fff, 9999px 0 0 0 #fff, 10014px 0 0 0 #fff;
    animation: dotCarousel 1.5s infinite linear;
}

@keyframes dotCarousel {
    0% {
        box-shadow: 9984px 0 0 -1px #fff, 9999px 0 0 1px #fff, 10014px 0 0 -1px #fff;
    }
    50% {
        box-shadow: 10014px 0 0 -1px #fff, 9984px 0 0 -1px #fff, 9999px 0 0 1px #fff;
    }
    100% {
        box-shadow: 9999px 0 0 1px #fff, 10014px 0 0 -1px #fff, 9984px 0 0 -1px #fff;
    }
}


/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */

.dot-typing {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    box-shadow: 9984px 0 0 0 #fff, 9999px 0 0 0 #fff, 10014px 0 0 0 #fff;
    animation: dotTyping 1.5s infinite linear;
}

@keyframes dotTyping {
    0% {
        box-shadow: 9984px 0 0 0 #fff, 9999px 0 0 0 #fff, 10014px 0 0 0 #fff;
    }
    16.667% {
        box-shadow: 9984px -10px 0 0 #fff, 9999px 0 0 0 #fff, 10014px 0 0 0 #fff;
    }
    33.333% {
        box-shadow: 9984px 0 0 0 #fff, 9999px 0 0 0 #fff, 10014px 0 0 0 #fff;
    }
    50% {
        box-shadow: 9984px 0 0 0 #fff, 9999px -10px 0 0 #fff, 10014px 0 0 0 #fff;
    }
    66.667% {
        box-shadow: 9984px 0 0 0 #fff, 9999px 0 0 0 #fff, 10014px 0 0 0 #fff;
    }
    83.333% {
        box-shadow: 9984px 0 0 0 #fff, 9999px 0 0 0 #fff, 10014px -10px 0 0 #fff;
    }
    100% {
        box-shadow: 9984px 0 0 0 #fff, 9999px 0 0 0 #fff, 10014px 0 0 0 #fff;
    }
}


/**
 * ==============================================
 * Dot Windmill
 * ==============================================
 */

.dot-windmill {
    position: relative;
    top: -10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    transform-origin: 5px 15px;
    animation: dotWindmill 2s infinite linear;
}

.dot-windmill::before,
.dot-windmill::after {
    content: '';
    display: inline-block;
    position: absolute;
}

.dot-windmill::before {
    left: -8.66px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
}

.dot-windmill::after {
    left: 8.66px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
}

@keyframes dotWindmill {
    0% {
        transform: rotateZ(0deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotateZ(720deg) translate3d(0, 0, 0);
    }
}


/**
 * ==============================================
 * Dot Bricks
 * ==============================================
 */

.dot-bricks {
    position: relative;
    top: 8px;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    box-shadow: 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px 0 0 0 #fff;
    animation: dotBricks 2s infinite ease;
}

@keyframes dotBricks {
    0% {
        box-shadow: 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px 0 0 0 #fff;
    }
    8.333% {
        box-shadow: 10007px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px 0 0 0 #fff;
    }
    16.667% {
        box-shadow: 10007px -16px 0 0 #fff, 9991px -16px 0 0 #fff, 10007px 0 0 0 #fff;
    }
    25% {
        box-shadow: 10007px -16px 0 0 #fff, 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff;
    }
    33.333% {
        box-shadow: 10007px 0 0 0 #fff, 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff;
    }
    41.667% {
        box-shadow: 10007px 0 0 0 #fff, 10007px -16px 0 0 #fff, 9991px 0 0 0 #fff;
    }
    50% {
        box-shadow: 10007px 0 0 0 #fff, 10007px -16px 0 0 #fff, 9991px -16px 0 0 #fff;
    }
    58.333% {
        box-shadow: 9991px 0 0 0 #fff, 10007px -16px 0 0 #fff, 9991px -16px 0 0 #fff;
    }
    66.666% {
        box-shadow: 9991px 0 0 0 #fff, 10007px 0 0 0 #fff, 9991px -16px 0 0 #fff;
    }
    75% {
        box-shadow: 9991px 0 0 0 #fff, 10007px 0 0 0 #fff, 10007px -16px 0 0 #fff;
    }
    83.333% {
        box-shadow: 9991px -16px 0 0 #fff, 10007px 0 0 0 #fff, 10007px -16px 0 0 #fff;
    }
    91.667% {
        box-shadow: 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px -16px 0 0 #fff;
    }
    100% {
        box-shadow: 9991px -16px 0 0 #fff, 9991px 0 0 0 #fff, 10007px 0 0 0 #fff;
    }
}


/**
 * ==============================================
 * Dot Floating
 * ==============================================
 */

.dot-floating {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
}

.dot-floating::before,
.dot-floating::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-floating::before {
    left: -12px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotFloatingBefore 3s infinite ease-in-out;
}

.dot-floating::after {
    left: -24px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);
}

@keyframes dotFloating {
    0% {
        left: calc(-50% - 5px);
    }
    75% {
        left: calc(50% + 105px);
    }
    100% {
        left: calc(50% + 105px);
    }
}

@keyframes dotFloatingBefore {
    0% {
        left: -50px;
    }
    50% {
        left: -12px;
    }
    75% {
        left: -50px;
    }
    100% {
        left: -50px;
    }
}

@keyframes dotFloatingAfter {
    0% {
        left: -100px;
    }
    50% {
        left: -24px;
    }
    75% {
        left: -100px;
    }
    100% {
        left: -100px;
    }
}


/**
 * ==============================================
 * Dot Fire
 * ==============================================
 */

.dot-fire {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    box-shadow: 9999px 22.5px 0 -5px #fff;
    animation: dotFire 1.5s infinite linear;
    animation-delay: -.85s;
}

.dot-fire::before,
.dot-fire::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
}

.dot-fire::before {
    box-shadow: 9999px 22.5px 0 -5px #fff;
    animation: dotFire 1.5s infinite linear;
    animation-delay: -1.85s;
}

.dot-fire::after {
    box-shadow: 9999px 22.5px 0 -5px #fff;
    animation: dotFire 1.5s infinite linear;
    animation-delay: -2.85s;
}

@keyframes dotFire {
    1% {
        box-shadow: 9999px 22.5px 0 -5px #fff;
    }
    50% {
        box-shadow: 9999px -5.625px 0 2px #fff;
    }
    100% {
        box-shadow: 9999px -22.5px 0 -5px #fff;
    }
}


/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */

.dot-spin {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: transparent;
    color: transparent;
    box-shadow: 0 -18px 0 0 #fff, 12.72984px -12.72984px 0 0 #fff, 18px 0 0 0 #fff, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
    animation: dotSpin 1.5s infinite linear;
}

@keyframes dotSpin {
    0%,
    100% {
        box-shadow: 0 -18px 0 0 #fff, 12.72984px -12.72984px 0 0 #fff, 18px 0 0 0 #fff, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    12.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #fff, 18px 0 0 0 #fff, 12.72984px 12.72984px 0 0 #fff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    25% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #fff, 12.72984px 12.72984px 0 0 #fff, 0 18px 0 0 #fff, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    37.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #fff, 0 18px 0 0 #fff, -12.72984px 12.72984px 0 0 #fff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    50% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #fff, -12.72984px 12.72984px 0 0 #fff, -18px 0 0 0 #fff, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    62.5% {
        box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #fff, -18px 0 0 0 #fff, -12.72984px -12.72984px 0 0 #fff;
    }
    75% {
        box-shadow: 0 -18px 0 0 #fff, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #fff, -12.72984px -12.72984px 0 0 #fff;
    }
    87.5% {
        box-shadow: 0 -18px 0 0 #fff, 12.72984px -12.72984px 0 0 #fff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #fff;
    }
}


/**
 * ==============================================
 * Dot Falling
 * ==============================================
 */

.dot-falling {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    box-shadow: 9999px 0 0 0 #fff;
    animation: dotFalling 1s infinite linear;
    animation-delay: .1s;
}

.dot-falling::before,
.dot-falling::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-falling::before {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotFallingBefore 1s infinite linear;
    animation-delay: 0s;
}

.dot-falling::after {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotFallingAfter 1s infinite linear;
    animation-delay: .2s;
}

@keyframes dotFalling {
    0% {
        box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
    }
    25%,
    50%,
    75% {
        box-shadow: 9999px 0 0 0 #fff;
    }
    100% {
        box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
    }
}

@keyframes dotFallingBefore {
    0% {
        box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
    }
    25%,
    50%,
    75% {
        box-shadow: 9984px 0 0 0 #fff;
    }
    100% {
        box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
    }
}

@keyframes dotFallingAfter {
    0% {
        box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
    }
    25%,
    50%,
    75% {
        box-shadow: 10014px 0 0 0 #fff;
    }
    100% {
        box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
    }
}


/**
 * ==============================================
 * Dot Stretching
 * ==============================================
 */

.dot-stretching {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    transform: scale(1.25, 1.25);
    animation: dotStretching 2s infinite ease-in;
}

.dot-stretching::before,
.dot-stretching::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-stretching::before {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotStretchingBefore 2s infinite ease-in;
}

.dot-stretching::after {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
    animation: dotStretchingAfter 2s infinite ease-in;
}

@keyframes dotStretching {
    0% {
        transform: scale(1.25, 1.25);
    }
    50%,
    60% {
        transform: scale(0.8, 0.8);
    }
    100% {
        transform: scale(1.25, 1.25);
    }
}

@keyframes dotStretchingBefore {
    0% {
        transform: translate(0) scale(0.7, 0.7);
    }
    50%,
    60% {
        transform: translate(-20px) scale(1, 1);
    }
    100% {
        transform: translate(0) scale(0.7, 0.7);
    }
}

@keyframes dotStretchingAfter {
    0% {
        transform: translate(0) scale(0.7, 0.7);
    }
    50%,
    60% {
        transform: translate(20px) scale(1, 1);
    }
    100% {
        transform: translate(0) scale(0.7, 0.7);
    }
}


/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Gathering
 * ==============================================
 */

.dot-gathering {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    margin: -1px 0;
    filter: blur(2px);
}

.dot-gathering::before,
.dot-gathering::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: -50px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    opacity: 0;
    filter: blur(2px);
    animation: dotGathering 2s infinite ease-in;
}

.dot-gathering::after {
    animation-delay: .5s;
}

@keyframes dotGathering {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    35%,
    60% {
        opacity: 1;
        transform: translateX(50px);
    }
    100% {
        opacity: 0;
        transform: translateX(100px);
    }
}


/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Hourglass
 * ==============================================
 */

.dot-hourglass {
    position: relative;
    top: -15px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    margin: -1px 0;
    filter: blur(2px);
    transform-origin: 5px 20px;
    animation: dotHourglass 2.4s infinite ease-in-out;
    animation-delay: .6s;
}

.dot-hourglass::before,
.dot-hourglass::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    filter: blur(2px);
}

.dot-hourglass::before {
    top: 30px;
}

.dot-hourglass::after {
    animation: dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes dotHourglass {
    0% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(180deg);
    }
    50% {
        transform: rotateZ(180deg);
    }
    75% {
        transform: rotateZ(360deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes dotHourglassAfter {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(30px);
    }
    50% {
        transform: translateY(30px);
    }
    75% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}


/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Overtaking
 * ==============================================
 */

.dot-overtaking {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: transparent;
    color: black;
    margin: -1px 0;
    box-shadow: 0 -20px 0 0;
    filter: blur(2px);
    animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
}

.dot-overtaking::before,
.dot-overtaking::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: transparent;
    color: black;
    box-shadow: 0 -20px 0 0;
    filter: blur(2px);
}

.dot-overtaking::before {
    animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
    animation-delay: .3s;
}

.dot-overtaking::after {
    animation: dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
    animation-delay: .6s;
}

@keyframes dotOvertaking {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}


/**
 * ==============================================
 * Experiment-Gooey Effect
 * Dot Shuttle
 * ==============================================
 */

.dot-shuttle {
    position: relative;
    left: -15px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    margin: -1px 0;
    filter: blur(2px);
}

.dot-shuttle::before,
.dot-shuttle::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    filter: blur(2px);
}

.dot-shuttle::before {
    left: 15px;
    animation: dotShuttle 2s infinite ease-out;
}

.dot-shuttle::after {
    left: 30px;
}

@keyframes dotShuttle {
    0%,
    50%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-45px);
    }
    75% {
        transform: translateX(45px);
    }
}


/**
 * ==============================================
 * Experiment-Emoji
 * Dot Bouncing
 * ==============================================
 */

.dot-bouncing {
    position: relative;
    height: 10px;
    font-size: 10px;
}

.dot-bouncing::before {
    content: '⚽🏀🏐';
    display: inline-block;
    position: relative;
    animation: dotBouncing 1s infinite;
}

@keyframes dotBouncing {
    0% {
        top: -20px;
        animation-timing-function: ease-in;
    }
    34% {
        transform: scale(1, 1);
    }
    35% {
        top: 20px;
        animation-timing-function: ease-out;
        transform: scale(1.5, 0.5);
    }
    45% {
        transform: scale(1, 1);
    }
    90% {
        top: -20px;
    }
    100% {
        top: -20px;
    }
}


/**
 * ==============================================
 * Experiment-Emoji
 * Dot Rolling
 * ==============================================
 */

.dot-rolling {
    position: relative;
    height: 10px;
    font-size: 10px;
}

.dot-rolling::before {
    content: '⚽';
    display: inline-block;
    position: relative;
    transform: translateX(-25px);
    animation: dotRolling 3s infinite;
}

@keyframes dotRolling {
    0% {
        content: '⚽';
        transform: translateX(-25px) rotateZ(0deg);
    }
    16.667% {
        content: '⚽';
        transform: translateX(25px) rotateZ(720deg);
    }
    33.333% {
        content: '⚽';
        transform: translateX(-25px) rotateZ(0deg);
    }
    34.333% {
        content: '🏀';
        transform: translateX(-25px) rotateZ(0deg);
    }
    50% {
        content: '🏀';
        transform: translateX(25px) rotateZ(720deg);
    }
    66.667% {
        content: '🏀';
        transform: translateX(-25px) rotateZ(0deg);
    }
    67.667% {
        content: '🏐';
        transform: translateX(-25px) rotateZ(0deg);
    }
    83.333% {
        content: '🏐';
        transform: translateX(25px) rotateZ(720deg);
    }
    100% {
        content: '🏐';
        transform: translateX(-25px) rotateZ(0deg);
    }
}


/*# sourceMappingURL=three-dots.css.map */

.footer-portal {
    background: #222222;
    padding: 50px 0px;
}

.title-white26-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    color: #FFFFFF;
}

.footer-careline{
        background: #f2f2f2;
    border-radius: 6px;
}

.footer-careline p {
    padding: 12px 15px;
}

.toll{
    background: #DF3F0C;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    border-radius: 6px 6px 0px 0px;
}
.toll a {
    width: 30%;
    padding: 10px;
    background: #F9450C;
}

.toll h3 {
    /* padding: 29px; */
    /* background: lime; */
    width: 70%;
    height: 100%;
    padding: 0px 0px 0px 20px;
    margin: 0;
}
.whatsap{
    background: #38B248;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.whatsap a{
    width: 30%;
    padding: 10px;
    background: #40C351;
}

.whatsap h3{
    width: 70%;
    height: 100%;
    padding: 0px 0px 0px 20px;
    margin: 0;
}

.footer-subscribe {
        background: #f2f2f2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
}

.footer-subscribe p {
    width: 40%;
}
.footer-subscribe .footer-button {
    width: 60%;
    text-align: end;
}
.footer-title {
    border-bottom: 1px solid #E0E0E0;
}

.ul-footer {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.ul-footer li {
    margin-top: 10px;
}

.link-white14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
    transition: .3s ease-out;
    text-decoration: none;
}

.link-white14:hover {
    color: #c0baba;
    text-decoration: none;
    transition: .3s ease-in;
    transform: translateY(-2px);
    text-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.link-white14:active {
    transform: translateY(2px);
}

.ml-15 {
    margin-left: 100px;
}

.mt-8 {
    margin-top: 80px;
}

.text-left {
    text-align: start;
}

.btn-rectangle-green {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    text-transform: uppercase;
    color: #222222;
    background: #62BE1B;
    /* Grey 0 */
    border: 0.5px solid #222222;
    border-radius: 6px;
    padding: 10px 25px;
    border: none;
}

.btn-rectangle-green:hover {
    transition: .3s ease-in;
    transform: translateY(-2px);
}

.btn-rectangle-green:active {
    transform: translateY(2px);
}

.btn-rectangle-green:focus {
    outline: none;
}

.btn-rectangle-green a {
    display: block;
    text-decoration: none;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    color: #222222;
}

.footer-bottom {
    background: #111111;
    padding: 40px 0px;
}

.link-white12 {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height */
    text-decoration-line: underline;
    color: #FFFFFF;
}

.link-white12:hover {
    color: #949191;
}

.text-white12 {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #F2F2F2;
}

.flex-start>.title-white14.align {
    padding: 0px 0px 5px 0px;
    margin: 0px 30px 0px 0px;
}

.product-section {
    margin-top: 40px;
    /* background: lime;*/
}

.product-grid {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
}

.product-menu {
    /*background: red;*/
}

.product-detail {
    /* background: yellow;*/
    padding: 28px 10px 10px 10px;
}

.product-card {
    background: #fff;
    height: 330px;
    padding: 25px 15px;
    position: relative;
    transition: .3s ease-out;
}

.product-card a {
    text-decoration: none;
}

.product-card:hover {
    cursor: pointer;
    border-radius: 10px;
    transition: .3s ease-in;
    /* transform: translateY(-2px);
    box-shadow: 0 0 0 2px #62BE1B;
    box-shadow: 0 4px black inset, 0 -15px red inset, -5px 0 blue inset, 5px 0 green inset;*/
    box-shadow: 0 1px #042C7C inset, 0 -83px #042C7C inset, -2px 0 #042C7C inset, 2px 0 #042C7C inset;
}

.product-card:hover .product-name h4{
    color:#fff;
    
}

.product-card:hover .product-card-tag .tag-blue{
    background:#fff;
    
}

.product-card:hover .product-card-tag .tag-blue span{
    color:#042C7C;
    
}

.product-card-header {
    height: 20px;
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    position: relative;
    background: transparent;
}

.product-card-header p {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    color: #828282;
    padding: 0px 40px;
    text-shadow: none !important;
    box-shadow: none !important;
    ;
}

.title-grey14 {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    /* Gray 3 */
    color: #828282;
}

.title-blue14 {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    /* Gray 3 */
    color: #212D65;
}

.product-card-img {
    background: transparent;
    height: 200px;
    position: relative;
}

.product-card-img img {
    /*position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;*/
    position: absolute;
    top: 50%;
    object-fit: contain;
    object-position: center;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.title-white10-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 100%;
    color: #FFFFFF;
}

.product-card-tag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-top:9px;
}

.tag-mobile-product{
    justify-content: flex-start;
}
.tag-green {
    background: #F9450C;
    border-radius: 2px;
    margin-right: 7px;
    padding: 0px 5px;
}

.tag-orange {
    background: #F9450C;
    border-radius: 2px;
    margin-right: 7px;
    padding: 0px 5px;
}

.tag-grey {
    background: #bbb;
    border-radius: 2px;
    margin-right: 7px;
    padding: 0px 5px;
}

.tag-black {
    background: #111111;
    border-radius: 2px;
    padding: 0px 5px;
}

.tag-blue {
    background: #042C7C;
    border-radius: 2px;
    padding: 0px 5px;
}

.title-black20 {
    font-weight: 800;
    font-size: 20px;
    line-height: 100%;
    color: #222222;
}

.icon-bot img{
    height: 3.8em;
    margin-right:15px;
}

.title-black20-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #222222;
}

.title-blue20-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #212D65;
}

.title-black30-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 90%;
    /* or 27px */
    
    
    /* Grey 0 */
    
    color: #222222;
}



.link-black20-os,
.link-black12-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    text-decoration: none;
    color: #222222;
    transition: .3s ease-out;
}

.link-black20-os:hover,
.link-black12-os:hover {
    transition: .3s ease-in;
    color: #444;
    transform: translateY(-2px);
}

.link-black20-os:active,
.link-black12-os:active {
    transform: translateY(2px);
}

.link-black12-os {
    font-size: 12px;
    line-height: 18px;
}

.right-arrow {
    position: relative;
    padding-right: 35px;
}

.right-arrow-button {
    position: relative;
   text-align:left;
   padding:5px 5px 5px 15px;
}

.modal-content {
    border: none;
}

.right-arrow:after,.right-arrow-button:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f061";
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translate(-50%, -50%);
    font-weight: 900;
}

.btn-orange {
    background: #F9450C;
    border-radius: 6px;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    color: #FFFFFF;
    text-decoration: none;
    padding: 15px 30px;
    transition:.3s ease-out;
}

.btn-orange:hover {
   cursor:pointer;
   background: #e04413;
   color: #FFFFFF;
   transition:.3s ease-in;
}

.btn-border-orange{
    border: 1px solid #F9450C;
    border-radius: 6px;
    
    font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 18px;


color: #F9450C;
    
    text-decoration: none;
    padding: 15px 30px;
    transition:.3s ease-out;
}

.btn-border-orange:hover{
     cursor:pointer;
       background: #FFFFFF;
       color: #F9450C;
       transition:.3s ease-in;
}




.anchor-right{
    position:relative;
}

.anchor-right:after{
    font-family: 'Font Awesome 5 Free';
    content: "\f061";
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translate(-50%, -50%);
    font-weight: 900;
}

.anchor-user,.anchor-trolley,.anchor-map{
        position: relative;
    padding-left: 20px;
    padding-right: 4em;
}

.anchor-user:after{
    font-family: 'Font Awesome 5 Free';
    content: "\f2bd";
    font-size: 31px;
    position: absolute;
    top: 53%;
    right: -5%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    
}

.anchor-trolley:after{
    font-family: 'Font Awesome 5 Free';
    content: "\f07a";
    font-size: 20px;
    position: absolute;
    top: 53%;
    right: -1%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    
}

.anchor-map:after{
    
    
    
    font-family: 'Font Awesome 5 Free';
    content: "\f3c5";
    font-size: 28px;
    position: absolute;
    top: 53%;
    right: 1%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    
}

.mr-20{
    margin-right:20px;
}
.btn-orange:active {
   
}

.right-arrow-ess {
    position: relative;
    padding-right: 20px;
    top: -20px;
}

.brand-slider {
    padding: 0;
}
.bdr-0{
    border:none !important;
}


.slick-slide {
    margin: 0 20px;
}


/* the parent */

.slick-list {
    margin: 0 -20px;
}


/* the slides */

.slick-slide {
    margin: 0 10px;
}


/* the parent */

.slick-list {
    margin: 0 -10px;
}

.menu-slider-container {
    padding: 5px 0px 20px 0px;
    height: 116px;
    background: #F2F2F2;
}

.slide-menu-wrapper {
    width: 100%;
    height: 116px;
    overflow-x: hidden;
    float: left;
}

.slide-menu-inner {
    float: left;
    font-size: 15px;
    font-family: arial;
    cursor: -webkit-grab;
    cursor: grab;
    width: 3000px;
}

.menu-card {
    min-width: 151px;
    padding: 10px 20px;
    border-right: 2px solid #FFFFFF;
    position: relative;
    display: inline-grid;
    min-height: 80px;
}

.menu-card-header {
    border: 0.5px solid #828282;
    border-bottom: none;
}

.menu-card-header p {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    background: #F2F2F2;
    color: #828282;
    margin: 0px 20px;
    text-align: center;
    position: relative;
    top: -6px;
    padding: 0px 20px;
}

.menu-card-title ul {
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    text-align: center;
}

.menu-card-title ul li {
    margin: 20px;
}

.menu-card-title ul li a {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #212D65;
    display: block;
    text-decoration: none;
    transition: .3s ease-out;
}

.menu-card-title ul li a:hover {
    transform: translateY(-2px);
    transition: .3s ease-in;
    color: #2D9CDB;
}

.menu-card-title ul li a.active {
    color: #2D9CDB;
}

.menu-card-title ul li a:active {
    transform: translateY(2px);
}

.ml-menu {
    margin-left: 150px;
}

.menu-first {
    padding-left: 0 !important;
}

.show-menu {}
#kawa_mobile_wrapper,#modenas-mobile-wrap{
    display:none;
}
.show-menu a {
    display: block;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #212D65;
    text-decoration: none;
    transition: .3s ease-out;
}

.show-menu a:hover {
    transform: translateY(-2px);
    transition: .3s ease-in;
    color: #2D9CDB;
}

.show-menu a.active {
    color: #2D9CDB;
}

.show-menu a:active {
    transform: translateY(2px);
}

.title-black14-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    color: #222222;
}

.link-black14-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    color: #222222;
    text-decoration:none;
}
#filter-hidden{
    display:none;
}

.title-new-line p{
    float: left;
}

.title-new-line hr{
    border: 1px solid #62BE1B;
    border-width: 2px 0 0 0;
    opacity: 1;
    margin-top: 0px;
    position: relative;
    top: 37px;
    left: 5px;
}
.link-black14-os:hover {
    color: #222222;
    text-decoration:none;
}

.product-section-banner {
    margin-top: 48px;
    height: 280px;
    position: relative;
    padding-top: 0em;
}

.product-section-banner img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.breadcrum {}

.link-grey14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #828282;
    text-decoration: none;
    transition: .3s ease-out;
}

.link-grey14:hover {
    color: #62BE1B;
    transition: .3s ease-in;
    transform: translateY(-2px);
}

.link-grey14:active {
    transform: translateY(2px);
}

.breadcrum a.active {
    color: #2D9CDB;
}

.text-blue14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #212D65;
}




.text-grey14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #828282;
}

.title-white40-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 90%;
    color: #fff;
}

.title-green40-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 90%;
    color: #62BE1B;
}

.title-product-line {
    display: flex;
    align-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
}

.title-product-line p {
    background: transparent;
}

.title-product-line .green-line-banner {
    border-bottom: 1px solid #62BE1B;
    display: block;
    height: 1px;
    width: 100%;
}

.breadcrum a {
    margin-right: 20px;
}

.bread-crumb {
    position: relative;
}

.bread-crumb:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f054";
    font-weight: 900;
    position: absolute;
    top: 51%;
    right: 5%;
    transform: translate(-50%, -50%);
    color: #828282;
}

.accordion-header .link-sidemenu {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    color: #828282;
    text-decoration: none;
    position: relative;
    display: block;
    padding: 20px;
}

.accordion-header .link-sidemenu::after {
    font-family: 'Font Awesome 5 Free';
    content: "\f067";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translate(-50%, -50%);
}

.product-menu .accordion .accordion-item {
    background-color: #F2F2F2;
}

.product-menu .accordion .accordion-item .accordion-header .link-sidemenu[aria-expanded="true"]::after {
    content: "\f068" !important;
}

.product-menu .accordion .accordion-item .accordion-header .link-sidemenu[aria-expanded="true"] {
    background: #222222 !important;
}

.product-menu .accordion .accordion-item .accordion-header .link-sidemenu[aria-expanded="true"].first-menu {
    border-radius: 6px 6px 0px 0px;
}

.product-menu .accordion .accordion-item .accordion-collapse .accordion-body {
    background: #222222;
}

.product-menu .accordion .accordion-item .accordion-collapse .accordion-body.last-menu {
    border-radius: 0px 0px 6px 6px;
}

.product-menu .accordion .accordion-item .accordion-collapse .accordion-body ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.product-menu .accordion .accordion-item .accordion-collapse .accordion-body ul li {
    padding: 8px 0px;
    margin-bottom: 10px;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
}

.product-menu .accordion .accordion-item .accordion-collapse .accordion-body ul li a {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
}


/* The container */

.container-sidemenu {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */

.container-sidemenu input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.checkmark-sidemenu {
    position: absolute;
    top: -6px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #DADADA;
    border-radius: 6px;
}


/* On mouse-over, add a grey background color */

.container-sidemenu:hover input~.checkmark-sidemenu {
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.container-sidemenu input:checked~.checkmark-sidemenu {
    background-color: #2D9CDB;
}


/* Create the checkmark-sidemenu/indicator (hidden when not checked) */

.checkmark-sidemenu:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark-sidemenu when checked */

.container-sidemenu input:checked~.checkmark-sidemenu:after {
    display: block;
}


/* Style the checkmark-sidemenu/indicator */

.container-sidemenu .checkmark-sidemenu:after {
    left: 10px;
    top: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wp24 {
    /* width: 40% !important;*/
    width: 32% !important;
}

.title-white50-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 100;
    font-size: 50px;
    line-height: 90%;
    color: #FFFFFF;
}

.fw700 {
    font-weight: 700 !important;
}

.section-enquiry {
    background: #fff;
    padding-top: 40px;
    padding-bottom: 80px;
}

.text-white26 {
    font-weight: 400;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0.1em;
    color: #FFFFFF;
}

.title-white20 {
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
    color: #fff
}

.title-green20 {
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
    color: #62BE1B;
}

.line-grey {
    border: 1px solid #828282;
}

.grid-enquiry {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1.1fr;
    grid-column-gap: 50px;
    grid-row-gap: 0px;
}

.enquiry-info {}

.enquiry-form {
    background: #F2F2F2;
    border-radius: 6px;
    margin-left: 40px;
    padding: 30px 20px 20px 20px;
    position: relative;
}

.title-white40 {
    font-weight: 700;
    font-size: 40px;
    line-height: 59px;
    color: #FFFFFF;
}

.form-container-dark {
    background: #F9450C;
    border: 0px solid #F2F2F2;
    border-radius: 6px;
    position: relative;
    height: 50px;
    margin-top: 5px;
}

.form-container-dark .select-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    border: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 0px 20px 0px 10px;
}

.form-container .select-input:focus {
    outline: none;
}

.bg-lime {
    background: lime !important;
}

.form-wrapper-white {
    border: 0px solid #FFFFFF;
    border-radius: 6px;
    background: #FFFFFF;
    height: 50px;
    margin-bottom: 25px;
    position: relative;
}

.err-msg {
    color: red;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
    position: absolute;
    bottom: -18px;
    left: 9px;
}

.form-wrapper-white .input-wrapper {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}

.form-wrapper-white .input-wrapper:focus,
.textarea-wrapper-white textarea:focus {
    outline: none;
}

.textarea-wrapper-white {
    border: 0px solid #FFFFFF;
    border-radius: 6px;
    background: #FFFFFF;
    position: relative;
    min-height: 190px;
}

.textarea-wrapper-white textarea {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-left: 10px;
    background: transparent;
    border: none;
    resize: none;
}

.title-white40-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 59px;
    color: #FFFFFF;
}

.title-blue40-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 59px;
    color: #212D65;
}

.title-orange40-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 59px;
    color: #F9450C;
}

.title-white16-os{
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    
    
    color: #FFFFFF;
}


.line-40{
    line-height: 40px;
}

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

.form-container-dark .bootstrap-select:not(.input-group-btn),
.bootstrap-select[class*=col-] {
    width: 100% !important;
}

.form-container-dark .bootstrap-select>.dropdown-toggle.bs-placeholder,
.form-container-dark .bootstrap-select>.dropdown-toggle,
.form-container-dark .bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.form-container-dark .bootstrap-select>.dropdown-toggle.bs-placeholder:focus
 {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
}

.form-container-dark .bootstrap-select .btn {
    border-color: transparent !important;
    background-color: transparent !important;
}

.form-container-dark .bootstrap-select .btn:active {
    border-color: transparent !important;
}

.form-container-dark .bootstrap-select .btn:focus {
    outline: none !important;
    -webkit-appearance: none;
    box-shadow: none !important;
}

.form-container-dark .bootstrap-select .dropdown-menu {
    background: #F9450C !important;
    border-radius: 0px 0px 6px 6px;
}

.form-container-dark .bootstrap-select .dropdown-menu li a span.text {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    color: #FFFFFF;
}

.form-container-dark .bootstrap-select .dropdown-menu li .dropdown-item.active,
.form-container-dark .bootstrap-select .dropdown-menu li .dropdown-item.active .dropdown-item:active {
    background-color: #fe3d00;
}

.form-container-dark .bootstrap-select .dropdown-menu li .dropdown-item:focus,
.form-container-dark .bootstrap-select .dropdown-menu li .dropdown-item:hover {
    background-color: #fe3d00;
}

.btn-transparent {
    /* Gray 3 */
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #828282;
    background: transparent;
    border: 1px solid #828282;
    border-radius: 6px;
    padding: 10px 20px;
    transition: .3s ease-out;
    margin-right: 10px;
}

.btn-transparent:hover {
    transition: .3s ease-in;
    transform: translateY(-2px);
}

.btn-white {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #828282;
    background: #E0E0E0;
    border-radius: 6px;
    padding: 10px 25px;
    border: none;
}

.btn-white:hover {
    transition: .3s ease-in;
    transform: translateY(-2px);
}

.btn-transparent:active,
.btn-white:active {
    transform: translateY(2px);
}

.btn-transparent:focus,
btn-white:focus {
    outline: none;
}

.contact-detail {
    background: #111111;
    padding-top: 40px;
    padding-bottom: 40px;
}
.fs-20{
    font-size:20px !important;
}
.card-contact {
    background: #222222;
    border-radius: 6px;
    padding: 20px;
    min-height: 440px;
    margin-bottom: 20px;
}

.spaceing-contact{
    height: 20px;
}

.mt-100{
    margin-top:100px !important;
}

.bg-white {
    background: #fff !important;
}

.title-black14-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */
    /* Grey 0 */
    color: #222222;
}

.title-green20 {
    font-weight: 900;
    font-size: 20px;
    line-height: 100%;
    /* or 20px */
    /* Kawaski green */
    color: #62BE1B;
}

.title-dark-grey14 {
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    /* or 14px */
    /* Gray 2 */
    color: #4F4F4F;
}

.text-dark-grey10 {
    font-weight: 400;
    font-size: 10px;
    line-height: 140%;
    /* or 14px */
    /* Gray 2 */
    color: #4F4F4F;
}

.text-dark-grey14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    /* or 20px */
    /* Gray 2 */
    color: #4F4F4F;
}

.text-dark-grey20 {
    font-weight: 900;
    font-size: 20px;
    line-height: 140%;
    /* or 28px */
    /* Gray 2 */
    color: #4F4F4F;
}

.contact-addr p {
    padding: 0;
    margin: 0;
}

.link-green12 {
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height */
    text-decoration-line: none;
    text-transform: capitalize;
    /* Kawaski green */
    color: #62BE1B;
    transition: .3s ease-out;
}

.link-green12:hover {
    color: #62BE1B;
    transition: .3s ease-in;
    transform: translateY(-2px);
}

.link-green12:active {
    transform: translateY(2px);
}

.flex-start {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
}

.icon-start {
    text-decoration: none !important;
}
.title-dark-blue20{
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    
    
    color: #212D65;

}

.cl-black{
    color:#222222 !important;
}
.icon-start i {
    color: #fff;
    margin-right: 20px;
    padding-top: 2px;
}

.title-white20-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    /* identical to box height, or 28px */
    /* White */
    color: #FFFFFF;
}

.title-green20-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    /* identical to box height, or 28px */
    color: #40C351;
}

.icon-start .fa-whatsapp {
    color: #62BE1B;
    font-size: 20px;
}

.icon-start span.map {
    margin-top: 4px;
}

.icon-start .fa-fax,
.icon-start .fa-map-marker-alt {
    font-size: 20px;
}

.cl-grey {
    color: #828282 !important;
}

.dealer-card {
    background: #fff;
    border-radius: 6px;
    padding: 20px 20px 5px 20px;
    min-height: 320px;
    margin-bottom: 20px;
    transition: .3s ease-out;
    position: relative;
    border: 0.5px solid #E0E0E0;
}

.dealer-tag {
    margin-bottom: 10px;
    min-height: 40px;
}

.dealer-tag ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
}

.dealer-tag ul li {
    padding: 1px;
    margin-right: 5px;
}

.dealer-tag ul li a {
    display: block;
    background: red;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 100%;
    /* identical to box height, or 10px */
    text-align: center;
    text-transform: uppercase;
    /* White */
    color: #FFFFFF;
    padding: 5px;
    text-decoration: none;
    border-radius: 2px;
}

.dealer-tag ul li a.green {
    background: #62BE1B;
}

.dealer-tag ul li a.grey {
    background: #828282;
}

.dealer-tag ul li a:hover {}

.dealer-tag ul li a:active {}

.dealer-card-title h3 {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    /* or 24px */
    text-transform: capitalize;
    /* Grey 0 */
    color: #222222;
    width: 88%;
}

.dealer-card-title p {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    /* identical to box height, or 14px */
    text-transform: capitalize;
    /* Grey 0 */
    color: #222222;
}

.dealer-card-addr p {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    /* Grey 0 */
    color: #222222;
    width: 100%;
}

.dealer-card-footer {
    border-top: 0.5px solid #E0E0E0;
    padding: 15px 0px 0px 0px;
    margin-top: 25px;
}

.dealer-align-bottom {
    position: absolute;
    width: 100%;
    bottom: 2em;
    left: 0;
}


.test-ride {
    position: absolute;
    width: 100%;
    top: 4em;
    left: 0;
}
.dealer-info {
    position: relative;
    min-height: 370px;
}

.dealer-align-bottom a {
    margin-bottom: 10px;
}

.section-branch{

    background:#F2F2F2;
    padding:30px 0px;
}
.section-dealership{

    padding:40px 0px;
}
.dealer-card::after {
    content: "";
    background-color: #2D9CDB;
    height: 0px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0px 0px 6px 6px;
    transition: .3s ease-out;
}

.mgr-3 {
    margin-right: 30px !important;
}

.mgl-0 {
    margin-left: 0 !important;
}

.mgl-4 {
    margin-left: 40px !important;
}

.dealer-card:hover {
    background: #212D65;
    cursor: pointer;
    transition: .3s ease-in;
}

.dealer-card:hover.dealer-card::after {
    height: 8px !important;
    transition: .3s ease-in;
}

.dealer-card:hover>.dealer-info>.dealer-card-title>h3,
.dealer-card:hover>.dealer-info>.dealer-card-title>p,
.dealer-card:hover>.dealer-info>.dealer-card-addr>p,
.dealer-card:hover>.dealer-info>.dealer-align-bottom>a>i {
    color: #fff !important;
}

.bt-none {
    border-top: none !important;
}

.section-dealer {
    background: #f2f2f2;
    padding: 40px 0px;
}

.search-form input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding-left: 18px;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #222;
    border-radius: 6px;
}

        .slick-track {
    margin-left:0 !important;
}
#more2 {display: none;}
.search-form button {
    display: block;
    position: absolute;
    top: 50%;
    right: -2%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: transparent;
    border: none;
    color: #2D9CDB;
    font-size: 15px;
    transition: .3s ease-out;
}

.search-form button:hover {
    transition: .3s ease-in;
}

.search-form button:hover {
    color: #539223;
}

.search-form button:active {
    color: #62BE1B;
}

.search-form input:focus {
    outline: none;
}

.search-form input::placeholder {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
}

.dropdown-check-list {
    background: #212D65;
    /* Gray 5 */
    border: 0px solid #E0E0E0;
    border-radius: 6px;
    padding: 2px;
}

.dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    background: #212D65;
    width: 100%;
    display: block;
    border-radius: 6px;
    padding: 10px;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    color: #FFFFFF;
}

.dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    position: absolute;
    top: 20px;
    right: 8px;
}

.dropdown-check-list ul {
    list-style-type: none;
    padding: 1px;
    margin: 0;
   /* background: #222;*/
    display: none;
}

.dropdown-check-list ul li.check {
    padding: 20px 0px 1px 15px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.dropdown-check-list ul li.rad {
    padding: 20px 0px 1px 15px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.dropdown-check-list ul li p {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    color: #FFFFFF;
}

.search-form {
    padding: 2px;
    position: relative;
    height: 50px;
    /* White */
    background: #FFFFFF;
    /* White */
    border: 0px solid #FFFFFF;
    border-radius: 6px;
}

.drop-title {
    border-top: 2px solid #bbb;
    padding-left: 50px !important;
}

.drop-title .head {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */
    text-transform: uppercase;
    /* Gray 3 */
    color: #bbb !important;
}

.dealer-wrap {
    position: relative;
    height: 80px;
    margin-bottom: 30px;
    border-bottom: 2px solid #E0E0E0;
}

.dealer-filter {
    position: absolute;
    width: -webkit-fill-available;
    z-index: 8;
}

.rotate-arrow::after {
    transform: rotate(180deg);
    transition: .3s ease-in-out;
}

.section-banner-accesories {
    padding: 30px 0px;
}

.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-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 39px;
    /* identical to box height */
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #828282;
}

.title-black50-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 90%;
    color: #333333;
}

.text-black14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    /* or 20px */
    /* Gray 1 */
    color: #333333
}

.btn-rectangle-border-black {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    color: #222222;
    text-decoration: none;
    padding: 20p 30px;
    border: 1px solid #4F4F4F;
    border-radius: 6px;
    padding: 10px 40px 10px 30px;
    transition: .3s ease-out;
    position: relative;
}

.btn-rectangle-border-black:hover {
    transition: .3s ease-out;
    transform: translateY(-2px);
    border: 1px solid rgb(192, 189, 189);
    color: #5a5656;
}

.btn-rectangle-border-black:active {
    transform: translateY(2px);
}

.btn-rectangle-border-black:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f061";
    position: absolute;
    top: 51%;
    right: 7%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 15px;
    z-index: 2;
}

.cl-white {
    color: #fff !important;
}

.br-white {
    border: 1px solid #fff;
}

.part-wrapper {
    height: 330px;
    position: relative;
    overflow: hidden;
}

.part-wrapper:after {/*
    content: '';
    position: absolute;
    top: 0;
    left: 0em;
    width: 48%;
    height: 100%;
    background: rgb(36, 35, 35, .8);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
    z-index: 0;*/
}

.part-wrapper img {
    position: absolute;
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.title-white30-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 90%;
    /* or 27px */
    text-transform: uppercase;
    /* Gray 6 */
    color: #F2F2F2;
}

.btn-border-green {
    transition: .3s ease-out;
    border: 1px solid #62BE1B;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #62BE1B;
    text-decoration: none;
}

.btn-border-green:hover {
    transform: translateY(-2px);
    transition: .3s ease-in;
    color: #4e8623;
    border: 1px solid #4e8623;
}

.btn-border-green:active {
    transform: translateY(2px);
}

.part-container {
    width: 390px;
    top: 50%;
    left: 19%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 1;
}

.section-dealer-container {
    padding: 30px 0px;
}

.banner-product-view {
    height: 751px;
    padding: 30px 0px 40px 0px;
    position: relative;
    margin-top: 48px;
}

.banner-product-view img.img-banner {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center right;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-product-view .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-product-view .menu-banner {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #222;
    z-index: 0;
}

.menu-bar-icon img {}

.menu-bar-item {
    padding: 20px 0px;
}

.menu-bar-item ul {
    display: inline-flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.menu-bar-item ul li {
    padding: 1px;
    border-right: 2px solid #333333;
}

.menu-bar-item ul li:last-child {
    border-right: none;
}

.menu-bar-item ul li a {
    display: block;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */
    text-transform: capitalize;
    /* White */
    color: #FFFFFF;
    text-decoration: none;
    transition: .3s ease-out;
    padding: 10px 20px;
}

.menu-bar-item ul li a:hover {
    transition: .3s ease-in;
    transform: translate(-.5px);
    color: #a8a7a7;
}

.menu-bar-item ul li a:active {
    transform: translate(.5px);
}

.menu-bar-icon {
    position: relative;
    width: 150px;
    height: 60px;
}

.menu-bar-icon img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center center;
}

.title-white20-os div{
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    /* identical to box height, or 28px */
    /* White */
    color: #FFFFFF;
}

.banner-product-wrapper {
    width: 450px;
    padding: 0px 20px 10px 30px;
    border-left: 10px solid #2D9CDB;
}

.banner-product-view .container .row .col .wrap {
    margin-top: 80px;
}

.section-similar {
    background: #fff;
    padding: 40px 0px;
}

.section-lightgrey {
    background: linear-gradient(180deg, #F2F2F2 0%, rgba(242, 242, 242, 0) 100%), #FFFFFF;
}

.section-concept {
    padding: 30px 0px 40px 0px;
}

.section-concept .container .row .col-md-6 div .product-card-tag {
    justify-content: flex-start !important;
}

.text-grey26-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 39px;
    color: #828282;
}

.slider-view::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 45px;
    height: 45px;
    border: 0;
    background: url('../img/icon/slider-icon.png');
    background-position: top top;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
    top: 3px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.slider-view::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 45px;
    height: 45px;
    border: 0;
    background: url('../img/icon/slider-icon.png');
    background-position: top top;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
    top: 3px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.concept-img-wrapper {
    background: transparent;
    min-height: 400px;
    position: relative;
    padding: 20px;
    overflow: hidden;
}

.concept-img-wrapper .img-rotate {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}

.concept-img-wrapper .change-wrapper {
    position: absolute;
    background: transparent;
    top: 0;
    right: 0;
    z-index: 2;
}

.concept-img-wrapper .rotate-wrapper {
    background: transparent;
    padding: 10px 0px 15px 0px;
    margin: 0px 5em;
}

.section-essense {
    padding: 30px 0px;
    margin-bottom: -16em;
}

.content-right {
    height: 360px;
    position: relative;
    border-radius: 6px;
}

.content-right img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 6px;
}

.video {
    width: 100%;
    border-radius: 6px;
}

.playpause {
    background-image: url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
    background-repeat: no-repeat;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    margin: auto;
    background-size: contain;
    background-position: center;
}

.grid-essence ul li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 40px;
}

.desc-ess {
    min-height: 50px;
    margin: auto;
    position: relative;
}

.pl-ess {
    padding-left: 15em;
}

.pr-ess {
    padding-right: 15em;
}

.img-ess {
    height: 360px;
    position: relative;
    border-radius: 6px;
}

.layout-ess-1 {
    position: relative;
    top: -80px;
}

.layout-ess-2 {
    position: relative;
    top: -127px;
}

.layout-ess-3 {
    position: relative;
    top: -230px;
}

.layout-ess-4 {
    position: relative;
    top: -320px;
}

.layout-ess-5 {
    position: relative;
    top: -400px;
}

.layout-ess-6 {
    position: relative;
    top: -480px;
}

.layout-ess-7 {
    position: relative;
    top: -560px;
}

.layout-ess-8 {
    position: relative;
    top: -620px;
}

.layout-ess-9 {
    position: relative;
    top: -700px;
}

.layout-ess-10 {
    position: relative;
    top: -780px;
}

.bg-sess-dark {
    background: #000;
    margin-bottom: 30px;
}
.object-post-left{
    object-position:left center !important;
}

.bg-sess-dark .container .row .col .grid-essence ul li .desc-ess {
    margin: unset;
    padding: 20px 0px;
}

.bg-sess-dark .container .row .col .grid-essence ul li {
    grid-row-gap: 30px;
    margin-top: 30px;
}

ul.list-essense {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

ul.list-essense li {
    border-left: 2px solid #62BE1B;
}

ul.list-essense li a {
    display: block;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    /* or 16px */
    display: flex;
    align-items: center;
    text-transform: uppercase;
    /* White */
    color: #FFFFFF;
    text-decoration: none;
    transition: .3s ease-out;
    padding-left: 5px;
}

ul.list-essense li a:hover {
    transition: .3s ease-in;
    color: #afa6a6;
}

ul.list-essense li a {}

.line-h-0 {
    line-height: 40px !important;
}

.list-essense li {
    grid: unset !important;
    margin-left: 20px;
    max-width: 10em;
}

.list-essense li:first-child {
    margin-left: 0;
}

.slider-view {
    -webkit-appearance: none;
    width: 100%;
    height: 2px;
    background: #E0E0E0;
    outline: none;
    opacity: 0.8;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider-view:hover {
    opacity: 1;
}

.change-wrapper .align-items-start .nav-pills a {
    background: #bbb;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-bottom: 10px;
    position: relative;
}

.change-wrapper .align-items-start .nav-pills a:hover {}

.change-wrapper .align-items-start .nav-pills a:active {}

.change-wrapper .align-items-start .nav-pills a.active:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f00c";
    position: absolute;
    top: 52%;
    right: 0%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 15px;
    z-index: 2;
    color: #fff;
}

.section-feature {
    padding: 30px 0px;
}

.banner-feature {
    height: 330px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.banner-feature:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0em;
    width: 48%;
    height: 100%;
    background: #222222;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
    z-index: 0;
}

.banner-feature img {
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

.title-green30-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 90%;
    /* or 27px */
    color: #62BE1B;
}

.title-blue30-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 90%;
    /* or 27px */
    color: #212D65;
}

.cl-orange{
    color:#F9450C !important;
}

.title-white30-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 90%;
    /* or 27px */
    /* White */
    color: #FFFFFF;
}

.banner-feature .feature-wrap {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    width: 350px;
    z-index: 1;
}

.slick-prev:before {
    font-family: 'Font Awesome 5 Free' !important;
    content: "\f053"!important;
    color: #62BE1B !important;
    font-size: 30px !important;
    font-weight: 900 !important;
}

.slick-next:before {
    font-family: 'Font Awesome 5 Free' !important;
    content: "\f054" !important;
    color: #62BE1B !important;
    font-size: 30px !important;
    font-weight: 900 !important;
}

.title-black10 {
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    color: #222222;
}

.text-black12 {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    /* identical to box height */
    color: #222222;
}

.card-file {
    background: #bbb;
    border-radius: 6px;
    height: 264px;
    position: relative;
}

.card-file .file-upper {
    background: #D9D9D9;
    border-radius: 6px 6px 0px 0px;
    position: absolute;
    height: 65%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    /* text-align: center; */
    /* vertical-align: middle; */
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.card-file .file-upper i {
    color: rgba(0, 0, 0, 0.54);
    font-size: 60px;
    font-weight: 300;
}

.card-file .file-bottom {
    background: #222222;
    border-radius: 0px 0px 6px 6px;
    position: absolute;
    height: 35%;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 20px;
}

.file-bottom .flex-between .file-desc-wrapper {}

.file-bottom .flex-between .file-action-wrapper {}

.file-bottom .flex-between .file-action-wrapper ul {
    list-style-type: none;
    display: inline-flex;
    padding: 0;
    margin: 0;
}

.file-bottom .flex-between .file-action-wrapper ul li {
    padding: 2px;
    margin-right: 10px;
}

.file-bottom .flex-between .file-action-wrapper ul li:last-child {
    margin-right: 0px;
}

.file-bottom .flex-between .file-action-wrapper ul li a {
    display: block;
    padding: 2px;
}

.file-bottom .flex-between .file-action-wrapper ul li a i {
    color: #828282;
    font-size: 20px;
}

.title-black12-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #222222;
}

.title-black12 {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #222222;
}

.text-black12 {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #222222;
}

.technology-wrapper {
    display: flex;
}

.technology-wrapper .space {
    width: 22%;
    margin-right: 50px;
}

.technology-wrapper ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.technology-wrapper ul li {
    padding: 2px;
    margin-bottom: 5px;
}

.technology-wrapper ul li a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
}

.technology-wrapper ul li a p {}

.technology-wrapper ul li a .icon-wrapper {
    background: #bbb;
    border-radius: 6px;
    height: 40px;
    width: 40px;
    position: relative;
    margin-right: 13px;
}

.technology-wrapper ul li a .icon-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
}

.section-specification {
    padding: 30px 0px;
}

.spec-header {
    border-left: 2px solid #F9450C;
    padding: 10px 20px;
}

.title-back10-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 100%;
    color: #222222;
}

.spec-accordion .accordion .accordion-item .accordion-header span {
    display: block;
    padding: 20px 0px;
    position: relative;
}

.spec-accordion .accordion .accordion-item .accordion-header span::after {
    font-family: 'Font Awesome 5 Free';
    content: "\f067";
    font-weight: 900;
    position: absolute;
    top: 51%;
    right: 1%;
    transform: translate(-50%, -50%);
    color: #2D9CDB;
    transition: .3s ease-out;
}

.spec-accordion .accordion .accordion-item .accordion-header span[aria-expanded="true"]::after {
    content: "\f068";
    transition: .3s ease-in;
}

.spec-accordion .accordion .accordion-item {
    background-color: #fff;
    border-top: 1px solid #E0E0E0 !important;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.spec-accordion {
    margin-top: 40px;
}

.spec-cell {}

.spec-cell ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.spec-cell ul li {
    padding: 10px 0px 20px 0px;
    margin-bottom: 10px;
    display: flex;
    border-bottom: 1px solid #E0E0E0;
}

.spec-cell ul li .title {
    width: 30%;
}

.spec-cell ul li .desc {
    width: 60%;
}

.section-product-gallery {
    padding: 30px 0px;
}

.card-gellery {
    height: 200px;
    background: #bbb;
    position: relative;
    margin-bottom: 20px;
    transition: .3s ease-out;
}

.card-gellery img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.enlarge-wrapper {
    display: block;
    position: absolute;
    top: 8px;
    right: 5px;
    z-index: 1;
    transform: rotate(-52deg);
    text-decoration: none;
    font-weight: 900;
    color: #2D9CDB;
    transition: .3s ease-out;
}

.enlarge-wrapper:hover {
    color: #2D9CDB;
    transition: .3s ease-in;
}

.text-grey10 {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #828282;
}

.text-blue10 {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #212D65;
}

.btn-transparent-white {
    border: 1px solid #4F4F4F;
    border-radius: 6px;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    transition: .3s ease-out;
}

.btn-transparent-white:hover {
    transition: .3s ease-in;
    border: 1px solid #fff;
    color: #fff;
    transform: translateY(-2px);
}

.btn-transparent-black {
    border: 1px solid #4F4F4F;
    border-radius: 6px;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    padding: 10px 20px;
    text-decoration: none;
    color: #222222;
    transition: .3s ease-out;
}

.btn-transparent-black:hover {
    transition: .3s ease-in;
    border: 1px solid #272626;
    color: #615d5d;
    transform: translateY(-2px);
}

.btn-transparent-black:activ,.btn-transparent-white:active {
    transform: translateY(2px);
}

#more {
    display: none;
}

.card-gellery:hover {
    cursor: pointer;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
    transition: .3s ease-in;
}

.modal-wide {
    width: 100% !important;
    max-width: unset;
}

.modal-gallery {
    background: #bbb;
    width: 100%;
    height: 95vh;
    position: relative;
}

.modal-gallery img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.modal-gallery a {}

.modal-gallery a:after {
    display: inline-block;
    content: "\00d7";
    position: absolute;
    top: -23px;
    right: -29px;
    z-index: 2;
    color: #fff;
    font-size: 45px;
}

.modal-large {
    max-width: unset !important;
}

.modal-large .container .row .col .modal-content {
    border-radius: 6px !important;
    background: transparent !important;
}

.specific-modal-wrapper {
    background: #fff;
    width: 100%;
    max-height: 70vh;
    border-radius: 6px;
    padding-bottom: 50px;
}

.modal-specheader {
    background: #222222;
    border-bottom: 4px solid #62BE1B;
    border-radius: 6px 6px 0px 0px;
    padding: 20px 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.modal-specheader div.flex-start img {
    margin-right: 25px;
}

.modal-specheader a:after {
    display: inline-block;
    content: "\00d7";
    color: #fff;
    font-size: 45px;
}

.modal-spec-desc {
    padding: 35px 35px 35px 35px;
    overflow-x: scroll;
    height: 30em;
}

.spec-left-wrapper {}

.br-white {
    border-right: 1px solid #E0E0E0 !important;
}

.spec-left-wrapper .img-container {
    position: relative;
    margin-bottom: 20px;
    height: 200px;
}

.spec-right-wrapper {
    min-height: 200px;
    padding: 0px 10px;
}

.img-full {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.bdr-6 {
    border-radius: 6px !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.w-45 {
    max-width: 45% !important;
}

.bg-null {
    background: transparent !important;
}

.link-card {
    text-decoration: none;
}

.wp40 {
    width: 40% !important;
}

.wp60 {
    width: 60% !important;
}

.display-none {
    display: none !important;
}

.title-grey14-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */
    /* Gray 3 */
    color: #828282;
}

.title-grey20-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 90%;
    /* identical to box height, or 18px */
    /* Gray 3 */
    color: #828282;
}

.title-green14-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */
    /* Kawaski green */
    color: #62BE1B;
}

.sub-card .title-black20-os, .sub-card .title-blue20-os {
    line-height: 20px;
}

.h-about {
    height: 88vh;
}

.banner-slash {
    min-height: 420px;
    position: relative;
    padding-bottom:20px;
}

.banner-slash:after {
    content: '';
    position: absolute;
    top: 0;
    left: -12em;
    width: 60%;
    height: 100%;
    background: #0A0A0A;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(18deg);
    -ms-transform: skew(18deg);
    transform: skew(18deg);
    z-index: -1;
}

.banner-slash .img-banner {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -1;
}

.desc-about {
    width: 500px;
    margin-top: 5em;
}

.desc-about img {
    height: 25px;
    margin-bottom: 20px;
    margin-top: 2px;
}

.link-read {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    /* or 20px */
    color: #828282;
    text-decoration: none;
    transition: .3s ease-out;
}

.link-read:hover {
    color: #5f5b5b;
    transition: .3s ease-in;
}

.link-read:after {}

.section-about-banner {
    background: #111;
    min-height: 630px;
}

.about-banner {
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.about-banner:after {
    content: "";
    background: #111;
    position: absolute;
    top: 0;
    left: -18em;
    height: 100%;
    width: 60%;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(23.5deg);
    -ms-transform: skew(23.5deg);
    transform: skew(23.5deg);
    z-index: -1;
}

.about-banner .img1 {
    position: absolute;
    top: 0;
    right: 20.5em;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.about-banner .img2 {
    position: absolute;
    top: 0;
    height: 100%;
    right: 0;
    z-index: 0;
    object-fit: contain;
}

.about-baner-outer .img3 {
    position: absolute;
    bottom: -10.2em;
    right: 10em;
    z-index: 1;
    object-fit: contain;
    width: 45%;
}

.about-baner-outer .img4 {
    position: absolute;
    bottom: -7em;
    right: 5em;
    z-index: 0;
    object-fit: contain;
    width: 26%;
}

.about-baner-outer {
    position: relative;
}

.desc-motor {
    width: 400px;
    margin-top: 20px;
}

.desc-motor img {
    height: 33px;
    margin-bottom: 10px;
}

.banner-vertical-wraper {
    background: #fff;
    padding-top: 20px;
    padding-bottom: 80px;
        margin-top: 4em;
}

.banner-vertical {
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.banner-vertical:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(113.53deg, #4B9A2F 35.61%, rgba(98, 190, 27, 0) 100%);
    opacity: .9;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-25deg);
    -ms-transform: skew(-25deg);
    transform: skew(-25deg);
    z-index: 0;
}

.banner-vertical img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

.desc-global {
    width: 400px;
    height: 168px;
    position: absolute;
    top: 40%;
    left: 20%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.banner-vertical2 .bg-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.banner-vertical2 .img-banner {
    position: absolute;
    top: 17px;
    left: 10em;
    width: 94%;
    height: 92%;
    object-fit: contain;
    z-index: 3;
}

.banner-vertical2 {
    position: relative;
    height: 350px;
    display: inline-block;
    padding: 0em 5em 0em 1em;
    overflow: hidden;
    color: #fff;
    width: 100%;
}

.banner-vertical2:after {
    content: '';
    position: absolute;
    top: 0;
    right: -150px;
    width: 55%;
    height: 100%;
    background: linear-gradient(135.84deg, #62BE1B 14.87%, rgba(98, 190, 27, 0) 86.97%);
    opacity: 0.9;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-25deg);
    -ms-transform: skew(-25deg);
    transform: skew(-25deg);
    z-index: 1;
}

.title-white14-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */
    /* White */
    color: #FFFFFF;
}

.link-white-arrow {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #FFFFFF;
    transition: .3s ease-out;
    text-decoration: none;
}

.link-white-arrow:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f061";
    font-weight: 900;
    margin-left: 10px;
}

.link-white-arrow:hover {
    color: #b4b3b3;
    transition: .3s ease-in;
    transform: translate(-2px);
}

.desc-global h4 {
    line-height: 40px;
}

.desc-global img {
    height: 90px;
}

.link-green-rectangle {
    border: 1px solid #62BE1B;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #62BE1B;
    text-decoration: none;
    transition: .3s ease-out;
}

.link-green-rectangle:hover {
    transition: .3s ease-in;
    color: #52a315;
}

.section-banner-global {
    overflow: hidden;
    position: relative;
}

.section-banner-global:after {
    content: '';
    position: absolute;
    top: 0;
    left: -12em;
    width: 53%;
    height: 100%;
    background: linear-gradient(157.86deg, rgba(98, 190, 27, 0) 14.58%, #4B9A2F 54.4%, rgba(98, 190, 27, 0) 89.38%);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-18deg);
    -ms-transform: skew(-18deg);
    transform: skew(-18deg);
    z-index: 0;
    opacity: .9;
}

.section-banner-global img {
    object-fit: cover;
    object-position: right top;
    width: 120%;
    height: 100%;
}

.section-banner-global .container .row .col .wrap {
    margin-top: 7em;
}

.banner-global {
    width: 490px;
    border-left: 10px solid #fff;
    margin-top: 7.5em;
}

.banner-global p {
    font-weight: 400;
}

.region-item {
    padding-left: 20px;
    margin-top: 50px;
}

.region-item span {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
}

.region-item span:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f3c5";
    font-weight: 900;
    color: #62BE1B;
    margin-right: 20px;
    font-size: 20px;
}

.nav-tab2 .nav-link {
    color: #4F4F4F;
}

.nav-tab2 .nav-item.show .nav-link,
.nav-tab2 .nav-link.active {
    color: #fff;
}

.nav-tab2 {
    border-bottom: 1px solid #4F4F4F;
}

.card-event {
    height: 400px;
    background: #bbb;
    border-radius: 6px;
    position: relative;
    transition: .3s ease-out;
    margin-bottom: 20px;
}

.card-event .event-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: grey;
    border-radius: 6px 6px 0px 0px;
}

.card-event .event-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #fff;
    border-radius: 0px 0px 6px 6px;
    transition: .3s ease-out;
    padding: 20px;
}

.card-event:hover {
    cursor: pointer;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    transform: translateY(-2px);
    transition: .3s ease-in;
}

.card-event:active {
    transform: translateY(2px);
}

.card-event:hover .event-desc {
    background: #212D65;
    cursor: pointer;
    transition: .3s ease-in;
}

.card-event .event-desc::after {
    content: "";
    background-color: #F9450C;
    height: 0px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0px 0px 6px 6px;
    transition: .3s ease-out;
}

.card-event:hover .event-desc.event-desc::after {
    height: 10px;
}

.event-desc p {
    width: 80%;
}

.card-event:hover .event-desc p.title-black20-os,
.card-event:hover .event-desc p.title-blue20-os,
.card-event:hover .event-desc .event-bottom span,
.card-event:hover .event-desc p.title-black14-os {
    color: #fff !important;
}



.event-bottom {
    position: absolute;
    width: 91%;
    bottom: 20px;
}

.title-green14-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    color: #62BE1B;
}

.event-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 0px 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

.event-desc a {
    text-decoration: none;
}

.event-desc a p {
    line-height: 20px;
}

.wp22 {
    width: 22% !important;
}

.algin-img {
    object-fit: cover;
    object-position: top center;
}

.card-search {
    position: absolute;
    width: 100%;
    top: 115px;
    left: 0;
    background: #222 !important;
}

.search-wrapper {
    width: 100%;
    background: #222;
    position: relative;
    padding: 40px 0px;
}

.search-wrapper div.title-search-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.search-wrapper div.title-search-wrapper p {
    padding-left: 20px !important;
}

.search-wrapper div.title-search-wrapper p:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f002";
    font-weight: 600;
    color: #F9450C;
    position: relative;
    left: -20px;
}

.cl-green {
    color: #62BE1B;
}

.search-wrapper div.title-search-wrapper a {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    /* identical to box height */
    text-transform: capitalize;
    /* Gray 3 */
    color: #828282;
    text-decoration: none;
    padding-right: 10px;
}

.search-wrapper div.title-search-wrapper a:after {
    content: "\00d7";
    font-weight: 100;
    color: #828282;
    position: relative;
    left: 10px;
    top: 10px;
    font-size: 44px;
}

.nav-search-container {
    background: #F2F2F2;
    border-radius: 6px;
    height: 60px;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}

.nav-search-container input {
    position: absolute;
    width: 95%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
    border: none;
    padding-left: 18px;
    background: transparent;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #222;
}

.nav-search-container input::placeholder {
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #BDBDBD;
}

.nav-search-container input:focus {
    outline: none;
    padding-left: 18px;
}

.nav-search-container button {
    position: absolute;
    top: 0;
    right: 0;
    width: 5%;
    height: 100%;
    border: none;
    font-size: 20px;
    color: #222;
    text-align: center;
}

.bg-grey {
    background: #F2F2F2 !important;
}

.title-black40-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 90%;
    color: #333333;
}

.img-abs {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    top: 0;
    left: 0;
    border-radius: 6px;
}

.list-wrapper {
    margin-top: 22em;
    margin-bottom: 30px;
}

.create-wrapper {
    margin-top: 10em;
    margin-bottom: 30px;
}

.menus-wrapper ul{
        list-style-type:none;
    }
    
     .menus-wrapper ul li{
         padding:0;
         margin:0;
        
    }
    
     .menus-wrapper ul li a{
            text-decoration: none;
            border: 1px solid #bbb;
            padding: 10px 20px;
            color: #bbb;
            border-radius: 6px;
            display: block;
            width: 12em;
            margin-bottom: 15px;
            cursor:pointer;
            transition:.3s ease-out;
            
            
    }
    
    .menus-wrapper ul li a:hover{
           background:#bbb;
           transition:.3s ease-in;
           color:#333;
           border: 1px solid #333;
    }

.form-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
        padding-left: 10px;
}

.form-wrapper label,
.lable-title {
    width: 15%;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #222222;
}

.form-wrapper input,
.form-wrapper select {
    width: 85%;
    height: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #222222;
}

.label-large {
    width: 37% !important;
}

.label-file {
    width: 20% !important;
}

.w-checkbox {
    width: 10% !important;
}

.history-banner img {
    height: 100px;
    position: unset;
}

.history-banner p {
    font-weight: 400;
}

.history-banner {
    margin-top: 7em;
}

.rectangle-white {
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    padding: 10px 20px;
}

.accordion-wrapper-history {
    position: relative;
    background: #fff;
    border: none;
}

.accordion-wrapper-history a:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f067";
    font-weight: 900;
    margin-left: 10px;
    position: absolute;
    top: 18px;
    right: 10px;
    color: #2D9CDB;
    font-size: 18px;
}

.accordion-wrapper-history a[aria-expanded='true']:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f068";
    font-weight: 900;
    margin-left: 10px;
    position: absolute;
    top: 18px;
    right: 10px;
    color: #2D9CDB;
    font-size: 18px;
}

.accordion-wrapper-history a {
    display: block;
    padding: 15px 0px;
    text-decoration: none;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 90%;
    /* identical to box height */
    text-transform: uppercase;
    /* White */
    color: #212D65;
    
    
}

.banner-vertical-wraper .container .row .col .accordion .accordion-item {
    border-bottom: 1px solid #E0E0E0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.banner-vertical-wraper .container .row .col .accordion .accordion-item .accordion-collapse .accordion-body {
    background: #fff;
    padding: 40px 0px;
}

.banner-vertical-wraper .container .row .col .accordion .accordion-item:last-child {
    border-bottom: none;
}

.year-green {
    background: #212D65;
    border-radius: 4px;
    padding: 3px 6px 3px 5px;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    /* identical to box height, or 20px */
    text-align: center;
    text-transform: uppercase;
    /* Gray 1 */
    color: #fff;
}

.left-img-wrapper {
    height: 100%;
}

.right-img-wrapper {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.history-img-wrapper {
    width: 480px;
    height: 360px;
    border-radius: 6px;
    position: relative;
}

.history-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 6px;
}

.align-left-wrapper {
    padding-left: 15em;
    padding-top: 40px;
}

.align-left-wrapper .title-white20-os,
.align-right-wrapper .title-white20-os {
    line-height: 30px;
}

.align-left-wrapper span,
.align-right-wrapper span {}

.align-left-wrapper h4,
.align-right-wrapper h4 {
    line-height: 40px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.align-left-wrapper p.title-white20-os,
.align-right-wrapper p.title-white20-os {
    text-transform: uppercase;
}

.desc-right,
.desc-left {
    margin-top: 40px;
}

.align-right-wrapper {
    padding-right: 15em;
    padding-top: 40px;
}

.line40 {
    margin-top: 4px !important;
    line-height: 40px !important;
}

.global-pos {}

.global-pos-wrap {
    margin-top: -37em !important;
    position: absolute;
    z-index: 1;
}

.select-mobile-wrapper {
    background: #0A0A0A;
    padding: 30px 0px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.select-mobile {
    background: #222;
    height: 50px;
    border-radius: 6px;
}

.select-mobile .dropdown button {
    width: 100%;
    border: none;
    background-color: #222;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
}

.select-mobile .dropdown button:hover {
    border: none !important;
}

.select-mobile .dropdown button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.select-mobile .dropdown ul {
    background: #222;
    width: 100%;
}

.select-mobile .dropdown ul li a {
    color: #fff;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
}

.banner-none-slash {
    background: #0a0a0a;
    padding: 20px 0px;
}

.banner-none-slash img.img-banner {
    width: 100%;
}

.banner-none-slash .desc-about {
    margin-top: 2em;
}

.banner-none-slash .desc-about p {
    width: 100%;
}

.section-about-mobile {
    background: #222;
    padding: 30px 0px;
}

.mobile-bout {
    width: 100% !important;
}

.section-about-mobile .img1 {
    width: 100%;
}

.mobile-bout img {
    width: 100%;
}

.title-cal {
    position: relative;
    padding-left: 60px;
}

.title-cal:after {
    font-family: 'Font Awesome 5 Free';
    content: "\0024";
    position: absolute;
    top: -10px;
    left: 0;
    font-weight: 900;
    color: #212D65;
    font-size: 27px;
    border-radius: 50%;
    border: 4px solid #212D65;
    padding: 0px 14px;
}

.box-cal {
    background: #212D65;
    /* Gray 6 */
    border: 0px solid #F2F2F2;
    border-radius: 6px;
    height: 50px;
    margin-bottom: 20px;
}

.box-cal {
    background: #212D65;
    /* Gray 6 */
    border: 0px solid #F2F2F2;
    border-radius: 6px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
}

.box-cal.algin-top {
    border-radius: 6px 6px 0px 0px;
    height: 50px;
    margin-bottom: 5px;
}

.bg_dark{
    background:#222;
}

.box-cal.algin-bot {
    background: #212D65;
    /* Gray 6 */
    border: 0px solid #F2F2F2;
    border-radius: 0px 0px 6px 6px;
    height: 50px;
    margin-bottom: 20px;
}

.box-cal-desc {
    background: #fff;
    border-radius: 6px;
    position: relative;
    padding: 10px;
    height: 230px;
}

.box-cal-desc .sub-footer {
    background: #E0E0E0;
    border-radius: 0px 0px 3px 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 18px 10px 10px 10px;
}

.box-cal-desc input {
    font-weight: 700;
    font-size: 50px;
    line-height: 59px;
    width: 100%;
    text-align: right;
    text-transform: uppercase;
    /* Kawaski green */
    color: #F9450C;
    border: none;
}

.box-cal-button {
    margin-top: 26px;
    text-align: right;
}

.btn-closed {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #828282;
    padding: 10px 20px;
    border: 1px solid #828282;
    border-radius: 6px;
    margin-right: 10px;
    transition: .3s ease-out;
}

.btn-closed:hover {
    color: #6b6969;
    border: 1px solid #828282;
    transform: translateY(-2px);
    transition: .3s ease-in;
    cursor: pointer;
}

.btn-reset {
    background: #E0E0E0;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #222222;
    border: 1px solid #828282;
    transition: .3s ease-out;
}

.btn-reset:hover {
    background: #d5cfcf;
    cursor: pointer;
    transform: translateY(-2px);
    transition: .3s ease-in;
}

.btn-reset:active,
.btn-closed:active {
    transform: translateY(2px);
}

.box-cal input {
    font-weight: 700;
    font-size: 18px;
    line-height: 16px;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: capitalize;
    color: #212D65;
    width: 100px;
}

.box-cal input:focus {
    outline: none;
}

.go_back {
    position: relative;
}

.go_back:after {
    top: 10.5px;
    right: 4px;
    font-family: 'Font Awesome 5 Free';
    content: "\f35a";
    position: absolute;
    font-weight: 900;
    color: #F9450C;
    font-size: 18px;
}

.header-top-mobile {
    position: fixed;
    background: #333333;
    mix-blend-mode: normal;
    z-index: 51;
    width: 100%;
}

.header-top-mobile:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0em;
    width: 73%;
    height: 100%;
    background: #212D65;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
    z-index: 0;
}

.header-mobile-wrapper {
    position: relative;
}

.header-mobile-wrapper .flex-between a img {
    object-fit: cover;
    object-position: center center;
    width: 70%;
    margin: 11px 0px 19px 0px;
}

.togle-wrapper {
    position: relative;
    height: 29px;
    width: 32px;
}

.togle-wrapper .togle-btn,
.togle-wrapper .togle-close {
    position: absolute;
    width: 100%;
    height: 100%;
}

.togle-btn {
    transition: .3s ease-out;
    background: transparent;
    border: none;
}

.togle-btn:hover {
    transition: .3s ease-in;
    transform: translateY(-2px);
    cursor: pointer;
}

.togle-btn:active {
    transform: translateY(2px);
}

.togle-btn i {
    color: #2D9CDB;
    font-size: 25px;
    font-weight: 900;
}

.togle-close {
    background: transparent;
    border: none;
    display: none;
}

.togle-close:after {
    content: "\2715";
    font-weight: 900;
    font-size: 19px;
    color: #fff;
}

.slider-drawer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: -100%;
    background: #62BE1B;
    z-index: 50;
    padding-top: 5em;
    display: none;
}

.slash1 {
    position: absolute;
    background: #62BE1B;
    height: 100%;
    width: 5px;
    right: 23.2%;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}

.slash2 {
    position: absolute;
    background: #62BE1B;
    height: 100%;
    width: 6px;
    right: 21.8%;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}

.slash3 {
    position: absolute;
    background: #62BE1B;
    height: 100%;
    width: 10px;
    right: 19.8%;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}


/* #section-main:hover .slider-drawer {
    transition: 1s;
    left: 0;
}*/

.mobil-icon {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.mobil-icon i {
    font-size: 27px;
    font-weight: 900;
    color: #828282;
}

.mobil-icon .circle.dolar {
    padding: 3px 0px 0px 8px;
    font-size: 18px;
    border: 3px solid #828282;
}

.mobil-icon .circle.ask {
    padding: 5px 0px 0px 7px;
    font-size: 16px;
    border: 3px solid #828282;
}

.mobile-search-wrapper {
    height: 60px;
    /* Gray 6 */
    background: #F2F2F2;
    border-radius: 6px;
    position: relative;
    margin-top: 20px;
}

.mobile-search-wrapper input {
    position: absolute;
    height: 100%;
    width: 95%;
    background: transparent;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    text-transform: capitalize;
    /* Gray 4 */
    color: #222;
    border: none;
    padding-left: 10px;
}

.mobile-search-wrapper input::placeholder {
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    text-transform: capitalize;
    /* Gray 4 */
    color: #BDBDBD;
}

.mobile-search-wrapper input:focus {
    outline: none;
}

.mobile-search-wrapper button {
    position: absolute;
    height: 100%;
    width: 5%;
    background: transparent;
    font-weight: 400;
    font-size: 20px;
    top: 0;
    right: 0;
    color: #57a31c;
    border: none;
}

.mobile-search-wrapper button:hover {
    transform: translateY(-2px);
}

.mobile-search-wrapper button:active {
    transform: translateY(2px);
}

.mobil-icon p {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    /* identical to box height */
    text-align: center;
    text-transform: uppercase;
    /* Gray 3 */
    color: #828282;
    margin-top: 2px;
}

.mobil-icon div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.mobile-accordion-wrapper {
    border-top: 1px solid #4F4F4F;
    border-bottom: 1px solid #4F4F4F;
}

.mobile-accordion-header {}

.mobile-accordion-header a {
    padding: 20px 0px;
    display: block;
    text-decoration: none;
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    /* identical to box height, or 14px */
    text-transform: uppercase;
    /* White */
    color: #FFFFFF;
    position: relative;
}

.mobile-accordion-header a:after {
    content: "\f078";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 21px;
    right: 12px;
    font-size: 18px;
    color: #fff;
}

.mobile-accordion-header a:after {
    content: "\f078";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 21px;
    right: 12px;
    font-size: 18px;
    color: #fff;
    transition: .3s ease-out;
}

.mobile-accordion-header a[aria-expanded='true']::after {
    transform: rotate(180deg);
    transition: .3s ease-in;
    color: #2D9CDB;
}

.mobile-accordion-header a[aria-expanded='true'] {
    color: #2D9CDB;
}

.mobile-accoidion-body ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.mobile-accoidion-body ul li {}

.mobile-accoidion-body ul li a {
    text-decoration: none;
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-transform: capitalize;
    /* White */
    color: #FFFFFF;
    padding: 10px 0px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.mobile-menu {
    margin-top: 20px;
    margin-bottom: 20px;
}

.close_link:after {
    display: inline-block;
    content: "\00d7";
    color: #fff;
    font-size: 45px;
}

.ride-wrapper {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    top: -52px;
    right: 0;
    z-index: 2;
}

.footer-box {
    background: #212D65;
    border-radius: 6px;
    margin-top: 10px;
}


.text-white14-os {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    /* or 14px */
    text-transform: uppercase;
    /* White */
    color: #FFFFFF;
}

.form-footer {
    border-bottom: 1px solid #828282;
}

.form-footer::placeholder {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-transform: capitalize;
    /* Gray 3 */
    color: #828282;
}

.form-footer input {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    background: none;
    border: none;
    padding-left: 10px;
    width: 100%;
    position: absolute;
    height: 100%;
}

.form-footer input:focus {
    outline: none;
}

.form-footer {
    margin-top: 40px;
    height: 50px;
    position: relative;
}
.w-30 {
    max-width: 30% !important;
}


.bottom-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.bottom-footer img {
    object-fit: cover;
    padding-right: 15px;
    margin-right: 15px;
    border-right: 1px solid #bbb;
    width:8em;
}

.bottom-footer img.icon {
        padding: 10px 8px 10px 0px;
}

.modal-vertical {
    margin: 9rem auto !important;
}

.d-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
}

.d-footer p {
    margin-right: 20px;
}

.d-footer p {
    background: #042C7C;
    padding: 21px;
        border-radius: 6px 0px 0px 6px;
}


.d-footer ul {
    padding-left: 20px;
}


.chat-button img {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.chat-button {
    position: fixed;
    bottom: 1.5em;
    right: 20px;
    z-index: 30;
    background: #62BE1B;
    border-radius: 50%;
    height: 55px;
    width: 55px;
    text-align: center;
    padding: 12px 5px 5px 5px;
    transition: .3s ease-out;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.chat-button:hover {
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    transition: .3s ease-in;
    transform: translateY(-2px);
}

.chat-button:active {
    transform: translateY(2px);
}

.chat-button i {
    font-size: 30px;
    color: #fff;
}

.chat-header {
    background: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px 6px 0px 0px;
    padding: 8px 15px;
}

.chat-header:hover {
    cursor: pointer;
}

/*.chat-header p {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
}*/

.chat-header a {
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    color: #222;
    text-decoration: none;
}

.chat-main {
    position: fixed;
    bottom: 1.5em;
    right: 20px;
    width: 25em;
    height: 33em;
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
    z-index: 31;
    border-radius: 6px;
        border: 2px solid #2D9CDB;
        display:none;
}

.chat-reply {
    height: 50px;
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0px 0px 6px 6px;
}

.chat-reply:focus {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.chat-reply input {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #000;
    width: 90%;
    height: 100%;
    padding-left: 10px;
    background: transparent;
    border: none;
}

.chat-reply i {
    color: #bbb;
    font-size: 20px;
    transition: .3s ease-out;
    padding: 0;
    margin: 0;
    position: relative;
    top: 5px;
    left: 4px;
}

.chat-reply i:hover {
    transform: translateY(-1px);
    transition: .3s ease-in;
    cursor: pointer;
}

.chat-reply i:active {
    transform: translateY(1px);
}

.chat-reply input::placeholder {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #bbb;
}

.chat-reply input:focus {
    outline: none;
}

/*.chat-msg-inbox {
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 0px 10px 10px 10px;
    padding: 12px 30px 8px 12px;
    max-width: 89%;
    margin-bottom: 20px;
    float: left;
    width: auto;
    display: table;
    clear: both;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: relative;
}*/

.chat-msg-inbox {
    border: 1px solid #fff;
    background: transparent;
    /* background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
    border-radius: 0px 10px 10px 10px;
    padding: 12px 30px 8px 12px;
    max-width: 89%;
    margin-bottom: 20px;
    float: left;
    width: auto;
    display: table;
    clear: both;
    box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
    position: relative;
}

/*.chat-msg-reply {
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    border-radius: 10px 0px 10px 10px;
    padding: 12px 30px 8px 12px;
    margin-bottom: 20px;
    max-width: 89%;
    float: right;
    width: auto;
    display: table;
    clear: both;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: relative;
}*/

.chat-msg-reply {
        border: 1px solid #F9450C;
    background: #F9450C;

    /* background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); */
    border-radius: 10px 0px 10px 10px;
    padding: 12px 30px 8px 12px;
    margin-bottom: 20px;
    max-width: 89%;
    float: right;
    width: auto;
    display: table;
    clear: both;
    box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
    position: relative;
}


.chat-msg-inbox p {
    font-weight: 400;
    font-size: 15px;
    line-height: 16px;
    color: #222;
}

.chat-msg-reply p {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
}

.chat-msg-reply label {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #f2f2f2;
    position: absolute;
    bottom: 6px;
    right: 6px;
}


.chat-msg-inbox label {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: rgb(146, 143, 143);
    position: absolute;
    bottom: 6px;
    right: 6px;
}

.chat-content-wrapper {
    height: 27em;
    padding: 20px 0px 53px 0px;
    background: #F2F2F2;
    /*background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);*/
}

.chat-content {
    padding: 25px 25px 0px 25px;
    overflow-x: hidden;
    height: 24em;
    background: #F2F2F2;
    /*background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);*/
}

.chat-loading {
    margin-left: 30px;
}

.flex-start {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

.btn-transparent {
    padding: 0;
    margin: 0;
    border: transparent;
    background: transparent;
}

.btn-transparent:hover {
    background: transparent;
}

.btn-transparent:active {
    outline: none;
}

.ask-option {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ask-option a {
    display: block;
    border: 1px solid #F9450C;
    background: transparent;
    border-radius: 10px;
    padding: 10px;
    text-decoration: none;
    min-width: 6em;
    margin-right: 10px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #F9450C;
    transition: .3s ease-out;
}

.ask-option-large {
    flex-wrap: wrap;
}

.ask-option-large a {
    max-width: 8em;
    margin-bottom: 10px;
    margin-right: unset;
}

.ask-option a:hover {
    cursor: pointer;
    background: transparent;
    transition: .3s ease-in;
}

.ask-option a:last-child {
    margin-right: 0px;
}

.no-option::after {
    font-family: 'Font Awesome 5 Free';
    content: "\2716";
    font-weight: 900;
    margin-left: 10px;
    color: red;
}

.yes-option:after {
    font-family: 'Font Awesome 5 Free';
    content: "\2714";
    font-weight: 900;
    margin-left: 10px;
    color: green;
}


/*
#state_wrapper a{
max-width: 6.1em !important;
padding: 8px 5px !important;
}*/

.chat-item-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
}

.chat-item-grid3 a {
    background: #F9450C;
    border-radius: 10px;
    padding: 8px 5px;
    text-decoration: none;
    min-width: 6em;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 12px;
    color: #f2f2f2;
    transition: .3s ease-out;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.delar-inbox {
    margin-bottom: 15px;
}

.delar-inbox p {
    padding: 0;
    margin: 0;
}

.banner-slash-readmore {
    height: 41em;
    position: relative;
}

.banner-slash-readmore:after {
    left: -16em;
    width: 68%;
    -webkit-transform: skew(7deg);
    -ms-transform: skew(7deg);
    transform: skew(7deg);
}

.banner-slash-readmore .img-repair1 {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: -1;
    height: 50%;
    width: 50%;
}

.banner-slash-readmore .img-repair2 {
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    height: 50%;
    width: 50%;
}

.img-foot-banner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
}

.img-foot-banner img {
    object-fit: contain;
    width: 110px;
    height: 40px;
}

.link-visit {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    text-decoration: none;
    padding: 10px 15px;
}

.link-visit:hover {
    color: #FFFFFF;
}

.readmore-kawa1 {
    background: #111111;
    height: 400px;
    position: relative;
}

.readmore-kawa1 .img-kawa1 {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
    object-position: center;
}

.readmore-kawa1 .img-kawa2 {
    position: absolute;
    height: 100%;
    top: 0;
    left: 23em;
    z-index: 0;
    object-fit: cover;
    object-position: center;
}

.desc-kawa1 {
    width: 400px;
    /* background: lime; */
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.readmore-kawa2 {
    background: #CDCDCD;
    height: 400px;
    position: relative;
}

.readmore-kawa2 .img-kawa3 {
    position: absolute;
    height: 100%;
    top: 0;
    right: 39em;
    z-index: 0;
    object-fit: cover;
    object-position: center;
}

.readmore-kawa2 .img-kawa4 {
    position: absolute;
    height: 100%;
    top: 0;
    right: 16em;
    z-index: 1;
    object-fit: cover;
    object-position: center;
}

.readmore-kawa2 .img-kawa5 {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 2;
    object-fit: cover;
    object-position: center;
}

.desc-kawa2 {
    width: 400px;
    /* background: lime; */
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.readmore-kawa3 {
    background: #111111;
    height: 400px;
    position: relative;
}

.readmore-kawa3 .img-kawa6 {
    position: absolute;
    height: 88%;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
    object-position: center;
}

.readmore-kawa3 .img-kawa7 {
    position: absolute;
    height: 88%;
    top: 0;
    left: 10em;
    z-index: 0;
    object-fit: cover;
    object-position: center;
}

.desc-kawa3 {
    width: 400px;
    /* background: lime; */
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.height-form{
    min-height:202px !important;
}

.remind-orange{
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #F9450C;
    position: absolute;
    bottom: -43px;
    left: 10px;


}

.select-align.form-wrapper-white .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 {
    margin-top: 0px;
}

.form-wrapper-white .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100% !important;
}

.select-drop{
    background: none !important; 
    padding: 18px 10px 17px 10px;
    border: none !important;
    /* margin-top: 15px !important; */
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #828282;
    /* padding-left: 10px; */
    
}

.select-drop:active{
    outline:none !important;
    border:none !important;
    box-shadow:none !important;
}

.select-drop:focus{
    outline:none !important;
    border:none !important;
    box-shadow:none!important;
    
}

.form-wrapper-white .bootstrap-select button.dropdown-toggle:focus {
    outline: none !important;
}

.form-wrapper-white select:focus{
outline:none!important;
box-shadow:none!important;
}

.text-grey10-os{
    font-family: 'Oswald';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 100%;


color: #828282;
}


 /* The container */
.container-radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-radio input {
  position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 13em;
    height: 16px;
    top: -8px;
    left: -12em;
}

/* Create a custom radio button */
.checkmark-radio {
  position: absolute;
  top: -14px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: none;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark-radio {
  background-color: none;
}

/* When the radio button is checked, add a blue background */
.container-radio input:checked ~ .checkmark-radio {
  background-color: #2D9CDB;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-radio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark-radio:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container-radio .checkmark-radio:after {
    
	    font-family: 'Font Awesome 5 Free';
    content: "\f00c";
    position: absolute;
    top: 56%;
    right: -4%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 13px;
    z-index: 2;
    color: #fff;
}

.dealer-card-title {
    height: 5em;
}

.dealer-card-soon{
                                        background: #62BE1B;
                                        position: absolute;
                                        width: 100%;
                                        bottom: 0;
                                        left: 0;
                                        border-radius: 0px 0px 6px 6px;
                                            padding: 5px 20px;
                                    }
                                    
                                    p#push-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 90%;
}

.height-form2 {
    min-height: 203px !important;
    margin-bottom: 22px!important;
}


#test_ride{
    display:block;
}

#general_end{
    display:none;
    
}
 .wrap-gallery{
                position:relative;
                width:10em;
                height:10em;
                
            }
            
            .display-center{
                
            }

.mt-72{
        margin-top: 72px;
}

p.title-black14-os.desc-card {
    width: auto;
    height: 41px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.line-h-18{
    line-height:18px !important;
}
p.title-black20-os.text-uppercase.title-card,p.title-blue20-os.text-uppercase.title-card {
    width: auto;
    height: 41px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.search-top{
        margin-top: 15.5em;
    }
    
    section.product-search {
}

section.event-search {
    margin-bottom: 5em;
}

#grid-essence-dark,#grid-essence-white{
    display:none;
}

.align-ess-btn {
    margin-bottom: 15em;
    margin-top: -6em;
}

.mobil-icon div a {
    text-decoration: none;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.banner1 {
    background-image: url('../img/gallery/banner-modenas1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}

.banner2 {
    background-image: url('../img/gallery/banner-modenas2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left bottom;
}

.banner3 {
    background-image: url('../img/gallery/banner-modenas3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}

.banner4 {
    background-image: url('../img/gallery/banner-modenas4.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}

.banner5 {
    background-image: url('../img/logo/z-250banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}
.banner6 {
    background-image: url('../img/gallery/banner/elegan-banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}

.banner7 {
    background-image: url('../img/gallery/banner/slider7.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}

.banner-article{
    margin-top:0px !important;
}

.width-chat-card{
    width: 18em;
}

.width-chat-card .link-card .product-card:hover{
    cursor: pointer;
    border-radius: none;
    transition: none;
    box-shadow: none;
}

.experience-alter{
    top: 34px !important;
}

.space-chat-card{
    padding: 0px 16px 15px 26px !important;
}

.back-align-chat {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    margin-top:20px;
}

.banner-trapezoid{
        height: 280px;
        position: relative;
            padding-top: 7em;
    }
    
   
    .banner-trapezoid:after{
        content: '';
        position: absolute;
        top: 0;
        left: -25em;
        width: 43%;
        height: 100%;
        background: #F9450C;
        -webkit-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transform: skew(18deg);
        -ms-transform: skew(18deg);
        transform: skew(18deg);
        z-index: -1;
        
    }
    
     .banner-trapezoid div p{
            width: 6em;
                line-height: 40px;
    }
    
     .card-bike{
        
        background: #F2F2F2;
        border-radius: 6px;
        height:210px;
        position:relative;
        transition:.1s ease-out;
    }
    
    .card-bike:hover .card-bike-overlay{
        
        cursor:pointer;
        position:absolute;
        border-radius:6px;
        background:#212D65;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
        z-index:10;
        transition:.1s ease-in;
    }
    
    .overlay-wrapper{
            position: relative;
    height: 210px;
    width: 100%;
    }
    
    .overlay-wrapper p{
               position: absolute;
    width: 70%;
    top: 50%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    
     .logo-bike{
                
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            height: 60%;
    }
    
    .img-card-bike{
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    border-radius: 6px;
    height: 100%;
    object-fit:cover;
    }
    
    
    .list-item-check {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
        
    }
    
    .list-item-check i{
               font-size: 40px;
                font-weight: 500;
                color: #fff;
                background: lime;
                border-radius: 50%;
                padding: 15px
        
    }
    .list-item-check p{
            padding:0px 0px 0px 20px;
        margin:0;
    }
    
    .bg-yellow{
        background:#F2C94C !important;
    }
    
    .bg-red{
        background:#EB5757 !important;
    }
    
    .bg-aqua{
        background:#2D9CDB !important;
    }
    
    .cl-aqua{
        color:#2D9CDB !important;
    }
    
    .bg-blue{
        background:#042C7C !important;
    }
    
    .cl-blue{
        color:#042C7C !important;
    }
    
     .bg-green-light{
        background:#219653 !important;
    }
    
     .bg-purple-light{
        background:#9B51E0 !important;
    }
    .bg-orange{
        background:#F9450C !important;
    }
    
    .banner-slide-reward{
        min-height:330px !important;
        position:relative;
        border-radius:6px;
    }
    
    .banner-slide-reward img{
        
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border-radius:6px;
        
    }
    
    .align-reward {
    margin: 5em 0px !important;
}

  .img-service{
        background:#bbb;
        height:400px;
        position:relative;
    }
    
    .banner-white-left-slash{
    height:440px;
    background:#bbb;
    position:relative;
}

.banner-white-right-slash{
    height:440px;
    background:#bbb;
     position:relative;
    
}

.banner-kriss:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: url(../img/gallery/kriss110.png);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.banner-factory:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: url(../img/gallery/factory.png);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

   

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

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

    
.banner-white-left-slash:after{
    content: '';
    position: absolute;
    top: 0;
    left: -1em;
    width: 55%;
    height: 100%;
    background: #fff;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-18deg);
    -ms-transform: skew(-18deg);
    transform: skew(-18deg);
    z-index: 2;
}

   

.banner-white-right-slash:after{
    content: '';
    position: absolute;
    top: 0;
    right: -9em;
    width: 60%;
    height: 100%;
    background: #fff;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-18deg);
    -ms-transform: skew(-18deg);
    transform: skew(-18deg);
    z-index: 2;
}
    .desc-slashbanner-left{
        
        position: absolute;
        left: 18%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        /* background: lime; */
        width: 36%;
        
    }
    
    .desc-slashbanner-right{
        position: absolute;
        right: -13%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        /* background: lime; */
        width: 36%;
    }
    
    .img-overview-logo{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }
    
    .img-overview-logo img{
            border-right: 1px solid #bbb;
    margin-right: 20px;
    padding-right: 20px;
    width: 75px;
    margin-top: 15px;
    height: 50px;
    object-fit:contain;
    object-position:center;
    }
    
    .img-overview-logo-align {

        width: 200px !important;
    height: 38px !important;
    object-fit: cover !important;
    
}

.img-overview-logo-align2 {

        width: 200px !important;
   
    
}
    .title-black14{
        font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 140%;

color: #333333;

    }
    
    .list-job li{
        margin-bottom:20px;
    }
    
    .accordion-team-title {
    padding: 12px 0px 0px 0px;
}

.accordion-team .accordion .accordion-item{
    border:none;
}
    
    .img-overview-logo img:last-child{
            border-right: none;
    
    }
    
    .date-orange{
        font-family: 'Oswald';
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 2em;
        
        color: #F9450C;
    }
    
    .title-milestone{
        font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 90%;

color: #212D65;
    }
    
    .desc-milestone{
        font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 140%;


color: #222222;
    }
    
    .fw-400{
    font-weight: 400 !important;
}
.box-grey-portal{
            background: #F2F2F2;
            border-radius: 6px;
            position: relative;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            padding: 30px;
            transition:.3s ease-out;
        }
    
    .box-grey-portal img{
        
        margin-bottom:20px;
        
    }
    
    .link-main{
        text-decoration:none;
    }
    
     .box-grey-portal:hover{
       background:#212D65;
       transition:.3s ease-in;
   }
   
   .box-grey-portal:hover p{
       color:#fff;
   }
   
   .box-grey-portal:hover img{
       filter: brightness(0) invert(1);
       
   }
   
   
 .rating-view,.rating-card{
                position:relative;
            }
            
            .rating-view:after{
                
                position: absolute;
    content: "";
    background: url(../img/icon/rating-logo.png);
    background-repeat: no-repeat;
    width: 62px;
    background-position: center;
    background-size: cover;
    height: 57px;
    margin-left: 10px;
            }
            

.rating-card:after{
                
                    position: absolute;
    content: "";
    background: url(../img/icon/rating-logo.png);
    background-repeat: no-repeat;
    width: 38px;
    background-position: center;
    background-size: cover;
    height: 34px;
    margin-left: 5px;
}



/*---------------cms css------------------------------*/

  .header-auth-img{
           height: 69px;
    width: 301px;
    background: #212D65;
    position: relative;
    }

    .logo-auth {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.bg-dark{
    background: #000;
}

.form-auth-wrapper{
    border: 1px solid #bbb;
    border-radius: 6px;
    height: 60px;
    background: transparent;
    margin-bottom: 40px;
    position: relative;
}

.input-auth{

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    font-weight: 400;
font-size: 14px;
line-height: 14px;


color: #f2f2f2;
background: transparent;
border: none;
padding-left: 20px;
}

.input-auth:focus,.btn-round-black:focus{
    outline: none;
}

.input-auth::placeholder{
    font-weight: 400;
font-size: 14px;
line-height: 14px;


color: #f2f2f2;
}

.link-white12{
    font-weight: 700;
font-size: 12px;
line-height: 14px;


color: #fff;
text-decoration: none;
}

.link-white12:hover{
    color: rgb(153, 145, 145);  
}

.btn-round-black{
    background: #333333;
border-radius: 100px;
    font-weight: 500;
font-size: 14px;
line-height: 24px;


color: #FFFFFF;
transition: .3s ease-out;
text-decoration: none;
border: none;
padding: 10px 30px;
}

.btn-round-black:hover{
    transform:translateY(-2px);
    transition: .3s ease-in;
    background: rgb(146, 141, 141);
}

.btn-round-black:active{
    transform:translateY(2px);
}
.auth-wrapper{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;
    text-align: center;
        margin: 20em 23em;
    padding: 0em 0px;

}
.btn-flex-stretch{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
}

.header-auth-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.grid-main{
        min-height: 50vh;
    background: #f2f2f2;
    padding: 8em 30px 30px 0px;
    display: grid;
    grid-template-columns: 1fr 6fr;
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 0px;
}
.side-menu{
    background: #222;
    border-radius: 0px 6px 6px 0px;
}

.main-menu{
    background: #fff;
    border-radius: 6px;
    position:relative;
        padding: 4em 2em 4em 2em;
}

.sidemenu-togle i {
    color: #2D9CDB !important;
    font-size: 20px;
}
.main-menu .sidemenu-togle {
    position: absolute;
    top: 14px;
    left: 10px;
}

.w-100{
    width:100%;
}

.sidemenu-togle,.closesidemenu{
    display:none;
}
.closesidemenu{
    text-decoration:none;
}

.side-header-icon{
        position: relative;
    min-height: 10px;
    background: #212D65;
    border-radius: 0px 6px 0px 0px;
}
.side-header-greet{
     display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    border-bottom: 0.5px solid #5C5C5C;;
        padding: 25px 20px 10px 20px;
}

.side-menu-main {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.side-menu-main li {
    border-top: 0.5px solid #5C5C5C;;
}

.side-menu-main li:first-child {
    border-top: none;
}

.side-menu-main li a {
    text-decoration: none;
    display: block;
    padding: 15px 0px 15px 20px;
    transition:.3s ease-out;
}




.side-menu-main li a:after {
   
}

.side-menu-main li a:hover {
    background: #04419b;
    transition:.3s ease-in;
}

.side-menu-main li a:hover i,.side-menu-main li a:hover span{
   color:#fff;
   transition:.3s ease-in;
}


.side-menu-main li a i {
    margin-right: 10px;
    color:#bbb;
    transition:.3s ease-out;
}


.accordion-sub-wrapper .side-menu-main li a i {
   color:#fff;
}

.accordion-sub-wrapper .side-menu-main li a span {
   color:#fff;
}


.side-menu-main li a span,.side-menu-accordion #accordion div .title-menu-wrapper a span {
    font-weight: 900;
    font-size: 14px;
    line-height: 16px;
    color: #777;
    transition:.3s ease-out;
}

.side-menu-accordion #accordion div .title-menu-wrapper a i {
    
    color: #bbb;
}

 .side-menu-accordion #accordion div  {
            background-color: transparent;
            border: none;
    }
    .side-menu-accordion #accordion div .title-menu-wrapper {
         border-top: 0.5px solid #5C5C5C;
         
    }
    
    .br-bottom-menu{
        border-bottom: 0.5px solid #5C5C5C;
    }
    
    
    
    .side-menu-accordion #accordion div .title-menu-wrapper a{
        position:relative;
        text-decoration:none;
        padding: 15px 0px 15px 20px;
        display:block;
        transition:.3s ease-out;
    }
    
    .side-menu-accordion #accordion div .title-menu-wrapper a[aria-expanded=true]{
       background: #04419b;
    }
    
    .side-menu-accordion #accordion div .title-menu-wrapper a[aria-expanded=true] i,.side-menu-accordion #accordion div .title-menu-wrapper a[aria-expanded=true] span{
       color:#fff;
    }
    
    .side-menu-accordion #accordion div .title-menu-wrapper a:after {
        font-family: 'Font Awesome 5 Free';
        content: "\f139";
        font-weight: 900;
        color: #fff;
        position: absolute;
        top: 13px;
        right: 15px;
        font-size: 20px;
        transition:.3s ease-out;
    }
    
    
    
    .side-menu-accordion #accordion div .title-menu-wrapper a[aria-expanded=true]::after{
            transform: rotate(180deg);
            transition:.3s ease-in;
    }
    
    .side-menu-accordion #accordion div .title-menu-wrapper a:hover{
        transition:.3s ease-in;
        background: #04419b;
    }
    
    .side-menu-accordion #accordion div .title-menu-wrapper a.active{
        background: #04419b;
    }
    
    .side-menu-accordion #accordion div .title-menu-wrapper a.active i,.side-menu-accordion #accordion div .title-menu-wrapper a.active span{
        color:#fff;
    }
    
    .side-menu-accordion #accordion div .title-menu-wrapper a:hover i,.side-menu-accordion #accordion div .title-menu-wrapper a:hover span{
        transition:.3s ease-in;
        color:#fff;
    }
    
    .side-menu-accordion #accordion div .title-menu-wrapper a i{
        margin-right:10px;
    }
    
    .accordion-sub-wrapper .side-menu-main li {
        border-top: none;
        border-bottom: 0.5px solid #5C5C5C;
        background: #37393b;
    }
    
    .accordion-sub-wrapper .side-menu-main li:last-child {
        border-bottom: none;
    }
    
    .accordion-sub-wrapper .side-menu-main li a {
        padding: 15px 0px 15px 3em;
    }
    
    .accordion-sub-wrapper .side-menu-main li a:hover {
            background: #636363;
    }
    
    .accordion-sub-wrapper .side-menu-main li.active, .side-menu-main li.active {
            background: #636363;
    }
    
    .side-menu-main li.active i,.side-menu-main li.active span {
            color: #fff;
    }
    
    .icon-fax{
        
        margin-right:18px;
        
    }
    
    
      .input-wrap{
        
        background: #FFFFFF;
        
        border: 1px solid #E0E0E0;
        border-radius: 10px;
        height: 40px;
        position:relative;
    }
    
    .input-wrap:focus-within{
        
       border:1px solid #2D9CDB;
    }
    
    .input-wrap label{
        
        
        border-right: 1px solid #F2F2F2;
        font-weight: 500;
        font-size: 10px;
        line-height: 105.47%;
        align-items: center;
        color: #000000;
        position: absolute;
        height: 100%;
        padding: 14.5px;
        min-width: 20%;
    }
      
    
     .input-wrap >.bootstrap-select>.dropdown-toggle.bs-placeholder,.input-wrap >.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
        margin-top: 0px;
    }

    .input-wrap > .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        min-width: 79%;
    }
    
    .input-wrap .select-form{
        position: absolute;
        top: 0;
        right: 0;
        width: 79%;
        height: 100%;
        border-radius: 0px 10px 10px 0px;
        border: transparent;
        padding-left: 10px;
        font-size: 14px;
        line-height: 24px;
        
       
    }
    
    .input-wrap .select-form button:focus,.input-wrap .select-form button:active{
        outline:none !important;
    }
    
    .input-wrap .dropdown-menu{
        transform: translate3d(-2px, 3px, 0px) !important;
    position: relative !important;
    top: 2px;
    }
    
    .input-wrap > .bootstrap-select button .filter-option .filter-option-inner .filter-option-inner-inner{
}
    
    .input-wrap > .bootstrap-select>.dropdown-toggle.bs-placeholder, .input-wrap >.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{
    font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #111;
        
        
            font-family: 'Roboto' !important;
    font-style: normal !important;
        padding-left: 0;
}



.input-wrap > .bootstrap-select > .dropdown-toggle[title='-- Motorcycle type --'], 
.input-wrap > .bootstrap-select > .dropdown-toggle[title='-- Motorcycle model --'],
.input-wrap > .bootstrap-select > .dropdown-toggle[title='-- Latest model --'],
.input-wrap > .bootstrap-select > .dropdown-toggle[title='-- New model --'],
.input-wrap > .bootstrap-select > .dropdown-toggle[title='-- Rating model --']
 { color: #AEAEAE !important; }




.input-wrap > .select-form .dropdown-menu .inner ul li a.dropdown-item.active, .dropdown-item:active {
    color: #04419b;
}
.input-wrap > .select-form .dropdown-menu .inner ul li a.dropdown-item.active, .dropdown-item:active span {
    color: #fff;
}

.input-wrap > .select-form .dropdown-menu .bs-searchbox input:focus {
    outline:none !important;
}
    
    
    .input-wrap .input-main{
        position: absolute;
        top: 0;
        right: 0;
        width: 79%;
        height: 100%;
        border-radius: 0px 10px 10px 0px;
        border: transparent;
        padding-left: 10px;
        font-size: 14px;
        line-height: 24px;
       
        
        color: #111111;
    }
    
   
    
    .input-wrap .input-main:focus{
        outline:none;
    }
    
    .input-wrap .input-main::placeholder{
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        
        
        color: #AEAEAE;
    }
    
    .danger{
       color: red;
        position: absolute;
        bottom: -14px;
        font-size: 10px;
        font-style: italic;
        left: 15px;
    }
    
    .text-black20{
        font-size: 20px;
        line-height: 35px;
        
        
        color: #333333;
        
        border-radius: 10px;
    }
    
    .mt-6{
        margin-top:3em;
    }
    
    .line-blue {
        background-color: #04419b;
    }
    
    .btn-cancel{
        border: 1px solid #828282;
        background:transparent;
        border-radius: 6px;
        
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
       
        
        color: #828282;
            padding: 10px 30px;
    }
    
     .btn-submit{
        border: 1px solid #F9450C;
        background:#F9450C;
        border-radius: 6px;
        
        font-weight: 400;
        font-size: 14px;
        line-height: 140%;
        
        color: #FFFFFF;
            padding: 10px 50px;
    }
    
    .btn-cancel:hover{
        transform:translateY(-2px);
        transition:.3s ease-out;
    }
    
    .btn-submit:hover{
        transform:translateY(-2px);
        transition:.3s ease-out;
    }
    
    .btn-cancel:active, .btn-submit:active{
        transform:translateY(2px);
        transition:.3s ease-in;
    }   
    
    .btn-cancel:focus, .btn-submit:focus{
        outline:none;
    }
    .mr-2{
        margin-right:20px;
    }
    
    .flex-end{
        text-align:right;
    }
    
    .holder{
        position:relative;
        height:20em;
        background:#bbb;
        border-radius:0px 0px 6px 6px ;
        
    }
    
    .holder input{
        position: absolute;
        width: 100%;
        height: 100%;
        
        top: 0;
        left: 0;
        z-index:2;
        opacity:0;
    }
    
    .holder .holder-preview img.img-default-preview{
        position: absolute;
        width: 6em;
        height: 6em;
        object-fit: contain;
        object-position: center;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        z-index:1;
    }
    
    .holder .holder-preview img.img-upload-preview{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        z-index:1;
        border-radius: 0px 0px 6px 6px ;
    }
    
    .file-wrapper{
        background: #FFFFFF;
        border: 1px solid #E0E0E0;
        border-radius: 10px;
    }
    
    .file-wrapper label{
        font-weight: 500;
        font-size: 10px;
        line-height: 105.47%;
        align-items: center;
        color: #000000;
        height: 100%;
        padding: 14.5px;
    }
    
    .form-text-wrapper{
        
        background: #FFFFFF;
        border: 1px solid #E0E0E0;
        border-radius: 10px;
        position:relative;
    }
    
    .form-text-wrapper label{
        
        font-weight: 500;
        font-size: 10px;
        line-height: 105.47%;
        align-items: center;
        color: #000000;
        height: 100%;
        padding: 14.5px;
    }
    
    .context-menu{
        position:relative;
        text-decoration:none;
    }
    .context-menu:after{
        font-family: 'Font Awesome 5 Free';
        content: "\f142";       
        font-weight: 900;
        margin-left: 10px;
        
        color: #333;
        
        
    }
    
    .title-link-line {
    font-size: 14px;
    line-height: 16px;
    text-decoration-line: underline;
    color: #4F4F4F;
    transition: .3s ease-out;
}

.title-link-line:hover {
    
    color: #4F4F4F;
}

.status-green{
        font-size: 14px;
    line-height: 16px;
    text-decoration-line: underline;
    color: #219653;
}

.status-grey{
        font-size: 14px;
    line-height: 16px;
    text-decoration-line: underline;
    color: #333;
}


#thetable_wrapper{
    position:relative;
}

#thetable_wrapper .dt-buttons.btn-group.flex-wrap{
    position: absolute;
    right: 195px;
}

#thetable_wrapper .dataTables_length{
    position: absolute;
    left: 0;
}

#thetable_wrapper .dataTables_filter{
       position: absolute;
    right: 0;
        top: 3px;
}

.flex-filter{
        display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}

.filter-wrapper{
    position: absolute;
    left: 140px;
    top: 68px;
    z-index: 1;
    cursor:pointer;
}

.extra-filter{
        display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.extra-filter .col-auto{
       margin-right:10px;
}

.groupfilter select, .custom-select, .flex-filter p, .dataTables_length label{
    /* line-height: 30px; */
    color: #000;
    margin-left: 0px;
    font-size: 12px;
}


.dataTables_length label, .flex-filter p{
    font-weight:700 !important;
}



#thetable{
    padding-top: 90px;
    padding-bottom:10em;
}
    
    
.dataTables_info{
    position: absolute;
    bottom: 0;
    left: 0;
}

#thetable_paginate {
    position: absolute;
    bottom: 0;
    right: 0;
    
}

.dataTables_info{
    color: #000;
    margin-left: 0px;
    font-size: 12px;
}

.page-link {
    border:none;
    color: #000;
    margin-left: 0px;
    font-size: 12px;
    
}

.page-link:hover {
    color: #000;
    
}

.pagination a:focus {
  outline:0;
  box-shadow: inherit;
}

.page-item.active .page-link {
    color: #fff;
    background-color: #bbb;
    border-color: #bbb;
}
.paginate_button:focus{
    outline:none;
}

th, td{
   color: #000;
    margin-left: 0px;
    font-size: 12px; 
}

.expanded ul.dropdown-menu{
    transform: translate(-81px, 10px);
        min-width: 6rem;
}


.expanded ul.dropdown-menu li{
}


.expanded ul.dropdown-menu li a{
    color: #000;
    margin-left: 0px;
    font-size: 12px;
    text-decoration:none;
        display: block;
    margin-bottom: 0px;
    padding: 5px 0px 5px 10px;
    
}

.expanded ul.dropdown-menu li a:hover{
    color: #333;
    background:#f2f2f2;
}

.title-black20{
    font-size: 20px;
    color: #333;
    font-weight: 900;
    margin-bottom: 0;
}


.title-wrapper{
    position:absolute;
    top:20px;
}

.create-btn-wrapper {
    position: absolute;
    top: 120px;
    right: 36px;
    z-index: 3;
}

.create-btn-wrapper a{
    color: #000;
    margin-left: 0px;
    font-size: 12px;
}

.create-btn-wrapper a:hover{
   
}

.upload-box {
    height: 13em;
    background: transparent;
    border-radius: 6px;
    border:2px dashed #bbb;
    position: relative;
}

.upload-btn-wrapper{
    width: 10em;
    height: 3em;
    background: #4b4bff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.upload-btn-wrapper:hover{
    cursor:pointer;
    
}

.upload-btn-wrapper span{
   color: #fff;
    font-size: 20px;
}

.upload-btn-wrapper #input-gallery {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor:pointer;
    z-index:2;
}

.upload-btn-wrapper #input-gallery input {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor:pointer;
    z-index:2;
}

.upload-gallery-wrapper{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.box-img-thumb{
        background: #e2e2e2;
        position: relative;
        width: 10em;
        height: 10em;
        border-radius: 6px;
        margin-bottom: 20px;
        margin-left: 20px;
}



img.img-size {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
}

span.rm-img {
    position: absolute;
    top: -1px;
    right: 5px;
    font-size: 15px;
    color: #f2f2f2;
    z-index: 2;
}

span.rm-img:hover {
    cursor:pointer;
}
.myProgress {
        background: #333;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 6px;
        opacity: 0.5;
        /* bottom: 33%; */
        /* left: 50%; */
        /* transform: translate(-50%, -50%);*/
    }
    
    .myBar{
            background: #111;
        height: 100%;
        opacity: 1;
        border-radius: 6px;
    }
.input-desc {
                background: #FFFFFF;
                border: 1px solid #E0E0E0;
                border-radius: 10px;
                min-height: 20em;
                position: relative;
            }
            
            .input-desc textarea{
                position:absolute;
                width:100%;
                height:100%;
                left:0;
                top:0;
                border:none;
                font-size: 14px;
                line-height: 24px;
                color: #111111;
                padding:10px;
            }
            
            .input-desc textarea:focus{
                outline:none;
            }
    .box-total {
        background: #f5f5f5;
        height: 10em;
        border-radius: 6px;
        position: relative;
    }
    
    .box-total label{
            font-weight: normal;
    color: #aeaeae;
    font-size: 10px;
    position: absolute;
    top: 10px;
    left: 15px;
    }
    
    .box-total p{
                font-weight: 700;
    font-size: 50px;
    margin-bottom: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
            
    }
    
    .box-total p a{
                
                text-decoration:none;
                color:#333;
            
    }
    
    #profile_edit, #password_edit{
        display:none;
    }
    
    .setting-title a{
            color: #333;
            font-size: 20px;
            text-decoration: none;
    }
    
     .desc-ess h4{
            font-family: 'Oswald';
            font-style: normal;
            font-weight: 700;
            font-size: 40px;
            line-height: 90%;
            color: #333333;
        }
        
        .desc-ess h5{
            font-weight: 400;
            font-size: 14px;
            line-height: 140%;
            color: #333333;
        }