.wraper {
  color: #333;
  margin: 0 15px;
  padding: 0 0 36px;
  font-family: Verdana, sans-serif;
}

.game-logo {
  position: absolute;
  width: 70px;
  top: 0;
  left: 1px;
  z-index: 3;
}

.game-logo__blood {
  position: absolute;
  left: 24px;
  top: -256px;
}

.game-logo__owl {
  position: absolute;
  top: 4px;
}

.content {
  position: relative;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border-radius: 5px;
}

.content__mk-logo {
  position: absolute;
  top: 21px;
  right: 0;
  z-index: 3;
  padding: 2px 0 2px 2px;
  background-color: #fff;
}

.game-logo__owl,
.game-logo__blood,
.svg-game-logo__owl_wing {
  transition: all 0.3s;
}

.content__step {
  min-height: 70vh;
  padding: 14px 17px;
}

.content__game-title {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 0 14px 0;
  color: #333333;
  font-family: "Tkachenko 4th February", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 20px;
  max-width: 140px;
  text-align: center;
}

.content__photo-wraper,
.content__video-wraper {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 75%;
  background-color: #eee;
  margin-bottom: 20px;
}

.content__photo-wraper img,
.content__video-wraper video {
  width: 100%;
  height: auto;
  transition: transform 0.6s, opacity 0.1s;
  position: absolute;
  opacity: 1;
  /*transition: opacity 0.1s;*/
}

img.content__photo-loading {
  opacity: 0;
}

.content__photo-legend,
.content__video-legend {
  margin-bottom: 23px;
  text-align: center;
  color: #888888;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.question-counter,
.content__question-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.question-counter {
  margin: 8px 0 8px;
}

.question-counter__title {
  padding-right: 5px;
  font-family: Verdana, sans-serif !important;
}

.content__main-text {
  margin: 0 auto 10px auto;
  padding: 12px;
  background-color: #eeeeee;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  border-radius: 25px;
}

.content__main-text p {
  padding: 0;
  margin: 0 0 8px;
}

.content__main-text a {
  color: #4a63f0;
}

.content__question-title {
  padding: 0;
  margin: 0 0 12px;
  background-color: #fff;
  font-family: Verdana, sans-serif !important;
}

.content__question-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 30px;
  background-color: #fff;
}

.content__question-list li {
  border: 3px solid #eeeeee;
  margin-bottom: -3px;
}

.content__question-list li:first-of-type {
  border-radius: 3px 3px 0 0;
}

.content__question-list li:last-of-type {
  border-radius: 0 0 3px 3px;
}

.content__question-item {
  width: 100%;
  background: none;
  border: none;
  padding: 13px 17px 15px;
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.content__question-item:focus,
.content__question-item:hover {
  background-color: #eeeeee;
  outline: none;
}

.content__selected-answer {
  position: relative;
  width: 75%;
  margin: 20px 8% 20px auto;
}

.content__step_wrong .content__selected-answer:before,
.content__step_right .content__selected-answer:before {
  display: block;
  color: #333333;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
  padding: 7px 0 5px 30px;
  margin-bottom: 6px;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 32px 31px, 0px 0px;
}

.content__step_wrong .content__selected-answer:before {
  content: 'Неверно!';
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cGF0aCBpZD0iYSIgZD0iTTMwNCA1MjdsMTIgMjJoLTI0eiIvPjxjbGlwUGF0aCBpZD0iYiI+PHVzZSBmaWxsPSIjZmZmIiB4bGluazpocmVmPSIjYSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDMxVjBoMzJ2MzF6Ii8+PHBhdGggZmlsbD0iI2Q3MWYyNyIgZD0iTTE1IDE4LjZ2LThoMnY4ek0xNSAyMS42di0yaDJ2MnoiLz48dXNlIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMCIgc3Ryb2tlPSIjZDcxZjI3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSI1MCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGlwLXBhdGg9InVybCgmcXVvdDsjYiZxdW90OykiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yODggLTUyNCkiIHhsaW5rOmhyZWY9IiNhIi8+PC9zdmc+'),
  url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zMCAzOFYyNEgwVjBoMTIydjI0SDk1djE0eiIvPjwvc3ZnPg==');

}

.content__step_right .content__selected-answer:before {
  content: 'Правильный выбор!';
  padding-left: 36px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48cGF0aCBpZD0iYSIgZD0iTTMwMiA1MzFhMTIgMTIgMCAxIDEgMjQgMCAxMiAxMiAwIDAgMS0yNCAweiIvPjxjbGlwUGF0aCBpZD0iYiI+PHVzZSBmaWxsPSIjZmZmIiB4bGluazpocmVmPSIjYSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDMxVjBoMzJ2MzF6Ii8+PHBhdGggZmlsbD0iIzMxZDcxZiIgZD0iTTIyIDkuNmwxLjUgMS40LTguNSA4LjUtNS01IDEuNS0xLjMgMy41IDMuNSA3LTcuMXoiLz48dXNlIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMCIgc3Ryb2tlPSIjMzFkNzFmIiBzdHJva2UtbWl0ZXJsaW1pdD0iNTAiIHN0cm9rZS13aWR0aD0iMiIgY2xpcC1wYXRoPSJ1cmwoJnF1b3Q7I2ImcXVvdDspIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjk4IC01MTYpIiB4bGluazpocmVmPSIjYSIvPjwvc3ZnPg=='),
  url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMiAzOFYyNEgwVjBoMTA2djI0SDg2djE0eiIvPjwvc3ZnPg==');
}

.content__selected-answer span {
  display: block;
  padding: 16px 20px;
  border-radius: 0 3px 3px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.content__step_wrong .content__selected-answer span {
  box-shadow: inset 4px 0 0 0 #d71f27,inset 0 0px 0 3px #eee;
}

.content__step_right .content__selected-answer span {
  box-shadow: inset 4px 0 0 0 #31d71f,inset 0 0px 0 3px #eee;
}

.content__progress-button {
  width: 100%;
  padding: 12px;
  margin-bottom: 21px;
  background: #d71f27;
  border: 2px solid #d71f27;
  border-radius: 3px;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
}

.content__step_wrong .content__progress-button {
  background: #fff;
  color: #d71f27;
}

.content__step_right .content__progress-button {
  background: #fff;
  border: 2px solid #31d71f;
  color: #31d71f;
}

.content__step_wrong .content__progress-button:before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 19px;
  padding-right: 9px;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSI5Ij48cGF0aCBmaWxsPSIjZDcxZjI3IiBkPSJNMCA1TDQuMi44bDEuNSAxLjRMMy44IDRoMjEuNHYySDMuOGwxLjkgMS44LTEuNSAxLjR6Ii8+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: center;
}

.content__step_right .content__progress-button:after {
  content: '';
  display: inline-block;
  width: 26px;
  height: 19px;
  padding-left: 9px;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSI5Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjYgNUwyMS44LjhsLTEuNSAxLjRMMjIuMiA0SC44djJoMjEuNGwtMS45IDEuOCAxLjUgMS40eiIvPjwvc3ZnPg==');
  background-repeat: no-repeat;
  background-position: center;
}

.content__progress-button:focus,
.content__progress-button:hover {
  background-color: #ff000b;
  border: 2px solid #ff000b;
  color: #fff;
  outline: none;
}

.content__step_right .content__progress-button:focus,
.content__step_right .content__progress-button:hover {
  background-color: #31d71f;
  border: 2px solid #31d71f;
  color: #fff;
  outline: none;
}

.content__step_wrong .content__progress-button:focus:before,
.content__step_wrong .content__progress-button:hover:before {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSI5Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCA1TDQuMi44bDEuNSAxLjRMMy44IDRoMjEuNHYySDMuOGwxLjkgMS44LTEuNSAxLjR6Ii8+PC9zdmc+');
}

/*first step*/
.first__warning {
  display: none;
  width: 160px;
  top: 146px;
  left: calc(50% - 65px);
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}
.first__warning span {
  display: inline-block;
  padding: 0 2px;
  background-color: #fff;
  color: #333;
}
.first__warning span:last-child,
.first__warning span:first-child {
  padding: 2px;
}

.content__game-subtitle {
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-transform: uppercase;
}

.last__share-title {
  text-align: center;
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}
.last__share,
.share {
  display: none;
  margin: 0;
  padding: 0;
}

.last__share {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #eee;
  border-radius: 3px;
}

.last__share li,
.share li {
  display: inline-block;
  margin: 8px 2px;
}

.last__share-button,
.share__button {
  display: block;
  width: 32px;
  height: 32px;
  background-color: #fff;
  border-radius: 3px;
}

.share__button:focus {
  outline: none;
}

.share__button use {
  fill: #333;
}

.last__share-button use,
.share__button:focus use,
.share__button:hover use {
  fill: #fff;
}

.last__share-button_vk,
.share__button_vk:focus,
.share__button_vk:hover {
  background-color: #455c81;
}

.last__share-button_fb,
.share__button_fb:focus,
.share__button_fb:hover {
  background-color: #414f91;
}

.last__share-button_ok,
.share__button_ok:focus,
.share__button_ok:hover {
  background-color: #f0931d;
}

.last__share-button_tw,
.share__button_tw:focus,
.share__button_tw:hover {
  background-color: #4aa2d7;
}

.last__share-button_wh,
.share__button_wh:focus,
.share__button_wh:hover {
  background-color: #39aa44;
}

.last__share-button_tm,
.share__button_tm:focus,
.share__button_tm:hover {
  background-color: #27aed6;
}

.last__share-button_vb,
.share__button_vb:focus,
.share__button_vb:hover {
  background-color: #7d519e;
}

.content__list-element p {
  padding: 0 17px 4px 34px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMyI+ICA8cGF0aCBmaWxsPSIjZDcxZjI3IiBkPSJNMi42IDEzYS43LjcgMCAwIDEtLjUtLjEgNy4zIDcuMyAwIDAgMSAwLTEwLjMgNiA2IDAgMCAxIDguNSAwIDUgNSAwIDAgMSAwIDcgNCA0IDAgMCAxLTMgMS4xIDQgNCAwIDAgMS0yLjgtMS4yIDMuNCAzLjQgMCAwIDEtMS0yLjRjMC0uOS40LTEuNyAxLTIuNGEyLjggMi44IDAgMCAxIDItLjhjLjggMCAxLjUuMyAyIC44YTIuNCAyLjQgMCAwIDEgMCAzLjQgMiAyIDAgMCAxLTEuNC43IDIgMiAwIDAgMS0xLjUtLjcgMS44IDEuOCAwIDAgMS0uNS0xLjMuNy43IDAgMSAxIDEuNCAwIC40LjQgMCAwIDAgMCAuNGwuNi4yYS43LjcgMCAwIDAgLjUtLjJjLjItLjIuMy0uNS4zLS44YTEgMSAwIDAgMC0uMy0uNyAxLjUgMS41IDAgMCAwLTEtLjRjLS41IDAtLjguMS0xLjEuNGEyIDIgMCAwIDAgMCAyLjggMi43IDIuNyAwIDAgMCAzLjggMCAzLjUgMy41IDAgMCAwIDAtNSA0LjYgNC42IDAgMCAwLTYuNSAwIDYgNiAwIDAgMCAwIDguNC43LjcgMCAwIDEtLjUgMS4yeiIvPjwvc3ZnPg==') no-repeat 2px 4px;
}

.last__first-paragraph {
  text-align: center;
  text-transform: uppercase;
  color: #e90e0e;
  font-size: 28px;
  font-weight: 700;
  line-height: 48px;
}
.last__accent-text {
  display: block;
  color: #d71f27;
  font-size: 12px;
  font-weight: 700;
}
.last__list-wraper {
  padding: 10px 0;
}

.read-more {
  margin-bottom: 20px;
}

.read-more__item {
  margin: 10px;
}
.read-more__content-wraper {
  position: relative;
  z-index: 4;
  padding-bottom: 75%;
  background-color: #eee;
}
.read-more__item img {
  position: absolute;
  top:0;
  width: 100%;
  height: auto;
}
.read-more__item a {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
.read-more__item .read-more__item-text {
  position: absolute;
  min-height: 3em;
  bottom: 0;
  display: block;
  padding: 10px 15px;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  box-sizing: border-box;
  transition: min-height 0.3s;
}
.read-more__item a:focus .read-more__item-text,
.read-more__item a:hover .read-more__item-text {
  min-height: 100%;
}
@media (max-width: 669px) {
  .share_active {
    display: block;
    width: 100%;
    min-height: 56px;
    position: absolute;
    top: 48px;
    left: 0;
    z-index: 4;
    background-color: rgba(51, 51, 51, 0.7);
    text-align: right;
  }
}
