/*=============PRE_HEADER==============*/

/*============HEADER================*/

.header {
    position: relative;
    max-width: 100%;
    background-color: #ffffff;
    color: #000;
}

.header__row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.7rem;
    margin: 0.6rem 0px;
}

.header__logo {
    max-width: 21.4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.nav__header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #44739c;
    color: #fff;
}

.header__burger {
    display: none;
}

.fa-bars {
    color: #4d4d4d;
    font-size: 1.4rem;
}

.header__list {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}

.header__list a {
    text-decoration: none;
    box-shadow: 1px 0 0 rgb(255 255 255 / 8%);
}

.header__item {
    cursor: pointer;
    font-size: 0.8rem;
    border-right: 1px #3a6181 solid;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 8px 11px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.header__burger {
    padding-left: 2rem;
    font-size: 2rem;
}

/*==========READ=========*/

/*==========BREADCR=============*/

/*==========MAIN===========*/

.content__row {
    display: flex;
    justify-content: space-between;
    padding-top: 0.3rem;
}

.content__main {
    flex: 1 1 60%;
    font-family: "DroidSerif";
    padding: 15px;
}

.adv__content {
    flex: 1 1 25%;
    padding-left: 10px;
}

/*==========MAIN=========*/

.main {
    background-color: var(--white);
}

.main__title {
    color: #1b1b1b;
    font-weight: 700;
    font-size: 1.5rem;
}

.main__by {
    font-size: 0.8rem;
}

.main__by-text {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.main__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #4d4d4d38;
}

.fa-facebook {
    color: #3b5998;
    padding: 5px;
    border-radius: 50%;
    font-size: 1.4rem;
}

.fa-twitter {
    background-color: #00acee;
    color: #fff;
    padding: 5px;
    border-radius: 50%;
}

/*=============INFO================*/

.info {
    font-size: var(--text-size);
    color: var(--text-color);
}

.info__img {
    margin: 0 auto;
    display: block;
    margin-bottom: 1rem;
}

.info__text {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.info__text a:hover {
    color: #e02e3d;
}

.button-link {
    background-color: #e02e3d;
    color: var(--white);
    display: block;
    margin: 2rem auto;
    max-width: 100%;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 1rem;
    animation: pulseAnimation 2s ease-in-out infinite;
}

@keyframes pulseAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.button-link:hover {
    color: #fff;
    background-color: #ff0015;
}

/*=========STEPS==============*/

.steps__title {
    margin-top: 1rem;
    font-weight: 700;
    text-align: left;
}

.steps__text {
    font-size: 1.1rem;
    border-left: 8px solid #052962;
    padding: 0.385rem;
}

.steps__text a:hover {
    color: #e02e3d;
}

/*==============CHECK==============*/

.check {
    box-shadow: 0px 0px 10px 0px;
    max-width: 100%;
    font-family: Arial, Helvetica, sans-serif !important;
}

.check__bot-grid-col-text {
    height: 50px;
}

.check__wrapper {
    padding: 0.5rem;
}

.check__top {
}

.check__iban {
    margin-bottom: 1rem;
    display: block;
    font-weight: 500;
}

.check__top-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.check__top-col-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem;
}

.check__top-col-1-row {
    display: flex;
    flex-direction: column;
}

.bank__logo {
}

.check__top-col-title {
}

.check__top-col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.check__bot {
    border-bottom: 3px solid #000;
}

.check__bot-grid {
    display: grid;
    grid-template-columns: auto 5fr 1fr 1fr 1fr;
}

.check__bot-grid-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #000;
}

.check__bot-grid-col-title {
    font-weight: 500;
    background-color: rgba(128, 128, 128, 0.39);
    border-right: 1px solid #000;
    border-bottom: 3px solid #000;
    padding-left: 2px;
    font-size: 0.8rem;
    height: 100%;
}

.check__thanks {
    text-align: right;
    display: block;
    margin: 0.5rem 2rem;
}

/*=========CHECKMQ=======*/

@media (max-width: 1200px) {
    .check {
        font-size: 0.8rem;
    }
}

@media (max-width: 1024px) {
    .check {
        font-size: 0.6rem;
    }
}

@media (max-width: 992px) {
    .check {
        font-size: 0.5rem;
    }

    .check__bot-grid-col-text {
        height: 30px;
    }
}

/*===========BENEFITS============*/

/*=========REG=============*/

.reg {
    margin-top: 1rem;
    font-size: var(--text-size);
}

.reg__title {
    font-weight: 700;
}

.reg__list {
    max-width: 80%;
    margin: 0 auto;
    font-size: var(--title-size);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.reg__item {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    list-style-type: disc;
    font-weight: normal;
}

/*==========TAGS================*/

.tags {
    margin-top: 3rem;
    font-size: var(--text-size);
}

.tags__row {
    display: flex;
    gap: 0.5rem;
}

.tags__title {
    font-weight: 700;
}

.tags__row a {
    color: #3b5998;
}

.tags__block:hover {
    color: #e02e3d;
}

/*=========COMMENTS==========*/

.comments {
    margin-top: 2rem;
}

.block {
    padding-top: 0.5rem;
}

.answer {
    padding-left: 3rem;
}

.answer-block {
    border-left: 4px solid #000;
    padding-top: 0.4rem !important;
}

.comments__title {
    font-weight: 700;
    color: #1b1b1b;
}

.comments__title::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #000;
    margin-bottom: 1rem;
}

.comments__block {
    border-bottom: 1px solid rgba(0, 0, 0, 0.279);
}

.block__input {
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
    padding: 12px 16px 20px;
}

.block__input-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
}

.block__input-top span:first-child {
    color: #000;
    font-weight: 700;
}

.block__input-top span:last-child {
    color: #3b5998;
}

.block__input-info {
    display: flex;
    gap: 0.4rem;
}

.block__input-info input {
    width: 100%;
    height: 80px;
    border-radius: 5px;
    border: 1px solid #1b1b1b;
    text-align: left;
}

.block__input-avatar {
}

.avatar__img {
    max-width: 50px;
    border-radius: 5px;
}

.block__row {
    padding: 0 10px;
    display: flex;
}

.block__info {
    flex: 1 1 90%;
    margin-left: 0.5rem;
}

.info__name {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info__name-dis {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #4d4d4d;
    font-size: 0.9rem;
}

.info__text-text {
    text-align: left;
    font-size: 16px;
}

.info__like {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 5px;
}

.info__like-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    color: #4d4d4d77;
}

.info__like-row .fa-twitter {
    font-size: 0.8rem;
}

.block__info::after {
    margin-bottom: 1rem;
}

.comments__link {
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 1rem;
    color: #3b5998;
}

.comments__link:hover {
    color: #e02e3d;
}

.comment-block-input__button {
    cursor: pointer;
}

/*=========ADV============*/

.adv__content {
    padding-top: 1rem;
    padding-right: 0.385rem;
    width: 100%;
    max-width: 100%;
    background-color: #f7f7f8;
}

/* .adv__img {
    width: 120px;
} */

/*===========RECOMMEND===============*/

/*========FOOTER===========*/

.footer {
    background-color: #f7f7f8;
    color: #1b1b1b;
    padding-top: 1rem;
}

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

/*========MEDIA QUERIES==========*/

@media (max-width: 1400px) {
    .container-my {
        max-width: 70%;
    }

    .header__item {
        font-size: 0.8rem;
    }
}

@media (max-width: 1200px) {
    .container-my {
        max-width: 80%;
    }
}

@media (max-width: 1024px) {
    /* .header__list a:nth-child(4){
          display: none;
      }
      .header__list a:nth-child(5){
          display: none;
      } */
    .header__list a:nth-child(6) {
        display: none;
    }

    .header__list a:nth-child(7) {
        display: none;
    }

    .header__list a:nth-child(8) {
        display: none;
    }

    .reg__list {
        font-size: var(--title-size-md);
        font-weight: 700;
    }
}

@media (max-width: 992px) {
    .main__title {
        font-size: 2rem;
    }

    .fa-twitter {
        padding: 0.5rem;
    }
}

@media (max-width: 768px) {
    .main {
        margin-top: 0;
        padding-top: 0;
    }

    .main__title {
        margin-top: 0;
    }

    .adv__content {
        display: none;
    }

    .header__logo {
        max-width: 40%;
    }

    .header__list a:nth-child(3) {
        display: none;
    }

    .button-link {
        max-width: 80%;
    }
}

@media (max-width: 540px) {
    .container-my {
        max-width: 100%;
    }

    .container {
        padding: 0;
    }

    .header__list {
        display: none;
    }

    .main__title {
        font-size: 1.5rem;
    }

    .info__text {
        line-height: 30px;
    }
}

@media (max-width: 425px) {

    .main__title {
        font-size: var(--title-size-sd);
        margin-top: 1rem;
    }

    .info__name {
        font-size: 15px;
    }
}

.burger-header {
    background-image: url("../images/c8512d31cef74e5410f825b08cd97eae3643f996.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    display: none;
}

@media (max-width: 540px) {
    .burger-header {
        display: inline-block;
    }

    .header__row.container-sm {
        justify-content: space-between;
        padding: 0 15px;
    }
}

/*==============RESET===================*/

:root {
    --green: #cee741;
    --violet: #5c3680;
    --orange: #f35a3c;
    --blue: #015196;
    --yellow: #feda00;
    --white: #ffffff;
    --gray: #828c93;

    --title-color: #1b1b1b;
    --text-color: #1b1b1b;
    --label-color: #767d84;
    --box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);

    --xxl: 1400px;
    --xl: 1200px;
    --lg: 992px;
    --md: 768px;
    --sm: 576px;
    --xs: 425px;

    --text-size: 1.385rem;
    --title-size: 2.5rem;
    --title-size-md: 2.1rem;
    --title-size-sd: 1.5rem;
}

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

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    height: 100%;

    color: var(--title-color);
}

h1,
h3,
h4 {
    color: var(--title-color);
}

h1 {
    font-size: var(--title-size);
}

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

ul {
    padding: 0;
    margin: 0;
}

p {
    margin: 0;
}

a {
    color: #ff0015c9;
    font-weight: 700;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.container-my {
    max-width: 990px;
    margin: 0 auto;
}

.content__main {
    background-color: #ffffff;
}

.label {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(68, 68, 68, 0.596);
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-style: italic;
}

.content {
    background-color: #f7f7f7;
}

.hidden {
    display: none;
}

.fab,
.fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fa-bars:before {
    content: "\f0c9";
}

.fa-envelope:before {
    content: "\f0e0";
}

.fa-facebook:before {
    content: "\f09a";
}

.fa-thumbs-down:before {
    content: "\f165";
}

.fa-thumbs-up:before {
    content: "\f164";
}

.fa-twitter:before {
    content: "\f099";
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src:
            url("../fonts/fa-brands-400.woff2") format("woff2"),
            url("../fonts/fa-brands-400.ttf") format("truetype")
}

.fab {
    font-family: "Font Awesome 5 Brands";
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src:
            url("../fonts/fa-regular-400.woff2") format("woff2"),
            url("../fonts/fa-regular-400.ttf") format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/fa-regular-400.woff2") format("woff2"),
    url("../fonts/fa-regular-400.ttf") format("truetype")
}

.fab {
    font-weight: 400;
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fonts/fa-solid-900.woff2") format("woff2"),
    url("../fonts/fa-solid-900.ttf") format("truetype")
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fonts/fa-solid-900.woff2") format("woff2"),
    url("../fonts/fa-solid-900.ttf") format("truetype")
}

.fas {
    font-family: "Font Awesome 5 Free";
}

.fas {
    font-weight: 900;
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src:url("../fonts/fa-solid-900.woff2") format("woff2"),
    url("../fonts/fa-solid-900.ttf") format("truetype")
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src:url("../fonts/fa-brands-400.woff2") format("woff2"),
    url("../fonts/fa-brands-400.ttf") format("truetype")
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    src: url("../fonts/fa-regular-400.woff2") format("woff2"),
    url("../fonts/fa-regular-400.ttf") format("truetype");
    unicode-range: U+f004-f005, U+f007, U+f017, U+f022, U+f024, U+f02e,
    U+f03e, U+f044, U+f057-f059, U+f06e, U+f070, U+f075, U+f07b-f07c,
    U+f080, U+f086, U+f089, U+f094, U+f09d, U+f0a0, U+f0a4-f0a7, U+f0c5,
    U+f0c7-f0c8, U+f0e0, U+f0eb, U+f0f3, U+f0f8, U+f0fe, U+f111,
    U+f118-f11a, U+f11c, U+f133, U+f144, U+f146, U+f14a, U+f14d-f14e,
    U+f150-f152, U+f15b-f15c, U+f164-f165, U+f185-f186, U+f191-f192,
    U+f1ad, U+f1c1-f1c9, U+f1cd, U+f1d8, U+f1e3, U+f1ea, U+f1f6, U+f1f9,
    U+f20a, U+f247-f249, U+f24d, U+f254-f25b, U+f25d, U+f271-f274, U+f279,
    U+f28b, U+f28d, U+f2b5-f2b6, U+f2b9, U+f2bb, U+f2bd, U+f2c1-f2c2,
    U+f2d0, U+f2d2, U+f2dc, U+f2ed, U+f3a5, U+f3d1, U+f410;
}

@font-face {
    font-family: "FontAwesome";
    font-display: block;
    unicode-range: U+f003, U+f006, U+f014, U+f016, U+f01a-f01b, U+f01d,
    U+f040, U+f045-f047, U+f05c-f05d, U+f07d-f07e, U+f087-f088,
    U+f08a-f08b, U+f08e, U+f090, U+f096-f097, U+f0a2, U+f0e4-f0e6,
    U+f0ec-f0ee, U+f0f5-f0f7, U+f10c, U+f112, U+f114-f115, U+f11d, U+f123,
    U+f132, U+f145, U+f147-f149, U+f14c, U+f166, U+f16a, U+f172,
    U+f175-f178, U+f18e, U+f190, U+f196, U+f1b1, U+f1d9, U+f1db, U+f1f7,
    U+f20c, U+f219, U+f230, U+f24a, U+f250, U+f278, U+f27b, U+f283, U+f28c,
    U+f28e, U+f29b-f29c, U+f2b7, U+f2ba, U+f2bc, U+f2be, U+f2c0, U+f2c3,
    U+f2d3-f2d4;
}


figure {
    margin: 16px 0;
}

figcaption {
    color: #757575;
    text-align: center;
    font-size: 1rem;
}

.bordered {
    padding-left: 1.1rem;
    border-left: 8px solid #052962;
}

.info__text p,
.info__text h3 {
    margin-bottom: 24px;
}

.info__text p {
    font-weight: 400;
}

:root {
    --root-width: 100%;
    --root-max-width: none;
    --root-padding-left: 32px;
    --root-padding-top: 32px;
    --root-padding-right: 32px;
    --root-padding-bottom: 32px;
    --root-overflow: hidden;
    --root-bg: rgba(255, 255, 255, 1);
    --root-color: rgba(15, 15, 15, 1);
    --button-primary-bg: rgba(15, 15, 15, 1);
    --button-primary-hover-bg: rgba(28, 28, 28, 1);
    --button-primary-color: rgba(15, 15, 15, 1);
    --button-secondary-bg: rgba(230, 230, 230, 1);
    --button-secondary-hover-bg: rgba(217, 217, 217, 1);
    --button-secondary-color: rgba(15, 15, 15, 1);
    --button-normal-bg: rgba(15, 15, 15, 0.05);
    --button-normal-color: rgba(15, 15, 15, 1);
    --input-bg: rgba(15, 15, 15, 0.05);
    --input-color: rgba(15, 15, 15, 1);
    --input-placeholder-color: rgba(15, 15, 15, 0.5);
}

@font-face {
    font-family: emoji;
    src: local('Apple Color Emoji'), local('Android Emoji'), local('Segoe UI'), local(EmojiSymbols), local(Symbola);
    unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF
}