.header__burger {
  position: relative;
  width: 40px;
  height: 25px;
  display: block;
  margin-left: 10px;
  cursor: pointer;
  transform: scale(0.75);
}

.header__burger span, .header__burger:after, .header__burger:before {
  height: 3px;
  width: 100%;
  position: absolute;
  background: #fff;
  margin: 0 auto;
}

.header__burger span {
  top: 11px;
  transition: 0.3s;
}

.header__burger:after, .header__burger:before {
  content: "";
  transition: 0.3s;
}

.header__burger:after {
  top: 22px;
}

.header__burger:before {
  top: 0;
}

.header__burger.open-menu span {
  opacity: 0;
  transition: 0.3s;
}

.header__burger.open-menu:before {
  transform: rotate(38deg);
  top: 11px;
  transition: 0.3s;
}

.header__burger.open-menu:after {
  transform: rotate(-38deg);
  top: 11px;
  transition: 0.3s;
}

.header__inner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #121212;
  transition: 0.3s;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(100vw);
}
.header__inner.active {
  transform: translateX(0);
}
.header__inner__elems {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: 2.4rem;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

@font-face {
  font-family: "Neue Machina";
  src: url("../../fonts/NeueMachina-Light.eot");
  src: local("Neue Machina Light"), local("NeueMachina-Light"), url("../../fonts/NeueMachina-Light.eot?#iefix") format("embedded-opentype"), url("../../fonts/NeueMachina-Light.woff2") format("woff2"), url("../../fonts/NeueMachina-Light.woff") format("woff"), url("../../fonts/NeueMachina-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Neue Machina";
  src: url("../../fonts/NeueMachina-Regular.eot");
  src: local("Neue Machina Regular"), local("NeueMachina-Regular"), url("../../fonts/NeueMachina-Regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/NeueMachina-Regular.woff2") format("woff2"), url("../../fonts/NeueMachina-Regular.woff") format("woff"), url("../../fonts/NeueMachina-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
html {
  font-size: 10px;
}
@media (max-width: 1000px) {
  html {
    font-size: 9px;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 8px;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: "Neue Machina";
  /* height: 100vh;
  overflow: hidden; */
  background-color: #121212;
}
@media (max-width: 768px) {
  body {
    height: auto;
    overflow: auto;
  }
}

* {
  box-sizing: border-box;
}

h1, h2 {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}

.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.container::-webkit-scrollbar {
  width: 0;
}
@media (max-width: 1320px) {
  .container {
    padding: 2rem;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9;
}
.modal.active {
  display: flex;
}
.modal__inner {
  max-width: 650px;
  width: 100%;
  color: #000;
  font-size: 1.6rem;
  background: #fff;
}
.modal__inner__title {
  padding: 2rem 4rem;
  border-bottom: 1px solid #C4151C;
  font-size: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal__inner__title img {
  cursor: pointer;
}
.modal__inner__text {
  padding: 2rem 4rem;
  font-weight: 300;
}
.modal__inner__btn {
  text-align: right;
}
.modal__inner__btn .btn {
  padding: 1rem 4rem;
  margin: 4rem;
  margin-top: 0;
  text-decoration: none;
  font-size: 1.4rem;
  color: #FFFFFF;
  background: #C4151C;
  transition: 0.3s;
  display: inline-block;
  cursor: pointer;
}
.modal__inner__btn .btn:hover {
  opacity: 0.8;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 75px;
  background: #121212;
  z-index: 2;
  display: flex;
  align-items: center;
}
header__logo img {
  width: 238.5px;
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
}
@media (max-width: 768px) {
  header .header__logo img {
    width: 80%;
  }
}

section {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 2rem 0;
  padding-top: 100px;
}
@media (max-width: 768px) {
  section {
    padding-bottom: 6rem;
  }
}

.section-quanta {
  background: #121212;
}

.section-history {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../../images/history.png) 50% 50% no-repeat;
  background-size: cover;
  position: relative;
  overflow: auto;
  align-items: flex-start;
}
.section-history._quante {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../../images/quante.png) 50% 50% no-repeat;
  background-size: cover;
}

.quanta {
  display: flex;
  gap: 4.6rem;
  flex-wrap: wrap;
}
.quanta__left {
  width: calc(50% - 2.3rem);
}
@media (max-width: 768px) {
  .quanta__left {
    width: 100%;
  }
}
.quanta__left__title {
  font-size: 6.4rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #C4151C;
  width: 60%;
}
@media (max-width: 1600px) {
  .quanta__left__title {
    font-size: 4.2rem;
  }
}
@media (max-width: 768px) {
  .quanta__left__title {
    font-size: 4.8rem;
  }
}
.quanta__left__info {
  margin-top: 2rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #FFFFFF;
}
@media (max-width: 1600px) {
  .quanta__left__info {
    font-size: 1.5rem;
  }
}
.quanta__right {
  width: calc(50% - 2.3rem);
}
@media (max-width: 768px) {
  .quanta__right {
    width: 100%;
  }
}
.quanta__right__video img,
.quanta__right__video video {
  width: 100%;
}
@media (max-width: 1600px) {
  .quanta__right__video img,
.quanta__right__video video {
    width: 80%;
  }
}
.quanta__right__info {
  margin-top: 2rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #FFFFFF;
}
@media (max-width: 1600px) {
  .quanta__right__info {
    font-size: 1.5rem;
  }
}

.swiper {
  overflow: hidden;
}
@media (max-width: 768px) {
  .swiper .swiper-slide {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .swiper-wrapper {
    display: block !important;
  }
}

.history__title {
  font-size: 6.4rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #C4151C;
  width: 60%;
}
@media (max-width: 768px) {
  .history__title {
    font-size: 4.8rem;
  }
}
.history__info {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
  margin: 2.8rem 0;
}
.history__info__el {
  width: calc(50% - 1.6rem);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .history__info__el {
    width: 100%;
  }
}
.history__stats {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.history__stats__el {
  width: calc(50% - 2rem);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .history__stats__el {
    width: 100%;
  }
}
.history__stats__el._bg {
  background: rgba(195, 19, 31, 0.5);
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.history__stats__el__text {
  margin-top: 0.6rem;
}
.history__stats__el__price {
  display: flex;
  gap: 3rem;
  align-items: center;
}
.history__stats__el__price__num {
  font-weight: normal;
  font-size: 10rem;
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .history__stats__el__price__num {
    font-size: 6rem;
  }
}
.history__stats__el__price__line {
  height: 6.4rem;
  width: 1px;
  background: #fff;
}
@media (max-width: 768px) {
  .history__stats__el__price__line {
    font-size: 4.8rem;
  }
}
.history__stats__el__price__text {
  font-weight: normal;
  font-size: 3.6rem;
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .history__stats__el__price__text {
    font-size: 2.4rem;
  }
}

.section-test {
  background: #fff;
  position: relative;
}
.section-test:after {
  background: url("../../images/test.jfif") 50% 50% no-repeat;
  background-size: cover;
  opacity: 0.3;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.section-test .container {
  z-index: 2;
  position: relative;
}

.test__title {
  font-size: 6.4rem;
  text-transform: uppercase;
  color: #0E0E0E;
  line-height: 1;
  font-weight: 400;
}
@media (max-width: 768px) {
  .test__title {
    font-size: 4.8rem;
  }
}
.test__info {
  margin-top: 3.3rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 120%;
  color: #171717;
  max-width: 920px;
}
.test__btn {
  padding: 2.4rem 5rem;
  margin-top: 4rem;
  text-decoration: none;
  font-size: 2rem;
  color: #FFFFFF;
  background: #C4151C;
  transition: 0.3s;
  display: inline-block;
}
.test__btn:hover {
  opacity: 0.8;
}

#quiz {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 120%;
  color: #171717;
  max-width: 920px;
}
#quiz #quiz-counter {
  font-size: 2rem;
  font-weight: 700;
}
#quiz .answers a {
  display: inline-block;
  color: #000;
  text-decoration: none;
  padding: 20px;
  background-color: none;
  border-radius: 40px;
  border: #000 1px solid;
  margin: 10px 0;
  width: 100%;
}
#quiz .answers a.correct {
  background: #000;
  color: #fff;
}
#quiz #quiz-next-btn,
#quiz #quiz-finish-btn,
#quiz #quiz-restart-btn {
  padding: 2.4rem 5rem;
  margin-top: 4rem;
  text-decoration: none;
  font-size: 2rem;
  color: #FFFFFF;
  background: #C4151C;
  transition: 0.3s;
  display: inline-block;
}
#quiz #quiz-next-btn:hover,
#quiz #quiz-finish-btn:hover,
#quiz #quiz-restart-btn:hover {
  opacity: 0.8;
}

.section-role {
  background: #EEEEEE;
  overflow: auto;
  align-items: flex-start;
}

.role {
  display: flex;
  gap: 5rem;
  flex-wrap: wrap;
}
.role__info {
  column-count: 2;
  column-gap: 20px;
}
@media (max-width: 768px) {
  .role__info {
    width: 100%;
    column-count: 1;
  }
}
.role__info__title {
  font-weight: normal;
  font-size: 6.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: #C4151C;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .role__info__title {
    font-size: 4.8rem;
  }
}
.role__info__text {
  margin-top: 2rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 120%;
  color: #171717;
}
.role__img {
  width: calc(45% - 2.5rem);
  height: 100%;
}
@media (max-width: 768px) {
  .role__img {
    width: 100%;
  }
}
.role__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-test-2 {
  position: relative;
}

.test-2 {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .test-2 {
    padding: 0 20px;
  }
}
.test-2__title {
  font-weight: normal;
  font-size: 6.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: #C4151C;
}
@media (max-width: 768px) {
  .test-2__title {
    font-size: 4.8rem;
  }
}
.test-2__text {
  margin-top: 3rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: #FFFFFF;
  max-width: 820px;
}
.test-2__img {
  margin-top: 3.4rem;
}
.test-2__img svg {
  width: 100%;
}
.test-2__quiz {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 6rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}
.test-2__quiz__title {
  font-weight: normal;
  font-size: 2.4rem;
  line-height: 1;
  color: #C4151C;
}
.test-2__quiz__text {
  margin-top: 4rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: #FFFFFF;
}
.test-2__quiz__btns {
  margin-top: 5.1rem;
  display: flex;
  flex-wrap: wrap;
}
.test-2__quiz__btns__el {
  margin: 1.3rem 3.5rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  padding: 1.7rem;
  width: calc(50% - 7rem);
  transition: 0.3s;
  cursor: pointer;
}
.test-2__quiz__btns__el:hover {
  background: #FFFFFF;
  color: #000;
  box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.44);
}

.section-video {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.section-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-loading {
  padding: 5rem 15rem;
  font-weight: normal;
  font-size: 4rem;
  text-transform: uppercase;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
  background: #000000;
}
.video-loading__status {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
}
.video-loading__status__item {
  height: 100%;
  width: 0;
  background: #C4151C;
}
.video-loading__status__item.animate {
  animation: loading 5s;
}

@keyframes loading {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.section-earth {
  background: #050505;
  position: relative;
  overflow: hidden;
}
.section-earth .earth__title {
  font-weight: normal;
  font-size: 6.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: #C4151C;
}
@media (max-width: 768px) {
  .section-earth .earth__title {
    font-size: 4.8rem;
  }
}
.section-earth .earth__img, .section-earth .earth iframe {
  margin-top: 3.3rem;
  display: flex;
  justify-content: flex-end;
  min-width: 320px;
  min-height: 320px;
  width: 100%;
}
.section-earth .earth__bottom {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  padding-top: 1.4rem;
  padding-bottom: 8rem;
}
.section-earth .earth__bottom__head {
  display: flex;
  justify-content: space-between;
}
.section-earth .earth__bottom__head__title {
  margin-top: 5rem;
  font-weight: normal;
  font-size: 3.6rem;
  line-height: 1;
  text-transform: uppercase;
  color: #FFFFFF;
}
.section-earth .earth__bottom__head__close {
  cursor: pointer;
}
.section-earth .earth__bottom__detail {
  margin-top: 4.4rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 120%;
  color: #FFFFFF;
  max-width: 900px;
}

.selected {
  opacity: 0.6;
}

.hide {
  display: none;
}

.section-drag .drag__title {
  font-weight: normal;
  font-size: 6.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: #C4151C;
}
@media (max-width: 768px) {
  .section-drag .drag__title {
    font-size: 4.8rem;
  }
}
.section-drag .drag__arrow {
  margin-top: 2.6rem;
  margin-bottom: 6.3rem;
  justify-content: center;
  display: flex;
}
@media (max-width: 1600px) {
  .section-drag .drag__arrow {
    margin: 10px 0;
  }
}
.section-drag .drag__img {
  display: flex;
  justify-content: center;
}
@media (max-width: 1600px) {
  .section-drag .drag__img {
    height: 200px;
  }
}
@media (max-width: 768px) {
  .section-drag .drag__img img {
    width: 100%;
  }
}
.section-drag .drag__icons {
  margin-top: 7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4.8rem;
}
.section-drag .drag__icons__el {
  cursor: grab;
  
}
.drag__icons__el img {
  max-width: 120px;
}
@media (max-width: 1600px) {
  .section-drag .drag__icons__el img {
    width: 150px;
  }
}

.el0, .el1, .el2, .el3, .el4, .el5 {
  opacity: 0;
  transition: 0.3s;
}
.el0.active, .el1.active, .el2.active, .el3.active, .el4.active, .el5.active {
  opacity: 1;
}

.history__swiper {
  column-count: 2;
  column-gap: 30px;
  margin: 2rem 0;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .history__swiper {
    column-count: 1;
  }
}

/*# sourceMappingURL=app.css.map */

.swiper-wrapper {
  display: block !important;
}

.swiper-slide {
  min-height: 100vh !important;
}

@media (max-width: 768px) {
  .quote {
    flex-wrap: wrap;
  }

  .quote-img {
    width: 100%;
  }

  .swiper-slide {
    height: auto !important;
  }
}

.header__inner__elems__item {
  color: #fff;
  text-decoration: none;
  text-transform: capitalize;
}

#section-1 {
  background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ),url(../../images/section-1-bg.jpg);
  background-size: cover;
}
#section-2 {
  background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ),url(../../images/section-2-bg.jpg);
  background-size: cover;
}
.credit {
  margin-top: -2px;
  font-size: 10px;
}
.quote-img {
  margin: auto;
}
.quote {
  background: rgb(223, 223, 223);
  margin: 10px 0 10px 0;
}
.quote-q {
  max-width: 30px;
}
.quote-right {
  margin: auto;
}
.quote-name {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
#section-6 {
  background: url(../../images/section-6-bg.jpg);
  background-size: cover;
}

#section-9 {
  background: url(../../images/section-9-bg.jpg);
  background-size: cover;
}

.popup-2 {
  overflow-y: auto;
  height: 700px;
  padding-bottom: 300px;
}