@media screen and (min-width: 320px) and (max-width: 768px) 
{
    /* Стили для шапки сайта */
    header
    {
        width: 100%;
        height: fit-content;

        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

        /* Стили для логотипа сайта в шапке сайта */
        .logo-site img
        {
            width: 80px;
            height: auto;
    
            display: block;
        }
        /* Стили для логотипа сайта в шапке сайта */

        /* Стили для названия сайта в шапке сайта */
        .name-site p
        {
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
            color: #5C636E;
        }
        /* Стили для названия сайта в шапке сайта */

        /* стили для кнопок вызова модальных окон в шапке сайта */
        .modal-window-info
        {
            width: 100%;

            margin-top: 10px;

            justify-content: space-around;
        }

        .modal-window-info button
        {
            border-left: 2px solid #5C636E;
            border-right: 2px solid #5C636E;
        }

        .modal-window-info p
        {
            font-size: 10px;
        }
        /* стили для кнопок вызова модальных окон в шапке сайта */
    /* Стили для шапки сайта */
    
    /* Стили для тела сайта */

        /* Стили для названия темы */
        .topic
        {
            width: 100%;
            height: fit-content;

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

        .topic-text
        {
            font-size: 15px;
        }
    
        .topic-name
        {
            font-size: 15px;

            padding-right: 80px;
        }
        /* Стили для названия темы */

        /* Стили для контента ЦОК */

        .content-topic
        {
            width: 100%;
            height: fit-content;
    
            margin-top: 10px;

            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
        }

            
            /*  */
            .description-speciality
            {
                width: 100%;
                height: fit-content;

                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
            }

            .description-speciality img
            {
                display: none;
            }

            .description-text p
            {
                font-size: 15px;
            }
            /*  */

            /* Блок где находятся все ЭОМ */
            .EOMS
            {
                width: 100%;
                height: fit-content;
            }
            /* Блок где находятся все ЭОМ */

            /* Стиль для ЭОМ */
            .EOM
            {
                width: 100%;
                height: fit-content;
            }

            .type-EOM
            {
                width: 100%;

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

            .type-EOM img
            {
                width: 50px;
                height: auto;
            }

            .type-EOM p
            {
                width: 100%;
                height: 40px;

                font-size: 12px;

                padding-left: 10px;
            }

            /* Стиль для ЭОМ */

            /* Стили для названия ЭОМ */
            .name-EOM
            {
                width: 100%;
                height: fit-content;


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

            .name-EOM img
            {
                width: 50px;
                height: auto;
            }

            .name-EOM a img
            {
                width: 50px;
                height: auto;
            }

            .text-EOM
            {
                width: 100%;

                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
            }

            .text-EOM p
            {  
                width: 100%;
                height: fit-content;

                font-size: 12px;
                color:#5C636E;
            }
            .text-EOM p:nth-child(1)
            {  
                font-weight: bold;
            }
            /* Стили для названия ЭОМ */

        /* Стили для контента ЦОК */

    /* Стили для тела сайта */

    /* Стили для подвала сайта */
    footer
    {
        display: none;
    }
    /* Стили для подвала сайта */

    /* Стили для модальных окон */
        /* PopUp */
        .PopUp
        {
            width: 90%;
            height: fit-content;
            max-height: calc(100vh - 5%);

            overflow-y:scroll;
        }

        .PopUp_Header
        {
            width: 100%;

            display: flex;
            justify-content: space-around;
            align-items: center;

            margin-top: 10px;
        }

        .PopUp_Header p
        {
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
            text-align: center;
            color: #5C636E;

            flex: 1 1 80%;
        }

        .PopUp_Header img
        {
            width: 15px;
            height: auto;

            margin-right: 15px;

            cursor: pointer;
        }

        .PopUp_Text
        {
            width: 95%;
            height: auto;

            margin: 15px auto 0 auto;
        }

        .PopUp_Text p, li
        {
            font-size: 12px;
        }

}


@media screen and (min-width: 768px) and (max-width: 1023px)
{
    /* Стили для шапки сайта */

        /* Стили для логотипа сайта в шапке сайта */
        .logo-site img
        {
            width: 100px;
            height: auto;

            display: block;
        }
        /* Стили для логотипа сайта в шапке сайта */

        /* Стили для названия сайта в шапке сайта */
        .name-site p
        {
            font-size: 25px;
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
            color: #5C636E;
        }
        /* Стили для названия сайта в шапке сайта */

        /* стили для кнопок вызова модальных окон в шапке сайта */
        .modal-window-info
        {
            width: 100%;

            justify-content: space-around;
        }

        .modal-window-info button
        {
            border-left: 2px solid #5C636E;
            border-right: 2px solid #5C636E;
        }

        .modal-window-info p
        {
            font-size: 15px;
        }
        /* стили для кнопок вызова модальных окон в шапке сайта */

    /* Стили для шапки сайта */


    /* Стили для тела сайта */

        /* Стили для названия темы */
        .topic
        {
            width: 100%;
            height: fit-content;

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

        .topic-text
        {
            font-size: 25px;
        }
    
        .topic-name
        {
            font-size: 25px;

            padding-right: 150px;
        }
        /* Стили для названия темы */

            /*  */
            .description-text p
            {
                font-size: 20px;
            }
            /*  */

    /* Стили для тела сайта */

    /* Стили для подвала сайта */
    footer
    {
        display: none;
    }
    /* Стили для подвала сайта */
}

@media screen and (min-width: 1024px) and (max-width: 1025px)
{
    /* Стили для шапки сайта */

    header
    {
        width: 90%;
    }

        /* Стили для логотипа сайта в шапке сайта */
        .logo-site img
        {
            width: 120px;
        }
        /* Стили для логотипа сайта в шапке сайта */

        /* Стили для названия сайта в шапке сайта */
        .name-site p
        {
            font-size: 25px;
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
            color: #5C636E;
        }
        /* Стили для названия сайта в шапке сайта */

        /* стили для кнопок вызова модальных окон в шапке сайта */
        .modal-window-info p
        {
            font-size: 20px;
        }
        /* стили для кнопок вызова модальных окон в шапке сайта */

    /* Стили для шапки сайта */

        /* Стили для названия темы */
        .topic
        {
            width: 100%;
            height: fit-content;

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

        .topic-text
        {
            font-size: 30px;
        }
    
        .topic-name
        {
            font-size: 30px;

            padding-right: 150px;
        }
    /* Стили для названия темы */

    /* Стили для подвала сайта */
    footer
    {
        display: none;
    }
    /* Стили для подвала сайта */

}