:root {
    --btn-border-radius: var(--border-radius-lg);
    --usp-icon-color: var(--success-600);
  	--heading-letter-spacing: -.01em;
  
    --border-radius: var(--border-radius-md);
    --highlight-day-offer-background-color: unset;
  
    /*--container-width-in-rem: 100;*/

    --main-50: #FDF5EC;
    --main-100: #FDEAD1;
    --main-200: #F9D0A1;
    --main-300: #F7B067;
    --main-400: #F48C2A;
    --main-500: #F26B00;
    --main-600: #E15600;
    --main-700: #BA3F00;
    --main-800: #943308;
    --main-900: #772C0C;

    --h1-font-size-mobile: 1.3125rem; /*21px*/
    --h2-font-size-mobile: 1.3125rem; /*21px*/
    --h3-font-size-mobile: 1.125rem; /*18px*/
    --h4-font-size-mobile: 1rem; /*16px*/
    --h5-font-size-mobile: .9375rem; /*15px*/
    --h6-font-size-mobile: .875rem; /*14px*/
}

.productinfo_tab_description > .content-header {
	display: none;
}

.blog-card-image {
    --blog-card-image-aspect-ratio: 9/6;
}


/* FTD */
.products_subimage1 {
    width: 100%;
}




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

.site-nav {
    --site-nav-item-padding-x: .675rem;
}
.site-nav-item-link--level-0 {
    font-size: var(--text-size-sm);
} 
}


/* de images worden dynamisch ingeladen met JS in "Website uiterlijk > Boxen > 'Terugbelverzoek box' bij Footer" */
/*
.hero-highlight {
 	--background-image-desktop: url(https://www.bikefeeling.nl/images/hero-background-image-desktop.jpg); 
    --background-image-mobile: url(https://www.bikefeeling.nl/images/hero-background-image-tablet.jpg); 
}
*/



/*FTD*/
.swiper-slide.homepage-categories-slide {
    margin-bottom: 1rem;
}



/* FTD */
.prose :where(ul>li):not(:where([class~=not-prose] *)) {
    padding-left: .5em;
    position: relative;
    margin-left: 1rem;
}



.lead {
	font-size: var(--text-size-md) !important;
}



/* ftd: wrm kan dit niet gewoon met alleen de var op de niet hover selector? Gaat er dan wat mis in de cascade ofzo. */
.categories_row,
.products_gallery_row {
	border-color: transparent;
}
.categories_row:hover,
.products_gallery_row:hover {
	border-color: var(--border-color);
}

.card:not(:hover) {
	--card-shadow: 0;
}

.usp-list ul {
    list-style: none;
    margin-left: 0 !important;
    margin-bottom: 1rem;
}

.usp-list i.icon {
    color: var(--success-600);
    margin-right: .5rem;
}


.usp-bar {
    padding: .5rem 10px .75rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

}

.usp-bar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: var(--grey-100);
}

.usp-bar::-webkit-scrollbar-thumb {
    background-color: var(--grey-300);
    border-radius: 10px;
}

@media only screen and (min-width: 963px) {
    .usp-bar {
        max-width: fit-content;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.usp-bar__item {
    scroll-snap-align: center;
    min-width: fit-content;
    /*font-size: var(--text-size-sm); */
    padding-right: 10px;
}

.usp-bar__item:not(:last-of-type) {
    margin-right: min(5vw, 1.25rem);
}

.usp__icon {
    margin-right: .5rem;
}

.usp__icon,
.usp__text {
    display: inline;
}

.usp-bar.usp-bar--top {
    padding-top: 0;
    padding-bottom: 0;
}


.usp-bar .fa-icon.fa-icon-check:before {
    --st-icon-size: var(--text-size-xs);
}

.usp-bar .icon-checkmark, .usp-bar .fa-icon.fa-icon-check {
    border: 1px solid var(--success-200);
    padding: 4px;
    border-radius: 100px;
    font-size: var(--text-size-xs);
    color: var(--success-600);
    background-color: var(--success-100);
    width: 1.7em;
    height: 1.7em;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}

ul.usp_horizontal {
    flex-direction: row;
}

ul.usp_horizontal li + li{
    margin-left: 2.5rem;
}

@media screen and (max-width: 768px) {
    ul.usp_horizontal {
        margin-left: 0 !important;
    }

    ul.usp_horizontal li + li{
        margin-left: 0;
    }
}

.topmenu .usp-bar {
    padding: 0;
}


.usp-bar.usp-bar--row {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0;
    max-width: unset;
    overflow-x: unset;
    flex-wrap: wrap;
}

.usp-bar.usp-bar--row .usp-bar__item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}








.shadow {box-shadow: var(--shadow-sm)}


.topmenu {
    border-top: 2px solid var(--main-500);
}

.site-footer {
    --footer-font-size: inherit;
}
/*
.BOX_HEADING_terugbelverzoek_box .box_top {
    display: none;
}
*/
.site-footer .box_content li a {
    padding-block: .25rem;
    display: inline-flex;
}




.btn i + span,
.btn span + i {
    margin-left: .5em;
}

.callback-request-form {
    padding-top: 1.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;    
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    background-color: #fff;
    min-height: 340px;
}


.st-loader {
  --st-loader-size: 50px;
  --st-loader-border-width: 8px;
  border: var(--st-loader-border-width) solid var(--grey-300);
  border-top: var(--st-loader-border-width) solid var(--grey-700);
  border-radius: 50%;
  width: var(--st-loader-size);
  height: var(--st-loader-size);
  margin: auto;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.st-loading-content:has(iframe) .st-loader {
    display:none;
}






a.link__animation {
    --animated-link-color: var(--main-500);
    display: inline-flex;
    max-width: fit-content;
    position: relative;
    color: var(--animated-link-color) !important;
    font-weight: bold;
    padding: .25rem 0;
    align-items: center;
}

a.link__animation span {
    font-size: var(--text-size-lg);
}

a.link__animation span,
a.link__animation i {
    color: var(--animated-link-color) !important;
}

a.link__animation:before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--animated-link-color);
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

a.link__animation:hover:before {
    visibility: visible;
    width: 100%;
}

a.link__animation:hover,
a.link__animation:focus {
    color: var(--animated-link-color) !important;
}
/*
.link__animation i.icon {
    padding-left: .25rem;
}
*/

.highlighted-section {    
    position: relative;
    padding-top: var(--section-space-y);
    padding-bottom: var(--section-space-y);
}

.highlighted-section::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: calc(-50vw + 50%);
    bottom: 0;
    right: 0;
    width: 100vw;
}



/* .st_homepage section {
    margin-top: var(--section-space-y);
    margin-bottom: var(--section-space-y);
} */
/*
section.section-mt-sm {
    margin-top: calc(var(--section-space-y) / 2);
}

section.section-mb-sm {
    margin-bottom: calc(var(--section-space-y) / 2);
}
*/

.caption,
.img-caption {
    font-size: var(--text-size-sm);
    color: var(--grey-600);
    margin-top: .5rem;
}

.img-caption {
    margin-top: .5rem;
}

.hero-img {
    /* max-height: 340px; */
    width: auto;
    float: right;
}


@media screen and (max-width: 991px) {
    .bike-card-section .card {
        width: min(82vw,300px);
        scroll-snap-align: center;
    }

    .row.row-overflow {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;  
    }
}

/* FTD mb0 */
.bike-card-section .card-title > * {
    margin-bottom: 0;
    text-align: center;
}

/*============================== TESTIMONIALS ==============================*/
@media screen and (min-width: 991px) {
    .testimonials-section {
        position: relative;
        width: 100vw;
        left: calc(-50vw + 50%);
    }

    .testimonials {
        --container-overshoot: calc( ((100vw - min(90%, var(--max-container-width))) / 2) + calc(var(--bs-gutter-x) * .5) );
    }
    
    .testimonials .col:first-of-type {
        padding-left: var(--container-overshoot);
    }
    
    .testimonials .col:last-of-type {
        padding-right: var(--container-overshoot);
    }

    .fw-child-container-width {
        max-width: min(90%, var(--max-container-width)) !important;
        margin-left: auto;
        margin-right: auto;
    }
  
  	.fw-child-container-width > * {
    	margin-inline: calc(var(--bs-gutter-x)* .5);
	}
}



.highlighted-section--testimonials header *,
.highlighted-section--testimonials p {
    color: #fff;
}

.highlighted-section--testimonials::before {
    background-color: var(--grey-800);
    background-image: url('/images/home/background-graphic.webp');
    background-repeat: no-repeat;
    background-size: cover;
}


.testimonial-card {    
    background-color: rgb(24 24 27 / 85%);
    flex: 1;
    width: min(82vw, 488px);    
}

.testimonial-body {
    padding: 1.5rem;
    flex: 1 1 auto;
    color: #fff;
}

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

.highlighted-section--testimonials .btn-more-guestbook {
    margin-top: 1rem;
    color: var(--grey-100);
}


.testimonials .row {
    overflow-x: scroll;
    flex-wrap: nowrap;
    height: 100%;
    position: relative;
    --gradient-scrollbar: linear-gradient(90deg, 
    rgba(255,255,255,0) 16%, 
    #fff 26%, 
    #fff 73%, 
    rgba(255,255,255,0) 83%);  
}


.testimonials .row::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0);
}

.testimonials .row::-webkit-scrollbar {
	width: 10px;
    height: 20px;
	background-color: rgba(0,0,0,.2);
}

.testimonials .row::-webkit-scrollbar-thumb {
	background-image: var(--gradient-scrollbar);
}



@media (min-width: 992px) {
    .widget-texteditor-77e55351-8dca-416e-9433-a0a35ca8a64e {
        margin-left: calc(100% / 12);
    }
}



/* cta-block */

.cta-block {
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-xl);
    border-radius: var(--border-radius-3xl);
    background-color: #fff;
}


@media screen and (min-width: 768px) {
.cta-block {
    padding: 3rem;
    box-shadow: var(--shadow-xl);
    border-radius: var(--border-radius-4xl);
    background-color: #fff;
}
}

.widget-texteditor-f9e80215-9bc5-429a-bc71-347f7d997fd0 p,
.widget-texteditor-3de04c84-2c3e-4f2e-a726-3eb0ae279a23 p {
    margin-bottom: 1em;
}



/*============================== HOMEPAGE ==============================*/


.widget-image-card--dark .card-img-overlay {
    background-image: linear-gradient(0deg, rgba(24, 24, 27, .9), transparent 20%) !important;
}
.widget-image-card:hover {
	box-shadow: var(--shadow-lg) !important;
}

/* FTD: zonder maxwidth480px is het blurry, dus mogelijkheid toevoegen om een poster te plaatsen. */
.st-youtube-iframe-container {
	max-width: unset !important;
}

/****** HERO ******/
section.hero-highlight:not(.hero-highlight-categorielisting) {
 	margin-top: -10px; 
}

.hero-highlight .lead {
 	margin-bottom: 1.5rem; 
}

.hero-highlight {
 	position: relative; 
  	padding-block: 1rem;
}

.hero-highlight::before {
  	content: "";
    position: absolute;
    top: 0;
    left: calc(-50vw + 50%);
    bottom: 0;
    right: 0;
    width: 100vw;
}

.hero-highlight.hero-highlight-categorielisting .col-12 > div {
 	padding-left: 1rem; 
}

@media screen and (max-width: 575px) {
 	  .hero-highlight::before {
          background: #fafafa !important;
      }
  
  	  .hero-image-mobile {
      	  margin-top: 1rem;  
  	  }
}

@media screen and (min-width: 963px) {
	.hero-highlight.hero-highlight-categorielisting::before {
    	left: 0;
    	width: 100%;
	}
  
  	.hero-highlight.hero-highlight-categorielisting::after {
    	right: 0;
    	width: 100%;
      	background-size: cover;
    	/*background-position: center right;*/
	}
}

.hero-highlight .widget-container {
    position: relative;
}

@media screen and (max-width: 991px) {
 	 .hero-highlight::after {
        background-image: var(--background-image-mobile);
       	height: 70%;
       	bottom: 0;
       	background-size: cover;
        background-position: 80%;
    }
  
    .hero-highlight h1,
    .hero-highlight p {
        text-shadow: 0 0 2px white; 
    }
}

@media screen and (min-width: 576px) {
  	.hero-highlight::after {
    	position: absolute;
    	content: "";
    	background-repeat: no-repeat;
    	z-index: -1;
    	right: calc(-50vw + 50%);
    	width: 100vw;
	}  
  	.hero-image-mobile {
    	display: none;  
  	}
}

@media screen and (min-width: 576px) and (max-width: 991px){
	.hero-highlight::before {
        background: linear-gradient(to bottom,#fafafa 30%,rgba(255,255,255,.5) 100%) !important;
    }
}

@media screen and (min-width: 992px) {
     .hero-highlight::before {
        background: linear-gradient(to right, #FAFAFA 50%, transparent 100%);
     }
  
 	 .hero-highlight::after {
        background-image: var(--background-image-desktop);
       	height: 100%;
       	top: 0;
        background-position: 65%;
    }
}

@media screen and (min-width: 992px) and (max-width: 1499px) {
	.hero-highlight::after {
        background-size: cover;
    }
}

@media screen and (min-width: 1500px) {
	.hero-highlight::after {
        background-position: right;
    }
  
  	.hero-highlight.hero-highlight-categorielisting::after {
        background-position: bottom 20% right 20%;
    }
}

@media screen and (min-width: 2500px) {
 	 .hero-highlight::before {
        background: linear-gradient(to right,#FAFAFA 65%,transparent 100%);
    }
}


/*============================== PRODUCT PAGE ==============================*/
.mfp-arrow-left{
	margin-left: 2% !important;
}
.mfp-arrow-right{
	margin-right: 2% !important;
}

/*============================== EIGEN CONTENT ==============================*/
.embeddedContent {
    aspect-ratio: 16 / 9;
}

.embeddedContent iframe {
 width:100%;
 height: 100%;
}


img.img-full-100, img.img-center-75, img.img-left-50, img.img-right-50, img.img-center-100 {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.img-left-50 {
    clear: left;
    margin-right: 2%;
}

img.img-left-50, img.img-right-50 {
    width: 48% !important;
    float: left;
    margin-bottom: 10px;
    margin-top: 10px;
}
@media screen and (max-width: 599px){
  img.img-left-50, img.img-right-50 {
  	width: 100% !important;
    max-width:444px;
    float: unset;
    margin:10px auto;
  }
}

/*.table > :not(caption) > * > * {
	padding-inline: 0;
}*/

.custom-table {
  border-collapse: collapse;
}
.custom-table td + td,
.custom-table th + th {
  border-left: 1px solid var(--grey-300); /* alleen cellen met een voorganger */
}
.custom-table > :not(:first-child) {
  border-top: none;
}



.contact-iframe-map {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}