@import "/static/general/fonts/Cambria/font.css";
@import "/static/general/fonts/Oswald/font.css";

@import "blocks/common.css";
@import "blocks/header.css";
@import "blocks/footer.css";
@import "blocks/popup.css";

html {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  box-sizing: border-box;
  background-color: #1c1313;
  color: #74525C;
  font: 400 22px/32px Oswald, Arial, Times, serif;
}
p {
  margin: 0 0 15px;
}

.main {
  overflow: hidden;
  max-width: 2560px;
  margin: auto;
  position: relative;
}
section {
  position: relative;
  padding: 70px 0;
}

.content {
  max-width: 1780px;
  margin: auto;
}
@media only screen and (max-width: 1800px) {
  .content {
    max-width: 100%;
    padding: 0 70px;
  }
}
@media only screen and (max-width: 800px) {
  section {
    padding: 50px 0;
  }
  .content {
    padding: 0 5%;
  }
}


@media only screen and (min-width: 2560px) {
  .main::after, .main::before {
    content: "";
    display: block;
    height: 100%;
    width: 40px;
    position: absolute;
    top: 0;
    background: linear-gradient(to right, #1c1313, transparent);
    z-index: 4;
  }
  .main::before {
    left: 0;
  }
  .main::after {
    right: 0;
    transform: rotate(180deg);
  }
}



.menu {
  position: fixed;
  right:60px;
  top:50%;
  transform: translateY(-50%);
  z-index: 10;
}
.menu > div {
  position: relative;
  width: 20px;
  height: 34px;
  font: 16px/34px Oswald;
  text-transform: uppercase;
  color: #8F757D;
  white-space: nowrap;
  cursor: pointer;
}
.menu > div:hover,
.menu .active {
  color: #fff;
}
.menu > div span {
  position: absolute;
  top:0;
  right:100%;
  padding: 0 30px 0 0;
}
.menu > div:before {
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  right: 8px;
  width: 4px;
  height: 4px;
  margin: auto;
  background: #fff;
  border-radius: 100%;
  pointer-events: none;
}
.menu > div:after {
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  right: 0;
  width: 20px;
  height: 34px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/menu.png) no-repeat 0 0;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  pointer-events: none;
}
.menu > div.active:after {
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 2560px) {
  .menu {
    left: calc(50vw + 1200px);
    right: auto;
  }
}
@media only screen and (max-width: 2000px) {
  .menu {
    transition: .2s ease;
  }
  .menu:not(.first) {
    right:20px;
  }
  .menu:not(.first) > div span {
    opacity: 0;
    visibility: hidden;
    transition: .2s ease;
  }
  .menu:hover > div span {
    opacity: 1;
    visibility: visible;
  }
}
@media only screen and (max-width: 1080px) {
  .menu {
    display: none;
  }
}


/* intro */
.sect0 {
  height: 1350px;
  color: #fff;
  background: #050102;
}
.sect0:after {
  content: '';
  position: absolute;
  left:0;
  right:0;
  top:99%;
  height: 65px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/bg-decor0.png) no-repeat 50% 0;
  pointer-events: none;
  transform: rotate(180deg);
  z-index: 2;
}
.video {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  left:0;
  right:0;
  bottom:0;
  top:0;
  overflow: hidden;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/bg1.jpg) no-repeat 50% 0;
}
.video:after {
	content: '';
  position: absolute;
	left:0;
	right:0;
	bottom:0;
  height: 20%;
	z-index: 3;
  background: linear-gradient(to top, #050102 0%, #050102 20%, transparent 100%);
}

.video video {
  position: absolute;
  height: 110%;
  width: auto;
  top:0;
  left:50%;
  transform: translateX(-50%);
	z-index: 2;
}
.scroll {
  position: absolute;
  left:0;
  right:0;
  bottom: 180px;
  margin: auto;
  width: 20px;
  height: 54px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/scroll.png) no-repeat 0 0;
  pointer-events: none;
  z-index: 2;
}
@media only screen and (max-width: 1700px) {
  .scroll {
    left: auto;
    right:60px;
  }
}
@media only screen and (max-width: 900px) {
  .scroll {
    display: none;
  }
}

.nagashar {
  max-width: 564px;
  width: 50%;
  position: relative;
}
.nagashar img {
  display: block;
  width: 100%;
  height: auto;
}
.intro__info {
  margin: 320px 0 225px;
  position: relative;
  z-index: 1;
}
.intro__text {
  text-transform: uppercase;
  margin: 20px 0;
}
.play {
  position: absolute;
  width: 87px;
  height: 87px;
  cursor: pointer;
  left: calc(100% + 30px);
  top:50%;
  transform: translateY(-50%);
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/play_btn.png) no-repeat 0 0;
}
.play:hover {
  filter: brightness(70%);
}
.intro__info .button {
  margin-top: 30px;
}
.intro__more {
  position: relative;
  z-index: 1;
}
.intro__more .gift {
  width: 220px;
  height: 280px;
  margin: 0 16px 20px 0;
}

@media only screen and (max-width: 1400px) {
  .video {
    height: 740px;
    background-size: auto 100%;
  }
  .sect0 {
    height: auto;
  }
  .intro__info {
    margin-bottom: 90px;
  }
}
@media only screen and (max-width: 900px) {
  .intro__info {
    text-align: center;
    margin-top: 480px;
  }
  .play {
    top: -170px;
    left:0;
    right:0;
    transform: none;
    margin: auto;
  }
  .nagashar {
    position: static;
    width: 100%;
    margin: auto;
  }
  .video {
    background-position: 58% 0;
  }
  .video video {
    display: none;
  }
  .intro__more {
    text-align: center;
  }
  .intro__more .gift {
    display: block;
    margin: 0 auto 20px;
  }
}




/* gifts */
.gifts {
  position: relative;
}
.gifts .slick-arrow {
  bottom: 63px;
  left: -10px;
}
.gifts .slick-next {
  left: auto;
  right: -10px;
}
.gift {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 340px;
  max-width: 100%;
  height: 320px;
  border:1px solid #4c3038;
}

.gift img {
  position: absolute;
  top:0;
  bottom:61px;
  left:0;
  right:0;
  margin: auto;
  max-width: 100%;
  height: auto;
  z-index: 1;
}
.gift video {
  position: absolute;
  top:0;
  bottom:61px;
  left:0;
  right:0;
  margin: auto;
  max-width: 100%;
  height: auto;
  z-index: 1;
}

.gift__name {
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  padding: 9px 5px 5px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/gift-name.png) no-repeat 50% 0;
  text-transform: uppercase;
  overflow: hidden;
  font: 500 14px/18px Oswald;
  color: #fff;
  z-index: 2;
}

.gift-info__button {
  position: absolute;
  right:-1px;
  top:-1px;
  width: 30px;
  height: 30px;
  background: #74525c url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/info.png) no-repeat 0 0;
  cursor: default;
  z-index: 4;
}
.gift-tooltip {
  position: absolute;
  left:-1px;
  right:-1px;
  top:-1px;
  bottom:-1px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(32,32,32,.95);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  z-index: 5;
}
.gift-info:hover .gift-tooltip {
  opacity: 1;
  visibility: visible;
}

.gift-tooltip__title {
  text-transform: uppercase;
  font: 500 14px/20px Oswald;
  color: #fff;
  padding: 0 0 18px;
  flex: 0 0 auto;
}
.gift-tooltip__text {
  font-size: 14px;
  line-height: 18px;
}

.gift--sm {
  width: 220px;
  height: 220px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/gift_sm.png) no-repeat 0 0;
  border:0;
}
.gift--sm img {
  bottom:0;
}
.gift--sm .gift-info__button {
  top:0;
  right:0;
}
.gift--sm .gift-tooltip {
  top:0;
  right:0;
  left:0;
  bottom:0;
}


.gifts--daily {
  margin: 0 0 80px;
}
.gifts--daily.gifts--hero {
  margin: 0;
}
.gifts--daily .gift {
  margin: 0 16px 20px 0;
}
.gifts--hero + .main-task__detail {
  margin: 0 0 50px;
  max-width: 702px;
}
.gifts--hero + .main-task__detail:before {
  display: none;
}
.gifts--hero .gift:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 0;
  height: 0;
  margin: -8px auto 0;
  border-width: 14px;
  border-style: solid;
  border-color: transparent transparent #74525c transparent;
}

.gifts--main {
  max-width: 1780px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 40px;
}
.gifts--main .gift {
  margin-bottom: 20px;
}

.gifts--main .gift:before,
.intro__gifts .gift:before {
  content: '';
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(116, 82, 92, 0.00) 0%, #74525C 100%);
}
@media only screen and (max-width: 1820px) {
  .gifts--main {
    max-width: 1060px;
  }
}

@media only screen and (max-width: 1700px) {
  .gifts--daily {
    max-width: 1100px;
    display:flex;
    flex-wrap: wrap;
  }
  .gifts--daily .gift {
    margin: 0 20px 20px 0;
  }
}
@media only screen and (max-width: 1200px) {
  .gifts--main {
    max-width: 700px;
  }
}
@media only screen and (max-width: 900px) {
  .gifts.slick-initialized {
    padding: 0 40px;
  }
  .slick-initialized {
    display: block;
  }
  .gifts--hero .gift:before {
    display: none;
  }
}


@media only screen and (max-width: 900px) {
  .gifts.slick-initialized {
    margin: 0 0 50px;
  }
  .gifts .slick-list {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
  }
  .gifts--daily.slick-initialized {
    width: 310px;
    max-width: 100%;
    margin: 0 auto 40px;
  }
  .gifts.slick-initialized .gift {
    margin: 0 5px;
    box-sizing: border-box;
  }
  .gifts--main.slick-initialized {
    width: 420px;
    max-width: 100%;
    margin: 0 auto 40px;
  }
  .gifts--main.slick-initialized .gift {
    box-sizing: content-box;
  }
  .gift-info__button {
    cursor: pointer;
  }
  .gift-info__button.show {
    z-index: 5;
    background-position: 100% 0;
  }
  .gift-info:hover .gift-tooltip {
    opacity: 0;
    visibility: hidden;
  }
  .gift-info__button.show + .gift-tooltip {
    opacity: 1;
    visibility: visible;
    z-index: 4;
  }

}


.sect1,
.sect3 {
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/bg-texture.jpg) no-repeat 50% 0;
}

.sect1 {
  padding: 120px 0 120px;
}

.text {
  max-width: 1060px;
  margin: 0 0 55px;
}
@media only screen and (max-width: 900px) {
  .text {
    text-align: center;
  }
}
@media only screen and (max-width: 800px) {
  .sect1 {
    padding: 100px 0 120px;
  }

}

.sect2 {
  height: 981px;
  padding-top: 70px;
  z-index: 2;
  background: #0a0204;
}
.sect2 .bg {
  position: absolute;
  left:0;
  right:0;
  top:-50px;
  height: 1081px;
  pointer-events: none;
}
.sect2 .bg > div {
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}
.sect2 .bg > div.on {
  opacity: 1;
  visibility: visible;
}
.sect2 .bg_1 {
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/sect2_1.png) no-repeat 50% 0;
}
.sect2 .bg_2 {
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/sect2_2.png) no-repeat 50% 0;
}
.sect2 .bg_3 {
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/sect2_3.png) no-repeat 50% 0;
}
.sect2 h2 {
  position: relative;
  z-index: 3;
}
.histories {
  position: relative;
  z-index: 3;
  height: 470px;
  max-width: 700px;
  margin: 0 0 50px;
}
.history {
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility .3s;
  position: relative;
}
.history.hidden {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  opacity: 0;
  visibility: hidden;
}
.history-nav {
  display: flex;
  width: 340px;
  justify-content: space-between;
  max-width: 100%;
  position: relative;
  z-index: 3;
}
.history-nav__item {
  width: 80px;
  height: 80px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/history.png) no-repeat -130px 0;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
  font: 40px/40px Cambria;
  justify-content: center;
  align-items: center;
  display: flex;
}
.history-nav__item:hover {
  background-position: 100% 0;
}
.history-nav__item.current {
  background-position: 0 0;
  cursor: default;
}
.history-nav__item.locked {
  cursor: default;
  background-position: -260px 0;
  text-indent: 200%;
  overflow: hidden;
}

@media only screen and (max-width: 1280px) {
  .sect2 {
    height: auto;
    padding-top: 33vw;
  }
  .sect2 .bg {
    height: 750px;
    height: 60vw;
  }
  .sect2 .bg_1 {
    background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/sect2_1-m.png) no-repeat 50% 0;
  }
  .sect2 .bg_2 {
    background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/sect2_2-m.png) no-repeat 50% 0;
  }
  .sect2 .bg_3 {
    background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/sect2_3-m.png) no-repeat 50% 0;
  }
  .sect2 .bg > div {
    background-size: contain;
  }
  .sect2:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 65px;
    background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/bg-decor.png) no-repeat 50% 0;
    pointer-events: none;
    top: 100%;
    transform: rotate(180deg);
  }

}
@media only screen and (max-width: 900px) {
  .sect2 {
    padding-top: 25vw;
  }
  .histories {
    height: auto;
    padding-bottom: 40px;
  }
  .history {
    text-align: center;
  }
  .history-nav {
    margin: 0 auto;
  }

}

.sect3 {
  padding: 120px 0;
  background-size: cover;
}

.guild-info {
  max-width: 700px;
  margin: 0 0 50px;
}
.guild-info span {
  color: #C08A9A;
}
.guild-time {
  margin: 0 0 40px;
}
.guild-time__date {
  font: 36px/44px Oswald;
  letter-spacing: 9px;
  color: #C08A9A;
}
.sep {
  position: relative;
  border-bottom: 1px solid #74525c;
}
.sep--padding {
  padding: 0 0 60px;
}
.sep:before {
  content: '';
  position: absolute;
  left:0;
  right:0;
  top:100%;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 6px;
  border-color: #74525c transparent transparent transparent;
}
.sect3 .sep {
  margin-bottom: 60px;
}

.rating-gifts,
.personal-tasks {
  gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 0 50px;
}
.main-tasks {
  display: inline-block;
  max-width: 430px;
  width: 100%;
  border: 3px solid #74525c;
  position: relative;
  height: 520px;
}
.main-tasks:before {
  content: '';
  position: absolute;
  left:2px;
  right:2px;
  top:2px;
  bottom:2px;
  border: 1px solid #74525c;
  pointer-events: none;
  z-index: 2;
}

.main-tasks .gift-info__button {
  right:-3px;
  top:-3px;
}
.main-tasks .gift-tooltip {
  right:-3px;
  top:-3px;
  bottom:-3px;
  left:-3px;
}
.main-tasks--deatils {
  margin-bottom: 140px;
}
.main-tasks--deatils-lg {
  margin-bottom: 230px;
}
.main-tasks--deatils-md {
  margin-bottom: 180px;
}


.main-tasks img {
  position: absolute;
  left:0;
  right:0;
  top:0;
  margin: auto;
  max-width: 100%;
  z-index: 2;
}
.main-task__info {
  position: absolute;
  bottom:30px;
  left:15px;
  right:15px;
  color: #fff;
  font: 26px/28px Cambria;
  text-align: center;
  z-index: 3;
}
.main-task__info .button {
  margin: auto;
}
.main-task__info span {
  display: block;
  color: #74525C;
  text-transform: none;
  font: 400 22px/26px Oswald, Arial, Times, serif;
  max-width: 400px;
  margin: 30px auto 0;
}
.main-task__text {
  font-size: 14px;
  line-height: 16px;
}
.main-task__details {
  position: absolute;
  top: calc(100% + 40px);
  left:0;
  right:0;
}
.main-task__detail {
  position: relative;
  background: #74525c;
  padding: 15px 20px;
  color: #CCA8A8;
  font: 16px/18px Oswald;
  text-align: center;
  min-height: 74px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-task__detail:before {
  content: '';
  position: absolute;
  left:0;
  right:0;
  bottom:100%;
  width: 0;
  height: 0;
  margin: auto;
  border-width: 14px;
  border-style: solid;
  border-color: transparent transparent #74525c transparent;
}
.main-task__detail + .main-task__detail {
  margin-top: 14px;
}
.done .main-task__detail {
  background: #35973f;
  color: #fff;
}
.done .main-task__detail:before {
  border-color: transparent transparent #35973f transparent;
}

.task-slider {
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  overflow: hidden;
  z-index: 1;
}
.task-slider__item {
  position: relative;
  width: 100%;
  height: 514px;
  float: left;
}
.task-slider__item-name {
  position: absolute;
  left:15px;
  right:15px;
  top:30px;
  color: #fff;
  font: 26px/28px Cambria;
  text-align: center;
  z-index: 3;
}
.main-tasks .gift-tooltip {
  padding: 20px 25px;
}

.main-tasks--super {
  border-color: transparent;
  max-width: 520px;
  height: 590px;
}
.main-tasks--md {
  border-color: transparent;
}

.main-tasks--super:before {
  left:-3px;
  right:-3px;
  top:-3px;
  bottom:-3px;
  border: 0;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/main-task_decor.png) no-repeat 50% 50%;
  background-size: 100% 100%;
}
.main-tasks--md:before {
  left:-3px;
  right:-3px;
  top:-3px;
  bottom:-3px;
  border: 0;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/main-task_decor-md.png) no-repeat 50% 50%;
  background-size: 100% 100%;
}
.main-tasks--md .main-task__info
.main-tasks--super .main-task__info {
  text-transform: uppercase;
}

@media only screen and (max-width: 900px) {
  .main-tasks {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .guild-info {
    text-align: center;
  }
  .guild-time__date {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 3px;
  }

}
@media only screen and (max-width: 470px) {
  .main-tasks {
    height: 470px;
  }
  .main-tasks--super {
    height: 500px;
  }
  .main-task__info span {
    margin-top: 20px;
  }
}

.rating-tables {
  display: flex;
  max-width: 1780px;
  margin: 0 0 50px;
  gap: 20px;
}
.rating-table {
  width: 25%;
}
.rating-table__title {
  text-transform: uppercase;
  color: #fff;
  font: 30px/34px Cambria;
  margin: 0 0 40px;
}
.rating-table__text {
  margin: 0 0 40px;
}
.sect3 .rating-table__text {
  min-height: 100px;

}
/*
@media only screen and (max-width: 1800px) {
  .rating-table__text {
    min-height: 130px;
  }
}
@media only screen and (max-width: 1560px) {
  .rating-table__text {
    min-height: 160px;
  }
}
@media only screen and (max-width: 1500px) {
  .rating-table__text {
    min-height: 100px;
  }
}
@media only screen and (max-width: 1035px) {
  .rating-table:nth-child(n+3) .rating-table__text {
    min-height: 130px;
  }
}*/
@media only screen and (max-width: 900px) {
  .sect3 .rating-table__text {
    min-height: 1px;
  }
}

.ratings_label {
  padding-left: 65px;
  color: #74525C;
  font: 16px/18px Oswald;
  margin: 15px 0 18px;
}

.ratings {
  border: 1px solid #74525c;
  max-width: 700px;
  font: 22px/26px Oswald;
  padding: 5px 0;
}
.ratings.empty {
  border: 0;
  font: 400 22px/32px Oswald;
}
.rating {
  display:flex;
  margin: 10px 0;
}
.rating > div {
  position: relative;
  padding: 0 15px;
}
.rating > div + div:before {
  content: '';
  position: absolute;
  right: 100%;
  top:0;
  bottom:0;
  border-left: 1px solid #74525c;
  pointer-events: none;
}
.rating .rating__num {
  width: 50px;
  flex: 0 0 auto;
  text-align: center;
  padding: 0;
}
.rating__score {
  width: 20%;
  flex: 0 0 auto;
}
.rating__name {
  flex: 1 1 100%;
  color: #fff;
  width: 40%;
}
.nowrap {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}


@media only screen and (max-width: 1500px) {
  .rating-tables {
    flex-wrap: wrap;
    gap: 40px;
  }
  .rating-table {
    width: calc(50% - 20px);
  }
}


@media only screen and (max-width: 900px) {
  .ratings {
    margin: 0 auto;
  }
  .ratings.empty {
    text-align: center;
  }
  .rating-tables {
    margin: 0;
  }
  .sect7 .rating-tables .rating-table,
  .sect3 .rating-tables .rating-table {
    width: 100%;
  }

}
@media only screen and (max-width: 800px) {
  .ratings:not(.ratings--sm) {
    border: 0;
    padding: 0;
    max-width: 100%;
  }
  .rating .rating__num {
    width: 30px;
  }
  .ratings_label {
    padding-left: 45px;
  }
}
@media only screen and (max-width: 500px) {
  .ratings:not(.empty) {
    font: 16px/20px Oswald;
  }
}
@media only screen and (max-width: 400px) {
  .ratings:not(.empty) {
    font: 14px/18px Oswald;
  }
  .rating > div {
    padding: 0 10px;
  }
}



/* Stages */
.sect5 {
  background: #0a0204;
  padding-top: 50px;
}
.sect5:before,
.sect5:after,
.sect8:before,
.sect8:after {
  content: '';
  position: absolute;
  left:0;
  right:0;
  height: 65px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/bg-decor.png) no-repeat 50% 0;
  pointer-events: none;
}
.sect5:before,
.sect8:before {
  bottom:100%;
}
.sect5:after,
.sect8:after {
  top:100%;
  transform: rotate(180deg);
}

.stages-nav {
  display: none;
  justify-content: center;
}
.stage-nav {
  display: inline-block;
  width: 27px;
  height: 28px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/points.png) no-repeat 100% 0;
  cursor: pointer;
  margin: 0 7px;
}
.stage-nav.active, .stage-nav.locked {
  cursor: default;
}
.stage-nav.active,
.stage-nav:not(.locked):hover {
  background-position: 0 0;
}
.stage-nav.locked {
  background-position: 100% 0;
  opacity: .4;
  filter: brightness(80%);
}

.stages {
  display: flex;
  max-width: 1255px;
  min-height: 913px;
}
.stage {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #74525c;
  width: 65px;
  cursor: pointer;
  transition: all .3s;
}
.stage.active {
  overflow: visible;
  width: calc(100% - 300px);
}
.stage + .stage {
  margin-left: 10px;
}
.stage:not(.active):not(.locked):before {
  content: '';
  position: absolute;
  left:18px;
  top: 22px;
  width: 28px;
  height: 28px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/stage.png) no-repeat 0 0;
}
.stage.locked:before {
  content: '';
  position: absolute;
  left:22px;
  top: 22px;
  width: 20px;
  height: 28px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/stage-close.png) no-repeat 0 0;
}

.stage.locked {
  cursor: default;
}
.stage.active {
  cursor: default;
}
.stage .stage-line,
.stage .main-info > div:not(.stage-title) {
  transition: all .1s linear .3s;
  opacity: 1;
  visibility: visible;
}

.stage:not(.active) .stage-line:not(.main-info) {
  opacity: 0;
  visibility: hidden;
  transition: none;
  height: 1px;
}
.stage:not(.active) .main-info > div:not(.stage-title) {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.stage-line {
  position: relative;
  border-bottom: 1px dotted #74525c;
  padding: 20px 23px;
  text-align: left;
}
.stage-line:after {
  content: '';
  position: absolute;
  bottom:-4px;
  left:-5px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: #74525c;
}
.stage-line:not(.main-info) {
  display: flex;
}

.stage:not(.active) .main-info {
  position: static;
  border: none;
}
.stage:not(.active) .stage-title {
  position: absolute;
  bottom:22px;
  left:11px;
  transform: rotate(-90deg) translateY(-50%);
  white-space: nowrap;
}
.stage:not(.active) .stage-line:after {
  display: none;
}

.stage-title {
  color: #fff;
  margin: 0 0 30px;
  text-transform: uppercase;
}
.stage-date {
  position: absolute;
  right: 30px;
  top:20px;
  color: #fff;
  text-transform: uppercase;
}
.stage-line_title {
  width: 160px;
  margin-right: 20px;
  flex: 0 0 auto;
  color: #fff;
}
.stage-line_text {
  flex: 1 1 100%;
}
.red {
  color: #F32121;
}
.green {
  color: #10FF53;
}

@media only screen and (max-width: 1300px) {
  .stages {
    max-width: 100%;
  }
}

@media only screen and (max-width: 1100px) {
  .stages {
    display: block;
    height: auto;
    margin: 35px auto;
  }
  .stage {
    display: none;
  }
  .stage.active {
    display: block;
    width: 100%;
  }
  .stage + .stage {
    margin: 0;
  }
  .stages-nav {
    display: flex;
  }

}
@media only screen and (max-width: 800px) {

  .stages {
    padding-bottom: 20px;
  }

}

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

  .stage {
    border: 0;
  }
  .stage .stage-line {
    padding: 20px 0;
    display: block;
  }
  .stage-line_title {
    margin: 0 0 5px;
  }

}


/* FAQ */
.sect6 {
  padding-top: 120px;
}
.faq-wrap {
  border-bottom:1px solid #74525c;
}
.faq__title {
  position: relative;
  color: #fff;
  border-top:1px solid #74525c;
  padding: 16px 45px 16px 0;
  cursor: pointer;
}
.faq__title:before {
  content: '';
  position: absolute;
  right: 4px;
  top:23px;
  width: 22px;
  height: 11px;
  background: url(https://aa.cdn.gmru.net/static/aa.mail.ru/promo/nagashar/data/images/faq.png) no-repeat 0 0;
}
.faq__title.opened:before {
  transform: rotate(180deg);
}
.faq__text {
  display: none;
  padding: 0 15px 20px;
  font-size: 18px;
  line-height: 22px;
}

.faq__text a{
  color: #6ba3cf;
}

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

  .faq {
    text-align: left;
  }
  .faq__title {
    padding: 16px 35px 16px 0;
  }

}

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

  .faq__title {
    font-size: 14px;
    line-height: 16px;
  }
  .faq__title:before{
    top:19px;
  }
  .faq__text {
    font-size: 14px;
    line-height: 18px;
  }

}

.sect7 {
  position: relative;
  background: url(/static/aa.mail.ru/promo/nagashar/data/images/sect7-l.png) no-repeat 50% 0;
  min-height: 1281px;
  padding: 70px 0;
  margin: -70px 0 -50px;
  background-size: cover;
  z-index: 1;
}
.sect8 {
  background: #0a0204;
  margin: 0 0 200px;
}
.sect8 .personal-tasks {
  margin-bottom: 0;
}

.ovl {
  background: none;
  padding: 0;
  width: 100%;
  max-width: 850px;
}
.ovl-content {
  position: relative;
  width: 100%;
  border: 3px solid #74525c;
  padding: 45px 28px 35px;
  background: #131210;
}
.ovl-close {
  width: 30px;
  height: 30px;
  background: #74525c url(/static/aa.mail.ru/promo/nagashar/data/images/ovl-close.png) no-repeat 50% 50%;
  right: 0;
  top: 0;
}
.ovl-close:hover {
  background-color: #c70000;
}
.ovl-title {
  color: #fff;
  font: 40px/42px Cambria;
  margin: 0 0 20px;
}
.ovl-text {
  margin: 0 0 30px;
  font-size: 22px;
}
.ovl-content .button {
  margin: auto;
}

.ovl-gifts {
  display: flex;
  max-width: 640px;
  width: 100%;
  margin: auto;
  gap: 20px;
}
.ovl-gift {
  position: relative;
  width: 33%;
  padding: 0 0 32px;
  cursor: pointer;
}
.ovl-gift:before {
  content: '';
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  height: 32px;
  margin: auto;
  background: url(/static/aa.mail.ru/promo/nagashar/data/images/choose.png) no-repeat 50% 0;
  background-size: 100% 80px;
  max-width: 172px;
}
.ovl-gift.on:before {
  background-position: 50% 100%;
}
.ovl-gift img {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: .3;
}
.ovl-gift.on img,
.ovl-gift:hover img {
  opacity: 1;
}
.ovl-gifts-name {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  font-size: 22px;
  line-height: 26px;
  color: #fff;
  max-width: 640px;
  width: 100%;
  margin: auto;
}