@media screen and (min-width: 769px) {
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    .mobile {
        display: none;
    } 
    
    .desktop {
        display: flex;
        flex-direction: row;
    }

    .not_available {
        color: red;
        font-family: "Courier prime";
        font-size: 1.4vw; 
        text-align: center;
        margin: -15px;
    }

    aside {
        width: 13vw;
        height: 100vh;
        background-color: #f9f9f9;
        position: fixed;
    }

    .logo_bean {
        width: 2.7vw;
        margin-top: 2.5vw;
        margin-left: 5vw;
    }

    .menu {
        list-style-type: none;
        margin-top: 5.2vw;
        margin-left: 1vw;
    }

    .menu_item {
        font-size: 1vw;
        font-family: "Courier prime";
        padding-bottom: 1.05vw;
    }

    .menu_item a {
        text-decoration: none;
        color: black;
    }

    .menu_item a:hover {
        color: #c7db95;
        font-weight: 800;
    }

    .active {
        color: #c7db95!important;
        font-weight: 800; 
    }

    .social {
        margin-top: 20.8vw;
        margin-left: 5.5vw;
    }

    .social_insta {
        width: 1.4vw;
        height: auto;
    }

    .social_fb {
        width: 0.8vw;
        height: auto;
        margin-left: 0.8vw;
    }

    .language {
        margin-left: 68vw;
        margin-top: 2vw;
        display: flex;
        flex-direction: row;
    }

    .circle {
        width: 2vw;
        height: 3vw;    
        /* background-image: url('../img/circle-1.png'); */
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: 0.5vw;
    }

    .lang {
        color: white;
        text-decoration: none;
        font-family: "Courier prime";
        font-size: 1.4vw;
        display: flex;
        align-self: center;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 1vw;
    }

    .active_lang {
        font-weight: 800;
    }

    .main_page {
        width: 87vw;
        height: 47vw;
        margin-left: 13vw;
        background-image: url('../img/main_bgr.png');
        background-size: 105% 100%;
        background-repeat: no-repeat;
    }

    .main_logo {
        width: 24vw;
        height: auto;
        margin-top: 14vw;
        margin-left: 31.5vw;
    }

    .main_text {
        text-align: center;
        margin-top: 4.8vw;
        font-family: "Courier prime";
        font-size: 1vw;
        color: white;
    }

    .order_btn {
        width: 8.7vw;
        height: 2.3vw;
        margin-left: 39.5vw;
        margin-top: 1.5vw;
        background-color: transparent;
        border: 1px solid white;
        font-family: "Courier prime";
        font-size: 0.9vw;
        font-weight: 800;
        color: white;
    }

    .order_btn a {
        text-decoration: none;
        color: white;
    } 

    .order_btn:hover {
        background-color: white;
        transition: 0.6s;
        color: black;
    }

    /* about section */

    .about {
        width: 87vw;
        height: 47vw;
        margin-left: 13vw;
        background-color: #fff9f1;
    }

    .about_text {
        text-align: center;
        font-family: "Courier prime";
        font-size: 3vw;
        color: black;
    } 

    .indent {
        margin-left: 3vw;
    }

    .container {
        width: 50vw;
    }

    .about_prgr_text {
        width: 35vw;
        margin-left: 9vw;
        padding-top: 4vw;
        font-family: "Courier prime";
        font-size: 1vw;
        color: black;
        text-align: justify;
    }

    .about_bold {
        font-weight: 800;
    }

    .container2 {
        position: relative;
        background-color: #fff9f1;
    }

    .elem1_sec2 {
        position: absolute;
        z-index: 1;
        width: 13vw;
        height: 14vw;
        top: 19vw;
        left: -20vw;    
    }

    .elem2_sec2 {
        position: absolute;
        z-index: 2;
        width: 19vw;
        height: 25vw;
        top: 13vw;
        left: -30vw;
    }

    .elem3_sec2 {
        position: absolute;
        z-index: 2;
        width: 12vw;
        height: 12vw;
        top: 8vw;
        left: -18vw;
    }

    /* Coffee section*/

    .coffee_wraper {
        display: flex;
        flex-direction: column;
        margin-left: 13vw;
        padding-bottom: 5vw;
    }
    
    .coffee_title {
        margin-left: 10vw;
        margin-top: 3vw;
        font-family: "Courier prime";
        font-size: 2.6vw;
        color: black;
        font-weight: bold;
    }

    .coffee_container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 87vw
        /* margin-left: 10vw; */
    }

    .row2 {
        margin-left: 0vw;
    }

    .coffee_item {
        width: 15vw;
        padding: 1vw;
    }

    .coffee_pack {
        width: 12vw;
        height: auto;
        margin-left: 1vw;
        position: relative;
        z-index: 2;
    }

    .pack_container {
        width: 30vw;
        height: 30vw;
    }

    .wraper_pack {
        width: 20vw;
        height: 20vw;
    }

    .wraper_pack:hover > .coffee_pack {
        position: relative;
        top: -4vw;
        left: -3vw;
        width: 20vw;
        margin-bottom: -10.5vw;
        transition: 1s;
        cursor: pointer;
    }    

    .coffee_name {
        font-family: "Courier prime";
        font-size: 1.3vw;
        text-align: center;
        height: 2vw;
    }

    .coffee_about {
        font-family: "Courier prime";
        font-size: 0.9vw;
        text-align: left;
        width: 16vw;
        height: 5vw;
    }

    .box_price {
        font-family: "Courier prime";
        font-size: 1.23vw;
        font-weight: 800;
        text-align: right;
        width: 14vw;
        position: relative;
        /* top: 2vw; */
        top: 0vw;
    }
    
    .box {
        display: flex;
        flex-direction: column;
        width: 16vw;
    }

    .box2 {
        display: flex;
        flex-direction: row;
        margin-top: 1vw;
    } 

    .bold {
        font-weight: 800;
        font-size: 1.1vw;
    }

    .price {
        font-family: "Courier prime";
        font-size: 1.2vw;
        font-weight: 300;
        text-align: left; 
        width: 20vw;
    }

    a .btn_order {
        text-decoration: none;
        color: black;
    }

    .btn_order {
        background-color: transparent;
        border: 1px solid black;
        width: 7vw;
        height: 2vw;
        font-family: "Courier prime";
        font-size: 1.2vw;
        margin-left: 4.5vw;
        margin-top: 0vw;
        position: relative;
        top: -1vw;
    }

    .btn_order:hover {
        background-color: black;
        color: white;
        transition: 0.5s;
    }

    .discount_p {
        font-family: "Courier prime";
        font-size: 2vw;
        font-weight: 800;
        text-align: center;
        color: black;
        margin-left: -7vw;
    }

    .discount_table {
        width: 20vw;
        margin-left: 30vw;
        margin-top: -1vw;
        font-family: "Courier prime";
        font-size: 1.3vw;
        text-align: center;
    }

    .discount_table, .disc_tr, .disc_td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    .download {
        font-family: "Courier prime";
        font-size: 2vw;
        text-align: center;
        text-decoration: none;
        color: black;
        margin-top: 2vw;
    }

    /* Opt*/ 

    .box_opt {
        margin-left: 13vw;
    }

    .opt_container {
        display: flex;
        flex-direction: column;
        width: 87vw;
        height: 78vw;
        background-color: #fff9f1;
    }

    .opt_buy {
        font-family: "Courier prime";
        font-size: 2.5vw;
        text-align: center;
        margin-top: 5vw;
        margin-left: -8vw;
    }

    .opt_table {
        width: 70vw;
        margin-left: 7vw;
        margin-top: 0vw;
        font-family: "Courier prime";
        font-size: 1vw;
        border-collapse: collapse;
    } 

    .opt_table td {
        width: 4vw;
        text-align: left;
        height: 5vw;
        padding-left: 1vw;
    }

    .table_bold {
        font-weight: 800;
        height: 5vw;
        padding-left: 1vw;
        text-align: left;
    }

    .underline th  {
        border-bottom: 2px solid gray;
    }

    .coffee_beans_opt {
        width: 10vw;
        height: auto;
        margin-left: 73vw;
        position: relative;
        top: -3vw;  
    }

    a .opt_order {
        outline: none;
    }

    .opt_order {
        width: 8.7vw;
        height: 2.3vw;
        margin-left: 4vw;
        margin-top: -0.5vw;
        background-color: transparent;
        border: 1px solid black;
        font-family: "Courier prime";
        font-size: 0.9vw;
        font-weight: 800;
        color: black;
    }

    .opt_order:hover {
        background-color: black;
        transition: 0.6s;
        color: white;
    }

    .value_pack {
        font-family: "Courier prime";
        font-size: 1.5vw;
        color: darkgray;
        margin-left: 10vw;
    }

    .light {
        font-weight: 300;
    }

    .price_date {
        font-family: "Courier prime";
        font-size: 0.9vw;
        color: darkgray;
        margin-left: 10vw;
    }
    
    .box_buttons {
        display: flex;
        flex-direction: row;
        width: 40vw;
        margin-left: 26vw;
    }

    /* Contacts */

    #section5 {
        height: 44vw;
    }

    .contacts_container {
        display: flex;
        flex-direction: row;
        margin-left: 13vw;
        padding-bottom: 5vw;
    }

    .contacts_head {
        font-family: "Courier prime";
        font-size: 2.5vw;
        margin-left: 8vw;
        margin-top: 5vw;  
    }

    .email {
        display: flex;
        flex-direction: row;
        margin-top: 5vw;
    }

    .email_p {
        font-family: "Courier prime";
        font-size: 1.3vw;
        margin-left: 13vw;
        font-weight: 800;
    }

    .email_mail {
        font-family: "Courier prime";
        font-size: 1.3vw;
        margin-left: 7vw;
    }

    .mail_ua {
        margin-left: 7vw;
    }

    .mobile_sec {
        display: flex;
        flex-direction: row;
    }

    .mobile_p {
        font-family: "Courier prime";
        font-size: 1.3vw;
        margin-left: 13vw;
        font-weight: 800;
    }

    .mobile_mob {
        font-family: "Courier prime";
        font-size: 1.3vw;
        margin-left: 6vw;
    }

    .mob_ua {
        margin-left: 6vw;
    }

    .productor {
        display: flex;
        flex-direction: row;
    }

    .productor_p {
        font-family: "Courier prime";
        font-size: 1.3vw;
        margin-left: 13vw;
        font-weight: 800;
    }

    .productor_prod {
        font-family: "Courier prime";
        font-size: 1.3vw;
        margin-left: 2vw;
    }

    .prod_ua {
        margin-left: 5vw;
    }
    .prod_ru {
        margin-left: 1vw;
    }

    .adress {
        display: flex;
        flex-direction: row; 
    }

    .adress_p {
        font-family: "Courier prime";
        font-size: 1.3vw;
        margin-left: 13vw;
        font-weight: 800; 
    }

    .adress_adr {
        font-family: "Courier prime";
        font-size: 1.3vw;
        margin-left: 6vw;
    }

    .adr_ua {
        margin-left: 7vw;
    }

    .adr_ru {
        margin-left: 7vw;
    }

    .contacts_box {
        width: 51vw;
    }

    .contacts_box2 {
        position: relative;
        margin-top: 5vw;
        width: 50vw;
        margin-right: 13vw;
    }

    .elem1 {
        width: 15vw;
        height: 24vw;
        position: absolute;
        left: 17vw;
        top: 4vw;
        z-index: 1;
    }

    .elem2 {
        width: 15vw;
        height: auto;
        position: absolute;
        top: 10vw;
        left: 10vw;
        z-index: 2;
    }

    .elem3 {
        width: auto;
        height: 11vw;
        position: absolute;
        left: 27.6vw;
        top: 5.5vw;
        z-index: 2;
    }

    .twogen {
        font-family: "Courier prime";
        font-size: 1vw;
        width: 100vw;
        text-align: center;
        padding-bottom: 0vw;
    }
}

@media screen and (max-width: 768px) {
    .not_available {
        color: red;
        font-family: "Courier prime";
        font-size: 5.4vw; 
        text-align: center;
    }

    .desktop {
        display: none;
    }

    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .twogen {
        display: none;
    }

    .head_logo {
        width: 28vw;
        height: 8vw;
        margin-left: 11vw;
        margin-top: 3vw;
    }

    .mobile_bg {
        width: 100vw;
        height: 170vw;
        margin-top: -1vw;
    }

    #main_mobile {
        position: relative;
    }

    .logo_mobile {
        width: 50vw;
        height: auto;
        position: absolute;
        z-index: 2;
        top: 58vw;
        left: 26vw;
    }

    .main_text {
        position: absolute;
        top: 73vw;
        color: white;
        font-size: 3.5vw;
        font-family: "Courier prime";
        text-align: center;
        width: 80vw;
        margin-left: 10vw;
    }

    .order_btn {
        position: absolute;
        top: 100vw;
        left: 38vw;
        background-color: transparent;
        font-size: 3.5vw;
        font-family: "Courier prime";
        color: white;
        width: 27vw;
        border: 2px solid white;
        height: 8vw;
        text-align: center;
        padding-right: 5vw;
    }

    .order_btn:hover {
        background-color: white;
        color: black;
    }

    #about_mobile {
        background-color: #fff9f1;
        margin-top: -5vw;
        padding-top: 10vw;
        padding-bottom: 112vw;
    }

    .about_text {
        font-size: 10vw;
        text-align: center;
        font-family: "Courier prime";
        font-weight: 800;
    }

    .about_prgr_text {
        font-size: 3.5vw;
        font-family: "Courier prime";
        margin-left: 7vw;
        margin-right: 5vw;
        text-align: left;
    }

    .about_bold {
        font-weight: 800;
    }

    .container2 {
        position: relative;
        margin-top: 20vw;
    }

    .elem1_sec2 {
        position: absolute;
        top: 20vw;
        left: 75vw;
        width: 15vw;
        height: auto;
    }

    .elem2_sec2 {
        position: absolute;
        width: 70vw;
        height: auto;
        left: 10vw;
        z-index: 2;
    }

    .elem3_sec2 {
        position: absolute;
        z-index: 2;
        width: 30vw;
        left: 63vw;
        top: -12vw;
    }

    .coffee_wraper {
        display: flex;
        flex-direction: column;
    }

    .coffee_item {
        padding-top: 10vw;
        padding-bottom: 10vw;
    }

    .coffee_title {
        font-size: 10vw;
        text-align: center;
        font-family: "Courier prime";
        font-weight: 800;
    }

    .coffee_pack {
        width: 80vw;
        height: auto;
        margin-left: 10vw;
    }

    .coffee_name {
        font-size: 7vw;
        text-align: center;
        font-family: "Courier prime";
        font-weight: 800;
    }

    .coffee_about {
        font-size: 3.5vw;
        text-align: center;
        font-family: "Courier prime";
        font-weight: 500;
        width: 80vw;
        margin-left: 10vw;
    }

    .box_price {
        font-family: "Courier prime";
        font-size: 4.5vw;
        font-weight: 800;
        text-align: right;
        width: 30vw;
        position: relative;
        top: 0.2vw;
    }
    
    .box {
        display: flex;
        flex-direction: column;
    }

    .box2 {
        display: flex;
        flex-direction: row;
    } 

    .bold {
        font-weight: 800;
    }

    .price {
        font-family: "Courier prime";
        font-size: 4vw;
        font-weight: 300;
        text-align: left;
        margin-left: 10vw;
        width: 50vw;
    }
    .btn_order {
        background-color: transparent;
        font-family: "Courier prime";
        font-size: 3.5vw;
        color: black;
        width: 26vw;
        border: 1px solid black;
        height: 8vw;
        margin-left: 37vw;
        margin-top: 10vw;
        text-align: center;
        padding-right: 5vw;
    }

    .btn_order:hover {
        background-color: white;
        color: black;
    }

    #contacts_mobile {
        background-color: #fff9f1;
        padding-bottom: 5vw;
    }

    .contacts_head {
        font-size: 10vw;
        text-align: center;
        font-family: "Courier prime";
        font-weight: 800;
        padding-top: 10vw;
    }

    .email {
        display: flex;
        flex-direction: row;
    }

    .email_p {
        margin-left: 6vw;
        font-family: "Courier prime";
        font-size: 4.5vw;
        font-weight: 800;
    }

    .email_mail {
        margin-left: 6vw;
        font-family: "Courier prime";
        font-size: 4.5vw;
        margin-top: 5vw;
    }

    .mobile_mob {
        margin-left: 3vw;
        font-family: "Courier prime";
        font-size: 4.5vw;
        margin-top: 5vw;
    }

    .productor_prod {
        margin-left: 3vw;
        font-family: "Courier prime";
        font-size: 4.5vw;
        margin-top: 5vw;
    }

    .adress_adr {
        margin-left: 3vw;
        font-family: "Courier prime";
        font-size: 4.5vw;
        margin-top: 5vw;
    }

    .contacts_box2 {
        position: relative;
    }

    .elem1 {
        position: absolute;
        z-index: 1;
        top: 1vw;
        left: 40vw;
        width: 50vw;
        height: auto;
    }

    .elem2 {
        position: absolute;
        z-index: 2;
        top: 18vw;
        left: 7vw;
        width: 60vw;
        height: auto;
    }

    .elem3 {
        position: absolute;
        z-index: 2;
        width: 8vw;
        height: auto;
        top: 10vw;
        left: 76vw;
    }

    .twogen_mobile {
        font-family: "Courier prime";
        font-size: 3.5vw;
        margin-top: 7vw;
        margin-left: 30vw;
    }

    .opt_buy {
        font-family: "Courier prime";
        font-size: 10vw;
        text-align: center;
        margin-top: 5vw;
    }

    .opt_table {
        width: 100vw;
        margin-left: 5vw;
        margin-top: 0vw;
        font-family: "Courier prime";
        font-size: 3.5vw;
        border-collapse: collapse;
    } 

    .underline th {
        border-bottom: 2px solid gray;
    }

    .table_bold {
        font-weight: 800;
        height: 5vw;
    }

    td {
        text-align: center;
    }

    .coffee_beans_opt {
        width: 30vw;
        height: auto;
        margin-left: 68vw;
        position: relative;
        top: -3vw;
    }

    .opt_order {
        width: 28vw;
        height: 8.3vw;
        margin-left: 37.5vw;
        margin-top: 9.5vw;
        background-color: transparent;
        border: 1px solid black;
        font-family: "Courier prime";
        font-size: 3.5vw;
        color: black;
        text-align: center;
        padding-right: 5vw;
    }

    .opt_order:hover {
        background-color: black;
        transition: 0.6s;
        color: white;
    }

    textarea,
    input.text,
    input[type="text"],
    input[type="button"],
    input[type="submit"],
    .input-checkbox,
    button {
        -webkit-appearance: none;
        border-radius: 0;
    }

    .social_insta {
        width: 10vw;
        height: auto;
        margin-top: 100vw;
        margin-right: 5vw;
        margin-left: 34vw;
    }

    .social_fb {
        width: 5.5vw;
        height: auto;
    }

    /* Languages */

    .language {
        margin-left: 5vw;
        margin-top: 4vw;
        display: flex;
        flex-direction: row;
    }

    .circle {
        width: 6vw;
        height: 6vw;
        background-image: url(../img/circle-1.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: 0.5vw;
    }

    .lang {
        color: black;
        text-decoration: none;
        font-family: "Courier prime";
        font-size: 2.5vw;
        font-weight: 800;
        display: flex;
        align-self: center;
        justify-content: center;
        align-items: center;
        position: relative;
        top: -1vw;
    }

    /* Table */
    .discount_p {
        font-family: "Courier prime";
        font-size: 9vw;
        font-weight: 800;
        text-align: center;
        color: black;
        margin-left: -1vw;
    }

    .discount_table {
        width: 68vw;
        margin-left: 17vw;
        margin-top: 1vw;
        margin-bottom: 13vw;
        font-family: "Courier prime";
        font-size: 4.5vw;
        text-align: center;
    }

    .discount_table, .disc_tr, .disc_td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    .download {
        font-family: "Courier prime";
        font-size: 3.5vw;
        text-align: center;
        text-decoration: none;
        color: black;
        margin-top: 2vw;
        margin-left: 30vw;
    }

    .value_pack {
        font-family: "Courier prime";
        font-size: 3.5vw;
        color: darkgray;
        margin-left: 10vw;
    }

    .light {
        font-weight: 300;
    }
    
    .price_date {
        font-family: "Courier prime";
        font-size: 3vw;
        margin-left: 5vw;
    }

    /* Overflow */
    header, .menu_mobile, #main_mobile, #about_mobile, #coffee_mobile, #opt_mobile, #contacts_mobile {
        overflow-x: hidden;
    }
}

@media screen and (max-width: 425px) {
    .lang {
        color: black;
        text-decoration: none;
        font-family: "Courier prime";
        font-size: 2.5vw;
        font-weight: 800;
        display: flex;
        align-self: center;
        justify-content: center;
        align-items: center;
        position: relative;
        top: -5vw;
    }
}



