:root {
  --blue: #004d97;
  --yellow: #e9b800;
  --red: #a40045;
  --black: #000;
  --white: #fff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url(ef70b415a25418f29916dc7daf9ed28f.eot);
  src: url(ef70b415a25418f29916dc7daf9ed28f.eot?#iefix) format('embedded-opentype'),
       url(33e2fc83e36b9221c972bc27a97f5309.woff) format('woff'),
       url(fd67ccb822f56943a1a51a16560fcc85.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url(46dd882e46c9140f8765149ac17f73cc.eot);
  src: url(46dd882e46c9140f8765149ac17f73cc.eot?#iefix) format('embedded-opentype'),
       url(fa3589fd6ce41b3a71fb9d896ebeb8d3.woff) format('woff'),
       url(1e6335b69c52d324c7d0be3ebb7fe3a8.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'Source Sans Pro', sans-serif;
}

.sitebar {
  width: 100%;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}

.sitebar__content {
  width: 100%;
  max-width: 1400px;

  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sitebar__logo { margin: 0; padding: 0; }
.sitebar__logo img {
  margin: 10px;
  width: auto;
  width: 260px;
}

.top-nav { display: none; }

.top-nav > ul {
  list-style-type: none;
  display: flex;
  align-items: flex-end;
}

.top-nav > ul > li {
  display: inline-block;
  margin: 0 20px;
}

.top-nav > ul > li > a {
  font-size: 1.2em;
  text-decoration: none;
  color: #4a4a4a;
  position: relative;
  text-transform: uppercase;
}

.top-nav > ul > li > a::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fc2f70;
  transform-origin: center;
  transform: translate(-50%, 0) scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.top-nav > ul > li > a:hover::before {
  transform: translate(-50%, 0) scaleX(1);
}

.top-nav__contacts {
  text-align: right;
  font-size: 14px;

  color: rgba(0,0,0, 0.45);
}

.top-nav__contacts > p {
  margin-top: 0;
  margin-bottom: 0;
}

.top-nav__contacts a {
  text-decoration: none;
  color: var(--black);
  border-bottom: dashed 1px var(--black);
  transition: color border-color 1s;
}

.top-nav__contacts a:hover {
  color: var(--red);
  border-bottom: dashed 1px var(--red);
}

.top-nav__callback-button {
  outline: none;
  border: none;
  background: transparent;
  color: var(--blue);
  border: solid var(--blue) 1px;
  border-radius: 4px;
  padding: 0.75em 1em;
  cursor: pointer;
  margin-top: 1em;
  transition: background-color border-color 1s;
}

.top-nav__callback-button:hover {
  color: var(--red);
  border: solid var(--red) 1px;
}



@media (min-width: 950px) {
  .top-nav { display: block; }
}

.content {
  max-width: 1600px;
  margin: 0 auto;
}

.title {
  font-weight: bold;
  text-align: center;
  font-size: 40px;
}

.title.title_tiny { font-size: 30px; }
.title.title_blue { color: var(--blue); }

.text {
  text-align: center;
  max-width: 85%;
  font-size: 1.3em;
  line-height: 1.5em;
  margin: 1em auto;
}


@media (min-width: 800px) {
  .text {
    max-width: 35em;
  }
}

.footer {
  background: #242424;
  color: #bbb;

  padding: 2em 1em 0 1em;
}

.footer__desktop-content { display: none; }

.footer a {
  color: #bbb;
  text-decoration: none;
  border-bottom: solid 1px #bbb;
  border-bottom: solid 1px #bbbbbb44;
}
.footer b { color: #fff; }

.footer__content {
  display: flex;
  max-width: 1400px;
  justify-content: center;
  margin: 0 auto;
}


.footer__content h3 {
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
}

.footer__content p {
  max-width: 20em;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: normal;
}

.footer__content img {
  width: 350px;
}


.footer__nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.footer__nav ul > li {
  margin-bottom: 0.5em;
}

.footer__online-offer {
  outline: none;
  border: none;
  background: rgba(252, 47, 112, .75);
  color: #fff;
  border-radius: 3px;
  padding: 0.75em 1em;
  cursor: pointer;
  margin-top: 1em;
  transition: background-color 1s;
}

.footer__online-offer:hover { background-color: rgba(252, 47, 112, 1); }

.footer__callback-button {
  outline: none;
  border: none;
  background: rgba(85, 153, 255, .75);
  color: #fff;
  border-radius: 3px;
  padding: 0.75em 1em;
  cursor: pointer;
  margin-top: 1em;
  transition: background-color 1s;
}

.footer__callback-button:hover { background-color: rgba(85, 153, 255, 1); }


@media (min-width: 950px) {
  .footer__desktop-content { display: block; }

  .footer__content { justify-content: space-between; }
}

.footer-social-links>li {
  display: inline-block;
  margin: 0 .25em;
}

.footer-social-links>li>a {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  opacity: .5;
  transition: opacity 1s;
  border-bottom: none;
}

.footer-social-links>li>a:hover { opacity: 1; }

.footer-social-links__vk { background-image: url(6478a38f5728f38c0ed23d07cf48799a.svg); }
.footer-social-links__facebook { background-image: url(11e30f1ca2b4290af518505fbf5ee5f3.svg); }
.footer-social-links__telegram { background-image: url(c0187acba1436e4149a292adfbe4e037.svg); }
.footer-social-links__youtube { background-image: url(361a92312f58308c68fd2110cdfd9569.svg); }
.footer-social-links__twitter { background-image: url(fd99dd976f3e471fb461bed9d1d65a9a.svg); }

.text-with-icon {
  margin: 0;
  padding: 0;

  list-style-type: none;
  margin: 0 auto;
  text-align: center;
  margin-top: 3.5em;
}

.text-with-icon > li {
  vertical-align: top;
  display: inline-block;
  max-width: 100%;

  margin-bottom: 30px;
}

.text-with-icon > li:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;

  background-repeat: no-repeat;
  background-position: center center;
}

.text-with-icon__exp:before { background-image: url(8edf6d2f2212cfe966d8ada6a2c94a02.svg); }
.text-with-icon__leading:before { background-image: url(cca8b9ef0044188ce794f66946191591.svg); }
.text-with-icon__partners:before { background-image: url(7268a2aadf25f6654061842d069c296f.svg); }

.text-with-icon__address:before { background-image: url(12701e186b372f5aab38356934b559ba.svg); }
.text-with-icon__hours:before { background-image: url(bbcdecf0ef281df205fbb38806bef190.svg); }
.text-with-icon__contacts:before { background-image: url(c1547659c2326245a243c71cb238f468.svg); }


.text-with-icon > li > strong {
  display: inline-block;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 1.5em;
}

.text-with-icon > li > p {
  text-align: center;
  max-width: 85%;
  font-size: 1.2em;
  line-height: 1.5em;

  margin: 0 auto;
}


.text-with-icon_contacts > li > p { text-align: center; }
.text-with-icon_contacts > li > p > a {
  color: var(--black);
  text-decoration: none;
  display: inline-block;
  border-bottom: dashed 1px var(--black);
}


@media (min-width: 850px) {

  .text-with-icon > li { width: 25em; margin: 0 3em; }

  .text-with-icon > li > p { max-width: 22em; margin: 0; }
}

.page-content {}

.page-content > img {
  width: 40em;
  max-width: 80%;
  display: block;
  margin: 0 auto;
}


.page-content_news-item {
  text-align: center;
}

.page-content_news-item p {
  font-size: 1.3em;
  line-height: 1.5em;
  margin: 1em auto;
  max-width: 35em;
}

.page-content_news-item img {
  width: 40em;
  max-width: 80%;
  margin: 0 auto;
}

p.page-content__date {
  font-size: .9em;
  border-bottom: solid 1px #ddd;
  max-width: 15em;
  padding-bottom: 0.5em;
}


/* about pages */
.page-content_about p {
  text-align: center;
  max-width: 85%;
  font-size: 1.3em;
  line-height: 1.5em;
  margin: 1em auto;
}

.page-content_about p > strong,
.page-content_about p > b {
  color: #004d97;
  font-size: 30px;
}


.senar-image-content-block {
  width: 40em;
  max-width: 80%;
  margin: 0 auto;

  text-align: center;
}

@media (min-width: 800px) {
  .page-content_about p {
    max-width: 35em;
  }
}

.hamburger-menu__open-button {
  display: inline-block;
  border: none;
  background: transparent;
  font-size: 0;
  background-image: url(304ec526784f44d9b5ba4248c8324438.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;

  margin-right: 50px;
}

.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  text-align: left;

  margin: 0;
  padding: 0;

  overflow-y: scroll;
}

.hamburger-menu_hidden { display: none; }


.hamburger-menu__header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}


.hamburger-menu__close-button {
  display: inline-block;
  border: none;
  background: transparent;
  font-size: 0;
  background-image: url(4ca892ed110c50862f6d89f118e86e82.svg);
  background-repeat: no-repeat;
  background-position: center;

  width: 24px;
  height: 24px;

  margin-right: 50px;
}

.hamburger-menu__logo { max-height: 120px; margin: 10px; }

.hamburger-menu__contact-link {
  color: var(--red);
  text-decoration: none;
  display: inline-block;
  border-bottom: solid 1px var(--blue);
  font-size: 18px;

  margin-bottom: 25px;
}

@media (min-width: 950px) { .hamburger-menu__open-button { display: none; } }

.subnavi { display: none; text-align: center; margin-bottom: 50px; }

.subnavi > ul {
  list-style-type: none;

  border-left: 0;
  padding: 0;
  border-radius: none;
  background: none;
}

.subnavi > ul > li {
  margin: 0;
  padding: 0;
  font-size: 1.3em;

  margin-bottom: 10px;
}

.subnavi > ul > li > a {
  color: #4a4a4a;
  text-decoration: none;
  display: inline-block;
  border-bottom: solid 1px #4a4a4a;
}

.subnavi__root { font-weight: bold; }


@media (min-width: 500px) {

  .subnavi { margin-bottom: 0; }

  .subnavi > ul {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .subnavi > ul > li:not(:first-child):before {
    display: inline-block;
    content: '/';

    font-weight: bold;
    color: var(--blue);

    margin: 0 1em;
  }
}

@media (min-width: 950px) {
  .subnavi { display: block; }
}

.mobile-menu { text-align: center; margin-bottom: 50px; }

.mobile-menu > ul,
.mobile-menu > ul > li > ul {
  list-style-type: none;

  border-left: 0;
  padding: 0;
  border-radius: none;
  background: none;
}

.mobile-menu > ul > li {
  margin: 0;
  padding: 0;
  font-size: 25px;

  margin-bottom: 40px;
}
.mobile-menu > ul > li > ul > li {
  font-size: 18px;

  margin: 10px 0;
}

.mobile-menu > ul > li > a,
.mobile-menu > ul > li > ul > li >a {
  color: #4a4a4a;
  text-decoration: none;
  display: inline-block;
  border-bottom: solid 1px #4a4a4a;
}

.mobile-menu > ul > li > ul > li > a { text-transform: lowercase; color: var(--red); }
.mobile-menu > ul > li > a { text-transform: uppercase; color: var(--blue); }

.custom-input {
  position: relative;
}

.custom-input button,
.custom-input textarea,
.custom-input input {
  -webkit-appearance: none;
  box-sizing: border-box;

  display: block;

  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;

  border: solid 1px #bbb;
  border-radius: 4px;

  padding: 15px;
  width: 100%;

  font-size: 15px;

  margin: .5em .25em;
}
.custom-input textarea:focus,
.custom-input input:focus {
  border-color: var(--yellow);
}

.custom-input button {
  cursor: pointer;
  color: var(--blue);
  border-color: var(--blue);
}

.custom-input label {
  display: inline-block;
  padding: 0 5px;
  position: absolute;
  z-index: 1;

  color: var(--blue);
  font-size: 14px;
  background: var(--white);
  left: 12px;
  top: -1px;
}

.feedback-popup {
  visibility: visible;
  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  transition: background-color .5s;
  background-color: rgba(0, 0, 0, .3);
}

.feedback-popup_hidden {
  background-color: transparent;
  visibility: hidden;
  z-index: -1;
}

.feedback-popup__popup {
  background: var(--white);
  border-radius: .5em;

  padding: 1em;
  margin-top: -10em;

  min-width: 35em;

  text-align: center;

  position: relative;
}



.feedback-popup__close {
  -webkit-appearance: none;
  border: none;
  background: transparent;

  font-size: 0;

  width: 20px;
  height: 20px;

  transform: rotate(45deg);

  position: absolute;
  right: 20px;
}

.feedback-popup__close:focus { outline: none; }

.feedback-popup__close:after {
  content: '+';
  width: 20px;
  height: 20px;

  font-size: 28px;
  font-weight: bold;

  cursor: pointer;

}

.feedback-popup__form {
  position: relative;
  display: flex;
  flex-direction: column;
}

.feedback-popup__form textarea {
  resize: vertical;
  max-height: 15em;
  min-height: 4em;
}

.feedback-popup__loader {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(255, 255, 255, .75);
  border-radius: .5em;

  display: flex;
  align-items: center;
}

.feedback-popup__loader_hidden { display: none; }

.loader { background: var(--blue); color: var(--blue); }
.loader:before { background: var(--yellow); color: var(--yellow); }
.loader:after { background: var(--red); color: var(--red); }

.loader,
.loader:before,
.loader:after {
  -webkit-animation: loader 1s infinite ease-in-out;
  animation: loader 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}

@-webkit-keyframes loader {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

@keyframes loader {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}