.quiz img{width:45%; display:inline-block;}
.quiz .start img{animation: bounceInRight 2s forwards;}
.quiz .question img{opacity:0; animation: doorCloseLeft 2s 1s forwards;}
.quiz .screen .text{width: 100%;}
.quiz .start .text{width:50%; display:inline-block; margin-right:5%;}
.quiz .hasimage {width: 50%; display: inline-block; margin-right: 5%; vertical-align: top;}
.quiz .question .text, .feedback .text {margin-bottom: 1rem;}
.quiz .question .text{animation: appearOpacityY 2s forwards;}
.quiz ol.answers {padding-left: 0px;}
.quiz li.answer {list-style-type: none;}
.quiz .answers{animation: pushReleaseFromLeft 1s forwards;}
.quiz .answer {cursor:pointer; background: var(--pogo-greenblue); background: linear-gradient(90deg, var(--pogo-greenblue) 0%, var(--pogo-darkestblue) 100%); color: #ffffff; padding: 0.25rem 0.5rem; border-radius: 0.4rem; margin-bottom: 0.25rem;}
.quiz .answer:hover {transform: scale(1.01);}
.quiz .answer .text{width: 100%; display: inline-block; margin-right: 0px; box-shadow: unset; background-color: unset; padding: 1rem; animation: unset; margin-bottom:0px;}
.quiz .answer .text p {margin: 0px;} 
.text.wrong p:first-of-type {animation: electricity 1s forwards;}
.text.correct p:first-of-type {animation: heartbeatFast 2s forwards;}

@media screen and (max-width: 667px){

	.quiz img{width:100%; margin: 0.5rem 0px;}
	.quiz .start .text{width:100%; margin-right:0px;}
	.quiz .hasimage {width: 100%; margin-right: 0px;}
	.quiz .question img{opacity:0; animation: doorCloseLeft 1s  forwards;}
}

.progressbar {width: 50%; margin-left: auto; margin-right: auto; margin-top:1rem; margin-bottom:1rem; padding-left:0px;}
.progress-item{display: inline-block; margin-right: 0px; width: 2rem; height: 2rem; text-align: center; padding-top: 0.5rem; border: solid 1px #000000; line-height: 100%; border-radius: 1rem; } 
.progress-line{border-bottom: solid 1px #000000; display: inline-block; line-height: 100%; height: 1rem; vertical-align: top;}
.progress-item-correct{color:#ffffff; background-color:green;}
.progress-item-wrong{color:#ffffff; background-color:red;}
.progress {font-size: 0.7rem; text-align: right;}
.quiz .feedback .introduction {display: none;}

.text.wrong p:first-of-type {background-color: red; padding: 1rem; color: #ffffff;}
.text.correct p:first-of-type {background-color: green; padding: 1rem; color: #ffffff;}
@media screen and (max-width: 667px){
.progressbar {width: 100%;}
}