body{ width: 100%; height: 100%; padding: 0; margin: 0; color: #2d3e50; background: #fff; font-family: 'Lato'; font-size: 14px; font-weight: 400; overflow: auto; overflow-x: hidden;}
::selection{ background: #ce3923 color: #fff;}
.loading{ position: fixed; width: 100%; height: 100vh; background: #fff; top: 0; left: 0; z-index: 9999999999999999;}
.container{ max-width: 1300px !important; }

.top-section{ width: 100%; padding: 15px 0;}
.header-section{ width: 100%; padding: 20px 0;}
.footer-section{ width: 100%;}
.footer-alt-section{ width: 100%; border-top: 1px solid rgba(255,255,255,0.1);}

/* Lang */
.lang{ position: relative;}
.lang .choose-btn{ color: #fff; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;}
.lang .choose-btn i{ margin-left: 5px; position: relative; top: 1px;}

.lang .lang-list{ width: 120px; background: #f5f5f5; border-radius: 10px; padding: 10px 0; top: 30px; box-shadow: 0px 5px 10px rgba(0,0,0,0.2); display: none; position: absolute; z-index: 2;}
.lang .lang-list a{ text-decoration: none; color: #111; display: block; padding: 3px 15px;}

/* Social Media */
.social-media{ width: 100%; display: flex; align-items: center; justify-content: flex-end;}
.social-media a{ text-decoration: none; color: currentColor; display: block; width: 24px; height: 24px; margin-left: 5px; filter: brightness(0) invert(1);}
.social-media a.facebook{ background: url(../images/social/facebook.svg) no-repeat center; background-size: 14px;}
.social-media a.twitter{ background: url(../images/social/twitter.svg) no-repeat center; background-size: 14px;}
.social-media a.linkedin{ background: url(../images/social/linkedin.svg) no-repeat center; background-size: 14px;}
.social-media a.dribbble{ background: url(../images/social/dribbble.svg) no-repeat center; background-size: 14px;}
.social-media a.instagram{ background: url(../images/social/instagram.svg) no-repeat center; background-size: 14px;}
.social-media a.whatsapp{ background: url(../images/social/whatsapp.svg) no-repeat center; background-size: 14px;}
.social-media a.googleplus{ background: url(../images/social/tiktok.svg) no-repeat center; background-size: 14px;}

/* Logo */
.logo{ width: auto;}
.logo a{ text-decoration: none; color: currentColor; display: block;}
.logo img{ max-width: 202px; width: 100%;}

/* Top Menu */
.desktop-device .top-menu{ width: auto;}
.desktop-device .top-menu ul li{ position: relative;}
.desktop-device .top-menu ul li a{ text-decoration: none; color: #1a1c28; display: block; padding: 20px 30px; font-size: 14px; font-weight: 900;}
.desktop-device .top-menu ul li a:hover{ color: #ce3923}
.desktop-device .top-menu > ul{ list-style: none; padding: 0; margin: 0; display: flex;}
.desktop-device .top-menu > ul ul{ list-style: none; padding: 10px 0; margin: 0; position: absolute; width: 180px; background: #eee; display: none; z-index: 2;}
.desktop-device .top-menu > ul ul li a{ padding: 5px 25px; color: #1a1c28; font-weight: 600;}
.desktop-device .top-menu > ul ul li a:hover{ color: #ce3923}
.desktop-device .top-menu > ul ul.opened{ display: block;}
.desktop-device .top-menu > ul ul ul{ left: 100%; top: 0; display: none;}
.desktop-device .top-menu > ul ul ul.opened{ display: block;}

/* Search Wrap */
.search-wrap{ margin-left: 15px; display: none;}
.search-wrap .search-btn{ width: 40px; height: 40px; background: url(../images/search.svg) no-repeat center; background-size: 22px;}

/* Slider */
.slider{ width: 100%; border-top: 3px solid #eee;}
.slider a{ text-decoration: none; color: currentColor; display: block;}
.slider img{ width: 100%;}

.slider .swiper-button-prev{ left: 20px; width: 50px; height: 50px; border: 1px solid #fff;}
.slider .swiper-button-prev::after{ font-size: 16px; color: #fff;}
.slider .swiper-button-next{ right: 20px; width: 50px; height: 50px; border: 1px solid #fff;}
.slider .swiper-button-next::after{ font-size: 16px; color: #fff;}
.slider .swiper-pagination{ position: relative; top: -45px;}
.slider .swiper-pagination span{ background: #fff; width: 14px; height: 14px; margin: 0 3px; opacity: 1;}
.slider .swiper-pagination span.swiper-pagination-bullet-active{ background: transparent; border: 2px solid #fff;}

@media(max-width: 480px){
	.slider .swiper-pagination{ position: relative; top: -20px;}
}


/* Banner */
.banner{ width: 100%; border-top: 3px solid #eee;}
.banner a{ text-decoration: none; color: currentColor; display: block;}
.banner img{ width: 100%;}

/* Banner Map */
.banner-map{ width: 100%; border-top: 3px solid #eee;}
.banner-map iframe{ width: 100%; height: 600px;}

/* Ck Container */
.ck-container{ width: 100%;}
.ck-container h1{ font-size: 32px; font-weight: 900; margin-bottom: 20px;}
.ck-container h2{ font-weight: 900; margin-bottom: 20px;}
.ck-container p{ color: #778b9e;}
.ck-container img{ float: left; margin-right: 20px; margin-bottom: 20px;}

/* Icon List */
.icon-list{ width: 100%; display: flex; flex-wrap: wrap;}
.icon-list .icon-item{ width: 25%; padding: 15px;}
.icon-list .icon-item a{ text-decoration: none; text-align: center; background: #fff; border-radius: 5px; border: 1px solid #dbe4ed; padding: 30px; color: currentColor; display: block; height: 100%;}
.icon-list .icon-item .image{ width: auto; height: 120px; margin-bottom: 30px; display: flex; align-items: center; justify-content: center;}
.icon-list .icon-item .image img{ max-width: 100%;}
.icon-list .icon-item .content{ text-align: left;}
.icon-list .icon-item .content h2{ font-size: 24px; font-weight: 900; margin-bottom: 30px;}
.icon-list .icon-item .content p{ margin-bottom: 0; color: #778b9e;}

/* Contact Map */
.contact-map{ width: 100%; height: 100%;}
.contact-map iframe{ width: 100%; height: 100%;}

/* Contact Form */
.contact-form{ width: 100%; margin-bottom: 30px;}
.contact-form ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.contact-form ul li{ width: 100%; margin-bottom: 10px;}
.contact-form ul li label{ font-weight: 900; font-size: 13px; letter-spacing: 1px;}
.contact-form ul li label small{ color: #ce3923 font-size: 16px;}
.contact-form ul li input[type=text]{ width: 100%; outline: none; border: 1px solid #cedae6; border-radius: 5px; padding: 12px;}
.contact-form ul li textarea{ width: 100%; height: 120px; outline: none; border: 1px solid #cedae6; border-radius: 5px; padding: 12px; }
.contact-form ul li input[type=submit]{ border: 0; outline: none; background: #1bbc9b; color: #fff; font-weight: 800; letter-spacing: 1px; border-radius: 5px; padding: 10px 30px;}

/* Contact Info */
.contact-info{ width: 100%;}
.contact-info h1{ font-size: 28px; font-weight: 500; margin-bottom: 15px;}
.contact-info p{ color: #778b9e;}
.contact-info h2{ font-size: 26px; font-weight: 500; margin-bottom: 15px;}
.contact-info ul{ list-style: none; padding: 0; margin: 0;}
.contact-info ul li{ width: 100%; margin-bottom: 30px;}
.contact-info ul li span{ display: block; font-weight: 800;}
.contact-info ul li small{ display: block; font-size: 14px; color: #778b9e;}

/* Marka List */
.marka-list{ width: 100%; display: flex; flex-wrap: wrap;}
.marka-list .list-item{ width: 16.667%; padding: 15px;}
.marka-list .list-item a{ text-decoration: none; color: currentColor; display: flex; height: 100%; align-items: center; justify-content: center;}
.marka-list .list-item img{ max-width: 100%; filter: grayscale(100%);}
.marka-list .list-item:hover img{ filter: grayscale(0);}

/* Product List */
.product-list{ width: 100%; display: flex; flex-wrap: wrap;}
.product-list .list-item{ width: 33.333%; padding: 0 15px; margin-bottom: 30px;}
.product-list a{ text-decoration: none; color: currentColor; display: block; border: 1px solid #ddd; height: 100%;}
.product-list .image{ width: 100%; padding-bottom: 100%; position: relative;}
.product-list .image img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.product-list .content{ padding: 30px;}
.product-list .content h2{ font-size: 18px; font-weight: 900; margin-bottom: 15px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-list .content .stars{ width: 100%; display: flex; align-items: center;}
.product-list .content .stars span{ display: block; width: 18px; height: 18px; background: url(../images/star.svg) no-repeat center; background-size: 16px;}
.product-list .content .stars span.active{ background: url(../images/star-active.svg) no-repeat center; background-size: 16px;}

@media(max-width: 480px){
	.product-list .list-item{ width: 50%; padding: 0 15px; margin-bottom: 30px;}
	.product-list .content h2{ font-size: 14px; font-weight: 900; margin-bottom: 15px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
}



/* Blog List */
.blog-list{ width: 100%;}
.blog-list ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;}
.blog-list ul li{ width: 25%; padding: 15px;}
.blog-list ul li a{ text-decoration: none; color: currentColor; display: block;}
.blog-list .blog-item{}
.blog-list .blog-item .image{ width: 100%; padding-bottom: 100%; position: relative; margin-bottom: 15px;}
.blog-list .blog-item .image img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.blog-list .blog-item h1{ font-size: 20px;}
.blog-list .blog-item .detail-btn{ padding: 10px 20px; background: #ce3923 color: #fff;}

/* List Group */
.card-group{ width: 100%; display: flex; flex-wrap: wrap;}

    .card-group .flip-card {
        background-color: transparent;
        width: 25%;
        height: 320px;
        perspective: 1000px;
        padding: 15px;
    }

    .card-group .flip-card a {
        text-decoration: none;
        color: currentColor;
        display: block;
        width: 100%;
        height: 100%;
    }

    .card-group .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.4s;
        transform-style: preserve-3d;
    }

    .card-group .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }

    .card-group .flip-card:hover .flip-card-front h2 {
        display: none;
    }

    .card-group .flip-card-front, .card-group .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-group .flip-card-front {
        color: #fff;
        background: #000;
        padding: 15px;
    }

    .card-group .flip-card-front img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
        opacity: 0.75;
    }

    .card-group .flip-card-front h2 {
        position: relative;
        z-index: 2;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 0;
    }

    .card-group .flip-card-back {
        background-color: #ce3923
        color: white;
        transform: rotateY(180deg);
        padding: 15px;
    }

    .card-group .flip-card-back p {
        margin-bottom: 0;
    }


/* Product Carou */
.product-carou{ width: 100%;}
.product-carou a{ text-decoration: none; color: currentColor; display: block; border: 1px solid #ddd;}
.product-carou .image{ width: 100%; padding-bottom: 100%; position: relative;}
.product-carou .image img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.product-carou .content{ padding: 30px;}
.product-carou .content h2{ font-size: 18px; font-weight: 900; margin-bottom: 15px;}
.product-carou .content .stars{ width: 100%; display: flex; align-items: center;}
.product-carou .content .stars span{ display: block; width: 18px; height: 18px; background: url(../images/star.svg) no-repeat center; background-size: 16px;}
.product-carou .content .stars span.active{ background: url(../images/star-active.svg) no-repeat center; background-size: 16px;}
.product-carou .bottom-link{ padding: 15px 30px; text-align: right; border-top: 1px solid #ddd; display: flex; align-items: center; justify-content: flex-end;}
.product-carou .bottom-link i{ font-size: 16px; margin-right: 5px;}

.product-carou .swiper-slide{ padding: 0 15px;}
.product-carou .swiper-button-prev{ left: 0; width: 64px; height: 64px; border-radius: 100%; background: #f0f5f8;}
.product-carou .swiper-button-prev::after{ font-size: 24px; font-weight: 900; color: #666;}
.product-carou .swiper-button-next{ right: 0; width: 64px; height: 64px; border-radius: 100%; background: #f0f5f8;}
.product-carou .swiper-button-next::after{ font-size: 24px; font-weight: 900; color: #666;}

/* Product Carou 2 */
.product-carou2{ width: 100%;}
.product-carou2 a{ text-decoration: none; color: currentColor; display: block;}
.product-carou2 .image{ width: 100%;}
.product-carou2 .image img{ width: 100%;}

.product-carou2 .swiper-button-prev{ width: 28px; height: 28px; background: #132634; left: 0;}
.product-carou2 .swiper-button-prev::after{ font-size: 10px; color: #fff;}
.product-carou2 .swiper-button-next{ width: 28px; height: 28px; background: #132634; right: 0;}
.product-carou2 .swiper-button-next::after{ font-size: 10px; color: #fff;}

/* Product Group */
.product-group{ width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 30px;}
.product-group .group-item{ width: 20%; padding: 5px;}
.product-group .group-item a{ text-decoration: none; color: currentColor; display: block; border: 1px solid #ddd;}
.product-group .group-item .image{ width: 100%; padding-bottom: 100%; position: relative;}
.product-group .group-item .image img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.product-group .group-item .content{ width: 100%; padding: 20px;}
.product-group .group-item .content h2{ font-size: 17px; font-weight: bold;}

.load-more{ width: 100%; text-align: center;}
.load-more .load-more-btn{ display: inline-block; cursor: pointer; padding: 15px 45px; background: #213140; color: #fff; font-weight: bold; border-radius: 5px;}

/* Page Top Title */
.page-top-title{ width: auto; position: relative;}
.page-top-title h1{ font-size: 30px; margin-bottom: 0;}

/* Breadcrumb */
.breadcrumb{ background: unset; margin-bottom: 0;}
.breadcrumb a{ text-decoration: none; color: #778b9e; position: relative; display: flex; align-items: center; margin-left: 15px;}
.breadcrumb a::before{ content: "\e930"; font-family: "feather"; position: relative; display: block; font-weight: bold; top: 1px;}
.breadcrumb a:hover{ color: #29c7bf;}

/* Detail Gallery */
.detail-gallery{ width: 100%; display: flex;}
.detail-gallery .own-image{ order: 2; width: 80%; border: 1px solid #ddd;}
.detail-gallery .own-image img{ width: 100%;}
.detail-gallery .thumb-image{ order: 1; width: calc(20% - 5px); margin-right: 10px;}
.detail-gallery .thumb-image img{ width: 100%;}
.detail-gallery .thumb-image .swiper-slide{ border: 1px solid #ddd;}

/* Detail Info */
.detail-info{}
.detail-info h1{ font-size: 20px; font-weight: bold;}
.detail-info .stars{ width: 100%; display: flex; align-items: center; margin-bottom: 30px;}
.detail-info .stars span{ display: block; width: 18px; height: 18px; background: url(../images/star.svg) no-repeat center; background-size: 16px;}
.detail-info .stars span.active{ background: url(../images/star-active.svg) no-repeat center; background-size: 16px;}
.detail-info p{ margin-bottom: 0; font-size: 16px; height: 76px; overflow: hidden;}
.detail-info .detail-description{ margin-bottom: 30px;}
.detail-info .detail-description p{}
.detail-info .detail-description .desc-read{ color: #ce3923 font-weight: bold; cursor: pointer;}

.detail-info a.detail-btn{ text-decoration: none !important; display: inline-block; cursor: pointer; padding: 10px 45px; background: #18bc9a; color: #fff; font-size: 15px; font-weight: bold; border-radius: 5px;}
.detail-info a.detail-btn:hover{ color: #fff;}

/* Detail Content */
.detail-content{ border: 1px solid #ddd; padding: 30px;}
.detail-content h1{ font-size: 20px; font-weight: bold;}

.detail-content table tr:nth-child(odd){ background-color: #f5f5f5;}
.detail-content table tr:nth-child(even){ background-color: #eee;}
.detail-content table tr td{ padding: 10px; border: 1px solid #fff;}
.detail-content table tr td p{ margin-bottom: 0;}

/* Filter Section */
.filter-section{ width: 100%; padding-right: 30px;}
.filter-section .search{ width: 100%; margin-bottom: 30px; position: relative;}
.filter-section .search input[type=text]{ width: 100%; outline: none; border: 1px solid #ddd; border-radius: 0; padding: 10px 15px; padding-right: 40px;}
.filter-section .search input[type=submit]{ width: 43px; height: 43px; position: absolute; right: 0; border: 0; outline: none; background: url(../images/search.svg) no-repeat center; background-size: 18px; filter: invert(0.5);}

.filter-section h6{ font-size: 17px; font-weight: bold; position: relative; display: flex; align-items: center; margin-bottom: 20px;}
.filter-section h6::before{ content: ""; position: relative; display: block; width: 16px; height: 16px; background: linear-gradient(to bottom, #1bbc9d 50%, #47d1ff 50%); margin-right: 10px;}

.filter-section a.most-product-btn{ margin-bottom: 30px; text-decoration: none; color: #fff; background: #1bbc9d; text-align: center; display: block; padding: 10px 20px; border-radius: 5px; font-weight: bold;}

/* Side Nav */
.side-nav{ width: 100%; margin-bottom: 30px;}
.side-nav ul{ list-style: none; padding: 0; margin: 0; border-radius: 7px;}
.side-nav ul li{ width: 100%; position: relative;}
.side-nav ul li.current{ position: relative;}
.side-nav ul li.current > a{ color: #ce3923 width: 100%; font-weight: 999;}
.side-nav ul li:last-child a{ border: 0;}
.side-nav ul li a{ text-decoration: none; color: currentColor; display: block; padding: 8px 0; padding-right: 44px; font-size: 15px; font-weight: 1000; border-bottom: 1px solid #eee;}
.side-nav ul li a:hover{ color: #ce3923}
.side-nav ul li .arrow{ position: absolute; color: #ce3923 right: 0; width: 32px; height: 39px; top: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 2;}
.side-nav ul li .arrow.active{ transform: rotate(90deg);}
.side-nav ul li.has-sub ul{ padding: 0; height: 0; overflow: hidden;}
.side-nav ul li.has-sub ul.opened{ padding: 10px 0; height: auto;}
.side-nav ul ul{ border: 0;}
.side-nav ul ul li a{ border: 0; font-size: 14px;}
.side-nav ul ul li a{ font-weight: 900; color: #555;}

/* Footer Logo */
.footer-logo{ width: auto; margin-bottom: 20px;}
.footer-logo a{ text-decoration: none; color: currentColor; display: block;}
.footer-logo img{ max-width: 202px; width: 100%;}

/* Footer Description */
.footer-description{ color: #999; max-width: 400px; width: 100%;}
.footer-description a.detail-btn{ text-decoration: none; color: #ce3923 font-weight: 900; display: inline-flex; align-items: center;}
.footer-description a.detail-btn i{ margin-right: 5px; background: #ce3923 color: #1a1c28; border-radius: 100%;}

/* Footer Form */
.footer-form{ max-width: 400px; width: 100%;}
.footer-form h2{ font-size: 18px; font-weight: 900; color: #fff; letter-spacing: 1px; margin-bottom: 20px;}
.form-inputs{}
.form-inputs ul{ list-style: none; padding: 0; margin: 0;}
.form-inputs ul li{ width: 100%; position: relative;}
.form-inputs ul li input[type=text]{ color: #fff; width: 100%; margin-bottom: 10px; padding: 7px 10px; outline: none; border: 1px solid #2d3e50; background: white; border-radius: 5px;}
.form-inputs ul li input[type=text]:focus{ border-color: #ce3923}
.form-inputs ul li textarea{ color: #fff; width: 100%; margin-bottom: 5px; padding: 10px; height: 100px; outline: none; border: 1px solid #2d3e50; background: white; border-radius: 5px;}
.form-inputs ul li textarea:focus{ border-color: #ce3923}
.form-inputs ul li input[type=submit]{ width: 100%; background: #2d3e50; color: #fff; outline: none; border: 0; border-bottom: 3px solid #202d3d; border-radius: 5px; letter-spacing: 1px; font-weight: 900; padding: 10px;}

.form-inputs.light-style ul li input[type=text]{ color: #1a1c28; background: #fff; border-color: #cedae6;}
.form-inputs.light-style ul li textarea{ color: #1a1c28; background: #fff; border-color: #cedae6;}

/* Other .Css */
.copyright{ color: #999;}
.copyright span{ color: #ce3923}

/* Helpers */
.bg-dark1{ background-color:#002b70 !important}
.bg-dark2{ background-color: white !important;}

.mw-500{ max-width: 500px !important; width: 100% !important;}
.mw-600{ max-width: 600px !important; width: 100% !important;}
.mw-700{ max-width: 700px !important; width: 100% !important;}
.mw-800{ max-width: 800px !important; width: 100% !important;}
.mw-900{ max-width: 900px !important; width: 100% !important;}
.mw-1000{ max-width: 1000px !important; width: 100% !important;}
.mw-1100{ max-width: 1100px !important; width: 100% !important;}
.mw-1200{ max-width: 1200px !important; width: 100% !important;}
.mw-1300{ max-width: 1300px !important; width: 100% !important;}
.mw-1400{ max-width: 1400px !important; width: 100% !important;}

.half-width{ width: 49% !important;}

.read-more{ text-decoration: none !important; color: #2d3e50 !important; padding: 5px 30px; font-size: 13px; letter-spacing: 1px; font-weight: 800; border: 2px solid #2d3e50; border-radius: 5px; display: inline-flex; align-items: center;}
.read-more i{ margin-left: 10px;}

.thin-title{ font-weight: 300;}

.h2-title{ font-size: 36px; font-weight: 900; margin-bottom: 20px; letter-spacing: 1px;}
.h2-title-bordered{ font-size: 26px; font-weight: 900; margin-bottom: 20px; letter-spacing: 1px; border: 2px solid #1a1c28; display: inline-block; padding: 5px 30px;}

.mobile-btn{ width: 40px; height: 40px; display: none; align-items: center; justify-content: center;}
.mobile-btn i{ font-size: 24px;}

@media(max-width: 1100px)
{
    .card-group .flip-card{ width: 33.333%;}
}

@media(max-width: 991px)
{
    .mobile-btn{ display: flex;}

    .mobile-device .top-menu{ width: 100%; height: 100%; position: fixed; left: -100%; top: 0; z-index: 9; transition: 0.3s; background: #fff; overflow: auto;}
    .mobile-device .top-menu.opened{ left: 0;}
    .mobile-device .top-menu ul{ width: 100%; height: 100%; top: 0; z-index: 3; padding: 30px 0; padding-top: 70px; margin: 0; list-style: none;}
    .mobile-device .top-menu ul li{ position: relative; border-top: 1px solid #eee;}
    .mobile-device .top-menu ul li:last-child{ border-bottom: 1px solid #eee;}
    .mobile-device .top-menu ul li a{ text-decoration: none; color: #111; font-size: 14px; font-weight: 600; display: block; padding: 10px 15px; text-align: center;}
    .mobile-device .top-menu > ul{ display: block; left: 0;}
    .mobile-device .top-menu > ul ul{ position: fixed; background: #fff; left: -100%; opacity: 0; visibility: hidden; transition: 0.3s;}
    .mobile-device .top-menu > ul ul.opened{ left: 0; opacity: 1; visibility: visible;}
    .mobile-device .top-menu > ul ul ul{ left: 0; top: 0; left: -100%; opacity: 0; visibility: hidden; transition: 0.3s;}
    .mobile-device .top-menu > ul ul ul.opened{ left: 0; opacity: 1; visibility: visible;}

    .mobile-device .top-menu .back-icon{ width: 38px; height: 38px; position: absolute; left: 0; top: 15px; display: flex; align-items: center; justify-content: center; z-index: 2;}
    .mobile-device .top-menu .sub-icon{ width: 38px; height: 38px; position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 2;}

    .marka-list .list-item{ width: 25%;}
}

@media(max-width: 768px)
{
    .card-group .flip-card{ width: 50%;}
    .marka-list .list-item{ width: 33.333%;}
}

@media(max-width: 640px)
{

}

@media(max-width: 576px)
{
    .card-group .flip-card{ width: 100%; height: 240px;}
    .marka-list .list-item{ width: 50%;}
}

@media(max-width: 420px)
{

}