/* ============================================
		Algemene elementen
=============================================*/

a { color: var(--color-primary); text-decoration: underline; transition: all 0.5s; }
a:hover { color: var(--color-secondary); }

a[href*='mailto:']::before,
a[href*='tel:']::before { display: inline-block; transition: all 0.5s;}

a:hover[href*='mailto:']::before,
a:hover[href*='tel:']::before {transform: translateY(-3px);}

.bg-color {background-color: var(--bg-color);}

.container.container-small {max-width: calc(var(--container-width) - 300px) ;}

.text-left h2 { position: relative; height: fit-content; display: flex; gap: 0 10px;}
.text-left h2::before {content: ''; position: relative; display: block; width: 5px; background-color: var(--color-secondary);}

.text-center h2 { position: relative; height: fit-content; display: flex; align-items: center; flex-direction: column; gap: 10px;}
.text-center h2::after {content: ''; position: relative; display: block; width: 40px; height: 5px; background-color: var(--color-secondary);}

.vertical-center {height: 100%; display: flex; flex-direction: column; justify-content: center;}

.btn.btn-back {padding: 0; margin: 25px 0;}
.btn.btn-back:hover {color: var(--color-secondary);}
.btn.btn-back::before { content: var(--arrow-left); font-family: var(--font-awesome); color: var(--color-secondary); margin-right: 25px; display: inline-block; font-weight: 400; }
.btn.btn-back::after {display: none;}

b, strong {color: var(--color-primary);}

/* === Swiper === */
.swiper {position: relative;}
.swiper-wrapper {}
.swiper-wrapper .swiper-slide {height: fit-content;}
.swiper-button-next,
.swiper-button-prev { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% + 25px); transform: translateY(-50%); background-color: var(--color-primary); border: none; border-radius: 30px; transition: all 0.5s; z-index: 10;}
.swiper-button-next:hover,
.swiper-button-prev:hover {background-color: var(--color-secondary);}
.swiper-button-next::after,
.swiper-button-prev::after { display: none;}
.swiper-button-next i::before,
.swiper-button-prev i::before { font-size: 1.125rem; color: var(--white);}
.swiper-button-prev {left: -25px;}
.swiper-button-next {right: -25px;}

/* Dots/Pagination */
.swiper-pagination { --dot-size: 10px; padding: 25px 0; position: absolute; bottom: 0 !important; display: flex; gap: 0 8px; justify-content: center;}
.swiper-pagination-bullet { width: var(--dot-size); height: var(--dot-size); background-color: var(--white); border-radius: 100%; opacity: 1; margin: 0 !important;}
.swiper-pagination-bullet-active {background-color: var(--color-secondary);}

/* Verberg pijlen aan de randen */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {opacity: 0; pointer-events: none;}
  
/* ============================================
		TOP
=============================================*/

.container-fluid.topbar {background-color: var(--color-primary);}
.container-fluid.topbar .top-left {}
.container-fluid.topbar .top-left .top-el {}
.container-fluid.topbar .top-left .top-el .usp-list {}
.container-fluid.topbar .top-left .top-el .usp-list ul {margin: 0; padding: 0; display: flex; gap: 0 45px;}
.container-fluid.topbar .top-left .top-el .usp-list ul li { list-style: ''; font-weight: 400; }
.container-fluid.topbar .top-left .top-el .usp-list ul li::before {content: var(--check); font-family: var(--font-awesome); font-weight: 400; color: var(--color-secondary); margin-right: 14px;}
.container-fluid.topbar .top-right {}
.container-fluid.topbar .top-right .top-el {}
.container-fluid.topbar .top-right .top-el .top-menu {}
.container-fluid.topbar .top-right .top-el .top-menu ul {display: flex; gap: 0 45px; padding: 0; margin: 0;}
.container-fluid.topbar .top-right .top-el .top-menu ul .item {display: flex; gap: 0 6px;}
.container-fluid.topbar .top-right .top-el .top-menu ul .item a { text-decoration: none; font-weight: 400; transition: all 0.5s;}
.container-fluid.topbar .top-right .top-el .top-menu ul .item a:hover { color: var(--color-secondary); text-decoration: none; }

.container-fluid.topbar .top-right .top-el .top-menu ul .item:has(a[href='/account'])::before {content: '\f007'; font-family: var(--font-awesome); color: var(--color-secondary); font-size: 1.313rem; font-weight: 300;}

/* ============================================
		NAVIGATIE
=============================================*/

.container-fluid.navigatie {}
.container-fluid.navigatie .mainmenu {background-color: var(--white); height: 100%; padding: 0;}
.container-fluid.navigatie .mainmenu #navbarNav {}
.container-fluid.navigatie .mainmenu #navbarNav .nav { justify-content: flex-end; gap: 0 45px;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item {padding: 0; margin: 0;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item .nav-link {color: var(--color-primary); font-size: 1rem; font-weight: 400; padding: 0; text-decoration: none; transition: all 0.5s;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item .nav-link:hover {color: var(--color-secondary);}

.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown {}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu { left: -15px; border-radius: 25px;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .nav-item {}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .nav-item a { text-decoration: none; font-weight: 600; transition: all 0.5s;}
.container-fluid.navigatie .mainmenu #navbarNav .nav .nav-item.dropdown .dropdown-menu .nav-item a:hover {text-decoration: none; color: var(--color-secondary);}

.navbar-toggler-icon { width: fit-content; display: flex; align-items: center;}

/* Zoeken / search */
header .search-bar {}
header .search-bar .search {}
header .search-bar .search .form-group {}
header .search-bar .search .form-group input { padding: 25px 15px; background: none; border-radius: 25px !important; border: none; border: 1px solid var(--grey); border-radius: 10px; color: var(--color-primary) !important; }
header .search-bar .search .form-group .search-results {background-color: var(--white); border-radius: 0 0 25px 25px;}
header .search-bar .search .form-group .search-results .search-result {padding: 15px 0;}
header .search-bar .search .form-group .search-results .search-result a {text-decoration: none !important;}
header .search-bar .search .form-group .search-results .search-result a figure {display: flex; margin: 0;}
header .search-bar .search .form-group .search-results .search-result a figure img {width: 25%; object-fit: contain;}
header .search-bar .search .form-group .search-results .search-result a figure figcaption {width: 75%; padding: 0 15px;}
header .search-bar .search .form-group .search-results .search-result a figure figcaption span {}
header .search-bar .search .form-group .search-results .search-result a figure figcaption span.producttitle {font-size: 1.125rem; transition: all 0.5s;}
header .search-bar .search .form-group .search-results .search-result a figure figcaption span.specs-title {color: var(--dark-grey); font-size: 0.785rem;}
header .search-bar .search .form-group .search-results .search-result a figure figcaption span.pricestyle {}
header .search-bar .search .form-group .search-results .search-total-results {display: flex; gap: 10px;}

/* Hover */
header .search-bar .search .form-group .search-results .search-result a:hover figure figcaption span.producttitle {color: var(--color-secondary)}

/* Open */
header .search-bar .search .form-group:has(.search-results.open) input {border-radius: 25px 25px 0 0 !important;}

/* ============================================
		SLIDER/BANNER
=============================================*/

.block.list.main-banner {margin-bottom: -150px;}
.block.list.main-banner .item {}
.block.list.main-banner .item figure {position: relative;}
.block.list.main-banner .item figure::before {content: ''; position: absolute; inset: 10% 0 0 50%; width: 400px; height: 18vw; background-image: url('/template/images/kubus-outline.svg'); background-size: contain; background-repeat: no-repeat; filter: var(--filter-white); opacity: 0.5;}
.block.list.main-banner .item figure::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--color-primary); opacity: 0.5; z-index: 1;}
.block.list.main-banner .item figure figcaption {position: absolute; inset: 20% 0 0 0; width: 100%; z-index: 2;}
.block.list.main-banner .item figure figcaption hgroup {}
.block.list.main-banner .item figure figcaption hgroup p {}
.block.list.main-banner .item figure figcaption hgroup h1 {font-size: 5.625rem; text-transform: uppercase; max-width: 775px; line-height: 5rem; color: var(--white);}
.block.list.main-banner .item figure img {height: auto;}

/* ============================================
		CONTENT
=============================================*/

.breadcrumbs {}
.breadcrumbs ul {}
.breadcrumbs ul li {}
.breadcrumbs ul li a {text-decoration: none;}

.container-fluid.page-content:has(.cubes) {position: relative; overflow-x: hidden;}
.container-fluid.page-content > .row {margin-bottom: 90px;}
.container-fluid.page-content > .row:nth-last-child(1) {margin-bottom: 0px;}

.container-fluid.page-content section.bg-color {margin: 0 -15px;}

.container-fluid.page-content > .row:has(.block.list.main-banner) {margin-bottom: 0;}

.container-fluid.page-content > .row.cubes {position: relative;}
.container-fluid.page-content > .row.cubes::before {content: ''; position: absolute; top: 0; right: 50px;  width: 185px; height: 225px; background-image: url('/template/images/kubus-los.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.2; rotate: -20deg;}
.container-fluid.page-content > .row.cubes::after {content: ''; position: absolute; bottom: -170px; right: -50px;  width: 275px; height: 330px; background-image: url('/template/images/kubus-los.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.2; rotate: 20deg;}

.block.list.cards {gap: 30px 0;}
.block.list.cards .item { padding: 40px 24px; height: 100%; background-color: var(--bg-color); border-radius: 15px; transition: all 0.5s;}
.block.list.cards .item figure {text-align: center;}
.block.list.cards .item figure img {object-fit: contain; filter: var(--filter-secondary);}
.block.list.cards .item figure figcaption {margin-top: 15px;}
.block.list.cards .item figure figcaption h3 { text-transform: uppercase; color: var(--color-primary); font-size: 1rem; font-weight: 700;}
.block.list.cards .item .text {text-align: center; color: var(--color-primary); font-weight: 400; }
.block.list.cards .item .text p {margin: 0;}

.block.list.cards .item:hover {transform: translateY(-6px);}

.block.list.video {position: relative;}
.block.list.video .item {}
.block.list.video .item a {}
.block.list.video .item a figure {position: relative; margin: 0; border-radius: 15px; overflow: hidden;}
.block.list.video .item a figure::before {content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background-color: var(--color-primary); opacity: 0.4; z-index: 1; }
.block.list.video .item a figure img {width: 100%; height: auto;}
.block.list.video .item a figure figcaption { padding: 40px 70px; position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; z-index: 2;}
.block.list.video .item a figure figcaption h2 {color: var(--white); max-width: 450px; text-align: end;}
.block.list.video .item a figure figcaption .play {padding: 2px 30px; display: flex; align-items: center;}
.block.list.video .item a figure figcaption .play::after {content: '\f144'; font-weight: 300; font-size: 2rem; transform: none !important;}

.swiper:has(.image-slider) { border-radius: 15px; overflow: hidden;}
.block.list.image-slider { margin: 0;}
.block.list.image-slider .item {padding: 0;}
.block.list.image-slider .item a {}
.block.list.image-slider .item a figure {margin: 0;}
.block.list.image-slider .item a figure img {height: auto; width: 100%;}

.swiper-button-prev.img-nav {left: 25px;}
.swiper-button-next.img-nav {right: 25px;}

.block.form form .form-group:has(.g-recaptcha) {display: flex;}
.block.form form .form-group:has(.g-recaptcha) div[class*="col"] { padding: 0; display: flex; justify-content: end;}

.block.form form .form-group .required {}
.block.form form .form-group .required:after {content: '*'; display: inline;}
.block.form form .form-group input[data-validation="[NOTEMPTY]"] {}
.block.form form .form-group:has(.btn) {width: 100%; text-align: end; margin: 0;}
.block.form form .form-group:has(.btn) > div {width: 100%; max-width: 100%; flex: 1 1 100%; padding: 0;}
.block.form form .form-group:has(.btn) > div .btn {background-color: var(--color-secondary); color: var(--white);}

/* .form-control-error-list {margin-top: 0;} */

/* Contact */
.block.html.contact {}
.block.html.contact address {}
.block.html.contact address a { position: relative; padding-left: 24px; display: block; color: var(--color-tertiary);}
.block.html.contact address a::before {content: ''; font-family: var(--font-awesome); color: var(--color-secondary); font-weight: 700; margin-right: 15px; position: absolute; left: 0;}
.block.html.contact address a {display: block; text-decoration: none; margin-bottom: 12px;}
.block.html.contact address a.location {}
.block.html.contact address a.location::before {content: '\f3c5';}
.block.html.contact address a[href*='mailto:'] {}
.block.html.contact address a[href*='mailto:']::before {content: '\f0e0';}
.block.html.contact address a[href*='tel:'] {}
.block.html.contact address a[href*='tel:']::before {content: '\f879';}

.block.html.contact address .coc::before {content: '\f0b1'; font-family: var(--font-awesome); color: var(--color-secondary); font-weight: 700; margin-right: 15px;}
.block.html.contact address .coc {display: block; color: var(--color-tertiary);}
.block.html.contact address .coc i {color: var(--color-secondary);}

.block.html.map {border-radius: 15px; overflow: hidden;} 
.block.html.map iframe {}

/* ============================================
		FOOTER & ENDPAGE
=============================================*/

footer {}
footer h2 {margin-bottom: 15px;}
footer a {transition: all 0.5s; text-decoration: none;}
footer a:hover {text-decoration: none; color: var(--color-secondary) !important;}
footer .subfoot {position: relative; overflow: hidden;}
footer .subfoot::after {content: ''; position: absolute; top: 0; right: -25px; width: 250px; height: 100%; background-image: url('/template/images/kubus-los.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.2; rotate: -10deg;}
footer .subfoot .location {}
footer .subfoot .location address {}
footer .subfoot .location address a { color: var(--color-tertiary);}
footer .subfoot .contact {}
footer .subfoot .contact address {}
footer .subfoot .contact address a {display: block; color: var(--color-tertiary);}
footer .subfoot .contact address a::before {content: ''; font-family: var(--font-awesome); color: var(--color-secondary); font-weight: 700; margin-right: 15px;}

footer .subfoot .contact address a[href*='mailto:'] {}
footer .subfoot .contact address a[href*='mailto:']::before {content: '\f0e0';}
footer .subfoot .contact address a[href*='tel:'] {}
footer .subfoot .contact address a[href*='tel:']::before {content: '\f879';}

footer .subfoot .payment-methods {background-color: var(--bg-color); width: fit-content; padding: 0 24px; border-radius: 35px;}
footer .subfoot .payment-methods img {object-fit: contain;}

footer .foot { font-size: 0.875rem; font-weight: 400;}

footer .foot .lr-logo {position: relative;}
footer .foot .lr-logo img {transition: all 0.5s;}
footer .foot .lr-logo img.basic {opacity: 1;}
footer .foot .lr-logo img.hover {position: absolute; left: 0; z-index: 2; opacity: 0; }
footer .foot .lr-logo:hover img.basic {opacity: 0;}
footer .foot .lr-logo:hover img.hover {opacity: 1;}

/* ============================================
		MOBIEL
=============================================*/

@media only screen and (max-width: 1699px) {

    /* SLIDER/BANNER */
    .block.list.main-banner {margin-bottom: -75px;}
    .block.list.main-banner .item figure::before {width: 300px; height: 400px; inset: 10% 0 0 55%; }

    /* Content */
    .container-fluid.page-content .row.cubes::before {width: 150px; right: 20px;}
    .container-fluid.page-content .row.cubes::after {width: 220px; right: -35px; bottom: -100px;}

    /* Footer */
    footer .subfoot::after {width: 200px;}

} 

/* --------------------------------------- */
@media only screen and (max-width: 1499px) {

    /* Algemene elementen */
    /* .slick-slider .slick-arrow.slick-prev {left: 0px;}
    .slick-slider .slick-arrow.slick-next {right: 0px;} */

    /* Topbar */
    .container-fluid.topbar * {font-size: 0.875rem !important;}
    .container-fluid.topbar .top-left .top-el .usp-list ul {gap: 0 30px;}
    .container-fluid.topbar .top-right .top-el .top-menu ul {gap: 0 30px;}

    /* Navigatyie */
    .container-fluid.navigatie .mainmenu #navbarNav .nav {gap: 0 30px;}
    .search-bar .form-group::after {right: 15px;}

    /* SLIDER/BANNER */
    .block.list.main-banner .item figure::before {width: 250px; height: 300px; inset: 10% 0 0 42%; }
    .block.list.main-banner .item figure figcaption hgroup p {font-size: 1.8rem; margin: 0;}
    .block.list.main-banner .item figure figcaption hgroup h1 {font-size: 4rem; line-height: 4rem;}

    /* Content */
    .container-fluid.page-content .row.cubes::before {right: -20px;}
    .container-fluid.page-content .row.cubes::after {right: -80px;}

    /* Footer */
    footer .subfoot::after {width: 175px;}
}

/* --------------------------------------- */
@media only screen and (max-width: 1399px) {
    
    /* SLIDER/BANNER */
    .block.list.main-banner .item figure::before { inset: 5% 0 0 50%; }

    /* Content */
    .container-fluid.page-content > .row.cubes::before {top: 75px; right: -20px; width: 100px;}
    .container-fluid.page-content .row.cubes::after {right: -20px; bottom: 100px; width: 175px;}
    
    /* Footer */
    footer .subfoot::after {top: 60px; width: 125px;}

}

/* --------------------------------------- */
@media only screen and (max-width: 1199px) {

    /* Topbar */
    .container-fluid.topbar .top-right .top-el .top-menu {display: none;}

    /* Navigatie */
    .container-fluid.navigatie .mainmenu {justify-content: flex-end;}
    header .header-icons .user-icon, 
    header .header-icons .cartmenu {width: 100%;}

    /* Banner/Slider */
    .block.list.main-banner .item figure::before {width: 200px; height: 240px; inset: 10% 0 0 60%;}

    /* Mobiel menu */
    .modal.fixed-left {}
    .modal.fixed-left .menu-content {}
    .modal.fixed-left .menu-content nav {}
    .modal.fixed-left .menu-content nav ul {margin: 0; padding: 0;}
    .modal.fixed-left .menu-content nav ul .item { padding: 15px; font-weight: 500; flex-grow: 1; text-decoration: none; color: var(--color-primary) !important; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between;}
    .modal.fixed-left .menu-content nav ul .item a {color: var(--color-primary) !important; text-decoration: none !important;}
}

/* --------------------------------------- */
@media only screen and (max-width: 991px) {

    h1 {font-size: 3rem !important; line-height: 2.5rem !important;}
    h2 {}
    h3 {}

    /* Algemene styling */
    .container.container-small {max-width: var(--container-width);}

    /* .block.content p:nth-child(1) {text-align: center;} */

    /* Topbar */
    .container-fluid.topbar .top-left {padding: 0;}
    .container-fluid.topbar .top-left .top-el .usp-list ul {justify-content: flex-start;}
    .container-fluid.topbar .top-left .top-el .usp-list ul li { font-size: 0.75rem !important; }
    .container-fluid.topbar .top-left .top-el .usp-list ul {flex-wrap: wrap;}

    /* Navigatie   */
    .container-fluid.navigatie .mainmenu {justify-content: center;}
    .container-fluid.navigatie .mainmenu .navbar-toggler { }

    /* Slider/Banner */
    .block.list.main-banner {margin-bottom: 50px;}
    .block.list.main-banner .item figure::before {width: 200px; height: 90%; inset: 5% 0 0 50%;}
    .block.list.main-banner .item figure figcaption {height: 100%; display: flex; flex-direction: column; justify-content: center; inset: 0;}
    .block.list.main-banner .item figure figcaption hgroup h1 {max-width: 380px;}

    /* Content */
    .container-fluid.page-content > .row {margin-bottom: 50px;}

    .category-list.main {padding: 0; gap: 30px 0; justify-content: center;}
    .category-list.main .category-big {max-width: 50%; flex: 0 0 50%; padding: 0 15px;}
    
    .block.list.cards { max-width: 350px; margin: auto;}
    
    .container-fluid.page-content > .row.cubes::before {top: 375px; z-index: -1;}
    .container-fluid.page-content .row.cubes::after {right: -20px; z-index: -1;}
    
    .block.list.video .item a figure figcaption {padding: 20px;}

    
    /* Footer */
    footer .foot {padding: 15px 0;}
    footer .subfoot::after {top: 200px;}
    footer .foot .footer-part { margin: 6px 0; text-align: center; justify-content: center !important;}
    
}

/* --------------------------------------- */
@media only screen and (max-width: 767px) {
    
    /* Navigatie */
    header .search-bar .search {margin-top: 15px;}
    header .search-bar .search .form-group input.form-control::placeholder {font-size: 0.75rem;}
    
    /* Banner/Slider */
    .block.list.main-banner .item figure::before {inset: 5% 0 0 60%;}
    .block.list.main-banner .item figure img {min-height: 250px; object-fit: cover;}
    
    /* Content */
    .category-list.main .category-big {max-width: 100%; flex: 0 0 100%; padding: 0 15px;}
    
    .block.list.video .item a figure figcaption h2 {max-width: 60%;}

}

/* --------------------------------------- */
@media only screen and (max-width: 575px) {

    h1 {font-size: 2rem !important; line-height: 1.8rem !important;}
    h2 {}
    h3 {}

    /* Topbar */
    .container-fluid.topbar .top-left .top-el .usp-list ul {padding: 0 15px;}

    /* Navigatie */

    /* Swiper */
    .swiper {margin-left: 15px; margin-right: 15px;}
    .swiper-button-prev {left: 25px;}
    .swiper-button-next {right: 25px;}

    /* Banner/Slider */
    .block.list.main-banner .item figure figcaption hgroup p {font-size: 1.125rem;}

    /* Footer */
    footer .subfoot::after {right: -60px;}
    footer .subfoot .payment-methods {width: 100%; text-align: center;}
}

/* --------------------------------------- */
@media only screen and (max-width: 479px) {

    .btn {font-size: 1rem;}

    /* Content */
    .container-fluid.page-content > .row.cubes::before {top: -40px;}
    .container-fluid.page-content > .row.cubes::after {bottom: -150px;}

    .block.list.video .item a figure img {min-height: 215px; object-fit: cover;}
    .block.list.video .item a figure figcaption {justify-content: center;}
    .block.list.video .item a figure figcaption h2 { text-align: center; max-width: 100%; margin-bottom: 15px;}
    .block.list.video .item a figure figcaption .btn {margin: 0 auto;}

    .block.list.image-slider .slick-arrow.slick-prev {left: 15px;}
    .block.list.image-slider .slick-arrow.slick-next {right: 15px;}

    /* Footer */
    footer .subfoot::after {right: -80px;}
    footer .subfoot .row > div:has(.location) {width: 100%; max-width: 100%; flex: 0 0 100%;}
    footer .subfoot .row > div:has(.contact) {width: 100%; max-width: 100%; flex: 0 0 100%;}
}

@media only screen and (min-width:1399px) {

    .order-xxl-1 {order: 1;}
    .order-xxl-2 {order: 2;}
    .order-xxl-3 {order: 3;}
    .order-xxl-4 {order: 4;}
    .order-xxl-5 {order: 5;}
    .order-xxl-6 {order: 6;}

    .col-xxl-1 { -ms-flex: 0 0 8.33%; flex: 0 0 8.33%; max-width: 8.33%; }
    .col-xxl-2 { -ms-flex: 0 0 16.67%; flex: 0 0 16.67%; max-width: 16.67%; }
    .col-xxl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
    .col-xxl-4 { -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; }
    .col-xxl-5 { -ms-flex: 0 0 41.67%; flex: 0 0 41.67%; max-width: 41.67%; }
    .col-xxl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
    .col-xxl-7 { -ms-flex: 0 0 58.33%; flex: 0 0 58.33%; max-width: 58.33%; }
    .col-xxl-8 { -ms-flex: 0 0 66.67%; flex: 0 0 66.67%; max-width: 66.67%; }
    .col-xxl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
    .col-xxl-10 { -ms-flex: 0 0 83.33%; flex: 0 0 83.33%; max-width: 83.33%; }
    .col-xxl-11 { -ms-flex: 0 0 91.67%; flex: 0 0 91.67%; max-width: 91.67%; }
    .col-xxl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

}