@font-face {
        src: url(../fonts/Kodchasan/Kodchasan-Bold.ttf);
        font-family: kodchasanbold;
    }

    @font-face {
        src: url(../fonts/Kodchasan/Kodchasan-Regular.ttf);
        font-family: kodchasanreg;
    }

    @font-face {
        src: url(../fonts/Kodchasan/Kodchasan-Medium.ttf);
        font-family: kodchasanmed;
    }


    @font-face {
        src: url(../fonts/kremlin-kourier-ii/Kremlin\ Kourier\ II.ttf);
        font-family: kremlin;
    }

    @font-face {
        src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
        font-family: montserratregular;
    }

    @font-face {
        src: url(../fonts/Montserrat/Montserrat-Medium.ttf);
        font-family: montserratmed;
    }

    @font-face {
        src: url(../fonts/Roboto/Roboto-Regular.ttf);
        font-family: roboto;
    }

    .main__images-container::-webkit-scrollbar {
        display: none;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        padding: 0;
    }

    .header {
        background-color: #323840;
        width: 100%;
        height: auto;
    }

    hr {
        color: rgb(197, 197, 197);
        margin: 0;
    }

    .main__jump-up-button-container {
        color: #125992;
        text-transform: uppercase;
        font-family: montserratregular;
        font-size: 1rem;
        padding-top: 20px;
        text-align: end;
        width: 100%;
    }

    .main__jump-up-button {
        cursor: pointer;
    }
    
    .main__jump-up-button-img {
        height: 15px;
        width: auto;
    }

    .header__link--text-color {
        color: white;
    }

    .header__link--text-color-visiting {
        color: #FC7707 !important;
    }

    .body--overflow {
        overflow: hidden;
    }

    .lang--display-none {
        display: none;
    }

    .lang--display-active {
        display: inline;
    }

    .header__language-button-lt {
        cursor: pointer
    }

    .header__language-button-en {
        cursor: pointer
    }

    .header__language-button-ru {
        cursor: pointer
    }

    [lang='ru'] {
        font-family: 'Micra', arial;
    }

    .header__nav-monitor {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        justify-content: space-between;
        height: 80px;
        width: 70%;
        background-color: #323840;

    }

    .header__logo-container {
        margin: auto auto auto 0;
        width: 30%;
        height: 100%;
        display: flex;

    }

    .header__logo {
        display: block;
        width: 150px;
        height: auto;
        margin: auto auto auto 0;
        cursor: pointer;
    }

    .header__buttons-container {
        width: 70%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .header__nav-button-container {
        font-family: kodchasanbold;
        color: white;
        display: flex;
        position: relative;
        width: 20rem;
    }
    
    .header__nav-button {
        position: absolute;
        width: 15rem;
        top: 30px;
        left: 0;
        right: 0;
        margin: auto 0.5rem auto auto;
        background-color:  #323840c5;
        z-index: 5;
        text-align: center;
        overflow: hidden;
    }

    .header__nav-button--height {
        height: 20px;
        transition: 0.5s;
        transition-delay: 0.5s;
    }

    .header__nav-button--height .header__link-list {
        opacity: 0;
        transition: 0.5s;
    }

    .header__nav-button--height:hover {
        height: 270px;
        transition: 0.5s;
    }

    .header__nav-button--height:hover .header__link-list {
        opacity: 1;
        transition: 0.5s;
        transition-delay: 0.5s;
    }

    .header__link-list {
        overflow: hidden;
        padding: 0;
        list-style-type: none;
        margin-top: 30px;
        width: 100%;
        font-size: 15px;
        text-align: center;
    }


    .header__link-list-item {
        margin-top: 1.5rem;
        font-family: kodchasanreg;
        cursor: pointer;
    }

    .header__link {
        text-decoration: none;
        font-family: kodchasanreg;
    }

    .header__link--font-weight {
        font-weight: normal;
        transition: 0.5s;
    }

    .header__link--font-weight:hover {
        font-weight: bold;
        transition: 0.5s;
    }

    .header__phone-button-container {
        width: 12.5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
    }

    .header__phone-button {
        margin: auto;
        width: 12.5rem;
        height: 30px;
        font-size: 15px;
        border: none;
        border: 2px solid white;
        cursor: pointer;
    }

    .header__phone-button--colors {
        color: white;
        background-color: transparent;
        transition: 0.5s;
    }

    .header__phone-button--colors:hover {
        color: #FC7707;
        background-color: white;
        transition: 0.5s;
    }

    .header__language-buttons-container {
        display: flex;
        padding-left: 3rem;
        justify-content: right;
        justify-content: flex-end;
        width: auto;
    }


    .header__language-buttons-container span {
        display: block;
        color: white;
        margin: auto 0 auto 0;
        cursor: default;
    }

    .header__language-button-lt,
    .header__language-button-ru,
    .header__language-button-en {
        background-color: transparent;
        color: white;
        cursor: pointer;
        display: block;
        font-family: kodchasanreg;
        margin: auto 0 auto 0;
        padding: 0.25rem;
    }

    .header__mobile-language-buttons-container {
        display: block;
        height: 2rem;
        margin: auto 0;
        position: relative;
        width: 4rem;
        z-index: 10;
    }

    .header__mobile-language-buttons {
        background-color: #323840;
        border: 1px solid white;
        left: 0;
        overflow: hidden;
        padding: 1px;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 5;
    }

    .header__mobile-language-buttons--height-closed {
        height: 2rem;
        transition: 0.3s;
    }

    .header__mobile-language-buttons--height-opened {
        height: 6rem;
        transition: 0.3s;
    }

    .header__selected-language-container {
        display: flex;
    }

    .header__selected-language-container .header__language-button-lt,
    .header__selected-language-container .header__language-button-en,
    .header__selected-language-container .header__language-button-ru {
        display: flex;
        align-items: center;
        width: 60%;
    }

    .header__language-dropdown-button {
        position: relative;
        width: 40%;
    }

    .header__language-dropdown-trigger {
        cursor: pointer;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 5;
    }

    .header__language-dropdown-arrow {
        background-image: url("../icons/triangle-arrow-down-white.svg");
        background-position: center;
        background-size: 1rem auto;
        background-repeat: no-repeat;
        cursor: pointer;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: 0.3s;
        width: 100%;
        z-index: 3;
    }

    .header__language-dropdown-arrow--up {
        transform: rotateX(180deg);
        transition: 0.3s;
    }

    .header__language-selection-container {
        position: relative;
        height: auto;
        width: 100%;
    }

    .header__language-selection {
        height: 3rem;
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        z-index: 5;
    }

    .header__language-selection-container .header__language-button-lt,
    .header__language-selection-container .header__language-button-ru,
    .header__language-selection-container .header__language-button-en {
     margin-top: 0.125rem;
     text-align: center;
    }

    .header__language-button-lt,
    .header__language-button-ru,
    .header__language-button-en {
        background-color: transparent;
        color: white;
        cursor: pointer;
        display: block;
        font-family: kodchasanreg;
        margin: auto 0 auto 0;
        padding: auto;
    }

    .mobile-header {
        display: block;
        background-color: #323840;
        width: 100%;
        height: auto;
    }


    .mobile-header__nav {
        display: flex;
        justify-content: space-between;
        margin: auto;
        height: 41px;
        width: 90%;
        background-color: #323840;
    }

    .mobile-header__nav-buttons-container {
        width: 100%;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
    }

    .mobile-header__phone-button-container {
        margin: auto auto auto 0;
        display: flex;
        flex-wrap: wrap;
    }

    .mobile-header__phone-button {
        border: none;
        cursor: pointer;
        font-size: 15px;
        height: 30px;
        margin: auto;
        text-align: left;
        width: 200px;
    }

    .mobile-header__phone-button--colors {
        color: white;
        background-color: transparent;
    }

    .mobile-header__nav-button  {
        cursor: pointer;
        display: flex;
        margin: auto 0 auto auto;
        position: relative;
        height: 30px;
        justify-content: right;
        overflow: hidden;
        width: 30px
    }

    .mobile-header__nav-button-trigger {
        background-color: transparent;
        left: 0;
        position: absolute;
        top: 0;
        height: 30px;
        width: 30px;
        z-index: 5;
    }

    .mobile-header__close {
        background-image: url("../icons/close-menu-white.svg");
        background-size: contain;
        background-repeat: no-repeat;
        height: 30px;
        top: 0;
        position: absolute;
        width: 30px;
        z-index: 0;
    }

    .mobile-header__button--position-hidden {
        left: -30px;
        opacity: 0;
        transition: 0.3s;
    }

    .mobile-header__button--position-visible {
        left: 0;
        opacity: 1;
        transition: 0.3s;
    }

    .mobile-header__open {
        background-image: url("../icons/menu-white.svg");
        background-size: contain;
        background-repeat: no-repeat;
        height: 30px;
        top: 0;
        position: absolute;
        width: 30px;
        z-index: 0;
    }

    .mobile-header__item--display-none {
        display: none;
    }

    .mobile-header__item--display-block {
        display: block;
    }

    .mobile-header__menu-container {
        position: relative;
        height: 0;
        width: 100%;
    }

    .mobile-header__menu--height-opened {
        height: 220px;
        transition: 0.5s;
    }

    .mobile-header__menu--height-closed {
        height: 0px;
        transition: 0.5s;
    }

    .mobile-header__menu {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color:  #323840c5;
        z-index: 5;
        overflow: hidden;
    }

    .mobile-header__list {
        overflow: hidden;
        padding: 0;
        list-style-type: none;
        margin-top: 30px;
        width: 100%;
        font-size: 15px;
        text-align: center;
    }

    .mobile-header__list-item {
        color: white;
        margin-top: 10px;
        font-family: kodchasanreg;
        cursor: pointer;
        font-size: 20px;
    }

    .mobile-header__list-item--opacity-closed {
        opacity: 0;
        transition: 0.5s;
    }

    .mobile-header__list-item--opacity-opened {
        opacity: 1;
        transition: 0.5s;
    }

    .mobile-header__link {
        color: white;
        text-decoration: none;
        font-family: kodchasanreg;
    }


    .footer {
        background-color: #323840;
        height: auto;
        width: 100%;
    }

    .footer__wrapper {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        margin: auto;
        width: 70%;
    }

    .footer__container-1, .footer__container-2 {
        height: auto;
        width: 50%;
    }

    .footer__logo-container {
        height: auto;
        padding-top: 1rem;
        width: 100%;
    }

    .footer__logo {
        display: block;
        width: 150px;
        height: auto;
        margin: auto auto auto 0;
        cursor: pointer;
    }

    .footer__list-container {
        padding-top: 1rem;
    }

    .footer__youtube-logo-text,
    .footer__all-rights,
    .footer__page-authors,
    .footer__text-line-1, 
    .footer__text-line-2,
    .footer__list-title,
    .footer__list-item 
    {
        font-size: 1rem;
    }


    .footer__list-title {
        color:#9F9F9F;
        font-family: kodchasanreg; 
    }

    .footer__list {
        color: #8FA9A9;
        font-family: roboto;
        padding-left: 1.25rem;
    }

    .footer__list-item {
        margin-top: 0.5rem;
    }

    .footer__list-link {
        color: #9F9F9F;
        text-decoration: none;
    }

    .footer__list-link:visited {
        color: none;
    }

    .footer__contacts-container {
        padding-top: 1rem;
    }

    .footer__text-line-1, 
    .footer__text-line-2 {
        color:#9F9F9F;
        font-family: roboto;
    }

    .footer__iframe-container {
        padding-top: 1rem;
    }

    .footer__container-3 {
        width: 100%;
    }

    .footer__youtube-logo-container {
        display: flex;
        height: auto;
        margin-top: 1rem;
        padding-bottom: 1rem;
        width: 100%;
    }

    .footer__youtube-logo-text {
        color:#9F9F9F;
        font-family: roboto;
        height: 100%;
    }

    .footer__youtube-logo {
        height: auto;
        padding-left: 0.5rem;
        width: 100px
    }

    .footer__page-authors-container {
        display: flex;
        padding-bottom: 2rem;
    }

    .footer__all-rights {
        color:#9F9F9F;
        font-family: roboto;
        width: 50%;
    }

    .footer__page-authors {
        color:#9F9F9F;
        font-family: roboto;
        width: 50%;
        text-align: right;
    }

@media (min-width: 1080px) {

    .mobile-header {
        display: none;
    }

    .header__mobile-language-buttons-container {
        display: none;
    }

}

@media (max-width: 1536px) {

    .header__nav-monitor {
        width: 80%;
    }

    .footer__wrapper {
        width: 80%;
    }
}

@media (max-width: 1080px) {

    .mobile-header {
        display: block;
    }

    .header__nav-monitor {
        width: 90%;
    }

    .header__buttons-container {
        display: none;
    }

    .header__mobile-language-buttons-container {
        display: block;
    }

    .footer__wrapper {
        width: 80%;
    }

    .footer__container-1, .footer__container-2 {
        width: 100%;
    }

    .footer__page-authors-container {
        margin: 2rem auto auto auto;
    }

}

@media (max-width: 768px) {

    .header__logo-container {
        width: 150px;
    }

    .header__nav-monitor {
        width: 90%;
    }

    .header__buttons-container {
        display: none;
    }

    .mobile-header {
        display: block;
    }

    .footer__wrapper {
        width: 80%;
    }

    .main__jump-up-button-container {
        font-size: 13px;
    }

    .footer__container-1, .footer__container-2 {
        width: 100%;
    }

    .footer__page-authors-container {
        flex-wrap: wrap;
        margin: 2rem auto auto auto;
    }

    .footer__all-rights {
        order: 2;
        width: 100%;
    }

    .footer__youtube-logo-text,
    .footer__all-rights,
    .footer__page-authors,
    .footer__text-line-1, 
    .footer__text-line-2,
    .footer__list-title,
    .footer__list-item 
    {
        font-size: 0.875rem;
    }

    .footer__page-authors {
        order: 1;
        text-align: left;
        width: 100%;
    }
}

@media (max-width: 360px) {

    .footer__iframe-container  iframe {
        height: 15rem;
        width: 100%;
    }

}