/* 

	Theme Name: Duidelijk Rijssen-Holten
	Theme URI: http://www.duidelijk-rijssen-holten.nl
	Description: Duidelijk Rijssen-Holten
	Version: 1.0  
	Author: Bloemendaal in Vorm
	Author URI: http://www.bloemendaalinvorm.nl
	
*/
/*-----------------------------------------------------------------------------------

	0.	Clearfix
	1.  Basics
	
-----------------------------------------------------------------------------------*/
/*---------------------------------------------- 
0. Clearfix
------------------------------------------------*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}
.clearfix {
  *display: inline-block;
  height: 1%;
}
.clear {
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  width: 100%;
}

/*---------------------------------------------- 
1. Basics
------------------------------------------------*/

/* Typography --------------------------------- */

body {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.6;
}

.text-300 { font-weight: 300 !important; }
.text-500 { font-weight: 500 !important; }
.text-700 { font-weight: 700 !important; }
.text-900 { font-weight: 900 !important; }
p strong { 	font-weight: 900 !important; }

p.lead {
	font-size: 16px;
}

h1, .h1 { font-size: 26px; }
h2, .h2 { font-size: 22px; }
h3, .h3 { font-size: 20px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 16px; }

@media all and (min-width: 768px) {
	body {
		font-size: 16px;
	}
	
	h1, .h1 { font-size: 28px; }
	h2, .h2 { font-size: 24px; }
	h3, .h3 { font-size: 22px; }
	h4, .h4 { font-size: 20px; }
	h5, .h5 { font-size: 18px; }
	
	p.lead {
		font-size: 18px;
	}
}

@media all and (min-width: 992px) {
	body {
		font-size: 18px;
	}
	
	h1, .h1 { font-size: 30px; }
	h2, .h2 { font-size: 26px; }
	h3, .h3 { font-size: 24px; }
	h4, .h4 { font-size: 22px; }
	h5, .h5 { font-size: 20px; }
	
	p.lead {
		font-size: 20px;
	}
}

@media all and (min-width: 1200px) {
	h1, .h1 { font-size: 34px; }
	h2, .h2 { font-size: 30px; }
	h3, .h3 { font-size: 26px; }
	h4, .h4 { font-size: 24px; }
	h5, .h5 { font-size: 22px; }
}

/* Colors ------------------------------------- */
.text-white { color: #fff; }
.text-gray { color: #292422; } 
.text-orange { color: #ea6411; }

/* Links -------------------------------------- */
a {
	-webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;	
}

a:hover, a:focus {
	text-decoration: none;	
}

/* Buttons ------------------------------------ */
.btn {
	font-size: 18px;
	font-weight: 800;
	padding: 10px 20px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.btn-link,
.btn-link:hover,
.btn-link:active,
.btn-link:focus {
	padding: 0;
	text-decoration: none;
}

.btn-orange { background: #ea6411; color: #fff; }
.btn-orange:hover { background: #ea6411; color: #fff; }

/* Backgrounds ------------------------------- */
.bg-gray { background: #ebebeb; }
.bg-white { background: #fff; }
.bg-orange { background: #ea6411; } 
.bg-image { 
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat; 
}

/* Margins ------------------------------------ */
.mar-top-0 { margin-top: 0; }
.mar-top-10 { margin-top: 10px; }
.mar-top-15 { margin-top: 15px; }
.mar-top-20 { margin-top: 20px; }
.mar-top-25 { margin-top: 25px; }
.mar-top-30 { margin-top: 30px; }

.mar-bottom-0 { margin-bottom: 0; }
.mar-bottom-10 { margin-bottom: 10px; }
.mar-bottom-15 { margin-bottom: 15px; }
.mar-bottom-20 { margin-bottom: 20px; }
.mar-bottom-25 { margin-bottom: 25px; }
.mar-bottom-30 { margin-bottom: 30px; }

.mar-left-0 { margin-left: 0; }
.mar-left-10 { margin-left: 10px; }
.mar-left-15 { margin-left: 15px; }
.mar-left-20 { margin-left: 20px; }
.mar-left-25 { margin-left: 25px; }
.mar-left-30 { margin-left: 30px; }

.mar-right-0 { margin-right: 0; }
.mar-right-10 { margin-right: 10px; }
.mar-right-15 { margin-right: 15px; }
.mar-right-20 { margin-right: 20px; }
.mar-right-25 { margin-right: 25px; }
.mar-right-30 { margin-right: 30px; }

@media all and (max-width: 767px) {
	.col-xs-mar-15 {
		margin-top: 15px;
	}
	.col-xs-mar-30 {
		margin-top: 30px;
	}
}

/* Paddings ----------------------------------- */
.pad-10 { padding: 10px; }
.pad-15 { padding: 15px; }
.pad-20 { padding: 20px; }
.pad-25 { padding: 25px; }
.pad-30 { padding: 30px; }

.pad-top-10 { padding-top: 10px; }
.pad-top-15 { padding-top: 15px; }
.pad-top-20 { padding-top: 20px; }
.pad-top-25 { padding-top: 25px; }
.pad-top-30 { padding-top: 30px; }
.pad-top-40 { padding-top: 40px; }
.pad-top-50 { padding-top: 50px; }
.pad-top-60 { padding-top: 60px; }
.pad-top-70 { padding-top: 70px; }
.pad-top-80 { padding-top: 80px; }
.pad-top-90 { padding-top: 90px; }
.pad-top-100 { padding-top: 50px; }

.pad-bottom-10 { padding-bottom: 10px; }
.pad-bottom-15 { padding-bottom: 15px; }
.pad-bottom-20 { padding-bottom: 20px; }
.pad-bottom-25 { padding-bottom: 25px; }
.pad-bottom-30 { padding-bottom: 30px; }
.pad-bottom-40 { padding-bottom: 40px; }
.pad-bottom-50 { padding-bottom: 50px; }
.pad-bottom-60 { padding-bottom: 60px; }
.pad-bottom-70 { padding-bottom: 70px; }
.pad-bottom-80 { padding-bottom: 80px; }
.pad-bottom-90 { padding-bottom: 90px; }
.pad-bottom-100 { padding-bottom: 50px; }

.pad-left-10 { padding-left: 10px; }
.pad-left-15 { padding-left: 15px; }
.pad-left-20 { padding-left: 20px; }
.pad-left-25 { padding-left: 25px; }
.pad-left-30 { padding-left: 30px; }

.pad-right-10 { padding-right: 10px; }
.pad-right-15 { padding-right: 15px; }
.pad-right-20 { padding-right: 20px; }
.pad-right-25 { padding-right: 25px; }
.pad-right-30 { padding-right: 30px; }

.row-nopadding { padding: 0; }
.row-nopadding, .col-nopadding { padding: 0; }

@media all and (min-width: 768px){
	.pad-top-100 { padding-top: 100px; }
	.pad-bottom-100 { padding-bottom: 100px; }
}

/* Google maps -------------------------------- */
.acf-map {
	width: 100%;
	height: 500px;
}

/* fixes potential theme css conflict */
.acf-map img {
   max-width: inherit !important;
}

/* Embed container ---------------------------- */
.embed-container { 
	position: relative; 
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Flexbox ------------------------------------- */
@media all and (min-width: 768px) {
div.flexbox {
	height: 100%;	
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;	
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;	
}

.row-flex, .row-flex > div[class*='col-'] {  
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex:1 1 auto;
}

.row-flex-wrap {
	-webkit-flex-flow: row wrap;
	align-content: flex-start;
	flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
	margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
	width:100%;
}

.col-flex {
	display: flex;
	display: -webkit-flex;
	flex: 1 100%;
	flex-flow: column nowrap;
}

.grow-flex {
	display: flex;
	-webkit-flex: 2;
	flex: 2;
}
}

.svg-label {
	max-width: 160px;
}

.svg-brand {
	max-width: 565px;
}

.section-overlay-top {
	position: relative;
	overflow: hidden;
}

.section-overlay-top::before {
	content: '';
	display: block;
	background-image: url('../images/section-overlay-top.svg');
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	min-height: 120px;
}
.section-overlay-bottom::after {
	content: '';
	display: block;
	background-image: url('../images/section-overlay-bottom.svg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	min-height: 60px;
}

.overlay-padding {
	padding: 80px 0;
}

.overlay-padding-top {
	padding-top: 80px;
}

@media all and (min-width: 768px) {
	.svg-label {
		max-width: 220px;
	}
	
	.overlay-padding {
		padding: 100px 0;
	}

	.overlay-padding-top {
		padding-top: 100px;
	}
	
	.section-overlay-top::before {
		min-height: 130px;
	}
	.section-overlay-bottom::after {
		min-height: 78px;
	}
}	

@media all and (min-width: 992px) {
	.svg-label {
		max-width: 260px;
	}
	
	.overlay-padding {
		padding: 120px 0;
	}

	.overlay-padding-top {
		padding-top: 120px;
	}
	
	.section-overlay-top::before {
		min-height: 158px;
	}
	.section-overlay-bottom::after {
		min-height: 95px;
	}
}	

@media all and (min-width: 1200px) {
	.overlay-padding {
		padding: 140px 0;
	}

	.overlay-padding-top {
		padding-top: 140px;
	}
	
	.section-overlay-top::before {
		min-height: 238px;
	}
	.section-overlay-bottom::after {
		min-height: 142px;
	}
}	

@media all and (min-width: 1920px) {
	.overlay-padding {
		padding: 160px 0;
	}

	.overlay-padding-top {
		padding-top: 160px;
	}
	
	.section-overlay-top::before {
		min-height: 254px;
	}
	.section-overlay-bottom::after {
		min-height: 150px;
	}
}

@media all and (min-width: 2560px) {
	.overlay-padding {
		padding: 200px 0;
	}

	.overlay-padding-top {
		padding-top: 200px 0 0 0;
	}
	
	.section-overlay-top::before {
		min-height: 338px;
	}
	.section-overlay-bottom::after {
		min-height: 202px;
	}
}

/*---------------------------------------------- 
2. Header
------------------------------------------------*/
#header {
	position: relative;
	min-height: 380px;
}

	#header .container {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		bottom: -30px;	
	}
		
		#header .container .svg-label-wrapper {
			text-align: right;
		}

	#header .header-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		bottom: -2px;
		background-image: url('../images/header-overlay.svg');
		background-size: contain;
		background-position: center bottom;
		background-repeat: no-repeat;
		z-index: 2;
	}

@media all and (min-width: 768px) {
	#header .container {
		bottom: 0;	
	}
	
	#header {
		min-height: 580px;
	}
}	

@media all and (min-width: 992px) {
	#header {
		min-height: 780px;
	}
}	

@media all and (min-width: 1200px) {
	#header {
		min-height: 1020px;
	}
}	

/*---------------------------------------------- 
3. Sections
------------------------------------------------*/
.row-title-svg {
	margin-bottom: 10px;
}

@media all and (min-width: 768px) {
	.row-title-svg {
		margin-bottom: 30px;
	}
}

/* Sterke punten -------------------------------*/
#sterke-punten {}

	#sterke-punten .row-title-svg img {
		max-width: 305px;
		margin-bottom: 30px;
	}

	#sterke-punten .sterk-punt {
		position: relative;
	}
		
	#sterke-punten .sterk-punt + .sterk-punt {
		margin-top: 40px;
	}

		#sterke-punten .sterk-punt .h2 {
			font-size: 22px;
			display: block;
		}

@media all and (min-width: 768px) {
	#sterke-punten .row-title-svg img {
		max-width: 710px;
		margin-bottom: 30px;
	}
	
	#sterke-punten .sterk-punt.odd::before {
		content: '';
		display: block;
		position: absolute;
		top: -30px;
		left: -90px;
		width: 80px;
		height: 80px;
		background: url('../images/odd-stripe.svg');
	}
	
	#sterke-punten .sterk-punt.odd.first::before {
		content: '';
		display: none;
	}

	#sterke-punten .sterk-punt.even::before {
		content: '';
		display: block;
		position: absolute;
		top: -30px;
		right: -90px;
		width: 80px;
		height: 80px;
		background: url('../images/even-stripe.svg');
	}
	
	#sterke-punten .sterk-punt.even {
		text-align: right;
	}
	
		#sterke-punten .sterk-punt .h2 {
			font-size: 30px;
		}
}

#wist-u-ook-dat {}

	#wist-u-ook-dat .row-title-svg img { 
		max-width: 120px;
	}

@media all and (min-width: 768px) {
	#wist-u-ook-dat .row-title-svg img { 
		max-width: 260px;
	}
}


#duidelijke-doelen {}

	#duidelijke-doelen .row-title-svg img { 
		max-width: 215px;
	}

@media all and (min-width: 768px) {
	#duidelijke-doelen .row-title-svg img { 
		max-width: 436px;
	}
}

#klaar-dus {}

	#klaar-dus .row-title-svg img { 
		max-width: 245px;
	}

@media all and (min-width: 768px) {
	#klaar-dus .row-title-svg {
		text-align: right;
	}
	
	#klaar-dus .row-title-svg img { 
		max-width: 590px;
	}
}

/*---------------------------------------------- 
4. Footer
------------------------------------------------*/
#footer {
	position: relative;
}

	#footer .row-title-svg img {
		max-width: 140px;
		margin-bottom: 20px;
	}

	#footer p,
	#footer h4,
	#footer ul li span,
	#footer ul li a {
		color: #fff;
	}

#footer-image {
	position: relative;
	min-height: 320px;
}
	
	#footer-image .footer-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		top: -2px;
		background-image: url('../images/footer-overlay.svg');
		background-size: contain;
		background-position: center top;
		background-repeat: no-repeat;
		z-index: 2;
	}

#footer-base span {
	font-size: 14px;
	color: #444;
}
	
	#footer-base span a {
		color: #444;
	}

@media all and (min-width: 768px) {
	#footer .row-title-svg img {
		max-width: 325px;
		margin-bottom: 30px;
	}
	
	#footer-image {
		min-height: 480px;
	}
}	

@media all and (min-width: 992px) {
	#footer-image {
		min-height: 580px;
	}
}	

@media all and (min-width: 1200px) {
	#footer-image {
		min-height: 780px;
	}
}