/*
Theme Name: AllroundWeb Child
Theme URI: http://www.allroundweb.nl
Description: Designed by <a href="http://allroundweb.nl">Allround Web</a>.
Author: Rob Abrahams
Version: 1.0.0
Template: allroundweb-theme
*/

/* -----------------------------
*  Officiele kleuren van Provincie-utrecht
*
*  Basis kleuren:
*  Rood: rgb(229, 53, 44)
*  Zwart: rgb(0, 0, 0)
*
*  Ondersteunende kleuren:
*  Blauw: rgb(0, 152, 212)
*  Groen: rgb(131, 184, 26)
*  Oranje: rgb(243, 153, 16)
-------------------------------*/

/* -----------------------------
*  Custom Fonts van Provincie-utrecht
-------------------------------*/
@font-face {
    font-family: News Gothic Std;
    font-style: normal;
    font-weight: 400;
    src: local("News Gothic Std Regular"), local("News-Gothic-Std-Regular"),
        url(./fonts/NewsGothicStd.woff2) format("woff2"),
        url(./fonts/NewsGothicStd.woff) format("woff"),
        url(./fonts/NewsGothicStd.ttf) format("truetype");
}

@font-face {
    font-family: News Gothic Std;
    font-style: normal;
    font-weight: 700;
    src: local("News Gothic Std Bold"), local("News-Gothic-Std-Bold"),
        url(./fonts/NewsGothicStd-Bold.woff2) format("woff2"),
        url(./fonts/NewsGothicStd-Bold.woff) format("woff"),
        url(./fonts/NewsGothicStd-Bold.ttf) format("truetype");
}
:focus {
	outline: 1px solid blue !important;
}
area:focus {
    outline: 1px solid blue !important;
}
.img-stap1 {
	margin: auto;
}
/* -----------------------------
*  Custom Colors from diogram van Provincie-utrecht
-------------------------------*/
.colorbg-link1 {
    background-color: #F49612;
}

.colorbg-link2 {
    background-color: #21A13F;
}

.colorbg-link3 {
    background-color: #8DBF1E;
}

.colorbg-link4 {
    background-color: #0197D8;
}

.colorbg-link5 {
    background-color: #A04111;
}

.colorbg-link6 {
    background-color: #D94E84;
}

.colorbg-link7 {
    background-color: #744E9B;
}

.colorbg-link8 {
    background-color: #334455;
}

/* -----------------------------
*  Main page color by selected "Pagina soort"
-------------------------------*/
.stap2-content main.link1 .h2-klimaatadaptatie,
.stap2-content main.link1 .h2-programma,
.stap2-content main.link1 .aw-programma-li,
.stap2-content main.link1 .aw-programmas-ul a,
.stap3-content main.link1 h2 {
    color: #000000;
}

.stap3-content main.link1 .aw-periodes-inner.active,
.stap3-content main.link1 .aw-jaartal-inner.active,
.stap3-content main.link1 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active,
.stap3-content main.link1 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
 	background-color: #F49612;
/* 	border-top: 10px solid #F49612;
	border-bottom: 10px solid #F49612; */
}
/* .stap3-content main.link1 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
	border-left: 10px solid #F49612;
}
.stap3-content main.link1 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
	border-right: 10px solid #F49612;
} */

.stap2-content main.link1 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #F49612 !important;
}

.stap2-content main.link1 .aw-programma-li {
	border: 1px solid #F49612;
}

.stap2-content main.link2 .h2-klimaatadaptatie,
.stap2-content main.link2 .h2-programma,
.stap2-content main.link2 .aw-programma-li,
.stap2-content main.link2 .aw-programmas-ul a,
.stap3-content main.link2 h2 {
    color: #000000;
}

.stap3-content main.link2 .aw-periodes-inner.active,
.stap3-content main.link2 .aw-jaartal-inner.active,
.stap3-content main.link2 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active,
.stap3-content main.link2 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
	background-color: #21A13F;
/* 	border-top: 10px solid #21A13F;
	border-bottom: 10px solid #21A13F; */
}
/* .stap3-content main.link2 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
	border-left: 10px solid #21A13F;
}
.stap3-content main.link2 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
	border-right: 10px solid #21A13F;
} */
 
.stap2-content main.link2 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #21A13F !important;
}

.stap2-content main.link2 .aw-programma-li {
	border: 1px solid #21A13F;
}

.stap2-content main.link3 .h2-klimaatadaptatie,
.stap2-content main.link3 .h2-programma,
.stap2-content main.link3 .aw-programma-li,
.stap2-content main.link3 .aw-programmas-ul a,
.stap3-content main.link3 h2 {
    color: #000000;
}

.stap3-content main.link3 .aw-periodes-inner.active,
.stap3-content main.link3 .aw-jaartal-inner.active,
.stap3-content main.link3 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active,
.stap3-content main.link3 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
    background-color: #8DBF1E; 
/* 	border-top: 10px solid #8DBF1E;
	border-bottom: 10px solid #8DBF1E; */
}
/* .stap3-content main.link3 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
	border-left: 10px solid #8DBF1E;
}
.stap3-content main.link3 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
	border-right: 10px solid #8DBF1E;
} */

.stap2-content main.link3 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #8DBF1E !important;
}

.stap2-content main.link3 .aw-programma-li {
	border: 1px solid #8DBF1E;
}

.stap2-content main.link4 .h2-klimaatadaptatie,
.stap2-content main.link4 .h2-programma,
.stap2-content main.link4 .aw-programma-li,
.stap2-content main.link4 .aw-programmas-ul a,
.stap3-content main.link4 h2 {
    color: #000000;
}

.stap3-content main.link4 .aw-periodes-inner.active,
.stap3-content main.link4 .aw-jaartal-inner.active,
.stap3-content main.link4 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active,
.stap3-content main.link4 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
    background-color: #0197D8;
/* 	border-top: 10px solid #0197D8;
	border-bottom: 10px solid #0197D8; */
}
/* .stap3-content main.link4 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
	border-left: 10px solid #0197D8;
}
.stap3-content main.link4 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
	border-right: 10px solid #0197D8;
} */

/* .stap3-content main.link4 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk:first-child {
	border-top-right-radius	:0;
	border-bottom-right-radius	:0;
	font-weight:normal;
	
}

.stap3-content main.link4 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk:last-child {
	border-top-right-radius	:35px;
	border-bottom-right-radius	:35px;
	color:#fff;
} */

.stap2-content main.link4 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #0197D8 !important;
}

.stap2-content main.link4 .aw-programma-li {
	border: 1px solid #0197D8;
}

.stap2-content main.link5 .h2-klimaatadaptatie,
.stap2-content main.link5 .h2-programma,
.stap2-content main.link5 .aw-programma-li,
.stap2-content main.link5 .aw-programmas-ul a,
.stap3-content main.link5 h2 {
    color: #000000;
}

.stap3-content main.link5 .aw-periodes-inner.active,
.stap3-content main.link5 .aw-jaartal-inner.active,
.stap3-content main.link5 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active,
.stap3-content main.link5 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
	background-color: #A04111;
/* 	border-top: 10px solid #A04111;
	border-bottom: 10px solid #A04111; */
}
/* .stap3-content main.link5 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
	border-left: 10px solid #A04111;
}
.stap3-content main.link5 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
	border-right: 10px solid #A04111;
} */

.stap2-content main.link5 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #A04111 !important;
}

.stap2-content main.link5 .aw-programma-li {
	border: 1px solid #A04111;
}

.stap2-content main.link6 .h2-klimaatadaptatie,
.stap2-content main.link6 .h2-programma,
.stap2-content main.link6 .aw-programma-li,
.stap2-content main.link6 .aw-programmas-ul a,
.stap3-content main.link6 h2 {
    color: #000000;
}

.stap3-content main.link6 .aw-periodes-inner.active,
.stap3-content main.link6 .aw-jaartal-inner.active,
.stap3-content main.link6 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active,
.stap3-content main.link6 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
	background-color: #D94E84;
/* 	border-top: 10px solid #D94E84;
	border-bottom: 10px solid #D94E84; */
}
/* .stap3-content main.link6 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
	border-left: 10px solid #D94E84;
}
.stap3-content main.link6 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
	border-right: 10px solid #D94E84;
} */

.stap2-content main.link6 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #D94E84 !important;
}

.stap2-content main.link6 .aw-programma-li {
	border: 1px solid #D94E84;
}

.stap2-content main.link7 .h2-klimaatadaptatie,
.stap2-content main.link7 .h2-programma,
.stap2-content main.link7 .aw-programma-li,
.stap2-content main.link7 .aw-programmas-ul a,
.stap3-content main.link7 h2 {
    color: #000000;
}

.stap3-content main.link7 .aw-periodes-inner.active,
.stap3-content main.link7 .aw-jaartal-inner.active,
.stap3-content main.link7 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active,
.stap3-content main.link7 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
	background-color: #744E9B;
/* 	border-top: 10px solid #744E9B;
	border-bottom: 10px solid #744E9B; */
}
/* .stap3-content main.link7 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
	border-left: 10px solid #744E9B;
}
.stap3-content main.link7 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
	border-right: 10px solid #744E9B;
}
 */
.stap2-content main.link7 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #744E9B !important;
}

.stap2-content main.link7 .aw-programma-li {
	border: 1px solid #744E9B;
}

.stap2-content main.link8 .h2-klimaatadaptatie,
.stap2-content main.link8 .h2-programma,
.stap2-content main.link8 .aw-programma-li,
.stap2-content main.link8 .aw-programmas-ul a,
.stap3-content main.link8 h2 {
    color: #334455;
}

.stap3-content main.link8 .aw-periodes-inner.active,
.stap3-content main.link8 .aw-jaartal-inner.active,
.stap3-content main.link8 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active,
.stap3-content main.link8 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
	background-color: #334455;
/* 	border-top: 10px solid #334455;
	border-bottom: 10px solid #334455; */
}
/* .stap3-content main.link8 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
	border-left: 10px solid #334455;
}
.stap3-content main.link8 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
	border-right: 10px solid #334455;
} */

.stap3-content main.link8 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
	color: #ffffff;
}

.stap2-content main.link8 .aw-programma-li {
	border: 1px solid #334455;
}

.stap2-content main.link8 .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke: #90a6bc !important;
}



/* -----------------------------
*  Algemeen
-------------------------------*/
html,
body {
    padding: 0;
    margin: 0;
    font-family: News Gothic Std, Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.5;
}

h1 {
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
    color: rgb(229, 53, 44);
}

h2 {
    font-size: 1.3em;
    margin: 0 0 0.5em 0;
    color: rgb(229, 53, 44);
}

h3 {
    font-size: 1.1em;
    margin: 0 0 0.5em 0;
    color: rgb(229, 53, 44);
}

h4 {
    font-size: 1em;
    margin: 0 0 0.5em 0;
    color: rgb(0, 0, 0);
}

/* -----------------------------
*  AW FLEX DIRS
-------------------------------*/
.aw-flex-wrapper {
    display: flex;
    position: relative;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: flex-start;
    align-content: center;
}

body .aw-flex-wrapper.aw-sub-content-vertical {
    flex-direction: column;
}

.aw-flex-base {
    display: block;
    position: relative;
    margin: 0;
    overflow: auto;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 20px;
    box-sizing: border-box;
}

body .aw-flex-1 {
    flex: 1;
}

body .aw-flex-2 {
    flex: 2;
    flex-grow: 2;
    flex-shrink: 2;
}

body .aw-flex-3 {
    flex: 3;
    flex-grow: 3;
    flex-shrink: 3;
}

body .aw-flex-4 {
    flex: 4;
    flex-grow: 4;
    flex-shrink: 4;
}

body .aw-flex-5 {
    flex: 5;
    flex-grow: 5;
    flex-shrink: 5;
}

body .aw-flex-6 {
    flex: 6;
    flex-grow: 6;
    flex-shrink: 6;
}

body .aw-flex-7 {
    flex: 7;
    flex-grow: 7;
    flex-shrink: 7;
}

body .aw-flex-8 {
    flex: 8;
    flex-grow: 8;
    flex-shrink: 8;
}

@media (max-width: 992px) {
    .aw-flex-wrapper {
        display: flex;
        position: relative;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-start;
        align-content: flex-start;
    }
}

/* -----------------------------
*  Header
-------------------------------*/
.site-header {
    padding: 10px;
	min-height: 128px;
}

.site-header .aw-flex-wrapper {
    max-height: 80px;
    height: 80px;
    align-items: flex-end;
}

.site-header .aw-flex-wrapper .page-title-header {
    font-size: 2em;
    line-height: 0.9em;
    font-weight: bold;
    text-align: left;
    padding: 0;
    box-sizing: border-box;
}

.site-header .aw-flex-wrapper a {
    position: relative;
    width: 100%;
    display: block;
    text-align: left;
}

.site-header .aw-flex-wrapper img {
    width: 100%;
    max-width: 450px;
    height: 100%;
    aspect-ratio: auto;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
}
.breadcrumb {
	font-size: 12px;
	color: #000000;
	padding: 15px;
}
.breadcrumb .current {
	font-weight: 700;
}
.breadcrumb a {
	color: #000000;
	font-weight: 400;
	text-decoration: none;
}
@media screen and (min-width: 993px) and (max-width: 1263px) {
	.site-header .aw-flex-wrapper .page-title-header {
		max-width: 500px;
		text-align: center;
		line-height: 1em;
	}
	.site-header .aw-flex-wrapper {
		max-height: 105px;
		height: 105px;
	}
	.site-header {
		min-height: 155px;
	}

}


/* -----------------------------
*  Stap 1 CSS
-------------------------------*/
.stap1-content {
    margin: 0;
    padding: 0;
}

.page-template-page-stap1 header {
    height: 100px;
    max-height: 100px;
    box-sizing: border-box;
    background: #ffffff;
}

.page-template-page-stap1 .content-area,
.page-template-page-stap1 .content-area .aw-main-content-wrapper {
    height: calc(100vh - 160px);
    max-height: calc(100vh - 160px);
    box-sizing: border-box;
}

.stap1-content .aw-flex-wrapper {
    align-items: stretch;
}

.stap1-content .aw-content-blok-links {
    background-color: #f9f9f9;
    border-radius: 10px;
}

.stap1-content .aw-content-blok-rechts {
    text-align: center;
}

.stap1-content #awmapster_wrap_0 {
    display: inline-block !important;
}

.aw-hoe-werkt-het-wrap {
    width: 435px;
    margin-top: 10px;
    font-size: 0.65em;
    color: #000000;
    cursor: pointer !important;
    display: inline-block;
	position: fixed !important;
	bottom: 15px;
	right: 30px;
	text-align: left;
}

.aw-hoe-werkt-het-wrap .aw-hoe-werkt-het-icon {
	width: 45px;
	height: 45px;
	display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    font-size: 30px;
    padding: 0;
    margin-right: 0;
	float: right;
}

.aw-hoe-werkt-het-wrap[data-balloon-length="large"]:after {
    width: 100% !important;
    font-size: 0.9em;
    line-height: 1.3em;
}
.pie_subtitle {
	font-size: 20px;
	font-weight: 700;
}

/* -----------------------------
*  Stap 2 CSS
-------------------------------*/
.stap2-content {
    margin: 0;
    padding: 0;
}

.page-template-page-stap2 .content-area,
.page-template-page-stap2 .content-area .aw-main-content-wrapper {
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    box-sizing: border-box;
}

.stap2-content .flex-inner-content-vertical {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.stap2-content .aw-bar-wrapper {
    display: block;
    width: 100%;
    max-width: 20vw;
    height: 10vw !important;
    overflow: hidden !important;
    position: relative;
	margin: auto;
}

.stap2-content #awmapster_wrap_0 {
    display: inline-block !important;
}

.stap2-content .aw-bar-wrapper>.gauge-container {
    margin: 0;
}

.stap2-content .aw-bar-wrapper .gauge-container.two>.gauge .dial {
    stroke: #000;
    stroke-width: 10;
}

.stap2-content .aw-bar-wrapper .gauge-container.two>.gauge .value {
    stroke-dasharray: none;
    stroke-width: 10;
}

.stap2-content .aw-bar-wrapper .gauge-container.two>.gauge .value-text {
    fill: rgb(91, 91, 91);
    font-weight: 100;
    font-size: 1em;
}

.stap2-content .aw-programmas-ul {
    padding: 0;
}

.stap2-content .aw-programma-li {
    /* padding: 15px 15px 15px 40px; */
    margin: 10px 0;
    list-style-type: none;
    /* box-shadow: 1px 1px 8px 1px rgb(69 69 69 / 10%); */
} 
.stap2-content .aw-programma-li a {
	padding: 15px 15px 15px 40px;
}
.stap2-content .aw-programma-li .li-icon-left-star {
    position: absolute;
    left: 10px;
    font-size: 19px;
/*     top: 12px; */
}

.stap2-content .aw-programma-li .icon-right {
	float: right;
}

.stap2-content .programmas-flex-inner {
    box-sizing: border-box;
    padding: 15px;
    width: 100%;
    /* max-width: 500px; */
}

/* .stap2-content .aw-programma-li.important-style-li:before {
    content: "\f005";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -2em;
    width: 2em;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    color: rgb(0, 152, 212);
} */

.stap2-content .aw-programma-li,
.stap2-content .aw-programmas-ul a {
    color: rgb(0, 152, 212);
    text-decoration: none;
    position: relative;
    display: block;
}

.stap2-content .aw-programma-li:hover {
    opacity: 0.7;
}

.stap2-content .aw-content-blok-midden {
    text-align: center;
}

.stap2-content .aw-content-blok-midden img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    position: relative;
    max-height: 80vh;
}

.stap2-content .aw-content-blok-links {
    height: 100%;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.stap2-content .aw-accordion-inhoud .aw-accordion {
    background-color: #eee;
    color: #000000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    border-radius: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

.stap2-content .aw-accordion-inhoud .aw-accordion-active,
.stap2-content .aw-accordion-inhoud .aw-accordion:hover {
    background-color: #ccc;
}

.stap2-content .aw-accordion-inhoud .aw-accordion-panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 10px;
    margin-bottom: 10px;
}

.stap2-content .aw-accordion-inhoud .aw-accordion:after {
    /* content: "\02795";*/
    font-family: "Font Awesome 5 Free";
	content: "\f067";
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #000000;
    float: right;
    margin-left: 5px;
}

.stap2-content .aw-accordion-inhoud .aw-accordion-active:after {
    /* content: "\2796"; */
	font-family: "Font Awesome 5 Free";
	content: "\f068"; 
    /* Unicode character for "minus" sign (-) */
	color: #000000
}

.stap2-content .aw-content-blok-rechts>.aw-sub-content-vertical {
    background-color: #f9f9f9;
    padding: 20px 10px 10px 10px;
    width: 100%;
    /* max-width: 500px; */
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
}

.stap2-content .h2-programma {
    color: rgb(0, 152, 212);
}

.stap2-content .h2-klimaatadaptatie {
    width: 100%;
    display: inline-block;
    text-align: center;
    color: rgb(0, 152, 212);
}

/*
.stap2-content .li-icon-gereed,
.stap2-content .li-icon-vertraging,
.stap2-content .li-icon-lopend,
.stap2-content .li-icon-nog-niet-van-start {
    display: inline-block;
    font-size: 18px;
    position: absolute;
    right: 15px;
    background: #ededed;
    width: 32px;
    text-align: center;
    height: 28px;
    border-radius: 20px;
    padding: 2px;
    top: 10px;
    padding-top: 5px;
}
*/

.stap2-content .li-icon-gereed,
.stap2-content .li-icon-afgerond {
    display: inline-block;
    font-size: 18px;
    position: absolute;
    right: 15px;
    background: #ededed;
    width: 32px;
    text-align: center;
    height: 28px;
    border-radius: 20px;
    padding: 2px;
    top: 10px;
    padding-top: 5px;
}

.stap2-content .gauge-container .text-container,
.stap3-content .gauge-container .text-container {
    display: none;
}
.stap2-content .aw-content-blok-rechts {
	padding: 0 20px 20px 20px;
}
.stap2-content .aw-hoe-werkt-het-wrap .aw-hoe-werkt-het-icon {
    width: 45px;
    height: 45px;
    display: flex;
	align-items: center;
    position: relative;
    border-radius: 50px;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    font-size: 30px;
    padding: 0;
    margin-right: 0;
	float: right;
}

.stap2-content .aw-hoe-werkt-het-wrap[data-balloon-length="large"]:after {
    width: 100%;
    font-size: 0.9em;
    line-height: 1.3em;
}
.stap2-content .pie_graph {
	margin: 0 0 0 auto;
}
.stap2-content .gauge-container.two>.gauge .dial,
.stap2-content .gauge-container.two>.gauge .value {
	cursor: pointer;
}
.stap2-content .gauge-container > .gauge-tooltip {
  	display: none;
  	width: 95px;
  	background-color: black;
  	color: #fff;
	font-size: 14px;
  	text-align: center;
  	padding: 5px;
  
  	/* Position the tooltip */
  	position: absolute;
  	z-index: 1;
  	top: 42%;
  	left: 0;
	right: 0;
  	margin: auto;
}
.stap2-content .gauge-container > .gauge-tooltip::after {
  	content: " ";
  	position: absolute;
  	bottom: 100%;  /* At the top of the tooltip */
  	left: 50%;
  	margin-left: -5px;
  	border-width: 5px;
  	border-style: solid;
  	border-color: transparent transparent black transparent;
}

/* -----------------------------
*  Stap 3 CSS
-------------------------------*/
.stap3-content {
    margin: 0;
    padding: 0;
}

.stap3-content .aw-content-personen-ul,
.stap3-content .aw-content-relevantie-ul,
.stap3-content .aw-content-aanknopingspunten-ul {
    padding: 0;
    margin: 0;
}

.stap3-content .aw-content-personen-ul,
.stap3-content .aw-content-personen-li,
.stap3-content .aw-content-relevantie-ul,
.stap3-content .aw-content-personen-li,
.stap3-content .aw-content-aanknopingspunten-ul,
.stap3-content .aw-content-aanknopingspunten-li {
    list-style-type: none;
}

.stap3-content .page-header {
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

.stap3-content .page-header span,
.stap3-content .page-header h1 {
    color: #ffffff;
    padding: 0;
    margin: 0;
}

.stap3-content h2 {
    color: rgb(0, 152, 212);
}

.stap3-content .aw-inner-box {
    background-color: #f6f6f6;
    padding: 15px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
}

.stap3-content .blok-links-boven .aw-inner-box {
    background-color: transparent;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	background-color: #f6f6f6;
	border-radius: 10px 10px 0 0;
}

.stap3-content .blok-links-boven .aw-inner-box-inside {
    background-color: #f6f6f6;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
}

.stap3-content .aw-content-personen-ul .aw-content-personen-li {
    padding: 5px 0;
}

.stap3-content .aw-content-personen-ul {
    padding: 5px 15px;
    background-color: #ffffff !important;
    color: #000000;
	font-weight: 400;
    border-radius: 0 0 10px 10px;
	margin: 10px;
}

.stap3-content .aw-content-personen-ul .aw-content-personen-li a,
.stap3-content .aw-content-personen-ul .aw-content-personen-li span {
    color: #0000EE;
    text-decoration: underline;
}

.stap3-content .aw-main-content-wrapper-boven,
.stap3-content .aw-main-content-wrapper-onder {
    align-items: stretch;
}

.stap3-content .aw-flex-wrapper .aw-flex-base {
    padding: 20px 10px 0 10px;
}

.stap3-content .aw-flex-wrapper .aw-flex-base:first-child {
    padding-left: 20px;
}

.stap3-content .aw-flex-wrapper .aw-flex-base:last-child {
    padding-right: 20px;
}

.stap3-content .aw-content-relevantie-li-inner-flex,
.stap3-content .aw-flex-relevant-antw {
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.stap3-content .aw-flex-relevant-antw {
    border-radius: 35px;
    background-color: #c5c5c5;
/* 	box-shadow:0px 0px 0px 10px black inset; */
}

.stap3-content .aw-content-relevantie-li-inner-flex {
    margin: 0 0 15px 0;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-in-text-box {
    flex: 1;
	width: 50%;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-begin-schuif-balk {
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    padding: 7px;
    font-size: 12px;
    line-height: 12px;
    box-sizing: border-box;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.active {
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
    color: #ffffff;
	font-weight: 700;
/* 	font-size: 22px;
	line-height: 20px; */
    text-decoration: none;
}

.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk.aw-active-blue {
    background-color: #a3a3a347;
    background-color: #0197D8;
} 

.stap3-content .aanknopingspunten-flex {
    display: flex;
}

.stap3-content .aanknopingspunten-flex {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-bottom: 15px;
}

.stap3-content .aanknopingspunten-flex .aanknopingspunten-flex-inner-content.aw-fic-1 {
    flex: 2;
}

.stap3-content .aanknopingspunten-flex .aanknopingspunten-flex-inner-content.aw-fic-2 {
    padding: 20px;
    flex: 1;
}

.stap3-content .aanknopingspunten-flex .aanknopingspunten-flex-inner-content.aw-fic-3 {
    flex: 2;
}

.stap3-content .aw-voortgang-box {
    display: flex;
    height: 50px;
    width: 100%;
    background-color: #c5c5c5;
    border-radius: 25px;
}

.stap3-content .aw-voortgang-box .aw-voortgang-rondje {
    height: 50px;
    width: 50px;
    border-radius: 25px;
}

.stap3-content .aw-voortgang-inner {
    flex: 1;
    display: flex;
    justify-content: center;
}

.stap3-content .aw-voortgang-inner:last-child {
    justify-content: flex-end;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.stap3-content .aw-voortgang-inner:first-child {
    justify-content: flex-start;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

.stap3-content .aw-voortgang-inner .checkmark {
    display: none;
}

.stap3-content .aw-voortgang-inner.active .checkmark {
    display: inline-block;
    width: 50px;
    height: 50px;
    -ms-transform: rotate(45deg);
   
    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);
    background-color: #fff;
    border: 2px solid gray;
    border-radius: 25px;
    box-sizing: border-box;
}

.stap3-content .aw-voortgang-inner.aw-active-green,
.stap3-content .aw-voortgang-inner.active {
    background-color: rgb(7, 173, 7);
}

body .stap3-content .aw-voortgang-inner.aw-voortgang-gemiddeld.active {
    background: rgb(7, 173, 7);
    background: linear-gradient(90deg, rgba(7, 173, 7, 1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%);
}

body .stap3-content .aw-voortgang-inner.aw-voortgang-niet.active {
    background: transparent;
} 


body .stap3-content .aw-voortgang-inner.aw-voortgang-niet.active .checkmark_stem,
body .stap3-content .aw-voortgang-inner.aw-voortgang-niet.active .checkmark_kick,
body .stap3-content .aw-voortgang-inner.aw-voortgang-gemiddeld.active .checkmark_stem,
body .stap3-content .aw-voortgang-inner.aw-voortgang-gemiddeld.active .checkmark_kick {
    display: none;
} 
 
.stap3-content .aw-voortgang-inner .checkmark_stem {
    position: absolute;
    width: 6px;
    height: 18px;
    background-color: rgb(7, 173, 7);
    left: 22px;
    top: 13px;
}

.stap3-content .aw-voortgang-inner .checkmark_kick {
    position: absolute;
    width: 9px;
    height: 6px;
    background-color: rgb(7, 173, 7);
    left: 17px;
    top: 25px;
}

.page-template-page-stap3 .page-content {
    padding-bottom: 20px;
}

.stap3-content .aw-gewenste-periode {
    text-align: center;
}

.stap3-content .aw-gewenste-periode-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.stap3-content .aw-gewenste-periode-wrap .aw-gewenste-periode {
    flex: 2;
    padding: 20px;
    background-color: #ffffff;
}

.stap3-content .aw-gewenste-periode-wrap .aw-gewenste-periode-uitvoering {
    flex: 1;
    padding: 20px;
}

.stap3-content .aw-gewenste-periode-uitleg {
    padding: 20px;
    background-color: #ffffff;
}
.stap3-content .aw-gewenste-periode-uitleg .showLink {
	cursor: pointer;
	font-weight: bold;
	color: #0000EE;
	text-decoration: underline;
}
.stap3-content .aw-gewenste-periode-uitleg .showLink:hover {
	text-decoration: underline;
}
.stap3-content .aw-gewenste-select-wrapper {
    display: flex;
    text-align: center;
}

.stap3-content .aw-gewenste-select-wrapper .aw-jaartal-wrap,
.stap3-content .aw-gewenste-select-wrapper .aw-periodes-wrap {
    flex: 1;
}

.stap3-content .aw-gewenste-select-wrapper .aw-jaartal-inner,
.stap3-content .aw-gewenste-select-wrapper .aw-periodes-inner {
    padding: 5px;
    margin: 5px;
    border: 1px solid gray;
}

.stap3-content .aw-periodes-inner {
    display: none;
    cursor: pointer;
}

.stap3-content .aw-jaartal-inner {
    cursor: pointer;
} 

.stap3-content .aw-periodes-inner.active,
.stap3-content .aw-jaartal-inner.active {
     background-color: #0198d8;
    color: #ffffff; 
}

.stap3-content .aw-gewenste-periode-uitvoering {
    text-align: center;
}

.stap3-content .aw-gewenste-periode-uitvoering .aw-status-icon {
    font-size: 30px;
}
.gauge-chart-title {
	font-size: 16px;
}
.stap3-content .gauge-container.two>.gauge .dial {
    stroke: #000;
    stroke-width: 10;
	cursor: pointer;
}
.stap3-content .gauge-container.two>.gauge .value {
    stroke-dasharray: none;
    stroke-width: 10;
	cursor: pointer;
}
.stap3-content .gauge-container.two>.gauge-tooltip {
 	display: none;
  	width: 95px;
  	background-color: black;
  	color: #fff;
	font-size: 14px;
  	text-align: center;
  	padding: 5px;
  

  	position: absolute;
  	z-index: 1;
  	top: 28%;
  	left: 0;
	right: 0;
  	margin: auto; 
}
.stap3-content .gauge-container > .gauge-tooltip::after {
  	content: " ";
  	position: absolute;
  	bottom: 100%;  
  	left: 50%;
  	margin-left: -5px;
  	border-width: 5px;
  	border-style: solid;
  	border-color: transparent transparent black transparent; 
}
.stap3-content .gauge-container.two {
	position: relative;
}
.inhoud-beschrijving .icon-lopend,
.inhoud-beschrijving .icon-vertraging,
.inhoud-beschrijving .icon-gereed {
    font-size: 16px;
    background: #ededed;
    width: 24px;
    text-align: center;
    height: 24px;
    border-radius: 20px;
    padding: 2px;
    min-width: 24px;
    margin-right: 10px;
}
.icon-list {
    list-style: none;
    padding: 0;
	margin: 0;
}
.icon-list li {
    margin-bottom: 0;
    display: flex;
    align-items: start;
} 
.stap3-content .inhoud-beschrijving i {
	line-height: 0;
    vertical-align: middle;
}
.stap3-content main.link1 .inhoud-beschrijving i {
	color: #F49612;
}
.stap3-content main.link2 .inhoud-beschrijving i {
	color: #21A13F;
}
.stap3-content main.link3 .inhoud-beschrijving i {
	color: #8DBF1E;
}
.stap3-content main.link4 .inhoud-beschrijving i {
	color: #0197D8;
}
.stap3-content main.link5 .inhoud-beschrijving i {
	color: #A04111;
}
.stap3-content main.link6 .inhoud-beschrijving i {
	color: #D94E84;
}
.stap3-content main.link7 .inhoud-beschrijving i {
	color: #744E9B;
}
.stap3-content main.link8 .inhoud-beschrijving i {
	color: #000000;
} 
 .inhoud-beschrijving > div {
	line-height: 30px;
}
.inhoud-beschrijving.open {
	overflow-y: scroll;
} 

/* .stap3-content main.link4 .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk {
	background-color: #0197D8;
    border-top: 10px solid #0197D8;
    border-bottom: 10px solid #0197D8;
} */



/* -----------------------------
*  Stap 4 CSS
-------------------------------*/
.stap4-content {
    margin: 0;
    padding: 0;
}


/* -----------------------------
*  Algemene functionaliteit
-------------------------------*/
.less-meer {
	position: absolute;
	bottom: 15px;
}
.hideContent{
    max-height: 204px;
    overflow: hidden;
	overflow-wrap: break-word;
  	word-wrap: break-word;
  	/* Adds a hyphen where the word breaks */
  	-webkit-hyphens: auto;
  	-ms-hyphens: auto;
  	-moz-hyphens: auto;
  	hyphens: auto;
}

.aw-custom-scroll-wrap .aw-custom-scroll {
    /* overflow: hidden;
    max-height: 200px; */
    padding-right: 3px;
}


.aw-custom-scroll-wrap .aw-custom-scroll.open {
    overflow-y: scroll;
}

.aw-custom-scroll-wrap span.aw-lees-meer {
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
	text-decoration: underline;
	color: #0000EE;
}

.aw-custom-scroll-wrap span.aw-lees-meer:hover {
    text-decoration: underline;
}
.inhoud-beschrijving {
	max-height: 90px;
    overflow: hidden;
}

/* -----------------------------
*  Mobiele optimalisatie
-------------------------------*/
@media(min-width: 1920px){
	h1 {
		font-size: 1.8rem;
	}
	body, h2, h3, h4 {
		font-size: 1.2rem;
	}
	.pie_subtitle {
		font-size: 1.2rem;
	}
	.breadcrumb {
		font-size: 14px;
	}
	.stap2-content .aw-accordion-inhoud .aw-accordion:after,
	.stap2-content .aw-accordion-inhoud .aw-accordion-active:after {
		font-size: 1.2rem;
	}
	.stap3-content .aw-content-relevantie-li-inner-flex .aw-flex-relevant-antw .aw-schuif-balk {
		font-size: 18px;
		line-height: 15px;
	}
	.gauge-chart-title {
		font-size: 18px;
	}
}
@media(max-width: 1440px){
	.hideContent {
    	max-height: 225px;
		width: 100%;
		word-break: break-word;
	}
	.pie_graph {
		max-width: 576px;
		margin: auto;
	}
}
@media(max-width: 992px){
    .img-stap1 {
        max-width: 100%;
        width: auto;
        max-height: 80vh;
        height: auto;
        object-fit: contain;
        object-position: center top;
    }

    .page-template-page-stap1 header,
    .site-header .aw-flex-wrapper {
        height: auto;
        max-height: 99999px;
		align-items: center;
    }

    .aw-flex-wrapper .aw-flex-base {
        max-width: 100%;
    }

    .site-header .aw-flex-wrapper img {
        width: 80%;
    }

    .site-header .aw-flex-wrapper .page-title-header {
        font-size: 1em;
    }

    .page-content {
        padding: 0 10px;
    }

    .page-template-page-stap1 .content-area, .page-template-page-stap1 .content-area .aw-main-content-wrapper,
    .page-template-page-stap2 .content-area, .page-template-page-stap2 .content-area .aw-main-content-wrapper,
    .page-template-page-stap3 .content-area, .page-template-page-stap3 .content-area .aw-main-content-wrapper,
    .page-template-page-stap4 .content-area, .page-template-page-stap4 .content-area .aw-main-content-wrapper {
        height: auto;
        max-height: 99999px;
    }

    .stap1-content .aw-content-blok-links {
        padding-bottom: 20px;
    }

    .stap3-content .aw-flex-wrapper .aw-flex-base:first-child,
    .stap3-content .aw-flex-wrapper .aw-flex-base:last-child {
        padding: 20px 10px 0 10px;
        max-width: 100%;
    }

    .aw-flex-wrapper .aw-flex-base.blok-links-onder {
        margin: 0;
    }

    .stap2-content .aw-bar-wrapper {
        display: block;
        width: 100%;
        max-width: 50vw;
        height: 30vw !important;
        overflow: hidden !important;
        position: relative;
        margin: auto;
    }

    .stap3-content .aw-content-relevantie-li-inner-flex {
        display: flex;
/*         align-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        margin-bottom: 30px; */
    }

    .stap3-content .aw-flex-wrapper .aw-flex-base:first-child, .stap3-content .aw-flex-wrapper .aw-flex-base:last-child {
/*         margin: 0; */
    }

    .stap3-content .aanknopingspunten-flex {
/*         display: flex;
        align-items: flex-start;
        align-content: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        flex-direction: column;
        margin-bottom: 15px;
        border: 1px solid gray;
        padding: 10px; */
    }
	.aw-hoe-werkt-het-wrap {
		max-width: 85%;
	}
	.stap2-content .aw-content-blok-rechts {
		padding: 0;
		width: 100%;
		margin-top: 20px;
	}
	
 	/* .stap2-content .aw-content-blok-midden {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
	}

	.stap2-content .aw-content-blok-rechts {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	} */
	.site-header .aw-flex-wrapper a {
		text-align: center;
	}
	.less-meer {
		bottom: 0;
	}
	.stap3-content .blok-rechts-boven .aw-inner-box {
		padding-bottom: 30px;
	}
}

.above-h1{
	font-size: 24px;
	font-weight: 600 !important;
}

@media screen and (max-width: 1264px) and (min-width: 992px) {
/* 	.site-header {
		font-size: 0.7em;
	} */