/*** HEIDI ***/

* { transition: all .2s; }

body {
	font-family: 'Open Sans', sans-serif;	
	font-weight: 300;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	background: #f9f9f9;
}
strong {
	font-weight: 700;
}

.clear { clear: both; }

div.carousel div.item img { margin: 0 auto; }

.flex {
	display: flex;
	align-items: center;
}

.wow { opacity: 0; }

.loading {
    opacity: 0;
    transition: opacity 1s;
}
.loading.done {
    opacity: 1;
}


/* ################# NAV ################# */

#nav, #nav li {
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
}

#nav { padding: 30px 30px 30px 40px; }

#nav li.space {
	float: left;
	width: 100%;
	height: 20px;
}

.pushy {
	width: 300px;
	background: #fff;
}

.pushy-right {
	-webkit-transform: translate3d(300px, 0, 0);
	-ms-transform: translate3d(300px, 0, 0);
	transform: translate3d(300px, 0, 0);
}

.pushy ul li {
	list-style: none;
	float: right;
}

.pushy a {
	padding: 0;
	color: #000;
	font-size: 16px;
	width: 260px;
	text-transform: uppercase;
	padding: 20px 0;
	border-bottom: 1px solid #e5e5e5;
	font-weight: 400;
}
.pushy a:hover, .pushy a:focus {
	color: #d51f47;
	letter-spacing: .2px;
	padding-left: 4px;
}

.pushy ul li.contact-link a {
	border: 0;
	padding: 10px 0;
	font-size: 18px;
	display: flex;
	align-items: center;
}
.pushy ul li.contact-link a:hover, .pushy ul li.contact-link a:focus {
	letter-spacing: 0;
}
.pushy ul li.contact-link a i.fa-phone { font-size: 27px; }
.pushy ul li.contact-link a i.fa-mobile { font-size: 33px; }
.pushy ul li.contact-link a i {
	padding-right: 15px;
	width: 45px;
	color: #b8b8b8;
	text-align: center;
}

.pushy li.contact-link a:hover i, .pushy li.contact-link a:focus i {
	letter-spacing: 5px;
	color: #d51f47;
}

.pushy ul li.facebook-link a {
	border: 0;
	margin-top: 10px !important;
}
	.pushy ul li.facebook-link a img {
		max-width: 205px;
	}
.pushy ul li.facebook-link a:hover, .pushy ul li.facebook-link a:focus {
	margin: 0;
	letter-spacing: 0;
	opacity: .5;
}

#logo-sidebar { float: left; clear: both; margin-bottom: 25px; }

#close-sidebar {
	position: absolute;
	top: 9px;
	right: 21px;
	font-size: 23px;
	color: #ccc;
	cursor: pointer;
}
#close-sidebar:hover, #close-sidebar:focus {
	color: #000;
}


/* ################# HEADER ################# */

header#header {
	background: #fff;
	padding: 40px 0;
}

	header#header a {
		text-decoration: none;
	}

		header#header a img#logo, #logo-footer, #logo-sidebar {
			width: 160px;
			margin-top: -3px;
		}

	header#header h2 {
		margin: 0;
		font-weight: 300;
		color: #000;
		font-size: 24px;
		padding-left: 6px;
	}

	header#header .menu-btn {
		float: right;
		width: 24px;
		color: #bfbfbf;
		cursor: pointer;
	}

	header#header .menu-btn .line {
		float: left;
		width: 100%;
		margin: 2px 0;
		height: 2px;
		background: #bfbfbf;
	}

	header#header .menu-btn:hover .line, header#header .menu-btn:focus .line {
		background: #333;
	}


/* ################# SLIDER ################# */

section#slider {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	transition: none !important;
}
	section#slider img, section#slider div {
		transition: none !important;
	}


/* ################# INTRO ################# */

section#intro {
	float: left;
	width: 100%;
	margin-top: 32px;
}

	section#intro h2 {
		margin: 0;
		font-weight: 700;
		font-size: 35px;
		color: #000;
		margin-bottom: 17px;
		letter-spacing: -.8px;
	}

	section#intro p {
		font-size: 18px;
		line-height: 29px;
	}

	section#intro img.img-responsive {
		margin: 0 auto;
	}

	section#intro img.img-responsive#slogan {
		margin: 50px auto;
	}

#heidi-dedeurwaerder {
	max-width: 172px;
}


/* ################# OPENINGSUREN ################# */

section#openingsuren {
	float: left;
	width: 100%;
	background: #d51f47 url(../img/polygon.jpg) repeat;
	padding: 56px 0;
}
	
	section#openingsuren .text-center div.text-left {
		display: inline-block;
	}

	section#openingsuren h2 {
		color: #fff;
		margin: 0;
		text-transform: uppercase;
		font-weight: 700;
		font-size: 31px;
	}

	section#openingsuren h3 {
		margin: 0;
		color: #fff;
		font-size: 23px;
		font-weight: 700;
		margin-bottom: 6px;
		margin-top: 2px;
	}

	section#openingsuren p {
		color: #fff;
		margin: 0;
		font-size: 22px;
	}


/* ################# CONTACT ################# */

section#contact {
	float: left;
	width: 100%;
	padding: 60px 0;
}

	section#contact h2 {
		font-weight: 700;
		display: block;
		margin-top: 0;
		margin-bottom: 40px;
	}
	section#contact h2:hover, section#contact h2:focus {
		opacity: .5;
	}

		section#contact h2 a {
			text-decoration: none;
			color: #005f8a;
		}

			section#contact h2 a img {
				display: inline-block;
				max-width: 69px;
			}

		section#contact h2 span {
			margin-top: 24px;
			margin-left: 16px;
			float: right;
		}

	section#contact p {
		color: #3d3c3c;
		font-size: 26px;
		margin-bottom: 40px;
	}

		section#contact p a {
			color: #3d3c3c;
			text-decoration: none !important;
			float: right;
			margin-left: 20px;
		}
		section#contact p a:hover, 
		section#contact p a:focus {
			opacity: .5;
		}

			section#contact p a i {
				color: #d1d1d1;
				padding-right: 5px;
			}

	section#contact p.flex {
		font-size: 21px;
		margin-left: auto;
		margin-right: 0;
		float: right;
		margin-top: 40px;
		margin-bottom: 0;
	}

		section#contact p.flex img {
			padding-left: 20px;
			max-width: 120px;
		}

section#contact p.gmaps {
	font-size: 14px;
	margin: 0;
}

#gmaps-wb {
	float: left;
	width: 100%;
	height: 400px;
}
#gmaps-wb, #gmaps-wb div, #gmaps-wb p {
	transition: none !important;
}
#gmaps-wb .gm-style-iw { text-align: left !important; }


/* ################# TROEVEN ################# */

section#troeven {
	float: left;
	width: 100%;
}

	section#troeven img {
		display: inline-block;
		margin: 0 auto;
		max-width: 420px;
	}

	section#troeven div.line {
		float: left;
		width: 100%;
		background: #d51f47;
		height: 2px;
		margin-top: -44px;
	}

	section#troeven ul {
		margin: 40px 0;
		padding: 0;
	}

		section#troeven ul li {
			list-style: none;
			font-size: 20px;
			color: #000;
			margin-bottom: 20px;
		}

			section#troeven ul li img {
				margin-right: 12px;
			}


/* ################# MERKEN ################# */

section#merken {
	float: left;
	width: 100%;
	margin-top: 25px;
}

	section#merken h2 {
		float: left;
		width: 100%;
		margin: 0;
		text-align: center;
		color: #fff;
		font-weight: 700;
		font-size: 16px;
		background: #d51f47;
		padding: 10px;
		margin-bottom: 40px;
	}

	section#merken ul {
		margin: 0;
		padding: 0;
	}

		section#merken ul li, section#merken ul li h3 {
			text-align: center;
			float: left;
			width: 100%;
			list-style-type: none;
			font-size: 16px;
			margin-bottom: 7px;
			margin-top: 0;
		}


/* ################# FOOTER ################# */

footer {
	float: left;
	width: 100%;
	margin-top: 30px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,e8e8e8+100 */
	background: #f4f4f4; /* Old browsers */
	background: -moz-linear-gradient(top,  #f4f4f4 0%, #e8e8e8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f4f4f4 0%,#e8e8e8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f4f4f4 0%,#e8e8e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
	padding: 40px 0;
}

	footer a {
		text-decoration: none;
	}

		footer a img#logo {
			width: 160px;
			margin-top: -3px;
		}

	footer h2 {
		margin: 0;
		font-weight: 300;
		color: #000;
		font-size: 24px;
		padding-left: 6px;
	}

#copyright {
	opacity: .25;
	float: right;
	transition: opacity .3s;
}
#copyright:hover, #copyright:focus {
	opacity: 1;
}
	#copyright img {
		max-width: 295px;
	}


/* eof */