@charset "utf-8";
/* CSS Document -  WEBSPICE - Sofie Vandenberghe -  www.webspice.be*/


@font-face {
	font-family: "Montserrat Light";
	src: url('fonts/Montserrat-Light.woff') format('woff'),
		 url('fonts/Montserrat-Light.ttf')  format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat Medium";
	src:url('fonts/Montserrat-Medium.woff') format('woff'),
		url('fonts/Montserrat-Medium.ttf')  format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Roboto Bold";
	src: url('fonts/Roboto-Bold.woff') format('woff'),
		url('fonts/Roboto-Bold.ttf')  format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Roboto Light";
	src: url('fonts/Roboto-Light.woff') format('woff'),
		url('fonts/Roboto-Light.ttf')  format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
html {
  scroll-behavior: smooth;
text-rendering: optimizeLegibility !important;
-moz-osx-font-smoothing:grayscale!important;
-webkit-font-smoothing:antialiased!important
}
body{
	font-family:"Montserrat Light",sans-serif;
		color:#000000;
		font-size: 16px;
}
h1 {font-size:74px; font-family:"Roboto Light"; color:#312d60; margin: 0 auto 50px; line-height:87px;}
h2 {font-size:74px; font-family:"Roboto Light"; color:#312d60; margin: 0 auto 50px; line-height:87px;}
h3 {font-size: 40px; color: #312d60; margin: 15px 0 5px; font-family: 'Roboto Light'; text-transform: none; line-height: 60px;letter-spacing: 0.5px;}
h4{ font-weight:bold; font-size:18px;margin-top:10px;}
h4 a {color:#444444}
h5{font-size:22px;font-weight:normal;position:relative;display: inline-block}
 p{ color:#000; font-size:16px; font-weight:normal; line-height: 24px;	margin: 0 0 10px; font-family: 'Montserrat Light'; }
a, a:hover, a:focus, a:focus, a:active{ text-decoration:none; outline:none; transition: ease-in .3s; }
a, p a {text-decoration:underline;color:#625f92;}
p a:hover, a:hover{cursor:pointer;text-decoration: underline;color:#625f92}
.inhoud ul {
    margin-left: 30px;
    margin-top: 10px;
    list-style: none;
}
.inhoud ul li::before {
  content: "-";  
  font-weight: bold; 
  display: inline-block; 
  width: 1em; 
  margin-left: -1em; 
}
.breadcrumb {background-color:transparent;border-radius:0;justify-content:flex-end;padding-left:0px;}
.breadcrumb-item {font-size:12px}
.bgwece{background: #060912}
#webspice { text-align: right;padding-right:10px}
#webspice a {
font-weight:600;
font-size:12px;
color:#999999;
text-decoration:none;
    padding-top: 5px;padding-bottom:5px;
    }
#webspice a:hover{color:#ffffff}
.bol {
color:#D99F15;
font-size:24px
}
.btn {
box-shadow: none !important;
text-decoration:none;
transition: 0.3s;
color:#ffffff;
background-color:#312d60;
border: 1px solid #312d60;
font-family:"Montserrat Light";margin: 0px 0 0; border-radius: 0px; 
font-size: 21px;
padding:10px 25px;

}
.btn:hover, a.btn:hover {
text-decoration:none;
    background-color:#232120;
	color:#fff;
	border-color:#232120
}

/*******/
input, textarea {
	font-size: 16px;
	font-weight: normal;
	padding: 10px;
	background-color: #e4e4e4;
	width: 100%;
}
input:focus{ outline:none;}
.form-control::placeholder {color: #959494;}
.form-control, .form-control-file{font-weight: normal;
	padding: 6px 10px;
background-color: #ffffff;
    border:1px solid #959494;
    border-radius:0;
 color: #666666;}
.form-control:focus {
    color: #333333;
    background-color: #fff;
    border-color: #0f2548;
    outline: 0;
    box-shadow: none;
}
.formelnt{
  position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 15px;
	}
.submit {
    font-family: "Montserrat Light";
display: block;
line-height: 1.25;
text-align: center;
vertical-align: middle;
text-decoration: none;
text-shadow: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-clip: padding-box;
margin-top: 20px;
background:#312d60 none repeat scroll 0 0;
color: #ffffff;
font-size: 20px;
padding: 17px;
margin-left: auto;
margin-right: auto;
border: 1px solid #312d60;
border-radius: 0px;
    text-transform:none;
        transition: all 0.5s;
    width: 250px;
height: 64px;
   
}
.submit:hover {background-color: #232120;text-decoration:none;color:#ffffff;border-color:#232120}
 iframe.map {height:500px; width:100%;display: block;}

.container {max-width: 1717px;}

/**----Top header Css----**/
.top_head{background:#191717;padding:7px 0; }
	.top_head ul.call_email{padding: 5px 0;margin:0 }
	.top_head ul.call_email li{ width: auto; display: inline-block; line-height: 40px; padding:0 15px; }
	.top_head ul.call_email li ,.top_head ul.call_email li a{ color: #fff;text-decoration: none;font-size:14px; font-family: 'Montserrat Medium';  }
	.top_head ul.call_email li img{ margin-right:12px; }
	.top_head ul.call_email li:last-child{padding-right:0;}
	.top_head ul.call_email li a:hover {text-decoration: underline;}

/**----Header Css----**/
header{position:relative;}

/* nav */
.navbar-toggler:focus,.navbar-toggler:active {outline: 0;}
.navbar-toggler{position:relative;display:none}
.navbar-toggler span {
display: block;
background-color: #444;
height: 3px;
width: 35px;
margin-top: 4px;
margin-bottom: 4px;
 -webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
transform: rotate(0deg);
position: relative;
 left: 0;
opacity: 1;
}
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
-webkit-transition: transform .35s ease-in-out;
-moz-transition: transform .35s ease-in-out;
 -o-transition: transform .35s ease-in-out;
transition: transform .35s ease-in-out;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
position: absolute;
 left: 12px;
top: 10px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
 opacity: 0.9;
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
height: 12px;
visibility: hidden;
 background-color: transparent;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
position: absolute;
left: 12px;
top: 10px;
-webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
opacity: 0.9;
}
.navbar{padding-left:0;padding-right:0;padding-top:49px}
nav ul{list-style:none; padding-left: 0;}
.nav-link ,.dropdown-item{ color: #000; text-transform: capitalize; text-decoration: none; font-size: 20px; letter-spacing: 1px; transition: 0.5s; position: relative;font-family:"Montserrat Medium"; }
	.dropdown-item{font-size: 16px; padding: 8px 15px!important; }
	.dropdown-menu {top: 30px;}
	li.nav-item.dropdown:hover ul.dropdown-menu { display: block;}
.nav-item.active .nav-link{color:#625f92}
/*index*/
.banner { background: url("../fotomateriaal/banner26.webp"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: scroll;height:700px;width:100% }
.alert-message-sec {background: #f4f3f3;}
.alert-text h4 { margin: 0 auto 15px; color:#fff;font-size:21px}
.alert-text {background: #312d60;	max-width: 1426px; margin: -85px auto 0px; border-radius: 100px; position: relative;	padding: 40px 0 30px;}
.alert-text p{color:#fff; font-family: 'Montserrat Light';}
.service-fietsen { padding: 45px 0 90px; background: #f4f3f3;}
.service-fietsen p{max-width:1412px;font-size:21px; font-weight:normal; line-height: 33px;	margin: 0 0 10px; font-family: "Montserrat Medium"; }	
	.fietsen{padding:100px 0 146px;}
	.fietsen-box{position:relative; cursor:pointer;  margin:0 0  40px;}
	.fietsen-box:hover:before{opacity:0;transition:0.3s ease-in; }
	.fietsen-box:before { position: absolute; left: 0; transition:0.3s ease-in; background: rgba(0,0,0,0.3); content: ''; width: 100%; height: 100%;top: 0; right: 0; opacity: 1;pointer-events: none }
.fietsen-box a {pointer-events: auto}
	.fietsen-box p { position: absolute; right: 36px; bottom: 25px; color: #fff; text-decoration: none; font-family: 'Roboto Light'; font-size: 35px; }
.info-sec{padding:110px 0; position:relative;background: #f4f3f3;}
	.info-sec:before{background:#312d60; top:0;width:50%; content:''; right:0; position:absolute; height:100%;}
	.info-sec ul{margin:0; padding:0;}
	.info-sec .time-list li {font-size:21px; line-height:39px; font-family:'Montserrat Medium';  list-style:none;} 
 	.info-list li span { float: left; margin-right: 30px; display: block; 	}
	.info-list li { display: block; width: 100%; margin: 0 0 50px; overflow: hidden; 	}
	.info-list li:last-child { line-height: 40px; }
	.info-list li{color: #000; font-family: 'Roboto Bold'; font-size: 30px; }
	.info-list li a{color: #000; font-family: 'Roboto Bold'; font-size: 30px; text-decoration: none; line-height: 87px;}
	.info-list li:last-child a{line-height: 50px;}
.info-list li a:hover{text-decoration:underline}
	.news-sec {padding:100px 0 160px;}
	.news-sec h2 {margin:0 auto 85px;}
	.card .card-header {font-size: 30px; color: #000000; font-family: 'Roboto Bold'; background: transparent; border: 0; 	}
	.card-deck .card {border: 0;margin-bottom:15px }
	.card-body { font-family: 'Montserrat Medium'; }
	.card-body span { display: block; font-size: 16px; padding: 10px 0; margin: 0 0 20px; border-top: 1px solid #e8e7e7; border-bottom: 1px solid #e8e7e7; 	}
	.card-footer { border: 0; background: transparent; }
	.partner-logo{padding:100px 0;background: #f4f3f3;}
	.partner-logo span { display: flex; height:88px; justify-content: center; align-items:center; mix-blend-mode: darken; vertical-align: text-bottom; margin: 15px 0; 	}
	.partner-logo span img { background-color: #f4f3f3; mix-blend-mode: multiply; 	}
/* Andere paginas */
.time-ul ul {padding-left:0px}
.time-ul ul li {
    padding: 0 0 5px;
    list-style: none;
}
.merk-box {
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
    overflow: auto;
    background-color: #fff;
	-moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 50px;
	margin-top:20px
}
.merk-box:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); }
.merk-box .merk-box-image {
    text-align: center;
}
/*.merken.merk-box { margin-bottom: 20px; position: relative; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border-radius: 4px; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 50px; }
.merken .merk-box-img {margin-bottom: 0px;text-align: center;}
.merken.merk-box:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); }*/
.card.stock{border: 1px solid #e1e1e1;-moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 10px;}
.card.stock:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06); }
.card-img-top{padding:20px}
.card.stock .card-footer{background-color: #312d60;text-align: center;}
.card.stock .card-footer p {color:#ffffff;text-transform:uppercase}
.nav-item.stbut a{background-color: #312d60;
border: 1px solid #312d60;
color: #ffffff;
border-radius: 30px;
display: block;
text-align: center;white-space:nowrap;padding-left: 15px!important;
padding-right: 15px!important;}
.nav-item.stbut a:hover{background-color: #ffffff;
border: 1px solid #312d60;
	color: #312d60;}
/**----Footer Css----**/
footer { background: #4d4d50; padding: 88px 0 0 0; color: #fff; }
	footer ul li,	footer a { 	color: #f4f3f3; text-decoration: none; 	font-size: 16px; display: block; font-family: 'Montserrat Medium'; 	}
	footer ul{margin:0; padding:0;}
	.time-ul ul li span { width: 100px; margin-right: 5px; float: left; }
 	.cont-info ul li { padding: 0 0 15px; }
	.btm-links ul { float: left; width: 50%; }
	.btm-links ul:last-child li { padding: 0 0 12px; }
	footer ul li { padding: 0 0 15px; line-height: 24px; list-style: none; 	}
	footer a:hover{text-decoration:underline;color:#fff}
	footer h4 {font-family: 'Roboto Light'; letter-spacing: 1px; margin: 20px 0 58px; font-size: 32px;}
	.cook{padding-top:5px;}
.cook a {color:#ffffff;padding-top: 5px;
padding-bottom: 5px;}
	.scrollup { display: none; position: fixed; bottom: 4em; right: 15px; width: 47px; height: 47px; background: url("../fotomateriaal/back-top-btn.png"); text-indent: -999999px; transition: ease-in .3s all; z-index: 999; 	}
	.scrollup:hover {background-position: left bottom;}

/* Responsive */


@media screen and (max-width:1900px){
	
	}

	@media screen and (max-width: 1366px) {	
	.nav-link {font-size:16px;}
	h1{font-size: 36px; line-height: 44px;  margin-bottom: 20px;}
	h2 {font-size: 45px; line-height: 55px;}
	p {font-size: 18px; line-height: 30px;}
	.alert-text {max-width: 90%; padding: 30px 20px 25px; }
	.alert-text h1 { margin: 0 auto 10px; }
	.fietsen-box { margin: 0px 0 30px;}
	.fietsen-box p { font-size: 24px;}
	.service-fietsen p { max-width: 90%;}
	}

	@media screen and (max-width: 1200px) {
	.container {padding: 0 15px;}
	.nav-link {font-size: 14px;}
	.service-fietsen {padding: 70px 0 70px;}
	.fietsen {padding: 70px 0px 40px;}
	.news-sec {padding: 70px 0 70px;}
	.news-sec h2 {margin: 0 auto 35px;}
	.card .card-header {font-size: 24px;}
	.partner-logo {padding: 70px 0;}
	footer {padding: 70px 0 0 ;}
	.banner {height: 430px;}
	.info-sec {padding: 70px 0 50px;}
	
	
	}






@media screen and (max-width: 1024px) {
	.navbar-toggler { display: block!important;    float: right;    position: absolute;    right: 0;    top: 35px;}
	.navbar { padding-top: 20px;}
	.collapse.navbar-collapse {display: none !important;}
	.navbar-collapse.collapse.show {display: block !important;}
	.navbar-nav {display: block !important;padding:20px}
	.nav-link{margin-bottom:10px}
	.navbar-expand-lg .navbar-nav .dropdown-menu { position: static; margin: 0 0 15px;}
	.dropdown-item {font-size: 14px;    padding: 5px 7px!important;}

	div#collapsibleNavbar { position: absolute; background: #f4f3f3; z-index: 999; top: 80px; right: -15px; width: 250px; }
	h3 {font-size:26px; margin:0px;}
	}
@media screen and (max-width: 768px) {	
	.info-sec:before { top: 50%; width: 100%; content: ''; left:0; right: 0; position: absolute; height: 50%; }
	.fietsen-box img { display: block; width: 100%; }
	h3 {font-size:26px; margin:0px;}
	}
	@media (max-width: 767px){
	h1 {font-size: 28px;  line-height: 36px; }
	h2 {font-size: 36px;   line-height: 44px;}
	h3 {font-size: 24px;  line-height: 30px;}
	p {font-size: 15px;   line-height: 26px;}
	.fietsen-box p {font-size: 35px;}
	.info-sec ul {padding: 0 0 20px;}
	footer,	.news-sec{padding:40px 0 0;}
	footer h4 { margin: 20px 0 28px;}
	.cont-info ul li {padding: 0 0 15px;}
	.service-fietsen p { max-width: 100%;}
		
	}
@media (max-width: 576px){
	h1 {font-size: 21px;  line-height: 30px;}
	h2 {font-size: 29px;  line-height: 40px; margin:0 0 20px;}
	.navbar-toggler {top: 10px;}
	.banner {height: 300px;    }
	.service-fietsen {padding: 0 0 40px; }
	.alert-text p {font-size: 12px; line-height: 18px;	}
	.alert-text { max-width: 100%; margin: -70px auto 40px; padding: 10px 15px 10px; }
	.top_head ul.call_email li:first-child a {font-size: 18px;}
	.top_head ul.call_email li{ line-height: 30px;}
	.top_head ul.call_email li,
	.top_head ul.call_email li a {font-size: 15px;}
	.fietsen {padding: 40px 0px 10px;	}
	.fietsen-box p {font-size: 24px; }
	.info-sec .time-list li { font-size: 16px; line-height: 30px; }
	.news-sec h2 {margin: 0 auto 15px;}
	.card .card-header {font-size: 20px; padding: 10px 15px;	}
	.card-body {padding: 0 15px; font-size: 18px;}
	.partner-logo span {margin: 15px 0 0;}
	
}
@media (max-width: 414px){
	.info-list li span img {width: 66px; height: 66px; }
	.info-list li { margin: 0px 0 20px;}
	.info-list li span {margin-right: 10px;	}

	.info-list li ,	.info-list li a{font-size: 18px;}
	.info-sec {padding: 40px 0 20px;}
	.btm-links ul {float: none;	width: 100%;}
	.banner {height: 230px;}
	
	
	}
@media (max-width: 384px){
				.info-list li span img {width: 55px; height: 55px; }
	.info-list li ,	.info-list li a{font-size: 16px;}
		}