@charset "utf-8";
@import url('pm-layout.css?v=5');
@import url('animations.css?v=1');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700;800;900&display=swap');

/*
============
site colors
===========
geel: #F1F0DE;
rood: #F65D2C;
pagina titel (ich bin Elsa)
zwart: #282825;

tekst
zwart: #1A171B;
blauw: #3991CE;
*/ 
 
.layout {
	color: 	#1a171b;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
	line-height: 1.7em;
	background-color: #f1f0de;
}

/* ---------- set the default font for other HTML elements ---------- */
.layout td, .layout th, .layout a{	
	font-family: 'Poppins', sans-serif;
}

.layout h1,.layout h2,.layout h3,.layout h4,.layout h5,.layout h6 {	
	font-family: 	'Poppins', sans-serif;
	color: 			#1a171b;
	margin-top:		0; 
    margin-bottom: 0.05em;
	font-weight: 700;
/*    font-weight: 900; */
}

/* the default headings, try to style them from big (h1, h2, h3) to subtitle (h4, h5, h6) - if there are multiple colors, set the most common color here and add the subclasses in elements.css - set height in em (base font is 20px, so <size in em> = <size from design doc>/20) */
.layout h1 {
    font-size: 4em;
    line-height: 1.25em;
    color: #000000; 
} 
.layout h2 {
    font-size: 3em;
    line-height: 1.25em;
    color: #000000; 
}
.layout h3 {
    font-size: 2.25em;
    line-height: 1.25em;
    color: #F65D2C; 
}

/* try to use these classes for the smaller headings and subtitles, these usually have less margin top and less line height than the bigger headings */
.layout h4{}
.layout h5{}
.layout h6{} 



#layout #overLayer{
	top:0;
	background-color:#f1f0de;
	background-image: url(/resources/cimages/mc_55/we-love-numbers/red-arrow.png);
	background-position: right -75px top 200px;
	background-repeat: no-repeat;
	padding-top: 50px;
}

#overLayer #region-popup{
    width: 854px;
	margin: 0 auto;
	background-color: #FFF;
	box-sizing: border-box;
	padding: 30px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);

}

.bttn_close{
	float: right;
	margin-top: 5px;
	margin-right: 10px;
	    height: 80px;
    padding-left: 80px;
	background-position: left center;
	color: #fff;
	background-repeat: no-repeat;
	font-size: 12px;
	background-image: url(/svg/mc_55/000000/kruisje.svg);
}


#overLayer .bttn_close{
	float: right;
	margin-top: 5px;
	margin-right: 10px;
	    height: 80px;
    padding-left: 80px;
	background-position: left center;
	color: #fff;
	background-repeat: no-repeat;
	font-size: 12px;
	background-image: url(/svg/mc_55/000000/kruisje.svg);
}


.layout a {text-decoration: none;}

.pm_flow #sidebar .bigger-text {
    display: block;
    position: relative;
     /* right: 0; */
     /* top: 0; */
    margin: 18px;
    height: 46px;
    font-size: 1em;
    z-index: 1;
    color: #ffffff;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right center;
    background-image: url('/resources/cimages/mc_55/homepage/a+.png');
    transition: all 0.5s;
/*    padding-left: 58px; */
    padding-right: 50px;
    line-height: 18px;
}
.pm_flow #sidebar .bigger-text:before {
    content: 'Make the text bigger on this site';
    font-size: 17px;
    line-height: 20px;
    transition: all 0.3s;
}

.pm_flow.__bigger #sidebar .bigger-text:before {
    content: 'Make the text smaller on this site';
}


.pm_flow.reg-en .mob-logo-interreg,
.pm_flow.reg-en #sidebar .made-possible{

	background-image: url('/resources/cimages/mc_55/logos/logo-interreg-EN-sidebar-.jpg');
}

.pm_flow.reg-en #topbar .bttn-menu:before
{
	content: 'click here to open the menu';
}

.pm_flow.reg-en #topbar.__active .bttn-menu:before{
	content: 'click here to close the menu';
}


.pm_flow.reg-be-limburg .mob-logo-interreg,
.pm_flow.reg-nl-limburg .mob-logo-interreg,
.pm_flow.reg-be-limburg .made-possible,
.pm_flow.reg-nl-limburg .made-possible{

	background-image: url('/resources/cimages/mc_55/logos/logo-interreg-NL-sidebar.jpg');
}


.pm_flow.reg-be-limburg #sidebar .bigger-text:before,
.pm_flow.reg-nl-limburg #sidebar .bigger-text:before {
content: 'Maak tekst op de site groter';
}
.pm_flow.__bigger.reg-be-limburg #sidebar .bigger-text:before,
.pm_flow.__bigger.reg-nl-limburg #sidebar .bigger-text:before {
content: 'Maak tekst op de site kleiner';
}
.pm_flow.reg-be-limburg .mob-logo-interreg,
.pm_flow.reg-nl-limburg .mob-logo-interreg,
.pm_flow.reg-be-limburg .made-possible,
.pm_flow.reg-nl-limburg .made-possible{

background-image: url('/resources/cimages/mc_55/logos/logo-interreg-NL-sidebar.jpg');
}
.pm_flow.reg-be-limburg #topbar .bttn-menu:before,
.pm_flow.reg-nl-limburg #topbar .bttn-menu:before
{
	content: 'klik hier om het menu te bekijken';
}

.pm_flow.reg-be-limburg #topbar.__active .bttn-menu:before,
.pm_flow.reg-nl-limburg #topbar.__active .bttn-menu:before {
	content: 'klik hier om het menu te sluiten';
}


.pm_flow.reg-be-liege #sidebar .bigger-text:before {
content: 'Agrandir le texte sur ce site';
}
	.pm_flow.__bigger.reg-be-liege #sidebar .bigger-text:before {
	content: 'Réduire le texte sur ce site';
	}

.pm_flow.reg-be-liege .mob-logo-interreg,
.pm_flow.reg-be-liege .made-possible{
background-image: url('/resources/cimages/mc_55/logos/logo-interreg-FR-sidebar-.jpg');

}
.pm_flow.reg-be-liege #topbar .bttn-menu:before
{
	content: 'Cliquez ici pour voir le menu';
}

.pm_flow.reg-be-liege #topbar.__active .bttn-menu:before{
	content: 'cliquez ici pour fermer le menu';
}


.pm_flow.reg-be-ostbelgin #sidebar .bigger-text:before,
.pm_flow.reg-de-aachen #sidebar .bigger-text:before,
.pm_flow.reg-de-euskirchen #sidebar .bigger-text:before,
.pm_flow.reg-de-heinsburg #sidebar .bigger-text:before,
.pm_flow.reg-de-bitburg-prum #sidebar .bigger-text:before {
content: 'Vergrößern Sie den Text auf dieser Seite';
font-size:1em;
}
.pm_flow.__bigger.reg-be-ostbelgin #sidebar .bigger-text:before,
.pm_flow.__bigger.reg-de-aachen #sidebar .bigger-text:before,
.pm_flow.__bigger.reg-de-euskirchen #sidebar .bigger-text:before,
.pm_flow.__bigger.reg-de-heinsburg #sidebar .bigger-text:before,
.pm_flow.__bigger.reg-de-bitburg-prum #sidebar .bigger-text:before {
	content: 'Verkleinern Sie den Text auf dieser Seite';
	}
	
.pm_flow.reg-be-ostbelgin .mob-logo-interreg,
.pm_flow.reg-de-aachen .mob-logo-interreg,
.pm_flow.reg-de-euskirchen .mob-logo-interreg,
.pm_flow.reg-de-heinsburg .mob-logo-interreg,
.pm_flow.reg-de-bitburg-prum .mob-logo-interreg,

.pm_flow.reg-be-ostbelgin .made-possible,
.pm_flow.reg-de-aachen .made-possible,
.pm_flow.reg-de-euskirchen .made-possible,
.pm_flow.reg-de-heinsburg .made-possible,
.pm_flow.reg-de-bitburg-prum .made-possible{

background-image: url('/resources/cimages/mc_55/logos/logo-interreg-DE-sidebar.jpg');
}

.pm_flow.reg-be-ostbelgin #topbar .bttn-menu:before,
.pm_flow.reg-de-aachen #topbar .bttn-menu:before,
.pm_flow.reg-de-euskirchen #topbar .bttn-menu:before,
.pm_flow.reg-de-heinsburg #topbar .bttn-menu:before,
.pm_flow.reg-de-bitburg-prum #topbar .bttn-menu:before
{
	content: 'Klicken Sie hier, um das Menü zu öffnen';
}

.pm_flow.reg-be-ostbelgin #topbar.__active .bttn-menu:before,
.pm_flow.reg-de-aachen #topbar.__active .bttn-menu:before,
.pm_flow.reg-de-euskirchen #topbar.__active .bttn-menu:before,
.pm_flow.reg-de-heinsburg #topbar.__active .bttn-menu:before,
.pm_flow.reg-de-bitburg-prum #topbar.__active .bttn-menu:before {
	content: 'Klicken Sie hier, um das Menü zu schließen';
}



#layout.__bigger{
					font-size:22px;
}
#layout.__bigger div.pblock.overflow,
#layout.__bigger div#result-group{
							  height:auto!important;
}



.made-possible {
	display: block;
	background-repeat: no-repeat;
	height: 165px;
	width: 271px;
	margin: 52px 0 0 -22px;
	position: absolute;
	right: 0;
	top: 0;
	background-size: 232px auto;
}

.footer-logos {
				  display: block;
				  background-repeat: no-repeat;
				  background-size: 100% auto;
				  margin: 40px 0 0 0;
				  width: 100%;
				  padding-top: 16.7%;
				  height: auto;
				  
}
.footer-logos.__EN-ft {
    background-image: url('/resources/cimages/mc_55/logos/footer-logos_EN.png');   
}
.footer-logos.__NL-ft {
    background-image: url('/resources/cimages/mc_55/logos/footer-logos_NL.png');   
}
.footer-logos.__FR-ft {
    background-image: url('/resources/cimages/mc_55/logos/footer-logos_FR.png');   
}
.footer-logos.__DE-ft {
    background-image: url('/resources/cimages/mc_55/logos/footer-logos_DE.png');   
}



.preContent{
	position: relative;
    z-index: 10;
}



/* topbar */

/* top bar */
body.pm_flow #layer1 {
	position: absolute;
	top: 0;
	transition: all 0.5s;
}
.hide-sidebar.pt-pagina #topbar, .hide-none.pt-pagina #topbar,
body.pm_flow #topbar{
	height: 80px;
	display: none;
	transition: all 0.5s;
	position: fixed;
	top: 0;
	bottom: auto;
	overflow: hidden;
	width: 100%!important;
}
body.pm_flow #topbar .link-container{
	clear: both;
}
body.pm_flow #topbar .logo{

}

.pm_flow #topbar > ._inner{
}

.pm_flow #topbar.__active{
	height: auto;
	overflow: auto;
	overflow-x: hidden;
	bottom: 0;
}

.pm_flow #topbar .bttn-menu{
	width: 50px;
	height: 40px;
	display: block;
	float:left;
	font-size: 1.5em;
	margin: 18px;
	z-index: 1;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='43' viewBox='0 0 53.7 43'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23f65d2c;%7D%0A%3C/style%3E%3Crect class='st0' width='53.7' height='7.9'/%3E%3Crect y='17.1' class='st0' width='53.7' height='7.9'/%3E%3Crect y='35.1' class='st0' width='53.7' height='7.9'/%3E%3C/svg%3E");
	transition: all 0.5s;
}

.pm_flow #topbar.__active  .bttn-menu{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='45' viewBox='0 0 42.7 44.9'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23f65d2c;%7D%0A%3C/style%3E%3Crect x='-5.5' y='18.5' transform='matrix(0.6881 -0.7256 0.7256 0.6881 -9.6286 22.487)' class='st0' width='53.7' height='7.9'/%3E%3Crect x='-5.5' y='18.5' transform='matrix(-0.6766 -0.7364 0.7364 -0.6766 19.2551 53.3429)' class='st0' width='53.7' height='7.9'/%3E%3C/svg%3E");
	margin-left: 216px;
}

.pm_flow #topbar .bttn-menu:before{
	display: none;
	text-align: right;
	width: 170px;
	height: 60px;
	line-height: normal;
	font-size: 0.8em;
	color: initial;
	transition: all 0.3s;
	margin-top: -2px;
	margin-left: -190px;
}

.pm_flow #topbar.__active .bttn-menu:before{
}

.pm_flow #topbar .menu-item{
	float: none;
	margin: 1em;
	font-size: 1.5em;
	line-height: 1.5em;

}




/* buttons - the default link button(s) on the site, add subclasses where needed and fill in as required - extra classes also need to be added in elements.css for the designers */
.button {
	display: block; 
    padding: 15px 10px;
    text-align: center;
    background-color: #1a171b;
    color: #ffffff;
    font-family: 'Poppins', serif;
    font-size: 1.3em;
}
.button.__blue {
    background-color: #3991CE;
/*    padding: 0px 10px; */
    box-sizing: border-box;
}
.button.arrow-blue {
    display: block;
    background-color: transparent;
    color: #3991CE;
    position: relative;
}
.button.arrow-blue:before {
    content: ' ';
    background-image: url('/resources/cimages/mc_55/homepage/icon-arrow-blue-left.png');
    background-repeat: no-repeat;
    background-size: 19px 27px;
    display: block;
    position: absolute;
    top: 14px;
    left: 0;
    width: 19px;
    height: 27px;
    margin-left: -24px;
    margin-top: -10px;
}

/* icon buttons */
.btn-icon {
    display: block;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 30px;
}
.btn-icon._alcohol, .btn-icon._medicijn {
    display: block;
    background-size: 95px 95px;   
}
.btn-icon._alcohol {
    background-image: url('/resources/cimages/mc_55/homepage/icon-bottle.png');    
}
.btn-icon._medicijn {
    background-image: url('/resources/cimages/mc_55/homepage/icon-pill.png');
}

.btn {
	display: block; 
    padding: 0px 5px;
    text-align: center;
    background-color: #1a171b;
    color: #ffffff;
    font-family: 'Poppins', serif;
}
.btn.arrow-blue {
    display: block;
    background-color: transparent;
    color: #3991CE;
    position: relative;
    font-weight: bold;
    float: left;
	padding-left: 30px;
}
.btn.arrow-blue:before {
    content: ' ';
    background-image: url('/resources/cimages/mc_55/homepage/icon-arrow-blue-left.png');
    background-repeat: no-repeat;
    background-size: 19px 27px;
    display: inline-block;
    position: relative;
    top: 9px;
    left: -11px;
    width: 19px;
    height: 27px;
    margin-left: -24px;
    margin-top: -10px;
}
/* icon buttons */

/* we love numbers graph */
.graphWrapper {
    width: 173px;
    position: relative;
    float: left;
    margin-right: 15px;
}
.graphWrapper .gWrap {
    position: absolute;
    bottom: 0;
    left: 0;
}
.graphWrapper .graph-percentage {
    font-size: 2em;
    font-weight: 800;
    text-align: center;
}
.graphWrapper .graph-age {
    font-size: 1.1em;
    font-weight: bold;
    padding: 0 30px 0 30px;
    line-height: 1.0em;
    text-align: center;
    box-sizing: border-box;
}
.graphWrapper .graph {
    margin: 8px 0 8px 0;
    background-color: #F7E200;
    width: 173px;
}
.graphWrapper .graph._44 {
    height: 44.3px;
}
.graphWrapper .graph._41 {
    height: 41.7px;
    margin-top: 11px;
}
.graphWrapper .graph._14 {
    height: 14px;
    margin-top: 39px;
}


.regioWrapper {
    width: 100%;
    height: 184px;
    margin: 0 0 30px 0;
    text-align: center;
}
.regioWrapper .btn-regio {
    display: block;
    float: left;
    margin-right: 60px;
    margin-bottom: 100px;
    background-repeat: no-repeat;
    color: #000000;
    font-size: 1em;
    background-size: 116px auto;
    width: 126px;
    height: 116px;
}
#overLayer .regioWrapper .btn-regio {
	
	width: 143px;
	height: 116px;
	margin-left: 30px;
	background-position: center top;
	font-weight: 600;
	margin-right: 25px;
}
.regioWrapper .btn-regio:after {
    position: relative;
    top: 120px;
}
.regioWrapper .btn-regio.last {
    margin-right: 0px;
}

/* Nederland */
.regioWrapper .btn-regio.nl-zuid-limburg {
    background-image: url('/resources/cimages/mc_55/we-love-numbers/icon-regio_NL-regio_zuid-limburg.png');
}
.regioWrapper .btn-regio.nl-zuid-limburg:after {
    content: 'Zuid Limburg Netherlands';
}
/* Belgie */
.regioWrapper .btn-regio.prov-limburg-belgie {
    background-image: url('/resources/cimages/mc_55/we-love-numbers/icon-regio_BE-regio_prov-limburg.png');
}
.regioWrapper .btn-regio.prov-limburg-belgie:after {
    content: 'Prov. Limburg Belgium';
}
.regioWrapper .btn-regio.prov-liege-belgie {
    background-image: url('/resources/cimages/mc_55/we-love-numbers/icon-regio_BE-regio_prov-liege.png');
}
.regioWrapper .btn-regio.prov-liege-belgie:after {
    content: 'Prov. Liège Belgium';
}
.regioWrapper .btn-regio.prov-ostbelgien-belgie {
    background-image: url('/resources/cimages/mc_55/we-love-numbers/icon-regio_BE-regio_prov-ostbelgien.png');
}
.regioWrapper .btn-regio.prov-ostbelgien-belgie:after {
    content: 'Ostbelgien Belgium';
}
/* Duitsland */
.regioWrapper .btn-regio.de-heinsburg {
    background-image: url('/resources/cimages/mc_55/we-love-numbers/icon-regio_DE-regio_heinsburg.png');
}
.regioWrapper .btn-regio.de-heinsburg:after {
    content: 'Heinsburg Germany';
}
.regioWrapper .btn-regio.de-euskirchen {
    background-image: url('/resources/cimages/mc_55/we-love-numbers/icon-regio_DE-regio_euskirchen.png');
}
.regioWrapper .btn-regio.de-euskirchen:after {
    content: 'Euskirchen Germany';
}
.regioWrapper .btn-regio.de-bitburg-prum {
    background-image: url('/resources/cimages/mc_55/we-love-numbers/icon-regio_DE-regio_bitburg-prum.png');
}
.regioWrapper .btn-regio.de-bitburg-prum:after {
    content: 'Bitburg Prum Germany';
}
.regioWrapper .btn-regio.de-aachen {
    background-image: url('/resources/cimages/mc_55/we-love-numbers/icon-regio_DE-regio_aachen.png');
}
.regioWrapper .btn-regio.de-aachen:after {
    content: 'Aachen Germany';
}

/* we love numbers graph */

.pblock.__show-scroll ._button,
.pgroup.__show-scroll ._button {

}
.scroll-down {
    position: relative;
    display: inline-block;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
	margin-right:30px;
}
.scroll-down:after {
    content: ' ';
    background-image: url('/resources/cimages/mc_55/homepage/arrow-black-triangle-down.png');
    background-repeat: no-repeat;
    background-size: 27px 19px;
    width: 27px;
    height: 19px;
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -30px;
    margin-top: 5px;
    display: block;
}

/* images */
.img-border {
    border: solid 25px #ffffff;
}
.img-auto-width-size {
    width: auto;
    height: 100%;
}
.img-auto-height-size {
    width: 100%;
    height: auto;
}

.respondants-box {
    width: 245px;
    height: 447px;
    position: relative;
    float: left;
}
.respondants-box.__male {
    background-image: url(/resources/cimages/mc_55/we-love-numbers/icon-male.png);
    background-repeat: no-repeat;
    display: block;
    background-size: 245px auto;
}
.respondants-box .subtext {
    display: block;
    position: absolute;
    font-weight: bold;
    font-size: 2.5em;
    bottom: 60px;
}
.respondants-box .subtext.male {    
    left: 60px;
}
.respondants-box .subtext.female {
    left: 40px;
}
.respondants-box.__female {
    background-image: url(/resources/cimages/mc_55/we-love-numbers/icon-female.png);
    background-repeat: no-repeat;
    display: block;
    background-size: 245px auto;
}
.respondants-box.__male div._percentage, .respondants-box.__female div._percentage {
    position: absolute;
    top: 120px;
    left: 40px;
    color: #ffffff;
    font-size: 3.7em;
    font-weight: 900;
}
/* images */




#sidebar a.menu-button{
    margin: 20px 10px 20px 20px;   
    padding: 5px;
    padding-left: 40px;
    margin-left: 20px;
    color: #fff;
    font-size: 1em;
}
 
div.p-no-margin p {
    margin: 0 0 0 0;
}

/* inputs - should always be used on input, select and textarea elements -  fill in where required */
*.input-default {
    color: #1a171b;
    background-color: #FFF;
    border: 1px solid #ECEDED;
    padding: 0.3em 0.5em;
   	width: 100%;
	margin: 0 0 15px 0;font-size: 1em;
	height: 57px;
}
.input-default, textarea {
	font-family: 'Montserrat', sans-serif;	
}

.inp-checkbox{
	font-weight: 500;
}

.inp-radio .input,
.inp-checkbox .input {
	display: inline-block;
	height: 25px;
	margin: 5px 6px -5px 0px;
	width: 25px;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-position: center;
	margin-left: -15px;
	transition: all 0.3s;
	background-color: #FFF;
	border: 2px solid #333;
}

.inp-radio .input,
.inp-checkbox .input {
	display: inline-block;
}

.inp-checkbox.__checked  .input{

	background-color: #333;
}
.inp-checkbox.__checked .input{}
.inp-radio .input {}
.inp-checkbox .input {}
.inp-radio.selected .input {}
.layout label.inp-radio, .layout label.inp-checkbox {}
.layout label.inp-radio {}
.inp-radio.__selected {}
.inp-checkbox.__checked{}
.inp-radio:before,
.inp-checkbox:before{
	display:none!important;	
}

.form-field label {
    font-size: 1.25em;
    font-weight: bold;
    width: 48%;
    float: left;
}
.form-field label:nth-child(odd) {
    margin: 0 4% 0 0;
}
.form-field label.textarea {
    width: 100%;
}



/* quiz */
div.quiz-progress{
					 padding-left: 150px;
					 position: relative;
					 height: 100px;
					 box-sizing: border-box;
					 padding: 20px 20px 20px 130px;

}
div.quiz-progress:before{
							left:0;top:0;
		content: '';    position: absolute;
		width:95px;height:95px;background-position:center;background-size:100% auto; 
		display:block;
		background-repeat:no-repeat;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='95' height='95' viewBox='0 0 95 95'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%233991CE;%7D%0A%3C/style%3E%3Cpath class='st0' d='M47.5 0C21.3 0 0 21.3 0 47.5 0 73.8 21.3 95 47.5 95 73.8 95 95 73.8 95 47.5 95 21.3 73.8 0 47.5 0zM41.2 12.5h10v5h-10V12.5zM58.3 44c0 0 0 32 0 35.3s-2.6 2.9-2.6 2.9H36.6c0 0-2.6 0.5-2.6-2.9S34 44 34 44s-0.7-7.5 7.2-10.7V20.2h10v13.1C59.1 36.5 58.3 44 58.3 44z'/%3E%3Crect x='37.8' y='44.3' class='st0' width='7.2' height='32.5'/%3E%3C/svg%3E");

}
div.quiz-progress ._bar{
background-color:#FFF;
position:relative;border-radius:20px;overflow:hidden;
height: 40px;box-sizing: border-box;
}
div.quiz-progress ._bar ._fill{
background-color:#3991ce;height: 40px;
}
div.quiz-progress ._bar ._text{
font-weight:600;
}
div.quiz-progress ._bar:before{
background-color:#3991ce;
content:'';
display:block;
width:10%;
}



label.quiz-multi{}
label.quiz-multi.inp-radio{
    position: relative;
    padding-left: 70px;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 25px;
}
label.quiz-multi.inp-radio .input{
	margin-left: 14px;
border-radius: 100%;
margin-top: 0;
/* margin-top: -5px; */
width: 40px;
position: absolute;
height: 40px;
border: 2px solid #f65d2c;
top: 50%;
transform: translateY(-50%);
background-image: none;
left: 0;
}

label.quiz-multi.inp-radio.selected{
									   background-color:#f65d2c;color:#FFF;
}
label.quiz-multi.inp-radio.selected .input{
	background-color:#000;
	 border:2px solid #fff;
}


.vertical-center{
	position: relative;
}
.vertical-center > ._inner,
.pblock.vertical-center > .fs{
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	position: absolute;
}

.pblock.vertical-center > .fs{
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	position: absolute;
}



.preContent ._buttons{
	padding-right: 10px;
	width: 55%;
	float: right;
	box-sizing: border-box;
	padding: 10px;
	position: absolute;
	right: 0;
}
.preContent ._buttons .button-header{
	background-color: #bfbdaf;
	color: #3f3f3a;
	min-width: 114px;
	border-radius: 12px;
	font-weight: bold;
	font-size: 0.8em;
	margin-right: 10px;
	padding: 0px 10px;
	float: right;
}

.preContent ._buttons .button-header.__active{
	background-color: #3991ce;
	color: #FFF;
}

/* 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: #18933;
}
#notif-cnt .notif_row.info_block{
	background-color: #18933;
}

#notif-cnt .notif_row.red_block{
	background-color: #18933;
}

#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/mc_55/icons/icon-notif-ok.svg');
}
#notif-cnt .notif_row .notif-icon_cnt .nNotOk
{
	background-image: url('../../images/mc_55/icons/icon-notif-notok.svg');
}
#notif-cnt .notif_row .notif-icon_cnt .nInfo
{
	background-image: url('../../images/mc_55/icons/icon-notif-info.svg');
}
.layout #overLayer{
	background-color: #f2f2f261;
}

/* footer */
.footer_content{
	background-color: #FCFCFC;
	color: #000;
	box-sizing: border-box;
	padding: 50px;
	padding-bottom: 30px;
	height: 130px;
	font-size: 0.8em;
	line-height: normal;
	margin-top: -130px;
}

.footer_content > ._inner{
	max-width: 1454px;
	margin: 0 auto;
	padding-top: 10px;
}

.footer_content a{
	color: #000;
}

.footer_content ._text{
	float: left;
	max-width: 890px;
}
.footer_content ._statement{

}

/* sidebar */

#sidebar{
	position: fixed;
	left: 0;
	top: 0;
	background-color: #f65d2c;
	bottom: 0;
	z-index: 10;
	width: 210px;
}

#sidebar a.logo{
	height: 90px;
	width: 180px;
	background-repeat: no-repeat;
	display: block;
	background-position: left center;
	margin: 30px auto;
	background-size: 100% auto;
	background-image: url(../../images/mc_55/logos/logo.png);
}

#sidebar a.menu-button{
	display: block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' viewBox='0 0 14.4 17.6'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23F1F0DE;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='0 0 0 17.6 14.4 9.6 '/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px;
	line-height: 1.5em;
	transition: all 0.3s;
	padding-left: 25px;
	padding-right: 10px;
	/* font-size: 0.8em; */
	font-weight: bold;
	margin-left: 15px;
}

#sidebar a.menu-button:hover,
#sidebar a.menu-button._x_active_group,
#sidebar a.menu-button._x_active{
	background-position: 10px 10px;

}

body .pblock.reveal-img {
	overflow: visible;
}

.resultStat{
	background-image: url(/resources/cimages/mc_55/quiz/your-use.png);
background-repeat: no-repeat;
background-size: 100% auto;
width: 250px; height: 250px;
box-sizing: border-box;
padding: 65px 40px;    margin-top: 20px;
}
.resultStat ._stat{
	display: block;
	margin: 10px auto;
	text-align: center;
	font-size: 2.6em;
	line-height: 1em;
	color: #f1f0de;
	font-weight: 900;
}
.resultStat ._desc{
	display: block;
	margin:10px auto;
	text-align:center;
	font-size:0.7em;
	line-height: normal;
	color:#f1f0de;
	font-weight: bold;
}



.resultStat.__estimates{
	background-image: url(/resources/cimages/mc_55/quiz/your-estimates.png);

}
.resultStat.__peers{
	background-image: url(/resources/cimages/mc_55/quiz/peer-use.png);

}
.resultStat.__peers ._stat,
.resultStat.__peers ._desc{
	color:#000;
}


.footer-text {
    font-size: 0.7em;
    line-height: normal;
    border-top: 1px solid #000;
    padding: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 45px;
}

.bttn-question-next{
   font-size:1.2em;
   line-height: normal;
   display:block;
   width:150px;margin: 0 auto;
   color:#000; text-align:center;
}

.bttn-question-next:before{
content:'';display:block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='50' viewBox='0 0 36.4 49.5'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='0.2 0 36.4 26.2 0 49.5 '/%3E%3C/svg%3E");
background-color:#3991ce;
background-position: center;
background-size: 48% auto;
background-repeat: no-repeat;
width:80px;height:80px;
margin: 0 auto;
margin-bottom: 20px;
}





















/* quiz */
div.quiz-progress{
	padding-left: 150px;
	position: relative;
	height: 100px;
	box-sizing: border-box;
	padding: 20px 20px 20px 130px;

}
div.quiz-progress:before{
	left: 0;
	top: 0;
	content: '';
	position: absolute;
	width: 95px;
	height: 95px;
	background-position: center;
	background-size: 100% auto;
	display: block;
	background-repeat: no-repeat;
	background-image: url(/resources/cimages/mc_55/homepage/icon-pill.png);

}
div.quiz-progress ._bar{
	background-color: #f5f5f6;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	height: 40px;
	box-sizing: border-box;
}
div.quiz-progress ._bar ._fill{
	height: 40px;
	background-color: #3991CE;
}

div.quiz-progress ._bar ._text{
	font-weight: 600;
}
div.quiz-progress ._bar:before{
	background-color: #3991ce;
	content: '';
	display: block;
	width: 10%;
}



label.quiz-multi{
}
label.quiz-multi.inp-radio{
	position: relative;
	padding-left: 70px;
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
	min-height: 25px;
/*	box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 10%); */
	margin-top: 10px;
}
label.quiz-multi.inp-radio .input{
	margin-left: 14px;
	border-radius: 100%;
	margin-top: 0;
	/* margin-top: -5px; */
	width: 40px;
	position: absolute;
	height: 40px;
/*	border: 4px solid #4fe3c1; */
	border: 4px solid #f65d2c;
	top: 50%;
	transform: translateY(-50%);
	background-image: none;
	left: 0;
}

label.quiz-multi.inp-radio.selected{
	background-color: #f65d2c;
	color: #ffffff;
	font-weight: 900;

}
label.quiz-multi.inp-radio.selected .input{
	background-color: #000000;
	border: 4px solid #fff;
}


.resultStat{
	background-image: url(/resources/cimages/mc_55/quiz/your-use.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 250px;
	height: 250px;
	box-sizing: border-box;
	padding: 65px 40px;
	margin: 0 auto;
	margin-top: 20px;
	color: #441dae;
}
.resultStat ._stat{
	display: block;
	margin: 10px auto;
	text-align: center;
	font-size: 2.6em;
	line-height: 1em;
	font-weight: 900;
}
.resultStat ._desc{
	display: block;
	margin: 10px auto;
	text-align: center;
	font-size: 0.7em;
	line-height: normal;
	font-weight: bold;
}



.resultStat.__estimates {
	background-image: url(/resources/cimages/mc_55/quiz/your-estimate.png);

}
.resultStat.__peers{
	background-image: url(/resources/cimages/mc_55/quiz/peer-use.png);
}



.t-alcohol .resultStat{
	background-image: url(/resources/cimages/mc_55/quiz/your-use.png);
}

.t-alcohol .resultStat.__estimates{
	background-image: url(/resources/cimages/mc_55/quiz/your-estimate.png);
}
.t-alcohol .resultStat.__peers{
	background-image: url(/resources/cimages/mc_55/quiz/peer-use.png);
}

.resultStat.__you{
	color: #4fe3c1;
}
.resultStat.__peers ._stat,
.resultStat.__peers ._desc{

}


.situation-block h3 {

}


.situation-block{
	overflow: visible;
	position: relative;
	background-color: #f9f9f2;	
	padding: 30px 47px 135px 47px;
}


#layout.frontend .quizGroup {
	margin: auto;
	position: relative;
	z-index: 2;
/*	background-color: #FFF; */
	overflow: visible;
}
#layout.frontend .quizGroup:after{
	content: '';
	display: block;
	height: 500px;
	position: absolute;
	top: 538px;
	right: 0;
	background-size: 125px auto;
	z-index: 0;
	margin-right: -93px;
	width: 92px;
/*	background-position: right;
	background-repeat: no-repeat;
	background-image: url(/resources/cimages/mc_youth/the-quiz/deco-weed.png); */
}

._response{
	font-weight: 900;
	font-size: 0.8em;
	line-height: normal;
	padding: 5px 30px;
}
.t-medicine div.quiz-progress:before{
	background-image: url(/resources/cimages/mc_55/homepage/icon-pill.png);

}


.t-alcohol div.quiz-progress:before{
	background-image: url(/resources/cimages/mc_55/homepage/icon-bottle.png);

}
.t-alcohol div.quiz-progress ._bar{
	background-color: #f5f5f6;
}
.t-alcohol div.quiz-progress ._bar ._fill{
	background-color: #3991ce;
}

.t-alcohol div.quiz-progress ._bar:before{
	background-color: #3991ce;
}

/*
.t-alcohol label.quiz-multi.inp-radio .input{
	border: 4px solid #f65d2c;
}

.t-alcohol label.quiz-multi.inp-radio.selected{
	background-color: #f65d2c;
	color: #ffffff;
}
.t-alcohol label.quiz-multi.inp-radio.selected .input{
	background-color: #000000;
	border: 4px solid #fff;
}
*/
.t-alcohol .resultStat.__you{
	color: #d123f6;
	background-image: url(/resources/cimages/mc_55/quiz/your-use.png);
}

.t-alcohol .resultStat.__estimates{
	background-image: url(/resources/cimages/mc_55/quiz/your-estimate.png);
}
.t-alcohol .resultStat.__peers{
	background-image: url(/resources/cimages/mc_55/quiz/peer-use.png);
}



.t-alcohol .situation-block h3{

}


.t-alcohol .situation-block{
/*	background-color: #f5f5f6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='163' height='50' viewBox='0 0 162.8 50.4'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23d123f6;stroke-width:6.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpolyline class='st0' points='131.7 2.5 157.9 25.2 131.7 47.9 '/%3E%3Cpolyline class='st0' points='88.5 2.5 114.7 25.2 88.5 47.9 '/%3E%3Cpolyline class='st0' points='45.3 2.5 71.5 25.2 45.3 47.9 '/%3E%3Cpolyline class='st0' points='2.1 2.5 28.3 25.2 2.1 47.9 '/%3E%3C/svg%3E"); */
}

.t-result .situation-block{
	background-color: #f9f9f2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='' height='' viewBox='0 0 532 635.1'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%234FE3C1;%7D .st1%7Bfill:%23D123F6;%7D .st2%7Bfill:%23F8E71D;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='503.2' cy='530.5' r='18.2'/%3E%3Ccircle class='st1' cx='275.9' cy='80.3' r='13.6'/%3E%3Ccircle class='st2' cx='348.6' cy='387.3' r='31.8'/%3E%3Ccircle class='st0' cx='512.3' cy='253.1' r='16.7'/%3E%3Ccircle class='st2' cx='375.9' cy='504.8' r='6.1'/%3E%3Ccircle class='st2' cx='116.7' cy='169.8' r='15.2'/%3E%3Ccircle class='st1' cx='115.2' cy='612.4' r='22.7'/%3E%3Ccircle class='st1' cx='53.1' cy='12.1' r='12.1'/%3E%3Ccircle class='st2' cx='521.4' cy='22.7' r='10.6'/%3E%3Ccircle class='st0' cx='31.8' cy='119.7' r='31.8'/%3E%3C/svg%3E");
	padding-right:500px;
	background-size: 510px auto;
	background-position: right 50px center;
	padding-bottom:20px;
	background-repeat: no-repeat;
}

.t-result .situation-block:after{
	display:none;
}

.t-alcohol .situation-block:after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49' height='48' viewBox='0 0 48.9 47.7'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23F5F5F6;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='1.1 0 0 47.7 48.9 15.9 '/%3E%3C/svg%3E");
}
#layout.frontend .t-alcohol.quizGroup:after{
 /*   background-image: url(/resources/cimages/mc_youth/the-quiz/deco-bottle.png);
	background-size: 45px auto;
	margin-right: -65px; */

}


/* gaming */

/*
.t-gaming div.quiz-progress:before{
	background-image: url(/resources/cimages/mc_youth/the-quiz/icon-quiz-gaming.png);

}
.t-gaming div.quiz-progress ._bar{
	background-color: #f5f5f6;
}
.t-gaming div.quiz-progress ._bar ._fill{
	background-color: #441dae
}

.t-gaming div.quiz-progress ._bar:before{
	background-color: #3991ce;
}



.t-gaming label.quiz-multi.inp-radio .input{
	border: 4px solid #f8e71d;
}

.t-gaming label.quiz-multi.inp-radio.selected{
	background-color: #f8e71d;
	color: #441dae;
}
.t-gaming label.quiz-multi.inp-radio.selected .input{
	background-color: #441dae;
	border: 4px solid #fff;
}

.t-gaming .resultStat.__you{
	color: #f8e71d;
	background-image: url(/resources/cimages/mc_youth/the-quiz/result-3-gaming.png);
}

.t-gaming .resultStat.__estimates{
	background-image: url(/resources/cimages/mc_youth/the-quiz/result-2-gaming.png);
}
.t-gaming .resultStat.__peers{
	background-image: url(/resources/cimages/mc_youth/the-quiz/result-1-gaming.png);
}


.t-gaming .bttn-question-next{
	color: #000000;
}

.t-gaming .bttn-question-next:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='50' viewBox='0 0 36.4 49.5'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='0.2 0 36.4 26.2 0 49.5 '/%3E%3C/svg%3E");
	background-color: #f65d2c;
}


.t-gaming .situation-block h3{
	background-color: #f8e71d;
	color: #441dae
}


.t-gaming .situation-block{
	background-color: #f5f5f6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='163' height='50' viewBox='0 0 162.8 50.4'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23f8e71d;stroke-width:6.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpolyline class='st0' points='131.7 2.5 157.9 25.2 131.7 47.9 '/%3E%3Cpolyline class='st0' points='88.5 2.5 114.7 25.2 88.5 47.9 '/%3E%3Cpolyline class='st0' points='45.3 2.5 71.5 25.2 45.3 47.9 '/%3E%3Cpolyline class='st0' points='2.1 2.5 28.3 25.2 2.1 47.9 '/%3E%3C/svg%3E"); 
}

.t-gaming .situation-block:after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='49' height='48' viewBox='0 0 48.9 47.7'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23F5F5F6;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='1.1 0 0 47.7 48.9 15.9 '/%3E%3C/svg%3E");
}
#layout.frontend .t-gaming.quizGroup:after{
	background-image: url(/resources/cimages/mc_youth/the-quiz/deco-gaming.png);
}

*/


#layout.frontend .result-group,
#layout.frontend .result-ok,
#layout.frontend .result-notok{
				 display:none;
}


#click-quiz{}

#click-quiz .q-click{
display: block;
    width: 150px;
    height: 150px;
    background-image: url(/resources/cimages/mc_55/quiz/your-result.png);
    background-position: center top;
/*    background-size: 100% auto; */
    background-size: 100% auto;
    background-repeat: no-repeat;
    color: #ffffff;
    box-sizing: border-box;
/*    padding: 50px 20px 40px 43px; */
    padding: 50px 20px 40px 23px;
    font-weight: bold;
    font-size: 1.8em;
    line-height: normal;
    text-align: center;
	position:absolute;
	transition:all 0.2s;
}

#click-quiz .q-click.__small {
	background-image: url(/resources/cimages/mc_55/quiz/your-result.png);
}

#click-quiz .q-click.__wrong {
	background-image: url(/resources/cimages/mc_55/quiz/your-use.png);
	color: #f65d2c;
}
#click-quiz .q-click.__correct {
	background-image: url(/resources/cimages/mc_55/quiz/quiz-result-yellow.png);
	color: #c2ea18;
}


#click-quiz .q-click.__1 {
	left: 40px;
	top: 90px;
/*	padding: 50px 20px 40px 40px;
	padding: 50px 20px 40px 53px; */
}

#click-quiz .q-click.__2 {
	left: 350px;
	top: 40px;
}

#click-quiz .q-click.__3 {
	left: 330px;
	top: 320px;
}

#click-quiz .q-click.__4 {
	left: 60px;
	top: 360px;
}



.dragTable .div_td{
	vertical-align: middle;

}
.dragTable h6{

font-size:1.2em

}


.dragTable .pin-drop{
	min-height:180px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='' height='' viewBox='0 0 154.4 154.4'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23F9F9F2;%7D .st1%7Bfill:none;stroke:%234FE3C1;stroke-width:0.7159;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='77.2' cy='77.2' r='77.2'/%3E%3Ccircle class='st0' cx='75.3' cy='77.2' r='67.6'/%3E%3Ccircle class='st1' cx='77.2' cy='77.2' r='58.5'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	width: 90px;
	margin: 0 30px;
	background-size: 100% auto;
	transition: all 0.5s;
}

.pinStat {
	display: block;
    width: 180px;
    height: 180px;
    background-image: url(/resources/cimages/mc_55/quiz/your-result.png);
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	color: #ffffff;
	box-sizing: border-box;
	margin-top: 30px;
/*	padding: 50px 20px 40px 39px; */
	padding: 60px 20px 40px 25px;
	font-weight: bold;
	font-size: 2.25em;
	line-height: normal;
	text-align: center;
	list-style-type: none;
	cursor: move;
}

.dragTable .pin-drop .pinStat{
	margin-left: -72px;
}
.dragTable .pin-drop.__active{
	background-image: none;
}


.pinStat.__s {
	background-image: url(/resources/cimages/mc_55/quiz/your-result.png);
}

.pinStat.__xs{
	background-image: url(/resources/cimages/mc_youth/the-quiz/ag-quiz-button-xs.png);
}
.pin-list-cnt{

}
.pin-list-cnt li{

}

.reason,
.reason-list{
	position: relative;
	display: block;
	height: 50px;
	box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 10%);
	margin-top: 25px;
	font-weight: 900;
	padding: 0;
	padding-left: 15px;
	list-style: none;
	box-sizing: border-box;
	background-color:#FFF;
}

.reason-drop li.reason-list,
.reason-list-cnt li{
	line-height: normal;
	padding: 10px 5px;
	cursor: move;
	padding-left:15px;
}

.reason-drop .reason-list{
	box-shadow: none;
	background-color: #441dae;
	color:#FFF;
	margin:0;
	padding: 0;
	list-style: none;
}

.reason-drop li.reason-list {
	list-style: none;
	cursor: default;
}
.reason-drop li.ui-sortable-handle {
	list-style: none;
}

.reason ._number{
	display: block;
	border-right: 1px solid #CCC;
	width:50px;height: 50px;
	box-sizing: border-box;
	float:left;
	line-height: normal;
	padding: 10px 5px;
}
.reason .reason-drop{
height:50px;
list-style: none;
box-sizing: border-box;

}
#reason-cnt .reason-drop li{


}
#answer-cnt li.__correct{

}
#answer-cnt li.__correct ._number{
	color:#c2ea18
}
#answer-cnt li.__incorrect ._number{
	color:#e1001a
}




/* progress bar */
.quiz-progress ._fill{
	animation: fillBar 1s 1 linear ;

}

@keyframes fillBar{
	from{
		width: 0;
	}
	to{
	}

}


.pt-index .quiz-progress ._fill{
	width: 0
}

.pt-quiz-2 .quiz-progress ._fill{
	width: 20%
}

.pt-quiz-3 .quiz-progress ._fill{
	width: 40%
}

.pt-quiz-4 .quiz-progress ._fill{
	width: 60%
}

.pt-quiz-5 .quiz-progress ._fill{
	width: 80%
}

.pt-quiz-6 .quiz-progress ._fill{
	width: 100%
}