html {
    height: 100%;
    width: 100%;
}

p {
    margin: 0;
}
a, a:hover, a:visited, a:active {
    text-decoration: none;
    color: inherit;
    margin: 0;
    padding: 0;

}

* {
    box-sizing: border-box;
}

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

.supsub {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    vertical-align: middle;
    font-size: 50%;
}

body {
    margin: 0;
    font-family: Roboto-Medium, Verdana, sans-serif, -apple-system, BlinkMacSystemFont, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.impaired * {
    transition: none !important;
    transition-delay: 0s !important;
    box-shadow: none !important;
}

body.white {
    background-color: #fff;
}


html {
    font-size: 100px
}

@media (max-width: 3840px) {
    html {
        font-size: 120px;
    }
}
@media (max-width: 2560px) {
    html {
        font-size: 110px;
    }
}
@media (max-width: 2000px) {
    html {
        font-size: 105px;
    }
}
@media (max-width: 1920px) {
    html {
        font-size: 100px;
    }
}
@media (max-width: 1800px) {
    html {
        font-size: 95px;
    }
}
@media (max-width: 1600px) {
    html {
        font-size: 93px;
    }
}
@media (max-width: 1440px) {
    html {
        font-size: 92px;
    }
}
@media (max-width: 1366px) {
    html {
        font-size: 85px;
    }
}
@media (max-width: 1280px) {
    html {
        font-size: 90px;
    }
}
@media (max-width: 1024px) {
    html {
        font-size: 80px;
    }
}
@media (max-width: 768px) {
    html {
        font-size: 75px;
    }
}
@media (max-width: 640px) {
    html {
        font-size: 70px;
    }
}
.wrap {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    font-weight: 500;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: auto;
    font-size: 1rem;
    overflow-x: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .wrap {
        font-size: .85rem
    }
}

@media (min-width: 768px) and (max-width: 1024px){
    .wrap {
        font-size: .8rem
    }
}


/* ---------------------------Стили для шапки сайта ----------------------------*/
html {
    height: 100%;
    width: 100%;
}

p {
    margin: 0;
}
a, a:hover, a:visited, a:active {
    text-decoration: none;
    color: inherit;
    margin: 0;
    padding: 0;

}

* {
    box-sizing: border-box;
}

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

.supsub {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    vertical-align: middle;
    font-size: 50%;
}

body {
    margin: 0;
    font-family: Roboto-Medium, Verdana, sans-serif, -apple-system, BlinkMacSystemFont, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.impaired * {
    transition: none !important;
    transition-delay: 0s !important;
    box-shadow: none !important;
}

body.white {
    background-color: #fff;
}


html {
    font-size: 100px
}

@media (max-width: 3840px) {
    html {
        font-size: 120px;
    }
}
@media (max-width: 2560px) {
    html {
        font-size: 110px;
    }
}
@media (max-width: 2000px) {
    html {
        font-size: 105px;
    }
}
@media (max-width: 1920px) {
    html {
        font-size: 103px;
    }
}
@media (max-width: 1800px) {
    html {
        font-size: 97px;
    }
}
@media (max-width: 1600px) {
    html {
        font-size: 93px;
    }
}
@media (max-width: 1440px) {
    html {
        font-size: 95px;
    }
}
@media (max-width: 1366px) {
    html {
        font-size: 93px;
    }
}
@media (max-width: 1280px) {
    html {
        font-size: 92px;
    }
}
@media (max-width: 1024px) {
    html {
        font-size: 85px;
    }
}
@media (max-width: 768px) {
    html {
        font-size: 79px;
    }
}
@media (max-width: 640px) {
    html {
        font-size: 75px;
    }
}

.wrap {
    position: absolute;
    background-color: #ffffff;
    color: #1b1a1a;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    font-weight: 500;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: auto;
    font-size: 1rem;
    overflow-x: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .wrap {
        font-size: .85rem
    }
}

@media (min-width: 768px) and (max-width: 1024px){
    .wrap {
        font-size: .8rem
    }
}


/* ---------------------------Стили для шапки сайта ----------------------------*/
header
{
    width: 100%;
    max-width: 2600px;
    height: 110px;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
}

@media screen and (min-width: 768px) and (max-width: 1023px){
    header
    {
        padding: 0 20px;
        height: 100px;

    }
}
@media screen and (min-width: 320px) and (max-width: 768px)
{
    /* Стили для шапки сайта */
    header
    {
        height: fit-content;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding: 0 15px;
        margin-bottom: 0.3rem;
    }

}

/* ----------------------- Стили для кнопок вызова модальных окон в шапке сайта ---------------------------*/
header .article-block-btn_info
{
    width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .article-block-btn_info .button-modal
{
    width: fit-content;
    height: fit-content;
    border: none;
    border-left: 3px solid #08296c;
    background-color: #ffffff;
    padding: 0 0.15rem;
    cursor: pointer;
    transition: all 0.5s ease;
}

header .article-block-btn_info .button-modal:hover
{
    background-color: rgb(199, 219, 241) !important;
}

header .article-block-btn_info p
{
    font-size: .20rem;
    text-align: left;
    color: #08296c;
    padding-right: .3rem;
}
@media screen and (min-width: 320px) and (max-width: 768px) {
    header .article-block-btn_info {
        margin-top: 10px;
    }
}

/* --------------------- Стили для названия сайта в шапке сайта  -----------------------------------*/
header .article-block-name p
{
    font-size: .23rem;
    text-align: center;
    text-transform: uppercase;
    color: #08296c;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    .article-block-name p
    {
        font-size: .15rem;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        color: #08296c;
    }
}

/* ---------------------------- Стили для логотипа сайта в шапке сайта ---------------------------- */
header .article-block-logo_prof {
    padding:0 10px 0 20px;
}

header .article-block-logo_prof img
{
    width: auto;
    height: 90px;
    display: block;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

    header .article-block-logo_prof img {
        width: auto;
        height: 80px;
        display: block;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px)
{
    header .article-block-logo_prof  {
        padding: 15px 0;
        margin-bottom: 0;
    }
    header .article-block-logo_prof img
    {
        width: 80px;
        height: auto;
        display: block;
    }
}


/* ------------------------------------Стили для блока темы ---------------------------------------------*/

.wrap .article-section-theme {
    height: 130px;
    width: 100%;
    max-width: 1800px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 50px;
    font-size: .4rem;
    margin: 0 auto
}

.wrap .article-section-theme .text-title-specialty {
    line-height: 1.4;
    font-size: .3rem;
    text-transform: uppercase;
    text-align: center;
    color: #1b1a1a7;
    width: 90%;
    padding: 0 0.3rem;
}

.wrap .article-section-theme .text-name-specialty {
    font-size: .3rem;
    width: 10%;
    display: -webkit-flex;
    display: flex;
    text-align: left;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    color: #a5adb7;
    -webkit-transform: scaleY(2) scaleX(.9) translateY(-2px);
    transform: scaleY(2) scaleX(.9) translateY(-2px)
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .wrap .article-section-theme {
        height: 120px;
        padding: 0.2rem;
    }
    .wrap .article-section-theme .text-title-specialty {
        font-size: .27rem;
        font-weight: bold;
    }
    .wrap .article-section-theme .text-name-specialty {
        font-size: .3rem;
    }
}
@media screen and (min-width: 320px) and (max-width: 768px) {
    .wrap .article-section-theme {
        height: 110px;
        padding: 0.3rem 0.3rem;
    }
    .wrap .article-section-theme .text-title-specialty {
        font-size: .23rem;
        font-weight: bold;

    }
    .wrap .article-section-theme .text-name-specialty {
        font-size: .3rem;
    }
}

/* ------------------------------------Стили для обертки контента---------------------------------------------*/
.wrap .main-section {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex: 1 1;
    flex: 1 1;
    width: 100%;
    max-width: 1800px;
    padding: 0 50px ;
    margin: 40px auto;
}
@media screen and (min-width: 1025px) and (max-width: 1600px) {
    .wrap .main-section {
        padding: 0 20px;
        margin: 30px auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .wrap .main-section {
        padding: 0 20px;
        margin: 30px auto;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px){
    .wrap .main-section {
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: unset;
        justify-content: unset;
        margin: 0 auto 30px;
        padding: 10px 15px 0 15px;

    }
}

/* -------------------------------- Стили для левого блоа ------------------*/
.wrap .main-section .article-left-container {
    width: 35%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0 0 0 20px;
}


@media screen and (min-width: 320px) and (max-width: 768px) {
    .wrap .main-section .article-left-container {
        width: 99.5%;
        margin-top: 20px;
        margin-bottom: 30px
    }
}

/* ------------- Стили для левого блока --------------*/

.wrap .main-section .article-left-container .article-block-flex-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
@media screen and (min-width: 320px) and (max-width: 768px){
    .wrap .main-section .article-left-container .article-block-flex-row {
        display: none;
        padding: 0;
    }
}
.wrap .main-section .article-left-container .article-block-flex-row .article-block-logo_spec {
    -webkit-flex: 1 1;
    flex: 1 1;
    max-width: 200px;
    position: relative;
    display: -webkit-flex;
    display: flex;

}

@media (max-width: 1800px) {
    .wrap .main-section .article-left-container .article-block-flex-row .article-block-logo_spec img {
        max-width: 100%;
    }
}
@media (max-width: 1600px) {
    .wrap .main-section .article-left-container .article-block-flex-row .article-block-logo_spec img{
        width: 95%;
    }
}

@media (max-width: 1440px) {
    .wrap .main-section .article-left-container .article-block-flex-row .article-block-logo_spec img{
        width: 90%;
    }
}
@media (max-width: 1366px) {
    .wrap .main-section .article-left-container .article-block-flex-row .article-block-logo_spec img {
        width: 85%;
    }
}
@media (max-width: 1280px) {
    .wrap .main-section .article-left-container .article-block-flex-row .article-block-logo_spec img{
        max-width: 80%;
    }
}
@media (max-width: 1024px) {
    .wrap .main-section .article-left-container .article-block-flex-row .article-block-logo_spec img {
        max-width: 75%;
    }
}

/* -------------------- Стили для текстового блока ---------------------------*/

.wrap .main-section .article-left-container .article-block-specialty {
    width: 100%
}

.wrap .main-section .article-left-container .article-block-specialty  {
    margin-bottom: 20px
}

.wrap .main-section .article-left-container .article-block-specialty .text-title-specialty {
    color: #a5adb7;
    position: relative;
    padding-top: 10px;
    font-size: .3em
}

.wrap .main-section .article-left-container .article-block-specialty .text-name-specialty {
    color: #08296c;
    font-size: .2em
}

.wrap .main-section .article-left-container .article-block-specialty{
    width: 100%;
    margin-bottom: 20px
}

.wrap .main-section .article-left-container .article-block-specialty .text-title-specialty {
    color: #a5adb7;
    position: relative;
    margin-bottom: 10px;
    font-size: .3em
}

.wrap .main-section .article-left-container .article-block-specialty {
    color: #08296c;
    font-size: 0.95rem
}
@media screen and (min-width: 320px) and (max-width: 768px) {
    .mb-20 {
        margin-bottom:5px!important;
    }
    .wrap .main-section .article-left-container .article-block-specialty{
       margin-bottom: 0!important;
    }
    .wrap .main-section .article-left-container .article-block-specialty .text-name-specialty {
        font-size: 0.24em
    }
}

/* ------------------------------- Стили для правого блока ------------------------------*/

.article-right-container {
    width: 75%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0 20px 0 30px;
}


@media screen and (min-width: 320px) and (max-width: 768px) {
    .article-right-container {
        width: 100%;
        margin-left: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-flex: 1 1;
        flex: 1 1;
        padding: 0;
    }
}

/* ------------------ Стили для блоков ЭОМ ----------------------------------*/

.article-right-container .article-block-eom {
    width: 100%;
    min-height: 140px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    margin-bottom: 30px;
    border-radius: 20px;
}
@media screen and (min-width: 320px) and (max-width: 768px) {
    .article-right-container .article-block-eom {
        margin-bottom: 20px;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}
@media  (min-width: 1800px)  {
    .article-right-container .article-block-eom {
        margin-bottom: 50px;
    }
}
/* ------------- Заливка ЭОМ --------------------*/
.article-right-container .bg-eom_1 {
    background-color: #d6e1f5;

}
.article-right-container .bg-eom_2 {
    background-color:#FED9D6;
}
.article-right-container .bg-eom_3 {
    background-color: #d6d7d9;
}

/* ------------- Тип ЭОМ --------------------*/
.article-right-container .article-block-eom .block-eom-title {
    width: 35%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    padding: 0 10px;
    border-radius: 20px;
    z-index: 1
}

.article-right-container .article-block-eom .block-eom-title .text-title-theme {
    color: #fff;
    font-size: .18rem;
    margin-left: 20px;
    -webkit-flex-basis: 70%;
    flex-basis: 70%;
}

.bg-eom_1-title {
    background-color: #0D45AB;
}
.bg-eom_2-title {
    background-color: #F94133;
}
.bg-eom_3-title {
    background-color: #5C636E;
}

.article-block-eom .block-eom-title .icon-eom {
    width: 100px;
    height: 100px;
    min-width: 60px;
    -webkit-flex-basis: 30%;
    flex-basis: 30%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .article-right-container .article-block-eom .block-eom-title{
        width: 40%;
    }
    .article-right-container .article-block-eom .block-eom-title .text-title-theme {
        font-size: .18rem;

    }
}

@media screen and (min-width: 320px) and (max-width: 768px){
    .article-right-container .article-block-eom .block-eom-title {
        width: 100%;

    }
    .article-right-container .article-block-eom .block-eom-title .text-title-theme {
        font-size: .21rem;
        margin-left: 0;
        margin-bottom: 10px;
        text-align: center
    }
    .article-right-container .article-block-eom .block-eom-title .icon-eom {
        width: 60px;
        -webkit-flex-basis: 60px;
        flex-basis: 60px;
        height: 60px;
        min-width: 40px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* ------------- Тема ЭОМ --------------------*/

.article-right-container .article-block-eom .block-eom-description {
    height: 100%;
    width: 65%;
    padding: 15px 0 20px 15px;

}

.article-right-container .article-block-eom .block-eom-description:hover {
    padding-left: 15px;
    transition: 0.3s;
}
.article-right-container .article-block-eom .block-eom-description .text-type-theme {
    color: #737b87;

}
.article-right-container .article-block-eom .block-eom-description .text-type-theme,
.article-right-container .article-block-eom .block-eom-description .text-title-theme {
    display: block;
    font-weight: 500;
    padding-bottom: 3px;
    padding-right: 68px;
    font-size: .19rem
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .article-right-container .article-block-eom .block-eom-description  {
        padding: 8px 40px 0 8px!important;
        width: 60%;

    }
    .article-right-container .article-block-eom .block-eom-description .text-type-theme,
    .article-right-container .article-block-eom .block-eom-description .text-title-theme {
        padding: 8px  15px 8px 8px;
        font-size: .2rem
    }
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    .article-right-container .article-block-eom .block-eom-description  {
        width: 100%;
        padding: 30px 45px 8px 8px!important;

    }

    .article-right-container .article-block-eom .block-eom-description .text-type-theme,
    .article-right-container .article-block-eom .block-eom-description .text-title-theme {
        font-size: .22rem;
        padding: 8px 0;
    }
}

.article-right-container .article-block-eom .block-eom-description .text-type-theme {
    font-weight: 400
}


/* -------------Кнопки ЭОМ --------------------*/
.article-block-eom .buttons-eom {
    width: auto;
    position: absolute;
    right: 0;
    margin-left: 7px;
    padding: 5px 5px 10px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.article-block-eom .buttons-eom .play_btn,
.article-block-eom .buttons-eom .recommends_btn {
    width: 50px;
    height: 50px;

}

.article-block-eom .buttons-eom .recommends_btn:hover, .article-block-eom .buttons-eom .play_btn:hover {
    opacity: 0.5;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

    .article-block-eom .buttons-eom .play_btn,
    .article-block-eom .buttons-eom .recommends_btn {
        width: 40px;
        height: 40px;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px) {

    .article-block-eom .buttons-eom .play_btn,
    .article-block-eom .buttons-eom .recommends_btn {
        width: 40px;
        height: 40px;
    }
}
/* -----------------------------Стили для подвала-----------------------------------*/
.footer-section {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin-top: -20px;

    /*Минус Высота футера*/
    height: 20px;
    /*Высота футера*/
}

.footer-section .article-block-line_color {
    height: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: calc(100% + 15px);
    margin-left: -7px;

}

@media (max-width:1024px) {
    .footer-section .article-block-line_color {
        width: 100%;
        height: 17px
    }
}

@media (max-width:980px) {
    .footer-section .article-block-line_color {
        width: 100%;
        height: 10px
    }
}

.footer-section .article-block-line_color div {
    -webkit-flex: 1 1;
    flex: 1 1;
    -webkit-transform: skewX(330deg);
    transform: skewX(330deg)
}

.footer-section .article-block-line_color div:first-child {
    background-color: #273895;
    -webkit-flex: 0.5 1;
    flex: 0.5 1
}

.footer-section .article-block-line_color div:nth-child(2) {
    background-color: #2dba95
}

.footer-section .article-block-line_color div:nth-child(3) {
    background-color: #f47921
}

.footer-section .article-block-line_color div:nth-child(4) {
    background-color: #436890
}

.footer-section .article-block-line_color div:nth-child(5) {
    background-color: #fec210
}

.footer-section .article-block-line_color div:nth-child(6) {
    background-color: #ef4222
}

.footer-section .article-block-line_color div:nth-child(7) {
    background-color: #155fa3
}

.footer-section .article-block-line_color div:nth-child(8) {
    background-color: #a1489b;
    -webkit-flex: 0.5 1;
    flex: 0.5 1
}

/* -----------------------------Полоса прокрутки-----------------------------------*/
::-webkit-scrollbar { 
    width: 12px;
  }
  
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: 5px 5px 5px -5px #192c3b33 inset;
    background-color: #d5dfec;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(180deg, #e5e8ff, #d3d7fd);
  }

/* -----------------------------Отступы-----------------------------------*/
.bottom--5 {
    bottom: -5px;
}
.mb-20{
    margin-bottom: 20px
}