/* 
Wireframe: LP 06
Version: 1.2
Update: 2019.06.04
*/
/* mkbclickservice.nl 
	accent kleur: #19a4d9, 
	header bg : #030303 4locatie
	footer: rgba(119,119,119,1)
*/
/*--------------------------------------------------
>> TABLE OF CONTENTS:
----------------------------------------------------
# Fonts
# General
# Navigation
    ## Superfish
    ## Mobile navigation
--------------------------------------------------*/

/*--------------------------------------------------
# Fonts
--------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Lato|Jura:500');

 
/*--------------------------------------------------
# General
--------------------------------------------------*/
body {
    background: #e6e6e6;
    color: #333;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
a {
    color: #19a4d9;
    text-decoration: underline;
    transition: color .4s;
}
a:active, a:hover, a:focus {
    color: #af9675;
    text-decoration: none;
}
 
.image-right {
    float: right;
    margin: 0 0 10px 15px;
}
.image-left {
    float: left;
    margin: 0 15px 10px 0;
}
 
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	line-height: 1.3;
    font-family: 'Jura', serif;
	font-weight:500;
}
h1, .h1{
    font-size: 2.5em;
}
h2, .h2{
    font-size: 2.2em;
}
h3, .h3{
    font-size: 2em;
}
h4, .h4{
    font-size: 1.8em;
}
h5, .h5{
    font-size: 1.6em;
}
h6, .h6{
    font-size: 1.2em;
}

hr {
	border-top-color: #fff;
}

.row.equalheight {
	display: flex;
	flex-wrap: wrap;
}
.row.equalheight > [class*='col-'] {
	display: flex;
	flex-direction: column;
}

header.top {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #030303;
	padding: 20px;
}
header.top .mobile-nav {
	display: none;
	text-align: center;
}

section.banner {
	position: relative;
	background: #030303;
}
section.banner #bg-slideshow {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0.3;
}
section.banner .banner-overlay {
	position: relative;
	min-height: 50vh;
	display: grid;
	grid-template-rows: 1.1fr 100px 1fr;
	align-items: center;
	justify-items: center;
	text-align: center;
	padding: 100px 0 50px;
	z-index: 1;
}
.homepage section.banner .banner-overlay {
	min-height: 80vh;
}
section.banner .banner-overlay .logo {
    font-family: 'Jura', serif;
	font-size: 3.5em;
	line-height: 1.4em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	align-self: end;
}
section.banner .banner-overlay .logo a {
	color: #fff;
	text-decoration: none;
}
section.banner .banner-overlay .icon-devider {
	position: relative;
	overflow-x: hidden;
	width: 100%;
}
section.banner .banner-overlay .icon-devider::before,
section.banner .banner-overlay .icon-devider::after {
	content: '';
	width: 100vw;
	position: absolute;
	top: 50%;
	height: 1px;
	background: #c5b49e;
}
section.banner .banner-overlay .icon-devider::before {
	right: 50%;
	transform: translateX(-20px);
}
section.banner .banner-overlay .icon-devider::after {
	left: 50%;
	transform: translateX(20px);
}
section.banner .banner-overlay .icon-devider .arrow-down {
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #19a4d9;
	display: inline-block;
	transform: scaleX(.5);
}
section.banner .banner-overlay .cta {
	color: #fff;
	align-self: start;
	font-family: 'Jura', serif;
	font-size: 1.5em;
}
section.banner .banner-overlay .cta p {
	margin: 0;
	padding: 0;
}
section.banner .banner-overlay .cta .phone {
	font-size: 1.5em;
	line-height: 1em;
	font-weight: bold;
}
section.banner .banner-overlay .cta .phone .number-responsive {
	display: none;
}

#HomeNews {
	background: #2c3234;
	color: #fff;
	text-align: center;
	padding: 30px 0;
}
#HomeNews .Item {
	max-width: 90vw;
	margin: 0 auto;
}
#HomeNews .Item h3 {
	margin-top: 0;
}

section.content-wrapper {
	position: relative;
	padding: 50px 0;
}
section.content-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 50%;
	background: url(../images/bg-contact.jpg) center no-repeat;
	background-size: cover;
	z-index: -1;
	opacity: .1;
}
main.content {
	position: relative;
	padding-right: 30px;
}
main.content header.page-title {
	margin-bottom: 30px;
}
main.content header.page-title h1 {
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	margin: 0;
	font-size: 36px;
	line-height: 1.2em;
}
main.content header.page-title h1 span {
	color: #19a4d9;
}
main.content header.page-title h1 span:last-child {
	color: #333;
}
main.content header.page-title h1 span.subtitle {
	color: #333;
	font-size: 40px;
}
main.content header.page-title h1::after {
	content: '';
	height: 3px;
	width: 75px;
	background: #19a4d9;
	display: block;
	margin-top: 10px;
}
main.content article.page-content {
	padding-bottom: 30px;
}
main.content article.page-content::after {
	content: '';
	display: block;
	clear: both;
}

.content-wrapper .contact {
	position: relative;
	padding: 0 50px;
}
.content-wrapper .contact h3 {
	color: #19a4d9;
	margin: 0 0 30px;
	text-align: center;
}

section.numbers {
	position: relative;
	background: url(../images/bg-section.jpg) no-repeat fixed;
	background-size: cover;
	color: #fff;
	text-align: center;
	padding: 100px 0;
	font-family: 'Jura';
}
section.numbers::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(24,30,33,.7);
}
section.numbers h4 {
	font-size: 3em;
	border-radius: 50%;
	width: 128px;
	line-height: 128px;
	display: inline-block;
	margin: 0 auto 15px;
	border: 1px solid #19a4d9;
	text-shadow: 0 0 20px rgba(0,0,0,1);
}
section.numbers p {
	text-transform: uppercase;
	font-size: 1.2em;
	margin: 0;
}

footer.bottom {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
footer.bottom .address-wrapper {
	position: relative;
	background: rgba(119,119,119,1);
	color: #fff;
}
footer.bottom .address-wrapper .address {
	position: relative;
	width: calc((1170px - 15px) / 2);
	margin-left: auto;
	padding: 100px 30px 100px 0;
}
footer.bottom .address-wrapper .address h3 {
	font-family: 'Lato', sans-serif;
	margin-top: 0;
	margin-bottom: 30px;
	font-size: 1.5em;
}
footer.bottom .address-wrapper .address h3::after {
	content: '';
	height: 3px;
	width: 75px;
	background: #19a4d9;
	display: block;
	margin-top: 10px;
}
footer.bottom .address-wrapper .address p {
	margin-bottom: 20px;
}
footer.bottom .address-wrapper .address .number-responsive {
	display: none;
}
footer.bottom .address-wrapper .address .fa {
	color: #19a4d9;
	margin-right: 10px;
}
footer.bottom .box_googlemapsv2 {
}
footer.bottom .box_googlemapsv2 iframe {
}

section.footer-nav {
	position: relative;
	padding: 30px;
	margin-bottom: 65px;
	background: rgba(87,84,87, .15);
}
section.footer-nav nav.language a {
	text-transform: uppercase;
	background: #fff;
	text-decoration: none;
	display: inline-block;
	margin-right: 5px;
	color: #333;
	font-weight: bold;
	font-size: 1em;
	line-height: 2em;
	padding: 0 8px;
	transition: background .4s, color .4s;
}
section.footer-nav nav.language a:hover {
	background: #19a4d9;
	color: #fff;
}
section.footer-nav nav.keywords-nav {
	text-align: center;
}
section.footer-nav nav.keywords-nav ul,
section.footer-nav nav.keywords-nav ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
section.footer-nav nav.keywords-nav ul li {
	display: inline-block;
}
section.footer-nav nav.keywords-nav ul li a {
	margin: 0 10px;
}
section.footer-nav nav.keywords-nav ul li a#contact-scroll {
	display: none;
}
section.footer-nav .networks_linking {
	text-align: right;
}
section.footer-nav .networks_linking a {
	border-radius: 0;
	background: #fff;
}

a#scrollTopBtn {
	bottom: 10px;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
	background: #19a4d9;
	color: #fff;
	border-radius: 5px;
	padding: 0;
	width: 36px;
	line-height: 36px;
	text-align: center;
	transition: background .4s, color .4s, opacity .4s;
}
a#scrollTopBtn:hover {
	background: #030303;
	color: #fff;
}

.formError,
.formError *,
#fancybox-wrap,
#fancybox-wrap *{
    box-sizing: content-box;
}
div#_atssh {
    bottom: 0;
}

@media only screen and (max-width : 1169.98px) {
	footer.bottom .address-wrapper .address {
		width: auto;
		padding-left: 15px;
	}
}
@media only screen and (max-width : 991.98px) {
    .row.equalheight {
        display: block;
	}
	.image-left, .image-right {
		float: none;
		max-width: 100%;
		margin: 10px auto;
		height: auto;
		display: block;
	}
	header.top nav.main-nav {
		display: none;
	}
	header.top .mobile-nav {
		display: block;
	}
	section.banner .banner-overlay {
		padding: 50px 0;
	}
	section.content-wrapper::after {
		display: none;
	}
	section.footer-nav nav.language,
	section.footer-nav .networks_linking {
		text-align: center;
	}
	section.footer-nav nav.keywords-nav {
		margin: 10px 0;
	}
}
@media only screen and (max-width : 767.98px) {
	section.banner .banner-overlay {
		padding: 30px 0;
	}
	section.banner .banner-overlay .logo {
		font-size: 2.5em;
	}
	section.banner .banner-overlay .cta {
		font-size: 1.3em;
	}
	section.banner .banner-overlay .cta .phone .number {
		display: none;
	}
	section.banner .banner-overlay .cta .phone .number-responsive {
		display: inline-block;
	}
	section.content-wrapper {
		padding: 30px 0;
	}
	section.numbers {
		padding: 30px 0;
	}
	section.numbers p:nth-child(1),
	section.numbers p:nth-child(2) {
		margin-bottom: 15px;
	}
	footer.bottom {
		grid-template-columns: 1fr;
	}
	footer.bottom .address-wrapper .address {
		padding: 30px 15px;
	}
	footer.bottom .address-wrapper .address .number {
		display: none;
	}
	footer.bottom .address-wrapper .address .number-responsive {
		display: inline-block;
	}
	footer.bottom .box_googlemapsv2 {
		height: 250px;
	}
}
@media only screen and (max-width : 575.98px) {
	section.banner .banner-overlay .logo {
		font-size: 2.4em;
	}
}

/*--------------------------------------------------
# Navigation
--------------------------------------------------*/

/*--------------------------------------------------
## Superfish
--------------------------------------------------*/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
	white-space: nowrap;
	display: inline-block
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li:last-child {
	float: right;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}
.sf-menu a {
	color: #fff;
	text-decoration: none;
	line-height: 2em;
}
.sf-menu > li {
	margin: 0 10px;
}
.sf-menu > li > a {
	display: block;
	position: relative;
	padding: 10px;
	text-align: center;
	transition: color .4s;
}
.sf-menu > li > a#contact-scroll {
	font-weight: bold;
	text-transform: uppercase;
}
.sf-menu > li > a#contact-scroll::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #19a4d9;
	display: inline-block;
	transform: scaleX(.5) translateX(-50%);
	transform-origin: left top;
}
.sf-menu ul {
	margin-top: 5px;
	width: 100%;
	min-width: 200px;
	background: #575457;
	box-shadow: 0 0 15px rgba(0,0,0,.25);
}
.sf-menu ul li {
	display: block;
}
.sf-menu ul a {
	display: block;
	padding: 5px 10px;
	transition: background .4s, color .4s;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}
.sf-menu li > a:hover, .sf-menu li.sfHover > a,
.sf-menu li.active > a, .sf-menu li.selected > a {
	color: #19a4d9;
}
.sf-menu ul a:hover, .sf-menu ul .sfHover > a,
.sf-menu ul .active > a, .sf-menu ul .selected > a {
	background: #19a4d9;
	color: #fff;
}
/*** arrows **/
.sf-arrows .sf-with-ul::after {
	content: '+';
	padding-left: 8px;
	color: #fff;
	opacity: .5;
	transition: opacity .4s, color .4s;
}
.sf-arrows > li > .sf-with-ul:focus::after,
.sf-arrows > li:hover > .sf-with-ul::after,
.sf-arrows > li.sfHover > .sf-with-ul::after,
.sf-arrows > li.active > .sf-with-ul::after,
.sf-arrows > li.selected > .sf-with-ul::after {
	opacity: 1;
	color: #19a4d9;
}

@media only screen and (max-width : 767.98px) {
	.sf-menu {
		display: none;
	}
}

/*--------------------------------------------------
## Mobile navigation
--------------------------------------------------*/
.site-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	opacity: 0;
	transform: translate3d(100%,0,0);
	transition: opacity 0.4s, transform 0s 0.4s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Close Button */
.menu-wrap .close-button {
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	right: 1em;
	top: 1em;
	overflow: hidden;
	text-indent: 1em;
	font-size: 0.75em;
	border: none;
	background: transparent;
	color: transparent;
}
.menu-wrap .close-button::before,
.menu-wrap .close-button::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 100%;
	top: 0;
	left: 50%;
	background: #2e2e2e;
	transition: background .4s;
}
.menu-wrap .close-button::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu-wrap .close-button::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.menu-wrap .close-button:hover::before,
.menu-wrap .close-button:hover::after {
	background: #19a4d9;
}
/* Menu */
.menu-wrap {
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	z-index: 1001;
	width: 300px;
	height: 100%;
	background: rgba(255,255,255,.95);
	box-shadow: 0 0 20px rgba(0,0,0,.8);
	padding: 40px 20px 20px;
	transform: translateX(-100vw);
	transition: transform 0.4s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.mobile-menu {
	transform: translateX(500px);
}
.mobile-menu > ul {
	display: block;
	transform: translateX(-1000px);
}
.mobile-menu,
.mobile-menu > ul {
	transition: transform 0s 0.4s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.5em;
}
.mobile-menu ul ul {
	background: rgba(0,0,0,.15);
	font-size: 16px;
	margin-top: 5px;
	margin-bottom: -5px;
	border-top: 2px solid rgba(0,0,0,.2);
}
.mobile-menu ul:first-child li:first-child,
.mobile-menu ul ul li:first-child{
	border-top: none;
}
.mobile-menu li {
	padding: 5px 0;
	border-top: 2px solid rgba(0,0,0,.2);
}
.mobile-menu li li {
	position: relative;
	border-top: 2px solid rgba(0,0,0,.2);
}
.mobile-menu li li::before {
	content: '\f105';
	font-family: 'FontAwesome';
	position: absolute;
	color: #2e2e2e;
	z-index: 5;
	left: 10px;
	top: 10px;
	pointer-events: none;
}
.mobile-menu a {
	padding: 5px 5px;
	display: block;
	color: #2e2e2e;
	font-weight: bold;
	text-decoration: none;
	transition: color .4s, background .4s;
}
.mobile-menu a:hover,
.mobile-menu .selected > a,
.mobile-menu .active > a {
	color: #fff;
	background: #19a4d9;
}
.mobile-menu li li a {
	padding-left: 25px;
	text-transform: none;
}
/* Language */
.mobile-language {
	text-align: center;
	color: rgba(0,0,0,.5);
	margin-top: 20px;
}
.mobile-language a {
	text-transform: uppercase;
}
.mobile-language a:hover {
}
/* Shown menu */
.show-menu .menu-wrap {
	transform: translate3d(0,0,0);
	transition: transform 0.8s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .mobile-menu,
.show-menu .mobile-menu ul {
	transform: translate3d(0,0,0);
	transition: transform 0.8s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .mobile-menu ul {
	transition-duration: 0.9s;
}
.show-menu .site-overlay {
	opacity: 1;
	transition: opacity 0.8s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transform: translate3d(0,0,0);
}
/* material icons ---------------------------*/
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 50px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
  
	transition-delay: 0s;
	transition-duration: 250ms;
	transition-property: all;
	transition-timing-function: ease; 
	cursor:default;
}