/* quizz */

.quizz-page .page-head-block .img-wrap {
    width: 100%;
    margin-bottom: 0;
}

.quizz-page .page-head-block .img-wrap {
    max-height: calc(100vh - 168px);
    overflow: hidden;
}

/*.quizz-page .article-flex-wrap {
    -ms-flex-direction: row;
    flex-direction: row;
}

.quizz-page .article-column {
    width: 100%;
}

.quizz-page .article-wrap {
    margin: 0 auto 0 0;
}

.quizz-page .page-mobile-wrap {
    width: 1290px;
}

.quizz-page .main-page-wrap {
    max-width: 1115px;
}

.quizz-page .main-page-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.quizz-page .statistic-top-block {
    position: static;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: 1px solid #ebebeb;
    padding: 0 0 30px;
}

.quizz-page .statistic-top-block {
    border-top: 1px solid #ebebeb;
    padding: 10px 0;
}

.quizz-page .article-flex-wrap, .quizz-page .sidebar {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
}

.quizz-page .article-flex-wrap {
    -ms-flex-direction: row;
    flex-direction: row;
    width: calc(100% - 360px);
    -ms-flex-order: 1;
}

.quizz-page .sidebar {
    display: block;
    width: 330px;
    margin-left: 30px;
    -ms-flex-direction: row;
    flex-direction: row;
}

.quizz-page .net-wrap {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}

.quizz-page .login-comment-wrap {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}

.quizz-page .page-head-block .text-block {
    bottom: 65px;
}

.quizz-page .page-head-block .head {
    font-size: 60px;
}

.quizz-page .sidebar-autor-block {
    display: block;
    margin-bottom: 20px;
}

.quizz-page .article {
    margin-top: 20px;
}

.quizz-page .article p {
    padding: 3px 10px;
}

.quizz-page .article-flex-wrap, .quizz-page .sidebar {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
}*/

.quizz-page .page-mobile-wrap {margin-bottom: 90px;}

.quizz-header-wrap {}

.quizz-header-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.quizz-header {
  max-width: 860px;
  background: #eff2f4;
  margin: 0 auto;
  padding: 35px;
  text-align: center;
}
.quizz-heading {font-family: MetaPro, sans-serif; font-weight: 700; color: #549fc2; text-transform: uppercase; text-align: center;}
.quizz-heading a {color: #549fc2;}
.quizz-heading a:hover {text-decoration: none;}
.quizz-title {font-family: MetaPro, sans-serif; font-weight: 800; color: #222;}
.quizz-description {color: #222;}
.quizz-heading:before {
  content: "";
    background: #549fc2;
    width: 20%;
    height: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
  margin-right: 10px;
}
.quizz-heading:after {
  content: "";
    background: #549fc2;
    width: 20%;
    height: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
  margin-left: 10px;
}

.quizz-page .page-mobile-wrap {
    width: 860px;
}

.quizz-page .article-flex-wrap {
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    -ms-flex-order: 1;
}

.quizz-page .main-page-wrap {
    margin: 0 auto 0;
    padding-top: 0;
}

.quizz-body-wrap {
  max-width: 860px;
  background: #eff2f4;
  margin: 0 auto;
  padding: 0;
}

.quizz-body-wrap .statistic-top-block {border-top: 1px solid #dce1e4; border-bottom: 1px solid #dce1e4; padding: 20px 0;}

.quizz-body {background: #eff2f4; padding: 10px 33px 35px 32px;}

.quizz-button {
  background: #549fc2;
    color: #fff;
  font-family: MetaPro, sans-serif; font-weight: 600;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    padding: 14px 10%;
    box-sizing: border-box;
}

.quizz-button:disabled {opacity: 0.6;}

.quizz-button-empty {
    color: #549fc2;
  border: #549fc2 4px solid;
  font-family: MetaPro, sans-serif; font-weight: 600;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    padding: 14px 10%;
    box-sizing: border-box;
}

.quizz-button:hover {
  background: #4390b5;
}

.quizz-button:disabled:hover {background: #549fc2;}

.quizz-button-empty:hover {
    color: #4390b5;
  border: #4390b5 4px solid;
}

.quizz-button-wrap {padding: 25px 0; text-align: center;}

.quizz-page .net-wrap, .standard-quizz-page .net-wrap {margin-top: 0; border: 1px solid #eff2f4; background: #fff;}

.quizz-page .net-quizz-wrap, .standard-quizz-page .net-quizz-wrap {margin-top: 0; border: none; background: none; padding: 20px 0 0 0;}

.quizz-page .quizz-box .net-wrap, .standard-quizz-page .quizz-box .net-wrap {margin-top: 0; border: none; background: none;}

.quizz-page .article-flex-wrap {padding: 0;}

.brand-info {background: #fff; padding: 9px; 20px; margin: 0 auto; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center;-ms-flex-pack: center;  justify-content: center; align-items: center; border: #eff2f4 1px solid; margin-bottom: 25px; /*max-width: 1620px;*/}
.quizz-header-wrap .brand-info { max-width: 860px; margin-bottom: 0;}

.brand-info .brand-info-logo {margin-right: 10px;}
.brand-info .brand-info-logo img {max-height: 40px; height: auto;}
.brand-info .brand-info-content {font-size: 16px; text-align: left;}
.brand-info .brand-info-title {font-family: MetaPro, sans-serif; font-weight: 800;  font-size: 18px; text-align: left; margin-right: 7px; margin-bottom: -3px; line-height: 1.2em; display: inline;}

.brand-top-banner {margin-bottom: 25px; height: 180px; max-height: 180px; overflow: hidden;
  background-size: cover !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;}
.brand-info ~ .brand-top-banner {margin-top: -25px;}
.brand-top-banner a {display: block; width: 100%; height: 100%;}

.quizz-box-title a {color: #549fc2;}
.quizz-box-title a:hover {text-decoration: none;}

@media only screen and (max-width: 1200px) {
  .brand-top-banner {height: 120px;}
}

@media only screen and (max-width: 420px) {
  .brand-top-banner {height: 90px;}
}

.quizz-box {padding: 10px;}
.quizz-box-title {
    font-family: MetaPro, sans-serif;
    font-weight: 800;
    color: #222;
  padding-top: 6px;
  font-size: 26px;
}

.quizz-box .quizz-button {padding: 14px 5%;}

.quizz-box-answers {padding: 20px 0;}

.quizz-box-image {margin: 20px 0 -5px 0; position: relative; max-width: 775px;}

.quizz-box-image img {width: 100%; height: auto; vertical-align: bottom;}

input[type="radio"] {
  display: none;
}

.quizz-box-answers input[disabled] + label {color: #888; cursor: default;}
.quizz-box-answers input[disabled] + label:before {border-color: #aaa;}
.quizz-box-answers input[disabled]:hover + label:before {border-color: #aaa; border: #aaa 1px solid;}

/*.quizz-box-answers .active-label, .quizz-box-answers label:focus, .quizz-box-answers label:hover, .quizz-box-answers label:active,*/ .quizz-box-answers input:checked + label {
 /* color: #549fc2;*/ /* border: #549fc2 4px solid;*/ z-index: 100; /*padding: 12px 10px 14px 52px;*/ background: #549fc2; color: #fff;
}

.quizz-box-answers input:checked + label:before {left: 15px; top: 16px;}

.quizz-box-form-checked .quizz-box-answers input:checked + label:before {left: 6px; top: 7px;}

.quizz-box-answers label:hover:before {}

.quizz-box-answers label {
  font-size: 1rem;
  line-height: 1.4em;
  cursor: pointer;
  display: block;
  padding: 15px 13px 17px 55px;
  position: relative;
  border: #dce1e4 1px solid;
  background: white;
  overflow: hidden;
  margin-bottom: 0;
  margin-top: -1px;
  font-size: 18px;
  font-weight: 400;
  box-sizing: border-box;

}

.quizz-box-answers label:before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1px solid #549fc2;
  /*transition: all 0.2s ease 0.2s;*/
}

.quizz-box-answers input:hover + label:before {
 /*background: white;*/
 border-width: 4px;

 width: 23px; height: 23px;
}

.quizz-box-answers input:checked + label:before {
  /*background: #fff;*/ border: #fff 4px solid;
}

.quizz-box-answers input:checked[disabled]:hover + label:before {
    border-color: #fff;
    border: #fff 4px solid;
}

.test_box__answers input:disabled + label {
  background: #eeecf3;
  color: rgba(0, 0, 0, 0.5);
  cursor: not-allowed;
}
/*.quizz-box-answers input:disabled + label:hover {
  border-color: rgba(0, 0, 0, 0.1);
}
.quizz-box-answers input:disabled + label:before {
  border-color: white;
  background: white;
}*/

.quizz-box-form-checked .quizz-box-answers label {/*color: #a8a2be;*/ cursor: auto;}
.quizz-box-form-checked .quizz-box-answers label:before {display: none;}


.quizz-box-answers label.correct, .quizz-box-answers input[disabled] + label.correct:not(.active) {
color: #549fc2;
}

.quizz-box-answers label.wrong {
color: #ed6c7e;
}

.quizz-box-answers label.correct.active {
  /*border: #549fc2 4px solid;*/
  z-index: 100;
}

.quizz-box-answers label.wrong.active {
  /*border: #ed6c7e 4px solid;*/
  background: #ed6c7e;
  z-index: 100;
}

.quizz-box-answers label.correct:before {
display: block;
width: 40px;
height: 40px;
font-size: 14px;
line-height: 1.6em;
text-align: center;
position: absolute;
background: url(/img/univer/ukrainian-dialectisms/icon-correct.svg) no-repeat;
border-radius: 0;
background-size: cover;
color: #fff;
border: none !important;
left: 6px;
top: 7px;
}

.quizz-box-answers label.correct.active:before {
  background: url(/img/univer/ukrainian-dialectisms/icon-correct-w.svg) no-repeat;
      background-size: cover;
}


.quizz-box-answers label.wrong:before {
 display: block;
 width: 40px;
 height: 40px;
 font-size: 14px;
 line-height: 1.6em;
 text-align: center;
 position: absolute;
 background: url(/img/univer/ukrainian-dialectisms/icon-wrong-w.svg) no-repeat;
 border-radius: 0;
 background-size: cover;;
 color: #fff;
 border: none !important;
left: 12px;
top: 15px;
}

.quizz-box-answers input:hover + label.correct:before {
 border-width: 1px;
 width: 21px; height: 21px;
}

.quizz-box-answers label.incorrect {
color: #549fc2;
}

.quizz-box-answers label.incorrect:before {
  display: block;
  font-family: 'mind' !important;
  content: "\e604";
  font-size: 14px;
  line-height: 1.6em;
  text-align: center;
  position: absolute;
  background: #549fc2;
  color: #fff;
  border: none;
}

.quizz-box-answers input:hover + label.correct:before, .quizz-box-answers input:hover + label.wrong:before {width: 40px; height: 40px;}

.quizz-box-description {
display: block;
font-size: 14px; line-height: 1.3em; padding: 8px 0 3px 0; font-weight: 400;
color: #fff;
}
.quizz-box-description a {text-decoration: underline; color: #fff;}



.quizz-box-image-about {color: #9b9b9b; position: absolute; bottom: 0;  padding: 5px 20px;}
@media only screen and (min-width: 1200px) {
.page-head-block .quizz-box-image-about {color: #9b9b9b; position: absolute; bottom: 10px; left: 5px; bottom: 0; padding: 5px 20px; margin-top: -30px; /*transform: rotate(270deg); transform-origin: right bottom 0;*/}
}
@media only screen and (max-width: 860px) {
.page-head-block .quizz-box-image-about {color: #9b9b9b; position: absolute; bottom: 10px; left: 0; bottom: auto; padding: 5px 20px; margin-top: -23px; /*transform: rotate(270deg); transform-origin: right bottom 0;*/}
}
.page-head-block .quizz-box-image-about .quizz-box-image-source {}
.quizz-box-image-source {font-size: 10px; color: #eee;}
.page-head-block .quizz-box-image-source {font-size: 10px; color: #eee;}

.quizz-box-result-image {margin: 15px 0 -10px 0; position: relative;}
.quizz-box-result-image img {width: 100%; height: auto; vertical-align: bottom;}

.quizz-box-result  {overflow: hidden; margin-bottom: 20px;}

.quizz-box-result .quizz-box-result-title {font-family: MetaPro, sans-serif; font-size: 42px; padding: 0; margin-bottom: -8px; color: #111; font-weight: 800;}

.quizz-box-result .quizz-box-result-number {font-family: MetaPro, sans-serif; font-size: 62px; line-height: 1.2em; padding: 0; color: #111; font-weight: 400;}

.quizz-box-result-image .quizz-box-result-title {font-family: MetaPro, sans-serif; font-size: 42px; padding: 0; margin-bottom: -8px; color: #fff; font-weight: 800;}

.quizz-box-result-image .quizz-box-result-number {font-family: MetaPro, sans-serif; font-size: 62px; line-height: 1.2em; padding: 0; color: #fff; font-weight: 400;}


.quizz-box-result-image .quizz-box-result-content {overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: rgba(55, 136, 174, 0.75);
  /*background-color: rgba(0, 0, 0, 0.6);*/
/*background: -moz-linear-gradient(top, rgba(34,34,34,0) 0%, rgba(34,34,34,1) 100%);
background: -webkit-linear-gradient(top, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
background: linear-gradient(to bottom, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#222222',GradientType=0 ); */
  padding: 25px 20px 25px 20px;
}

.quizz-box-result  .quizz-box-result-content {padding: 10px 20px 10px 20px; text-align: center;}

.quizz-box-result-image .quizz-box-result-content {
    position: absolute;
    padding: 20px 20px 35px 20px;
    text-align: center;
}

.quizz-box article a:link, .quizz-box .article a:link {
    color: #23527c; text-decoration: underline;
}

.quizz-stat {float: right; color: #9a9a9a; font-size: 15px; line-height: 1.1em;  font-weight: 400; margin-left: 15px; background: url(/img/univer/ukrainian-dialectisms/icon-stat.svg) no-repeat; min-width: 56px; text-align: right; margin-top: 5px;}





.quizz-box-result-wrap {border: #549fc2 1px solid; background: #fff; padding: 20px; margin: 50px 10px 10px 10px;}

.quizz-box-result-wrap .quizz-heading:before, .quizz-box-result-wrap .quizz-heading:after {background: none; display: none;}

.quizz-box-result-wrap .quizz-button-empty {border-width: 4px;}

@media only screen and (min-width: 568px) {
.interview-page .statistic-top-block .look-block {margin-left: 0;}
}

@media only screen and (min-width: 1200px) {
.quizz-title {font-size: 52px;}
.quizz-description {font-size: 34px;}
.quizz-heading {font-size: 27px;}
.brand-top-banner {
    margin-bottom: -45px;

}
}

@media only screen and (min-width: 1024px) {
.quizz-title {font-size: 46px;}
.quizz-description {font-size: 30px;}
.quizz-heading {font-size: 24px;}
}

@media only screen and (max-width: 860px) {
.quizz-header-wrap {position: static;}
.quizz-header {
    margin: 0 auto;
    padding: 25px;
}
.quizz-body {
    padding: 10px 25px 25px 25px;
}
.quizz-heading {font-size: 20px;}
.quizz-description {font-size: 22px;}
.quizz-title {font-size: 40px;}
.quizz-box-result .quizz-box-result-title {font-size: 40px;}
.quizz-body-wrap .statistic-top-block {
    padding: 15px 0;
}
.quizz-stat {display: none;}
.quizz-box-result .quizz-box-result-number {font-size: 42px;}
.quizz-box-result-image .quizz-box-result-content {padding: 15px 15px 25px 15px;}
}

@media only screen and (max-width: 568px) {
.quizz-body {padding: 10px 10px 25px 10px;}
h2.quizz-box-title {font-size: 24px;}
.quizz-box-answers label {
    line-height: 1.3em;
    padding: 16px 16px 18px 50px;
    font-size: 14px;
}
.quizz-box-answers input:checked + label {/*border: #549fc2 4px solid;*/ z-index: 100; padding: 13px 13px 15px 47px;}
  .quizz-box-answers input:checked + label:before {left: 14px; top: 14px;}
.quizz-box-answers label:before {
    left: 1.6rem;
    top: 1.6rem;
    width: 18px;
    height: 18px;
}
  .quizz-box-answers input:hover + label:before {
    width: 18px;
    height: 18px;
}
  .quizz-box-answers input:checked + label:before {
   /*background: #fff; */
}

.quizz-button, .quizz-button-empty {
    font-size: 18px;
    padding: 12px 10%;
}
.quizz-button-wrap {
    padding: 10px 0;
}
.quizz-box-result-image .quizz-box-result-content {
    position: static;
    padding: 20px 20px 30px 20px;
    text-align: center;
  background-color: rgba(55, 136, 174, 1);
}
  .quizz-box-result .quizz-box-result-title {font-size: 30px;}

  .quizz-box-description {font-size: 13px;}

  .quizz-box-answers label.correct:before, .quizz-box-answers label.wrong:before {left: 6px; top: 7px;}

  .quizz-box {padding: 10px 0;}

  .quizz-box-result-wrap {margin: 30px 0;}

  .quizz-box-result-wrap .article {padding: 0 10px;}

  .quizz-box-answers label.correct:before, .quizz-box-answers label.wrong:before {width: 34px !important; height: 34px !important;}
}

@media only screen and (max-width: 375px) {
.quizz-title {font-size: 30px;}
.quizz-box-result .quizz-box-result-title {font-size: 24px;}
.quizz-heading {font-size: 20px;}
.quizz-description {font-size: 22px;}
.brand-info .brand-info-content {font-size: 14px;}
}

@media screen and (max-width: 860px) {
.quizz-page .page-head-block .img-wrap {max-height: 100%;}
}