@charset "utf-8";
@import url('pm-layout.css?v=21');
@import url('animations.css?v=1');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;600;700;900&display=swap');
 /*font-family: 'Poppins', sans-serif;
 font-family: 'Noto Serif', serif;
 */
 
/* ---------- standaard lettertype en kleur ---------- */

/*
=============
site colors
=============

*/

.layout {
	color: 		 #000000;
	font-size: 	 20px;
	font-family: 'Montserrat', serif;
	line-height: 2em;
	
}


/* ---------- standaard lettertype en kleur ---------- */
.layout td, .layout th, .layout a{
	
	font-family: 'Montserrat', serif;
}

.layout h1,.layout h2,.layout h3,.layout h4,.layout h5,.layout h6 {	
	margin: 5px 0 10px 0;
	font-family: 'Merriweather', serif;
	font-weight:900;
}

.layout h1 { line-height: 1.35em; color:#000; font-size: 4.5em;}
.layout h2 { line-height: 1.35em; color:#000; font-size: 3.25em; }
.layout h3 { line-height: 1.35em; color:#000; font-size: 2em; }
.layout h4 {line-height: 1.35em; color:#000; font-size: 1.5em;}
.layout h5 {}
.layout h6 {}
.layout p  {}

.layout a {text-decoration: none;}



/* headerbar twisted */

#layer1{
	overflow-y: scroll;
	transition: filter 0.5s;
}
#layout #overLayer {
	top: 0;
}

#blockArea{
	-webkit-transition: filter 0.3s;
	transition: filter 0.3s;
}
.layout #layer1::-webkit-scrollbar-thumb, .layout #blockArea::-webkit-scrollbar-thumb {
    background-color: #3e3d40;
    border-radius: 0;
}
.layout #layer1::-webkit-scrollbar-track, .layout #blockArea::-webkit-scrollbar-track {
    background-color: rgb(10, 10, 10);
    width: 15px;
}

#layout #layer1:before{
	content : '';
	opacity: 0;
	transition: opacity 0.5s;
	display:block;position: absolute;
	top: 0;right:0;left:0;
}
#layout #layer1:after{
	content : '';
	display:block;position: absolute;
	top: 0;right:0;left:0;
}
#layout #topbar{
	display: none;
}
.pm-overlay:after{
	content: '';
	display: block;
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	z-index:1;
}

/*
==========
Header
==========
 */
 
#pre-bar {
	
    display: block;
    height: 80px;
    z-index: 9;
    position: absolute;
    width: 150px;
    height: 150px;
    margin: 30px;
}

#pre-bar a.logo{
	height: 143px;
    width: 143px;
    background-repeat: no-repeat;
    display: block;
    background-position: center;
    position: absolute;
    background-size: 80% auto;
    background-image: url(../../images/moti4/logos/logo-moti-4-white.svg);
}


#layer1 {
	position: absolute;
	right: 90px;
}
.hero-image {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #5b3a0e;
}
.heroText{
	max-width:840px;
	z-index:1;
	position: absolute;
}
.heroImage{
	background-position: center;
}

/* submenu */

#submenu-cnt{
	background-color: #000;
    box-sizing: border-box;
    position: absolute;
    top: 0;right:0;left:100%;bottom: 0;
    z-index: 3;  overflow: hidden;
    transition: all 0.75s;
}
#submenu-cnt-dummy{
	content: '';
	display: block;
    position: absolute;
    top: 0;left:0;right:100%;bottom: 0;
    z-index: 2;
    transition: all 0.5s;
    height:auto;
}

#submenu-cnt-dummy.__open{
	right: 0;
}
#submenu-cnt.__open{
	left: 0;
	height:auto;
}
#submenu-cnt > ._inner{
	padding: 40px;
	width: 1680px;
}

#submenu-cnt > ._inner{
	box-sizing: border-box;
	margin: 0 auto;
	max-width:1680px;
	margin-top:200px;
	margin-bottom:100px;
	margin-left: 25px;
}


#submenu-cnt > ._inner >  a._item{	
	position: relative;
	display: block;
	padding:50px;
	padding-bottom:12px;
	box-sizing: border-box;	
    height: 10em;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    color:#FFF;
    background-size: auto 60px;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(/svg/moti4/FFFFFF/icon-arrow-right.svg);
    padding-left: 75px;
    width: 50%;
    float:left;
    padding-top: 0; 
}



#submenu-cnt  > ._inner > a._item > ._title{
	display:block;
	font-weight: 900;
	font-size: 2em;color:#FFF;
	font-family: 'Merriweather';
}
#submenu-cnt > ._inner  > a._item > ._description{
    display: block;
    font-weight: 400;
    line-height: 1.35em;
    margin: 10px 0;
    overflow: hidden;color:#FFF;
    
}






/*
==========
Sidebar
==========
 */
 
#sidebar{
	position: fixed;
	right:0;
	top:0;
	background-color:#0A0A0A;
	bottom:0;
	z-index:10;
	width: 90px;
}
#sidebar a.bttn-menu{
	height:50px;width:50px;background-repeat: no-repeat;background-position: center; background-size:100% auto;
	background-image: url("../../images/moti4/icons/icon-menu.svg?t=1");
	position: absolute;
	left:20px;top:25px;
	
}
#sidebar a.bttn-menu.close{
	background-image: url("../../images/moti4/icons/icon-close.svg?t=1");
}
#sidebar a.login{
	    background-image: url(../../images/moti4/icons/icon-login.svg?t=1);
    height: 33px;
    width: 50px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    position: absolute;
    padding-top: 93px;
    bottom: 10px;
    color: #5B5A5B;
    left: 20px;
    white-space: nowrap;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}
#sidebar .site_title{
	position: absolute;
    top: 150px;
    transform: rotate(90deg);
    transform-origin: left top;
    width: 500px;
    height: 40px;
    left: 65px;
    color: #5B5A5B;
    /* z-index: 10000; */
    white-space: nowrap;
}







/*
==========
Formulier
==========
 */
.default_table input[type="submit"] {
	display: inline-block;
	padding: 15px 50px 15px 50px;
	box-sizing: border-box;
	font-size: 1.0em;
	margin: 20px 0 0 0;
	background-color: #000000;
	color: #ffffff;
	font-weight: 700;
}

.layout .default_table input[type="text"],
.layout .default_table input[type="email"],
.layout .default_table input[type="tel"],
.layout .default_table textarea{
	padding: 10px 10px 10px 10px;
	background-color: #ffffff;
	color: grey;
	/*font-size: 1.1em;*/
	margin-bottom: 5px;
	width: 100%;	
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
.layout .default_table img {
	width: 24px;
	height: 24px;
}


/* checkbox */
.question-title.inp-checkbox .input{
	display: inline-block;
    height: 25px;
    margin: 5px 16px -2px 0px;
    width: 25px;
    background-image: url(/svg/moti4/333333-eaebec/icon-check.svg);
    background-size: 100% auto;
    margin-left:-25px;
    transition: all 0.3s;
}

.question-title.inp-checkbox.__checked .input{
	background-image: url(/svg/moti4/ffffff-000000/icon-check.svg);
}
.question-title.inp-checkbox:before{
display:none!important;	
}
/* blockstyle */
.blockCoverWidth,
.blockCoverWidth > .fs{
	position: absolute;
    left: 0;
    right: 0;
    width: 100%!important;
    max-width: none;
}



body .pblock.reveal-img {
	overflow: hidden;
}
body .pblock.reveal-img.__rechts{
	
}

body .pblock.reveal-img img{width: 1024px!important; height: auto!important;}
body .pblock.reveal-img img{float:right;}
body .pblock.reveal-img.__rechts img{float:left;margin-left:-135px;}







/*
=============
nr blokken
=============
*/
.nr-block{
	background-image: url(/svg/moti4/eaebec/nr-01.svg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 550px auto;
}
	.nr-block,
	.voorMij-blok{
		background-image: url(/svg/moti4/eaebec/nr-01.svg);
	}
	.nr-block.__zwart{
		background-image: url(/svg/moti4/000000/nr-01.svg);
	}
	.nr-block.__donker-grijs{
		background-image: url(/svg/moti4/626262/nr-01.svg);
	}
	.nr-block.__geel{
		background-image: url(/svg/moti4/ffce00/nr-01.svg);
	}
	.nr-block.__wit{
		background-image: url(/svg/moti4/ffffff/nr-01.svg);
	}
	
	.nr-block.__boven{
	background-position-y: top;
	}
	.nr-block.__onder{
	background-position-y: bottom;
	}
	.nr-block.__links{
	background-position-x: left;
	}
	.nr-block.__rechts{
	background-position-x: right;
	}

/* front end - normaal/grijs */
#page-section-01 div.nr-block,
.voorMij-blok.__1{
	background-image: url(/svg/moti4/eaebec/nr-01.svg);
}
#page-section-02 div.nr-block,
.voorMij-blok.__2{
	background-image: url(/svg/moti4/eaebec/nr-02.svg);
}
#page-section-03 div.nr-block,
.voorMij-blok.__3{
	background-image: url(/svg/moti4/eaebec/nr-03.svg);
}
#page-section-04 div.nr-block,
.voorMij-blok.__4{
	background-image: url(/svg/moti4/eaebec/nr-04.svg);
}
#page-section-05 div.nr-block,
.voorMij-blok.__5{
	background-image: url(/svg/moti4/eaebec/nr-05.svg);
}
#page-section-06 div.nr-block{
	background-image: url(/svg/moti4/eaebec/nr-06.svg);
}
#page-section-07 div.nr-block{
	background-image: url(/svg/moti4/eaebec/nr-07.svg);
}
#page-section-08 div.nr-block{
	background-image: url(/svg/moti4/eaebec/nr-08.svg);
}
#page-section-09 div.nr-block{
	background-image: url(/svg/moti4/eaebec/nr-09.svg);
}
#page-section-10 div.nr-block{
	background-image: url(/svg/moti4/eaebec/nr-10.svg);
}

/* front end - fase */
div.fase-block{
	background-image: url(/svg/moti4/313133/nr-01.svg);
}
div.fase-block.__2{
	background-image: url(/svg/moti4/313133/nr-02.svg);
}
div.fase-block.__3{
	background-image: url(/svg/moti4/313133/nr-03.svg);
}
div.fase-block.__4{
	background-image: url(/svg/moti4/313133/nr-04.svg);
}
div.fase-block.__5{
	background-image: url(/svg/moti4/313133/nr-05.svg);
}
div.fase-block.__6{
	background-image: url(/svg/moti4/313133/nr-06.svg);
}
div.fase-block.__7{
	background-image: url(/svg/moti4/313133/nr-07.svg);
}
div.fase-block.__8{
	background-image: url(/svg/moti4/313133/nr-08.svg);
}
div.fase-block.__9{
	background-image: url(/svg/moti4/313133/nr-09.svg);
}
div.fase-block.__10{
	background-image: url(/svg/moti4/313133/nr-10.svg);
}

/* front end - fase */
div.quiz-block{
	background-image: url(/svg/moti4/313133/nr-01.svg);
}
div.quiz-block.__2{
	background-image: url(/svg/moti4/313133/nr-02.svg);
}
div.quiz-block.__3{
	background-image: url(/svg/moti4/313133/nr-03.svg);
}
div.quiz-block.__4{
	background-image: url(/svg/moti4/313133/nr-04.svg);
}
div.quiz-block.__5{
	background-image: url(/svg/moti4/313133/nr-05.svg);
}
div.quiz-block.__6{
	background-image: url(/svg/moti4/313133/nr-06.svg);
}
div.quiz-block.__7{
	background-image: url(/svg/moti4/313133/nr-07.svg);
}
div.quiz-block.__8{
	background-image: url(/svg/moti4/313133/nr-08.svg);
}
div.quiz-block.__9{
	background-image: url(/svg/moti4/313133/nr-09.svg);
}
div.quiz-block.__10{
	background-image: url(/svg/moti4/313133/nr-10.svg);
}

/* front end - donker-grijs */
#page-section-01 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-01.svg);
}
#page-section-02 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-02.svg);
}
#page-section-03 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-03.svg);
}
#page-section-04 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-04.svg);
}
#page-section-05 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-05.svg);
}
#page-section-06 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-06.svg);
}
#page-section-07 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-07.svg);
}
#page-section-08 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-08.svg);
}
#page-section-09 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-09.svg);
}
#page-section-10 div.nr-block.__donker-grijs{
	background-image: url(/svg/moti4/626262/nr-10.svg);
}

/* front end - zwart */
#page-section-01 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-01.svg);
}
#page-section-02 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-02.svg);
}
#page-section-03 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-03.svg);
}
#page-section-04 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-04.svg);
}
#page-section-05 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-05.svg);
}
#page-section-06 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-06.svg);
}
#page-section-07 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-07.svg);
}
#page-section-08 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-08.svg);
}
#page-section-09 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-09.svg);
}
#page-section-10 div.nr-block.__zwart{
	background-image: url(/svg/moti4/000000/nr-10.svg);
}

/* front end - wit */
#page-section-01 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-01.svg);
}
#page-section-02 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-02.svg);
}
#page-section-03 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-03.svg);
}
#page-section-04 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-04.svg);
}
#page-section-05 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-05.svg);
}
#page-section-06 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-06.svg);
}
#page-section-07 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-07.svg);
}
#page-section-08 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-08.svg);
}
#page-section-09 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-09.svg);
}
#page-section-10 div.nr-block.__wit{
	background-image: url(/svg/moti4/ffffff/nr-10.svg);
}

/* front end - geel */
#page-section-01 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-01.svg);
}
#page-section-02 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-02.svg);
}
#page-section-03 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-03.svg);
}
#page-section-04 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-04.svg);
}
#page-section-05 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-05.svg);
}
#page-section-06 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-06.svg);
}
#page-section-07 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-07.svg);
}
#page-section-08 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-08.svg);
}
#page-section-09 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-09.svg);
}
#page-section-10 div.nr-block.__geel{
	background-image: url(/svg/moti4/ffce00/nr-10.svg);
}
/* front end - geel */
.nr-block.__geel.__1{
	background-image: url(/svg/moti4/ffce00/nr-01.svg);
}
.nr-block.__geel.__2{
	background-image: url(/svg/moti4/ffce00/nr-02.svg);
}
.nr-block.__geel.__3{
	background-image: url(/svg/moti4/ffce00/nr-03.svg);
}
.nr-block.__geel.__4{
	background-image: url(/svg/moti4/ffce00/nr-04.svg);
}
.nr-block.__geel.__5{
	background-image: url(/svg/moti4/ffce00/nr-05.svg);
}
.nr-block.__geel.__6{
	background-image: url(/svg/moti4/ffce00/nr-06.svg);
}
.nr-block.__geel.__7{
	background-image: url(/svg/moti4/ffce00/nr-07.svg);
}
.nr-block.__geel.__8{
	background-image: url(/svg/moti4/ffce00/nr-08.svg);
}
.nr-block.__geel.__9{
	background-image: url(/svg/moti4/ffce00/nr-09.svg);
}
.nr-block.__geel.__10{
	background-image: url(/svg/moti4/ffce00/nr-10.svg);
}

/* fase test */
.fase-cnt{
	display:none;
}

.fase-cnt:first-child{
	display:block;
}
.fase-cnt .inp-radio{
	text-transform: uppercase;
	width: 100px;
	font-weight:bold;
}
.fase-cnt .inp-radio:before{
	margin-top: 0;
}

/* quiz test */
.quiz-cnt{
	display:none;
}

.quiz-cnt:first-child{
	display:block;
}
.quiz-cnt .inp-radio{
	text-transform: uppercase;
	min-width: 130px;
	font-weight:bold;
}
.quiz-cnt .inp-radio:before{
	margin-top: 0;
}

/* formulier velden */
label.__labelTitel {
    display: block;
    position: relative;
    top: 60px;
    left: 17px;
    font-size: 20px;
    font-weight: 700;
/*    color: #445593; */
}
/*
.pblock input[type="text"], input[type="password"], .pblock input[type="email"] {
    padding: 10px 10px 10px 10px;
    background-color: #ffffff;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;

    border-top:        solid 70px #ECEDED;
    border-right:      solid 15px #ECEDED;
    border-bottom:     solid 10px #ECEDED;
    border-left:       solid 20px #ECEDED;
}
*/

.pblock .__form-message {
    padding: 10px 10px 10px 10px;
    background-color:     #ffffff;
    box-sizing:           border-box;
    font-family:          'Montserrat', sans-serif;
    border-top:           solid 70px #000000;
    border-right:         solid 20px #000000;
    border-bottom:        solid 20px #000000;
    border-left:          solid 20px #000000;
}
/* formulier velden */



/* THEME COLORS */

.theme-yellow		{}
.theme-orange		{}
.theme-teal			{}
.theme-lime			{}
.theme-red			{}
.theme-purple		{}

.theme_prev.theme-yellow		{ background-color:#ffce00; }
.theme_prev.theme-orange		{ background-color:#f7941d; }
.theme_prev.theme-teal			{ background-color:#4BA8B5; }
.theme_prev.theme-lime			{ background-color:#A8C500; }
.theme_prev.theme-red			{ background-color:#E43044; }
.theme_prev.theme-purple		{ background-color:#9b85be; }



/* YELLOW */

.layout.theme-yellow .pm-overlay:after,
.layout.theme-yellow .bg-highlight,
.layout.theme-yellow ._pagDots ._dot.__active,
.layout.theme-yellow #submenu-cnt-dummy,
#page-section-yellow,
.layout.theme-yellow #liveFeitfabel .live-image-cnt:after,
.layout.theme-yellow #page-section-inherit
{ 	background-color: #ffce00; }
.layout.theme-yellow .question-title.__checked,
.layout.theme-yellow .text-highlight
{ 	color: #ffce00; }
.layout.theme-yellow *.__border-highlight {
    border-left: solid 13px #ffce00;
}

.layout.theme-yellow #layer1::-webkit-scrollbar-thumb, .layout.theme-yellow #blockArea::-webkit-scrollbar-thumb  { background-color: #ffce00;border-radius: 0; border: 2px solid #000;}
.layout.theme-yellow .pie {
	background-color: #ffce00;
}
	.layout.theme-yellow #submenu-cnt  > ._inner > a._item.__active,
.layout.theme-yellow #submenu-cnt  > ._inner > a._item:hover{
    	background-image: url(/svg/moti4/ffce00/icon-arrow-right.svg);
	}
	.layout.theme-yellow .nav-block.__highlight{
		background-image: url(/svg/moti4/ffce00/icon-arrow-right.svg);
	}
	.layout.theme-yellow .nav-block.__previous.__highlight{
		background-image: url(/svg/moti4/ffce00/icon-arrow-right.svg);
	}
	
	.layout.theme-yellow .__show-scroll ._button{
		background-image: url(/svg/moti4/ffce00/icon-arrow-scroll.svg);
	}
	.layout.theme-yellow .question-title.inp-checkbox.__checked .input{
		background-image: url(/svg/moti4/ffce00-ffffff/icon-check.svg);
	}
	
/* orange */

.layout.theme-orange .pm-overlay:after,
.layout.theme-orange .bg-highlight,
.layout.theme-orange ._pagDots ._dot.__active,
.layout.theme-orange #submenu-cnt-dummy,
#page-section-orange,
.layout.theme-orange #liveFeitfabel .live-image-cnt:after,
.layout.theme-orange #page-section-inherit
{ 	background-color: #f7941d; }
.layout.theme-orange .question-title.__checked,
.layout.theme-orange .text-highlight
{ 	color: #f7941d; }
.layout.theme-orange *.__border-highlight {
    border-left: solid 13px #f7941d;
}

.layout.theme-orange #layer1::-webkit-scrollbar-thumb, .layout.theme-orange #blockArea::-webkit-scrollbar-thumb  { background-color: #f7941d;border-radius: 0; border: 2px solid #000;}
.layout.theme-orange .pie {
	background-color: #f7941d;
}
	.layout.theme-orange #submenu-cnt  > ._inner > a._item.__active,
.layout.theme-orange #submenu-cnt  > ._inner > a._item:hover{
    	background-image: url(/svg/moti4/f7941d/icon-arrow-right.svg);
	}
	.layout.theme-orange .nav-block.__highlight{
		background-image: url(/svg/moti4/f7941d/icon-arrow-right.svg);
	}
	.layout.theme-orange .nav-block.__previous.__highlight{
		background-image: url(/svg/moti4/f7941d/icon-arrow-right.svg);
	}
	
	.layout.theme-orange .__show-scroll ._button{
		background-image: url(/svg/moti4/f7941d/icon-arrow-scroll.svg);
	}
	.layout.theme-orange .question-title.inp-checkbox.__checked .input{
		background-image: url(/svg/moti4/f7941d-ffffff/icon-check.svg);
	}
/* TEAL */
.layout.theme-teal .pm-overlay:after,
.layout.theme-teal .bg-highlight,
.layout.theme-teal #submenu-cnt-dummy,
.layout.theme-teal ._pagDots ._dot.__active,
#page-section-teal,
.layout.theme-teal #liveFeitfabel .live-image-cnt:after,
.layout.theme-teal #page-section-inherit
{ 	background-color: #4BA8B5; }

.layout.theme-teal .question-title.__checked,
.layout.theme-teal .text-highlight
{ 	color: #4BA8B5; }

.layout.theme-teal *.__border-highlight {
    border-left: solid 13px #4BA8B5;
}
.layout.theme-teal label.toggle-switch::after,
.layout.theme-teal .pie {
	background-color: #4BA8B5;
}
.layout.theme-teal #layer1::-webkit-scrollbar-thumb, .layout.theme-teal #blockArea::-webkit-scrollbar-thumb  { background-color: #4BA8B5;border-radius: 0; border: 2px solid #000;}

.layout.theme-teal #submenu-cnt  > ._inner > a._item.__active,
.layout.theme-teal #submenu-cnt  > ._inner > a._item:hover{
    	background-image: url(/svg/moti4/4BA8B5/icon-arrow-right.svg);
	}
.layout.theme-teal .nav-block.__highlight{
	background-image: url(/svg/moti4/4BA8B5/icon-arrow-right.svg);
}
.layout.theme-teal .nav-block.__previous.__highlight{
	background-image: url(/svg/moti4/4BA8B5/icon-arrow-right.svg);
}
	.layout.theme-teal .__show-scroll ._button{
		background-image: url(/svg/moti4/4BA8B5/icon-arrow-scroll.svg);
	}
	.layout.theme-teal .question-title.inp-checkbox.__checked .input{
		background-image: url(/svg/moti4/4BA8B5-ffffff/icon-check.svg);
	}

/* LIME */
.layout.theme-lime .pm-overlay:after,
.layout.theme-lime .bg-highlight,
.layout.theme-lime #submenu-cnt-dummy,
.layout.theme-lime ._pagDots ._dot.__active,
#page-section-lime,
.layout.theme-lime #liveFeitfabel .live-image-cnt:after,
.layout.theme-lime #page-section-inherit
{ 	background-color: #A8C500; }
.layout.theme-lime .question-title.__checked,
.layout.theme-lime .text-highlight
{ 	color: #A8C500; }

.layout.theme-lime *.__border-highlight {
    border-left: solid 13px #A8C500;
}

.layout.theme-lime #layer1::-webkit-scrollbar-thumb, .layout.theme-lime #blockArea::-webkit-scrollbar-thumb  { background-color: #A8C500;border-radius: 0; border: 4px solid #000;}
.layout.theme-lime label.toggle-switch::after,
.layout.theme-lime .pie {
	background-color: #A8C500;
}	
.layout.theme-lime #submenu-cnt  > ._inner > a._item.__active,
.layout.theme-lime #submenu-cnt  > ._inner > a._item:hover{
    	background-image: url(/svg/moti4/A8C500/icon-arrow-right.svg);
	}
	.layout.theme-lime .nav-block.__highlight{
		background-image: url(/svg/moti4/A8C500/icon-arrow-right.svg);
	}
	.layout.theme-lime .nav-block.__previous.__highlight{
		background-image: url(/svg/moti4/A8C500/icon-arrow-right.svg);
	}
	
	.layout.theme-lime .__show-scroll ._button{
		background-image: url(/svg/moti4/A8C500/icon-arrow-scroll.svg);
	}
	.layout.theme-lime .question-title.inp-checkbox.__checked .input{
		background-image: url(/svg/moti4/A8C500-ffffff/icon-check.svg);
	}
/* RED */
.layout.theme-red .pm-overlay:after,
.layout.theme-red .bg-highlight,
.layout.theme-red #submenu-cnt-dummy,
.layout.theme-red ._pagDots ._dot.__active,
#page-section-red,
.layout.theme-red #liveFeitfabel .live-image-cnt:after,
.layout.theme-red #page-section-inherit
{ 	background-color: #E43044; }
.layout.theme-red .question-title.__checked,
.layout.theme-red .text-highlight
{ 	color: #E43044; }

*.layout.theme-red *.__border-highlight {
    border-left: solid 13px #E43044;
}

.layout.theme-red #layer1::-webkit-scrollbar-thumb, .layout.theme-red #blockArea::-webkit-scrollbar-thumb  { background-color: #E43044;border-radius: 0; border: 2px solid #000;}

.layout.theme-red label.toggle-switch::after,
.layout.theme-red .pie {
	background-color: #E43044;
}

	.layout.theme-red #submenu-cnt  > ._inner > a._item.__active,
	.layout.theme-red #submenu-cnt  > ._inner > a._item:hover{
    	background-image: url(/svg/moti4/E43044/icon-arrow-right.svg);
	}
	
	.layout.theme-red .nav-block.__highlight{
		background-image: url(/svg/moti4/E43044/icon-arrow-right.svg);
	}
	.layout.theme-red .nav-block.__previous.__highlight{
		background-image: url(/svg/moti4/E43044/icon-arrow-right.svg);
	}
	
	.layout.theme-red .__show-scroll ._button{
		background-image: url(/svg/moti4/E43044/icon-arrow-scroll.svg);
	}
	.layout.theme-red .question-title.inp-checkbox.__checked .input{
		background-image: url(/svg/moti4/E43044-ffffff/icon-check.svg);
	}
	.layout.theme-red label.inp-xcbox.selected:before,
	.layout.theme-red label.inp-radio.selected:before{
    	background-color: #E43044;
}

/* purple */
.layout.theme-purple .pm-overlay:after,
.layout.theme-purple .bg-highlight,
.layout.theme-purple #submenu-cnt-dummy,
.layout.theme-purple ._pagDots ._dot.__active,
#page-section-purple,
.layout.theme-purple #liveFeitfabel .live-image-cnt:after,
.layout.theme-purple #page-section-inherit
{ 	background-color: #9b85be; }
.layout.theme-purple .question-title.__checked,
.layout.theme-purple .text-highlight
{ 	color: #9b85be; }

*.layout.theme-purple *.__border-highlight {
    border-left: solid 13px #9b85be;
}

.layout.theme-purple #layer1::-webkit-scrollbar-thumb, .layout.theme-purple #blockArea::-webkit-scrollbar-thumb  { background-color: #9b85be;border-radius: 0; border: 2px solid #000;}

.layout.theme-purple label.toggle-switch::after,
.layout.theme-purple .pie {
	background-color: #9b85be;
}

	.layout.theme-purple #submenu-cnt  > ._inner > a._item.__active,
	.layout.theme-purple #submenu-cnt  > ._inner > a._item:hover{
    	background-image: url(/svg/moti4/9b85be/icon-arrow-right.svg);
	}
	
	.layout.theme-purple .nav-block.__highlight{
		background-image: url(/svg/moti4/9b85be/icon-arrow-right.svg);
	}
	.layout.theme-purple .nav-block.__previous.__highlight{
		background-image: url(/svg/moti4/9b85be/icon-arrow-right.svg);
	}
	
	.layout.theme-purple .__show-scroll ._button{
		background-image: url(/svg/moti4/9b85be/icon-arrow-scroll.svg);
	}
	.layout.theme-purple .question-title.inp-checkbox.__checked .input{
		background-image: url(/svg/moti4/9b85be-ffffff/icon-check.svg);
	}
	.layout.theme-purple label.inp-xcbox.selected:before,
	.layout.theme-purple label.inp-radio.selected:before{
    	background-color: #9b85be;
}

.bg-white label.inp-radio:before, 
.bg-white label.inp-xcbox:before{
	
    border: 3px solid #000;
    background-color: #000;
}
.bg-white .vraag-nr {
    border: 2px solid #000;
    color: #000;
}
	

/* fase blok */
.fase-form .result-slide{
	display:none;
}
	.fase-block{
		background-size: 140px auto;
		background-position: 0 0;
		background-repeat: no-repeat;
	}


/* quiz blok */
.quiz-form .result-slide{
	display:none;
}
	.quiz-block{
		background-size: 140px auto;
		background-position: 0 0;
		background-repeat: no-repeat;
	}

/* voor mij blok */

	.voorMij-blok{
		background-size: 90px auto;
		    background-position: 10px 10px;
		overflow:visible;
		background-repeat: no-repeat;
	}
	
	
	.voorMij-blok  ._footer{
	right: 0;
    bottom: 0;
    position: absolute;
    padding: 5px 15px;
    margin-bottom: -25px;
    margin-right: 25px;
    background-color: #0a0a0a;
    color: #FFF;
	}
	
	.frontend.layout .voorMij-resultaat{
		transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    top: 50%;
    display:none;
    z-index:2;
	}
	
	
/* split columns */
.split-columns{
	
}
.split-columns:after{
	content: '';
	clear: both;
	display: block;
}
	.split-columns .column-left,
	.split-columns .column-right
	{
		box-sizing: border-box;
		float:left;
		padding:10px;
	}
	.split-columns .column-left{
		width: 40%;
	}
	.split-columns .column-right{
		width: 60%;
	}


/* footer */
.footer_content{
	    background-color: #F2F1F0;
    color: #000;
    box-sizing: border-box;
    padding: 50px;
	font-size:0.8em;
	line-height:normal;
}

.footer_content > ._inner{
	max-width: 1680px;
	margin: 0 auto;
	padding-top:10px;
	
	}

.footer_content a{
	color: #000;
}

.footer_content ._logo{
	width:253px;
	height:94px;
	float:left;
	margin:20px;
	    margin-top: -6px;
	margin-right:50px;
	background-image: url('../../images/moti55/logos/logo-versvlavingskunde.png');
	background-repeat:no-repeat;
	background-size: 100% auto;
	
}
.footer_content ._text{
	float:left;
	max-width: 890px;
}
.footer_content ._statement{
	float:right;
	margin-top: 4em;
}

	
	
/**
Stipsets
**/

._pagDots{
	display:block;	
	height:20px;
}	
._pagDots ._dot{
	display:block;
	float:left;
	width: 20px;
	height: 20px;
	margin: 5px;
	background-color: #0a0a0a;
	border-radius: 100%;
}	



#statsCnt ._pagDots{
	position: absolute;
	right: 75px;
	top: 0;
	margin: 15px;
}
#statsCnt .nav-block{
	position: absolute;
	right: 75px;
	bottom: 50px;
	margin: 15px;
}
	
	
/**
 * pie chart
 */


#berichtCnt
{
	margin:50px;
	position: absolute;
	width:400px;height:400px;
	margin-top:100px;
	left:100px;
}


#berichtGraph{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='200'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size:70%;
	background-position:center;	
	animation: float-graph 3s infinite ease-in-out alternate-reverse;
	transform-origin: left top;
}

#berichtCnt:after{
	content: '';
	display:block;
	position: absolute;
	bottom:0;
	margin-bottom: -60px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 382 27.3'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23D9D9DA;%7D%0A%3C/style%3E%3Cellipse class='st0' cx='191' cy='13.6' rx='191' ry='13.6'/%3E%3C/svg%3E");
	background-position:center;background-repeat: no-repeat;
	width:100%;height:40px;
	background-size: 80% auto;
	animation: graph-shadow 3s infinite ease-in-out alternate-reverse;
	transform-origin: left top;
}

#statsCnt .st-percentage:after{
	content: '%';
}

#statsCnt{
	width: 750px;
	margin:50px;
	float:right;
	margin-top:120px;
	min-height:100px;
	margin-right:150px;
	animation: float-stats 3.25s infinite 1s ease-in-out alternate-reverse;
	transform-origin: left top;
}

#statsCnt .st-text{
	    margin-top: -30px;
}


@keyframes float-graph{
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-15%);
	}
}
@keyframes float-stats{
	from {
		filter: blur(5%);
	}
	to {
		filter: blur(5%);
	}
}
@keyframes graph-shadow{
	from {
		background-size: 80% auto;
	}
	to {
		background-size: 65% auto;
	}
}

#liveFeitfabel{
	padding:20px;
}
#liveFeitfabel ._pagDots{
	margin:20px 0;
}
#liveFeitfabel .live-text{
	    padding-bottom: 50px;
    max-height: 400px;
    overflow: auto;
    clear: both;
}
#liveFeitfabel .nav-block{
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.pm-section #liveFeitfabel .live-image-cnt{
	    padding-right: 35px;
    position: relative;
    padding-bottom: 20px;
    z-index: 0;
}
.pm-section #liveFeitfabel .live-image{
	z-index:1;position:relative;
}
.pm-section #liveFeitfabel .live-image-cnt:after{
	content:'';
	display:block;
	width:100px;height:455px;
	position: absolute;
	right:0;bottom:0;
}


.pm-section.__switch		{ background-color:#ECEDED; }


#liveDoelen{
	padding:20px;
}

#liveDoelen ._pagDots{
	margin:20px 0;
	margin-top:0;
	float:right;
}
#liveDoelen .live-text{
	    padding-bottom: 50px;
    max-height: 400px;
    overflow: auto;
    clear: both;
}
#liveDoelen .nav-block{
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.pm-section.__switch #liveDoelen .live-image-cnt{
	float: right;
}
.pm-section.__switch #liveDoelen .split_div.last{
	padding-left:0;
}
.pblock.__show-scroll.__black-scroll  ._button,
.pgroup.__show-scroll.__black-scroll ._button{
	background-image: url(/svg/moti4/000000/icon-arrow-scroll.svg);
}
.pblock.__show-scroll.__white-scroll ._button,
.pgroup.__show-scroll.__white-scroll ._button{
	background-image: url(/svg/moti4/ffffff/icon-arrow-scroll.svg);
}
h1.__border-highlight,h2.__border-highlight,h3.__border-highlight,h4.__border-highlight{
	    padding-left: 20px;
    border-left-width: 40px!important;
}

.__live-slideshow{
	transition: all 0.3s;
}


/* landkaart */
#landkaart-container{
	position: relative;    margin: 60px 25px;
}
#landkaart-container > ._text{
	position: absolute;
	color:#B24E44;
	width:380px;
	height:270px;
	left: 0;
	top: 50px;
}
#landkaart-container #landkaart{
	background-image:url('../../images/moti4/graphics/graphic-map.svg');
	background-size:100% auto;
	background-repeat:no-repeat;
	width: 580px; height:690px;
	position: absolute;
	z-index: 2;
	right: 0;
}
#landkaart-container #landkaart ._prov{
	background-size:100% auto;
	background-repeat:no-repeat;
	width: 62px; height:77px;
	background-image:url('/resources/images/moti4/icons/icon-landmark.svg');
	position: absolute;	
	transition: transform 0.3s;
	transform-origin: center bottom;
}
#landkaart-container #landkaart ._prov.__active,
#landkaart-container #landkaart ._prov:hover{
	transform: scale(1.3,1.3);
}
#landkaart-container #landkaart > ._positions{
	position: absolute;	
	margin-left:-35px;
}
#landkaart-container #landkaart ._prov.__groningen{
left: 525px; top: 0;
}
#landkaart-container #landkaart ._prov.__friesland{
left: 380px; top: 50px;
}
#landkaart-container #landkaart ._prov.__drenthe{
left: 500px; top: 120px;
}
#landkaart-container #landkaart ._prov.__overijssel{
left: 483px; top: 230px;
}
#landkaart-container #landkaart ._prov.__flevoland{
left: 340px; top: 190px;
}
#landkaart-container #landkaart ._prov.__gelderland{
left: 400px; top: 330px;
}
#landkaart-container #landkaart ._prov.__utrecht{
left: 275px; top: 290px;
}
#landkaart-container #landkaart ._prov.__noord-holland{
left: 216px; top: 188px;
}
#landkaart-container #landkaart ._prov.__zuid-holland{
left: 166px; top: 325px;
}
#landkaart-container #landkaart ._prov.__zeeland{
left: 107px; top: 410px;
}
#landkaart-container #landkaart ._prov.__noord-brabant{
left: 290px; top: 446px;
}
#landkaart-container #landkaart ._prov.__limburg{
left: 385px; top: 583px;
}

#con-show-organisatie table{
	width:100%;
}
#con-show-organisatie h3{
	font-size:1.25em;
}


.keuze-blok{
	opacity:0.75;
	transition:all 0.5s;
}
.keuze-blok.__toggle-active{
	opacity:1;
}


/* NOTIFICATIE APPJE */

.layout *.__required._error{
	border: 1px solid #D24E89!important;
}

#kc-cnt {
    position: absolute;
    left: 50%;
    margin-left:-35px;
    margin-top: -35px;
    top:50%;
    width:70px;height:70px;
    z-index: 20;
}
#notif-cnt {
    position: absolute;
    left: 0;
    right: 0;
    height: 18%;
    top: 82%!important;
    overflow: hidden;
    background-color: #000;
    z-index: 5
}

#notif-cnt .notif_row:after {
	content:'';
	display:block;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 20px;    
    right:20px;
    background-repeat: no-repeat;
   	background-size:cover;
}
#notif-cnt .notif_row {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
   	background-size:cover;
}
#notif-cnt .notif_row.green_block{
	background-color:#6af091;
}
#notif-cnt .notif_row.info_block{
	background-color: #1edaff;
}

#notif-cnt .notif_row.red_block{
	background-color:#fd1b65;
}

#notif-cnt .notif_row .notif-icon_cnt {
    position: absolute;
    left: 4%;
    right: 70%;
    top: 10%;
    bottom: 5%
}

#notif-cnt .notif_row .notif-text_cnt {
    position: absolute;
    left: 4%;
    margin-left:100px;
    right: 5%;
    top: 23%;
    bottom: 5%;
    color: #FFF;
}
#notif-cnt .notif_row .notif-text_cnt h3{
    color: #FFF;
}
#notif-cnt .notif_row .notif-icon_cnt .nOk,
#notif-cnt .notif_row .notif-icon_cnt .nInfo,
#notif-cnt .notif_row .notif-icon_cnt .nNotOk
{
	background-repeat:no-repeat;
	display:block;
	height:110px;
	width:110px;
	background-size:100% auto;
    margin-left:-10px;
    margin-top:-10px;
	background-image: url('../../images/moti4/icons/icon-notif-ok.svg');
}
#notif-cnt .notif_row .notif-icon_cnt .nNotOk
{
	background-image: url('../../images/moti4/icons/icon-notif-notok.svg');
}
#notif-cnt .notif_row .notif-icon_cnt .nInfo
{
	background-image: url('../../images/moti4/icons/icon-notif-info.svg');
}


.layout #overLayer{
	background-color:#f2f2f261;
}

/* Saved popup */
.kc-saved{
	display: block;
	background:#D8E4E5;
	position: absolute;
	right:0;
	bottom:0;
	width:70px;
	height:70px;
	-webkit-transition: all 0.2s;
	transition: all 0.4s;
	transition-delay: 0.5s;
	-webkit-animation:fade-in 0.3s 1;-webkit-animation-fill-mode: forwards;animation:fade-in 0.3s 1 ;animation-fill-mode: forwards;
	-webkit-box-shadow: 0px 1px 10px 0px rgba(15, 15, 15, 0.25);box-shadow: 0px 1px 10px 0px rgba(15, 15, 15, 0.25);
	border-radius: 20px;
	border: 3px solid #FFF;
}
	.kc-saved:before{
		content:'';
		display:block;
		width:100%;
		height:100%;		
		position: absolute;
		background-repeat: no-repeat;
		-webkit-transition: background 0.1s;		
	transition-delay: 0.5s;
		transition: background 0.1s;		
		background-size:50%;
		background-position:center;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='' height='' viewBox='0 0 53.4 60.4'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Crect x='14' y='2' class='st0' width='8.3' height='13.6'/%3E%3Cpath class='st0' d='M44.8 9.5c0.3 1 0.4 2.1 0.4 3.1v6.6h-37V1.1c0-0.4 0.2-0.8 0.6-1.1H6.7C3 0 0 3 0 6.7v47c0 3.7 3 6.7 6.7 6.7h40c3.7 0 6.7-3 6.7-6.7V17.9L44.8 9.5zM39.7 46H13.5v-3.4h26.2V46zM39.7 36.1H13.5v-3.4h26.2V36.1z'/%3E%3C/svg%3E");
	}
	
	.kc-saved:after{
		content: 'Opgeslagen!'; 
		display: block;
		margin-top: 80px;
    	font-size:0.75em;
    	font-weight: bold;
    	text-align: center;
	}	



	.kc-saved.__ok{
		background-color: #98f679;       
background-size: cover;
		border-radius: 100%;
	}

	.kc-saved.__notok{
		border-radius: 100%;
	}
	.kc-saved.__notok:before{ 
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='' height='' viewBox='0 0 14.4 14.4'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M10.7 7.2l3-3c1-1 1-2.5 0-3.5 -1-1-2.5-1-3.5 0l-3 3 -3-3c-1-1-2.5-1-3.5 0 -1 1-1 2.5 0 3.5l3 3 -3 3c-1 1-1 2.5 0 3.5s2.5 1 3.5 0l3-3 3 3c1 1 2.5 1 3.5 0 1-1 1-2.5 0-3.5L10.7 7.2z'/%3E%3C/svg%3E");
	}
	
	
	
#liveQuote{
	line-height: normal;
	height:500px;
}
#liveQuote > ._inner{
	position: absolute;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%; width:80%;left:10%;right:10%;
	text-align:center;

}	

#liveQuote h1{
font-size:3.5em;line-height:normal;	
}


.voorMij-blok ._footer{
	
}



/* edit sjeng */
.layout label.toggle-switch:before{
	display:none;
}
label.toggle-switch{
	font-size: 12px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	width: 10em;
	height: 3em;
	border-radius: 3em;
	background-color: #515151;
	outline: 0;
	cursor: pointer;
	transition: background-color 0.09s ease-in-out;
	position: relative;
	margin-top: 15px!important;
}
label.toggle-switch.__checked {
	background-color: #1A171B;
}
label.toggle-switch::after {
	content: ' ';
	width: 3em;
	height: 3em;
	background-color: #FFCE00;
	border-radius: 3em;
	position: absolute;
	left: 0;
	transform: translateX(0%)  scale(0.8);
	transition: all 0.5s ease-in-out;
}
label.toggle-switch.__checked::after {
	left: 100%;
	transform: translateX(-100%) scale(0.8);
}


.pm_flow .menu-flag{
	float: right;
	margin: 42px 56px 0 10px;
	display: block;
	height: 50px;
	padding-right: 61px;
	padding-top: 10px;
	background-size: auto 100%;
	padding-left: 15px;
	background-repeat: no-repeat;
	background-color: #ffce00;
	background-position: right center;
	font-weight: 900;
	color: #000;
	margin-bottom: 19px;
}
.pm_flow .menu-flag.__active{
	opacity: 1;
}
.pm_flow .menu-flag.__en{
	background-image: url('/resources/images/moti4/buttons/lang-english.png');
}
.pm_flow .menu-flag.__nl{
	background-image: url('/resources/images/moti4/buttons/lang-dutch.png');
}