/*-----------------СБРОС--------------*/
    
    * {

        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }
    
    html,
    body {
        font-family: OpenSans-Regular;
        font-size: 16px;
        line-height: normal;
        color: #000000;
    }
    
    a {
        text-decoration: none;
        color: #000000;
    }
    
    h1,
    h2,
    h3,
    h4 {
        font-weight: inherit;
        font-size: inherit;
    }
    
    ul,
    ol,
    li {
        list-style: none;
    }
    
    .wrapper {
        max-width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .container {
        max-width: 1170px;
        margin: 0 auto;
        padding: 0 15px 0;
        box-sizing: content-box;
    }
    
    /*@media TABLET------------------MAIN*/
    @media (min-width: 641px) and (max-width: 1199px) {
        .container {
            padding: 0 36px 0;
        }
    }
       
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        clip: rect(0 0 0 0);
    } 
    
    @font-face {
        font-family: "OpenSans-Regular";
        src: local("OpenSans-Regular"), url("../fonts/OpenSans-Regular.woff");
        src: local("OpenSans-Regular"), url("../fonts/OpenSans-Regular.woff2");
        src: url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Regular.woff");
        font-weight: 400;
        font-style: normal;
    }
    
    @font-face {
        font-family: "OpenSans-Bold";
        src: local("OpenSans-Bold"), url("../fonts/OpenSans-Bold.woff");
        src: local("OpenSans-Bold"), url("../fonts/OpenSans-Bold.woff2");
        src: url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Bold.woff");
        font-weight: 700;
        font-style: normal;
    }
    /*-------------------HERDER-------------------*/
    
    .header {
        position: relative;
        z-index: 1;
       
        width: 100%;
        min-height: 449px;
        margin-bottom: 58px;
       
        background-color: #666666;
        background-image: url("../images/banner-bg.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    
    .header::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        
        background-color: #000000;
        opacity: 0.5;
    }
    
    .header-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 46px;
        padding-top: 26px;
    }
        
    .logo-picture {
        width: 185px;
    }
    
    .header-navigation {
        display: flex;
        align-items: center;
    }

    .header-navigation-burger-link:hover {
        opacity: 0.7;
    }

       .header-navigation-burger-link:active {
        opacity: 0.5;
    }
    
    .header-navigation-burger {
        display: none;
    }
    
    .navigation-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
        
    .navigation-item:not(:last-child) {
        margin-right: 36px;
    }
    
    .navigation-link {
        font-size: 0.81rem;
        line-height: inherit;
        
        color: #ffffff;
        text-transform: uppercase;
    }
    
    .navigation-link:hover {
        border-bottom: 1px solid #ffffff;
    }
    
    .header-heading {
        margin-top: 100px;
    }
    
    .header-slogan {
        max-width: 720px;
        margin: 0 auto;
       
        text-align: center;
        font-size: 45px;
        line-height: 1.67;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        color: #ffffff;
        text-transform: uppercase;
    }

    /*@media TABLET------------------HERDER */
    @media (max-width: 1260px) {
        .header-menu {
            padding-top: 26px;
        }
    }
    
    @media (max-width: 1199px) {
        .header {
            min-height: 390px;
            background-image: url("../images/banner-bg-tablet.jpg");
        }
         .header-menu {
            padding-top: 42px;
        } 
        .navigation-list {
            display: none;
        }
        .header-navigation-burger{
            display: block;
        }
        .header-heading {
            margin-top: 90px;
        }
        .header-slogan {
            font-size: 40px;
        }
    }

    @media (max-width: 768px) {
        .header-heading {
            margin-top: 80px;
        }
       .header-slogan {
             font-size: calc(26px + (40 - 26) * ((100vw - 360px) / (768 - 360))); 
        }
    }
    
    /*@media MOBILE------------------HERDER*/
    @media (max-width: 640px) {
        .header {
            min-height: 639px;
            background-image: url("../images/banner-mobile.jpg");
        }
        .header-menu {
            position: relative;
            flex-direction: column-reverse;
            padding-top: 222px;
        }
        .logo-picture {
            width: 270px;
            height: 60px;
        }
        .navigation-list {
            display: none;
        }
        .header-navigation {
            margin: 0;
        }
        .header-navigation-burger {
            position: absolute;
            top: 30px;
            right: 15px;
            margin: 0;
        }
        .header-heading {
            margin-top: 40px;
            padding: 0 16px;
        }
    }

    @media (max-width: 360px) {
        .header {
            margin-bottom: 40px;
        }
        .header-slogan {
            font-size: 26px;
        }
    }
    /*--TRANDS-------------------*/
    
    .page-title {
        position: relative;
        text-align: center;
        font-size: 20px;
        line-height: normal;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        text-transform: uppercase;
        margin-bottom: 2.3em;
    }
    
    .page-title::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: calc(50% - 68px / 2);
        
        width: 68px;
        height: 2px;
        background-color: #e1d9bd;
    }

    .page-title-link {
        position: relative;
    }
    .page-heading-items {
        display: flex;
        flex-wrap: wrap;
    }
        
    .page-heading-item:not(:last-child) {
        margin-right: 20px;
    }
    
    .page-heading-link {
        font-size: 0.875rem;
        line-height: normal;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        text-transform: uppercase;
        color: #b59f5b;
    }
    
    .page-trends {
        margin-bottom: 64px;
    }
    
    .section-trends {
        display: flex;
        justify-content: space-between;
        column-gap: 2px;
        min-height: 320px;
    }
    
    .trend-post {
        display: flex;
        align-items: flex-end;
        position: relative;
        padding: 20px;
        z-index: 1;
    }
    
    .trend-post::after {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
       
        background-color: #000000;
        opacity: 0.5;
    }
    
    .trend-image {
        max-width: 100%;
        
        background-color: #272918;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .post-header {
        width: 100%;
        margin: 0 auto;
        padding: 35px;
        border: 2px solid #877a51;
    }
    
    .trend-post:nth-child(1) {
        background-image: url("../images/trend1.jpg");
    }
    
    .trend-post:nth-child(2) {
        background-image: url("../images/trend2.jpg");
    }
    
    .trend-post:nth-child(3) {
        background-image: url("../images/trend3.jpg");
    }
    
    .trend-post:nth-child(4) {
        background-image: url("../images/trend4.jpg");
    }
    
    .trend-preview {
        margin-top: 10px;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        font-size: 20px;
        line-height: 1.5;
        text-transform: uppercase;
    }
    
    .trend-preview-link {
        color: #ffffff;
    }
    
    /*@media DESKTOP------------------TRANDS*/
    @media  (max-width: 1199px) {
        .page-title {
            font-size: calc(16px + (18 - 16) * ((100vw - 360px) / (1199 - 360)));
        }
    }

/*0*/
    @media  (min-width: 1201px) {
    /*4 колонки*/
        .section-trends {
            flex-wrap: nowrap;
        }
        .trend-post {
            min-height: 248px;
            flex: 1 1 25%;
        }
    }
/*1 и 2*/
    @media  (orientation: portrait) and (min-width: 641px) and (max-width: 1200px),
    (orientation: landscape) and (min-width: 641px) and (max-width: 1200px) {
        .trend-post:not(:last-child) {
            margin-right: 0;
        }
        .post-header {
            padding: calc(17px + (35 - 17) * ((100vw - 641px) / (1199 - 641)));
        }
     }
/*1*/
    @media  (orientation: portrait) and (min-width: 641px) and (max-width: 1200px) {
    /*2 колонки*/
        .page-trends {
            margin-bottom: 45px;
        }
        .section-trends {
            flex-wrap: wrap;
            column-gap: 2px;
            row-gap: 2px;
        }
        .trend-post {
            min-height: 248px;
            flex: 1 1 49%;
        }
        .trend-preview {
            font-size: calc(16px + (17 - 16) * ((100vw - 641px) / (1199 - 641)));
        }
    }
/*2*/
    @media  (orientation: landscape) and (min-width: 641px) and (max-width: 1200px) {
    /*4 колонки*/ 
        .section-trends {
            flex-wrap: nowrap;
            column-gap: 2px;
        }
        .trend-post {
            flex: 1 1 25%;
        }
        .trend-preview {
            font-size: calc(10px + (17 - 10) * ((100vw - 641px) / (1199 - 641)));
        }
    }
    @media  (orientation: landscape) and (min-width: 641px) and (max-width: 750px) {
        .trend-post {
            width: calc(155px + (189 - 155) * ((100vw - 641px) / (750 - 641)));
            flex: 1 1 25%;
        }
    }
/*3 и 4*/
    @media (orientation: portrait) and (max-width: 640px), 
(orientation: landscape) and (max-width: 640px) {
        .section-trends {
            flex-wrap: wrap;
            column-gap: 2px;
            row-gap: 2px;
        }
        .trend-preview {
            font-size: calc(16px + (17 - 16) * ((100vw - 641px) / (1199 - 641)));
        }
}
/*3*/
    @media (orientation: portrait) and (max-width: 640px) {
    /*1 колонка*/   
        .trend-post {
            flex: 1 1 100%;
        }
    }
/*4*/
    @media (orientation: landscape) and (max-width: 640px) {
        .page-trends {
            margin-bottom: 45px;
        }
    /*2 колонки*/
        .trend-post {
            min-height: 248px;
            flex: 1 1 49%;
        }
        .trend-post:not(:last-child) {
            margin-right: 0;
        }
    }

    /*-------------------MAIN-------------------*/
    
    .wrapper-page {
        display: flex;
        justify-content: space-between;
    }
    
    .main-content {
        max-width: calc(66.5% - 10px);
        margin-right: 10px;
    }
    
    .main-article {
        display: flex;
        justify-content: space-between;
    }
    
    .main-article:not(:last-child) {
        margin-bottom: 59px;
    }
    
    .section-preview {
        position: relative;
        margin-right: 30px;
    }
    
    .section-preview-image {
        background-color: #eff6f1;
        color: #000000;
        object-fit: cover;
    }
    
    .article-header {
        margin-bottom: 34px;
    }
    
    .article-heading-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 7px;
    }
    
    .article-heading-item {
        list-style: none;
    }
    
    .article-heading-item:not(:last-child) {
        margin-right: 20px;
    }
    
    .article-heading-link {
        font-family: "OpenSans-Bold", Arial, sans-serif;
        text-transform: uppercase;
        color: #000000;
        font-size: 14px;
        color: #b59f5b;
    }
    
    .article-title {
        font-size: 20px;
        line-height: 1.2;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        text-transform: uppercase;
    }
    
    .title-entry-link {
        color: #000000;
    }
    
    .article-datatime {
        margin-top: 16px;
        margin-bottom: 35px;
    }
    
    .article-meta {
        font-size: 12px;
        line-height: 3.3;
        color: #888888;
    }
    
    .article-author {
        margin-left: 15px;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        font-size: 12px;
    }
    
    .article-preview {
        font-size: 15px;
        margin-bottom: 10px;
    }
    
    /*@media TABLET------------------MAIN*/
    @media (max-width: 1199px) {
        .main-content {
            margin-right: 34px;
        }
        .main-article {
            flex-direction: column;
        }
        .section-preview {
            margin-right: 0;
            margin-bottom: 16px;
        }
        .section-preview-image {
            width: 100%;
        }
        .article-heading-items {
            margin-bottom: 15px;
        }
        .article-title {
            font-size: calc(16px + (17 - 16) * ((100vw - 360px) / (1199 - 360)));
        }
        .article-datatime {
            margin-top: 30px;
        }
        .article-preview,
        .article-header {
            margin: 0;
        }
        .article-header {
            margin-bottom: 19px;
        }
        .main-article:not(:last-child) {
            border-bottom: 3px solid #eeeeee;
            margin-bottom: 40px;
        }
    }
    
    /*@media MOBILE------------------MAIN*/
    @media (max-width: 640px) {
        .wrapper-page {
            flex-direction: column;
        }
        .main-content {
            margin: 0;
            margin-bottom: 45px;
            max-width: 100%;
        }
        .main-article {
            border-bottom: 3px solid #eeeeee;
        }
        .article-preview {
            font-size: 14px;
        }
    }
    
    
    /*-----------------------БОКОВАЯ ПАНЕЛЬ-----------------------*/
    
    /*-----Новые посты-------*/
    .aside-content {
        width: 272px;
    }
    
    .aside-title {
        font-size: 14px;
        line-height: normal;
        margin-bottom: 40px;
    }
    
    .aside-section-news:nth-child(n+2) {
        margin-top: 55px;
    }
    
    .aside-reference-article {
        display: flex;
    }
    
    .aside-reference-article:not(:last-child) {
        margin-bottom: 20px;
    }
    
    .aside-preview {
        margin-right: 18px;
    }
        
    .aside-preview-image {
        width: 70px;
        background-color: #eff6f1;
    }
        
    .aside-meta {
        font-size: 12px;
        color: #000000;
        opacity: 0.5;
    }
    
    .heading-excerpt-link {
        display: block;
        font-size: 14px;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        text-transform: uppercase;
        color: #000000;
    }

    /*-----Поиск------*/
    .aside-form-search {
        display: flex;
    }
    
    .aside-search {
        width: 220px;
    }
    
    .aside-email {
        width: 100%;
    }
    
    .aside-search,
    .aside-email {
        vertical-align: middle;
        height: 48px;
        padding: 20px;
        
        font-size: 13px;

        color: #000000;
        background-color: #f4f7f6;
        border: none;
    }
    
    .aside-search:hover,
    .aside-email:hover {
        border-bottom: 1px solid #b59f5b;
    }
    
    .aside-search:focus,
    .aside-email:focus {
        border-bottom: 1px solid #b59f5b;
    }
    
    .btn-search {
        width: 55px;
        height: 100%;
        
        background-color: #b59f5b;
        background-image: url("../svg/search.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 40%;

        border: none;
        cursor: pointer;
    }
    
    .btn-search:hover,
    .btn-email:hover {
        background-color: #323232;
        opacity: 0.8;
    }
    
    .btn-search:focus,
    .btn-email:focus {
        background-color: #b59f5b;
        opacity: 0.6;
    }
    /*-----Рассылка-----*/
    .news-mailing-list {
        margin-top: 56px;
    }
    
    .btn-email {
        width: 100%;
        height: 48px;
        margin-top: 16px;
        
        font-size: 14px;        
        font-family: "OpenSans-Bold", Arial, sans-serif;
        text-transform: uppercase;
        
        color: #ffffff;
        background-color: #b59f5b;
        border: none;

        cursor: pointer;
    }
   
    /*-----Теги------*/
    .aside-notes {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .aside-notes-item {
        list-style: none;
    }
    
    .aside-notes-link {
        display: block;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 3px 11px;
        
        font-family: "OpenSans-Bold", Arial, sans-serif;
        font-size: 12px;
        text-transform: uppercase;
        border: 4px solid #eeeeee;
        color: #000000;
        opacity: 0.8;
    }
    
    .aside-notes-link:hover {
        opacity: 1;
        color: #0f0d0e;
    }
   
    /*-----Темы-------*/
    .aside-subject-list {
        border-bottom: 1px solid #eeeeee;
        list-style: none;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        font-size: 12px;
    }
    
    .aside-subject-list:not(:first-child) {
        margin-top: 17px;
    }
    
    .aside-subject-list {
        padding-bottom: 15px;
    }
    
    .aside-subject-list-link {
        position: relative;
        
        font-family: "OpenSans-Bold", Arial, sans-serif;
        font-size: 14px;
        color: #000000;
        opacity: 0.8;
    }
    
    .aside-subject-list-link:hover {
        opacity: 1;
    }
    
    .list-amount-subject {
        font-size: 12px;
        margin-left: 5px;
        color: #b59f5b;
    }

    /*@media MOBILE------------------TRANDS*/
    @media (max-width: 640px) {
        .aside-content {
            width: 100%;
        }
        .aside-section-news:nth-child(n+2) {
            margin-top: 45px;
        }
    
        .aside-form-search {
            justify-content: space-between;
        }
        .form-group:first-child {
            width: 100%;
        }
        .aside-search {
            width: 100%;
        }
    }

    /*-----------------------ИЗДЕЛИЯ-----------------------*/
    
    .page-products {
        margin: 0 auto;
        margin-top: 60px;
        margin-bottom: 65px;
    }
       
    .products-items {
        display: flex;
        flex-wrap: wrap;
        row-gap: 30px;
    }
    
    .product-item {
        display: flex;
        flex-direction: column;
       
        position: relative;
        width: 347px;
        padding-top: 0;
        box-sizing: content-box;
    }
    
    .product-item-goods {
        width: 100%;
        padding: 0 24px;
        margin: 0 auto;  
    }
    
    .product-item-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-color: #eff6f1;
    }
    
    .product-item-description {
        flex-grow: 1;
        margin-top: -35px;
        padding: 29px 19px;
        border: 2px solid #b59f5b;
    }
    
    .product-item-title {
        margin-top: 21px;
        margin-bottom: 2px;
        
        font-family: "OpenSans-Bold", Arial, sans-serif;
        font-size: 20px;
        text-transform: uppercase;
    }
        
    .product-preview {
        font-family: "OpenSans-Regular", Arial, sans-serif;
        font-size: 15px;
        line-height: 1.6;
    }
    
    .product-preview-link {
        color: #b59f5b;
    }
    
    .product-buying-goods {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
    
    .product-price {
        font-family: "OpenSans-Bold", Arial, sans-serif;
    }
    
    .old-price {
        position: relative;
        font-size: 14px;
    }
    
    .old-price::before {
        position: absolute;
        content: "";
        display: block;
        width: 80%;
        height: 1px;
        top: 10px;
        left: 0;
        
        background-color: #000000;
    }
    
    .purchase-price {
        font-size: 20px;
    }
    
    .btn-shopping {
        width: 143px;
        height: 48px;
        
        font-size: 14px;
        text-transform: uppercase;
        font-family: "OpenSans-Bold", Arial, sans-serif;
        border: none;
        background-color: #b59f5b;
        color: #ffffff;
        cursor: pointer;
    }
    
    .btn-shopping:hover {
        background-color: #323232;
        opacity: 0.8;
    }
    
    .btn-shopping:focus {
        background-color: #b59f5b;
        opacity: 0.6;
    }

    /*@media DESKTOP------------------TRANDS*/
    @media (min-width: 1200px) {
        .products-items {
            column-gap: 64px; 
        }
    }
    @media (max-width: 1199px) {
        .product-item-title {
            font-size: 17px;
        }
    }
    /*@media TABLET------------------TRANDS*/
    @media (min-width: 641px) and (max-width: 1199px) {
        .page-products {
            margin: 51px 0;
        }
        .products-items {
            justify-content: space-between; 
        }
         .product-item {
           width: 48%;
        }

        .product-item-goods {
            padding-left:  calc(20px + (24 - 20) * ((100vw - 641px) / (1199 - 641)));   
            padding-right:  calc(20px + (24 - 20) * ((100vw - 641px) / (1199 - 641)));   
        }

        .product-item-title {
            font-size: calc(13px + (17 - 13) * ((100vw - 641px) / (1199 - 641)));   
        }

        .product-preview {
            font-size: calc(11px + (15 - 11) * ((100vw - 641px) / (1199 - 641))); 
        }

        .purchase-price {
            font-size: calc(15px + (20 - 15) * ((100vw - 641px) / (1199 - 641))); 
        }

        .btn-shopping {
            font-size: calc(9px + (14 - 9) * ((100vw - 641px) / (1199 - 641))); 
            width: calc(60px + (143 - 60) * ((100vw - 641px) / (1199 - 641))); 
            height: calc(35px + (48 - 35) * ((100vw - 641px) / (1199 - 641))); 
        }

        .old-price {
            font-size: calc(10px + (14 - 10) * ((100vw - 361px) / (1199 - 361))); 
        } 
    }

    /*@media MOBILE------------------TRANDS*/
    @media (max-width: 640px) {
        .page-products {
            margin: 41px 0;
        }
        .products-items {
            justify-content: center;
        }
        .product-item {
           width: 100%;
        }
            
        .product-item-goods {
            padding: 0 20px;
        }
    }

    /*-------------------FOOTER-------------------*/
    
    .footer-article-socials {
        display: flex;
        justify-content: center;
        margin-bottom: 74px;
        padding: 25px 20px;
        
        background-color: #f4f7f6;
        opacity: 0.5;
    }
    
    .footer-socials {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        column-gap: 20px;
        row-gap: 20px;
    }
    
    .socials-list-item {
        list-style: none;
    }
    
    .socials-link {
        position: relative;
        display: inline-block;
        width: 28px;
        height: 28px;
       
        font-size: 10px;
        color: #000000;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 25px;
    }
    
    .socials-link-text {
        position: absolute;
        width: 1px;
        height: 1px;
        clip: rect(1px, 1px, 1px, 1px);
    }
    
    .socials-link-twitter {
        background-image: url("../svg/004-twitter.svg");
    }
    
    .socials-link-pinterest {
        background-image: url("../svg/001-pinterest.svg");
    }
    
    .socials-link-facebook {
        background-image: url("../svg/002-facebook-logo.svg");
    }
    
    .socials-link-instagram {
        background-image: url("../svg/005-instagram.svg");
    }
    
    .socials-link-tumblr {
        background-image: url("../svg/003-tumblr.svg");
    }
    
    .footer-copyright {
        text-align: center;
        padding-bottom: 30px;
    }
        
    .footer-copyright-text {
        font-family: "OpenSans-Bold", Arial, sans-serif;
        font-size: 12px;
        color: #999999;
    }

     /*@media TABLET--MOBILE----------------FOOTER*/
   
     @media (max-width: 768px) {
        .footer-article-socials {
            margin-bottom: 50px;
        }
    }

    /*-----------------------PO-PUP-----------------------*/
    
    .popup-content {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        font-family: "OpenSans-Regular", Arial, sans-serif;
        font-size: 13px;
        background: rgba(0, 0, 0, 0.7);
        overflow-y: scroll;
        z-index: 50;
    }

    .popup-wrapper {
        padding: 40px 20px;
        margin: auto;
        
    }

    .popup-content-form {
        position: relative;
        max-width: 390px;
        padding: 53px 30px;
        background-color: #ffffff;
    }
    
    .popup-modal-close {
        position: absolute;
        z-index: 2;
        top: -25px;
        right: 0;
        cursor: pointer;
    }
    
    .popup-modal-close::before {
        position: absolute;
        content: " ";
        top: 0;
        right: 0;
        width: 15px;
        height: 15px;
        
        background-image: url("../svg/form-x.svg");
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .popup-modal-close:hover::before {
        opacity: 0.5;
    }
    
    .popup-modal-close:active::before {
        opacity: 0.3;
    }
    
    .popup-form-init {
        display: block;
        margin-top: 34px;
        margin-bottom: 12px;
    }
    
    .popup-content-visit~.popup-form-init {
        margin-top: 43px;
    }
    
    .popup-text {
        height: 50px;
    }
    
    .popup-decoration {
        width: 100%;
        vertical-align: middle;
        box-sizing: border-box;
        
        font-size: 13px;
        font-family: inherit;
        color: #000000;
        border: none;
        opacity: 0.6;
        background-color: #f4f7f6; 
    }
    
    .popup-decoration:hover {
        border-bottom: 1px solid #b59f5b;
    }
    
    .popup-decoration:focus {
        border-bottom: 1px solid #b59f5b;
    }
    
    .popup-decoration-radio {
        -webkit-appearance: none;
        -moz-appearance: none;
        
        padding-left: 20px;
        background-image: url("../svg/form-arrows.svg");
        background-position: 95% center;
        background-repeat: no-repeat;
        background-size: 3%;
        cursor: pointer;
    }
    
    .popup-content-mailing {
        position: relative;
        margin-top: 30px;
    }
    
    .popup-form-group-radio {
        display: inline-block;
    }
    
    .popup-form-group-radio:nth-of-type(n+2) {
        margin-left: 15px;
    }
    
    .popup-mailing {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
    }
    
    .popup-mailing:focus~.radio-group-text::before {
        outline: 1px solid #b59f5b;
        outline-offset: 5px;
    }
    
    .popup-mailing:checked~.radio-group-text::before {
        background-image: url("../svg/form-circle.svg");
    }
    
    .popup-mailing~.radio-group-text::before {
        background-image: url("../svg/form-empty-circle.svg");
    }
    
    .radio-group-text::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        
        margin-right: 8px;
        
        background-image: url("../svg/form-empty-circle.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 20px;
    }
    
    .popup-content-message {
        box-sizing: border-box;
        margin-top: 25px;
    }
    
    .popup-message {
        padding: 20px;
        resize: none;
    }
    
    .btn-popup {
        width: 100%;
        height: 50px;
        margin-top: 25px;
        
        font-size: 14px;
        text-transform: uppercase;
        font-family: "OpenSans-Bold", Arial, sans-serif;
       
        border: none;
        background-color: #b59f5b;
        color: #ffffff;
        cursor: pointer;
    }
    
    .btn-popup:hover {
        background-color: #323232;
        opacity: 0.8;
    }
    
    .btn-popup:focus {
        background-color: #b59f5b;
        opacity: 0.6;
    }
    

    @media (max-width: 640px) {
        .pop-wrapper {
        padding: 50px 15px;
    }
        .popup-modal-close {
            top: -38px;
        }
        .popup-modal-close::before {
            width: 28px;
            height: 28px;
        }
    }

    @media (max-width: 430px) {
        .popup-content-form {
            padding: 27px 25px 30px;
            /* width: calc(100vw - 30px); */
        }
    }