/*
* Woongebouw Delfshaven 1.2
* Copyright 2017, Wooncommissie van woongebouw Delfshaven
* www.woongebouwdelfshaven.nl
* Latest update 20/08/2017
* Designed and Developed by www.colinvanruth.com
* manage@colinvanruth.com
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Sections
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*---------------------------- LANDING */

.navBar {
	width: 100%;
}
.container, .navContainer {
	width: 85%;
	max-width: 100%;
	margin: 5vh auto;
	z-index: 0;
}
.navContainer {
	position: relative;
}
header a, nav ul li a {
	font-family: 'Palanquin Dark', sans-serif;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
.logo {
	padding: 30px 0px 0px 0px;
	margin: 0;
	visibility: hidden;
}
nav {
	margin-top: 10px;
	padding: 20px 0px 20px 0px;
	display: none;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 5px;
}
nav svg {
	fill: #4A4A4A;
	}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
nav ul li {
	margin: 0;
	padding: 0px 0px 0px 10px;
}
nav ul li a {
	display: block;
	padding: 0.8em 0;
	margin-bottom: .15em;
	text-align: center;
	color: #4A4A4A;
	/*text-shadow: 1px 1px 4px rgba(150, 150, 150, 0.75);*/
}
.mobileNavIcon {
	font-size: 2.1em;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin-top: 0;
}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix {
	zoom: 1;
}
*:first-child+html .clearfix {
	zoom: 1; /* IE6 */
}

.dropdown {
	display: none;
}

@media screen and (min-width: 1200px) { /* 650PX MIN WIDTH MENU */
	.mobileNavIcon {
		display: none;
	}

	/* Style The Dropdown Button */
	.dropbtn {
	    color: white;
	    padding: 16px;
	    font-size: 16px;
	    border: none;
	    cursor: pointer;
	}

	/* The container <div> - needed to position the dropdown content */
	.dropdown {
	    position: relative;
	    display: inline-block;
	}

	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
	    display: none;
	    position: absolute;
	    background-color: #fff;
	    min-width: 180px;
	    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	    z-index: 1;
			border-radius: 0px;
	}

	/* Links inside the dropdown */
	.dropdown-content a {
			color: #222;
	    padding: 10px 16px;
			font-size: 15px;
	    text-decoration: none;
			text-align: left;
	    display: block;
			font-family: 'proximaNovaRegular', sans-serif;

	}

	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {
		background-color: #efefef;
		color: #222;
		font-size: 15px;
		border-radius: 0px;
		text-align: left;
		font-family: 'proximaNovaRegular', sans-serif;

	}

	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {
	    display: block;
	}

	/* Change the background color of the dropdown button when the dropdown content is shown */
	.dropdown:hover .dropbtn {
	}

	.mobilebi {
		display: none;
	}
	.navBar, .navContainer {
		clear: both;
	}
	.logo {
		float: left;
	}
	nav {
		display: block;
		background-color: rgba(255, 255, 255, 0);
	}
	nav svg {
		fill: #fff;
	}

	ul {
		display: inline-block;
		float: right;
	}
	nav ul li {
		display: inline-block;
		padding-bottom: 0;
		background-color: rgba(0, 0, 0, 0.0);

	}
	nav ul li a {
		display: inline-block;
		padding-left: 1em;
		padding-right: 1em;
		color: #fff;
	}
	nav ul li a {
		position: relative;
	}
	nav ul li a:hover {
		color: #c4c4c4;
		text-shadow: none;
	}
	nav ul li a, nav ul li a:hover {
		transition: .5s all ease;
	}
	.logo {
	visibility: visible;
	}
}
.landing {
	height: 100vh;
}
.landing h1 {
	color: #fff;
	text-align: right;
	line-height: 1em;
}
.landingTitle {
	padding-top: 20%;
	z-index: -1;
}
.landingTitle h1 {
	font-size: 64pt;
	color: #fff;
	line-height: 60pt;
	text-align: right;
	float: right;
}
.overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1;
	background-color: rgba(0, 0, 0, 0.75);
}
.landingBackground {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -2;
	background-size: cover;
	background-position: right top;
	/*background-image: url(../images/sparrow.jpg);*/
}


/*---------------------------- WOONRUIMTES */

#section1main {
	background-color: #f7f7f7;
	padding: 0% 0% 5% 0%;
	margin-top: -10rem;
}
#section1main p {
	margin-left: 10rem;
	margin-right: 10rem;
}
.section1sub {
	background-color: #FFF;
	padding: 5% 0% 5% 0%;
}
.section1sub p {
	text-align: left;
	line-height: 0;
	font-family: 'proximaNovaLight', sans-serif;
}
.section1sub h2 {
	text-align: center;
}
table {
	margin: auto;
}
.section1sub .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
	color: #fff;
	background-color: #23b755;
	outline: 0;
}
.aanbod {
	background-color: #FFF;
	padding: 0% 0% 5% 0%;
}

/*---------------------------- FACILITEITEN */

#section2main {
	background-color: #f7f7f7;
	padding: 5% 0% 5% 0%;
}
#section2main p {
	margin-left: 10rem;
	margin-right: 10rem;
	;
}
.section2sub {
	background-color: #FFF;
	padding: 5% 0% 5% 0%;
}
.section2sub p {
	text-align: center;
	line-height: 0;
	font-family: 'proximaNovaLight', sans-serif;
}
.section2sub img {
	display: block;
	margin: auto;
}
.arrow-down {
	z-index: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-top: 30px solid #fff;
	margin-left: 48%;
}
.section2slider {
	z-index: -1;
	position: relative;
	background-color: #FFF;
}

/*---------------------------- GESCHIEDENIS & OVERIG */

#section3main {
	background-color: #f7f7f7;
	padding: 5% 0% 5% 0%;
}
#section3main p {
	margin-left: 10rem;
	margin-right: 10rem;
	;
}

/*---------------------------- CONTACT */

#contact1main {
	background-color: #FFF;
	padding: 5% 0% 5% 0%;
}
.center-button {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	margin-left: auto;
	text-align: center;
}
.notice p {
	font-family: 'proximaNovaLight', sans-serif;
	font-size: 8pt;
	line-height: 10.5pt;
	text-align: center;

}
#mapkit-6777 {
	height: 400px;
	width: 100vw;
}

/*---------------------------- FOOTER */

.footer-1 {
	background-color: #fff;
	padding: 0% 0% 0% 0%;
}
.footer-1 p {
	text-align: center;
	font-size: 12pt;
}

/*---------------------------- BEWONERSINFORMATIE */

.backbar {
	position: relative;
	z-index: 2;
	background-color: #fff;
	padding: 0.7% 0% 0% 0%;
}
.backbar p {
	font-family: 'Palanquin Dark', sans-serif;
	font-weight: 500;
	font-size: 12pt;
}
.image-center {
	padding: 3rem 0px 6rem 0px;
}
.image-center img {
	display: block;
    margin: 0 auto;
    width: 25%;
}
.header-title {
	padding: 0px 0px 4rem 0px;
}
.bewonersinformatie-1 {
	background-color: #fff;
	padding: 3% 0% 5% 0%;
}
.bewonersinformatie-1 p {
	margin-left: 0rem;
	margin-right: 0rem;
}
.odd {
	padding: 2% 0% 2% 0%;
	background-color: #fafafa;
}
.odd p {
	margin-left: 0rem;
	margin-right: 0rem;
	padding-top: 0rem;
}
.odd h3 {
	font-family: 'Palanquin Dark', sans-serif;
	font-weight: 500;
	text-align: left;
	color: #4A4A4A;
}
.even {
	padding: 2% 0% 2% 0%;
	background-color: #fff;
}
.even p {
	margin-left: 0rem;
	margin-right: 0rem;
	padding-top: 0rem;
}
.even h3 {
	font-family: 'Palanquin Dark', sans-serif;
	font-weight: 500;
	text-align: left;
	color: #4A4A4A;
}
.divider {
	border-bottom: 1px solid #E1E1E1;
}

/*---------------------------- VRIENDEN VAN DE SNOR */

.section-headingIntro {
	margin-bottom: 3rem;
	text-align: center;
	color: #fff;
}
.section-descriptionIntro {
  margin-bottom: 1.2rem;
}
.section-descriptionIntro p {
  color: #fff;
  padding: 3% 15% 0% 15%;
}
.vvsIntro {
  /*background-image: url('../images/sparrow.jpg');*/
  background-size: cover;
  color: #fff;
  background-color: #ffffff;
}
.vvsIntro .section-descriptionIntro {
  margin-bottom: 4rem;
  color: #fff;
  }

.vvsIntro .notice p {
	color: #fff;
	margin-top: -20px;
}

.section {
  position: relative;
  z-index: 0;
  padding: 8rem 0 4.5rem;
  text-align: center;
}

.section-heading {
	margin-bottom: 1.2rem;
	text-align: center;
	color: #454545;
}

.section-description {
  margin-bottom: 1.2rem;
  text-align: left;
}

.vvs {
  color: #fff;
  background-color: #ffffff;
}
.vvs .section-description {
  margin-bottom: 4rem;
}
/*---------------------------- ERROR PAGES */

.page403 {
	height: 100vh;
	background-color: #f7f7f7;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url(../images/errors/403.gif);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}
.page404 {
	height: 100vh;
	background-color: #f7f7f7;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url(../images/errors/404.gif);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}
.page500 {
	height: 100vh;
	background-color: #f7f7f7;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url(../images/errors/500.gif);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}
.page502 {
	height: 100vh;
	background-color: #f7f7f7;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url(../images/errors/502.gif);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}

.success {
	height: 100vh;
	background-color: #f7f7f7;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url(../images/errors/success6.gif);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}

.error-message {
	margin-left: 10rem;
	margin-right: 10rem;
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px 4px rgba(150, 150, 150, 1);
	margin-bottom: 40px;

}
.error-title {
	color: #fff;
	text-shadow: 1px 1px 4px rgba(151, 151, 151, 0.75);
	margin-bottom: -10px;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.column, .columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}

/* For devices larger than 400px */

@media (min-width: 400px) {
	.container {
		width: 85%;
		padding: 0;
	}
}

/* For devices larger than 550px */

@media (min-width: 550px) {
	.container {
		width: 80%;
	}
	.column, .columns {
		margin-left: 4%;
	}
	.column:first-child, .columns:first-child {
		margin-left: 0;
	}
	.one.column, .one.columns {
		width: 4.66666666667%;
	}
	.two.columns {
		width: 13.3333333333%;
	}
	.three.columns {
		width: 22%;
	}
	.four.columns {
		width: 30.6666666667%;
	}
	.five.columns {
		width: 39.3333333333%;
	}
	.six.columns {
		width: 48%;
	}
	.seven.columns {
		width: 56.6666666667%;
	}
	.eight.columns {
		width: 65.3333333333%;
	}
	.nine.columns {
		width: 74.0%;
	}
	.ten.columns {
		width: 82.6666666667%;
	}
	.eleven.columns {
		width: 91.3333333333%;
	}
	.twelve.columns {
		width: 100%;
		margin-left: 0;
	}
	.one-third.column {
		width: 30.6666666667%;
	}
	.two-thirds.column {
		width: 65.3333333333%;
	}
	.one-half.column {
		width: 48%;
	}
	/* Offsets */
	.offset-by-one.column, .offset-by-one.columns {
		margin-left: 8.66666666667%;
	}
	.offset-by-two.column, .offset-by-two.columns {
		margin-left: 17.3333333333%;
	}
	.offset-by-three.column, .offset-by-three.columns {
		margin-left: 26%;
	}
	.offset-by-four.column, .offset-by-four.columns {
		margin-left: 34.6666666667%;
	}
	.offset-by-five.column, .offset-by-five.columns {
		margin-left: 43.3333333333%;
	}
	.offset-by-six.column, .offset-by-six.columns {
		margin-left: 52%;
	}
	.offset-by-seven.column, .offset-by-seven.columns {
		margin-left: 60.6666666667%;
	}
	.offset-by-eight.column, .offset-by-eight.columns {
		margin-left: 69.3333333333%;
	}
	.offset-by-nine.column, .offset-by-nine.columns {
		margin-left: 78.0%;
	}
	.offset-by-ten.column, .offset-by-ten.columns {
		margin-left: 86.6666666667%;
	}
	.offset-by-eleven.column, .offset-by-eleven.columns {
		margin-left: 95.3333333333%;
	}
	.offset-by-one-third.column, .offset-by-one-third.columns {
		margin-left: 34.6666666667%;
	}
	.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
		margin-left: 69.3333333333%;
	}
	.offset-by-one-half.column, .offset-by-one-half.columns {
		margin-left: 52%;
	}
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */

html {
	font-size: 62.5%;
	height: 100%;
	width: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	-webkit-font-smoothing: antialiased;
	font-family: 'proximaNovaRegular', sans-serif;

}
body {
	font-size: 1.5em;
	/* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.6;
	font-weight: 400;
	color: #222;
	height: 100%;
	width: 100%;
	background-color: #f7f7f7;
}
body p {
	font-size: 14pt;
	line-height: 21pt;
	padding-top: 2.5rem;
	color: #7b7b7b;
}
body h1 {
	font-family: 'DIN-Condensed-Bold', sans-serif;
	line-height: 0.8;
	font-size: 48pt;
	text-align: center;
	color: #454545;
}
body h2 {
	font-family: 'DIN-Condensed-Bold', sans-serif;
	line-height: 0.8;
	font-size: 30pt;
	text-align: left;
	color: #0EAC51;
}
body h3 {
	font-family: 'DIN-Condensed-Bold', sans-serif;
	line-height: 0.8;
	font-size: 20pt;
	text-align: left;
	color: #0EAC51;
}

::selection {
	background: #ceffe2;
	/* WebKit/Blink Browsers */
}
::-moz-selection {
	background: #ceffe2;
	/* Gecko Browsers */
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
	font-family: 'proximaNovaRegular';
	src: url('../fonts/ProximaNova-Regular.otf');
	format('opentype');
}
@font-face {
	font-family: 'proximaNovaLight';
	src: url('../fonts/ProximaNova-Light.otf');
	format('opentype');
}
@font-face {
	font-family: 'DIN-Condensed-Bold';
	src: url('../fonts/DIN-Condensed-Bold.ttf');
	format('truetype');
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 300;
}
h1 {
	font-size: 4.0rem;
	line-height: 1.2;
	letter-spacing: -.1rem;
}
h2 {
	font-size: 3.6rem;
	line-height: 1.25;
	letter-spacing: -.1rem;
}
h3 {
	font-size: 3.0rem;
	line-height: 1.3;
	letter-spacing: -.1rem;
}
h4 {
	font-size: 2.4rem;
	line-height: 1.35;
	letter-spacing: -.08rem;
}
h5 {
	font-size: 1.8rem;
	line-height: 1.5;
	letter-spacing: -.05rem;
}
h6 {
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0;
}

/* Larger than phablet */

@media (min-width: 550px) {
	h1 {
		font-size: 5.0rem;
	}
	h2 {
		font-size: 4.2rem;
	}
	h3 {
		font-size: 3.6rem;
	}
	h4 {
		font-size: 3.0rem;
	}
	h5 {
		font-size: 2.4rem;
	}
	h6 {
		font-size: 1.5rem;
	}
}
p {
	margin-top: 0;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a {
	text-decoration: none;
	font-weight: bold;
	color: #0EAC51;
}
a:hover {
	color: #007e34;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
	font-family: 'DIN-Condensed-Bold', sans-serif;
	display: inline-block;
	height: 50px;
	padding: 0 30px;
	color: #0EAC51;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	line-height: 55px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border-radius: 8px;
	border: 1px solid #0EAC51;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .1s ease-in-out;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
	color: #fff;
	border-color: #0EAC51;
	background-color: #0EAC51;
	outline: 0;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: .3s ease-in-out;
	transition: .1s ease-in-out;
}
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
	color: #FFF;
	background-color: #0EAC51;
	border-color: #0EAC51;
}
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
	color: #FFF;
	background-color: #0EAC51;
	border-color: #0EAC51;
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
	height: 38px;
	padding: 6px 10px;
	/* The 6px vertically centers text on FF, ignored by Webkit */
	background-color: #fff;
	border: 1px solid #D1D1D1;
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
}

/* Removes awkward default styles on some inputs for iOS */

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
textarea {
	min-height: 150px;
	padding-top: 6px;
	padding-bottom: 6px;
}
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
	border: 1px solid #33C3F0;
	outline: 0;
}
label, legend {
	/* display: block; */
	margin-bottom: .5rem;
	font-weight: 600;
	padding-left: 10px;
}
fieldset {
	padding: 0;
	border-width: 0;
}
input[type="checkbox"], input[type="radio"] {
	display: inline;
}
label>.label-body {
	display: inline-block;
	margin-left: .5rem;
	font-weight: normal;
}

.radiowrapper {
}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

ul {
	list-style: circle inside;
}
ol {
	list-style: decimal inside;
}
ol, ul {
	padding-left: 0;
	margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
	margin: 1.5rem 0 1.5rem 3rem;
	font-size: 90%;
}
li {
	margin-bottom: 1rem;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */

code {
	padding: .2rem .5rem;
	margin: 0 .2rem;
	font-size: 90%;
	white-space: nowrap;
	background: #F1F1F1;
	border: 1px solid #E1E1E1;
	border-radius: 4px;
}
pre>code {
	display: block;
	padding: 1rem 1.5rem;
	white-space: pre;
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

th, td {
	padding: 10px 10px;
	text-align: left;
	border-bottom: 1px solid #E1E1E1;
}
th:first-child, td:first-child {
	padding-left: 0;
}
th:last-child, td:last-child {
	padding-right: 0;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

button, .button {
	margin-bottom: 1rem;
}
input, textarea, select, fieldset {
	margin-bottom: 1.5rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
	margin-bottom: 2.5rem;
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-full-width {
	width: 100%;
	box-sizing: border-box;
}
.u-max-full-width {
	max-width: 100%;
	box-sizing: border-box;
}
.u-pull-right {
	float: right;
}
.u-pull-left {
	float: left;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */

hr {
	margin-top: 3rem;
	margin-bottom: 3.5rem;
	border-width: 0;
	border-top: 1px solid #E1E1E1;
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Self Clearing Goodness */

.container:after, .row:after, .u-cf {
	content: "";
	display: table;
	clear: both;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Smaller than mobile */

@media (max-width: 414px) {

	body h2 {
		font-family: 'DIN-Condensed-Bold', sans-serif;
		line-height: 0.8;
		font-size: 30pt;
		text-align: center;
		color: #0EAC51;
	}
	.landingTitle h1 {
		font-size: 45pt;
		color: #fff;
		line-height: 40pt;
		text-align: right;
		float: right;
	}
	.landingTitle {
		padding-top: 80%;
	}
	.backbar {
		background-color: #fff;
		padding: 2.5% 0% 0% 0%;
	}
	#section1main {
		margin-top: -15rem;
	}
	#section1main p {
		margin-left: 0rem;
		margin-right: 0rem;
	}
	.section1sub {
		padding: 20% 0% 5% 0%
	}
	.section1sub p {
		text-align: left;
		line-height: 0;
		font-family: 'proximaNovaLight', sans-serif;
	}
	.aanbod {
		padding-bottom: 20%;
	}
	#section2main {
		padding: 20% 0% 10% 0%;
	}
	#section2main p {
		margin-left: 0rem;
		margin-right: 0rem;
	}
	.section2sub {
		padding: 20% 0% 5% 0%;
	}
	.section2sub {
		text-align: center;
	}
	#section3main {
		padding: 20% 0% 5% 0%;
	}
	#section3main p {
		margin-left: 0rem;
		margin-right: 0rem;
	}
	#contact1main {
		padding: 20% 0% 5% 0%;
	}
	.center-button {
		position: relative;
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
		padding: 0 20px;
		box-sizing: border-box;
		margin-left: auto;
		text-align: center;
	}
	.arrow-down {
		position: absolute;
		width: 0;
		height: 0;
		border-left: 30px solid transparent;
		border-right: 30px solid transparent;
		border-top: 30px solid #fff;
		margin-left: 37%;
	}
	.fotorama {
		margin-left: -10%;
	}
	#section3main .fotorama {
		margin-left: 0%;
	}
.error-message {
	margin-left: 0rem;
	margin-right: 0rem;
	text-align: center;
	color: #fff;
	padding-bottom: 5%;
}
.section-descriptionIntro p {
  padding: 0% 0% 0% 0%;
}

.odd {
	padding: 10% 0% 5% 0%;
	background-color: #fafafa;
}

.even {
	padding: 10% 0% 5% 0%;
	background-color: #fff;
}

.bewonersinformatie-1 h1 {
	font-size: 40pt;
}

}

@media (max-width: 700px) {
@media (min-width: 667px) {
	.landingTitle {
		padding-top: 20%;
	}
	.landingTitle h1 {
		font-size: 40pt;
		color: #fff;
		line-height: 35pt;
		text-align: right;
		float: right;
	}
	#section1main {
		margin-top: -6rem;
	}
	#section1main p {
		margin-left: 0rem;
		margin-right: 0rem;
	}
	.section1sub p {
		font-size: 10pt;
	}
	#section2main p {
		margin-left: 0rem;
		margin-right: 0rem;
	}
	.section2sub p {
		font-size: 10pt;
	}
}
}

@media (max-height: 414px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (max-width: 375px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}