@font-face {
  font-family: 'Helsinki-Light';
  src: url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Light.eot');
  src: url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Light.eot?#iefix') format('embedded-opentype'),
       url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Light.svg#Helsinki-Light') format('svg'),
       url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Light.ttf') format('truetype'),
       url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Light.woff') format('woff'),
       url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Light.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Helsinki-Medium';
  src: url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Medium.eot');
  src: url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Medium.eot?#iefix') format('embedded-opentype'),
       url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Medium.svg#Helsinki-Medium') format('svg'),
       url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Medium.ttf') format('truetype'),
       url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Medium.woff') format('woff'),
       url('/wp-content/themes/blankslate/assets/fonts/Helsinki-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

* {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 html, body {
     padding: 0px;
     margin: 0px;
	 font-family: 'Helsinki-Light', sans-serif;
     background-color: #F3F9F9;
	 -webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: antialiased;

}
 strong{
	 font-family: 'Helsinki-Medium';
     font-weight: 500;
}
 #chart {
/*      display: inline-block;
     position: relative;
     width: 100%;
     padding-bottom: 400px;
     vertical-align: middle; */
	 height: 500px;
}
 #chart svg{
/*      display: inline-block;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0; */
}
 #result {
     padding: 10px 20px;
     border: thin solid #eee;
     background-color: thistle;
     cursor: pointer;
     width: 60px;
}
 .master_cover {
     display: block;
     width: 100%;
     margin: auto;
	 padding: 80px 0px;
}
 #container{
     margin: auto;
     max-width: 1024px;
}
 .container {
     clear:both;
     margin: auto;
}
 .button-group{
     margin-top: 32px;
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
}
 .button-group.single{
     justify-content: end;
}
 .prev-butn {
     cursor: pointer;
     background-color: transparent;
     border: none;
     color: #003CC1;
     padding: 14px 24px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 18px;
     line-height: 22px;
     font-weight: 300;
     min-width: 240px;
     border-radius: 5px;
     float: right;
     border: 1px solid #003CC1;
}
 .next-butn {
     cursor: pointer;
     background-color: #003CC1;
     border: none;
     color: white;
     padding: 14px 24px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 18px;
     line-height: 22px;
     font-weight: 300;
     min-width: 240px;
     border-radius: 5px;
     float: right;
     border: 1px solid #003CC1;
}
 .next-butn:hover {
     background-color: #0032a2;
     border-color: #0032a2;
}
 .prev-butn:hover {
	color: #fff;
	border-color: #0032a2;
    background-color: #0032a2;
}
 body .graph-container {
     margin-right: 15px;
	 flex: 0 0 calc(50% - 15px);
}
@media only screen and (min-width: 1024px) {
	 body .graph-container {
        margin-right: 15px;
        margin-left: 0px;
        flex: 0 0 calc(50% - 45px);
	}
}

 .themevragen2 {
     margin: auto;
}
 .themevragen2 .block {
     border: thin solid #eee;
     padding: 20px;
     margin-bottom: 20px;
     /*display: flex;
     flex-direction: row;
     justify-content: space-between;*/
}
 .themevragen2 .block .subtitle {
     color: #ffffff;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
     margin-bottom: 16px;
}
 .themevragen2 .block .title {
     font-size: 22px;
}
 img {
     width: 800px;
     height: 600px;
}
 .hidden {
     display: none;
}
 canvas {
     margin-top: 700px;
     border: 1px solid white;
     width: 600px;
     height: 480px;
     display: none;
}
/* PREZERO */
 .master_cover .container h1.content{
     color: #000000;
     /*color: #697E9A;*/
     font-size: 18px;
	 font-family: 'Helsinki-Medium';
     font-weight: 500;
     letter-spacing: 0;
     line-height: 18px;
}
 .master_cover .container{
     border-radius: 40px 0 40px 0;
     background-color: #FFFFFF;
     box-shadow: 0 10px 50px 0 rgba(0,52,61,0.1);
     border: 0px;
     padding: 50px;
}
 .master_cover .container .themevragen2 .block{
     border-radius: 30px 0 30px 0;
     background-color: #143740;
     border: 0px;
     padding: 50px;
     margin-bottom: 20px;
}
 .master_cover .container .themevragen2 .block .title{
     color: #fff;
     font-size: 26px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 32px;
     margin-bottom: 30px;
     position: relative;
     z-index: 2;
}
 .master_cover .container .themevragen2 .block .subtitle{
}
 .master_cover .container .themevragen2 .block .checkbox{
     margin-bottom: 18px;
}
 .master_cover .container .themevragen2 .block .checkbox label{
     color: #fff;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
}
 .master_cover .container .themevragen2 .block .checkbox input{
     margin-left: 0px;
}
 .checkbox{
     display: flex;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     margin-bottom: 18px;
}
 .master_cover .container .themevragen2 .block .checkboxs > .checkbox:last-child{
     margin-bottom: 0px;
}
 .checkbox label {
     display: flex;
     cursor: pointer;
     position: relative;
     overflow: hidden;
}
 .checkbox label input {
     position: absolute;
     left: -9999px;
}
 .checkbox label input:checked + span:before {
     box-shadow: inset 0 0 0 7px #8FCB18;
}
 .checkbox label span {
     display: flex;
     align-items: flex-start;
     transition: 0.25s ease;
}
 .checkbox label span:hover {
}
 .checkbox label span:before {
     display: flex;
     flex-shrink: 0;
     content: "";
     background-color: #fff;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     margin-right: 10px;
     transition: 0.25s ease;
     box-shadow: inset 0 0 0 2px #D3DDDE;
}
 .tabs-header{
     margin-bottom: 32px;
}
 .tabs-header .subtitle{
     margin-top: 10px;
	 font-size: 18px;
	 line-height: 18px;
}
/* SPLASHSCREEN */
 .master_cover .container.splashscreen{
     padding: 180px 40px 40px 40px;
     background-size: cover;
     background-position: center center;
}
 .splashscreen .content-overlay{
     padding: 180px 40px 40px 40px;
     width: 100%;
     max-width: 380px;
     border-radius: 25px;
     background-color: #FFFFFF;
     box-shadow: 0 10px 50px 0 rgba(0,52,61,0.1);
}
 .splashscreen .content-overlay h1{
     color: #000000;
     font-size: 40px;
  	 font-family: 'Helsinki-Medium';
     font-weight: 500;
     letter-spacing: 0;
     line-height: 40px;
     margin-bottom: 8px;
}
 .splashscreen .content-overlay p{
     color: #697E9A;
     font-size: 28px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 34px;
     margin-bottom: 40px;
}
 .splashscreen .content-overlay a{
     float: inherit;
     min-width: 100%;
}
 .splashscreen .block{
     padding: 0px !important;
     background-color: transparent !important;
}
/* RESULTAAT */
 .container.resultaat{
     flex-flow: wrap;
     align-items: center;
     justify-content: center;
}
 .container.resultaat.active{
     display: flex !important;
}
.form-container{
     flex: 0 0 calc(50% - 15px);
}
 ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
	 font-family: 'Helsinki-Light';
     color: #697E9A;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
}
 ::-moz-placeholder {
    /* Firefox 19+ */
	 font-family: 'Helsinki-Light';
     color: #697E9A;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
}
 :-ms-input-placeholder {
    /* IE 10+ */
	 font-family: 'Helsinki-Light';
     color: #697E9A;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
}
 :-moz-placeholder {
    /* Firefox 18- */
	 font-family: 'Helsinki-Light';
     color: #697E9A;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
}
 .form-container{
     border-radius: 30px 0 30px 0;
     background-color: #F3F9F9;
     padding: 50px;
     margin-left: 15px;
}
 .form-container .content{
     margin-bottom: 40px;
}
 .form-container .content h2{
     color: #000000;
     font-size: 26px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 32px;
     margin-bottom: 10px;
}
 .form-container .content p{
     color: #000000;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
}
 .form-container label{
     color: #000000;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
     margin-bottom: 8px;
}

.content-overlay.form,
 .form-container input[type="text"], .form-container input[type="email"]{
     box-sizing: border-box;
     border: 2px solid #E0E5EC;
     border-radius: 5px;
     background-color: #FFFFFF;
     padding: 10px 14px;
     width: 100%;
     margin-bottom: 18px;
     font-size: 18px;
     line-height: 26px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}
 .form-container fieldset > div{
     display: flex;
}
 .form-container a.next-butn{
     min-width: 100%;
     margin-top: 20px;
}
/* GRAPH CONTAINER */
 .graph-container svg .dxc-elements-axes-group text, .graph-container svg .dxc-elements-axes-group tspan{
     text-decoration: underline !important;
	 z-index: 999 !important;
	 cursor: pointer !important;
}
/*
 .graph-container svg .dxc-title{
     max-width: 360px;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
}
 .graph-container svg .dxc-title text, .graph-container svg .dxc-title text tspan{
     fill: #000000 !important;
	 font-family: 'Helsinki-Bold' !important;
     font-size: 26px !important;
     font-weight: 700 !important;
     letter-spacing: 0 !important;
     line-height: 32px !important;
     text-align: center !important;
     text-decoration: none !important;
}
 .graph-container svg .dxc-title > text:last-child tspan{
     font-family: 'Helsinki-Bold' !important;
     fill: #000000 !important;
     font-size: 18px !important;
     font-weight: 300 !important;
     letter-spacing: 0 !important;
     line-height: 26px !important;
     text-align: center !important;
     text-decoration: none !important;
} */
/* .dxc-arg-elements .text,
.dxc-arg-elements .tspan{
	text-decoration: underline !important;
	cursor: pointer !important;
} */
/* THANK YOU */
 .thank-you .block{
     padding: 50px;
     border-radius: 30px 0 30px 0;
     background-color: rgba(143, 203, 24, 0.1);
}
 .thank-you .block .content h2{
     color: #000000;
     font-size: 26px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 32px;
     margin-bottom: 10px;
}
 .thank-you .block .content p{
     color: #000000;
     font-size: 18px;
     font-weight: 300;
     letter-spacing: 0;
     line-height: 26px;
}
 .thank-you .block .inner-container{
     margin-top: 32px;
     border-radius: 30px 0 30px 0;
     background-color: #FFFFFF;
     display: flex;
     flex-flow: wrap;
     align-items: center;
     padding: 40px;
}
 .thank-you .block .inner-container .column{
     flex: 0 0 50%;
}
 .thank-you .block .inner-container .column.contact strong{
     margin-bottom: 8px;
     display: block;
}
 .thank-you .block .inner-container .column.contact *{
     font-size: 18px;
     line-height: 26px;
}
 .thank-you .block .inner-container .column.contact p a{
     color: #003CC1;
}
/* TAGS */
 .tags{
     padding: 0px 0px 50px 0px;
}
 .tags .innerwrapper{
     max-width: 820px;
     display: flex;
     margin-left: auto;
     margin-right: auto;
}
 .tags .innerwrapper div{
     flex: 0 0 50%;
     text-align: center;
     color: #697E9A;
     font-size: 16px;
  	 font-family: 'Helsinki-Medium';
     font-weight: 500;
     letter-spacing: 0;
     line-height: 16px;
     padding-bottom: 36px;
     border-bottom: 1px solid #D3DDDE;
	 text-transform: uppercase;
}
 .tags .innerwrapper div.active{
     color: #8FCB18;
     border-bottom: 3px solid #8FCB18;
}
 .alert{
     padding: 0px 50px;
     text-align: left;
     color: #ff432e;
     margin-top: 24px;
}
 @media only screen and (max-width: 767px) {
    /* GENERAL */
	 .master_cover {
		 padding: 30px 0px;
	}

	 body .master_cover .container{
		 box-shadow: none;
	 }

     .tabs-header{
         padding-left: 30px;
         padding-right: 30px;
    }
     .button-group{
         flex-direction: column-reverse;
         padding-left: 30px;
         padding-right: 30px;
    }
     .button-group > a{
         margin-bottom: 0px;
    }
     .button-group > a:last-child{
         margin-bottom: 10px;
    }
     .next-butn{
         min-width: 100%;
    }
     body .master_cover .container{
         background-color: #F3F9F9;
         padding: 40px 0px;
         border-radius: 0px;
    }
     body .master_cover .container .themevragen2 .block{
         /*background-color: #FFFFFF;*/
         padding: 40px 30px;
    }
    /* SPLASHSCREEN */
     .master_cover .container.splashscreen{
         padding: 0px;
         border-radius: 0px;
         background-image: none;
    }
     .master_cover .container.splashscreen .small-screen-image{
         height: 320px;
         background-size: cover;
         background-position: center center;
         position: relative;
    }
     .splashscreen .content-overlay{
         max-width: inherit;
         border-radius: 30px 30px 0px 0px;
         padding: 60px 30px 30px 30px;
         margin-top: -30px;
         position: relative;
    }
     .splashscreen .content-overlay h1{
         font-size: 32px;
         line-height: 36px;
    }
     .splashscreen .content-overlay p{
         font-size: 22px;
         line-height: 32px;
    }
    /* QUESTIONS */
     .master_cover .container .themevragen2 .block .title{
         font-size: 24px;
         line-height: 30px;
    }
    /* RESULTATEN */
     body .graph-container, body .form-container {
         flex: 0 0 100%;
		 margin: 0px !important;
    }
	 .graph-container{
		 left: inherit;
	 }
      #chart svg {
       padding-left: 32px;    
      }
     .container.resultaat .dx-theme-generic-typography{
         background-color: #F3F9F9;
         padding: 0px 0px 0px 0px;
    }
    /* FORM */
     .form-container{
         padding: 40px 30px;
         background-color: #ffffff;
    }
    /* THANK YOU */
     .thank-you .block{
         padding: 40px 30px;
    }
     .thank-you .block .inner-container .column{
         width: 100%;
    }
     .thank-you .block .inner-container .column.contact{
         margin-bottom: 24px;
    }
     .thank-you .block .inner-container{
         flex-direction: column;
         align-items: flex-start;
         padding: 24px;
    }
    /* TAGS */
     .tags{
         padding: 30px 30px 0px 30px;
    }
     .alert{
         padding: 0px 30px;
    }
}
/* CHECKBOX */
 label.wrapper {
     position: relative;
     padding-left: 26px;
}
 label.wrapper{
     font-size: 14px;
     line-height: 18px;
}
 label.wrapper input {
     position: absolute;
     left: -9999px;
}
 .checkmark {
     position: absolute;
     top: 1px;
     left: 0;
     height: 16px;
     width: 16px;
     background-color: #ffffff;
     border: 2px solid #D3DDDE;
     border-radius: 3px;
}
 label.wrapper input:checked ~ .checkmark {
     border-color: #8FCB18;
     background-color: #8FCB18;
     border-radius: 3px;
}
 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
}
 label.wrapper input:checked ~ .checkmark:after {
     display: block;
}
 label.wrapper .checkmark:after {
     left: 3px;
     top: -1px;
     width: 4px;
     height: 10px;
     border: solid white;
     border-width: 0 2px 2px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     box-shadow: 1px 1px 0 0 rgba(0,0,0,0.15);
}


.dxc-title,
.dxc-title text,
.dxc-title text tspan {
     font-family: 'Helsinki-Medium', sans-serif;
}



#tab3C {
     position: relative;
}

#chartlightbox {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
     background: rgba(0, 0, 0, 0.3);
     display: none;
     z-index: 100;
}
#chartlightbox.open {
     display: block;
}

#desired-situation-lightbox #lightbox_content,
#chartlightbox #lightbox_content {
     position: absolute;
     width: 500px;
     height: 400px;
     background: #ffffff;
     border-radius: 10px;
     left: 50%;
     top: 50%;
     margin-left: -250px;
     margin-top: -200px;
     text-align: left;
     padding: 30px;
}

#desired-situation-lightbox #lightbox_content {
    height:  unset !important;
    z-index: 99;
}

#desired-situation-lightbox #desiredClose,
#chartlightbox #close {
     position: absolute;
     right: 12px;
     top: 12px;
     background: rgba(0, 0, 0, 0.2);
     height: 30px;
     width: 30px;
     border-radius: 15px;
     text-align: center;
     color: #ffffff;
     cursor: pointer;
     font-size: 19px;
     padding-left: 2px;
     padding-top: 1px;
}
#chartbutton {
     font-family: 'Helsinki-Light';
     cursor: pointer;
     background-color: #8fcb18;
     border: none;
     color: white;
     padding: 10px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     line-height: 22px;
     border-radius: 5px;
     border: 1px solid #8fcb18;
     margin-left: calc(50% - 69px);
}
#chartlightbox #lightbox_cont {
     overflow: auto;
     width: 440px;
     height: 340px;
     overflow:auto;
}


/* DOORONTWIKKELING | RUUD VISSERS */
#desiredSituation {
    display: none;
    visibility: hidden;
    /*display: flex;*/
    justify-content: center;
    text-decoration: underline;
    color: rgb(0, 60, 193);
}

#desiredSituation:hover {
    cursor:  pointer;
}   

#desired-situation-lightbox {
    display: none;
    visibility: hidden;
}

#desired-situation-lightbox.show {
    display: block;
    visibility: visible;
}


/* Form to step 2 */
/*.themevragen1 .block {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

}*/

.themevragen1 .block .content-overlay.form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    padding: 180px 40px 40px 40px !important;
    width: 100%;
    max-width: 380px;
    border-radius: 25px;
    background-color: #FFFFFF !important;
    box-shadow: 0 10px 50px 0 rgb(0 52 61 / 10%);
}

.themevragen1.alert {
    display: none;
    visibility: hidden;
}

.themevragen1.alert.show {
    display: block !important;
    visibility: visible;
}

#desired-situation-lightbox .lightbox_content {
    box-shadow: 0 10px 50px 0 rgb(0 52 61 / 10%);
}

#desired-situation-lightbox #lightbox_content p {
    margin-bottom: 24px;
}

#chartlightbox #lightbox_cont p {
    margin-bottom: 8px;
}

#chartlightbox #lightbox_cont figure {
    padding: 20px 100px;
}

#chartlightbox #lightbox_cont figure img {
    max-width: 100%;
    height: 100%;
}

.mandatory {
    color: grey;
    font-size: 12px;
    margin-left: 25px;
}

.themevragen2 .block {
    position: relative;
}

.themevragen2 .block figure {
    position: absolute;
    top: 20px;
    right: 20px;
}

.themevragen2 .block figure .icon {
    max-width: 100px;
    height: 100%;
    position: relative;
    z-index: 1;
}