/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

body {
  min-width: 320px;
  position: relative;
  overflow-x: hidden;
  font: 300 16px/1.6 HelveticaNeueCyr, Arial sans-serif; }

img {
  display: inline-block;
  max-width: 100%;
  height: auto; }

a {
  display: inline-block;
  text-decoration: none; }

@font-face {
  font-family: "HelveticaNeueCyr";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/HelveticaNeueCyr/HelveticaNeueCyr-Light.woff") format("woff"), url("../fonts/HelveticaNeueCyr/HelveticaNeueCyr-Light.ttf") format("truetype"); }

@font-face {
  font-family: "HelveticaNeueCyr";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/HelveticaNeueCyr/HelveticaNeueCyr-Medium.woff") format("woff"), url("../fonts/HelveticaNeueCyr/HelveticaNeueCyr-Medium.ttf") format("truetype"); }

@font-face {
  font-family: "HelveticaNeueCyr";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/HelveticaNeueCyr/HelveticaNeueCyr-Bold.woff") format("woff"), url("../fonts/HelveticaNeueCyr/HelveticaNeueCyr-Bold.ttf") format("truetype"); }

@font-face {
  font-family: "icon-font-chepelo";
  src: url("../fonts/icon-font-chepelo/icon-font-chepelo.eot");
  src: url("../fonts/icon-font-chepelo/icon-font-chepelo.eot?#iefix") format("embedded-opentype"), url("../fonts/icon-font-chepelo/icon-font-chepelo.woff") format("woff"), url("../fonts/icon-font-chepelo/icon-font-chepelo.ttf") format("truetype"), url("../fonts/icon-font-chepelo/icon-font-chepelo.svg#icon-font-chepelo") format("svg");
  font-weight: normal;
  font-style: normal; }

[data-icon]:before {
  font-family: "icon-font-chepelo" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "icon-font-chepelo" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-facebook-logo:before {
  content: "\6c"; }

.icon-google-plus-logo:before {
  content: "\6d"; }

.icon-instagram-logo:before {
  content: "\6e"; }

.icon-twitter-letter-logo:before {
  content: "\6f"; }

.icon-youtube-logo:before {
  content: "\70"; }

.construction {
  position: relative;
  height: 100vh;
  background: url("../img/construction-bg.jpg") center no-repeat;
  background-size: cover; }
  .construction:before {
    content: "";
    background: #222533;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .construction__intro {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-49%, -51%);
    text-align: center; }
    .construction__intro .logo {
      width: 381px;
      height: 286px;
      margin-bottom: 35px; }
    .construction__intro .intro__heading {
      color: #fff;
      font-family: HelveticaNeueCyr;
      font-size: 2em;
      font-weight: 500;
      line-height: 1.81;
      text-align: center; }
    .construction__intro .intro__desc {
      opacity: 0.8;
      color: #fff;
      font-family: HelveticaNeueCyr;
      font-size: 1.25em;
      font-weight: 300;
      line-height: 1.25; }
  .construction__info {
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translate(-50%, 0); }
    .construction__info .info__loading {
      position: relative;
      width: 100%;
      background-color: #8d9ba5;
      height: 2px;
      margin-bottom: 30px; }
      .construction__info .info__loading-count {
        position: absolute;
        left: -7px;
        top: -25px;
        color: #76838d;
        font-family: HelveticaNeueCyr;
        font-size: 1em;
        font-weight: 300;
        line-height: 1.06; }
        .construction__info .info__loading-count:after {
          content: "%"; }
      .construction__info .info__loading:before {
        content: "";
        width: 0;
        background-color: #ff5f21;
        display: inline-block;
        height: 2px;
        position: absolute; }
    .construction__info .info__social {
      margin-bottom: 30px; }
      .construction__info .info__social ul li {
        position: relative;
        display: inline-block;
        margin-right: 10px;
        width: 32px;
        height: 32px;
        opacity: 0.5;
        border: 1px solid #9aa8b8;
        border-radius: 5px; }
        .construction__info .info__social ul li:last-child {
          margin-right: 0; }
        .construction__info .info__social ul li a {
          position: relative;
          left: 6px;
          top: 5px;
          color: #8d9ba5;
          font-size: 18px;
          outline: none; }
        .construction__info .info__social ul li:hover, .construction__info .info__social ul li:focus, .construction__info .info__social ul li:active {
          opacity: 1;
          transition: 0.3s ease;
          border-color: #fff; }
          .construction__info .info__social ul li:hover a, .construction__info .info__social ul li:focus a, .construction__info .info__social ul li:active a {
            color: #fff; }
    .construction__info .info__copyright {
      margin-bottom: 20px;
      color: #5e6b79;
      font-family: HelveticaNeueCyr;
      font-size: 0.875em;
      line-height: 2.5;
      text-align: center; }
      .construction__info .info__copyright .copyright__name {
        font-weight: 300;
        float: left; }
      .construction__info .info__copyright .copyright__dev {
        font-weight: 700;
        float: right;
        color: #5e6b79;
        outline: none; }
        .construction__info .info__copyright .copyright__dev:hover, .construction__info .info__copyright .copyright__dev:focus, .construction__info .info__copyright .copyright__dev:active {
          color: #fff;
          transition: 0.3s ease;
          border: none; }

.info__loading-active:before {
  width: 25% !important;
  transition: 1.5s ease; }

.info__loading-count-active {
  transition: 1.5s cubic-bezier(0.25, 0.1, 0.01, 1.43);
  left: 21% !important; }

@media only screen and (max-width: 1200px) {
  .construction__intro .logo {
    width: 320px;
    height: 240px; } }

@media only screen and (max-width: 991px) {
  .construction {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    height: auto; }
    .construction__intro {
      margin-top: 50px;
      font-size: 15px;
      position: relative;
      transform: none;
      left: auto;
      top: auto; }
      .construction__intro .logo {
        width: 300px;
        height: 225px; }
    .construction__info {
      margin-top: 30px;
      position: relative;
      transform: none;
      left: auto;
      bottom: auto; } }

@media only screen and (max-width: 767px) {
  .construction__intro {
    font-size: 14px; }
    .construction__intro .logo {
      width: 250px;
      height: 188px; } }

@media only screen and (max-width: 667px) {
  .construction__intro .logo {
    width: 220px;
    height: 165px; } }

@media only screen and (max-width: 567px) {
  .construction__intro .logo {
    width: 200px;
    height: 150px; } }

@media only screen and (max-width: 479px) {
  .construction__intro .logo {
    width: 180px;
    height: 135px; } }