@font-face {
    font-family: "Circe";
    src: url("../fonts/Circe-Thin.eot");
    src: url("../fonts/Circe-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Circe-Thin.woff") format("woff"), url("../fonts/Circe-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal; }
  
  @font-face {
    font-family: "Circe";
    src: url("../fonts/Circe-Regular.eot");
    src: url("../fonts/Circe-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Circe-Regular.woff") format("woff"), url("../fonts/Circe-Regular.ttf") format("truetype");
    font-weight: 300;
    font-style: normal; }
  
  @font-face {
    font-family: "Circe";
    src: url("../fonts/Circe-Light.eot");
    src: url("../fonts/Circe-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Circe-Light.woff") format("woff"), url("../fonts/Circe-Light.ttf") format("truetype");
    font-weight: 200;
    font-style: normal; }
  
  @font-face {
    font-family: "Circe";
    src: url("../fonts/Circe-ExtraBold.eot");
    src: url("../fonts/Circe-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Circe-ExtraBold.woff") format("woff"), url("../fonts/Circe-ExtraBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal; }
  
  @font-face {
    font-family: "Circe";
    src: url("../fonts/Circe-Bold.eot");
    src: url("../fonts/Circe-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Circe-Bold.woff") format("woff"), url("../fonts/Circe-Bold.ttf") format("truetype");
    font-weight: 500;
    font-style: normal; }
  
  * {
    margin: 0;
    padding: 0; }
  
  body {
    background-color: #3c3a3a; }
  
  a {
    text-decoration: none; }
  
  header {
    background-color: rgba(74, 73, 73, 0.5);
    text-align: right;
    padding: 5px 15px;
    position: fixed;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    header a {
      text-transform: uppercase;
      color: #ffffff;
      font-family: Roboto;
      font-size: 24px;
      margin-right: 40px; }
    header .search {
      display: flex;
      align-items: center; }
    header input {
      height: 25px;
      background-color: #666666;
      border: none;
      outline: none;
      padding: 0 7px;
      color: #fff; }
    header button {
      background-color: transparent;
      width: 25px;
      height: 25px;
      border: none;
      margin-left: 5px;
      outline: none;
      cursor: pointer; }
      header button img {
        width: 100%; }
  .big_vers {
      position: absolute;
      top: 5px;
      left: 15px;
  }
  .annotation {
    position: absolute;
    width: 400px;
    text-align: left;
    color: #ffffff;
    background-color: #3d3b39;
    padding: 10px 30px 10px 40px;
    box-sizing: border-box;
    top: 70px;
    right: 30px;
    font-family: Roboto;
    border-left: 36px solid #923737; }
  .overlay {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    pointer-events: none;
    transition: 0.35s ease-in-out;
    max-height: 100vh;
    overflow-y: auto; }
    .overlay.open {
      opacity: 1;
      pointer-events: inherit; }
    .overlay .modal {
      background: white;
      padding: 40px 80px;
      box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.35);
      opacity: 0;
      pointer-events: none;
      transition: 0.35s ease-in-out;
      max-height: 100vh;
      overflow-y: auto; }
          .overlay .modal h1 {
              text-align: center;
              margin-bottom: 30px;
              font-family: Roboto;
          }
          .overlay .modal .link {
              display: flex;
              justify-content: center;
          }
      .overlay .modal.open {
        opacity: 1;
        pointer-events: inherit; }
        .overlay .modal.open .content {
          transform: translate(0, 0px);
          opacity: 1; }
      .overlay .modal .content {
        transform: translate(0, -10px);
        opacity: 0;
        transition: .35s ease-in-out; }
      .overlay .modal .title {
        margin-top: 0; }
  .modal__content {
      text-align: left;
  }
  .modal a {
      display: inline-block;
      color: #000;
      background-color: #ddceb1;
      padding: 10px 15px;
      border-radius: 40px;
      font-size: 18px;
      margin-top: 35px;
  
  }
  .title {
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/title-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    position: relative; }
  
  .title:hover .title__bg {
    visibility: visible; }
  
  .title__bg {
    width: 100%;
    height: 100%;
    visibility: hidden; }
  
  .title__img {
    width: 50%;
    position: absolute;
    left: 0;
    bottom: 0; }
  
  section {
    background-color: #3c3a3a;
    width: 100%;
    box-sizing: border-box; }
  
  .content {
    width: 100%;
    padding: 0 10% 0 10%;
    box-sizing: border-box;
    padding-bottom: 25px; }
  
  .news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 60px;
    padding: 25px 85px;
    grid-column-gap: 80px;
    max-width: 1440px;
    margin: 0 auto; }
  
  .news__item {
    border-top: 17px solid #b83f3f;
    padding-top: 17px;
    display: flex;
    flex-direction: column;
    font-family: Roboto;
    color: #fff;
    transition: all .3s ease; }
    .news__item img {
      float: right;
      max-width: 120px;
      margin-bottom: 10px; }
    .news__item h2 {
      color: #b83f3f; }
    .news__item:hover {
      border-top: 17px solid #fff;
      color: #b83f3f;
      transition: all .3s ease; }
      .news__item:hover h2 {
        color: #fff; }
      .news__item:hover .news__item-region {
        color: #fff; }
  
  .news__item-region {
    color: #b83f3f;
    font-size: 14px;
    font-style: italic; }
  
  .news__item-discription {
    margin-top: 25px; }
  
  footer {
    background-color: #3c3a3a;
    display: flex;
    justify-content: center;
    padding: 35px 0; }
    footer img {
      margin-right: 20px; }
    footer .inactive {
      position: relative; }
    footer .active {
      position: absolute; }
      footer .active img {
        opacity: 0;
        cursor: pointer;
        transition: opacity .2s ease-in; }
        footer .active img:hover {
          opacity: 1;
          transition: opacity .2s ease-in; }
  
  .page_head {
    height: 70vh;
    background-image: url(../img/page-head.png);
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .page_head p {
      font-family: Circe;
      text-shadow: 0px 5px 5px #000000, 0px -5px 5px #000000, -5px 0px 5px #000000, 5px 0px 5px #000000; }
    .page_head__name {
      color: #bc5454;
      font-family: Corben;
      font-weight: 600;
      font-size: 55px; }
    .page_head__place {
      color: #fff;
      font-style: italic;
      margin: 1% 0;
      font-size: 22px;
      font-weight: 300; }
    .page_head__title {
      font-size: 44px;
      color: #ffffff; }
  
  .page_person {
    padding: 25px 0 25px 0; }
    .page_person .content {
      display: flex;
      justify-content: center;
      align-items: center; }
    .page_person__disc {
      background-color: #5f5d5d;
      box-shadow: 0px 3px 13.28px 2.72px rgba(0, 0, 0, 0.49);
      text-align: right;
      display: flex;
      justify-content: flex-end;
      width: 100%;
      align-items: center;
      padding: 30px 15px;
      margin-right: 40px;
      height: 30%; }
      .page_person__disc p {
        color: #ffffff;
        text-shadow: -1px -1px 0px #000000;
        font-family: Roboto;
        font-size: calc(2.23214vw + -2.14286px);
        line-height: 1.2;
        width: 70%; }
    .page_person img {
      width: 25%; }
  
  .page_video__disc {
    font-size: calc(2.67857vw + -3.57143px);
    color: #ffffff;
    font-family: Roboto; }
  
  .page_video__clip {
    width: 100%;
    height: 618px;
    background-color: lightgray;
    margin-top: 70px; }
  
  .page_video__copyrights {
    background-color: #6f6f6f;
    font-family: Roboto;
    font-style: italic;
    line-height: 1.2;
    font-size: calc(1.4881vw + 3.57143px);
    border-radius: 8px;
    padding: 22px 28px;
    margin: 20px 0;
    box-shadow: 0px 0px 6px 5px rgba(118, 117, 117, 0.92); }
  iframe {
      width: 100%;
  }
  .page_photo {
    background-color: #fff;
    padding: 40px 10%;
    display: flex;
    justify-content: space-around; }
    .page_photo__item {
      display: grid;
      justify-items: center;
      max-width: 35%;
      grid-template-rows: 400px;
      grid-row-gap: calc(2.97619vw + -12.85714px);
      align-items: center;
      margin-right: 30px; }
      .page_photo__item p {
        font-weight: 600;
        font-style: bold;
        font-family: Roboto;
        font-size: calc(0.74405vw + 9.28571px);
        margin: 15px 0;
        text-align: center; }
      .page_photo__item a
      {
        text-align: center;
        height: 100%;
        width: 100%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
  
  .back {
      position: fixed;
      bottom: 30px;
      right: 10px;
      color: #fff;
      background-color: #5f5d5d;
      opacity: .6;
      font-size: 15px;
      font-family: Roboto;
      border-radius: 30px;
      padding: 10px 20px;
      transition: opacity .2s ease;
  }
  
  .back:hover {
      opacity: 1;
      transition: opacity .2s ease;
  }
  
  .page_fact {
    padding-top: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/bg-copy.png);
    margin: 65px 0; }
    .page_fact .content {
      display: flex;
      justify-content: space-around;
      align-items: center; }
    .page_fact p {
      font-size: calc(2.08333vw + 2px);
      width: 60%;
      color: #fff;
      line-height: 1.2;
      font-family: Roboto;
      margin-right: 20px; }
    .page_fact a {
      width: 40%; }
  
  @media screen and (min-width: 1440px) {
      .back {
          font-size: 20px;
          right: 30px;
      }
      .page_video__disc {
          font-size: 30px;
      }
      .page_video__copyrights {
          font-size: 20px;
      }
      .page_fact p {
          font-size: 28px;
      }
  }
  
  @media screen and (max-width: 768px) {
    .title {
      height: 60vh; }
      .title__img {
        bottom: 0;
        width: 50%; }
    .news {
      padding: 25px 0;
      grid-template-columns: repeat(1, 1fr);
      grid-row-gap: 60px;
      padding: 25px 0;
      grid-column-gap: 80px;
      max-width: 1440px;
      margin: 0 auto; }
      .news__item {
        align-items: center; }
        .news__item img {
          margin-bottom: 20px; } }
  
  @media screen and (max-width: 420px) {
    header {
      justify-content: space-between; }
      header a {
        font-size: 15px;
        margin-right: 0; }
      header .search {
        width: 50%; }
      header input {
        height: 20px;
        width: 100%; }
      header button {
        height: 20px;
        width: 20px; }
        header button img {
          width: 20px; }
    footer {
      justify-content: center; }
      footer img {
        margin-right: 2px; } }