:root {
    --primary-color: #DAC3AD;
    --second-color: #727272;
    --dark: #313131;
    --gray-bright: #D7D7D7;
    --bright: #FFFFFF;
    --bright-1: #F3E5DF;
    --orange-grad: linear-gradient(57.99deg, rgba(255, 138, 0, 0.3) 0%, rgba(209, 130, 57, 0) 100%);
    --dark-1: #4D4D4D;
    --blue: #194496;

    --color-1: #909090;
    --wrap-padding: 7vw;
}

@media screen and (max-width: 1200px) {
    :root {
        --wrap-padding: 10vw;
    }
}

body {
    font: 1.5vh Roboto;
    font-size: calc(0.7vw + 0.7vh);
    font-weight: 400;
    background-color: var(--primary-color);
    color: var(--dark);
}

div {
    box-sizing: border-box;
}

body, main, header, footer {
    max-width: 100%;
    overflow-x: hidden;
}

#loading {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--bright);
    text-align: center;
    z-index: 10000;
    padding: 1rem;
    box-sizing: border-box;
    align-items: center;
}

#loading .img {
    max-width: 300px;
    width: 60%;
}

.aspect-img {
    position: relative;
}

.aspect-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.embed-container, .aspect-ratio {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.aspect-16x9, .embed-container {
    padding-bottom: 56.25%;
}

.embed-container iframe, .embed-container object, .embed-container embed, .aspect-ratio>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body.pc:not(.loaded) #loading {
    display: flex;
}

.load-imgs {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    z-index: -1
}

/*
    body::-webkit-scrollbar {
        width: 0.3vw;
    }
    
    body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }
    
    body::-webkit-scrollbar-thumb {
      background-color: darkgrey;
      outline: 1px solid slategrey;
    }
     */

@media screen and (min-width: 1201px) {
    .pc-hide {
        display: none !important;
    }
}

.flex-space {
    flex: 1;
}

h1 {
    text-transform: uppercase;
    font-size: 5.41em;
    font-weight: bold;
}

h1.year {
    font-size: 9.16em;
}

h1.big-year {
    font-size: 33.33em;
}

h2 {
    font-weight: 900;
    font-size: 1.5em;
}

h2.year {
    font-size: 9.16em;
}

h2.date {
    font-size: 4.16em;
}

h2.date .year {
    font-size: 2.2em;
}

.year.year1 {
    margin-left: -0.1em;
}

.year.year-medium {
    font-size: 25em;
    width: max-content;
    transform: translate(-2%, 0%);
}

.content-img {
    margin: 1.2rem -0.1rem 0.8rem;
}

.wrap {
    padding: 0 1.5rem;
}

.descr {
    font-size: 1.33em;
}

.stroke, .year-medium {
    text-shadow: -2px -2px 0 var(--dark-1), 2px -2px 0 var(--dark-1), -2px 2px 0 var(--dark-1), 2px 2px 0 var(--dark-1);
    color: var(--bright);
}

.row {
    display: flex;
    flex-flow: row;
}

.col {
    flex: 1;
}

.back-img, .b-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    display: flex;
    justify-content: center;
}

.block-2 {
    background: var(--bright);
}

.block-2.bright {
    color: var(--bright);
    background: var(--dark-1);
}

.block-2 .content {
    width: 49.2em;
    margin: auto;
    position: relative;
    z-index: 10;
}

.block-2 .content-content {
    max-width: 35em;
}

.full-content .descr {
    padding-bottom: 3rem;
}

.full-content .content {
    padding-top: 3rem;
}

.block-2 .content h2 {
    margin-bottom: 1rem;
}

.block-2 .content .descr {
    line-height: 1.4;
    max-width: 37em;
}

.flex-center {
    display: flex;
    justify-content: center;
    flex-flow: column;
}

.b-content {
    background: rgba(0, 0, 0, 0.4);
}

/* Header */

#header {
    padding: 4vh 0;
    box-sizing: content-box;
    display: flex;
    align-items: center;
}

#label {
    font-weight: bold;
    color: var(--dark-1);
    line-height: 100%;
    flex: 1;
    margin: 0 0.7em;
    font-size: 50px;
    line-height: 1.3;
    text-align: center;
    white-space: pre-wrap;
}

#toggleMenu {
    display: none;
}

#menu-header {
    display: none;
}

#logo {
    box-sizing: border-box;
    width: 25%;
    display: flex;
    margin-right: 2vw;
    position: relative;
    padding-right: 2em;
    background: var(--color-1);
    clip-path: polygon(0 0, 100% 0, calc(100% - 1.5em) 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 1.5em) 100%, 0% 100%);
}

#logo img {
    width: 100%;
    height: auto;
}

#logo>.inner {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 1.5rem 0;
    box-sizing: border-box;
}

#logo a {
    flex: 1;
    padding: .7rem 0;
    height: 100%;
    box-sizing: border-box;
}

#urfu-logo {
    margin: 0 2rem;
    max-width: 70%;
    margin-left: auto;
}

img#logo-angle {
    height: 100%;
    width: auto;
    user-select: none;
}

.partners {
    color: var(--bright);
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 31em;
    gap: 3em;
    font-size: 12px;
    max-width: 100%;
    line-height: 1.4;
}

#header .partners {
    margin-left: auto;
    margin-right: var(--wrap-padding);
}

.partners>div {
    display: flex;
    flex-flow: column;
}

.partners span {
    margin-bottom: 1rem;
}

#strat-partner span {
    margin-bottom: .5rem;
}

.partners .logo {
    max-width: 70%;
    display: block;
    margin: auto 0 1rem;
}

#menu .partners {
    margin-top: 5rem;
    padding: 0 var(--wrap-padding);
}


/* Navigation */

#menu {
    font-size: 12px;
    display: block;
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    z-index: 50;
    top: 0;
}

#menu ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

#main-menu {
    border-top: 7px solid var(--bright);
    border-bottom: 7px solid var(--bright);
    margin-bottom: 2vh;
}

#menu li {
    padding: 0.8em 2em;
    margin: 0 0.7em;
    text-transform: uppercase;
    color: var(--dark);
}

#menu.bright #main-menu {
    border-color: var(--bright);
}

#menu.bright li {
    color: var(--bright);
}

ul#years-menu {
    padding: 0 var(--wrap-padding);
    justify-content: space-between;
}

#years-menu li {
    white-space: nowrap;
    text-align: center;
    padding: 0.8em 0;
    font-weight: 200;
    margin: 1em 1em;
}

#menu li.active {
    font-weight: bold;
}

#menu li a {
    color: inherit;
    text-decoration: none;
}

#main-menu {
    font-size: 1.11em;
    position: relative;
}

@media screen and (max-width: 1400px) and (min-width: 1201px) {
    #main-menu {
        font-size: 0.9em;
    }
}

#main-menu ul {
    padding: 0 var(--wrap-padding);
    margin: auto;
    
    letter-spacing: 0.2em;
    position: relative;
}

li#lang-choice {
    position: absolute;
    right: var(--wrap-padding);
    padding-right: 0;
    color: var(--bright);
    font-weight: 300;
    letter-spacing: 0;
    top: 0;
}

#lang-choice a {
    display: inline-block;
    font-weight: 300;
    margin-left: 0.5rem;
}

#lang-choice a.active {
    font-weight: bold;
}

@media screen and (max-width: 1200px) {
    #toggleMenu {
        display: block;
    }
    #header {
        margin-top: 1rem;
    }
    a#skb-logo {
        display: none;
    }
    #logo {
        width: 37%;
        height: 55px;
    }
    #urfu-logo {
        margin-right: 0;
        margin-left: 0.8rem;
        max-width: 100%;
    }
    #logo>.inner {
        display: flex;
        flex-flow: row;
        align-items: center;
        height: auto;
        padding: 0;
    }
    #openMenu, #closeMenu {
        margin-left: auto;
        margin-right: 5vw;
        height: 1.5rem;
        z-index: 11;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center;
    }
    #menu-header {
        display: flex;
        flex-flow: row;
        height: 64px;
        align-items: center;
    }
    #openMenu {
        background-image: url(../imgs/menu-toggle.svg);
        width: 1.7rem;
    }
    #closeMenu {
        background-image: url(../imgs/close.svg);
        width: 1.3rem;
    }
    #menu {
        display: none;
        background: var(--dark);
        position: fixed;
        z-index: 300;
        width: 100%;
        top: 0;
        padding-top: 1rem;
        padding-bottom: 3vh;
        height: auto;
    }
    #header {
        top: 0;
        position: absolute;
        z-index: 200;
        width: 100%;
        padding: 0;
        height: 64px;
    }
}


/* Blocks */

.year {
    font-size: 3.15em;
    line-height: 90%;
}

.screen {
    overflow: hidden;
    min-height: 100vh;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.screen2 {
    min-height: 62.5vw;
}

.main {
    position: relative;
}

/* First screen */

#first-screen {
    text-align: center;
    padding-top: 2.7em;
    color: var(--dark);
}

#first-screen h1 {
    color: var(--bright);
    margin-bottom: 1.2vh;
}

#first-screen h2 {
    margin-bottom: 0.5em;
}

#down-arrow {
    margin-top: 2.3em;
    display: inline-block;
    width: 3em;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

#u-titles {
    margin: 2rem 1.4rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.u-title {
    position: relative;
    width: 7.5em;
    margin: 0 0.6rem 1rem;
}

.u-title:last-child {
    margin-right: 0;
}

.u-s-title {
    color: var(--bright);
    background: transparent;
    padding: 0.5em 0;
    border: 2px solid var(--bright);
    border-radius: 10em;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 200ms;
}

.u-year {
    font-size: 1.5em;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.15);
}

.u-f-title {
    opacity: 0;
    display: none;
    transition: opacity 200ms;
    cursor: default;
    position: absolute;
    top: 2.5rem;
    background: #B8B8B8;
    color: var(--bright);
    padding: 0.7em 1em;
    z-index: 100;
    font-size: 0.75em;
    left: 1.6rem;
    border-radius: 0.5em;
    text-align: right;
    width: max-content;
}

.u-s-title:hover+.u-f-title {
    opacity: 1;
    display: block;
}

.u-s-title:hover {
    background: var(--bright);
    color: rgba(0, 0, 0, 0.15);
}

.u-title:nth-child(n+5) .u-f-title {
    left: auto;
    right: 1.6rem;
}

/* 1920s */

#y-1920 {
    display: flex;
    flex-flow: column;
    align-items: center;
    color: var(--bright);
    padding-top: 4.5em;
}

#y-1920 .content {
    color: var(--dark);
    text-align: center;
    position: absolute;
    bottom: 2%;
}

#y-1920 h2 {
    color: var(--second-color);
}

#y-1920 h1 {
    position: absolute;
    bottom: 60%;
    color: var(--second-color);
}

#machine {
    position: absolute;
    bottom: 0;
    height: 80%;
    text-align: center;
}

/* 1920s */

#y-1920-1 {
    width: 100%;
    background: var(--bright);
}

#y-1920-1 .content {
    overflow: hidden;
}

#y-1920-1 .descr {
    text-align: center;
}

@media screen and (min-width: 1201px) {
    #y-1920-1 .descr {
        position: absolute;
        width: 100%;
        bottom: 2rem;
    }
}


#y-1920-1 img {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    object-fit: contain;
}

@media screen and (max-width: 1200px) {
    #y-1920-1 .descr {
        margin-top: -2em;
    }
}

#y-1920-2 {
    display: flex;
    flex-flow: column;
    text-align: center;
    background: var(--primary-color);
    color: var(--bright);
    padding-top: 6em;
}

#y-1920-2 .descr {
    margin: 1em auto 0;
    max-width: 32em;
}

#classesRow {
    flex: 1;
    margin-top: 2em;
}

#classPhoto {
    position: absolute;
    right: 50%;
    bottom: 0;
    width: 50%;
    height: 50%;
}

#classPhoto .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#ints {
    box-sizing: border-box;
    padding-left: 2em;
    background: white;
    color: var(--dark);
    display: flex;
    font-size: 3em;
    align-items: flex-start;
    line-height: 1.8em;
    font-weight: normal;
    justify-content: center;
    flex-flow: column;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
}

/* 1929 */

#y-1920-3 {
    color: var(--bright);
    padding: 0;
}

#bi-1929 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

#b-1929 {
    position: absolute;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
}

#y-1920-3 .year {
    font-weight: 900;
    position: absolute;
    left: 50%;
    bottom: 37%;
}

#y-1920-3 .descr {
    position: absolute;
    left: 50%;
    top: 65%;
    width: 40%;
}

/* 1930-1940 */

#y-1930 {
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    background: var(--primary-color);
    color: var(--bright);
    text-align: center;
    position: relative;
    margin-bottom: -1px;
}

#y-1930 .row {
    flex: 1;
    justify-content: justify;
}

#y-1930 h2, #y-1930 .descr {
    position: absolute;
    width: 100%;
}

#y-1930 h2 {
    bottom: 25vh;
}

#y-1930 .descr {
    top: calc(100% - 25vh);
}

#y-1930 .content {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    max-width: 22em;
    top: 0;
    padding: 2em 2em;
}

#y-1934 {
    z-index: 10;
}

#y-1930 .photo {
    position: absolute;
    width: auto;
    height: 90%;
    z-index: 0;
    bottom: -1px;
}

#y-1934 .content {
    right: auto;
}

#y-1936 .content {
    right: 9vh;
    max-width: 25em;
    left: auto;
}

#y-1934 .photo {
    right: auto;
    left: 0;
}

#y-1936 .photo {
    left: auto;
    right: 0;
}

/* 1940s */

#y-1940 {
    color: var(--bright);
    padding: 5em;
    background: var(--dark);
}

#y-1940 .descr {
    font-weight: 300;
}

.year1940_h {
    z-index: 4;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    color: var(--primary-color);
    text-align: center;
    overflow: hidden;
}

#y-1940 h3 {
    font-size: 2em;
    font-weight: bold;
}

.table p {
    font-weight: 300;
}

.table .col {
    z-index: 5;
    margin: 2em;
}

.table img {
    margin-top: 0.5em;
}

.table .row {
    justify-content: space-between;
    margin-top: 5em;
}

.table .row.nm {
    margin-top: 0;
}

.table {
    margin: auto;
    max-width: 69em;
    text-align: left;
}

#block1, #block2 {
    z-index: 3;
}

#block10 {
    z-index: 10;
}

#block12 .inner {
    margin-right: -2em;
}

#block2 {
    z-index: 10;
    padding-top: 6em;
}

#block3 {
    padding-top: 4em;
}

.col.pd10 {
    padding-top: 10em;
}

#row1940.row {
    margin-top: 0;
}

#row1945-1.row {
    margin-top: -5em;
}

#victory {
    position: absolute;
    z-index: 0;
    left: 0;
    width: 100%;
    margin-top: -10vw;
}

/* 1952 */

#y-1952 {
    color: var(--bright);
    padding: 0;
}

#bi-1952 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

#b-1952 {
    position: absolute;
    z-index: 2;
    background: var(--orange-grad);
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}

#y-1952 .year {
    position: absolute;
    left: 10%;
    bottom: 27%;
}

#y-1952 .descr {
    position: absolute;
    max-width: 25em;
    left: 10%;
    top: 75%;
    width: 40%;
}

/* 1956 */

#y-1956 {
    background: var(--bright);
    color: var(--dark);
    display: flex;
    align-items: center;
    flex-flow: row;
}

#bi-1956 {
    position: absolute;
    width: 65%;
    height: 83%;
    left: 0;
    object-fit: cover;
}

#y-1956 .year {
    position: absolute;
    bottom: 58%;
    text-align: center;
}

#y-1956 .descr {
    position: absolute;
    text-align: center;
    max-width: 16.4em;
    top: 45%;
    width: 100%;
}

#b-1956 {
    width: 35%;
    position: absolute;
    padding: 1em;
    box-sizing: border-box;
    right: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    height: 100%;
}

/* 1956-2 */

#y-1956-2 {
    background: var(--dark-1);
    color: var(--bright);
}

#y-1956-2 .row {
    position: absolute;
    height: 100%;
    padding-left: 5%;
    padding-right: 2%;
    box-sizing: border-box;
    align-items: stretch;
    width: 100%;
}

#y-1956-2 .col {
    flex: auto;
    position: relative;
}

#y-1956-2-1 {
    width: 50%;
    max-width: 33em;
    margin-right: 5%;
}

#y-1956-2-2 {
    max-width: 30em;
    width: 45%;
    margin-left: auto;
}

.ints b {
    font-size: 2.25em;
    font-weight: 900;
    margin-right: 0.5rem;
}

#y-1956-2 .ints {
    padding-top: 0.5em;
}

#y-1956-2 .year, #y-1956-2 .m-descr, #y-1956-2 .ints {
    position: absolute;
}

#y-1956-2-1 .year {
    bottom: 70%;
}

#y-1956-2-1 .m-descr {
    top: 30%;
}

#y-1956-2-1 .ints {
    top: calc(30% + 9em);
}

#y-1956-2-2 .year {
    bottom: 40%;
}

#y-1956-2-2 .m-descr {
    top: 60%;
}

#y-1956-2-2 .ints {
    top: calc(60% + 5em);
}

/* 1959 */

#y-1959 {
    color: var(--bright);
    padding: 0;
}

#bi-1959 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

#b-1959 {
    position: absolute;
    z-index: 2;
    background: var(--orange-grad);
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

#y-1959 .date, #y-1959 .descr {
    position: absolute;
}

#y-1959 .content {
    position: absolute;
    height: 100%;
    top: 0;
    max-width: 40em;
    width: 100%;
}

#y-1959 .date {
    bottom: 20%;
}

#y-1959 .descr {
    top: 83%;
    width: 30em;
}

/* 1961 */

#y-1961 {
    color: var(--bright);
    display: flex;
    flex-flow: row;
    align-items: stretch;
    height: 100vh;
}

#bi-1961 {
    width: 67.5vh;
    height: 100vh;
    margin-right: 5%;
    display: block;
    max-width: 40vw;
    transform: translate(0, 0);
}

#b-1961 {
    margin-left: auto;
    margin-right: auto;
    height: auto;
    position: relative;
    width: 35em;
}

#y-1961 h2, #y-1961 .descr {
    position: absolute;
    width: 100%;
}

#y-1961 h2 {
    bottom: 65%;
}

#y-1961 .descr {
    top: 37%;
}

#y-1961 .tw-label {
    margin: 3em 0 1em;
}

#y-1961 .tw-text {
    font-weight: bold;
}

/* 1965 */

#y-1965 {
    background: var(--bright);
    color: var(--dark);
    display: flex;
    align-items: center;
    flex-flow: row;
    height: 100vh;
}

#y-1965 .img {
    width: 65%;
    height: 83%;
    display: block;
    object-fit: cover;
}

#y-1965 .year {
    position: absolute;
    bottom: 58%;
    text-align: center;
}

#y-1965 .descr {
    position: absolute;
    text-align: center;
    max-width: 16.4em;
    top: 45%;
    width: 100%;
}

#y-1965 .content {
    width: 35%;
    height: 100%;
    position: relative;
    padding: 1em;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    align-items: center;
}

/* 1966 */

#y-1966 {
    height: 100vh;
}

#y-1966 .img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#y-1966 .b-content {
    background: rgba(0, 0, 0, 0.4);
    color: var(--bright);
}

#y-1966 .content {
    position: absolute;
    right: 10%;
    height: 100%;
    top: 0;
    width: 35em;
}

#y-1966 .date {
    position: absolute;
    bottom: 30%;
}

#y-1966 .descr {
    position: absolute;
    top: 70%;
    margin-top: 2em;
    max-width: 20em;
}

/* 1969 */

#y-1969 {
    height: 100vh;
}

#y-1969 .img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#y-1969 .b-content {
    background: rgba(0, 0, 0, 0.4);
    color: var(--bright);
}

#y-1969 .year {
    position: absolute;
    right: 50%;
    margin-right: 1rem;
    top: 35%;
}

#y-1969 .content {
    position: absolute;
    top: 35%;
    height: 65%;
    width: 65%;
    left: 50%;
}

#y-1969 .head, #y-1969 .descr {
    position: absolute;
    margin-left: 1rem;
}

#y-1969 .head {
    font-weight: bold;
    font-size: 2em;
    width: 13em;
}

#y-1969 .descr {
    margin-top: 6em;
    max-width: 20em;
}

/* 1974 */

#y-1974 {
    color: var(--bright);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100vh;
}

#y-1974 .year, #y-1974 .date, #y-1974 .descr, #y-1974 .img {
    position: absolute;
}

#gorkyi {
    width: auto;
    height: 80%;
    object-position: bottom;
}

#y-1974 .year {
    bottom: 7%;
}

#y-1974 .date, #y-1974 .descr {
    left: 10%;
}

#y-1974 .date {
    bottom: 80%;
}

#y-1974 .descr {
    top: 20%;
    max-width: 22em;
}

/* 1976 */

#y-1976 {
    display: flex;
    justify-content: center;
    text-align: center;
    background: var(--bright);
}

#y-1976 .img, #y-1976 .year, #y-1976 .descr {
    position: absolute;
}

#y-1976 .year {
    color: var(--bright);
    bottom: 21%;
}

#y-1976 .descr {
    top: 83%;
    max-width: 25em;
}

#y-1976 .img {
    height: 80%;
}

/* 1984 */

#y-1984 {
    color: var(--bright);
}

#y-1984 .img, #y-1984 .img-fore, #y-1984 .date, #y-1984 .descr {
    position: absolute;
}

#y-1984 .img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

#y-1984 .img-fore {
    width: 100%;
    height: 100%;
    background: var(--primary-color);
}

#y-1984 .date {
    left: 50%;
    bottom: 15%;
}

#y-1984 .descr {
    left: 50%;
    top: 85%;
}

/* 1986 */

#y-1986 {
    height: 100vh;
}

#y-1986 .img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#y-1986 .year, #y-1986 .descr {
    position: absolute;
}

#y-1986 .b-content {
    background: rgba(0, 0, 0, 0.35);
    color: var(--bright);
}

#y-1986 .year {
    left: 10%;
    bottom: 30%;
}

#y-1986 .descr {
    left: 10%;
    top: 70%;
    max-width: 25em;
}

/* 1988 */

#y-1988 {
    background: var(--bright-1);
    text-align: center;
    display: flex;
    justify-content: center;
}

#y-1988 .img, #y-1988 .year, #y-1988 .descr {
    position: absolute;
}

#y-1988 .year {
    color: var(--bright);
    bottom: 20%;
    line-height: 0.73;
}

#y-1988 .descr {
    top: 85%;
    max-width: 30em;
}

#y-1988 .img {
    bottom: 20%;
    height: 50vh;
    width: auto;
    max-width: max-content;
    object-position: right;
    left: -430vh;
}

/* 1997 */

#y-1997 {
    background: #2A2A54;
    color: var(--bright);
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

#y-1997 .descr, #y-1997 .year, #y-1997 .img {
    position: absolute;
}

#y-1997 .descr {
    max-width: 25em;
    top: 40%;
}

#y-1997 .year {
    bottom: 60%;
}

#y-1997 .img {
    bottom: 0;
    width: 100%;
    height: 50%;
}

/* 2000 */

/* 2004 */

#y-2004 {
    background: var(--bright);
    box-sizing: border-box;
}

#y-2004 .content {
    margin-top: 3%;
}

#y-2004 .img1, #y-2004 .img2 {
    z-index: 0;
    position: absolute;
}

#y-2004 .img1, #y-2004 .img2 {
    width: 100%;
    height: auto;
}

#y-2004 .img1 {
    bottom: 20%;
    width: 106%;
    max-width: max-content;
    left: -3%;
}

#y-2004 .img2 {
    bottom: 0;
}

/* 2006 */

#y-2006 {
    min-height: 150vh;
}

#y-2006 .img1, #y-2006 .img2 {
    position: absolute;
}

#y-2006 .content {
    margin-top: 5%;
}

#y-2006 .descr {
    max-width: 22em;
}

#y-2006 .img1 {
    width: 104%;
    max-width: max-content;
    left: -2%;
    height: auto;
    bottom: 20%;
}

#y-2006 .img2 {
    height: 130%;
    width: auto;
    right: 0;
    top: -15%;
    max-height: max-content;
}

/* 2009 */

#y-2009 .img-block {
    position: relative;
    align-items: center;
}

#y-2009 .content {
    position: absolute;
}

#y-2009 .descr {
    line-height: 1.4;
}

.block-2 h3 {
    font-size: 2.66em;
    color: var(--dark-1);
    line-height: 1.03;
    font-weight: bold;
    margin-bottom: 0.8rem;
}

.block-2.bright h3 {
    color: inherit;
}

/* 2010 */

#y-2010 .img {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0;
    z-index: 50;
}

#y-2010 .content {
    margin-top: 12%;
}

/* 2011-1 */

@media screen and (min-width: 1201px) {
    #y-2011-1 {
        text-align: center;
    }
    #y-2011-1 .img {
        object-fit: contain;
    }
    #institutes path {
        transition: all 200ms;
        opacity: 0;
    }
}

@media screen and (max-width: 1200px) {
    #y-2011-1 .img {
        display: none;
    }
    #y-2011-1 {
        padding-top: 3rem;
    }
}

/* 2011 */

#y-2011 .content {
    margin-top: 6%;
    margin-bottom: 3rem;
}

#y-2011 .img {
    width: 100%;
}

#y-2011 h3 {
    margin-bottom: 1.4rem;
}

/* 2012 */

#y-2012 .img {
    object-fit: contain;
}

#y-2012 .content {
    max-width: 37em;
}

#y-2012 .date {
    margin-bottom: 1rem;
}

/* 2012-1 */

#y-2012-endy {
    position: relative;
}

.full-content .btn {
    margin: 0;
}

#y-2012-endy .descr {
    padding-bottom: 1rem;
}

#y-2012-endy .img {
    position: absolute;
    bottom: 0;
    max-width: 23.125%;
    left: 74.58%;
}

@media screen and (max-width: 1200px) {
    #y-2012-endy {
        margin-bottom: 2rem;
    }
}

#y-2012-2 {
    padding: 3rem 0;
}

@media screen and (max-width: 1200px) {
    #y-2012-2 .content {
        flex: 1;
    }

    #y-2012-2 .m-content {
        margin-top: auto;
    }
}

/* 2013 */

#y-2013-back {
    padding-top: 3rem;
}

#y-2013-0 .btn {
    margin-left: 0;
}

#y-2013-0 {
    overflow: hidden;
}

#y-2013-0 .img {
    width: auto;
    position: absolute;
    height: 8vh;
    max-width: max-content;
}

#y-2013-0 .img1 {
    top: 0;
    right: 0;
    object-position: right;
}

#y-2013-0 .img2 {
    left: 0;
    bottom: 0;
    object-position: left;
}

#y-2013-0 {
    padding: 8vh 0;
}

#y-2013-0 .content {
    padding: 1rem 0;
    position: static;
}

#y-2013 .text2 {
    left: 33%;
    max-width: 33em;
    position: absolute;
    width: 100%;
}

#y-2013 .img {
    margin-top: -2vw;
    width: 100%;
}

@media screen and (max-width: 1200px) {
    #y-2013-0 {
        padding: 4rem 0 0;
    }
    #y-2013-0 .year {
        position: absolute;
        top: 1rem;
    }
    #y-2013-0 .img {
        height: 5vh;
    }
    #y-2013-0 .m-content {
        padding: calc(5vh + 3rem) 0;
        position: relative;
    }
}

/* 2014 */

#y-2014 {
    padding-top: 5rem;
}

#y-2014 .img1 {
    position: relative;
    z-index: 10;
}

#y-2014 .img1, #y-2014 .img2 {
    width: 100%;
}

#y-2014 .img3 {
    display: none;
}

#y-2014 .img2 {
    transform-origin: 50% 100%;
}

/* 2016 */

#y-2016-1 .full-content .content {
    padding-top: 6rem;
}

#y-2016-met {
    margin: 4rem auto;
}

#y-2016-met .img {
    margin-bottom: -7.5vw;
}

#y-2016-mend .img {
    position: absolute;
    height: 150%;
    max-height: max-content;
    top: -3rem;
    left: 100%;
    margin-left: 1rem;
}

#y-2016-mend .descr {
    max-width: 31em;
    position: relative;
}

#y-2016-mend {
    margin-bottom: 4rem;
}

#y-2016-iypt {
    min-height: 34vw;
    padding-top: 10vw;
}

#y-2016-iypt .img {
    object-fit: contain;
}

#virtual-block {
    position: relative;
}

#virtual-go {
    position: absolute;
    bottom: 5%;
    left: 53%;
    z-index: 50;
    color: #444444;
    text-decoration: none;
    max-width: 10em;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 2rem;
}

#virtual-go img {
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.5rem;
}

#students {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    color: var(--bright);
}

#students>div {
    width: 25%;
    position: relative;
    transition: width 200ms;
    display: flex;
    align-items: center;
}

#students>div {
    cursor: pointer;
}

#students img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

#students>div:hover, #students>div.active {
    width: 50%;
    flex: none;
}

#students .descr {
    position: absolute;
    width: max-content;
    left: 2rem;
    opacity: 0;
    transition: all 200ms;
}

#students .descr h3 {
    font-size: 2em;
    font-weight: 900;
}

#students .back {
    position: absolute;
    content: ' ';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    background-repeat: no-repeat;
    transition: all 200ms;
    background-size: 100%;
}

#students:hover .back, #students>div.active .back {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
}

#students>div:hover .descr, #students>div.active .descr {
    opacity: 1;
}

#students>div:hover .back, #students>div.active .back {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%);
}

/* 2017 */

#y-2017 .img {
    position: absolute;
}

#y-2017 .ints {
    margin-top: 1rem;
}

#y-2017-1 {
    position: relative;
    padding-bottom: 3rem;
}

#y-2017 .img {
    right: 0;
    height: 100%;
    width: auto;
    transform: scale(1.2);
    object-position: right center;
}

/* 2019-1 */

#y-2019-1 .date, #y-2019-1 .m-content {
    position: absolute;
}

#y-2019-1 .b-content {
    color: var(--bright);
    background: rgba(0, 0, 0, 0.4);
}

#y-2019-1 .date, #y-2019-1 .m-content {
    left: 10%;
}

#y-2019-1 .date {
    bottom: 65%;
}

#y-2019-1 .m-content {
    top: 35%;
}

#y-2019-1 .descr {
    max-width: 24em;
}

#y-2019-1 .btn {
    margin: 0.6rem 0;
}

#y-2019 .year {
    margin-bottom: 2rem;
}

#y-2019 {
    padding-bottom: 5rem;
}

#y-2019-1-1 .content {
    margin: 4rem auto;
}

#y-2019-1-1 .media-content {
    margin: 0 auto;
}

@media screen and (min-width: 1201px) {
    #y-2019-1-1 .content+.media-content {
        margin-top: -2rem;
    }
}

@media screen and (max-width: 1200px) {
    #y-2019-1-1 .content {
        margin: 2rem auto;
    }
    #y-2019-1-1 .media-content {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    #y-2019-1-1 .content+.media-content {
        margin-top: -1rem;
    }
    #y-2019 {
        padding-bottom: 3rem;
    }
}

/* 2019 ints */
#y-2019-ints {
    position: relative;
}

#y-2019-ints .img {
    position: absolute;
    top: 0;
    max-height: max-content;
}

#y-2019-ints .img1 {
    width: 13.56vw;
    left: 0;
}

#y-2019-ints .img2 {
    width: 13.34vw;
    right: 0;
}

@media screen and (max-width: 1200px) {
    #y-2019-ints .img {
        display: none;
    }
}

/* 2020 */

#y-2020 {
    background: var(--bright);
}

#y-2020 h2 {
    top: 70%;
    margin-top: 2rem;
    color: #6D6D6D;
    text-transform: uppercase;
    font-size: 5.83em;
}

/* 2020-1 */

#y-2020-1 {
    background: var(--bright);
}

#y-2020-1 .img1 {
    height: auto;
    top: 0;
    max-height: max-content;
    z-index: 0;
}

#y-2020-1 .img2 {
    position: relative;
    max-width: 67%;
}

#y-2020-1 .descr {
    margin-left: 26%;
    margin-right: 10%;
    max-width: 38em;
    margin-bottom: 3rem;
}

#y-2020-1 h2 {
    margin-left: 18%;
    font-size: 6em;
    color: var(--blue);
    font-weight: bold;
    line-height: 0.8;
    margin-top: -0.5em;
    margin-bottom: 2rem;
    position: relative;
}

/* now */

.now-group {
    background: var(--blue);
    color: var(--bright);
    position: relative;
}

#now-1-back {
    object-fit: scale-down;
}

#now .img1 {
    width: 100%;
}

#now .img2 {
    width: 79%;
    height: 26.59vw;
    object-position: top;
    display: block;
    margin: -15vw auto 0;
    position: relative;
}

.now-ints {
    display: flex;
    justify-content: center;
}

.now-ints .big-int {
    font-size: 5em;
    position: absolute;
    margin: 0 0.2em;
    bottom: 100%;
    display: flex;
    flex-flow: column;
    transform: translate(0%, 50%) rotate(-90deg);
    bottom: 45%;
    height: 5em;
    right: 50%;
}

.now-ints .big-int div {
    font-size: 1.9em;
    line-height: 0.7;
}

.now-ints .ints {
    position: absolute;
    top: 0;
    height: 100%;
    width: 60%;
}

.now-ints .int-block {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    font-size: 2.25em;
    display: flex;
    flex-flow: row;
}

.now-ints .int-block .int {
    font-size: 2.25em;
}

.now-ints .int-block .text {
    font-weight: 300;
    max-width: 10em;
    position: absolute;
}

.now-ints .int-block .label {
    max-width: 13em;
}

.now-ints .int-block .int-content {
    margin-top: 0.2em;
    margin-left: 0.5em;
    flex: 1;
    height: 100%;
    line-height: 100%;
}

.now-ints .int-block .int, .now-ints .int-block .label {
    font-weight: 900;
}

/* now-1 */

#now-1 .big-int {
    text-align: center;
    justify-content: flex-start;
}

#now-1 .ints {
    left: 40%;
}

#now-1-1 {
    top: 25%;
}

#now-1-2 {
    top: 45%;
}

#now-1-3 {
    top: 65%;
}

/* now-2 */

#now-2 .ints {
    right: 40%;
    width: 50%;
}

#now-2 .big-int {
    transform: translate(0%, 50%) rotate(-90deg);
    height: 5.5em;
    right: auto;
    left: 55%;
}

#now-2 .big-int span {
    font-size: 0.9em;
}

#now-2 .int-block .int, #now-2 .int-block .int-content {
    position: absolute;
}

#now-2 .int-block .int {
    right: 60%;
}

#now-2 .int-block .int-content {
    left: 40%;
}

#now-2-1 {
    top: 25%;
}

#now-2-2 {
    top: 40%;
}

#now-2-3 {
    top: 55%;
}

#now-2-4 {
    top: 70%;
}

/* now-3 */

#now-3 {
    display: flex;
    align-items: center;
    background: var(--bright);
    color: var(--blue)
}

#now-3 .img, #now-3 .int-block {
    position: absolute;
}

#now-3 .img {
    max-width: max-content;
    height: 9%;
    width: auto;
}

#now-3 .int-block {
    width: 100%;
}

#now-3 .int-block .int {
    right: 55%;
    position: absolute;
}

#now-3 .int-block .int-content {
    left: 45%;
    position: absolute;
}

#now-3-1 {
    top: 30%;
    height: 70%;
}

#now-3-2 {
    top: 50%;
    height: 50%;
}

#countries-1 {
    top: 7%;
    left: 0;
    object-position: left;
}

#countries-2 {
    top: 17%;
    object-position: right;
    right: 0;
}

#countries-3 {
    bottom: 17%;
    left: 0;
    object-position: left;
}

#countries-4 {
    bottom: 7%;
    object-position: right;
    right: 0;
}

/* now-4 */

.btn {
    color: var(--dark);
    text-decoration: none;
    padding: 0.8em 2em;
    border: 1.5px solid var(--dark);
    border-radius: 1.5em;
    display: block;
    width: max-content;
    min-width: 8em;
    text-align: center;
    margin: 1.5em auto 0;
    transition: all 100ms;
}

.btn.left {
    margin: 1.5em 0 0;
}

.btn.bright {
    color: var(--bright);
    border-color: var(--bright);
}

.now-group .btn.bright:hover {
    color: var(--blue);
    background: var(--bright);
}

#now-4 .btn {
    position: absolute;
    top: 84%;
}


#now-4 .int-block .text {
    max-width: 14em;
    line-height: 100%;
    top: auto;
    margin-top: .2em;
}

#now-4 .int-block {
    width: 100%;
}

#now-4 .int-block .int {
    right: 60%;
    position: absolute;
}

#now-4 .int-block .int-content {
    left: 40%;
    position: absolute;
    width: 60%;
}


#now-4 .int-block .label {
    max-width: 20em;
}

#now-4-1 {
    top: 18%;
    height: 82%;
}

#now-4-2 {
    top: 41%;
    height: 59%;
}

#now-4-3 {
    top: 64%;
    height: 36%;
}

/* now-5 */

#now-5 {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    margin: 3rem auto;
    width: 70%;
    max-width: 65em;
}

#now-5 .card {
    display: block;
    color: inherit;
    text-decoration: none;
    border: 2px solid var(--bright);
    border-radius: 1rem;
    flex: 1;
    margin: 0 1em;
    box-sizing: border-box;
    transition: all 100ms;
    position: relative;
    z-index: 50;
}

.card-inner {
    padding-top: 128%;
}

.card-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    padding: 2rem;
    box-sizing: border-box;
}

#now-5 .card:hover {
    background: var(--bright);
    color: var(--blue);
}

#now-5 .card .label {
    text-align: center;
}

#now-5 .card h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 0.9em;
}

#now-5 .card .text {
    flex: 1;
    margin-bottom: 0.5em;
}

#now-5-3 h2 {
    max-width: 5em;
}

/* now-6 */

#now-6 h3 {
    position: absolute;
    font-size: 2.66em;
    font-weight: bold;
    width: 15em;
    left: calc(50% - 7.5em);
    text-align: center;
    bottom: 57%;
}

#now-6 .btn {
    margin-top: 3.6em;
    position: relative;
}

#now-6 {
    margin-top: -17vw;
    margin-bottom: -10vw;
}

#now-6-grad {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(180deg, rgba(255, 0, 20, 0) 0%, rgba(255, 0, 20, 0.8) 52.08%, rgba(255, 0, 20, 0) 100%);
    background-repeat: no-repeat;
    z-index: -1;
}

#now-6 .btn:hover+#now-6-grad {
    background-image: linear-gradient(180deg, rgba(255, 0, 20, 0) 0%, #FF0014 52.08%, rgba(255, 0, 20, 0) 100%);
}

/* Partners */
#partners {
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-bottom: 5vw;
    position: relative;
    z-index: 10;
    padding: 0 var(--wrap-padding);
}

#partners h3 {
    font-size: 2.66em;
    font-weight: bold;
    width: 15em;
    text-align: center;
    margin-bottom: 1em;
}

#partners .logos {
    margin: 3rem 0 3rem;
    display: grid;
    gap: 4vw 9vw;
    align-items: center;
}

.logos a {
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#strat-partners .logos {
    grid-template-columns: 1fr 1fr;
}

.logos img {
    width: 100%;
    height: auto;
}

#general-partner .logos {
    width: 16vw;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 769px) {
    #main-partners .logos {
        grid-template-columns: repeat(4, 1fr);
        padding: 0 5vw;
    }

    #strat-partners .logos {
        width: 33vw;
    }
}

@media screen and (max-width: 768px) {
    #partners .logos {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    #general-partner .logos {
        width: 30vw;
    }

    #main-partners .logos {
        grid-template-columns: repeat(3, 1fr);
    }

    #partners h3 {
        font-size: 1.77em;
        max-width: 15em;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

}

/* footer */

#footer {
    background: var(--blue);
    color: var(--bright);
    padding: 2em 0 5em;
    font-size: 16px;
}

#footer .wrap {
    padding: 0 var(--wrap-padding);
    display: flex;
    flex-flow: row;
}

#footer .col {
    flex: none;
    margin: 0 auto;
}

#footer .col:first-child {
    margin-left: 0;
}

#footer .col:last-child {
    margin-right: 0;
}

#footer a {
    display: block;
    color: inherit;
    text-decoration: none;
    line-height: 120%;
}

#footer-1 a, #footer-2 a, #footer-3 {
    font-weight: 100;
}

#footer-1 a {
    margin-top: 0.5em;
}

#footer .partners a {
    margin-top: auto;
}

#footer-2 a, #contacts, #footer-4 a {
    font-size: 0.75em;
}

#footer h2 {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 0.5em;
}

#footer-3 a {
    font-weight: bold;
    margin-bottom: 1.5em;
}

#footer-1 {
    margin-right: 4em;
    width: 18rem;
}

#footer-logo {
    margin-top: 0;
    margin-bottom: 2rem;
}

#footer .partners {
    margin-bottom: 1.5rem;
}

#contacts b {
    display: block;
    margin-top: 1em;
    font-weight: bold;
}

#footer-2 a {
    margin: 0.5em 0;
}

#footer-4 a {
    margin-top: 0.5em;
    padding: 0.5em;
    padding-left: calc(16px + 0.5rem);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px 16px;
}

a.vk {
    background-image: url(../imgs/icons/vk.png);
}

a.facebook {
    background-image: url(../imgs/icons/facebook.png);
}

a.instagram {
    background-image: url(../imgs/icons/instagram.png);
}

a.telegram {
    background-image: url(../imgs/icons/telegram.png);
}

a.youtube {
    background-image: url(../imgs/icons/youtube.png);
}

a.twitter {
    background-image: url(../imgs/icons/twitter.png);
}

.slider .owl-nav button.owl-prev, .slider .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    width: 1.7rem;
    height: 1.7rem;
    margin-top: -1rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.slider .owl-nav button.owl-prev {
    left: 1rem;
    background-image: url(../imgs/left.svg);
    background-position: left;
}

.slider .owl-nav button.owl-next {
    right: 1rem;
    background-image: url(../imgs/right.svg);
    background-position: right;
}

@media screen and (max-width: 1200px) {
    body {
        font-size: calc(0.8vw + 0.6vh);
        padding-top: calc(64px + 1rem);
    }
    #menu ul {
        background: none;
        align-items: flex-start;
        flex-flow: column;
    }
    #menu li {
        margin: 5px 0;
        padding: 1.3em var(--wrap-padding);
    }
    #main-menu {
        border: none;
    }
    #main-menu ul {
        padding: 0;
    }
    #menu li {
        color: var(--bright);
    }
    #menu li.active {
        color: #DAC3AD;
    }
    li#lang-choice {
        padding: 0;
    }
    #lang-choice a {
        margin-left: 0.5rem;
        padding: 1.3em 0.5rem;
    }
    #label {
        font-size: 20px;
        text-align: left;
        color: var(--dark);
    }
    main {
        font-size: 1.4em;
    }
    h1 {
        font-size: 3.61em;
    }
    h2.date {
        font-size: 3.7em;
    }
    ul#years-menu {
        display: none;
    }
    .u-s-title {
        border-width: 1px;
    }
    #u-titles {
        font-size: 0.66em;
    }
    #machine {
        position: relative;
        margin-top: 40%;
        height: auto;
        margin-bottom: -1.5rem;
    }
    #y-1920 .content {
        position: relative;
    }
    #y-1920-1 img {
        height: 100%;
    }
    #y-1920-2 {
        background: var(--bright);
        color: var(--dark);
    }
    #y-1920-2 .descr {
        padding: 0 1rem;
    }
    #classesRow {
        margin-top: 2rem;
    }
    #classPhoto {
        position: static;
        width: 100%;
        height: auto;
    }
    #ints {
        position: static;
        width: 100%;
        text-align: center;
        height: auto;
        display: block;
        padding: 1.5rem;
        font-size: 2.66em;
    }
    #ints>div {
        margin: 0.8rem 0;
    }
    #bi-1929 {
        object-position: 18% center;
    }
    #b-1929 {
        display: flex;
        justify-content: center;
    }
    #y-1920-3 .year, #y-1920-3 .descr {
        left: auto;
    }
    #y-1920-3 .descr {
        width: 100%;
        text-align: center;
        max-width: 25em;
    }
    #y-1930 .col {
        position: relative;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        left: auto;
        right: auto;
    }
    #y-1930 .row {
        flex-flow: column;
    }
    #y-1930 .photo {
        object-position: bottom;
    }
    #y-1930 .content {
        right: auto;
        left: auto;
    }
    #y-1930 h2, #y-1930 .descr {
        left: 0;
    }
    #y-1930 h2 {
        bottom: 80%;
    }
    #y-1930 .photo {
        width: 90%;
        height: 70%;
    }
    #y-1930 .descr {
        top: 20%;
        margin-top: 1rem;
    }
    .year1940_h {
        font-size: 5em;
        z-index: 0;
    }
    #y-1940 {
        padding: 0;
    }
    #y-1940 .table {
        margin: 0 1rem;
    }
    #y-1940 .row {
        flex-flow: column;
        margin: 0;
    }
    #y-1940 .col {
        margin: 1rem 0;
        padding: 0;
    }
    #y-1940 #block1 {
        padding-top: 5rem;
    }
    #y-1940 .col.empty {
        display: none;
    }
    #y-1940 .text {
        text-align: center;
        font-weight: 300;
        margin-left: auto;
        margin-right: auto;
        max-width: 22em;
    }
    .table p {
        font-weight: normal;
        font-size: 1.33em;
        max-width: 19em;
    }
    #block12 .inner {
        margin: 0;
    }
    #y-1940 #block12 {
        max-width: 24em;
    }
    #b-1952 {
        display: flex;
        justify-content: center;
    }
    #y-1952 .year, #y-1952 .descr {
        left: auto;
    }
    #y-1952 .descr {
        text-align: center;
        width: 100%;
    }
    #y-1956 {
        flex-flow: column-reverse;
        align-items: center;
    }
    #bi-1956 {
        height: 62.7%;
        width: 90%;
        left: auto;
    }
    #b-1956 {
        width: 100%;
        height: 100%;
    }
    #y-1956 .year {
        bottom: 80%;
        margin-bottom: 1rem;
    }
    #y-1956 .descr {
        top: 20%;
        max-width: 20em;
    }
    #y-1956-2 .row {
        position: relative;
        flex-flow: column;
    }
    #y-1956-2-1, #y-1956-2-2 {
        width: 100%;
    }
    #y-1956-2 .year, #y-1956-2 .m-descr, #y-1956-2 .ints {
        position: static;
    }
    #y-1956-2-2 {
        margin-left: 0;
        max-width: 33em;
    }
    #y-1956-2 .col {
        position: relative;
        flex: none;
    }
    #y-1956-2-2 {
        padding-top: 2rem;
    }
    #y-1956-2 .descr {
        margin-top: 0.5rem;
    }
    #y-1956-2 .b-content {
        position: relative;
        min-height: 100vh;
        padding: 2rem 0;
        box-sizing: border-box;
    }
    #bi-1959 {
        object-position: right;
    }
    #y-1959 .content {
        text-align: center;
        position: relative;
        display: flex;
        justify-content: center;
        max-width: 31em;
    }
    #y-1959 .descr {
        width: 100%;
    }
    #y-1961 {
        flex-flow: column-reverse;
    }
    #bi-1961 {
        height: 62.5%;
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
    }
    #y-1961 h2, #y-1961 .descr {
        position: static;
    }
    #y-1961 .tw-label, #y-1961 .tw-text {
        display: none;
    }
    #b-1961 {
        position: static;
        flex: 1;
        width: 90%;
        max-width: 30em;
        margin-top: 4rem;
    }
    #y-1961 .descr {
        margin-top: 0.8rem;
    }
    #y-1965 {
        flex-flow: column;
    }
    #y-1965 .img {
        height: 62.7%;
        bottom: 0;
        position: absolute;
        width: 90%;
        left: auto;
    }
    #y-1965 .content {
        width: 100%;
        height: 100%;
    }
    #y-1965 .year {
        bottom: 80%;
        margin-bottom: 1rem;
    }
    #y-1965 .descr {
        top: 20%;
        max-width: 20em;
    }
    #y-1966 .img {
        object-position: 20%;
    }
    #y-1966 .content {
        right: auto;
        left: auto;
        width: 29em;
    }
    #y-1969 .year, #y-1969 .head, #y-1969 .descr {
        width: 100%;
        left: auto;
        right: auto;
        margin: 0;
    }
    #y-1969 .b-content {
        flex-flow: column;
        align-items: center;
    }
    #y-1969 {
        text-align: center;
    }
    #y-1969 .descr {
        margin: 1.5rem 0;
        max-width: 21.3em;
        top: 6em;
    }
    #y-1969 .head {
        max-width: 16em;
        margin-top: 0.8rem;
        top: 0;
    }
    #y-1969 .year {
        bottom: 50%;
        top: auto;
    }
    #y-1969 .content {
        top: 50%;
        height: 50%;
        left: auto;
        right: auto;
    }
    h1.big-year {
        font-size: 17.5em;
    }
    .big-year.year1 {
        margin-left: -0.02em;
    }
    #y-1974 .date, #y-1974 .descr {
        left: auto;
        right: auto;
        text-align: center;
    }
    #y-1974 .content {
        display: flex;
        justify-content: center;
    }
    #y-1974 .descr {
        max-width: 16em;
    }
    #y-1974 .year {
        bottom: 40%;
    }
    #y-1974 .img {
        width: 80%;
    }
    #y-1976 .img {
        width: 90%;
        object-fit: cover;
    }
    #y-1976 .descr {
        max-width: 22em;
    }
    #y-1976 .year {
        bottom: 23%;
    }
    #y-1984 .date, #y-1984 .descr, #y-1984 .img {
        position: static;
    }
    #y-1984 .content {
        width: max-content;
        margin: 30% auto 20%;
    }
    #y-1984 {
        display: flex;
        flex-flow: column-reverse;
        justify-content: flex-end;
    }
    #y-1984 .img-fore {
        display: none;
    }
    #y-1986 .b-content {
        display: flex;
        justify-content: center;
        text-align: center;
    }
    #y-1986 .year, #y-1984 .descr {
        left: auto;
    }
    #y-1986 .descr {
        max-width: 22em;
        top: 30%;
        margin-top: 1rem;
    }
    #y-1986 .year {
        bottom: 70%;
    }
    #y-1988 .year {
        bottom: 65%;
    }
    #y-1988 .descr {
        top: 35%;
        margin-top: 2rem;
    }
    #y-1988 .img {
        height: 34.5%;
        bottom: 10%;
    }
    #y-1997 .descr, #y-1997 .year, #y-1997 .img {
        position: static;
    }
    #y-1997 .img {
        margin: 2rem 0;
    }
    .year.year-medium {
        font-size: 13em;
        margin-bottom: 1rem;
    }
    .block-2 .content, .block-2 .wrap {
        width: 90%;
        max-width: 32em;
    }
    #y-2000 {
        min-height: auto;
    }
    .block-2 {
        padding: 1rem 0;
    }
    #y-2004 {
        min-height: auto;
        padding-bottom: 50vw;
    }
    #y-2006 .img2 {
        display: none;
    }
    #y-2006 {
        min-height: auto;
        padding-bottom: 25vw;
    }
    #y-2006 .img1 {
        bottom: 0;
    }
    #y-2009 .content {
        position: static;
    }
    #y-2009 {
        min-height: auto;
    }
    #y-2009 .img {
        position: absolute;
    }
    #y-2010 .content {
        margin-top: 0;
    }
    #y-2010 {
        min-height: auto;
        padding-bottom: 0;
    }
    #y-2010 .img {
        position: static;
    }
    #y-2011 {
        min-height: auto;
        padding-bottom: 0;
    }
    #y-2012 {
        min-height: 100vh;
    }
    #y-2012 .img {
        object-fit: cover;
    }
    .btn {
        font-size: 1.33em;
    }
    .full-content .content {
        padding-top: 0;
    }
    .full-content .descr {
        padding-bottom: 2rem;
    }
    .block-2 h3 {
        font-size: 2.37em;
    }
    .content-img {
        margin-top: 0;
    }
    #y-2012-1 {
        padding-bottom: 0;
    }
    #y-2013 .text2 {
        position: static;
        margin-top: -0.5rem;
    }
    #y-2013 {
        min-height: auto;
        padding-bottom: 0;
    }
    #y-2014 {
        padding-top: 2rem;
        padding-bottom: 0;
        min-height: auto;
    }
    #y-2014 .img1, #y-2014 .img2-cont {
        display: none;
    }
    #y-2014 .descr {
        padding-bottom: 1.5rem;
    }
    #y-2014 .img3 {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 1.5rem;
    }
    #y-2015 {
        min-height: auto;
        padding-bottom: 0;
    }
    #y-2015 .descr {
        padding-bottom: 1rem;
    }
    #y-2016-met {
        margin: 0 auto 1.5rem;
    }
    #y-2016-mend .img {
        display: none;
    }
    #y-2016-mend {
        margin-bottom: 1.5rem;
    }
    #y-2016-iypt .img {
        object-fit: contain;
        height: auto;
        top: auto;
        margin-top: 6em;
    }
    #y-2016-1 .full-content .content {
        padding-top: 1.5rem;
    }
    #virtual-go {
        left: 45%;
        bottom: 0;
        margin-bottom: 0.5rem;
    }
    #students {
        min-height: 60vh;
    }
    #students .descr {
        font-size: 1.18em;
        left: auto;
        right: auto;
        width: auto;
        top: 65%;
        margin: 0 1rem;
    }
    #students .descr h3 {
        font-size: 1.125em;
    }
    #y-2017 .img {
        display: none;
    }
    #y-2017 {
        min-height: auto;
        padding-bottom: 0;
    }
    #y-2017-1 {
        padding-bottom: 0;
    }
    .block-2 .slider-cont {
        width: 100%;
        max-width: 100%;
        margin-top: 1rem;
    }
    #y-2019-1 .b-content {
        flex-flow: column;
        align-items: center;
        justify-content: flex-end;
    }
    #y-2019-1 .m-content {
        margin-bottom: 10%;
    }
    #y-2019-1 .date, #y-2019-1 .m-content {
        left: auto;
        text-align: center;
        position: static;
    }
    #y-2019-1 .btn {
        margin: 1rem auto;
    }
    #y-2019-1 .descr {
        max-width: 22em;
    }
    #y-2020 {
        min-height: auto;
        padding: 4rem 0;
    }
    #y-2020-1 .img2 {
        max-width: 74%;
    }
    #y-2020-1 h2 {
        font-size: 5.33em;
        margin-left: 14%;
    }
    #y-2020-1 .descr {
        margin-left: 23%;
    }
    .now-group .s-back {
        display: none;
    }
    .screen2:not(.screen-always) {
        min-height: auto;
    }
    .screen.now-ints {
        min-height: 70vh;
    }
    #now-1 .big-int {
        justify-content: flex-end;
    }
    .now-ints .ints {
        display: flex;
        justify-content: center;
        flex-flow: column;
        position: relative;
    }
    .now-ints .big-int {
        font-size: 3.7em;
        height: 2.7em;
        top: calc(50% - 3em);
        bottom: auto;
    }
    .now-ints .int-block {
        font-size: 1.5em;
        position: static;
        height: max-content;
        margin-bottom: 1rem;
    }
    .now-ints {
        align-items: center;
        flex-flow: row;
    }
    #now-1 .ints {
        margin-left: 2rem;
        left: 15%;
    }
    #now-2 .ints {
        right: 15%;
    }
    .now-ints .int-block .text {
        position: static;
    }
    #now-2 .int-block .int, #now-2 .int-block .int-content {
        position: static;
    }
    #now-2-1 {
        margin-left: -1.32em;
    }
    #now-2 .big-int {
        height: 3.6em;
        left: 50%;
        top: calc(50% - 3.8em);
    }
    #now-3 .img {
        height: 3.2%;
    }
    #countries-1 {
        top: 13%;
    }
    #countries-4 {
        bottom: 13%;
    }
    #now-3 {
        min-height: 100vh;
    }
    #now-3 .int-block {
        font-size: 2em;
    }
    #now-3-1 {
        top: 37%;
    }
    #now-4 .int-block {
        font-size: 1.5em;
    }
    #now-4 {
        min-height: auto;
        flex-flow: column;
        padding: 3rem 0 2rem;
    }
    #now-4 .int-block .int-content {
        position: relative;
    }
    #now-4 .btn {
        position: static;
    }
    #now-4 .int-block .int {
        right: 70%;
    }
    #now-4 .int-block .int-content {
        left: 30%;
    }
    .card-content {
        padding: 1.5rem;
    }
    #now-5 {
        display: block;
        margin: 1rem auto;
    }
    #now-5 .owl-item {
        transition: transform .2s ease-out;
    }
    #now-5 .owl-item.active.center {
        transform: scaleY(1.1);
    }
    #now-5 .owl-stage-outer {
        overflow: visible;
    }
    #now-6 {
        margin-top: 0;
    }
    #now-6 h3 {
        position: static;
        width: 100%;
        font-size: 1.77em;
        padding: 0 1em;
        max-width: 15em;
        margin: 0 auto;
        box-sizing: border-box;
    }
    #now-6 .btn {
        margin-top: 1rem;
    }
    #now-6 {
        min-height: 40vh;
    }
    #footer {
        padding: 2em 0;
    }
    #footer .wrap {
        flex-flow: column;
        max-width: 100%;
        align-items: center;
        text-align: center;
        padding: 0;
    }
    #footer .col {
        margin: auto;
        flex: none;
        width: 100%;
        padding: 0 2em;
        margin-bottom: 2rem;
        box-sizing: border-box;
    }
    #footer .partners {
        margin-bottom: 0;
    }
    #footer-1 a {
        margin: 1rem auto;
    }
    #footer #footer-logo {
        max-width: 80%;
        margin: 2rem auto;
    }
    #footer ul {
        font-size: 0.9em;
        display: grid;
        grid-template-columns: repeat(5, minmax(auto, 20%));
        justify-content: space-around;
    }
    #footer li {
        flex: 1;
        white-space: nowrap;
    }
    #footer-3 {
        display: none;
    }
    .mobile-hide {
        display: none;
    }
    #questions-1 {
        font-size: 0.75em;
    }
    #questions-1 a {
        display: inline;
    }
    #soc-links {
        margin: 1rem auto 0;
        max-width: 30%;
        display: grid;
        grid-template-columns: repeat(2, minmax(auto, 50%));
        gap: 1em;
        justify-content: space-around;
        text-align: center;
    }
    #soc-links a {
        width: 1.5rem;
        height: 1.5rem;
        background-size: 100%;
        box-sizing: border-box;
        overflow: hidden;
        padding: 0;
        text-indent: -10000px;
        margin: auto;
    }
    #down-arrow {
        margin-top: 2rem;
        width: 5em;
    }
    #y-1969 .content {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    #y-2012 .content {
        width: 95%;
    }
    .year1940_h span {
        margin-left: -0.1em;
    }
    #y-2012 .content {
        max-width: 33em;
    }
}