@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*
    1) ОСНОВНОЕ
    2) СКРОЛЛ БАР
    3) ВЕРХНЯЯ ЧАСТЬ СТРАНИЦЫ
        - НАВИГАЦИЯ
        - УПРАВЛЯЕМЫЕ ЭЛЕМЕНТЫ
    4) ЦИТАТА
    5) КОНТЕНТ
        - ЛЕВЫЙ КОНТЕНТ
        - ПРАВЫЙ КОНТЕНТ
            - ПУНКТ
            - ДАННЫЕ ПУНКТА
            - ЭЛЕМЕНТЫ ДЛЯ ДАННЫХ
    6) НИЖНЯЯ НАВИГАЦИЯ
    7) НИЖНИЙ БАР (ФУТЕР)
    8) ПОВЕРХНОСТНЫЕ ЭЛЕМЕНТЫ
    9) АДАПТАЦИЯ
*/

/* ОСНОВНОЕ */
body {
    font-family: Roboto, "Open Sans", Arial, sans-serif;
    margin: 0;
    color: #000000;
    cursor: default;

    /* Перенос текста */
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-break: auto;
    hyphens: manual;
}

/*.grid td, .grid th {
    text-align: center;
}
*/
a {
    text-decoration: none;
    color: #5a9eff;
    font-weight: 600;
}

img {
    object-fit: cover;
    background-size: cover;
}
/* КОНЕЦ ОСНОВНОЕ */

/* СКРОЛЛ БАР */
*::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

*::-webkit-scrollbar-track {  /* Задний фон */
    background: transparent;
}

*::-webkit-scrollbar-thumb { /* Дорожка и границы */
    background-color: #CC6A00;
    border-radius: 5px;
    border: 1px solid #f19632;
}

/* КОНЕЦ СКРОЛЛ БАР */

/* ВЕРХНЯЯ ЧАСТЬ СТРАНИЦЫ */
.header {
    display: flex;
    align-items: center;
    margin: 2vh 2vw;
}

    .header img {
        width: 80px;
        height: 80px;
        background-size: cover;
        object-fit: cover;
        margin: 0 0;
        transition: 500ms;
        content: url(../Images/logo.png);
    }

.header img:hover {
    transform: scale(1.2);
    transition: 300ms;
}

.header h1 {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0.2vw;
    text-align: center;
}


.header h1 p {
    font-size: 8px;
    margin: 0;
    color: #858585;
}

.header-container {
    display: flex;
    position: absolute;
    right: 2vw;
}

.header-nav-container {
    position: initial;
    text-align: center;
    justify-items: center;
    justify-content: center;
    right: 2vw;
}


/* НАВИГАЦИЯ */
.header-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


.header-nav li {
    float: left;
    position: relative;
    height: 100%;
    margin:2px;
    padding: 1vh 2vw;
    /*background: #3a0b6c;*/
    color: #CBCBCB;
    background: #0B2E8A;
    border-radius: 8px;
    transition: 300ms;
}


.header-nav .header-nav-done {
    font-weight: bold;
    background: #234EC3;
}

.header-nav .header-nav-done a {
    color: white;
}

.header-nav li a {
    display: block;
    font-weight: 400;
    border-radius: 12px;
    color: #C7C7C7;
    text-decoration: none;
    text-align: center;
}

.header-nav ul {
    display: none;
    position: absolute;
    top: 100%;
}

.header-nav li:hover ul {
    display: block;
}

.header-nav, .header-nav ul {
    margin: 1vh 0 0 0;
    padding: 0;
    list-style-type: none;
}


.header-nav ul li {
    float: none;
}


.header-nav li:hover a {
    color: white;
}


.header-nav li:hover {
    /*background-color: #4f336b;*/
    background: #234EC3;
    transform: scale(1.1);
    transition: 300ms;
}


.header-nav ul li:hover {
    background-color: white;
}

/* КОНЕЦ НАВИГАЦИЯ */


/* УПРАВЛЯЕМЫЕ ЭЛЕМЕНТЫ */
.header-control {
    margin: 0 0.6vw;
    right: 0;
    align-items: center;
    position: initial;
    text-align: center;
    justify-items: center;
    justify-content: center;
}

.header-control select {
    display: block;
    width: max-content;
    height: max-content;
    padding: 1vh 1vw;

    font-family: inherit;
    font-size: 10px;

    background: #3B73AB;
    color: #FFF;
    border-radius: 10px;

    border: none;
    outline: none;

    -webkit-appearance: none; /* Chrome */
    -moz-appearance: none; /* Firefox */
    appearance: none; /* убираем дефолнтные стрелочки */

    transition: 300ms;
}

.header-control select:hover {
    background: #11349a;
    transition: 300ms;
}

    .header-control .auth {
        object-fit: cover;
        background-size: cover;
        height: 18px!important;
        position: absolute;
        width: 18px!important;
        content: url(../Images/login.svg);
    }

.www{
    margin-left: 40px;

}
.header-control .header-control-auth-status {
    margin: 0;
    font-size: 10px;
}

.header-control .header-control-auth {
    margin: 1vh 1vw;
    transition: 300ms;

}

.header-control .header-control-auth:hover{
    transform: scale(1.1);
    transition: 300ms;
}
/* КОНЕЦ УПРАВЛЯЕМЫЕ ЭЛЕМЕНТЫ */

/* КОНЕЦ ВЕРХНЯЯ ЧАСТЬ СТРАНИЦЫ */

/* ЦИТАТА */
.quote {
    font-size: 14px;
    color: #FFFFFF;

    background: rgb(123, 166, 232);
    background: linear-gradient(180deg, rgba(123, 166, 232, 1) 0%, rgba(8, 50, 164, 1) 100%);

    margin: 0 10vw;
    border-radius: 12px;
    padding: 1.7vh 1vw;
    text-align: center;

    /* Перенос текста */
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-break: auto;
    hyphens: manual;
}

/* КОНЕЦ ЦИТАТА */

/* КОНТЕНТ */
.content {
    display: flex;
    margin: 0 1vw;

}

/* ЛЕВЫЙ КОНТЕНТ */
.content-left {
    width: 27vw;
    margin: 0 1vw;

}

.content-left p {
    font-weight: 600;
    font-size: 14px;
    text-align: center;

}

.content-left-data {
    background: #3A64C2;
    color: #D9D9D9;
    margin: 1vh 0;
    font-size: 14px;
    padding: 1vh 1vw;
    border-radius: 12px;
}

/* КОНЕЦ ЛЕВЫЙ КОНТЕНТ */

/* ПРАВЫЙ КОНТЕНТ */
.content-right {
    width: 64vw;
    margin: 0 1vw 0 0;
}

.content-right-title {
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

/* ПУНКТ */
.content-right-item {
    display: flex;
    background: #6F81E2;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    padding: 0.6vh 1vw;
    margin: 0.8vh 0 0.4vh 0;
    color: #fefefe;
    transition: 300ms;

    /* Нельзя копировать*/
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


.content-right-item:hover {
    background: #0B2E8A;
}

    .content-right-item img {
        width: 16px;
        /*height: 35px;*/
        margin-left: auto;
        justify-content: right;
        right: 0;
        content: url(../Images/main/icon_top.png);
    }

.content-right-close { /* закрытый пункт  */
    background: #5368B6;
    font-weight: 400;
    color: #dedede;
    transition: 300ms;
}

.content-right-close img { /* закрытый пункт, картинка */
    content: url(../Images/main/icon_bottom.png);
}
/* КОНЕЦ ПУНКТ */


/* ДАННЫЕ ПУНКТА */
.content-right-data {
    background: #5e69c1;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 0.2vh 0.5vw 1vh 0.5vw;
    margin: 0 0 1vh 0;
    transition: 300ms;
}

.display-none { /* сокрытие данных */
    display: none;
    transition: 300ms;
}

.content-right-data p {
    font-size: 15px;
}

.content-right-data .review-title {  /* титул обзор  */
    text-align: center;
}

.content-right-data .review-content { /* обзор контент */
    display: flex;
    justify-content: center;
    align-items: center;
}

.review-content img{  /* обзор картинки */
    width: 200px;
    border-radius: 12px;
}

.content-right-data .title-right { /* данные справа, бюджетных мест */
    text-align: right;
    margin: 1vh 4.2vw;
    font-size: 12px;
    font-weight: 400;
}

/* ЭЛЕМЕНТЫ ДЛЯ ДАННЫХ */
.content-right-data-item {
    display: flex;
    align-items: center;
    background: #2C4DA3;
    margin: 1vh 4vw;
    border-radius: 12px;
    padding: 1vh 0.8vw;
    /*box-shadow: 2px 2px 7px #2b2b2b4a;*/
}

    .content-right-data-item p, h5, ul, li {
        font-size: 14px;
        font-weight: 400;
        /*margin: 0;*/
        margin: 0.5vh 0.2vw;
    }

.content-right-data-item h5 p {
    margin: 0.4vh 0;
    font-size: 10px;
    font-weight: 300;
}

.content-right-data-item .header-control-auth {
    margin-left: auto;
    background: #152757;
    border-radius: 1em;
    padding: 4px;
}
/* КОНЕЦ ЭЛЕМЕНТЫ ДЛЯ ДАННЫХ*/


/* НИЖНЯЯ НАВИГАЦИЯ */
#bottom-navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


#bottom-navigation li {
    float: left;
    position: relative;
    height: 100%;
    margin: 1vh 0.4vw;
    padding: 1vh 2vw;
    /*background: #3a0b6c;*/
    color: #CBCBCB;
    background: #0B2E8A;
    border-radius: 8px;
    transition: 300ms;
}


#bottom-navigation .header-nav-done {
    font-weight: bold;
   
}

#bottom-navigation .header-nav-done a {
    color: white;
}

#bottom-navigation li a {
    display: block;

    text-decoration: none;
    text-align: center;

    font-weight: 400;
    color: #C7C7C7;
    border-radius: 12px;

}

#bottom-navigation ul {
    display: none;
    position: absolute;
    top: 100%;
}

#bottom-navigation li:hover ul {
    display: block;
}

#bottom-navigation, #bottom-navigation ul {
    margin: 1vh 0 0 0;
    padding: 0;
    list-style-type: none;
}


#bottom-navigation ul li {
    float: none;
}

#bottom-navigation li:hover a {
    color: white;
}


#bottom-navigation li:hover {
    background: #234EC3;
    transform: scale(1.1);
    transition: 300ms;
}


#bottom-navigation ul li:hover {
    background-color: white;
}

/* КОНЕЦ НИЖНЯЯ  НАВИГАЦИЯ */

/*НАЧАЛО НАВИГАЦИИ МЕССЕНДЖЕРА*/
#bottom-navigation-messenger {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}


    #bottom-navigation-messenger li {
        float: left;
        position: relative;
        height: 100%;
        margin: 1vh 0.4vw;
        padding: 1vh 2vw;
        /*background: #3a0b6c;*/
        color: white;
        background: #3B73AB;
        border-radius: 8px;
        transition: 300ms;
        list-style-type: none;
    }


    #bottom-navigation-messenger .header-nav-done {
        font-weight: bold;
    }

        #bottom-navigation-messenger .header-nav-done a {
            color: white;
        }

    #bottom-navigation-messenger li a {
        display: block;
        text-decoration: none;
        text-align: center;
        font-weight: 400;
        color: white;
        border-radius: 12px;
    }

    .bottom-navigation-messenger ul {
        display: none;
        position: absolute;
        top: 100%;
    }

    .bottom-navigation-messenger li:hover ul {
        display: block;
    }

    .bottom-navigation-messenger, .bottom-navigation-messenger ul {
        margin: 1vh 0 0 0;
        padding: 0;
        list-style-type: none;
    }

        .bottom-navigation-messenger, .bottom-navigation-messenger li {
            list-style-type: none;
        }

        .bottom-navigation-messenger ul li {
            float: none;
        }

        .bottom-navigation-messenger li:hover a {
            color: white;
        }


        .bottom-navigation-messenger li:hover {
            background: #7ac0da;
            transform: scale(1.1);
            transition: 300ms;
        }


        .bottom-navigation-messenger ul li:hover {
            background-color: white;
        }

/*КОНЕЦ НАВИГАЦИИ МЕССЕНДЖЕРА*/

/* НИЖНИЙ БАР (ФУТЕР) */
footer{
    position: relative;
    /*margin-top: 20%;*/
}
.footer-data {
    display: flex;
    align-items: center;
    margin: 0 2vw;
}

.footer-data p {
    font-size: 12px;
    margin-right: 1vw;
}


.footer-data img {
    height: 10px;
}

/* КОНЕЦ НИЖНИЙ БАР (ФУТЕР) */

/* ПОВЕРХНОСТНЫЕ ЭЛЕМЕНТЫ */
.over {
    position: fixed;
    bottom: 2vh;
    right: 8vw;
    z-index: 999;
}

.over .button-go:hover {
    background: #ac6835;
}

    .over .button-rating:hover {
        background:white;
    }

/* КОНЕЦ ПОВЕРХНОСТНЫЕ ЭЛЕМЕНТЫ */
/*- Для картинок и контента*/
.content-left-data img {
    display: flex;
    background-size: cover;
    object-fit: cover;
    width: 80%;
    margin: 1vh auto;
    border-radius: 12px;
    transition: 600ms;
}

    .content-left-data img:hover {
        transform: scale(1.1);
        transition: 600ms;
    }

.content-right-data img {
    display: flex;
    background-size: cover;
    object-fit: cover;
    width: 40%;
    margin: 1vh auto;
    border-radius: 12px;
}

.button-go {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    padding: 1.3vh 1vw;
    margin: 1vh 0;
    border-radius: 12px;
    background: #F99953;
}

    .button-go:hover {
        background: #ac6835;
    }
/*- Для картинок и контента*/
#vk_groups {
    margin:2vh 2vw;
}


/* АДАПТАЦИЯ */
@media screen and (max-width: 1100px) {
    .header {
        flex-direction: column;
    }

    .header h1 {
        text-align: center;
        margin: 1vh 0;
    }

    #header-nav li {
        margin: 0.8vh 0.4vw;
    }

    #header-nav li a {
        width: 120px;
        border-radius: 12px;
    }

    .header-container {
        position: relative;
    }
   .over{
        right:12vw;
    }
}


    @media screen and (max-width: 800px) {
        .content {
            flex-direction: column;
        }

        .content-left {
            width: 94vw;
        }

        .content-right {
            width: 94vw;
        }

        .over {
            right: 15vw;
        }
    }

    @media screen and (max-width: 700px) {
        .header-container {
            flex-direction: column-reverse;
        }

        .header-control {
            margin: 0 2vw;
            display: flex;
        }

        .over {
            right: 20vw;
        }
    }
/*
    @media screen and (max-width: 540px) {
        .button-go {
            margin-top: -280px;
        }
    }*/
    /* КОНЕЦ АДАПТАЦИЯ */

.hiddenColumn {
    visibility: hidden;
    width: 0px;
}
    /*****************************************************************старые стили*/


    .hero {
        background: url(../Images/IiIT.jpg);
    }

    main {
        padding: 1.2em;
    }

    img {
        padding: 1px;
        width: 100%;
    }

    button {
        Font-Size: calc(1vw + 0.5em);
    }
    /* content */
    article {
        float: left;
        width: 70%;
    }

    aside {
        float: right;
        width: 25%;
    }

        aside ul {
            list-style: none;
            padding: 0;
        }

            aside ul li {
                background: url("../Images/bullet.png") no-repeat 0 50%;
                padding: 2px 0 2px 20px;
            }

    .label {
        font-weight: 700;
    }

    /* contact */
    .contact h3 {
        font-size: 1.2em;
    }

    .contact p {
        margin: 5px 0 0 10px;
    }

    .contact iframe {
        border: 1px solid #333;
        margin: 5px 0 0 10px;
    }

    /* forms */
    fieldset {
        border: none;
        margin: 0;
        padding: 0;
    }

        fieldset legend {
            display: none;
        }

        fieldset ol {
            padding: 0;
            list-style: none;
        }

            fieldset ol li {
                padding-bottom: 5px;
            }

    label {
        display: block;
        font-size: 1.2em;
        font-weight: 600;
    }

    /*labe*/

    input, textarea {
        border: 1px solid #e2e2e2;
        background: #fff;
        color: #333;
        font-size: 1.2em;
        margin: 5px 0 6px 0;
        padding: 5px;
    }

    /*0;
        padding: 5px;
        }*/

    textarea {
        font-family: inherit;
        width: 500px;
    }

        input:focus, textarea:focus {
            border: 1px solid #7ac0da;
        }

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

    /* info and errors */
    .message-info {
        border: 1px solid;
        clear: both;
        padding: 10px 20px;
    }

    .message-error {
        clear: both;
        color: #e80c4d;
        font-size: 1.1em;
        font-weight: bold;
        margin: 20px 0 10px 0;
    }

    .message-success {
        color: #7ac0da;
        font-size: 1.3em;
        font-weight: bold;
        margin: 20px 0 10px 0;
    }

    .error {
        color: #e80c4d;
    }

    /* styles for validation helpers */
    .field-validation-error {
        color: #e80c4d;
        font-weight: bold;
    }

    .field-validation-valid {
        display: none;
    }

    input.input-validation-error {
        border: 1px solid #e80c4d;
    }

    input[type="checkbox"].input-validation-error {
        border: 0 none;
    }

    .validation-summary-errors {
        color: #e80c4d;
        font-weight: bold;
        font-size: 1.1em;
    }

    .validation-summary-valid {
        display: none;
    }

    /* tables
----------------------------------------------------------*/
    table {
        border-style: none;
        border-color: inherit;
        border-width: 0;
        border-collapse: collapse;
        border-spacing: 0;
        /* margin-top: 0.75em;*/
        margin-top: 0px;
        text-align: center;
        font-weight: 700;
        width: 50%;
    }

    th {
        font-size: 0.8em;
        text-align: center;
        /*border: none 0px;*/
        padding-left: 0;
        align-content: center;
        align-items: center;
    }

        th a {
            display: block;
            position: relative;
        }

            th a:link, th a:visited, th a:active, th a:hover {
                color: #333;
                font-weight: 600;
                text-decoration: none;
                padding: 0;
            }

            th a:hover {
                color: #000;
            }

        th.asc a, th.desc a {
            /*margin-right: .75em;*/
        }

            th.asc a:after, th.desc a:after {
                display: block;
                position: absolute;
                right: 0em;
                top: 0;
                font-size: 0.75em;
            }

            th.asc a:after {
                content: '▲';
            }

            th.desc a:after {
                content: '▼';
            }

    td {
        padding: 0.25em 2em 0.25em 0em;
        /* border: 0 none;*/
        text-align: left;
    }

    tr.pager td {
        padding: 0 0.25em 0 0;
    }


    /********************
*   Mobile Styles   *
********************/
    @media only screen and (max-width: 850px) {

        /* header
    ----------------------------------------------------------*/
        header .float-left,
        header .float-right {
            float: none;
        }

        /* logo */
        header .site-title, p {
            margin: 10px;
            text-align: center;
            width: auto;
            height: auto;
        }

        /* login */
        #login {
            font-size: .85em;
            margin: 0 0 12px;
            text-align: left;
        }

            #login ul {
                margin: 5px 0;
                padding: 0;
            }

            #login li {
                display: inline;
                list-style: none;
                margin: 0;
                padding: 0;
            }

            #login a {
                background: none;
                color: #999;
                font-weight: 600;
                margin: 2px;
                padding: 0;
            }

                #login a:hover {
                    color: #333;
                }

        /* menu */
        nav {
            margin-bottom: 5px;
        }

        ul#menu {
            margin: 0;
            padding: 0;
            text-align: center;
        }

            ul#menu li {
                margin: 0;
                padding: 0;
            }




        /* main layout
    ----------------------------------------------------------*/
        .main-content,
        .featured + .main-content {
            background-position: 10px 0;
        }

        .content-wrapper {
            padding-right: 10px;
            padding-left: 10px;
        }

        .featured .content-wrapper {
            padding: 10px;
        }

        /* page content */
        article, aside {
            float: none;
            width: 100%;
        }

        /* ordered list */
        ol.round {
            list-style-type: none;
            padding-left: 0;
        }

            ol.round li {
                padding-left: 10px;
                margin: 25px 0;
            }

                ol.round li.zero,
                ol.round li.one,
                ol.round li.two,
                ol.round li.three,
                ol.round li.four,
                ol.round li.five,
                ol.round li.six,
                ol.round li.seven,
                ol.round li.eight,
                ol.round li.nine {
                    background: none;
                }

        /* features */
        section.feature {
            float: none;
            padding: 10px;
            width: auto;
        }

            section.feature img {
                color: #999;
                content: attr(alt);
                font-size: 1.5em;
                font-weight: 600;
            }

        /* forms */
        input {
            width: 90%;
        }



        /* login page */
        #loginForm {
            border-right: none;
            float: none;
            width: auto;
        }

            #loginForm .validation-error {
                display: block;
                margin-left: 15px;
            }

        #socialLoginForm {
            margin-left: 0;
            float: none;
            width: auto;
        }

        /* footer
    ----------------------------------------------------------*/
        footer .float-left,
        footer .float-right {
            float: none;
        }

        footer {
            text-align: center;
            height: auto;
            padding: 10px 0;
        }

            footer p {
                margin: 0;
            }
    }
    /* END: Mobile Styles */

    .hiddenColumn {
        visibility: hidden;
        width: 0px;
    }


    .block2 {
        width: 570px;
        float: left;
        position: relative;
        left: 430px;
    }

    .block1 {
        width: 700px;
        float: left;
        position: relative;
        left: 345px;
    }

    .block {
        width: 1200px;
        float: left;
        position: relative;
        right: 20px;
    }


    .blockLect {
        width: 1200px;
        float: left;
        margin: auto;
        right: 300px;
    }

    .block3 {
        width: 100%;
        float: left;
        position: relative;
        right: 50px;
    }

    .block4 {
        width: 100%;
        float: left;
        position: relative;
        right: 20px;
    }

    .cent {
        text-align: center;
    }

    .cent2 {
        text-align: center;
        width: 100%;
        height: 100%;
    }

    #mytopmenu {
        width: 170px;
        height: 200px;
        padding-left: 15px;
        padding-top: 145px;
        position: fixed;
        top: 0;
        left: 0;
        top: expression(document.getElementsByTagName( 'body' )[0].scrollTop + "px");
    }

    /*Menu*/
    nav {
        display: block;
        width: 100%;
        text-align: center;
    }

        nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

    .nav a {
        display: block;
        background: #5D7B9D;
        color: #fff;
        text-decoration: none;
        padding: .8em 1.8em;
        text-transform: uppercase;
        /*font-size: 90%;*/
        font-weight: bold;
        letter-spacing: 2px;
        text-shadow: 0 -1px 0 #000;
        position: relative;
    }

    .nav {
        vertical-align: top;
        display: inline-block;
        box-shadow: 1px -1px -1px 1px #555, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
        border-radius: 6px;
    }

        .nav li {
            position: relative;
        }

        .nav > li {
            float: left;
            border-bottom: 4px #aaa solid;
            margin-right: 1px;
        }

            .nav > li > a {
                margin-bottom: 1px;
                box-shadow: inset 0 2em .33em -.5em #8da2ba;
            }

            .nav > li:hover, .nav > li:hover > a {
                border-bottom-color: black;
            }

        .nav li:hover > a {
            color: black;
        }

        .nav > li:first-child {
            border-radius: 4px 0 0 4px;
        }

            .nav > li:first-child > a {
                border-radius: 4px 0 0 0;
            }

        .nav > li:last-child {
            border-radius: 0 0 4px 0;
            margin-right: 0;
        }

            .nav > li:last-child > a {
                border-radius: 0 4px 0 0;
            }

        .nav li li a {
            margin-top: 1px;
        }

        .nav li a:first-child:nth-last-child(2):before {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            border: 5px solid transparent;
            top: 50%;
            right: 5px;
        }

        .nav ul {
            position: absolute;
            white-space: nowrap;
            border-bottom: 5px solid black;
            z-index: 1;
            left: -99999em;
        }

        .nav > li:hover > ul {
            left: auto;
            padding-top: 5px;
            min-width: 100%;
        }

        .nav > li li:hover > ul {
            color: black;
        }

        .nav li li ul {
            border-left: 1px solid #fff;
        }

        .nav > li li:hover > ul {
            margin-left: 1px;
            left: 100%;
            top: -1px;
        }

        .nav > li > a:first-child:nth-last-child(2):before {
            border-top-color: #aaa;
        }

        .nav > li:hover > a:first-child:nth-last-child(2):before {
            border: 5px solid transparent;
            border-bottom-color: black;
            margin-top: -5px;
        }

        .nav > li li > a:first-child:nth-last-child(2):before {
            border-top-color: #aaa;
            margin-top: -5px;
        }

        .nav > li li:hover > a:first-child:nth-last-child(2):before {
            border: 5px solid transparent;
            border-bottom-color: black;
            margin-top: 10px;
            color: black;
        }




    .title > h1 {
        color: #333;
        text-transform: uppercase;
        font-size: calc(1vw + 1em);
        margin: .2em 0;
    }

    .slogan {
        color: #888;
        font-size: .8em;
        margin: 0;
    }

    /*menu-mobile*/

    .menu-mobile {
        position: relative;
    }

    .menu-toggle {
        position: absolute;
        top: -1.8em;
        right: 0em;
        border: 0;
        background-color: transparent;
        font-size: 3.1em;
        width: 1em;
        height: 1em;
        line-height: 0.3em;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 5em;
        cursor: pointer;
    }

        .menu-toggle::after {
            position: absolute;
            top: 0.4em;
            left: 0.1em;
            display: block;
            content: "\2261";
            text-indent: 0;
            cursor: pointer;
        }

    .menu-dropdown {
        display: none;
        position: absolute;
        right: 0;
        left: 0;
        margin: 0;
    }

    .menu-mobile.is-open .menu-dropdown {
        display: block;
    }

    .nav-menu-mobile {
        margin: 0;
        padding: 0;
        border: 1px solid #ccc;
        background: #013b7d;
        color: #fff;
        text-align: left;
    }

        .nav-menu-mobile > li + li {
            border-top: 1px solid #ccc;
        }


        .nav-menu-mobile > li > a {
            display: block;
            padding: 0.7em 1em;
            color: #fff;
            font-weight: normal;
        }

            .nav-menu-mobile > li > a > img {
                width: calc(3vw + 1em);
                height: calc(3vw + 1em);
                text-align: center;
                vertical-align: middle;
            }

    /*aside*/
    .hero {
        padding: 2em 2em;
        text-align: center;
        background-size: 100%;
        color: #fff;
        text-shadow: 0.1em 0.1em 0.1em #000;
        width: 100%;
    }

    .menuMobileAdmin { /*1*/
        position: relative;
    }

    .menu-toggle-admin { /*2*/
        position: absolute;
        top: -1em;
        right: 0em;
        border: 0;
        background-color: transparent;
        font-size: 3.1em;
        width: 1em;
        height: 1em;
        line-height: 0.3em;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 5em;
    }

        .menu-toggle-admin::after { /*3*/
            position: absolute;
            top: 0.4em;
            left: 0.1em;
            display: block;
            content: "\2261";
            text-indent: 0;
        }

    .menuMobileAdmin2 { /*1*/
        position: relative;
    }

    .menu-toggle-admin2 { /*2*/
        position: absolute;
        top: -1.9em;
        right: 1em;
        border: 0;
        background-color: transparent;
        font-size: 3.1em;
        width: 1em;
        height: 1em;
        line-height: 0.3em;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 5em;
    }

        .menu-toggle-admin2::after { /*3*/
            position: absolute;
            top: 0.4em;
            left: 0.1em;
            display: block;
            content: "\2261";
            text-indent: 0;
        }

    .menuMobileInstitute { /*1*/
        position: relative;
    }

    .menu-toggle-Institute { /*2*/
        position: absolute;
        top: -1.9em;
        right: 2em;
        border: 0;
        background-color: transparent;
        font-size: 3.1em;
        width: 1em;
        height: 1em;
        line-height: 0.3em;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 5em;
    }

        .menu-toggle-Institute::after { /*3*/
            position: absolute;
            top: 0.4em;
            left: 0.1em;
            display: block;
            content: "\2261";
            text-indent: 0;
        }

    .menuMobileStudent { /*1*/
        position: relative;
    }

    .menu-toggle-Student { /*2*/
        position: absolute;
        top: -1.9em;
        right: 3em;
        border: 0;
        background-color: transparent;
        font-size: 3.1em;
        width: 1em;
        height: 1em;
        line-height: 0.3em;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 5em;
    }

        .menu-toggle-Student::after { /*3*/
            position: absolute;
            top: 0.4em;
            left: 0.1em;
            display: block;
            content: "\2261";
            text-indent: 0;
        }

    .menuMobileLecturer { /*1*/
        position: relative;
    }

    .menu-toggle-Lecturer { /*2*/
        position: absolute;
        top: -1.9em;
        right: 4em;
        border: 0;
        background-color: transparent;
        font-size: 3.1em;
        width: 1em;
        height: 1em;
        line-height: 0.3em;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 5em;
    }

        .menu-toggle-Lecturer::after { /*3*/
            position: absolute;
            top: 0.4em;
            left: 0.1em;
            display: block;
            content: "\2261";
            text-indent: 0;
        }


    @media (min-width: 560px) {
        title > h1 {
            font-size: 2.2rem;
        }

        .hero {
            padding: 5em 3em;
            font-size: 1.5rem;
            width: 100%;
        }

        .menu-toggle {
            display: none;
        }

        .menu-toggle-admin {
            display: none;
        }

        .menu-toggle-admin2 {
            display: none;
        }

        .menu-toggle-Institute {
            display: none;
        }

        .menu-toggle-Student {
            display: none;
        }

        .menu-toggle-Lecturer {
            display: none;
        }

        .menu-dropdown {
            display: block;
            position: static;
        }

        .nav-menu-mobile {
            display: flex;
            border: 0;
            padding: 0 1em;
            list-style-type: none;
        }

            .nav-menu-mobile > li {
                flex: 1;
            }

                .nav-menu-mobile > li + li {
                    border: 0;
                }

                .nav-menu-mobile > li > a {
                    padding: 0.3em;
                    text-align: center;
                }

        .row {
            display: flex;
            margin-left: -.75em;
            margin-right: -.75em;
        }

        .column {
            flex: 1;
            margin-left: 0.75em;
            margin-right: 0.75em;
        }

        .column-center {
            flex: 1;
            margin-left: 0.75em;
            margin-right: 0.75em;
            text-align: center;
        }
    }

    @media screen and (max-width: 600px) {
        table thead {
            display: none;
        }

        table td::before {
            /*content: attr(label);*/
            width: auto;
            font-weight: bold;
            /*width: .5px;*/
            min-width: 0.5px;
        }

        img.bg {
            left: 50%;
            margin-left: -320px;
        }
    }

 
/*картинка на рейтинге*/
/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: black;
    width: 80%;
    object-fit: cover;
    background-size: cover;
    margin:5px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
    .container, centered {
        font-size: 150%;
    }
}

@media screen and (max-width: 470px) {
    .container, centered {
        font-size: 90%;
    }
}