/* Landing Page Weinhandel (landingpage-wine.css) */
/* Copyright (C) 20222 by Helmuth Hahn-Heinze     */
/* Pictures used in html are from Pexels.com      */
@font-face {
    font-family: 'Myriad Pro Condensed';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts2/Myriad Pro Condensed/Myriad Pro Condensed.ttf");
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts2/Myriad Pro Condensed/Myriad Pro Condensed.ttf') format('truetype'),
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* Setzen aller Abstaende auf 0 */
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

html {

    background: #f7f5f2;
}

/*
html {
    -webkit-user-select: none;
*/
/* Safari */
/*    -ms-user-select: none;*/
/* IE 10 and IE 11 */
/*    user-select: none;*/
/* Standard syntax */
}


body {
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.navv {
    font-family: 'Myriad Pro Condensed', sans-serif;
    /* font-variant:small-caps;*/
    text-transform: uppercase;
    font-weight: lighter;
    margin-bottom: 100px;
}

.navbar {
    width: 650px;
    margin: auto;
    background-color: #ffffff;
    overflow: auto;
}

.navbar a {
    float: left;
    padding: 15px;
    color: gray;
    text-decoration: none;
    font-size: 25px;
    /* Four links of equal widths */
    text-align: center;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: #ffffff;
    color: darkgray;
    text-decoration-line: underline;
}

.navbar a.active {
    background-color: #ffffff;
    color: green;
}


.column {
    float: left;
    width: 33.33%;
    padding: 5px;
    background: #f7f5f2;
}

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}

.containerX {
    /*            max-width:  width: 100%;*/
    width: 100%;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    margin: auto;
    background: white;
    overflow: hidden;

}

.hd_logo {
    background: white;
    padding: 5px;
    position: absolute;
    top: 1px;
    left: 350px;
    font-size: 25px;
}

.hd-InVino01 {
    background: white;
    padding: 5px;
    position: absolute;
    top: 40px;
    left: 460px;
    font-size: 25px;
}

.headerblockX {
    /* background-color: var(--hgfarbe); */
    width: 0 auto;
    /*border: 1px solid #000;*/
    color: black;
    margin: 0 auto;
    /*    padding-bottom: 25px;*/
    padding-bottom: 0px;
    height: 90px;
    background: white;
    border-top: 1px solid black;
    /* box-shadow: 0px 1px 3px 1px #969494; */
    border-bottom: 1px solid black;
}

.wleafs {
    position: absolute;
    right: 5px;
    top: 5px;
}

/* for mobile set width: 40% */
.container {
    width: 70%;
    max-width: 1200px;
    margin: auto;
    background: #f7f5f2;
}

.item1x {
    grid-area: header;
}

.item2x {
    grid-area: main1;
}

.item3x {
    grid-area: main2;
}

.item4x {
    grid-area: main3;
}

.item5x {
    grid-area: main4;
}

.item6x {
    grid-area: main5;
}

.item7x {
    grid-area: main6;
}

.item8x {
    grid-area: main7;
}

.item9x {
    grid-area: footer;
}

.grid-container1 {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'main1 main1 main1 main1 main1 main1'
        'main2 main2 main2 main2 main2 main2'
        'main3 main3 main3 main3 main3 main3'
        'main4 main4 main4 main4 main4 main4'
        'main5 main5 main5 main5 main5 main5'
        'main6 main6 main6 main6 main6 main6'
        'main7 main7 main7 main7 main7 main7'
        'footer footer footer footer footer footer';
    gap: 2px;
    background-color: #f7f5f2;
    padding: 10px;
    /*            border: 1px #ededed solid;*/
    /*border: 2px #f7f5f2 solid;*/
}

.grid-container1 > div {
    background-color: #f7f5f2;
    text-align: center;
    padding: 10px 0;
    font-size: 30px;
}

footer {
    font-size: 0.875em;
    /* 0.75 */
    padding-left: 0px;
    line-height: 1.5;
    background: url(../bilder/woodpanel01.png) repeat center fixed;
    border-top: 2px solid #000;
}

.wleafs {
    position: absolute;
    top: 5px;
    right: 5px;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    /*font-size: 18px;*/
    font-size: 18px;
    border: none;
    outline: none;
    background-color: rgba(195, 195, 195, 0.34);
    color: gray;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    /* 4px; */
    transition: width 2s;
}

#myBtn:hover {
    background-color: rgba(85, 85, 85, 0.51);
    color: white;
}

.grid-container-card {
    display: grid;
    width: 380*0.0625em;
    height: 500*0.0625em;
    grid-template-rows: 110*0.0625em;
    grid-template-columns: 50% 50%;
    background-color: white;
    padding: 1px;
}

.grid-item-card {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* inside */
    padding-top: 5px;
    padding-right: 5px;
    font-size: 20px;
    text-align: center;
    text-align: end;
    width: 100%;
}

.grid_bottle {
    padding: 5px;
}

.center_sm {}


.item1-card {
    grid-column: 1 / span 4;
}


.item2-card {
    grid-row: 2 / 4;
}

.item3-card {
    grid-column: 2 / span 3;
}

.item4-card {
    grid-column: 2 / span 3;
}

.img_x {
    width: 100%;
    height: 100%;
}

/* used for Hiragana Table */
.set_br > div {
    white-space: pre-line;
}

.set_br > div::after {
    white-space: normal;
}

.og {
    color: orange;
}

/* ----------------------------- */
.slc {
    float: left;
    padding-right: 15px;
}

.cart {
    float: left;
}

.grid_bottle > img {
    filter: blur(2px);
}

.grid_bottle:hover > img {
    filter: blur(0px);
}

.imgb {
    width: 72%;
    padding: 5px 35px 0 0;
}

.def-rstars {
    background: white;
    padding: 5px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 25px;
}

.def-price-card {
    font-weight: bold;
    font-size: 50px;
    /* 50px; */
    color: black;
}

.f_r {
    float: right;
}

.cax-cart {
    background: #e3c072;
}

.cax-cart:hover {
    background: green;
}

table,
th,
td {
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-collapse: collapse;
    background: #d1d1d1;
}

table.gx {
    width: 100%;
    /* 1200px; 100% 650px; */
    /*            height: 100px;*/
    align-content: center;
    text-align: center;
}

table.gx tr td {
    width: 100px;
    height: 50px;
}

.gx-small {
    height: 10px !important;
    /* Force */
}

tr.gx-base-line td {
    height: 25px !important;
    /* Force */
}

.td-hv {
    text-decoration: none;
    color: #000;
}

.td-hv:hover {
    color: green;
}

/* Size 1 */
.imgb-logos-01 {
    width: auto;
    height: 50px;
    padding: 0 0;
}

.imgb-logos-02 {
    width: auto;
    height: 80px;
    padding: 0 0;
}

ul.ulx li {
    display: inline;
}

ol.olx li {
    display: inline;
    padding: 2px;
}

/* -- end general -------------------------- */
/* ------------------ Tablets -------------------------------------------------------- */
@media screen and (max-width: 1555px) {

    /* and (orientation: portrait) */

    body {
        min-width: 1090px;
    }

    .column {
        float: left;
        width: 33.33%;
        padding: 5px;
        background: #f7f5f2;
    }


    /* Clearfix (clear floats) */
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    .containerX {
        /*            max-width:  width: 100%;*/
        width: 100%;
        border-color: white;
        border-width: 1px;
        border-style: solid;
        margin: auto;
        background: white;
        overflow: hidden;

    }

    .hd_logo {
        background: white;
        padding: 5px;
        position: absolute;
        top: 1px;
        left: 10px;
        font-size: 25px;
    }     

    .hd-InVino01 {
        background: white;
        padding: 5px;
        position: absolute;
/*        top: 55px;*/
        top: 40px;
        left: 110px;
        font-size: 25px;
    }

    .headerblockX {
        /* background-color: var(--hgfarbe); */
        width: 0 auto;
        /*border: 1px solid #000;*/
        color: black;
        margin: 0 auto;
        /*    padding-bottom: 25px;*/
        padding-bottom: 0px;
       /* height: 133px;*/
        height: 90px;
        background: white;
        border-top: 1px solid black;
        /* box-shadow: 0px 1px 3px 1px #969494; */
        border-bottom: 1px solid black;
    }

    /* for mobile set width: 40% */
    .container {
        width: 100%;
        max-width: 1200px;
        margin: auto;
        background: #f7f5f2;
    }

    .item1x {
        grid-area: header;
    }

    .item2x {
        grid-area: main1;
    }

    .item3x {
        grid-area: main2;
    }

    .item4x {
        grid-area: main3;
    }

    .item5x {
        grid-area: main4;
    }

    .item6x {
        grid-area: main5;
    }

    .item7x {
        grid-area: main6;
    }

    .item8x {
        grid-area: main7;
    }

    .item9x {
        grid-area: footer;
    }

    .grid-container1 {
        display: grid;
        grid-template-areas:
            'header header header header header header'
            'main1 main1 main1 main1 main1 main1'
            'main2 main2 main2 main2 main2 main2'
            'main3 main3 main3 main3 main3 main3'
            'main4 main4 main4 main4 main4 main4'
            'main5 main5 main5 main5 main5 main5'
            'main6 main6 main6 main6 main6 main6'
            'main7 main7 main7 main7 main7 main7'
            'footer footer footer footer footer footer';
        gap: 2px;
        background-color: #f7f5f2;
        padding: 10px;
        /*            border: 1px #ededed solid;*/
        /*border: 2px #f7f5f2 solid;*/
    }

    .grid-container1 > div {
        background-color: #f7f5f2;
        text-align: center;
        padding: 10px 0;
        font-size: 30px;
    }

    footer {
        font-size: 0.875em;
        /* 0.75 */
        padding-left: 0px;
        line-height: 1.5;
        background: url(../bilder/woodpanel01.png) repeat center fixed;
        border-top: 2px solid #000;
    }

    #myBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        /*font-size: 18px;*/
        font-size: 18px;
        border: none;
        outline: none;
        background-color: rgba(195, 195, 195, 0.34);
        color: gray;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
        /* 4px; */
        transition: width 2s;
    }

    #myBtn:hover {
        background-color: rgba(85, 85, 85, 0.51);
        color: white;
    }

    .grid-container-card {
        display: grid;
        width: 360*0.0625em;
        height: 500*0.0625em;
        grid-template-rows: 110*0.0625em;
        grid-template-columns: 50% 50%;
        background-color: white;
        padding: 1px;
    }

    .grid-item-card {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.8);
        /* inside */
        padding-top: 5px;
        padding-right: 5px;
        font-size: 20px;
        text-align: center;
        text-align: end;
        width: 100%;
    }

    .grid_bottle {
        padding: 5px;
    }

    .center_sm {}


    .item1-card {
        grid-column: 1 / span 4;
    }


    .item2-card {
        grid-row: 2 / 4;
    }

    .item3-card {
        grid-column: 2 / span 3;
    }

    .item4-card {
        grid-column: 2 / span 3;
        min-height: 180px;
    }

    .img_x {
        width: 100%;
        height: 100%;
    }

    /* used for Hiragana Table */
    .set_br > div {
        white-space: pre-line;
    }

    .set_br > div::after {
        white-space: normal;
    }

    .og {
        color: orange;
    }

    /* ----------------------------- */
    .slc {
        float: left;
        padding-right: 15px;
    }

    .cart {
        float: left;
    }

    table.gx {
        width: 100%;
        /* 1200px; 100% 650px; */
        /*            height: 100px;*/
    }

    .grid_bottle > img {
        filter: blur(2px);
    }

    .grid_bottle:hover > img {
        filter: blur(0px);
    }

    .imgb {
        width: 100*0.06em;
        padding: 5px 35px 0 0;
    }

    .def-rstars {
        background: white;
        padding: 2px;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 25px;
    }

    .def-price-card {
        font-weight: bold;
        font-size: 40px;
        /* 50px; */
        color: black;
    }
}

/* 3.125em*/

/* -- end Tablet ------------------------- */

/* ------------------- Mobile -------------------------------------------------------- */

@media screen and (max-width: 720px)

/*and (orientation: portrait) */
    {

    body {
        min-width: 350px;
    }


    .hd_logo {
        background: white;
        padding: 5px;
        position: absolute;
        /* top: 20px; */
        top: 1px;
        left: 5px;
        font-size: 25px;
    }

    .hd-InVino01 {
        background: white;
        padding: 5px;
        position: absolute;
/*        top: 55px;*/
        top: 40px;
        left: 110px;
        font-size: 25px;
    }

    .containerX {
        width: 100%;
        border-color: white;
        border-width: 1px;
        border-style: solid;
        margin: auto;
        background: var(--hgfarbe);
        overflow: hidden;
    }

    .headerblockX {
        width: 0 auto;
        color: black;
        margin: 0 auto;
        padding-bottom: 0px;
        height: 133px;
        background: white;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }


    /* for mobile set width: 40% */

    .column {
        float: left;
        width: 100%;
        padding: 5px;
        background: #f7f5f2;
    }

    /* Clearfix (clear floats) */
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    .container {
        width: 100%;
        /* 100%; */
        /*        max-width: 1200px;*/
        margin: 0 auto;
        background: #f7f5f2;
    }

    .item1x {
        grid-area: header;
    }

    .item2x {
        grid-area: main1;
    }

    .item3x {
        grid-area: main2;
    }

    .item4x {
        grid-area: main3;
    }

    .item5x {
        grid-area: main4;
    }

    .item6x {
        grid-area: main5;
    }

    .item7x {
        grid-area: main6;
    }

    .item8x {
        grid-area: main7;
    }

    .item9x {
        grid-area: footer;
    }

    .grid-container1 {
        display: grid;
        grid-template-areas:
            'header header header header header header'
            'main1 main1 main1 main1 main1 main1'
            'main2 main2 main2 main2 main2 main2'
            'main3 main3 main3 main3 main3 main3'
            'main4 main4 main4 main4 main4 main4'
            'main5 main5 main5 main5 main5 main5'
            'main6 main6 main6 main6 main6 main6'
            'main7 main7 main7 main7 main7 main7'
            'footer footer footer footer footer footer';
        gap: 2px;
        background-color: #f7f5f2;
        padding: 10px;
    }

    .grid-container1 > div {
        background-color: #f7f5f2;
        text-align: center;
        padding: 10px 0;
        font-size: 30px;
    }

    footer {
        font-size: 0.875em;
        /* 0.75 */
        padding-left: 0px;
        line-height: 1.5;
        background: url(../bilder/woodpanel01.png) repeat center fixed;
        border-top: 2px solid #000;
    }

    #myBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: rgba(195, 195, 195, 0.34);
        color: gray;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
        transition: width 2s;
    }

    #myBtn:hover {
        background-color: rgba(85, 85, 85, 0.51);
        color: white;
    }

    .grid-container-card {
        display: grid;
        width: 380*0.0625em;
        height: 500*0.0625em;
        grid-template-rows: 110*0.0625em;
        grid-template-columns: 50% 50%;
        background-color: white;
        padding: 1px;
        /* border, frame */
    }

    .grid-item-card {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.8);
        /* inside */
        padding-top: 5px;
        padding-right: 5px;
        font-size: 10px;
        text-align: center;
    }

    .grid_bottle {
        padding: 5px;
    }

    .center_sm {}


    .item1-card {
        grid-column: 1 / span 4;
    }


    .item2-card {
        grid-row: 2 / 4;
    }

    .item3-card {
        grid-column: 2 / span 3;
    }

    .item4-card {
        grid-column: 2 / span 3;
    }

    .img_x {
        width: 100%;
        height: 100%;
    }

    /* used for Hiragana Table */
    .set_br > div {
        white-space: pre-line;
    }

    .set_br > div::after {
        white-space: normal;
    }

    .og {
        color: orange;
    }

    /* ----------------------------- */
    .slc {
        float: left;
        padding-right: 15px;
    }

    .cart {
        float: left;
    }

    .grid_bottle > img {
        filter: blur(2px);
    }

    .grid_bottle:hover > img {
        filter: blur(0px);
    }

    .imgb {
        width: 60%;
        padding: 5px 35px 0 0;
    }

    /* ---------------------------- */

}

/* -- end mobile -----------------------------------*/