@import 'fonts/fatfrank.css';

@font-face {
    font-family: 'Helvetica Now';
    src: url('fonts/helveticanow-webfont.woff2') format('woff2'),
         url('fonts/helveticanow-webfont.woff') format('woff');
}

:root {
    --bs-font-sans-serif: 'Helvetica Now', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --blue-color: #273445;
    --orange-color: #DE683C;
    --light-gray-color: #F9F9FA;
    --grey-color: #D4D6DA;
    --product-border-color: #F4F5F6;
    --blue-tint-color: #EAEEF4;
}

#offerteformulier {
    scroll-margin-top: 2rem;
}

.btn-primary {
  --bs-btn-color: var(--orange-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--orange-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--orange-color);
  --bs-btn-hover-border-color: var(--orange-color);
  --bs-btn-focus-shadow-rgb: var(--orange-color)
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--orange-color);
  --bs-btn-active-border-color: var(--orange-color);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--orange-color);
  --bs-btn-border-color: var(--orange-color);
  --bs-btn-hover-color: var(--orange-color);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--orange-color);
  --bs-btn-focus-shadow-rgb: var(--orange-color);
  --bs-btn-active-color: var(--orange-color);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--orange-color);
}

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

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

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

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

.bg-orange .btn-secondary {
    --bs-btn-color: var(--orange-color);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--orange-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: #fff;
}

.bg-orange .btn-primary, .bg-blue .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}

.bg-white{
    background-color: #ffffff;
}

.orange{
    color: var(--orange-color);
}

.blue {
    color: var(--blue-color) !important;
}

.white {
    color: #ffffff;
}

.grey{
    color: var(--grey-color);
}

.light-grey{
    color: var(--light-grey-color);
}

:not(.bg-orange) .lead p {
    color: var(--orange-color);
}

.btn {
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    border-radius: 50px 50px 50px 50px;
    min-width: 21rem;
    /* max-width: 25rem; */
    padding-top: 10px;
    padding-bottom: 10px;
    border-width: 2px;
    transition: 500ms background-color, 500ms color;
    font-family: 'Helvetica', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}

footer ul li,
nav ul li {
    list-style-image: unset;
}

nav ul a, .nav-link{
    color: white;
    font-weight: 400;
    font-size: 1.625rem;
    margin-left: 30px;
    font-family: 'fatfrank', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.dropdown-item {
    font-size: 1.25rem;
}

nav ul a:hover, .nav-link {
    color: var(--orange-color) !important;
}

nav .dropdown-toggle {
    color: white !important;
}

nav .dropdown-toggle:hover {
    color: var(--orange-color) !important;
}

nav .dropdown-menu {
    position: absolute;
    left: 50% !important;
    transform: translate(-50%, 0);
    min-width: auto;
}

h1 {
    font-size: 4rem;
    line-height: 4.5rem;
    text-transform: uppercase;
    overflow-wrap: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media (max-width: 1000px) {
    h1  {
        font-size: 2.5rem;
        line-height: 2.25rem;

    }
    h2 {
        font-size: 1.3rem;
        line-height: 1.3rem;
    }

}

h2 {
    font-size: 2rem;
    line-height: 2rem;
    color: var(--orange-color);
        overflow-wrap: break-word;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-family: 'fatfrank', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

p,
li {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.3rem;
}

ul li {
    list-style-image: url("/templates/assets/icons/egg-li.svg");
}

.product-description p:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.product-border {
    border-top: 2px solid var(--product-border-color);
}

.product-border[style="position: absolute; left: 0px; top: 0px;"] {
    border-top: none;
}

.product:first-of-type {
    border-top: none;
}

section.bg-orange h2 {
    color: #fff;
}

section:not(.bg-white) {
    color: #fff;
}

section:not(.bg-blue, .bg-orange){
    color: var(--blue-color);
}

iframe {
    width: 100%;
    height: 300px;
}

.required {
  position: relative;
}

.required input:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  height: 25px;
  font-size: 25px;
  left: 10px;
  margin: auto;
  color: #ccc;
}

.placeholder span {
  color: red;
}

.border-blue {
    border-top: 2px solid var(--blue-color);
}

@media (min-width: 992px){
    .border-lg-blue {
        border-top: 2px solid var(--blue-color);
    }

    nav .dropdown-menu {
        margin-right: 7px;
        left: auto !important;
        transform: none;
    }
    
    .product-img {
        width: auto !important;
    }
    
    iframe {
        height: 200px;
    }
}



.border-orange {
    border-top: 2px solid var(--orange-color);
}

.border-white {
    border-top: 2px solid #ffffff;
}

.hidden {
    display: none;
}

.nav-btn {
    font-size: 1.2rem;
    min-width: 100px;
    padding: 5px 0px;
    font-family: 'Helvetica', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.nav-btn.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-border-color: #fff;
}

.fslightbox-toolbar-button.fslightbox-flex-centered:first-of-type {
    display: none;
}

.nav-btn:hover {
    background-color: var(--blue-color) !important;
    color: var(--orange-color) !important;
}

@media  (max-width: 992px){
    .btn {
        min-width: unset;
    }
    
    .language-selector-lg {
        position: absolute;
        top: 0px;
        right: 0px;
        display: none;
    }
    
    .language-selector-sm {
        position: relative !important;
        display: unset !important;
}
}

.language-selector-sm {
        position: absolute;
        top: 0px;
        right: 0px;
        display: none;
}

.product {
    min-height: 800px;
}

.btn-text {
    z-index: 10;
}

.product-img {
    width: 100%;
}

.animated {
    justify-content: center;
    position:relative;
    display:inline-flex;
    overflow: hidden;
    z-index: 1;
}

#form-amount, #form-amount-copy {
    min-width: 150px;
}

a.btn, button.btn {
    font-weight: bold;
}

/* .white-btn {
    outline:solid #ffffff 2px;
    color: #ffffff;
}

.orange-btn {
    outline:solid #DE683C 2px;
    color: #DE683C;
}

.blue-btn {
    outline:solid #273445 2px;
    color: #273445;
}

.orange-fill {
    outline: solid #DE683C 2px;
    background: #DE683C;
    color: #fff;
}

.white-fill {
    outline:solid #ffffff 2px;
    background: #ffffff;
}

.blue-fill {
    outline:solid #273445 2px;
    background: #273445;
}


.white-btn:hover {
    animation: texttransformblue 2s forwards;
    background-color: #ffffff;
    color: var(--blue-color);
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.orange-btn:hover {
    animation: texttransformblue 2s forwards !important;
    background-color: var(--orange-color);
    color: #ffffff;
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.blue-btn:hover {
    animation: texttransformorange 2s forwards;
    background-color: var(--blue-color);
    color: #ffffff;
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.orange-fill:hover {
    animation: texttransformwhite 2s forwards;
    background-color: transparent;
    color: var(--orange-color) !important;
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.white-fill:hover {
    animation: texttransformblue 2s forwards;
    background-color: transparent;
    color: #ffffff;
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.blue-fill:hover {
    animation: texttransformwhite 2s forwards;
    background-color: transparent;
    color: var(--blue-color);
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
} */

.form-check-input {
    width: 1.3em;
    height: 1.3em;
}

.flag-dropdown {
    top: unset !important;   
}
.fslightbox-open body {
    margin-right: 0 !important;
}

.form-check-input:checked[type=radio], .form-check-input:focus {
    background: none;
    border-color: #fff;
    background-color: var(--blue-color);
    box-shadow: none;
    outline: 2px solid #D4D6DA;
}

.animated:before{
    content: '';
    left:0;
    top: calc(50% - 10px);
    width:20px;
    height:20px;
    position:absolute;
    display:block;
    border-radius: 50%;
    left: -20px;
    z-index: -1;
}

.animated:after{
    content: '';
    right:0;
    top: calc(50% - 10px);
    width:20px;
    height:20px;
    position:absolute;
    display:block;
    position:absoulte;
    border-radius: 50%;
    right: -20px;
    z-index: -1;
}

.white-btn:before, .white-btn:after {
    background: white;
}

.blue-btn:before, .blue-btn:after {
    background: var(--blue-color);
}

.orange-btn:before, .orange-btn:after {
    background: #DE683C;
}

/*a:hover {*/
/*    color: inherit !important;*/
/*}*/

/*.animated a:hover:before{*/
/*    animation: mymoveleft 1.5s forwards;*/
/*    left:calc(50% - 10px);*/
/*}*/

/*.animated a:hover:after{*/
/*    animation: mymoveright 1.5s forwards;*/
/*    right:calc(50% - 10px);*/
/*}*/

@keyframes mymoveleft {
    0%{
        left:0;
        width:20px;
        height:20px;
        top: calc(50% - 10px);
    }
    30%{
        left: calc(50% - 10px);
        width:20px;
        height:20px;
        top: calc(50% - 10px);
    }
    100%{
        left: 0;
        width: 1600px;
        height:300px;
        top: calc(50% - 150px);
        border-radius: 0;
    }
}



@keyframes mymoveright {
    0%{
        right:0;
        width:20px;
        height:20px;
        top: calc(50% - 10px);
    }
    30%{
        right: calc(50% - 10px);
        width:20px;
        height:20px;
        top: calc(50% - 10px);
    }
    100%{
        right: 0;
        width: 1600px;
        height:300px;
        top: calc(50% - 150px);
        border-radius: 0;
    }
}

@keyframes texttransformwhite {
    0%{
        /*     color: blue; */
    }
    30%{
        color: #273445;
    }
    100%{
        color: #273445;
    }
}

@keyframes texttransformblue {
    0%{
        /*     color: blue; */
    }
    30%{
        color: #273445;
    }
    100%{
        color: #273445
    }
}

@keyframes texttransformorange {
    0%{
        /*     color: blue; */
    }
    30%{
        color: #DE683C;
    }
    100%{
        color: #DE683C;
    }
}

@media (min-width: 992px){
    .bottom {
        position: absolute;
        bottom: 0px;
    }

}

.dropdown-toggle nav {
    display: inline;
    border: none;
    background-color: transparent;
}

.nav-link:focus, .nav-link:hover {
    color: white;
}

textarea {
    resize: none;
}

a {
    text-decoration: none;
}

.link-orange  {
    color: var(--orange-color);
    text-decoration: underline;
}

.brown-background {
    background: rgba(222, 104, 60, 0.03);
    border-radius: 6px;
}

footer a {
    font-size: 1.25rem;
    color: #ffffff;
    font-family: 'fatfrank', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

footer li {
    margin-bottom: 10px;
}

footer a:hover {
    color: #000000;
}

section.bg-white p {
    color: var(--blue-color);
}

p {
    color: #ffffff;
}

.footer-text {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #D4D6DA;
    display: inline-block;
}

@media (max-width: 991px) {
    .hidden-sm{
        visibility: hidden;
        position: absolute;
        z-index: 12;
        top: 0;
        left: 0;
    }
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.navbar .navbar-brand img {
    width: 100px;
}

.navbar .nav-item a.active, .navbar .nav-link.active {
    color: var(--orange-color) !important;
}

.header {
    height: 100vh;
}

.header .header-title {
    margin-top: 35vh;
}



.header .cartons {
    height: 110%;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: end;
    top: 200px;
}

.nav-image {
    margin-bottom: 3px;
}

.form-control:focus, .form-select:focus {
    border-color: rgba(222, 104, 60, .5);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(222, 104, 60, .25);
}

.navbar-toggler {
    border-color: #ffffff;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

button:focus:not(:focus-visible) {
    outline: 1px;
}

section:nth-of-type(1) {
    padding-top: 10rem;
}

section:not(.bg-orange) p a {
    text-decoration: underline;
    color: var(--orange-color);
    text-decoration-color: var(--orange-color);
}

p a {
    text-decoration: underline;
    color: var(--white-color);
    text-decoration-color: var(--white-color);
}

section:not(.bg-orange) p a:hover {
    color: var(--orange-color);
}

p a:hover {
    color: #d7d7d7;
}


.fslightbox-open {
    overflow: auto !important;
}

.fslightbox-container {
    display: none;
}

@media (min-width: 992px) {
    .fslightbox-open {
        overflow: hidden;
    }
    .fslightbox-container {
        display: block;
    }
    .header .cartons {
        height: 100%;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: end;
        top: 500px;
    }
    .navbar .navbar-brand img {
        width: 100%;
    }
    table {
        font-size: 1.6rem !important;
    }
    table:not(.table) td, table:not(.table) th {
        padding: 30px;
        width: 200px;
        height: 100px;
    }
    .product {
        min-height: 600px;
        width: 100%;
    }
    .carousel-cell{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-item {
        display: inline;
    }
    .btn-dropdown {
        visibility: hidden;
        position: absolute;
        z-index: 12;
        top: 0;
        left: 0;
    }
    section:nth-of-type(1) {
        padding-top: 14rem;
    }
    .hidden-lg{
        visibility: hidden;
        position: absolute;
        z-index: 12;
        top: 0;
        left: 0;
    }

    .navbar {
        position: absolute;
    }
}

@media (max-width: 991px) {
    .navbar {
        background-color: var(--blue-color);
    }

    .nav-item {
        margin-bottom: 1rem;
    }

    .nav-item button {
        padding: 0;
    }

    .btn-not-dropdown {
        visibility: hidden;
        position: absolute;
        z-index: 12;
        top: 0;
        left: 0;
    }
    .btn-select {
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

.product-filters button {
    outline:solid var(--blue-color) 2px;
    color: var(--blue-color);
    min-width: unset !important;
    margin: 5px 10px;
    padding: 2px 9px;
    overflow-wrap: break-word;
}

.product-filters button:hover {
    background-color: var(--orange-color);
    color: white;
    outline-color: var(--orange-color);
}

.product-filters .active{
    color: var(--orange-color);
    background-color: var(--blue-color);
    outline:solid var(--orange-color) 2px;
    min-width: 100px !important;
    border: 0;
}

.product-filter:focus:not(:focus-visible) {
    outline: auto !important;
}

.cross {
    padding-left: 10px;
    vertical-align: text-bottom;
}

.product-details .form-label {
    font-weight: 900;
    color: var(--blue-color);
    font-size: 1.3rem;
    font-family: 'fatfrank', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}
  
.btn-select, .btn-select:active, .btn-select:focus, .form-control, .form-select, .form-check-input {
    border: 2px solid #d4d6da;
    border-radius: 5px;
}

.btn-select, .btn-select:active, .btn-select:focus {
    align-items: center;
    min-height: 30px;
    padding: 5px 15px !important;
}

.btn-inactive{
    background-color: transparent;
    color: #273445;
}

.btn-active{
    background-color: var(--blue-color);
    color: #ffff;
}

table {
    font-weight: 400;
    line-height: 35px;
    font-size: 1rem;
}

table td {
    border: 1px solid;
}

table:not(.table) td, table:not(.table) th {
    padding: 10px;
    width: 200px;
    height: 100px
}

table:not(.table) tr:first-child td {
    position: relative;
    z-index: 1;
    font-weight: 900;
}

table:not(.table) td::before{
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    z-index: -1;
    box-shadow: inset 0 0 500px rgba(0,0,0,20%);
}

input::placeholder {
    color: rgba(0, 0, 0, 0.5);
    opacity: 0.5;
}

.carousel-cell{
    width: 100%;
}

.carousel .flickity-viewport {
    height: 100%;
}

/* big buttons, no circle */
.flickity-prev-next-button {
width: 28px !important;
height: 28px !important;
background-color: var(--blue-color) !important;
}
/* arrow color */
.flickity-prev-next-button .arrow {
fill: white;
background-color: var(--blue-color);

}
.flickity-prev-next-button.no-svg {
color: white;
background-color: var(--blue-color);
}
.flickity-prev-next-button:hover {
background: var(--blue-color);
}
/* hide disabled button */
.flickity-prev-next-button:disabled {
display: none;
}

.overview {
  border-radius: 18px;
}

.overview table, .overview td, .overview th {
  border: none;
  font-family: 'fatfrank', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  color: var(--blue-color) !important;
  padding-left: 1rem;
  /*border-radius: 6px;*/
}

.overview td:nth-of-type(2n) {
  text-align-last: end;
  padding-right: 1rem;
  padding-left: 0;
}

.overview tr:nth-of-type(2n) {
  box-shadow: inset 0 0 0 9999px rgba(39, 52, 69, 0.05);;
}

.fw {
  max-width: unset;
  width: 100%;
}

.active-color {
  outline: auto;
}

.small {
  font-size: 1.25rem;
}

.rounded-6 {
  border-radius: 6px;
}

.color-btn:focus:not(:focus-visible) {
     outline: 2px auto;
}

.color-btn {
    cursor: zoom-in !important;
}

.product-category {
    position: relative;
    padding: 10px 15px 0 15px;
    transition: 300ms;
}

.product-category:hover {
    background-color: rgba(255, 255, 255, .2);
    border-radius: 6px;
}

.category-item {
    position: relative;
    z-index: 2;
}

.footer-white .row-border, .footer-blue .row-border {
    border-top: 2px solid var(--orange-color);
}

footer .nav-item a {
    margin: 0 !important;
}

.footer-orange .row-border {
    border-top: 2px solid #fff;
}

.footer-white {
    background-color: #fff;
}

.footer-orange {
    background-color: var(--orange-color);
}

.footer-blue {
    background-color: var(--blue-color);
}

.footer-white a:not(.footer-text) {
    color: var(--blue-color);
}

.footer-white a:hover {
    color: var(--orange-color) !important;
}

.footer-orange h2 {
    color: var(--blue-color);
}

.footer-orange a:hover {
    color: var(--blue-color) !important;
}

.footer-blue a:hover {
    color: var(--orange-color) !important;
}

.footer-disclaimers a:hover {
    color: #adacac !important;
}

#product-size label {
    cursor: pointer;
}

.product-size {
    flex-flow: wrap;
}

.dropdown-menu .dropdown-item:active {
    background-color: #fff;
}


.dropdown-filters {
    /*font-size: 20px;*/
    /*line-height: 24px;*/
    /*text-transform: uppercase;*/
    /*border-radius: 50px 50px 50px 50px;*/
    /*min-width: 21rem;*/
    /*max-width: 25rem;*/
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    outline:solid var(--blue-color) 2px !important;
    color: var(--blue-color);
    min-width: 100px !important;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.filter-toggle{
    outline: solid var(--blue-color) 2px !important;
}

.btn-link {
    min-width: unset;
    max-height: unset;
    padding: unset;
    border: 0;
    font-weight: 400;
    font-size: 1.625rem;
    margin-bottom: 6px;
    text-transform: none;
    font-family: 'fatfrank', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.colors {
    z-index: 5;
    position: relative;
}

.color-img {
    max-height: 396px;
}

.carton-homepage {
    position: absolute;
    transform-origin: bottom;
}

.carton-homepage:nth-of-type(1){
    /*   margin-left: -125px;
      transform: rotate(-30deg); */
    animation: move1 1s forwards;
}
.carton-homepage:nth-of-type(2){
    /*   margin-left: -100px;
      transform: rotate(-10deg); */
    animation: move2 1s forwards;
}
.carton-homepage:nth-of-type(3){
    animation: move3 1s forwards;
}
.carton-homepage:nth-of-type(4){
    /*   margin-left: 100px;
      transform: rotate(10deg); */
    animation: move4 1s forwards;
}
.carton-homepage:nth-of-type(5){
    /*   margin-left: 125px;
      transform: rotate(30deg); */
    animation: move5 1s forwards;
}

@keyframes move1 {
    0% {
        margin-left: 0;
        transform: 0;
    }
    100% {
        margin-left: -110px;
        transform: rotate(-30deg);
    }
}

@keyframes move2 {
    0% {
        margin-left: 0;
        transform: 0;
    }
    100% {
        margin-left: -100px;
        transform: rotate(-10deg);
    }
}

@keyframes move3 {
    0% {
        margin-left: 0;
        transform: 0;
    }
    100% {
        margin-left: -1px;
        transform: rotate(-2deg);
    }
}

@keyframes move4 {
    0% {
        margin-left: 0;
        transform: 0;
    }
    100% {
        margin-left: 100px;
        transform: rotate(10deg);
    }
}

@keyframes move5 {
    0% {
        margin-left: 0;
        transform: 0;
    }
    100% {
        margin-left: 110px;
        transform: rotate(30deg);
    }
}

.ham4 .top {
  stroke-dasharray: 40 121;
}

.ham4 .bottom {
  stroke-dasharray: 40 121;
}

.ham4.active .top {
  stroke-dashoffset: -68px;
}

.ham4.active .bottom {
  stroke-dashoffset: -68px;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hamRotate.active {
  transform: rotate(45deg);
}

.hamRotate180.active {
  transform: rotate(180deg);
}

.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: var(--orange-color);
  stroke-width: 5.5;
  stroke-linecap: round;
}

@media (max-height: 900px) and (min-width: 768px) {
    .header .cartons {
        top: 600px;
    }
}

/* Cookie consent */
@keyframes CookiepreferenceWidgetFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#CookiepreferenceWidget {
    word-wrap: break-word;
    left: 10px;
    bottom: 10px;
    animation: CookiepreferenceWidgetFadeIn .3s ease-in;
    background-color: #141414;
    border-radius: 40px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5;
    min-height: 48px;
    min-width: 48px;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: all .2s ease-in;
    word-break: break-word;
    z-index: 2147483631
}

#CookiepreferenceWidget,
#CookiepreferenceWidget * {
    background: transparent;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: .1px;
    margin: 0;
    outline: 0;
    padding: 0
}

#CookiepreferenceWidget * {
    font-family: inherit
}

#CookiepreferenceWidget button,
#CookiepreferenceWidget li,
#CookiepreferenceWidget strong,
#CookiepreferenceWidget svg,
#CookiepreferenceWidget ul {
    border: none;
    cursor: inherit;
    font-weight: inherit;
    line-height: 1.5
}

#CookiepreferenceWidget {
    opacity: 1;
    pointer-events: all;
    transition: opacity .3s ease-in, border-radius .2s ease-in
}

#CookiepreferenceWidget:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .3)
}

#CookiepreferenceWidget .CookiepreferenceWidget-logo {
    cursor: pointer
}

#CookiepreferenceWidget .CookiepreferenceWidget-logo {
    display: block;
    transition: opacity .3s, transform .3s
}

#CookiepreferenceWidget .CookiepreferenceWidget-logo svg {
    display: block;
    height: 44px;
    transition: all .3s;
    width: 44px
}

#CookiepreferenceWidget button.CookiepreferenceWidget-logo svg {
    height: 48px;
    transition: all 0s ease;
    transition-delay: .2s;
    width: 48px
}

#CookiepreferenceWidget .CookiepreferenceWidget-logo svg circle {
    fill: #141414
}

#CookiepreferenceWidget {
    display: flex;
    max-height: 0;
    max-width: 0;
    overflow: hidden;
    transition: all .2s ease-in
}


#consentModal {
    display: none;
    position: relative;
    z-index: 1000000000;
    --dark1: var(--orange-color) !important;
    --dark2: #d7d7d7;
    --green1: white;
}

#consentModal .cm-btn.cm-btn-success {
    background-color: var(--blue-color);
    color: white;
}

#consentModal .cn-body p {
    line-height: 1;
}

#consentModal .cookie-notice small.small {
    font-family: var(--bs-font-sans-serif);
    font-weight: 100;
    font-size: 1rem;
}

#consentModal .cn-learn-more,
#consentModal .cm-btn.cn-decline {
    background-color: transparent;
    color: var(--dark2);
}

#consentModal .cookie-modal .cm-header p {
    font-size: 1.25rem;
    line-height: 1.4;
}

#consentModal .cookie-modal .cm-list-title {
    font-size: 1.2rem;
    margin-bottom: 0;
}

#consentModal .cookie-modal .purposes {
    display: none;
}

#consentModal .cookie-modal .cm-list-description {
    font-size: 0.9rem;
    padding: 0;
}

#consentModal .cookie-modal .cm-list-label {
    margin-bottom: 0;
}

#consentModal .cookie-modal .cm-body .cm-list-description span {
    line-height: 1.2;
    color: white;
}

#consentModal .cookie-modal .cm-body .cm-list-description span > span {
    line-height: 1.5;
}

#consentModal .cookie-modal .cm-body .cm-list-input.required:checked+.cm-list-label .slider {
    background-color: #BF9044;
}

.klaro .cookie-modal .cm-list-input:checked+.cm-list-label .slider, .klaro .context-notice .cm-list-input:checked+.cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked+.cm-list-label .slider {
    background-color: var(--blue-color) !important;
}

#consentModal .cookie-notice:not(.cookie-modal-notice) .cn-body p.cn-changes { 
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.3;
}

#consentModal .cn-body p {
    font-family: 'fatfrank', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

#consentModal .klaro .cookie-modal a, #consentModal .klaro .context-notice a, #consentModal .klaro .cookie-notice a {
    text-decoration: underline;
}
.productminimum{
    font-size: 14px;
    line-height: 1.3rem !important;
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip {
    visibility: hidden;
    background-color: var(--orange-color);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px; 
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    white-space: nowrap; 
}

.tooltip-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
    
.tooltip-container.amount {
    position: relative;
    display: inline-block;
}

@media(min-width: 768px){
    .tooltip {
        position: absolute;
        bottom: 125%; /* Adjust based on where you want the tooltip */
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
    }
}

.tooltip.show {
    display: block;
}

.tooltip.show .orange{
    cursor:pointer;
}

.btn.btn-tooltip{
    min-width: auto;
    margin-bottom: 8px;
    padding: 0;
}

.btn.btn-tooltip:active{
border: none;
    
}

/* PROMISES */
.promises {
    padding: .5rem 0;
    background-color: var(--orange-color);
}

@media (min-width: 992px) {
    .promises {
        padding: .5rem 3rem;
    }
}

.promises ul {
    margin: 0;
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.promises-slider {
    color: white;
    font-weight: bold;
}

@media (min-width: 992px) {
    .promises ul {
        gap: 2.5rem;
    }
}

.promises ul li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: bold;
}

@media (min-width: 992px) {
    .promises ul li:nth-child(n+4) {
        display: none !important;
    }
}

@media (min-width: 1400px) {
    .promises ul li:nth-child(4) {
        display: flex !important;
    }
}

@media (min-width: 1600px) {
    .promises ul li:nth-child(n+4) {
        display: flex !important;
    }
}

.icon.icon-small {
    width: 20px;
    height: 20px;
    background-size: 20px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
}

.icon.icon-check {
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.2071 0.792893C18.5976 1.18342 18.5976 1.81658 18.2071 2.20711L7.20711 13.2071C6.81658 13.5976 6.18342 13.5976 5.79289 13.2071L0.792893 8.20711C0.402369 7.81658 0.402369 7.18342 0.792893 6.79289C1.18342 6.40237 1.81658 6.40237 2.20711 6.79289L6.5 11.0858L16.7929 0.792893C17.1834 0.402369 17.8166 0.402369 18.2071 0.792893Z' fill='%23273445'/%3E%3C/svg%3E%0A");
}

/* BLOGPOST */
.blog-overview .col {
    margin-top: 1.5rem;
}

.blog-overview .card {
    box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.05);
    height: 100%;
    --bs-card-border-radius: 1.125rem;
    --bs-card-border-color: transparant;
    transition: transform .2s;
}

.blog-overview .card:hover {
    transform: scale(1.015);
}

.blog-overview .card .card-img-top {
    padding: 1rem;
    border-radius: 2.125rem;
    height: 250px;
    object-fit: cover;
}

.blog-overview .card .card-img-top {
    padding: 1rem;
    border-radius: 2.125rem;
    height: 250px;
    object-fit: cover;
}

.blog-overview .card .card-title {
    --bs-card-title-color: var(--orange-color);
    font-size: 1.4rem;
    padding: .5rem 0;
}

.blog-overview .card .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-overview .card .card-text p {
    font-size: 1.2rem;
    line-height: 1.4;
}

/* FAQ */

.faq-wrapper .accordion {
    --bs-accordion-bg: var(--blue-tint-color);
    --bs-accordion-btn-bg: var(--blue-tint-color);
    --bs-accordion-active-bg: var(--blue-tint-color);
    --bs-accordion-border-width: 0px;
    --bs-accordion-color: var(--blue-color);
    --bs-accordion-btn-color: var(--orange-color);
    --bs-accordion-active-color: var(--orange-color);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2221%22%20viewBox%3D%220%200%2020%2021%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%2013.6759V8.09389C0%207.86949%200.0841515%207.68248%200.252454%207.53288C0.420757%207.38328%200.607761%207.30848%200.813464%207.30848H6.36746V1.72643C6.36746%201.52072%206.45161%201.33372%206.61992%201.16542C6.78822%200.997115%206.99392%200.912964%207.23703%200.912964H12.8191C13.0435%200.912964%2013.2305%200.997115%2013.3801%201.16542C13.5297%201.33372%2013.6045%201.52072%2013.6045%201.72643V7.30848H19.1304C19.3548%207.30848%2019.5512%207.38328%2019.7195%207.53288C19.9065%207.68248%2020%207.86949%2020%208.09389V13.6759C20%2013.919%2019.9065%2014.1247%2019.7195%2014.293C19.5512%2014.4614%2019.3548%2014.5455%2019.1304%2014.5455H13.6045V20.0434C13.6045%2020.2678%2013.5297%2020.4735%2013.3801%2020.6605C13.2305%2020.8288%2013.0435%2020.913%2012.8191%2020.913H7.23703C6.99392%2020.913%206.78822%2020.8288%206.61992%2020.6605C6.45161%2020.4735%206.36746%2020.2678%206.36746%2020.0434V14.5455H0.813464C0.607761%2014.5455%200.420757%2014.4614%200.252454%2014.293C0.0841515%2014.1247%200%2013.919%200%2013.6759Z%22%20fill%3D%22%23273445%22/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%229%22%20viewBox%3D%220%200%2020%209%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%201.68715V7.26919C0%207.5123%200.0841515%207.718%200.252454%207.88631C0.420757%208.05461%200.607761%208.13876%200.813464%208.13876H6.36746H13.6045H19.1304C19.3548%208.13876%2019.5512%208.05461%2019.7195%207.88631C19.9065%207.718%2020%207.5123%2020%207.26919V1.68715C20%201.46274%2019.9065%201.27574%2019.7195%201.12614C19.5512%200.976535%2019.3548%200.901733%2019.1304%200.901733H13.6045H6.36746H0.813464C0.607761%200.901733%200.420757%200.976535%200.252454%201.12614C0.0841515%201.27574%200%201.46274%200%201.68715Z%22%20fill%3D%22%23273445%22/%3E%3C/svg%3E");
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: unset;
}

.faq-wrapper .accordion .accordion-item {
    margin-bottom: 1rem;
    border-radius: 6px !important;
    overflow: hidden;
}

.faq-wrapper .accordion .accordion-item .accordion-header button {
    font-size: 1.25rem;
}

.faq-wrapper .contact-card p {
    font-size: 1.25rem;
}

.faq-wrapper .label {
    padding: 0.25rem 2rem;
    color: var(--blue-color);
    background: transparent;
    border: 2px solid var(--blue-color);
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.faq-wrapper .label.active {
    background-color: var(--blue-color);
}

.faq-wrapper .label p, .faq-wrapper .label.active .x-symbol p {
    text-transform: uppercase;
    font-size: 1.25rem;
    margin-bottom: 0;
    font-family: 'fatfrank', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-weight: 900;
}

.faq-wrapper .label.active p {
    color: var(--orange-color);
}

.faq-wrapper .label.active .x-symbol {
    color: var(--orange-color);
    background-color: #fff;
    
    width: 25px;
    border-radius: 99px;
    aspect-ratio: 1/1;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 768px) {
    .promises.new ul {
        display: unset;
    }
}