/*
Theme Name: GuruDoctor
*/

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-BlackItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* spinner */
.process-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: inherit;
}

.disabled .process-spinner {
    display: flex;
}

.spinner-icon {
    position: absolute;
    z-index: 3;
    animation: loading-bar-spinner 400ms linear infinite;
    width: 18px;
    height: 18px;
    border:  solid 2px transparent;
    border-top-color:  #999;
    border-left-color: #999;
    border-radius: 50%;
}

@keyframes loading-bar-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #191A1F;
    font-weight: 400;
    line-height: 1.3;
    background: #FBFAFE;
}

body.overflow-hidden {
    overflow: hidden;
}

@media (min-width: 1201px) {
    body.overflow-hidden {
        overflow: auto;
    }
}

#header {
    position: sticky;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 10;
    top: 0;
    background: #FBFAFE;
}

a, a:visited {
    text-decoration: none;
    color: inherit;
}

a, button {
    transition: 0.3s ease;
}

a:hover, button:hover {
    opacity: 0.8;
}

#page {
    position: relative;
}

.container {
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
}

.container.single-post-content-container .container {
    max-width: unset;
    padding: 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.header-menu-dropdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.header-menu-dropdown {
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    border: 1px solid rgb(232.9, 232.9, 232.9);
    position: absolute;
    background: #FBFAFE;
    z-index: 10;
    top: calc(100% + 5px);
    left: auto;
    right: 0;
    overflow: hidden;
    padding: 6px;
    display: none;
    width: 200px;
}

.header-account .header-menu-dropdown {
    width: auto;
}

.header-menu-dropdown-container.active .header-menu-dropdown {
    display: block;
}

.header-menu-dropdown-inner {
    height: 100%;
    width: 100%;
    overflow: auto;
    position: relative;
}

.header-menu-dropdown-inner a {
    padding: 7px 10px;
    font-size: 14px;
}


body.menu-open {
    overflow: hidden;
}

/* затемнение фона */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    z-index: 11;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}


.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 12;
    width: 320px;
    transition: 0.2s ease-in;
    transform: translateX(-100%);
}

.main-menu.active {
    transform: translateX(0);
}

.main-menu-inner {
    height: 100%;
    width: 100%;
    overflow: auto;
    position: absolute;
    background: #fff;
    max-width: 90vw;
    box-shadow: 0 0 30px -2px rgba(0, 0, 0, .5);
    padding: 8px;
}

body.admin-bar .main-menu-inner {
    padding-top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .main-menu-inner {
        padding-top: 46px;
    }
}

.main-menu-inner .menu-icon img {
    height: 18px;
    width: 18px;
    line-height: 1;
    display: inline-flex;
    position: relative;
    vertical-align: -0.125em;
    flex-shrink: 0;
    overflow: visible;
}

.main-menu-inner .menu-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.main-menu-inner a {
    color: rgb(100.3, 100.3, 100.3);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    padding: 10px 6px;
    border-radius: 4px;
    transition: 0.1s ease;
}

.main-menu-inner a:hover {
    background: rgb(241.74, 241.74, 241.74);
    color: rgb(67.15, 67.15, 67.15);
}

.main-menu-inner a.active, .main-menu-inner a.active:hover {
    background: #d1f0ff;
}

.main-menu-inner a.active {
    font-weight: 500;
    color: rgb(67.15, 67.15, 67.15);
}

.main-menu-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    padding: 10px 20px;
    background: #017DEF;
    border-radius: 50px;
}

#header .header-menu-dropdown-inner a {
    justify-content: flex-start;
    color: rgb(100.3, 100.3, 100.3);
    font-weight: 500;
}

.header-mobile .header-container.mobile-menu-container {
    padding: 30px 0;
}

.header-container .site-branding {
    margin-right: 20px;
}

.header-container .site-branding img {
    height: 44px;
    width: auto;
}

.header-container {
    font-size: 16px;
    font-weight: 400;
}

.header-mobile {
    position: relative;
    display: none;
}

.header-mobile-menu-header {
    position: relative;
    background: #FBFAFE;
    z-index: 11;
}

.header-mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FBFAFE;
    display: none;
    transition: 0.3s ease;
    opacity: 1;
    z-index: 10;
}

.header-mobile-menu.opened {
    display: block;
    opacity: 1;
}

.mobile-info-container {
    padding: 15px 0;
    position: relative;
}

.mobile-info-container:before, .header-mobile-menu:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #017DEF33;
}

.main-menu-nav.header-container-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-mobile .main-menu-nav.header-container-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-menu-item-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.header-mobile .header-menu-item-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    margin-bottom: 30px;
}

.header-mobile .header-menu-item-content:last-child {
    margin-bottom: 0;
}

.mobile-menu-info {
    color: #191A1FB2;
    font-size: 12px;
    line-height: 1.1;
}

.header-menu-item-content .header-info-icon {
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.header-menu-item-content:last-child {
    margin-right: 0;
}

.mobile-header-self-container .header-container-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 0;
}

#header a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-menu-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.burger-menu {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    cursor: pointer;
}

.header-menu-item.header-account img {
    width: auto;
    height: 40px;
    border-radius: 50%;
    display: block;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.main-menu-button img {
    width: auto;
    height: 20px;
    display: block;
    margin-left: 3px;
}

.main-menu-button img.is_opened {
    display: none;
}
.main-menu-button img.is_closed {
    display: block;
}

.main-menu-button.active img.is_closed {
    display: none;
}
.main-menu-button.active img.is_opened {
    display: block;
}

.header-menu-item-content .header-menu-item.header-login, a.comments-unlogged-button {
    color: #ffffff;
    padding: 10px 25px;
    background: #FD412B;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
}

.header-mobile-menu .header-menu-item-content .header-menu-item.header-login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 56px;
}

a.comments-unlogged-button {
    padding: 15px 40px;
}

.header-menu-item-content .header-menu-item.header-login img {
    width: 32px;
    height: auto;
}

.header-menu-item-content .header-menu-item .header-info-icon {
    width: 24px;
    height: 24px;
    margin-left: 5px;
    position: relative;
}

.header-menu-item-content .header-info-icon .info-popup-menu {
    position: absolute;
    width: 300px;
    font-size: 14px;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    z-index: 10;
}

.info-popup-menu-content {
    opacity: 1;
    background: #FBFAFE;
    border: 2px solid #017DEF;
    border-radius: 12px;
    padding: 8px 10px;
    z-index: 2;
    position: relative;
    top: -1px;
}

.info-popup-menu-decoration {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.header-menu-item .header-info-icon .info-popup-menu-decoration img {
    width: 20px;
    display: block;
}

.header-menu-item .header-info-icon img {
    width: 100%;
    height: auto;
}

.header-info-icon .info-popup-menu {
    display: none;
}

.header-info-icon:hover .info-popup-menu {
    display: block;
}

.footer-wrapper {
    background: #E2F3FF;
    padding: 50px 0 20px 0;
}

.footer-wrapper .footer-det {
    height: 1px;
    width: 100%;
    background: #017DEF33;
    margin: 20px 0;
}

.footer-wrapper .footer-top {
    display: flex;
    justify-content: space-between;
}

.footer-bottom {
    display: flex;
    justify-content: center;
}

.footer-bottom .footer-content {
    color: #191A1FB2;
    font-size: 12px;
    text-align: center;
    max-width: 620px;
}

.footer-el-mobile{
    display: none;
}

.footer-top .footer-content .footer-logo-link img {
    height: 44px;
    width: auto;
}

.footer-top .footer-content .footer-logo p {
    margin-top: 20px;
}

.footer-top .footer-content {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 0.8fr 1.1fr 1.1fr;
}

.footer-top .footer-content .footer-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
}

.footer-top .footer-content .footer-menu-list p {
    margin-bottom: 20px;
}

.content-area {
    min-height: 400px;
}

.cookie-agreement-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    text-align: center;
    font-size: 16px;
    padding: 20px 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.7s ease;
    z-index: 3;
}

.cookie-agreement-wrapper.show {
    transform: translateY(0);
}

.cookie-agreement-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-agreement-content span {
    text-align: left;
}

.cookie-agreement-content button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #017DEF;
    padding: 10px 30px;
    border-radius: 50px;
    margin-left: 30px;
    color: #ffffff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    width: 240px;
    height: 60px;
}

.font-strong {
    font-weight: 700;
}

.color-blue {
    color: #017DEF;
}

.el-container.intro {
    background-position: right bottom;
    background-size: cover;
    min-height: 500px;
    background-repeat: no-repeat;
    padding: 55px 0 55px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FBFAFE;
}

.el-container.intro .container-content-el.left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.el-container.intro .container-content-el.right {
    display: flex;
    align-items: center;
}

.el-container.intro .container-content-el img {
    width: 100%;
    height: auto;
}

.el-container.intro .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.el-container.intro .login-button {
    color: #ffffff;
    width: 340px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #017DEF;
    margin-bottom: 20px;
}

.el-container.intro .intro-title {
    margin-bottom: 15px;
    font-size: 32px;
    line-height: 1.1;
}

.el-container.intro .intro-text {
    margin-bottom: 20px;
}

.el-container.intro .bottom-text {
    color: #017DEF;
}

.el-container.intro .container-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

.after-intro {
    padding: 35px 0;
}

.after-intro .items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 30px;
}

.after-intro .items .image {
    display: block;
    height: 50px;
    margin-bottom: 20px;
}

.after-intro .items img {
    display: block;
    height: 100%;
    width: auto;
}

.after-intro .items .image {
    padding: 0 15px;
    position: relative;
}

.after-intro .items .text {
    padding: 3px 15px;
    position: relative;
    /*min-height: 80px;*/
    height: calc(100% - 75px);
}

.after-intro .items .text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: #fff;
    border-radius: 3px;
}

.info-block {
    padding: 90px 0 110px 0;
}

.info-block .info-block-content {
    width: 100%;
    max-width: 980px;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E2F3FF;
    border-radius: 30px;
    position: relative;
}

.info-block .info-block-content .rectangle {
    position: absolute;
    top: calc(100% - 20px);
    left: 20%;
    width: 88px;
    height: auto;
}

.info-block .info-block-content .info-block-content-inner {
    max-width: 650px;
}

.info-block .info-block-content .title h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px;
}

.info-block .info-block-content .content {
    margin-bottom: 20px;
}

.info-block .items .text,
.forum-info .list-items .text,
.about-site .list-items .text,
.login-register-page .list-items .text
{
    position: relative;
    padding-left: 25px;
    font-size: 16px;
    margin-bottom: 8px;
}

.register-container[data-role="Doctor"] [data-register-for="Patient"]{
    display: none;
}

.register-container[data-role="Patient"] [data-register-for="Doctor"] {
    display: none;
}

.login-register-page .register-stage {
    padding: 50px 0;
    min-height: 550px;
}

.login-register-page .list-items .text
{
    margin-bottom: 15px;
}

.info-block .items .text {
    font-weight: 600;
}

.info-block .items .text:last-child,
.forum-info .list-items .text:last-child,
.about-site .list-items .text:last-child
{
    margin-bottom: 0;
}

.info-block .items .text img,
.forum-info .list-items .text img,
.about-site .list-items .text img,
.login-register-page .list-items .text img
{
    position: absolute;
    left: 0;
    transform: translateY(calc(-50% - 1px));
    top: 50%;
    width: 16px;
    height: auto;
}

.info-block .button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.info-block .button a {
    width: 240px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background: #017DEF;
}

.el-container.about-us .container-content .grid-image,
.el-container.forum-info .container-content .grid-image,
.el-container.shop-info .container-content .grid-image
{
    width: 100%;
    height: auto;
}

.el-container.info-block .el-container-inner,
.el-container.about-us .el-container-inner,
.el-container.forum-info .el-container-inner,
.el-container.shop-info .el-container-inner
{
    display: flex;
    justify-content: center;
}

.el-container.about-us .container-content,
.el-container.shop-info .container-content {
    grid-template-columns: 1fr 1fr;
}

.el-container.forum-info .container-content {
    grid-template-columns: 0.6fr 0.4fr;
}

.el-container.shop-info .container-content {
    grid-template-columns: 0.45fr 0.55fr;
}

.el-container.about-us .container-content,
.el-container.forum-info .container-content,
.el-container.shop-info .container-content {
    grid-column-gap: 40px;
}

.el-container.about-us .container-content,
.el-container.forum-info .container-content,
.el-container.shop-info .container-content {
    display: grid;
    width: 100%;
    max-width: 980px;
}

.el-container.about-us .container-content {
    padding: 70px 0;
}

.el-container.forum-info {
    margin: 90px 0;
}

.el-container.shop-info .container-content {
    padding: 70px 0;
}


.el-container.about-us .container-content .grid-image {
    display: block;
    width: 100%;
    height: auto;
}

.el-container.about-us .el-container-inner-inner.right,
.el-container.forum-info .el-container-inner-inner,
.el-container.shop-info .el-container-inner-inner
{
    display: flex;
    align-items: center;
}

.el-container.forum-info .el-container-inner-inner.grid-image-container,
.el-container.shop-info .el-container-inner-inner.grid-image-container,
.el-container.about-us .el-container-inner-inner.grid-image-container
{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.el-container.shop-info .el-container-inner-inner.grid-image-container {
    min-height: 400px;
}

.el-container.forum-info .el-container-inner-inner.grid-image-container {
    min-height: 500px;
}

.el-container.about-us .el-container-inner-inner.grid-image-container {
    min-height: 400px;
}

.el-container.forum-info .el-container-inner-inner.grid-image-container img.grid-image,
.el-container.shop-info .el-container-inner-inner.grid-image-container img.grid-image,
.el-container.about-us .el-container-inner-inner.grid-image-container img.grid-image
{
    position: absolute;
    height: 100%;
    width: auto;
    top: 50%;
    transform: translateY(-50%);
}

.el-container.forum-info .el-container-inner-inner.grid-image-container img.grid-image {
    left: 0;
}

.el-container.shop-info .el-container-inner-inner.grid-image-container img.grid-image {
    right: 0;
    left: auto;
}

.el-container.about-us .el-container-inner-inner.grid-image-container img.grid-image {
    right: 0;
    left: auto;
}

.mobile-el {
    display: none;
}

.el-container.about-us .el-container-inner-inner .el-container-inner-inner-content .title h2,
.el-container.forum-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
.el-container.shop-info .el-container-inner-inner .el-container-inner-inner-content .title h2
{
    font-size: 36px;
}

.el-container.about-us .el-container-inner-inner .el-container-inner-inner-content .title,
.el-container.forum-info .el-container-inner-inner .el-container-inner-inner-content .title,
.el-container.shop-info .el-container-inner-inner .el-container-inner-inner-content .title
{
    margin-bottom: 17px;
}

.el-container.about-us .items,
.el-container.forum-info .items,
.el-container.shop-info .items
{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
}

.el-container.about-us .items .item,
.el-container.forum-info .items .item,
.el-container.shop-info .items .item
{
    color: #fff;
    background: #017DEF;
    border-radius: 16px;
}

.el-container.about-us .items .item
{
    padding: 10px 14px;
}

.el-container.forum-info .items .item
{
    padding: 15px 15px 20px 15px;
}

.el-container.shop-info .items .item
{
    padding: 15px;
}

.el-container.about-us .items .item .list-title,
.el-container.shop-info .items .item .list-title
{
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 32px;
    line-height: 1;
}

.el-container.forum-info .items .item .list-title {
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 0.9;
    display: flex;
    align-items: flex-end;
}

.el-container.forum-info .items .item .list-title .big {
    font-size: 50px;
    margin-right: 5px;
}

.el-container.forum-info .items .item .list-title .small {
    font-size: 30px;
    position: relative;
    bottom: 3px;
}

.el-container.forum-info .image-mobile {
    display: none;
}

.el-container.forum-info .subtitle {
    font-size: 24px;
    margin-bottom: 15px;
}

.el-container.forum-info .subsubtitle {
    color: #017DEF;
    margin-bottom: 15px;
}

.el-container.forum-info .list-items {
    margin-bottom: 15px;
}

.el-container.about-site .list-items {
    margin-bottom: 15px;
}

.thank-you {
    text-align: center;
    margin: 80px 0 80px;
}

.thank-you .thank-you-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
}

.thank-you .button a {
    width: 340px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background: #017DEF;
}

.thank-you .title {
    margin-bottom: 15px;
}

.thank-you .title h2 {
    font-size: 36px;
    color: #017DEF;
}

.thank-you .additional_text {
    font-weight: 600;
    color: #017DEF;
    margin-top: 5px;
}

.thank-you .button {
    margin-top: 15px;
}

.about-site {
    margin: 80px 0 80px;
}

.about-site .title {
    margin-bottom: 25px;
    text-align: center;
}

.about-site .title h2 {
    font-size: 36px;
}

.about-site .description {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.description-bottom .strong {
    font-weight: 600;
}

.about-site .elements-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    margin-bottom: 30px;
    grid-auto-rows: 1fr;
}

.about-site .elements-buttons .element-button {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px 25px;
    background: #0765BB;
    border-radius: 16px;
    color: #ffffff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.about-site .elements-buttons .element-button .element-image {
    height: 34px;
    width: auto;
    margin-bottom: 6px;
}

.about-site .elements-buttons .element-button .element-image img {
    display: block;
    height: 100%;
    width: auto;
}

.about-site .element-content {
    display: none;
}

.about-site .element-content.active {
    display: block;
}

.single-post-content {
    margin: 20px 0;
}

.single-post-content h1 {
    margin: 20px 0 15px 0;
    font-size: 36px;
}

.login-register-page h1,
.login-register-page h2,
.login-register-page .reg-q
{
    margin-bottom: 20px;
    font-size: 32px;
}

.login-register-page h1 .mobile {
    display: none;
}

.login-register-page .reg-q {
    margin-bottom: 10px;
    color: #017DEF;
    font-weight: bold;
}

.login-register-page .reg-text {
    max-width: 500px;
    margin: 0 auto;
}

.login-register-page [data-step="2"] h2 {
    margin-bottom: 15px;
}

.autocomplete-group {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    z-index: 100;
    display: none;
    max-height: 160px;
    overflow-y: auto;
}

.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    transition: background .15s ease;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: #f5f7fa;
}

.autocomplete-label {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.3;
}

.autocomplete-title {
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 4px;
    line-height: 1.3;
}

.register-container[data-flow-step="1"] [data-step="1"] {
    display: block;
}
.register-container[data-flow-step="2"] [data-step="2"] {
    display: block;
}
.register-container[data-flow-step="3"] [data-step="3"] {
    display: block;
}

.register-container[data-flow-step="1"] [data-step="2"],
.register-container[data-flow-step="1"] [data-step="3"]
{
    display: none;
}
.register-container[data-flow-step="2"] [data-step="1"],
.register-container[data-flow-step="2"] [data-step="3"]
{
    display: none;
}
.register-container[data-flow-step="3"] [data-step="1"],
.register-container[data-flow-step="3"] [data-step="2"]
{
    display: none;
}

.register-mobile .reg-el-self {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 1px 12px 16px 2px #017DEF33;
    border-radius: 16px;
}

.register-mobile .reg-el-self h2,
.register-mobile .reg-q
{
    font-size: 18px;
    margin-bottom: 13px;
    text-align: center;
}

.register-mobile .reg-el-self h2 {
    margin-bottom: 10px;
}

.register-mobile .reg-el-mobile-buttons {
    display: flex;
    flex-direction: column;
}

.register-mobile .reg-el-mobile-buttons .select-role-button {
    width: 100%;
    height: 60px;
    border-radius: 50px;
    background: #017DEF;
    color: #ffffff;
    cursor: pointer;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    transition: 0.2s ease-in-out;
}

.login-register-page [data-step="2"] .reg-el-mobile-outer {
    padding: 18px 22px 22px 22px;
}

.register-mobile .reg-el-mobile-buttons {
    margin-top: 20px;
}

.register-mobile .reg-el-mobile-buttons .select-role-button:last-child {
    margin-bottom: 0;
}

.reg-step-text {
    margin-bottom: 25px;
}

.login-register-page [data-step="2"] .reg-step-text {
   text-align: center;
}

.login-register-page [data-step="2"] {
    grid-gap: 20px;
    color: #000000;
    background: #E2F3FF;
}

.login-register-page [data-step="2"] .register-blue {
    max-width: 700px;
    margin: 0 auto;
}

.login-register-page [data-step="2"] .grid-el {
    border-radius: 16px;
    background: #FBFAFE;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: 0.2s ease-in-out;
}

.login-register-page [data-step="2"] .grid-el:hover {
    box-shadow: 1px 12px 16px 2px #017DEF33;
    background: #ffffff;
}
.login-register-page [data-step="2"] .grid-el:hover .reg-el-text .button {
    background: #0765BB;
    transition: 0.2s ease-in-out;
}

.login-register-page [data-step="2"] .grid-el .reg-el-text {
    padding: 18px 22px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-register-page [data-step="2"] .grid-el .reg-el-text .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}
.login-register-page [data-step="2"] .grid-el .reg-el-text .text {
    margin-bottom: 15px;
}
.login-register-page [data-step="2"] .grid-el .reg-el-text .button {
    background: #017DEF;
    color: #ffffff;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.register-mobile {
    display: none;
}

@media (max-width: 700px) {
    .register-mobile {
        display: block;
    }
    .register-desktop {
        display: none;
    }
}

.reg-step-back {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    color: #017DEF;
}

.reg-step-back .back-el {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 500;
}

.reg-step-back .back-el img {
    height: 24px;
    width: auto;
    margin-right: 2px;
    position: relative;
    top: -2px;
}

.reg-el-img {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.reg-el-img img {
    width: 100%;
    height: auto;
}

.single-post-content p {
    margin: 5px 0 8px 0;
}


.single-post-content a {
    color: #017DEF;
}

.single-post-content h2 {
    margin: 15px 0 15px 0;
    font-size: 34px;
}

.single-post-content h3 {
    margin: 15px 0 15px 0;
    font-size: 28px;
}

.single-post-content h4 {
    margin: 10px 0 10px 0;
    font-size: 24px;
}

.single-post-content h5 {
    margin: 10px 0 10px 0;
    font-size: 20px;
}

.single-post-content h6 {
    margin: 10px 0 10px 0;
    font-size: 17px;
}

.tags a {
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 24px;
    border: 1px solid #FD412B;
    display: inline-block;
    margin: 0 12px 10px 0;
}

.single-post .single-container {
    margin: 40px 0 0 0;
}

.single-post .entry-header-container {
    margin-bottom: 30px;
}

.single-post .entry-header-video {
    margin-bottom: 30px;
}

.single-post .entry-header-video .single-video {
    margin-bottom: 15px;
    aspect-ratio: 590 / 233;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
}

.single-post .entry-header-video .single-video video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* или contain */
    display: block;
}

.single-post .entry-header-video .additional-info .add-info-el {
    color: #7A7A7A;
}

.single-post .entry-header-container-inner {
    background: #017DEF;
    border-radius: 16px;
    overflow: hidden;
}

.single-post .entry-header-container-inner.has-image {
    display: grid;
    grid-template-columns: auto 400px;
    grid-gap: 10px;
}

.single-post .entry-header-container-inner.has-no-image .entry-header-content-element.header-image {
    display: none;
}

.single-post .entry-header-container-inner.has-image .entry-header-content-element.header-image {
    height: 100%;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.single-post .entry-header-container-inner.has-image .entry-header-content-element.header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
}

.single-post .entry-header-content .entry-header-content-el {
    color: #ffffff;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    position: relative;
}

.favorites-button-container {
    position: relative;
}

.favorites-collection {
    background: #FD412B1A;
}

.favorites-button {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #ffffff;
}

.favorites-button svg {
    display: block;
    position: absolute;
    transition: 0.2s ease-in-out;
    width: 30px;
    height: 30px;
}

.single-post .entry-header-content .entry-header-content-el h1 {
    font-size: 32px;
    margin-bottom: 30px;
    line-height: 1.2;
}

.single-post .additional-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.single-post .additional-info .add-info-el {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 25px;
}

.single-post .additional-info .add-info-el img {
    display: block;
    margin-right: 9px;
    position: relative;
    top: -1px;
}

.single-post .additional-info .add-info-el:last-child {
    margin-right: 0;
}

.single-post .bottom-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.single-post .like-dislike-button {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.single-post .like-dislike-button {
    margin-right: 20px;
}

.single-post .like-dislike-button .action-container {
    position: relative;
    width: 44px;
    height: 44px;
}

.single-post .like-dislike-button .action-container img {
    position: absolute;
    width: auto;
    height: 100%;
    transition: 0.2s ease-in-out;
}

.single-post .like-dislike-button .action-container:hover img {
    transform: scale(1.05);
}

.single-post .like-dislike-button .action-container {
    margin-right: 10px;
}

.single-post .like-dislike-button .action-container img.active {
    display: none;
}

.single-post .like-dislike-button.active .action-container img.not_active {
    display: none;
}
.single-post .like-dislike-button.active .action-container img.active {
    display: block;
}

.single-post .bottom-buttons .share-button {
    margin-right: 8px;
}

.single-post .share-buttons img {
    display: block;
    height: 40px;
    width: auto;
}

.interactions {
    margin-top: 30px;
}

.interactions-inner-el {
    display: flex;
    width: 100%;
    padding-right: 300px;
    justify-content: space-between;
}

.single-post .bottom-title {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 20px;
}

.comments-outer {
    margin-top: 40px;
    margin-bottom: 40px;
}

.single-post .comments-outer .bottom-title {
    font-size: 30px;
}

.comments-block {
    padding: 50px 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #C2C2C2;
    border-radius: 30px;
}

.comments-block .comments-unlogged-title {
    font-size: 20px;
}

.comments-block a.comments-unlogged-button {
    margin-left: 30px;
}

.single-post #commentform textarea {
    display: block;
    width: 100%;
    height: 150px;
    border: 1px solid #C2C2C2;
    border-radius: 30px;
    padding: 17px 20px;
    font-size: 16px;
}

.single-post #commentform textarea, .single-post #commentform textarea:focus, .single-post #commentform textarea:active {
    outline: none;
}

.single-post #commentform button[type="submit"] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 60px;
    border-radius: 30px;
    background: #017DEF;
    color: #ffffff;
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
    border: none;
    outline: none;
    font-size: 16px;
}

.single-post #commentform button[type="submit"]:focus, .single-post #commentform button[type="submit"]:active {
    outline: none;
}

.single-post .more-posts {
    background: #E2F3FF;
}

.more-posts h2 {
    font-size: 34px;
}

.categories .see-all-posts {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.categories .see-all-posts a {
    position: relative;
}

.categories .see-all-posts a .process-spinner {
    background: #FBFAFE;
}

button .process-spinner {
    background: #017DEF;
}

.posts-collection h2 {
    font-size: 34px;
}

.slider-grid-collection-margin {
    margin: 40px 0;
}
.slider-grid-collection-padding {
    padding: 40px 0;
}

.slider-grid-collection h2 {
    margin-bottom: 20px;
}

.categories .cat-title {
    border: 1px solid #017DEF;
    border-radius: 24px;
    padding: 8px 20px;
    display: inline-block;
    margin: 0 10px 8px 0;
}

.categories .container-cat-titles {
    margin-bottom: 20px;
}

.categories .cat-title.active {
    color: #fff;
    background: #017DEF;
}

.grid-posts-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    align-items: stretch;
}

.grid-posts-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    align-items: stretch;
}


.grid-posts-content {
    display: grid;
}

.grid-posts-content.posts-slider {
    display: block;
}

.posts-tab {
    display: none;
}

.posts-tab.active {
    display: block;
}

.grid-posts-content:not(.posts-slider) .grid-posts-item,
.grid-posts-content.posts-slider .grid-posts-item-outer
{
    position: relative;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: 0.2s ease-in-out;

    z-index: 1;

    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.05);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);

    transform: translateZ(0);
}

.favorites-collection .grid-posts-content:not(.posts-slider) .grid-posts-item {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.favorites-collection h2 {
    display: flex;
    align-items: center;
}

.favorites-collection .favorites-button {
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    border-radius: 6px;
}

.favorites-collection h2 svg {
    display: block;
    width: 32px;
    height: auto;
    margin-left: 12px;
    position: relative;
}

.posts-slider .slick-slider {
    padding: 15px 0!important;
}

.posts-slider .slick-list {
    margin: -15px 0!important;
    padding: 15px 0!important;
}

.grid-posts-content .grid-posts-item-top {
    height: 190px;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.grid-posts-content .grid-posts-item-top a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.grid-posts-content .grid-posts-item-top a .live-badge {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-posts-content .grid-posts-item-top a .live-badge img {
    width: 60px;
    height: auto;
}

.grid-posts-content .grid-posts-item-top a img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* заполняет блок */
    object-position: center;    /* центрирует */
    display: block;
    z-index: 1;
}

.grid-posts-content .grid-posts-item-bottom {
    padding: 20px;
    flex: 1;
    display: flex;
}

.grid-posts-content .grid-posts-item-bottom .grid-posts-item-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.grid-posts-content .grid-posts-item-bottom .grid-posts-item-content .grid-posts-item-title {
    margin-bottom: 30px;
}

.grid-posts-content .grid-posts-item-bottom .grid-posts-item-content .grid-posts-item-title h3 {
    font-size: 16px;
}

.grid-posts-content .grid-posts-item-bottom .grid-posts-item-content .grid-posts-item-additional {
    display: flex;
    justify-content: space-between;
}

.grid-posts-item-additional-el {
    display: flex;
    align-items: center;
    color: #7A7A7A;
}

.grid-posts-item-additional-el img {
    display: block;
    position: relative;
    top: -1px;
    margin-right: 5px;
}

@media (max-width: 1200px) {
    .grid-posts-content {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 992px) {
    .grid-posts-content {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-posts-content .grid-posts-item-top {
        height: 240px;
    }
}
@media (max-width: 576px) {
    .grid-posts-content {
        grid-template-columns: repeat(1, 1fr);
    }
}

.info-popup.opened {
    display: flex;
}

.info-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.info-popup.show {
    display: flex;
}

.info-popup .info-popup-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px
}

.info-popup .info-popup-close svg, .info-popup .info-popup-close img {
    width: 20px;
    min-width: 20px;
    height: auto;
    display: block;
}

.info-popup .info-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.info-popup .info-popup-content {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: 16px;
    width: 650px;
    max-width: calc(100% - 40px);
    padding: 100px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-popup .info-popup-content .popup-text {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.info-popup .info-popup-content .popup-button {
    width: 340px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background: #017DEF;
    margin-top: 30px;
}

.single-page .single-container {
    margin: 50px 0 60px 0;
}

.archive-page {
    padding: 50px 0 60px 0;
    background: #FBFAFE;
}

.archive-page .archive-header {
    margin-bottom: 25px;
}

.archive-page .navigation {
    margin-top: 35px;
}

.archive-page .navigation .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
}

.archive-page .navigation .nav-links a, .archive-page .navigation .nav-links span {
    margin: 0 7px;
}

.slider-el-container {
    position: relative;
}

.slider-arrow-container {
    position: relative;
}

.slider-arrow {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: #FFFFFFCF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    opacity: 1;
    transition: 0.2s ease-in-out;
}

.slider-arrow:hover {
    opacity: 0.85;
}

.slider-arrow.sl-prev {
    left: 0;
    right: auto;
}

.slider-arrow.sl-next {
    right: 0;
    left: auto
}

.posts-collection .slider-arrow {
    background: #ffffff;
}

.posts-collection .slider-arrow.sl-prev {
    transform: translateY(-50%) translateX(-50%);
}

.posts-collection .slider-arrow.sl-next {
    transform: translateY(-50%) translateX(50%);
}

.slider-arrow svg {
    display: block;
    width: 22px;
    height: auto;
}

.top-page-slider {
    background: #017DEF;
}

.top-page-slider  .slick-dotted.slick-slider {
    margin-bottom: 0;
}

.top-page-slider .slick-dots {
    bottom: 35px;
    left: 90px;
    text-align: left;
    display: flex;
    width: calc(100% - 70px);
}

.top-page-slider .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #E2F3FF;
    border-radius: 50%;
}

.top-page-slider .slick-dots li.slick-active button {
    background: #FD412B;
}

.top-page-slider .slick-dots li button:before {
    content: none;
}

.top-page-slider .slick-dots li {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
    padding: 0;
    cursor: pointer;
}

.top-page-slider .slider-el-wrapper {
    padding: 0 90px;
}

.top-page-slider .slick-initialized .slick-slide .slider-el-inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}

.top-page-slider .slider-top-left {
    padding: 80px 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.top-page-slider .slider-top-left .sl-top {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.top-page-slider .slider-top-left .sl-middle {
    margin-bottom: 25px;
}

.top-page-slider .slider-top-left .sl-bottom a {
    width: 270px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 10px 20px;
}

.top-page-slider .slider-top-right {
    padding-top: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.top-page-slider .slider-top-right img {
    display: block;
    height: 100%;
    max-height: 400px;
    width: auto;
}

.slider-outer .slick-track {
    display: flex !important;
}

.slider-outer .slick-slide {
    height: inherit !important;
}

.slider-outer .slick-slide > div {
    height: 100%;
}

.posts-new {
    background: #E2F3FF;
}

.posts-collection .posts-slider {
    margin: 0 -10px; /* компенсируем половину gap */
}

.posts-collection .posts-slider .slick-slide {
    padding: 0 10px; /* создаём gap 20px */
    box-sizing: border-box;
}

/* comments */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment {
    margin: 20px 0;
}

.comment-list .comment-list.level-1 {
    margin-left: 0;
}

.comment-list .comment-list.level-2,
.comment-list .comment-list.level-3,
.comment-list .comment-list.level-4 {
    margin-left: 26px;
}

.comment-list .comment-list .comment-item {
    position: relative;
    padding-left: 26px;
}

.comment-list .comment-list .comment-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.29297 2.29297L2.58594 7L7.29297 11.707L8.70703 10.293L6.41406 8H15C17.2204 8 19 9.77962 19 12V21H21V12C21 8.69824 18.3018 6 15 6H6.41406L8.70703 3.70703L7.29297 2.29297Z' fill='%237A7A7A'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* comment block */
.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* avatar */
.comment-avatar {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #017DEF;
}

.comment-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.comment-avatar {
    font-size: 15px;
    color: #ffffff;
}

/* body */
.comment-body {
    flex: 1;
    /*border: 1px solid #000;*/
}

/* header */
.comment-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 13px;
}

.comment-header img {
    display: block;
}

.comment-header .comment-header-item {
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.comment-header .comment-header-item:last-child {
    margin-right: 0;
}

.comment-header .comment-header-item.comment-date {
    font-size: 13px;
}

.comment-author {
    font-size: 18px;
    color: #191A1F;
}

.comment-date {
    font-size: 16px;
    color: #7A7A7A;
}

/* text */
.comment-text {
    font-size: 16px;
    margin-bottom: 13px;
}

/* actions */
.comment-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.comment-actions .like-comment {
    cursor: pointer;
    margin-right: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.comment-actions .like-comment .like-container {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
}

.comment-actions .like-comment .like-container svg {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.2s ease-in-out;
}

.comment-actions .like-comment .like-container svg path {
    stroke: #7A7A7A;
}

.comment-actions .like-comment .like-container:hover svg,
.favorites-button:hover svg
{
    transform: scale(1.16);
}

.comment-actions .like-comment .like-container.active svg,
.favorites-button.active svg
{
    fill: #FD412B;
}
.comment-actions .like-comment .like-container.active svg path {
    stroke: #FD412B;
}

.favorites-button svg path {
    stroke: #FD412B;
}

.comment-actions .like-comment .like-comment-count {
    color: #7A7A7A;
    font-size: 15px;
    margin-left: 8px;
}

.comment-actions a {
    color: #7A7A7A;
    font-size: 15px;
    text-decoration: none;
}

.float-labels .form-group {
    position: relative;
    margin: 30px 0;
}

.float-labels.restore-pass-form .form-group {
    margin: 10px 0 30px 0;
}

.float-labels.restore-pass-form p {
    margin: 20px 0;
    font-size: 14px;
    color: #017DEF;
}

.service-page {
    padding: 50px 0;
    min-height: 550px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.profile-container .float-labels .form-group {
    position: relative;
    margin: 10px 0 30px;
}

.restore-form.float-labels .form-group.form-password {
    margin: 30px 0 20px 0;
}

.float-labels .form-group.form-password .show-hide {
    position: absolute;
    left: auto;
    right: 20px;
    top: 18px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}


.float-labels .form-group.form-password .show-hide img {
    display: block;
}
.float-labels .form-group.form-password .show-hide img.active {
    display: none;
}
.float-labels .form-group.form-password .show-hide.active img {
    display: none;
}
.float-labels .form-group.form-password .show-hide.active img.active {
    display: block;
}

.float-labels .form-group.form-password .show-hide img {
    display: block;
    width: 100%;
    height: 100%;
}

.float-labels .form-group input {
    width: 100%;
    font-size: 16px;
    border: 1px solid #F6F6F6;
    background: #F6F6F6;
    border-radius: 30px;
    height: 60px;
    padding: 20px;
    outline: none;
}

.float-labels .form-group.form-password input {
    padding: 20px 50px 20px 20px;
}

.float-labels .form-group input:focus, .float-labels .form-group input:active {
    outline: none;
}

.float-labels .form-group label {
    position: absolute;
    left: 20px;
    top: 20px;
    color: #7A7A7A;
    background: transparent;
    padding: 0 4px;
    transition: 0.2s ease;
    pointer-events: none;
}

.float-labels .form-group label.required {
    color: #FD412B;
}

/* при фокусе */
.float-labels .form-group input:focus + label {
    top: 3px;
    font-size: 11px;
    color: #7A7A7A;
}

/* когда есть текст */
.float-labels  .form-group input:not(:placeholder-shown) + label {
    top: 3px;
    font-size: 11px;
}

.float-labels button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    border-radius: 30px;
    background: #017DEF;
    color: #ffffff;
    font-weight: 500;
    cursor: pointer;
    margin-top: 30px;
    border: none;
    outline: none;
    font-size: 16px;
}

.float-labels button.step_final_register {
    margin-top: 20px;
}

.reg-doc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 25px;
    padding: 4px 0;
}

.reg-doc.active .reg-doc-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.reg-doc .reg-doc-img {
    display: none;
}

.reg-doc .reg-doc-img {
    font-size: 13px;
}

.reg-doc .reg-doc-img img {
    display: block;
    cursor: pointer;
    margin-left: 10px;
    height: 12px;
}

.profile-container .float-labels .change-email-container .change-email-trigger button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    border: 1px solid #017DEF;
    border-radius: 25px;
    background: unset;
    color: unset;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
    width: auto;
    height: auto;
    margin: 0;
}

.change-email-container .new-email-container,
.change-email-container #change-email-trigger-close
{
    display: none;
}

.change-email-container.opened .new-email-container,
.change-email-container.opened #change-email-trigger-close
{
    display: inline;
}

.change-email-container.opened #change-email-trigger-open
{
    display: none;
}

.profile-container .float-labels .change-email-container .form-group {
    margin: 10px 0 10px;
}

.profile-container .float-labels .change-email-container button {
    margin: 10px 0 10px;
}

.register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

[data-step="2"] .register-grid {
    grid-gap: 20px;
    align-items: stretch;
}

@media (max-width: 1200px) {
    [data-step="1"] .register-grid {
        grid-template-columns: 1fr;
        grid-gap: 0;
        max-width: 700px;
        margin: 0 auto;
    }
    [data-step="1"] .register-grid .list-items {
        display: none;
    }
}



#register-intro form.active {
    display: block;
}

#register-intro form {
    display: none;
}

.forms-container {
    border: 2px solid #017DEF;
    border-radius: 30px;
    padding: 40px;
    background: #ffffff;
}

.reset-page-form.forms-container {
    padding: 20px;
}

.reset-page-form.forms-container input {
    width: 300px;
}

.form-tabs {
    display: flex;
    justify-content: flex-start;
}

.form-tabs {
    border-bottom: 1px solid #7A7A7A1A;
}

.form-tabs .tab {
    padding: 7px 0;
    cursor: pointer;
    margin-right: 25px;
    font-size: 22px;
    position: relative;
    font-weight: 500;
}

.form-tabs .tab.active {
    color: #017DEF;
}

.form-tabs .tab.active:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #017DEF;
}

.form-info .show-restore-pass {
    color: #017DEF;
    border-bottom: 1px solid #017DEF;
    cursor: pointer;
}

.profile-frame-self {
    width: 100%;
    aspect-ratio: 1 / 1; /* делает квадрат */
    border-radius: 50%;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.profile-frame-self img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-container {
    padding: 55px 0;
    background: #F9FAFB;
}

.profile-container .float-labels .form-group input,
.register-form.float-labels .form-group input
{
    border: 1px solid #C2C2C2;
}

.step-final .agreement {
    padding-left: 28px;
    position: relative;
    margin-bottom: 6px;
}

.step-final .agreement:last-child {
    margin-bottom: 0;
}

.step-final .custom-checkbox-label {
    position: absolute;
    top: 0;
    left: 0;
}

.custom-checkbox-input {
    display: none;
}

.agreement-text a {
    color: #017DEF;
}

.custom-checkbox-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    user-select: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

/* checked state */
.custom-checkbox-label {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5C1 2.79086 2.79086 1 5 1H15C17.2091 1 19 2.79086 19 5V15C19 17.2091 17.2091 19 15 19H5C2.79086 19 1 17.2091 1 15V5Z' stroke='%23017DEF' stroke-width='2'/%3E%3C/svg%3E");
}

.custom-checkbox-label.required {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5C1 2.79086 2.79086 1 5 1H15C17.2091 1 19 2.79086 19 5V15C19 17.2091 17.2091 19 15 19H5C2.79086 19 1 17.2091 1 15V5Z' stroke='%23FD412B' stroke-width='2'/%3E%3C/svg%3E");
}

.custom-checkbox-input:checked + .custom-checkbox-label {
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5C0 2.23858 2.23858 0 5 0H15C17.7614 0 20 2.23858 20 5V15C20 17.7614 17.7614 20 15 20H5C2.23858 20 0 17.7614 0 15V5Z' fill='%23017DEF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.6319 5.22492C16.0599 5.57388 16.1241 6.20379 15.7751 6.63186L9.25334 14.6319C9.06695 14.8605 8.78911 14.9952 8.49416 14.9999C8.1992 15.0046 7.91722 14.8788 7.72366 14.6562L4.24539 10.6562C3.883 10.2394 3.92706 9.60779 4.34382 9.24539C4.76058 8.883 5.39221 8.92706 5.75461 9.34382L8.45358 12.4476L14.2249 5.36814C14.5739 4.94007 15.2038 4.87595 15.6319 5.22492Z' fill='white'/%3E%3C/svg%3E");
}


.profile-container button.btn-primary,
.login-register-page button.btn-primary
{
    width: 340px;
}

.login-register-page .float-labels button

.profile-user-info h2, .profile-info-el-title {
    color: #017DEF;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
}

.avatar-change-button {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.avatar-upload-btn,
.register-action-btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    border: 1px solid #017DEF;
    border-radius: 25px;
    color: #191A1F;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.register-change-button {
    display: flex;
    justify-content: flex-start;
}

.survey-test .register-change-button {
    margin-top: 25px;
}

.survey-question {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
}

.survey-question .s-label {
    position: absolute;
    top: 0;
    left: 0;
}

.survey-question-el {
    display: none;
}

.survey-question-el.show {
    display: block;
}

.register-upload-title {
    margin-bottom: 20px;
    font-weight: bold;
    color: #000000;
}

.survey-test.hide {
    display: none;
}

.profile-survey {
    margin-bottom: 20px;
}

.profile-survey:last-child {
    margin-bottom: 0;
}

.register-upload-info {
    color: #000000;
}

.register-action-btn {
    background: #80C2FE;
    border: 1px solid #80C2FE;
    min-width: 200px;
}

.avatar-upload-btn .process-spinner {
    background: #FBFAFE;
}

.register-action .process-spinner {
    background: #80C2FE;
}

.avatar-upload-btn:hover,
.register-action-btn:hover
{
    opacity: 0.75;
}

.register-action-btn.disabled
{
    opacity: 0.5;
    cursor: not-allowed;
}

.avatar-upload-btn input,
.register-action-btn input
{
    display: none;
}

.profile-user-info, .profile-info-el-title {
    margin-bottom: 20px;
}

.profile-user-info.profile-user-info-main {
    margin-bottom: 10px;
}

.logout-container a {
    font-weight: 600;
    font-size: 18px;
    color: #017DEF;
    text-decoration: underline;
}

.logout-container {
    margin-bottom: 10px;
}

.profile-info-el {
    margin-top: 35px;
}

.register-form .profile-info-el:first-child {
    margin-top: 0;
}

.profile-info-el.hide {
    display: none;
}

form.profile-form {
    max-width: 900px;
    margin: 0 auto;
}

.profile-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
}


.register-container[data-role="Patient"]  .profile-fields {
    display: grid;
    grid-template-columns: auto 200px;
}

.register-container[data-role="Patient"] .agreement-text {
    max-width: calc(100% - 200px);
}

.avatar-info {
    margin-top: 20px;
    color: #191A1FC2;
    text-align: center;
}

.profile-frame {
    padding: 70px 60px;
    border: 1px solid #C2C2C2;
    border-radius: 30px;
    width: 100%;
}

.login-register-page .profile-frame {
    padding: 25px 40px 25px 25px;
    position: relative;
}

.login-register-page .profile-survey .profile-frame .survey-step {
    position: absolute;
    left: auto;
    top: auto;
    bottom: 15px;
    right: 15px;
    color: #000000;
    font-size: 14px;
}

.login-register-page .profile-survey .profile-frame .radio {
    position: absolute;
    left: auto;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='31' height='31' rx='15.5' stroke='%23C2C2C2'/%3E%3C/svg%3E");
}

.login-register-page .profile-survey.selected .profile-frame .radio {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23017DEF'/%3E%3Ccircle cx='16' cy='16' r='8' fill='%23FBFAFE'/%3E%3C/svg%3E");
}

.survey-answer {
    padding-left: 30px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
}

.survey-answer .answer-radio {
    position: absolute;
    left: 0;
    top: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='31' height='31' rx='15.5' stroke='%23C2C2C2'/%3E%3C/svg%3E");
}

.survey-answer.active .answer-radio {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23017DEF'/%3E%3Ccircle cx='16' cy='16' r='8' fill='%23FBFAFE'/%3E%3C/svg%3E");

}

.profile-container h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.spec-projects-mobile {
    display: none;
}

.spec-projects .title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}

.spec-projects .title h2 {
    margin-right: 20px;
    font-size: 34px;
}

.spec-projects-item {
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
}

.spec-projects-item .spec-projects-image {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 45%;
    min-width: 45%;
    padding: 10px 0 0 0;
}

.spec-projects-item .spec-projects-image img {
    display: block;
    width: 100%;
    height: auto;
}

.spec-projects-item .spec-projects-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    font-weight: bold;
    font-size: 32px;
    padding: 50px 10px 50px 25px;
}

.spec-projects-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.spec-projects-list img {
    display: block;
}

.blog-tabs .tabs h2 {
    font-size: 34px;
    font-weight: 500;
    padding-bottom: 5px;
    line-height: 1.1;
}

.blog-tabs .tabs {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
}

.blog-tabs .tab {
    margin-right: 25px;
    cursor: pointer;
    position: relative;
}

.blog-tabs .tab:last-child {
    margin-right: 0;
}

.blog-tabs .tab.active:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #017DEF;
}

.blog-tabs .tab-content {
    display: none;
}

.blog-tabs .tab-content.active {
    display: block;
}

input.graduation_year[type="number"]::-webkit-outer-spin-button,
input.graduation_year[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.graduation_year[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

@media (max-width: 1200px) {
    .header-container .site-branding img {
        height: auto;
        width: 150px;
    }

    .header-menu-item-content {
        margin-right: 15px;
    }

    .login-register-page h1 .mobile {
        display: inline;
    }
    .login-register-page h1 .desktop {
        display: none;
    }

    .tags a {
        font-size: 14px;
        padding: 8px 12px;
        margin: 0 6px 6px 0;
    }
    .comments-block .comments-unlogged-title {
        font-size: 16px;
    }
    .comments-block {
        padding: 30px;
    }
    .spec-projects-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .slider-grid-collection-margin {
        margin: 35px 0;
    }
    .slider-grid-collection-padding {
        padding: 35px 0;
    }
    .slider-grid-collection h2 {
        margin-bottom: 15px;
    }

    .single-post .entry-header-container {
        margin-bottom: 20px;
    }
    .favorites-button {
        top: 8px;
        right: 8px;
    }

    .single-post #commentform button[type="submit"] {
        margin-top: 15px;
    }
    .single-post .entry-header-container-inner.has-image {
        grid-template-columns: auto 250px;
    }
    .single-post .entry-header-content .entry-header-content-el {
        padding: 30px;
    }
    .single-post .entry-header-container-inner.has-image .entry-header-content-element.header-image {
        min-height: 250px;
    }

    .info-popup .info-popup-content {
        width: 500px;
        max-width: calc(100% - 20px);
        padding: 60px 60px;
    }
    .info-popup .info-popup-content .popup-text {
        font-size: 20px;
    }
    .info-popup .info-popup-content .popup-button {
        width: 300px;
        height: 56px;
        margin-top: 20px;
    }

    .profile-container {
        padding: 40px 0 50px 0;
    }
    .profile-container h1 {
        text-align: center;
    }
    .profile-fields {
        grid-gap: 20px;
    }

    .register-container[data-role="Patient"]  .profile-fields {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 700px;
        margin: 0 auto;
    }

    .register-container[data-role="Patient"] .step-final {
        max-width: 700px;
        margin: 0 auto;
    }

    .register-container[data-role="Patient"] .agreement-text {
        max-width: unset;
    }


    .el-container.info-block .el-container-inner, .el-container.about-us .el-container-inner, .el-container.forum-info .el-container-inner, .el-container.shop-info .el-container-inner {
        flex-direction: column;
    }

    .el-container.forum-info .items {
        margin-top: 30px;
    }

    .el-container.forum-info .el-container-inner-inner.grid-image-container,
    .el-container.shop-info .el-container-inner-inner.grid-image-container,
    .el-container.about-us .el-container-inner-inner.grid-image-container
    {
        min-height: unset;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .forum-info .mobile-el {
        display: block;
    }

    .el-container.forum-info .items.desktop-el {
        display: none;
    }

    .el-container.forum-info .el-container-inner-inner.grid-image-container img.grid-image,
    .el-container.shop-info .el-container-inner-inner.grid-image-container img.grid-image,
    .el-container.about-us .el-container-inner-inner.grid-image-container img.grid-image
    {
        height: auto;
        width: 100%;
    }


    /*.header-mobile {*/
    /*    display: block;*/
    /*}*/
    /*.header-desktop {*/
    /*    display: none;*/
    /*}*/

    .login-register-page h1, .login-register-page h2, .login-register-page .reg-q {
        font-size: 28px;
        text-align: center;
    }

    .el-container.intro .intro-title,
    .info-block .info-block-content .title h2,
    .single-post-content h2,
    .single-post .bottom-title,
    .more-posts h2,
    .posts-collection h2,
    .single-post .entry-header-content .entry-header-content-el h1,
    .single-post .comments-outer .bottom-title,
    .spec-projects .title h2
    {
        font-size: 28px;
    }

    .el-container.about-us .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .el-container.forum-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .el-container.shop-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .thank-you .title h2,
    .about-site .title h2
    {
        font-size: 32px;
    }

    .el-container.forum-info .subtitle {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .container {
        max-width: 900px;
    }
    .el-container.intro .container-content {
        grid-gap: 30px;
    }
    .el-container.intro {
        min-height: unset;
    }
    .el-container.intro .login-button, .el-container.intro .intro-title, .el-container.intro .intro-text {
        margin-bottom: 10px;
    }
    .el-container.intro .container-content-el.left {
        max-width: 800px;
        margin: 0 auto;
    }
    .el-container.intro .button-container {
        width: 100%;
    }
    .after-intro .items .text {
        font-size: 14px;
        padding: 3px 10px;
    }
    .after-intro .items {
        grid-gap: 25px;
    }

    .thank-you {
        text-align: center;
    }
    .el-container.about-us .container-content, .el-container.shop-info .container-content {
        grid-template-columns: 0.8fr 1.2fr;
    }
    .el-container.about-us .container-content, .el-container.forum-info .container-content, .el-container.shop-info .container-content {
        grid-column-gap: 30px;
    }
    .footer-top .footer-content .footer-title {
        /*font-size: 14px;*/
        margin-bottom: 20px;
    }

    .footer-top .footer-content .footer-logo p {
        font-size: 14px;
    }

    .footer-top .footer-content .footer-menu-list p {
        margin-bottom: 15px;
        font-size: 14px;
    }

    .footer-top .footer-content {
        grid-gap: 25px;
    }

    .thank-you {
        margin: 55px 0 55px;
    }

    .info-block {
        padding: 55px 0 75px 0;
    }
    .el-container.about-us .container-content {
        padding: 90px 0;
    }
    .el-container.forum-info {
        margin: 65px 0;
    }
    .el-container.shop-info .container-content {
        padding: 90px 0;
    }
    .about-site {
        margin: 55px 0 55px;
    }

    .about-site .elements-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .top-page-slider .slick-initialized .slick-slide .slider-el-inner {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
    }
    .top-page-slider .slick-initialized .slick-slide .slider-el-inner .slider-top-right.slider-inner {
        display: none;
    }
    .top-page-slider .slider-top-left .sl-top {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .top-page-slider .slider-el-wrapper {
        padding: 0 75px;
    }

    .top-page-slider .slider-top-left {
        padding: 45px 0 65px 0;
    }

    .top-page-slider .slick-dots {
        bottom: 25px;
        left: 75px;
    }

    .top-page-slider .slider-arrow {
        width: 42px;
        height: 42px;
        border-radius: 6px;
    }

    .top-page-slider .slider-arrow.sl-prev {
        left: -10px;
    }
    .top-page-slider .slider-arrow.sl-next {
        right: -10px;
    }

    .top-page-slider  .slider-arrow svg {
        width: 16px;
    }

    .top-page-slider .slider-top-left .sl-bottom a {
        width: 240px;
        height: 56px;
        font-size: 14px;
    }
    .top-page-slider .slider-top-left .sl-middle {
        margin-bottom: 20px;
    }
    .profile-user-info h2 {
        font-size: 18px;
    }
    .profile-info-el {
        margin-top: 20px;
    }
    .profile-container .float-labels .form-group {
        margin: 10px 0 20px;
    }
    .interactions-inner-el {
        padding-right: 200px;
    }
}

@media (max-width: 1000px) {

    .posts-collection .slider-arrow.sl-prev {
        transform: translateY(-50%) translateX(-10px);
    }
    .posts-collection .slider-arrow.sl-next {
        transform: translateY(-50%) translateX(10px);
    }
}

@media (max-width: 900px) {
    .categories .cat-title {
        padding: 8px 18px;
        display: inline-block;
        margin: 0 6px 6px 0;
    }

    .login-register-page .register-stage {
        padding: 30px 0 50px 0;
        min-height: unset;
    }

    .step-final {
        max-width: 700px;
        margin: 30px auto 0 auto;
    }

    [data-step="3"] .profile-fields {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0;
        max-width: 700px;
        margin: 0 auto;
    }

    .top-page-slider .slider-el-wrapper {
        padding: 0 45px;
    }
    .top-page-slider .slick-dots {
        left:45px;
    }

    .cookie-agreement-wrapper {
        font-size: 14px;
        padding: 15px 0;
    }

    .cookie-agreement-content button {
        font-size: 14px;
        width: 220px;
        height: 50px;
        margin-left: 20px;
    }

    .el-container.shop-info {
        display: none;
    }

    .el-container.about-us .container-content,
    .el-container.forum-info .container-content,
    .el-container.shop-info .container-content
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .el-container.forum-info .el-container-inner-inner.grid-image-container img.grid-image,
    .el-container.shop-info .el-container-inner-inner.grid-image-container img.grid-image,
    .el-container.about-us .el-container-inner-inner.grid-image-container img.grid-image
    {
        position: relative;
        height: auto;
        top: unset;
        transform: unset;
        max-width: 500px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .el-container.about-us .items, .el-container.forum-info .items, .el-container.shop-info .items {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
    }

    .about-site .elements-buttons {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
    }

    .el-container.about-us .container-content {
        padding: 25px 0 30px;
    }

    .el-container.about-us .desktop-el {
        display: none;
    }

    .el-container.about-us .el-container-inner-inner .el-container-inner-inner-content .content {
        margin: 30px 0;
    }

    .el-container.about-us .mobile-el {
        display: block;
        text-align: center;
        margin-bottom: 20px;
    }

    .forum-info .grid-image.image-desktop {
        display: none;
    }

    .forum-info .grid-image.image-mobile {
        display: block;
        margin-top: 25px;
    }

    .el-container.forum-info {
        margin: 40px 0;
    }

    .container-content-el-inner {
        width: 100%;
    }
    .container-content-el-inner-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .el-container.forum-info .subtitle {
        font-size: 16px;
        text-align: center;
    }

    .el-container.forum-info .subsubtitle {
        text-align: center;
        margin-bottom: 25px;
    }

    .el-container.forum-info .el-container-inner-inner .el-container-inner-inner-content .title {
        text-align: center;
    }

    .login-register-page h1, .login-register-page h2, .login-register-page .reg-q {
        font-size: 26px;
    }

    .el-container.intro .intro-title,
    .info-block .info-block-content .title h2,
    .single-post-content h2,
    .single-post .bottom-title,
    .more-posts h2,
    .posts-collection h2,
    .top-page-slider .slider-top-left .sl-top,
    .single-post .entry-header-content .entry-header-content-el h1,
    .single-post .comments-outer .bottom-title,
    .spec-projects .title h2
    {
        font-size: 26px;
    }

    .el-container.about-us .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .el-container.forum-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .el-container.shop-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .thank-you .title h2,
    .about-site .title h2,
    .el-container.about-us .mobile-el h2
    {
        font-size: 26px;
    }

    .thank-you .title {
        margin-bottom: 10px;
    }

    .about-site {
        margin: 40px 0 40px;
    }

    .thank-you {
        margin: 40px 0 40px;
    }

    .el-container.intro {
        padding: 35px 0 35px 0;
    }
    .el-container.intro .container-content-el.left {
        text-align: center;
        align-items: center;
    }
    .el-container.intro .intro-title, .el-container.intro .intro-text {
        width: 100%;
    }
    .el-container.intro .container.container-self {
        padding: 0;
    }
    .el-container.intro .container-content-el-inner {
        padding: 0 15px;
    }
    .el-container.intro .image-mobile {
        margin: -20% 0 -10% 0;
    }
    .el-container.intro .container-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }
    .after-intro .items {
        grid-gap: 20px;
    }
    .after-intro {
        padding: 45px 0 75px 0;
    }
    .info-block {
        padding: 0 0 75px 0;
        margin-top: -20px;
    }

    .info-block .container {
        max-width: unset;
        width: 100%;
        padding: 0;
    }

    /*border-radius*/
    .info-block .info-block-content
    {
        border-radius: 15px;
    }

    .footer-top .footer-content {
        grid-gap: 30px;
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
    }

    .footer-el-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .footer-el-desktop {
        display: none;
    }
    .info-block .info-block-content {
        padding: 25px 15px;
    }
    .info-block .info-block-content .title h2 {
        text-align: center;
    }
}

@media (max-width: 800px) {
    .comments-block {
        flex-direction: column;
        justify-content: center;
    }
    .comments-block .comments-unlogged-title {
        margin-bottom: 15px;
        text-align: center;
    }

    .comments-block a.comments-unlogged-button {
        margin-left: 0;
    }

    .spec-projects-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .spec-projects-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .spec-projects-item .spec-projects-image img {
        max-height: 200px;
        width: auto;
    }

    .spec-projects-item .spec-projects-text {
        justify-content: flex-end;
        flex-grow: unset;
        font-weight: bold;
        font-size: 36px;
        padding: 40px 20px 40px 20px;
    }

    .spec-projects-item .spec-projects-image {
        width: auto;
        min-width: auto;
    }

    .spec-projects-item {
        justify-content: center;
    }

    .favorites-button {
        top: 6px;
        right: 6px;
        width: 34px;
        height: 34px;
    }
    .favorites-button svg {
        width: 24px;
        height: 24px;
    }
    .single-post .entry-header-container-inner.has-image {
        grid-template-columns: 1fr;
    }
    .single-post .entry-header-container-inner.has-image .entry-header-content-element.header-image {
        display: none;
    }
    .interactions-inner-el {
        padding-right: 100px;
    }
    .info-popup .info-popup-content {
        width: 500px;
        padding: 30px 20px;
    }
    .info-popup .info-popup-content .popup-text {
        font-size: 16px;
    }
    .info-popup .info-popup-content .popup-button {
        max-width: 100%;
    }
    .info-popup .info-popup-close svg, .info-popup .info-popup-close img {
        width: 14px;
        min-width: 14px;
    }
    .info-popup .info-popup-close {
        width: 30px;
        height: 30px;
        top: 5px;
        right: 5px;
    }


    .profile-page form.profile-form {
        margin: 0 auto;
        max-width: 600px;
    }
    .profile-fields {
        grid-template-columns: repeat(1, 1fr);
    }

    .profile-container button.btn-primary, .login-register-page button.btn-primary {
        width: 100%;
    }
    .after-intro .items {
        grid-template-columns: repeat(4, 1fr);
    }
    .float-labels .form-group {
        position: relative;
        margin: 20px 0;
    }
    .restore-form.float-labels .form-group.form-password {
        margin: 20px 0 20px 0;
    }
    .form-info .show-restore-pass {
        font-size: 14px;
    }
    .float-labels button {
        height: 56px;
        font-size: 14px;
        margin-top: 20px;
    }
    .agreement-text {
        font-size: 14px;
    }
}

@media (max-width: 700px) {
    .interactions-inner-el {
        padding-right: 0;
    }

    .form-tabs .tab {
        padding: 5px 0;
        cursor: pointer;
        margin-right: 20px;
        font-size: 18px;
    }
    .forms-container {
        padding: 20px 20px 30px 20px;
    }
    .login-register-page h1, .login-register-page h2, .login-register-page .reg-q {
        font-size: 24px;
    }

    .el-container.intro .intro-title,
    .info-block .info-block-content .title h2,
    .single-post-content h2,
    .single-post .bottom-title,
    .more-posts h2,
    .posts-collection h2,
    .top-page-slider .slider-top-left .sl-top,
    .single-post .entry-header-content .entry-header-content-el h1,
    .single-post .comments-outer .bottom-title
    {
        font-size: 24px;
    }

    .el-container.about-us .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .el-container.forum-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .el-container.shop-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .thank-you .title h2,
    .about-site .title h2
    {
        font-size: 24px;
    }
    .after-intro .items {
        grid-template-columns: repeat(3, 1fr);
    }
    .top-page-slider .slider-top-left .sl-middle {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .top-page-slider .slider-top-left .sl-bottom a {
        width: 200px;
        height: 50px;
    }
}

@media (max-width: 600px) {
    .single-post .entry-header-content .entry-header-content-el h1 {
        margin-bottom: 20px;
    }
    .single-post .entry-header-content .entry-header-content-el {
        padding: 20px 40px 20px 20px;
    }
    .single-post .additional-info .add-info-el {
        margin-right: 10px;
        font-size: 14px;
    }
    .single-post .additional-info .add-info-el img {
        width: 20px;
        margin-right: 6px;
    }
    .like-dislike {
        margin-bottom: 35px;
    }
    .single-post .bottom-title {
        margin-bottom: 15px;
    }
    .interactions-inner-el {
        flex-direction: column;
    }
    .after-intro .items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .header-container .site-branding img {
        width: 130px;
    }
    .header-menu-item-content .header-menu-item.header-login, .main-menu-button {
        padding: 6px 15px;
        height: 36px;
    }
    .header-menu-item-content {
        margin-right: 10px;
    }
    .header-menu-item.header-account img {
        height: 36px;
    }

    .spec-projects-item .spec-projects-text {
        font-size: 34px;
    }

    .cookie-agreement-content {
        display: flex;
        flex-direction: column;
    }

    .cookie-agreement-content span {
        text-align: center;
    }

    .cookie-agreement-content button {
        margin-left: 0;
        margin-top: 10px;
    }

    .el-container.intro .intro-title,
    .info-block .info-block-content .title h2,
    .single-post-content h2,
    .single-post .bottom-title,
    .more-posts h2,
    .posts-collection h2,
    .spec-projects .title h2
    {
        font-size: 24px;
    }

    .el-container.about-us .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .el-container.forum-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .el-container.shop-info .el-container-inner-inner .el-container-inner-inner-content .title h2,
    .thank-you .title h2,
    .about-site .title h2,
    .el-container.about-us .mobile-el h2
    {
        font-size: 24px;
    }


    .el-container.intro .login-button, .info-popup .info-popup-content .popup-button, .thank-you .button a {
        color: #ffffff;
        width: 290px;
        height: 56px;
        font-size: 14px;
    }
    .el-container.intro .bottom-text {
        font-size: 14px;
    }
    .footer-top .footer-content {
        text-align: left;
        max-width: unset;
        width: 100%;
    }
}