@charset "UTF-8";
@font-face {
  font-family: 'Bebas Neue';
  src: url("fonts/Bebas_Neue.otf"), url("fonts/Bebas_Neue.ttf"), url("fonts/Bebas_Neue.woff") format("truetype");
  font-weight: normal;
  font-style: normal; }
/* --- default --- */
body, select, input, textarea {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #000;
  margin: 0;
  padding: 0; }

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

ul {
  padding: 0; }

li {
  list-style-type: none; }

/* Headers (h1,h2,etc) have no default font-size or margin, you'll want to define those yourself. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, a, p, span, strong {
  font-family: 'Bebas Neue', Arial, sans-serif; }

h1, .h1 {
  font-size: 24px;
  margin: 0.207em 0; }

h2, .h2 {
  font-size: 24px; }

h3, .h3 {
  font-size: 20px;
  margin: 0.75em 0 0.4em 0;
  font-weight: 600; }

h4, .h4 {
  font-size: 17px; }

h5, .h5 {
  font-family: 'Open Sans', serif;
  font-size: 15px;
  margin: 0 0 0.7em 0; }

a {
  text-decoration: none;
  font-family: 'Bebas Neue', Arial, sans-serif; }

p {
  margin: 0;
  font-family: 'Bebas Neue', Arial, sans-serif; }

img {
  max-width: 100%; }

/* -- Popup -- */
.popup {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.8s ease 0s; }

.popup.open {
  opacity: 1;
  visibility: visible; }

.popup.open .popup__content {
  transform: perspective(600px) translate(0px, 0%) rotateX(0deg);
  opacity: 1; }

.popup__area {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

.popup__body {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  transition: all 0.8s ease 0s; }

.popup__content {
  background-color: #fff;
  color: #000;
  max-width: 800px;
  padding: 30px;
  position: relative;
  transition: all 0.8s ease 0s;
  opacity: 0;
  transform: perspective(600px) translate(0px, -100%) rotateX(45deg); }

.popup__content_image {
  padding: 0; }

.popup__image img {
  max-width: 100%;
  vertical-align: top; }

.popup__close {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
  color: #000;
  text-decoration: none; }

.popup__title {
  font-size: 40px;
  margin: 0 0 1em 0; }

/* -- ╤Д╨╛╤А╨╝╨░ -- */
.form__container {
  width: 100%;
  padding: 12px; }
.form__check {
  width: 100%;
  height: 40px;
  padding: 4px 6px;
  font: 18px Arial, serif; }
.form .btn {
  margin: auto;
  font-weight: bold;
  font: 16px Arial, serif;
  line-height: 16px;
  text-align: center;
  color: #FFFFFF;
  width: 200px;
  height: 40px;
  margin-top: 9px;
  padding: 8px;
  background: linear-gradient(135deg, #EF0202 0%, #960B0B 100%);
  border-radius: 5px;
  border: 1px solid #960B0B;
  cursor: pointer; }
.form__error {
  border: 1px solid red; }

.hidden {
  display: none !important; }

.wrapper {
  overflow: hidden; }

.container {
  width: 1140px;
  margin: 0 auto;
  position: relative; }
  .container--fluid {
    width: 100%; }

.empty {
  flex: 1 1 auto; }

.bg--dark {
  background-color: #07414f;
  position: relative;
  z-index: 20; }

.header {
  display: flex;
  height: 86px;
  padding: 17px 0; }
  .header__phone {
    flex: 0 0 333px; }
    .header__phone img {
      margin-right: 18px;
      padding-top: 9px;
      display: block;
      position: relative;
      float: left; }
    .header__phone a {
      color: #ffffff;
      font-size: 48px;
      font-weight: 400;
      text-align: left;
      text-transform: uppercase; }

.main {
  display: flex;
  position: relative; }
  .main__text {
    z-index: 10;
    flex: 0 0 590px;
    color: #07414f;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase; }
    .main__text--size1 {
      font-size: 78px;
      line-height: 50px; }
    .main__text--size2 {
      font-size: 50px; }
    .main__text--size3 {
      font-size: 42px;
      line-height: 38px; }
    .main__text img {
      margin-top: 24px; }
  .main__img {
    position: absolute;
    z-index: 8;
    top: -113px;
    right: -28px;
    width: 676px;
    height: 850px; }

.img--right img {
  display: block;
  background-size: cover;
  width: 100%;
  height: 100%; }

.w1000 {
  width: 1000px; }

.tablet {
  box-shadow: 0 6px 5px rgba(61, 41, 3, 0.35);
  background-color: #fbfbfb;
  padding: 29px 15px;
  position: relative;
  z-index: 12; }
  .tablet__dat {
    width: 12px;
    height: 12px;
    background-color: #d04f44;
    border-radius: 6px;
    position: relative;
    float: left;
    margin: 7px 6px; }
  .tablet__text {
    color: #010101;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    font-variant: small-caps; }

.arrow-down {
  margin: 20px auto 0;
  width: 32px; }
  .arrow-down img {
    position: relative;
    z-index: 12; }

.btn {
  display: block; }
  .btn--red {
    position: relative;
    z-index: 12;
    margin: 20px auto;
    border-radius: 10px;
    background-color: #d04f44;
    color: #fff;
    padding: 10px 20px;
    font-size: 34px;
    font-weight: 400;
    width: max-content;
    height: 58px; }

.img--left {
  position: absolute;
  z-index: 2;
  bottom: -558px;
  left: -826px;
  width: 1201px;
  height: 726px; }
  .img--left img {
    display: block;
    background-size: cover;
    width: 100%;
    height: 100%; }

.footer {
  margin-top: 110px;
  padding: 40px 0; }
  .footer__ip, .footer__info {
    color: #fff;
    font-family: Arial, sans-serif;
    text-align: left;
    font-variant: small-caps; }
  .footer__ip {
    font-size: 24px;
    font-weight: 500;
    line-height: 36.88px; }
  .footer__info {
    margin-top: 10px;
    font-size: 18px;
    max-width: 890px; }
  .footer__download {
    color: #4AAEDF;
    font-size: 26px;
    font-family: Arial, sans-serif; }

.form__success {
  color: green;
  font-family: Arial, sans-serif; }

.error {
  display: none;
  color: red;
  font-family: Arial, sans-serif; }

@media screen and (max-width: 1200px) {
  .container {
    width: 920px; }

  .main__img {
    top: -105px;
    right: -240px; }

  .w1000 {
    width: auto; } }
@media screen and (max-width: 992px) {
  .container {
    width: 720px; }

  .main__img {
    width: 240px;
    height: 176px;
    top: -45px;
    right: -135px; }

  .img--left {
    position: absolute;
    width: 196px;
    height: 573px;
    left: -136px;
    bottom: -130px; } }
@media screen and (max-width: 768px) {
  .container {
    width: 540px; }

  .main__text {
    max-width: 85%;
    padding: 0 15px; }

  .btn--red {
    font-size: 24px;
    height: 46px; } }
@media screen and (max-width: 576px) {
  .container {
    width: 100%;
    padding: 0 10px; }

  .main__text {
    font-size: 18px; }
    .main__text--size1 {
      font-size: 60px;
      line-height: 34px; }
    .main__text--size2 {
      font-size: 42px; }
    .main__text--size3 {
      font-size: 26px;
      line-height: 26px; }

  .img--right {
    right: -30px; }

  .img--left {
    left: 0;
    bottom: -200px; }

  .footer {
    padding-top: 20px; } }
@media screen and (max-width: 440px) {
  .header {
    height: 74px; }

  .header__phone {
    flex: 0 0 255px; }
    .header__phone img {
      margin-right: 8px;
      padding-top: 2px; }
    .header__phone a {
      font-size: 36px; }

  .main__text {
    margin-top: 20px;
    font-size: 14px; }
    .main__text--size1 {
      font-size: 48px;
      line-height: 24px; }
    .main__text--size2 {
      font-size: 36px; }
    .main__text--size3 {
      font-size: 23px;
      line-height: 23px; }

  .img--right {
    right: -82px; }

  .img--left {
    left: -35px;
    bottom: -320px; }

  .img--width100 {
    position: absolute;
    width: 100%;
    padding: 0 30px 0 0; }

  .w1000 {
    margin-top: 100px; }

  .tablet__text {
    font-size: 15px;
    line-height: 26px; }

  .footer__ip {
    font-size: 20px; }
  .footer__info {
    font-size: 14px; }

  .btn--red {
    font-size: 17px;
    height: 38px;
    padding: 10px 12px; } }

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