.test{}
.test .tester{position:relative;counter-reset:testnum;}
.test .tester .questions{position:relative;overflow:hidden;}
.test .tester .questions .test_question{position:relative;min-height:190px;counter-increment:testnum;overflow:hidden;}
.test .tester .questions .test_question.hide{position:absolute;right:200%;opacity:0;}
.test .tester .questions .test_question .question{margin-bottom:1em;font-weight:bold;}
.test .tester .questions .test_question .question::before{display:block;margin-bottom:0.25em;font-size:0.7em;font-weight:normal;content:"Вопрос №" counter(testnum);}
.test .tester .questions .test_question .question img{display:block}

.test .tester .questions .test_question .answers{margin:0;}
.test .tester .questions .test_question .answers .answer {padding:0.5em 0.5em 0.5em 2em;display:block;color:#bbb;}
.test .tester .questions .test_question .answers .answer::before{position:relative;display:block;height:0;top:1em;visibility:hidden;overflow:visible;opacity:1;content:"";font-size:0.5em;z-index:5;transition:all 0.7s linear;pointer-events:none}

.test .tester .questions .test_question .answers .answer.active{color:#05c;}
.test .tester .questions .test_question .answers .answer.active:hover{color:#d64;text-shadow:0 0 1px #fb0;cursor:pointer;}

.test .tester .questions .test_question .answers .answer.on::before{visibility:visible;opacity:0;top:-2em;left:-1em;font-size:1.15em;}
.test .tester .questions .test_question .answers .answer.on.wrong{color:#e33;transition:all 1s}
.test .tester .questions .test_question .answers .answer.on.wrong::before{color:#f00;content:"Ой!";}
.test .tester .questions .test_question .answers .answer.on.right{color:#093;text-shadow:0 0 1px #ff0;}
.test .tester .questions .test_question .answers .answer.on.right::before{color:#0f0;content:"Верно!";}

.test .tester .questions .test_question .description{display:none}

.test .tester .result{min-height:190px;text-align:center;box-sizing:border-box;}
.test .tester .result .tablo{position:relative;}
.test .tester .result .tablo::before{content:" ";position:absolute;top:0;right:0;width:0;height:100%;background-color:#fff;transition:width 1s;z-index:2;}
.test .tester .result .tablo.hide::before{width:100%;}
.test .tester .result .tablo .percent{display:inline-block;vertical-align:middle;width:33.33%;font-size:4em;line-height:2.5;}
.test .tester .result .tablo .time{display:inline-block;vertical-align:middle;width:33.33%;font-size:3em;}
.test .tester .result .tablo .timeline{display:inline-block;vertical-align:middle;width:33.33%;line-height:0}
.test .tester .result .tablo .timeline .bars{position:relative;display:inline-block;width:150px;border-bottom:solid 1px #aaa;padding:0 3px;}
.test .tester .result .tablo .timeline .bars .bar{display:inline-block;width:6.666666667%;height:3em;border:solid 1px #fff;border-bottom:none;background-color:#ccc;box-sizing:border-box;}
.test .tester .result .tablo .timeline .bars .bar .value{width:100%;max-height:97px;background-color:#fff;}
.test .tester .result .tablo .timeline .bars .bar .hint{position:absolute;display:none;top:-0.5em;left:0;width:100%;font-size:0.8em;text-align:center;white-space:nowrap;}
.test .tester .result .tablo .timeline .bars .bar:hover{background-color:#333}
.test .tester .result .tablo .timeline .bars .bar:hover .hint{display:block;}
.test .tester .result .alt{margin-top:1em}
.test .tester .result .alt .delimiter{margin:0 0.5em;font-size:0.9em;color:#ccc;}

.test .tester .controls{}
.test .tester .controls.hide{visibility:hidden;}
.test .tester .controls .control{font-size:1.25em;}
.test .tester .controls .control.next{margin-right:2em;vertical-align:middle;}
.test .tester .controls .viewer_show{cursor:pointer;}
.test .tester .controls .viewer_show.hide{visibility:hidden;}

.test .tester .field{position:relative;}
.test .tester .field .mushrooms{position:relative;top:22px;overflow:hidden;}
.test .tester .field .mushrooms.secondary{position:absolute;left:0;top:22px;width:100%;}
.test .tester .field .mushrooms .mushroom{position:relative;top:58px;display:inline-block;width:6.666666667%;height:58px;background:center bottom no-repeat;background-size:contain;transition:all 1s linear}
.test .tester .field .mushrooms .mushroom.show{top:0;}
.test .tester .field .mushrooms.primary .mushroom.right{background-image:url(mush00.png);}
.test .tester .field .mushrooms.primary .mushroom.wrong{background-image:url(mush10.png);}
.test .tester .field .mushrooms.secondary .mushroom.right{background-image:url(mush01.png);}
.test .tester .field .mushrooms.secondary .mushroom.wrong{background-image:url(mush11.png);}
.test .tester .field .grass{position:relative;height:22px;background:url(grass.png) 0 bottom repeat-x;background-size:contain;}
.test .tester .field .labels{background-color:#764;}
.test .tester .field .labels .question_label{display:inline-block;width:6.666666667%;padding:0.2em 0 0.25em 0;text-align:center;font-size:0.75em;color:#dca;line-height:1.5}
.test .tester .field .labels .question_label:hover{background-color:rgba(0,0,0,0.2);cursor:pointer;}
.test .tester .field .labels .question_label.on{color:#efa;background-color:#c82;box-shadow:0 0.5em 1.5em rgba(0,0,0,0.7) inset;}

.test .tester .viewer{position:fixed;width:100%;height:100%;top:0;left:0;z-index:12;background-color:#fff;overflow:auto}
.test .tester .viewer.hide{display:none;}
.test .tester .viewer .cross{position:fixed;right:1%;top:1%;font-size:2em;font-weight:200;line-height:1;color:#ccc;cursor:pointer;user-select:none;}
.test .tester .viewer .cross:hover{color:#000;}
.test .tester .viewer .body_limit{margin-top:3%;padding:3%;max-width:900px;}
.test .tester .viewer .question{font-size:2em;}
.test .tester .viewer .answer{margin:1em 0 2em;font-size:1.5em;font-style:italic;}
.test .tester .viewer .description{margin:1em 0;}
.test .tester .viewer .question > img,
.test .tester .viewer .description > img{display:block;margin:1em 0;}
.test .tester .viewer .controls{margin:2em 0;}


@media screen and (max-width:680px){
	.test .tester .questions .test_question .question{text-align:left;}
	.test .tester .questions .test_question .answers{min-height:4em}
	.test .tester .questions .test_question .answers .answer {width:auto;padding:0.5em;display:block;text-align:left;}
	.test .tester .questions .test_question .answers .answer.on::before{left:0.5em;}

	.test .tester .result .percent,	.test .tester .result .time,
	.test .tester .result .timeline{width:100%;}

	.test .tester .result .tablo .percent{width:30%;font-size:3em;}
	.test .tester .result .tablo .time{width:25%;font-size:1.5em;}
	.test .tester .result .tablo .timeline{width:45%;}

	.test .tester .result .alt a{display:inline-block;margin-bottom:0.5em}

	.test .tester .viewer .description > img{max-width:96%}

	.test .tester .controls{position:relative;top:1em;}
	.test .tester .controls .control.next{margin-right:3%;font-size:1.15em;}
	.test .tester .controls .viewer_show{display:inline-block;vertical-align:middle;width:5em;border:none;font-size:13px;text-align:center;}
}