@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/*
    font-family: "Roboto", sans-serif;
*/

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

html {
    font-size: 62.5%;
}

body {
    font-size: 1.8rem;
    font-family: "MajritTx", serif;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 1.6rem;
    }
}

a {
    outline: none;
    text-decoration: none;
}

ul {
    list-style: none;
}

.content-width {
    max-width: 120rem;
    margin: 0 auto;
    overflow: hidden;
}

.heading-1 {
    font-size: 4rem;
}

@media screen and (max-width: 768px) {
    .heading-1 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 550px) {
    .heading-1 {
        font-size: 2rem;
    }
}

.privacy {
    text-align: center;
    margin: 1rem;
    font-size: 1.4rem;
}

.privacy a {
    color: #000;
    text-decoration: underline;
}

.d-none {
    display: none;
}

.header {
    font-family: "MarcinAntB", sans-serif;
}

.header a {
    color: #000;
}

.header__content {
    padding: 3.2rem 2.2rem;
    border-bottom: 1px solid #efefef;
}

@media only screen and (max-width: 425px) {
    .header__logo {
        margin-right: 1rem;
    }
}

@media only screen and (max-width: 425px) {
    .header__logo img {
        width: 100%;
    }
}

.header-nav {
    display: flex;
    justify-content: space-between;
}

.header-nav__button {
    border: none;
    box-sizing: border-box;
    font-size: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 0.3rem;
    text-align: center;
    cursor: pointer;
}

.header-nav__buttons {
    display: flex;
    text-transform: uppercase;
    align-items: center;
}

.header-nav__buttons .button-subscribe {
    background: #f7cf3c;
    font-weight: 700;
    margin-right: 1rem;
}

.header-nav__buttons .button-login {
    border: 1px solid #f7cf3c;
}

@media only screen and (max-width: 768px) {
    .header-nav__buttons .button-login {
        display: none;
    }
}

.header-nav__buttons .button-login::after {
    content: " ▾";
    display: inline-block;
    padding: 0 0.3rem 0 2rem;
}

.header-nav__buttons .button-login-small {
    margin-left: 0.5rem;
    display: none;
}

@media only screen and (max-width: 768px) {
    .header-nav__buttons .button-login-small {
        display: block;
    }
}

.region {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.region__heading {
    margin-right: 1rem;
}

.region__name {
    box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.3rem;
    width: 15rem;
    background-color: #fff;
    font-weight: 900;
    padding: 0.7rem 1rem;
    position: relative;
}

.region__name::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    width: 0;
    height: 0;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-top: 0.5rem solid #00aeff;
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 2rem;
}

.burger-menu-link {
    position: absolute;
    left: 0;
}

@media only screen and (max-width: 768px) {
    .burger-menu-link {
        display: block;
    }
}

.burger-menu-link-small {
    margin-right: 1.2rem;
}

.burger-menu {
    height: 3.2rem;
    width: 3.2rem;
    cursor: pointer;
    position: relative;
}

.burger {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
}

.burger,
.burger::before,
.burger::after {
    background: #000;
    display: block;
    height: 0.2rem;
    position: absolute;
}

.burger::before,
.burger::after {
    content: "";
    width: 2.5rem;
}

.burger::before {
    top: -0.5rem;
}

.burger::after {
    top: 0.5rem;
}

.header-small {
    font-family: "MarcinAntB", sans-serif;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
}

.header-small a {
    color: #000;
}

.header-small__content {
    display: flex;
    flex-direction: column;
}

.header-small__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2.2rem;
}

@media only screen and (max-width: 500px) {
    .header-small__container {
        padding: 1rem;
    }
}

.header-small__logo-container {
    display: flex;
    align-items: center;
}

.header-small__heading {
    width: 25rem;
}

@media only screen and (max-width: 900px) {
    .header-small__heading {
        display: none;
    }
}

.persentage-scroll {
    background-color: #00b1ff;
    height: 5px;
    max-width: 100%;
}

.nav__content {
    display: flex;
    justify-content: space-between;
    padding: 3.8rem 2rem 0 2rem;
}

@media screen and (max-width: 1085px) {
    .nav__content {
        flex-direction: column;
        padding: 2.4rem 2rem 0 2rem;
    }
}

@media only screen and (max-width: 500px) {
    .nav__content {
        padding: 2.4rem 1rem 0 1rem;
    }
}

.nav__header-container {
    position: relative;
}

.nav__header-container::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 0;
    width: 70%;
    height: 5px;
    background: #2dd0b4;
}

@media screen and (max-width: 1085px) {
    .nav__header-container::after {
        width: 23.5rem;
    }
}

.nav__heading {
    width: 100%;
    padding-bottom: 0.5rem;
}

@media screen and (max-width: 1085px) {
    .nav__heading {
        width: 25rem;
    }
}

.nav__list {
    display: flex;
    align-self: flex-end;
    margin-bottom: 1rem;
}

@media screen and (max-width: 1085px) {
    .nav__list {
        align-self: flex-start;
        padding: 2.2rem 0;
        overflow-x: scroll;
        width: 100%;
    }
}

.nav a {
    color: #000;
    font-family: "MarcinAntB", sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 11px;
}

.nav a:not(:last-child) {
    margin-right: 1rem;
}

.nav a:not(:last-child)::after {
    content: "·";
    margin-left: 1rem;
}

.footer {
    font-family: "MarcinAntB", sans-serif;
}

.footer a {
    color: #000;
}

.footer__content {
    padding: 5rem 2.2rem 2.5rem 2.2rem;
    display: flex;
    align-items: center;
    position: relative;
}

.footer__content::before {
    content: "";
    position: absolute;
    top: 1rem;
    width: 100%;
    height: 1px;
    background-color: #717684;
}

@media screen and (max-width: 1000px) {
    .footer__content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 77rem;
    }
}

.footer-main {
    display: flex;
    flex-direction: column;
    margin-right: 17.1rem;
}

@media screen and (max-width: 1000px) {
    .footer-main {
        margin-right: 0;
        position: relative;
    }

    .footer-main::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #000;
        bottom: -2rem;
    }
}

.footer-main-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3.8rem;
}

.footer-main-top__copyright {
    font-size: 1.4rem;
    font-weight: 700;
    margin-right: 1rem;
}

.footer-main-top__icon {
    font-size: 2rem;
}

.footer-main-top__icon:not(:last-child) {
    margin-right: 1.5rem;
}

.footer-main-top .icon-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-main-bottom__list {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 1000px) {
    .footer-main-bottom__list {
        justify-content: center;
    }
}

.footer-main-bottom__item a {
    font-size: 1.1rem;
}

.footer-main-bottom__item:not(:last-child) {
    margin-right: 1rem;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (max-width: 1000px) {
    .footer-right {
        margin-top: 3.5rem;
    }
}

.footer-right__img img {
    width: 10.7rem;
}

.footer-right__button {
    padding: 0.8rem 3.1rem 0.8rem 1.5rem;
    border: 1px solid #efefef;
    font-size: 1.1rem;
    position: relative;
    white-space: nowrap;
    margin-top: 0.5rem;
}

.footer-right__button::after {
    content: "";
    position: absolute;
    border-left: 0.5rem solid #fff;
    border-right: 0.5rem solid #fff;
    border-bottom: 0.5rem solid #016ca2;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.article-heading__content {
    padding: 4rem 12.1rem;
    position: relative;
}

@media screen and (max-width: 1024px) {
    .article-heading__content {
        padding: 2rem 4rem;
    }
}

@media screen and (max-width: 768px) {
    .article-heading__content {
        padding: 2rem 1rem;
    }
}

.article-heading__content::after {
    content: "";
    position: absolute;
    bottom: 16rem;
    width: 100%;
    height: 1px;
    background-color: #4a4a4a;
}

.article-heading__description {
    font-size: 2.5rem;
    margin: 3rem 0 7rem 0;
}

@media screen and (max-width: 768px) {
    .article-heading__description {
        font-size: 2rem;
    }
}

@media screen and (max-width: 550px) {
    .article-heading__description {
        font-size: 1.8rem;
    }
}

.article-container__content {
    padding: 0 2rem 4rem 12.1rem;
    display: flex;
}

@media screen and (max-width: 1024px) {
    .article-container__content {
        padding: 4rem;
    }
}

@media screen and (max-width: 768px) {
    .article-container__content {
        padding: 2rem 1rem;
    }
}

.author {
    display: flex;
    flex-direction: column;
}

.author__name {
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 900;
}

.author__date {
    font-family: "MarcinAntB", sans-serif;
    font-size: 1.4rem;
    margin: 1rem 0;
    position: relative;
}

.author__date::after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 13rem;
    height: 1px;
    background-color: #4a4a4a;
}

.author__links {
    margin-top: 1rem;
    display: flex;
    align-items: center;
}

.author__link {
    height: 2.6rem;
    width: 2.6rem;
    background-color: #efefef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    font-size: 1.4rem;
    color: #000;
}

.author__link:last-child {
    width: 4rem;
    border-radius: 3rem;
    margin-left: 1rem;
}

.author__link:last-child i {
    margin-left: 0.5rem;
}

.article {
    display: flex;
    flex-direction: column;
    position: relative;
}

.article::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    right: -5rem;
    background-color: #efefef;
}

.article__heading {
    color: #4a4a4a;
    font-size: 2.2rem;
    font-style: italic;
}

@media screen and (max-width: 768px) {
    .article__heading {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 550px) {
    .article__heading {
        font-size: 1.6rem;
    }
}

.article__doctor {
    margin: 3rem 0;
    padding: 2rem 1rem;
    background-color: #016ca2;
    border-radius: 1rem;
}

.article__doctor img {
    width: 100%;
}

.article__doctor p {
    font-style: italic;
    color: #fff;
    margin-top: 1rem;
}

.article__question,
.article__answer,
.article__text {
    margin: 1rem 0;
}

.article__question img,
.article__answer img,
.article__text img {
    width: 5rem;
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.article__question p:not(:last-child),
.article__answer p:not(:last-child),
.article__text p:not(:last-child) {
    margin-bottom: 1rem;
}

.article__question p:first-of-type {
    margin-top: 0.5rem;
}

.article__text--big {
    font-size: 2.2rem;
    text-align: center;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .article__text--big {
        font-size: 1.8rem;
    }
}

.article__text--red {
    font-size: 2rem;
    color: red;
    font-weight: 700;
}

@media screen and (max-width: 550px) {
    .article__text--red {
        font-size: 1.8rem;
    }
}

.article__list {
    padding: 2rem;
    background-color: #016ca2;
    border-radius: 1rem;
    color: #fff;
}

.article__item {
    position: relative;
}

.article__item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    opacity: 0.5;
}

.article__item-heading {
    font-weight: 900;
    font-size: 2rem;
}

@media screen and (max-width: 768px) {
    .article__item-heading {
        font-size: 1.8rem;
    }
}

.article__item-text {
    margin: 1rem 0 2rem 0;
}

.article__item-text span {
    font-weight: 900;
    text-decoration: underline;
}

.article__item-order {
    margin-top: 3rem;
    text-align: center;
}

.article__item-order a {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: underline;
}

.article__important.form-bottom {
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    max-width: 100%;
    margin: 1rem 0;
}

.article__tags {
    margin-bottom: 4rem;
    display: flex;
}

@media screen and (max-width: 550px) {
    .article__tags {
        margin-bottom: 1rem;
    }
}

.article__tags .tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 2rem;
}

.article__tags .tags-heading {
    font-weight: 700;
    font-size: 2rem;
}

.article__tags .tag {
    padding: 0.5rem 1rem;
    background-color: #f4f1ee;
    border-radius: 2rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    color: #000;
}

.figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3rem 0;
}

@media screen and (max-width: 768px) {
    .figure {
        margin: 2rem 0;
    }
}

@media only screen and (max-width: 600px) {
    .figure {
        margin: 1rem 0;
    }
}

.figure img {
    width: 100%;
    margin-bottom: 1rem;
}

@media screen and (max-width: 1024px) {
    .figure img {
        width: 65%;
    }
}

@media screen and (max-width: 550px) {
    .figure img {
        width: 90%;
    }
}

.figure .product-photo {
    width: 35%;
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    .figure .product-photo {
        width: 30%;
    }
}

@media screen and (max-width: 550px) {
    .figure .product-photo {
        width: 40%;
    }
}

.figure figcaption {
    font-style: italic;
}

.aside {
    min-width: 35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem 0 8rem;
    margin-top: 17rem;
}

@media screen and (max-width: 1024px) {
    .aside {
        display: none;
    }
}

.newsletters {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.newsletters-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid #4a4a4a;
    position: relative;
}

.newsletters-top::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 13rem;
    height: 2px;
    background-color: #4a4a4a;
}

.newsletters-top span {
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 900;
}

.newsletters-bottom {
    font-family: "MarcinAntB", sans-serif;
    font-size: 1.4rem;
    margin-top: 1rem;
    color: #000;
}

.publications {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3rem 0;
    font-family: "MarcinAntB", sans-serif;
}

.publications span {
    font-size: 1rem;
    background-color: #717684;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
    color: #fff;
    text-transform: uppercase;
}

.publications img {
    width: 100%;
}

.publications a {
    margin-top: 1rem;
    padding: 0 2rem;
    font-size: 1.7rem;
    font-weight: 900;
    color: #717684;
}

.news {
    display: flex;
    flex-direction: column;
}

.news__heading {
    position: relative;
    border-bottom: 1px solid #4a4a4a;
}

.news__heading span {
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 900;
}

.news__heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 13rem;
    height: 2px;
    background-color: #4a4a4a;
}

.news__list {
    font-size: 1.3rem;
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.news__item {
    padding: 1rem 0;
    border-bottom: 0.12rem dotted #717684;
}

.news__item:last-child {
    border-bottom: 0.12rem solid #717684;
}

.news__item::marker {
    font-weight: 900;
}

.news__item a {
    color: #000;
    transition: all 0.3s;
    font-weight: 500;
}

.news__item a:hover {
    opacity: 0.5;
}

.comments {
    font-family: "Roboto", sans-serif;
}

.comments__content {
    padding: 2rem;
}

@media screen and (max-width: 768px) {
    .comments__content {
        padding: 2rem 1rem;
    }
}

.comments__heading-container {
    background-color: #000;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comments__heading-container span {
    font-size: 1.4rem;
    font-family: "MarcinAntB", sans-serif;
    color: #fff;
}

.comments__heading {
    color: #fff;
    font-size: 1.4rem;
}

.comments__heading span {
    font-size: 1.3rem;
    font-family: "MarcinAntB", sans-serif;
    font-weight: 400;
}

.comments__order-link {
    background-color: #016ca2;
    padding: 2rem;
    text-align: center;
    border-radius: 2rem;
    width: 50%;
    margin: 0 auto;
}

@media screen and (max-width: 550px) {
    .comments__order-link {
        padding: 1rem;
    }
}

.comments__order-link a {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
}

@media screen and (max-width: 550px) {
    .comments__order-link a {
        font-size: 2rem;
    }
}

.comment {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid #ececec;
    border-left: 20px solid #ececec;
    margin: 1.5rem 0;
}

@media screen and (max-width: 768px) {
    .comment {
        border-left: 10px solid #ececec;
    }
}

@media screen and (max-width: 550px) {
    .comment {
        padding: 1rem;
    }
}

.comment__content {
    display: flex;
}

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

.comment img {
    height: 6rem;
    width: 6rem;
    grid-row: 1/-1;
}

@media screen and (max-width: 550px) {
    .comment img {
        height: 5rem;
        width: 5rem;
    }
}

.comment .comment-left {
    display: grid;
    grid-template-columns: 9rem 10rem;
    grid-template-rows: repeat(3, 2rem);
    margin-right: 3rem;
}

@media screen and (max-width: 1024px) {
    .comment .comment-left {
        grid-template-columns: 9rem 15rem;
    }
}

@media screen and (max-width: 768px) {
    .comment .comment-left {
        grid-template-columns: 7rem 7rem;
    }
}

@media screen and (max-width: 550px) {
    .comment .comment-left {
        margin-bottom: 1rem;
    }
}

.comment__date {
    color: #a7a7a7;
    font-size: 1.3rem;
    margin-top: 0.5rem;
}

@media screen and (max-width: 550px) {
    .comment__date {
        font-size: 1.2rem;
    }
}

.comment__name {
    font-size: 1.5rem;
    font-weight: 700;
}

@media screen and (max-width: 550px) {
    .comment__name {
        font-size: 1.4rem;
    }
}

.comment__text {
    font-family: "Benton Sans", sans-serif;
    font-size: 1.7rem;
}

@media screen and (max-width: 768px) {
    .comment__text {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 550px) {
    .comment__text {
        font-size: 1.4rem;
    }
}

.comment__answer {
    font-size: 1.2rem;
    color: #016ca2;
}

.comment__answer svg {
    width: 1.1rem;
    height: 1.1rem;
    transform: scale(-1, 1) rotate(90deg);
    fill: #016ca2;
}

.comment-answer {
    margin-left: 3rem;
    margin-top: 5rem;
}

@media screen and (max-width: 768px) {
    .comment-answer {
        margin-left: 0;
        margin-top: 3rem;
    }
}

.comment-answer .comment-left {
    grid-template-columns: 7rem 11rem;
}

.actions {
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    margin-top: 2rem;
}

@media screen and (max-width: 550px) {
    .actions {
        font-size: 1.2rem;
    }
}

.actions a {
    color: #a7a7a7;
    transition: all 0.3s;
}

.actions a:hover {
    color: #000;
}

.actions__share {
    margin-right: 4rem;
}

.actions__likes,
.actions__dislikes {
    margin-right: 2rem;
}

.actions__more {
    font-size: 1.6rem;
}

.ac_footer {
    text-align: center;
    margin: 10px 0 10px 0;
    font-size: 16px;
}