/*
==  THEME DETAILS  ============================================================
    Theme Name: TechFabrique
	Theme URI: https://techfabrique.nl/
    Description: Stylesheet voor TechFabrique
    Version: 1.0
   	Author: Kracht Internet Marketing
	Author URI: https://www.krachinternetmarketing.nl

===============================================================================
*/

/*---------------------------------------------- 
	1.1 Basics
------------------------------------------------*/
	html {
  		font-size: 20px;
	}

	body {
   		font-family: 'Open Sans', sans-serif;
		font-size: 0.8rem;
	  	line-height: 1.6rem;
		font-weight: 400;
		color: #7A7A7A;
		background: #FFF; 
		-webkit-font-smoothing: antialiased;
  		-moz-osx-font-smoothing: grayscale;
	}
	
	a, a:hover, .btn, .btn:hover , .transition {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		text-decoration:none;	
	}
	
	p , figure , blockquote , ul {
		margin: 0 !important;
	}

	a {
		color: #00A7E1; 
	}

	a:hover {
		color: #7A7A7A;
	}

	button:focus ,
	:focus {
		outline: 0 !important;
	}
	
	h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
		font-family: 'Poppins', sans-serif;
		color: #00A7E1;
		font-weight: 700;
		line-height: 1.4;
		margin: 0;
		padding: 0;
	}

	h1, .h1 {
		font-size: 2.5rem;
	}

	h2, .h2 {
		font-size: 2rem;
	}

	h3, .h3 {
		font-size: 1.5rem;
	}
	
	h4, .h4 {
		font-size: 1.25rem;
	}

	h5, .h5 {
		font-size: 1rem;
	}

	.font-poppins {
		font-family: 'Poppins', sans-serif;
	}

	.font-bold {
		font-weight: 700;
	}
	
	.font-semi-bold {
		font-weight: 600;
	}

	.font-xxl {
		font-size: 3.5rem;
	}

	.box-shadow {
		-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.2);
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	}

	.border-round {
		overflow: hidden;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

	.bg-cover {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	@media all and (max-width: 1500px) {
    	html {
			font-size: 18px;
		}
	}

	@media all and (max-width: 1200px) {
    	html {
			font-size: 16px;
		}
	}

	@media all and (max-width: 550px) {
    	html {
			font-size: 15px;
		}
		.font-xxl {
			font-size: 2.5rem;
		}
	}

	@media (min-width: 1480px) {
		.container {
			max-width: 1440px;
		}	
	}

/* Buttons -------------------------------------- */
	.btn-primary, 
	.btn-primary:active ,
	.btn-primary:hover {
		background: #60269E;
    	color: #FFF;
    	border: none;
	}

	.btn-primary:hover::after {
		margin-left: 15px;
	}

	.btn {
		font-size: 0.8rem;
		line-height: 1;
		font-weight: 700;
		padding: 0.75rem 1.5rem;
		border-radius: 0;
		-webkit-clip-path: polygon(calc(0% + 0.75rem) 0, 100% 0, 100% calc(100% - 0.75rem), calc(100% - 0.75rem) 100%, 0 100%, 0 calc(0% + 0.75rem));
		clip-path: polygon(calc(0% + 0.75rem) 0, 100% 0, 100% calc(100% - 0.75rem), calc(100% - 0.75rem) 100%, 0 100%, 0 calc(0% + 0.75rem));
	}

	.btn::after {
		content: "";
		display: inline-block;
		position: relative;
		width: 5px;
		height: 5px;
		background-color: #FFF;
		z-index: 9;
		margin-left: 0.5rem;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
	}

    button:focus ,
	.btn:focus {
		outline: 0 !important;
		box-shadow: none !important;
	}

/*---------------------------------------------- 
	1.2 Content Block 
------------------------------------------------*/
	.content-block p + p ,
	.content-block p + h2 ,
	.content-block p + h3 ,
	.content-block p + h4 ,
	.content-block p + h5 ,
	.content-block h3 + ul ,
	.content-block h4 + ul ,
	.content-block ul + p ,
	.content-block ul + h3 {
		margin-top: 1.5rem !important;
	}

	.content-block h1 ,
	.content-block h2 {
		margin-bottom: 1rem;
	}

	.content-block h3 {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	.content-block h1::after ,
	.content-block h2::after ,
	.content-block h3::after {
		content: "";
		display: inline-block;
		position: relative;
		width: 0.5rem;
		height: 0.5rem;
		background-color: #60269E;
		z-index: 9;
		margin-left: 0.5rem;
	}

	.content-block ul {
		list-style: none;
	  	padding: 0;
	}
	
	.content-block li {
  		position: relative;
		padding-left: 25px;
	}

	.content-block ul li:before {
		font-family: "Font Awesome 6 Sharp";
		content: "\f0c8";
		font-size: 0.5rem;
		font-weight: 900;
		position: absolute;
    	left: 0;
		color: #013F52;
	}

	.content-block img.aligncenter {
		margin: 0 auto;
		 display: block;
	}

	.content-block .embed-responsive {
		margin: 2.5rem 0;
	}

/*---------------------------------------------- 
	1.3 Colors 
------------------------------------------------*/
	.bg-grey {
		background: #7A7A7A !important;
	}

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

	.bg-purple {
		background: #60269E !important;
	}

	.bg-light-purple {
		background: #FBF7FF !important;
	}

	.bg-dark-blue {
		background: #0B1D44 !important;
	}

	.bg-blue {
		background: #00A7E1 !important;
	}

	.bg-black {
		background: #000 !important;	
	}
	.text-grey {
		color: #7A7A7A !important;
	}

	.text-purple {
		color: #60269E !important;
	}

	.text-blue {
		color: #00A7E1 !important;
	}

	.text-black {
		color: #3A3A3A !important;
	}

/*---------------------------------------------- 
	1.4 Spacing 
------------------------------------------------*/
	.py-110 {
		padding: 5.5rem 0;
	}

	.pt-110 {
		padding-top: 5.5rem;
	}

	.pb-110 {
		padding-bottom: 5.5rem;
	}

/*---------------------------------------------- 
	1.5 Square Dot 
------------------------------------------------*/
	.square-dot::after {
		content: "";
		display: inline-block;
		position: relative;
		width: 0.5rem;
		height: 0.5rem;
		background-color: #60269E;
		z-index: 9;
		margin-left: 0.5rem;
	}

/*---------------------------------------------- 
	1.6 Label 
------------------------------------------------*/
	.label {
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.label span {
		padding: 0.25rem 1.5rem 0.25rem 0.5rem;
		-webkit-clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% calc(0% + 0.75rem), 100% 100%, 0 100%);
		clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% calc(0% + 0.75rem), 100% 100%, 0 100%);
	}

/*---------------------------------------------- 
	1.7 Back to top
------------------------------------------------*/
	.cd-top {
		display: inline-block;
	  	height: 3rem;
	  	width: 3rem;
	  	position: fixed;
	  	bottom: 20px;
	  	right: 20px;
	  	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	  	overflow: hidden;
	  	text-indent: 100%;
	  	white-space: nowrap;
	  	background: rgba(0, 167, 225, 0.9) url(../images/cd-top-arrow.svg) no-repeat center 50%;
	  	visibility: hidden;
	  	opacity: 0;
	  	z-index: 9;
		border-radius: 0;
	  	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	  	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	  	transition: opacity .3s 0s, visibility 0s .3s;
	}
	
	.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
	  -moz-transition: opacity .3s 0s, visibility 0s 0s;
	  transition: opacity .3s 0s, visibility 0s 0s;
	}
	
	.cd-top.cd-is-visible {
		visibility: visible;
	  	opacity: 1;
	}
	
	.cd-top.cd-fade-out {
		opacity: 0.7;
	}
	
	.no-touch .cd-top:hover {
	  opacity: 0.9;
	}

	@media all and (max-width: 767px) {
		.cd-top {
			bottom: 20px;
			right: 10px;
		}
	}

/*---------------------------------------------- 
	1.8 Whatsapp 
------------------------------------------------*/
	.whatsapp {
		position: fixed;
		z-index: 998;
		left: 20px;
		bottom: 20px;
		text-decoration: none !important;
	}	

	.whatsapp i {
		background: #05B23A;
		color: #FFF;
		display: block;
		text-align: center;
		height: 3rem;
		width: 3rem;
		font-size: 1.75rem;
		line-height: 3rem;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}

	.fade-in-bottom {
		-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
	   	animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
	}

	@-webkit-keyframes fade-in-bottom {
	  0% {
		-webkit-transform: translateY(50px);
				transform: translateY(50px);
		opacity: 0;
	  }
	  100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
		opacity: 1;
	  }
	}
	@keyframes fade-in-bottom {
	  0% {
		-webkit-transform: translateY(50px);
				transform: translateY(50px);
		opacity: 0;
	  }
	  100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
		opacity: 1;
	  }
	}


/*---------------------------------------------- 
	2.1 Header
------------------------------------------------*/
	img.logo {
		max-width: 225px;
		height: auto;
	}

	#header .account a {
		color: #60269E;
	}

	#header .cart a {
		color: #424242;
	}

	#header .cart i {
		margin-left: 0.5rem;
		color: #424242 !important;
	}

	#header .cart .cart-count {
		width: 0.8rem;
		height: 0.8rem;
		background: #3A3A3A;
		color: #FFF;
		display: inline-block;
		text-align: center;
		line-height: 0.8rem;
		font-size: 0.6rem;
		font-weight: 600;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		position: absolute;
		top: -7px;
		right: -7px;
	}

	#header ul li a:hover {
		color: #00A7E1 !important;
	}

/*---------------------------------------------- 
	2.2 Navigation 
------------------------------------------------*/
	ul.ubermenu-nav li a {
		font-weight: 700;
		line-height: 1;
		color: #FFF;
		background: none;
		display: inline-block;
		position: relative;
		font-size: 0.7rem;
	}

	ul.ubermenu-nav > li.ubermenu-item-level-0 > a {
		line-height: 70px;
		padding: 0 0.9rem;
		font-size: 0.68rem;
	}


	@media (min-width:992px) and (max-width:1400px) {
		nav#navigation .container {
			max-width: 100% !important;
		}

		.ubermenu {
		width: fit-content;
		margin: 0 auto;
	}
	}


	@media only screen and (max-width: 1200px) {
	ul.ubermenu-nav > li.ubermenu-item-level-0 > a {
		padding: 0 0.20rem;
		font-size: 0.72rem;
	}

		ul.ubermenu-nav > li.ubermenu-item-level-0:last-child > a {
		padding: 0 0 0 0.20rem;
	}

		.ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target>.ubermenu-sub-indicator {
		right: 12px;
		margin-top: -5px;
	}

		.ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target {
		padding-right: 22px;
	}
	}


	.ubermenu li.ubermenu-item-level-0:first-child a {
		padding-left: 0;
		padding-right: 0.25rem;
	}

	.ubermenu .ubermenu-item.ubermenu-item-level-0 a:hover {
		color: white;
	}

	.ubermenu .ubermenu-item.ubermenu-item-level-1 a:hover {
		color: #60269E;
	}

	ul.ubermenu-nav li + li {
		margin-left: 1rem;
	}

	.ubermenu.ubermenu-disable-submenu-scroll .ubermenu-item>.ubermenu-submenu.ubermenu-submenu-type-mega {
		padding: 15px;
	}

	.ubermenu .ubermenu-autocolumn, .ubermenu .ubermenu-submenu-type-stack {
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item.ubermenu-column-auto {
		padding: .8em 0;
	}

	.ubermenu .ubermenu-submenu .ubermenu-target {
		padding-top: 1em;
		padding-bottom: .8em;
	}

	.ubermenu-item>.ubermenu-submenu.ubermenu-submenu-type-mega {
		background: white;
		border-top: 2px solid #00a7e1;
		box-shadow: -30px 4px 10px -2px rgb(0 0 0 / 10%);
	}

	.ubermenu-submenu li a {
		color: #000;
	}

	.ubermenu .ubermenu-submenu .ubermenu-target {
		color: black;
		font-weight: bold;
	}

	.ubermenu .ubermenu-submenu li.ubermenu-current-menu-item > .ubermenu-target, .ubermenu .ubermenu-submenu .ubermenu-target:hover {
		color: #60269E;
	}

	.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target {
	color: black;
	font-weight: normal;
	}

	.ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target:hover {
		color: #60269E;
	}

	#navigation #hoofdmenu li a {
		font-size: 0.7rem;
		font-weight: 700;
		line-height: 1;
		color: #FFF;
		padding: 1rem 0;
		background: none;
		display: inline-block;
		position: relative;
	}

	#navigation #hoofdmenu li + li {
		margin-left: 1rem;
	}

/*---------------------------------------------- 
	2.4 Navigation Mobile
------------------------------------------------*/
	#navigation-mobile .cd-dropdown-trigger {
		display: inline-block;
    	position: relative;
    	padding: 0;
		font-size: 1rem;
		width: 2.25rem;
		height: 2.25rem;
		line-height: 2.25rem;
		background: #FFF;
		color: #31221B;	
    	border-radius: 0;
		text-align: center;
		margin: 0;
		z-index: 99;
	}

	#navigation-mobile .cd-dropdown-trigger i {
		margin: 0;	
	}
	
	#navigation-mobile .cd-dropdown-content a {
		font-size: 1rem;
		font-weight: 400;
		color: #60269E;
		text-align: left !important;
	}

	#navigation-mobile .current_page_item a {
		font-weight: 700;
	}

	#navigation-mobile .cd-dropdown {
		background: #F5F5F5 !important;
		z-index: 999;
	}
	
	#navigation-mobile .cd-dropdown-wrapper {
		height: auto;
		margin: 0 !important;
	}
	
	#navigation-mobile ul {
		padding-left: 0;
	}
	
	#navigation-mobile .cd-dropdown-content a, 
	#navigation-mobile .cd-dropdown-content ul a {
		border-top-width: 1px;
    	border-bottom-width: 0;
    	border-left-width: 0;
    	border-right-width: 0;
    	border-color: #FBF7FF;
    	border-style: solid;	
	}
	
	#navigation-mobile .cd-dropdown-content .go-back a {
		background: #FFF;
		color: #3A3A3A;
	}

	.go-back a::before, .go-back a::after {
		background: #FFF !important;	
	}
	
	#navigation-mobile .cd-secondary-dropdown > a,
	#navigation-mobile .cd-secondary-dropdown > .go-back a {
  		display: none !important;
		background: #FFF;
	}

	#navigation-mobile .has-children > a::before, 
	#navigation-mobile .has-children > a::after, 
	#navigation-mobile .go-back a::before, .go-back a::after ,
	.cd-dropdown .cd-close::after, 
	.cd-dropdown .cd-close::before {
		background: #00A7E1 !important;
	}

	#navigation-mobile .cd-secondary-dropdown > .go-back a + a {
		display: block !important;
	}

/*---------------------------------------------- 
	3.1 Hero Banner 
------------------------------------------------*/
	#banner-hero span strong {
		color: #00A7E1 !important;
	}

	#banner-hero i {
		font-size: 1.25rem;
		color: #FFD100 !important;
	}

	@media all and (max-width: 576px) {
		#banner-hero span {
			font-size: 1.25rem;
		}	
	}
	

/*---------------------------------------------- 
	3.2 Frontpage USP 
------------------------------------------------*/
	#frontpage-usp span {
		font-size: 0.75rem;
	}

/*---------------------------------------------- 
	3.3 Frontpage Blocks 
------------------------------------------------*/
	#frontpage-blocks .item .content {
		position: absolute;
		top: 1rem;
		left: 0.75rem;
		z-index: 9;
	}

	.content-knop {
    position: absolute;
    bottom: 2em;
    left: 0.75em;
    z-index: 9;
}

	#frontpage-blocks .item.small img {
		height: 12.5rem;	
	}

	#frontpage-blocks .item.medium img {
		max-height: 15rem;	
	}

	#frontpage-blocks .item.medium .content {
		width: 60%;
	}

	@media all and (max-width: 1200px) {
		#frontpage-blocks .item.small img {
			height: 10rem;	
		}
		#frontpage-blocks .item.medium img {
			max-height: 12.5rem;	
		}
		#frontpage-blocks .item.medium .content {
			width: 80%;
		}
	}

	@media all and (max-width: 767px) {
		#frontpage-blocks .item.medium img {
			max-height: 10rem;	
		}
	}

/*---------------------------------------------- 
	3.3 Banner Shop 
------------------------------------------------*/
	#banner-shop {
		height: 34rem;
	}

	#banner-shop .content-wrapper {
		padding: 1.5rem 2rem;
	}

	#banner-shop .content-wraper ul li {
		padding: 0.2rem 0;
	}

	#banner-shop .content-wrapper ul li i {
		color: #00A7E1;
		margin-right: 0.5rem;
	}

	#banner-shop .content ul li + li {
		border-top: 1px solid #DDD;
	}

/*---------------------------------------------- 
	3.4 Producten Carousel
------------------------------------------------*/
	.swiper-slide {
		opacity: 1;
		transition: 0.2s;
		flex-shrink: 0;
	}

	.swiper-slide:hover {
		opacity: 0.9;
		transition: 0.2s;
	}

	.productencarousel {
		position: relative;
	}

	.swiper-producten {
		margin: 20px -10px 0;
		padding: 10px;
	}

	.productwrap.d-flex {
		width: 100%;
		height: 100%;
	}

	.swiper-producten .swiper-slide {
		height: auto !important;
	}

	.swiper-producten .swiper-slide figure {
		height: 100% !important;
	}

	.swiper-button-next, .swiper-button-prev {
		width: 32px;
		height: 32px;
	}

	.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
		position: relative;
		top: 8px;
	}

	.swiper-button-next, .swiper-button-prev {
		width: 32px;
		height: 32px;
		background: #767676;
		border-radius: 16px;
		transition: 0.2s;
		opacity: 1;
	}

	@media only screen and (max-width: 767px) {
	.swiper-button-next, .swiper-button-prev { 
		display: none;
		}
	}


	.swiper-button-next:hover, .swiper-button-prev:hover {
		opacity: 0.9;
		transition: 0.2s;
	}

	.swiper-button-next:after, .swiper-button-prev:after {
		color: black;
		font-size: 16px;
	}

	.box-shadow-carousel {
		-webkit-box-shadow: 0px 0px 9px 0px rgb(0 0 0 / 7%);
		-moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.07);
		box-shadow: 0px 0px 9px 0px rgb(0 0 0 / 7%);
	}

	.productinformatie {
		padding: 6%;
	}

	.productinformatie h5 {
		min-height: 2.8rem;
	}

	.productknop {
		padding: 0 6% 6% 6%;
	}

	img.productfoto {
		object-fit: contain;
	}

	p.product-price {
		font-weight: bold;
		color: #555;
		font-size: 16px;
	}

	.swiper-button-prev, .swiper-rtl .swiper-button-next {
		left: -36px;
	}

	.swiper-button-next, .swiper-rtl .swiper-button-prev {
		right: -36px;
	}

/*---------------------------------------------- 
	4.1 Breadcrumb
------------------------------------------------*/
	#breadcrumb .woocommerce-breadcrumb {
		font-size: 0.7rem;
		color: #3A3A3A; 
		font-weight: 400;
		margin: 0;
	}

	#breadcrumb .woocommerce-breadcrumb a {
		color: #60269E;
	}
	
	#breadcrumb .woocommerce-breadcrumb span {
		color: #3A3A3A;
		padding: 0 0.3rem;
	}

/*---------------------------------------------- 
	4.2 Page Overzicht Categorie
------------------------------------------------*/	
	#overzicht-categorie .contact ul li i {
		font-size: 1.5rem;
		color: #00A7E1;
	}

	#overzicht-categorie .contact ul li a {
		text-decoration: underline;
	}

	#overzicht-categorie .contact ul li + li {
		margin-top: 0.75rem;
	}

	#overzicht-categorie .item figure {
		height: 7.5rem;
    	align-content: center;
		width: 100%;
	}

	#overzicht-categorie .item figure img {
    	margin: 0 auto;
    	width: 100%;
   		height: 100%;
    	object-fit: contain;
}

	#overzicht-categorie .item span {
		font-size: 0.9rem;
	}

	.woocommerce div.product p.price del, .woocommerce div.product span.price del {
		color: red;
		font-size: 50%;
		display: block;
		opacity: 0.8;
	}

	.woocommerce span.onsale {
		background: #00A7E1;
	}

	.woocommerce div.product span.onsale {
		left: 0;
		top: 80px;
	}


/*---------------------------------------------- 
	4.21 Woocommerce Bundel Styling
------------------------------------------------*/	
	form.cart.yith-wcpb-bundle-form {
		flex-wrap: wrap;
	}

/*---------------------------------------------- 
	4.3 Page Intro
------------------------------------------------*/	
	.page-intro {
		background-color: #F5F5F5;
		background-image: url(../images/intro-bg.svg);
		background-position: top left;
		background-repeat: no-repeat;
		background-size: 20% auto;
	}

	.page-intro .usp li {
		font-size: 0.75rem;
	}

	.page-intro .usp li i {
		color: #60269E;
		margin-right: 0.25rem;
	}

	.page-intro .usp .list-inline-item:not(:last-child) {
		margin-right: 0.75rem;
	}

	.page-intro .content-wrapper {
		padding: 2rem 2rem 0 2rem;
		position: relative;
		z-index: 9;
	}

	.page-intro .content-wrapper ul li i {
		font-size: 1.25rem;
		color: #60269E;
	}

	.page-intro .content-wrapper ul li + li {
		margin-top: 0.75rem;
	}

	.page-intro .content-wrapper img {
		max-width: 10rem;
	}

	@media (min-width: 1200px) {
		.page-intro::after {
			content: "";
			display: block;
			position: absolute;
			background: #FFF;
			height: 9rem;
			width: 100%;
			bottom: 0;
		}	
	}

	@media (min-width: 1500px) {
		.page-intro .content-wrapper .image {
			margin-top: 3rem !important;
		}	
	}

	@media all and (max-width: 1400px) {
		.page-intro::after {
			height: 6rem;	
		}
	}

	@media all and (max-width: 767px) {
		.page-intro .usp li {
			display: block;
			margin: 0;
		}	
		.page-intro .usp li + li {
			margin-top: 0.5rem;
		}
	}
	
/*---------------------------------------------- 
	4.4 Page Vacatures
------------------------------------------------*/	
	#vacatures-overzicht .item {
		background: #F2F5F7;
		padding: 1.25rem;
	}

	#vacatures-overzicht .item ul li i {
		color: #00A7E1;	
		margin-right: 0.25rem;
	}

/* Single -------------------------------------- */
	#page-content .functie-eisen li i {
		color: #00A7E1;	
	}

	#page-content .functie-eisen .list-inline-item:not(:last-child) {
		margin-right: 0.75rem;
	}

/*---------------------------------------------- 
	4.5 Page Modules
------------------------------------------------*/	
	#page-modules .module + .module {
		padding-top: 0;
	}

/*---------------------------------------------- 
	4.5 Page Contact
------------------------------------------------*/	
	#page-contact .content-wrapper {
		padding: 2.5rem 7.5rem 2.5rem 2.5rem;
	}

	#page-contact .social-media li a {
		color: #BDBDBD; 
	}

	#page-contact .social-media li a:hover {
		color: #7A7A7A; 
	}

	#page-contact .social-media .list-inline-item:not(:last-child) {
		margin-right: 0.75rem;
	}

	#page-contact .image {
		display: inline-block;
		position: absolute;
		right: 8rem;
		bottom: 0;
		opacity: 0.6;
	}

	#page-contact .contactgegevens {
		margin-top: 6.5rem !important;
	}

	#page-contact .contactgegevens li {
		line-height: 1.75rem;
	}

	#page-contact .contactgegevens li span {
		font-size: 1rem;
		width: 2rem;
	}

	#page-contact .maps {
		padding: 0.5rem;
		position: absolute;
		top: 7rem;
		right: 0;
		width: 29.5rem;
	}

	#page-contact .maps .acf-map {
		width: 100%;
		height: 10.5rem;
	}

	@media all and (max-width: 1500px) {
		#page-contact .image {
			right: 6rem;
		}
		#page-contact .image img {
			width: 80%;
		}	
	}

	@media all and (max-width: 1200px) {
		#page-contact .image {
			right: 3rem;
		}
	}

	@media all and (max-width: 992px) {
		#page-contact .maps {
			position: relative;
			top: inherit;
			margin-top: 2rem;
			width: 100%;
		}
	}

	@media all and (max-width: 767px) {
		#page-contact .content-wrapper {
			padding: 2.5rem 1.5rem;	
		}
	}

/*---------------------------------------------- 
	4.5 Page FAQ
------------------------------------------------*/
	#tabs-overzicht .sidebar {
		padding: 2rem 1.5rem;
	}

	#tabs-overzicht .sidebar ul li + li {
		margin-top: 0.5rem;
	}

	#tabs-overzicht .sidebar ul li i {
		margin-left: 0.5rem;
	}

	#tabs-overzicht .sidebar ul li a:hover {
		color: #00A7E1 !important;
	}

	#tabs-overzicht .sidebar ul li a:hover i {
		margin-left: 0.75rem;
	}

	#tabs-overzicht .sticky-top {
		z-index: 9;
		top: 11rem !important;
	}

	#tabs-overzicht .item {
		padding: 2rem 1.5rem;
	}

    #tabs-overzicht .item + .item {
        margin-top: 3rem;
    }

    #tabs-overzicht .item h4 {
		font-size: 1.25rem;
        margin-bottom: 1rem;
    }

	#tabs-overzicht .accordion-item ,
    #tabs-overzicht .accordion .accordion-button {
		border: none;
		border-radius: 0;
		box-shadow: none;
	}

	#tabs-overzicht .accordion-item {
		border: 1px solid #E7E7E7;
	}

	#tabs-overzicht .accordion .accordion-button {
		color: #000;
		background: none;
	}

	#tabs-overzicht .accordion .card .btn-tab {
		text-align: left;
		background: none;
		padding: 1rem 1.5rem;
		width: 100%;
        text-transform: inherit !important;
		border-radius: 0;
	}

    #tabs-overzicht .accordion .accordion-button span {
		font-size: 0.8rem;
		font-weight: 700;
		color: #3A3A3A;
		line-height: 1.5rem;
    }

	#tabs-overzicht .accordion .accordion-item .accordion-body {
        font-size: 0.8rem;
        background: #FFF;
		padding: 1.25rem;
		border-radius: 0;
	}

    @media all and (max-width: 992px) {
        #tabs-overzicht .accordion .card .btn-tab ,
        #tabs-overzicht .accordion .card .card-body {
            font-size: 1rem;   
        }
    }


/*---------------------------------------------- 
	4.6 WooCommerce VAT
------------------------------------------------*/
	#wcvat-toggle.on {
		background: #60269E !important;
	}

	#wcvat-toggle {
		padding: 5px 10px !important; 
		font-size: 0.75rem;
		color: #FFF !important;
	}

	@media all and (max-width: 992px) {
		#wcvat-toggle {
			font-size: 0.65rem;
			width: 100%;
			max-width: 100px;	
		}
	}

/*---------------------------------------------- 
	4.7 Yith plug-ins styling
------------------------------------------------*/
	.yith-wcwl-add-to-wishlist {
		display: flex;
		align-items: end;
		order: 7;
		margin-bottom: 10px;
	}

	.yith-ywraq-add-to-quote {
		display: flex;
		order: 8;
	}

	.yith-wcwl-add-button a {
		color: #00A7E1;
	}

/*---------------------------------------------- 
	5. Brands
------------------------------------------------*/	

	#brands .item {
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
	}

	#brands .item img {
		max-width: 5rem;
	}

	#brands .item:hover {
		filter: none;
	}

	@media (min-width: 992px) {
		#brands .item {
			width: 10% !important;
		}
	}

/*---------------------------------------------- 
	6.1 Footer
------------------------------------------------*/
	#footer {
		padding: 4rem 0 0 0;
		background: #0B1D44;
		background-image: url(../images/footer-bg.svg);
		background-position: top right;
		background-repeat: no-repeat;
		background-size: 10% auto;
	}

	#footer span.h1 strong {
		color: #00A7E1;
	}

	#footer .content-block {
		font-size: 0.7rem;
		line-height: 1.2rem;
	}

	#footer li ,
	#footer li a {
		font-size: 0.7rem;
		line-height: 1.5rem;
		color: #00A7E1;
		padding: 0;
	}

	#footer ul li a:hover {
		color: #FFF;
	}

	#footer .footer-menu li {
  		position: relative;
		padding-left: 1rem;
	}

	#footer .footer-menu li:before {
		font-family: "Font Awesome 6 Pro";
		content: "\f054";
		font-size: 0.6rem;
		font-weight: 900;
		position: absolute;
    	left: 0;
		color: #60269E;
	}

	#footer .contactgegevens li i {
		color: #60269E;
		margin-right: 0.75rem;
	}

	#footer .social-media li a {
		font-size: 1.1rem;
	}

	#footer .social-media .list-inline-item:not(:last-child) {
		margin-right: 1rem;
	}

	#footer .btn {
		color: #FFF;
	}

	@media (min-width: 992px) {
		#footer .content-block {
			max-width: 65%;
		}
	}

/*---------------------------------------------- 
	6.2 Footer Bottom
------------------------------------------------*/
	#footer-bottom {
		padding: 0.4rem 0;
	}
	
	#footer-bottom span {
		font-size: 0.6rem;
	}