/* ----------- TStar-Schrift-Einbindung ----------- */
/* first for IE 4–8 */
@font-face {
    font-family: TSTARLight;
    src: url("TSTAR-LightWeb.eot");
}

@font-face {
    font-family: TSTARBold;
    src: url("TSTAR-BoldWeb.eot");
}

@font-face {
    font-family: TSTARRegular;
    src: url("TSTAR-RegularWeb.eot");
}

/* then for WOFF-capable browsers */
@font-face {
    font-family: TSTARLight;
    src: url("TSTAR-LightWeb.woff") format("woff");
}

@font-face {
    font-family: TSTARRegular;
    src: url("TSTAR-RegularWeb.woff") format("woff");
}

@font-face {
    font-family: TSTARBold;
    src: url("TSTAR-BoldWeb.woff") format("woff");
}


* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top;
    font-family: TSTARLight;
    font-size: 1em;
    line-height: 1.5em;
    color: rgba(0, 0, 0, 1.0);
    letter-spacing: 0.015em;
    scroll-behavior: smooth;
}


body {
    scroll-behavior: smooth;
}

::selection {
    color: rgba(255, 255, 255, 1.0);
    background: rgba(0, 0, 0, 1.0);
}

/* ----------- HEADER ----------- */

header {
    width: calc(100% - 160px);
    padding: 80px;
    display: flex;
    justify-content: space-between;
    top: 0;
}

@media only screen and (max-width: 1024px) {
    header {
        width: calc(100% - 120px);
        padding: 60px;
    }
}

@media only screen and (max-width: 720px) {
    header {
        width: calc(100% - 80px);
        padding: 40px;
    }
}

.logo {
    height: 35px;
}

.logo img {
    height: 35px;
}

@media only screen and (max-width: 720px) {
    .logo {
        height: 30px;
    }

    .logo img {
        height: 30px;
    }
}

/* ----------- Slider with Picture or Video ---------------------------------------------------------------------------- */


#video_background {
    object-fit: cover;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1000;
}

.slider {
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.slidertext {
    padding: 0 80px;
    height: calc(100vh - 195px);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 3em;
    font-family: TSTARRegular;
    /*text-shadow: 0px 0px 15px rgb(255, 255, 255);*/
}

@media only screen and (max-width: 1024px) {
    .slidertext {
        height: calc(100vh - 155px);
        padding: 0 60px;
        font-size: 2em;
    }
}

@media only screen and (max-width: 480px) {
    .slidertext {
        height: calc(100vh - 115px);
        padding: 0 40px;
        font-size: 1.5em;
    }
}

.sliderlink {
    margin: 40px 0 0 0;
    transform: rotate(90deg);
}

.sliderlink a {
    padding: 7px 15px 7px 20px;
    text-decoration: none;
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(0, 0, 0, 1.0);
}

@media only screen and (max-width: 850px) {
    .sliderlink a {
        padding: 7px 12px 7px 17px;
    }
}

.sliderlink a:hover {
    transition: 0.75s;
    color: rgba(0, 0, 0, 1.0);
    background-color: rgba(255, 255, 255, 1.0);
}


/* ----------- Slider About ---------------------------------------------------------------------------- */


.sliderabout {
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.sliderabout video {
    object-fit: cover;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -500;
}

.sliderabouttext {
    padding: 0 80px;
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 3em;
    font-family: TSTARRegular;
    /*text-shadow: 0px 0px 15px rgb(255, 255, 255);*/
    z-index: 1;
}

@media only screen and (max-width: 1024px) {
    .sliderabouttext {
        padding: 0 60px;
        font-size: 2em;
    }
}

@media only screen and (max-width: 480px) {
    .sliderabouttext {
        padding: 0 40px;
        font-size: 1.5em;
    }
}

.slideraboutlink {
    margin: 40px 0 0 0;
    transform: rotate(90deg);
}

.slideraboutlink a {
    padding: 7px 15px 7px 20px;
    text-decoration: none;
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(0, 0, 0, 1.0);
}

@media only screen and (max-width: 850px) {
    .slideraboutlink a {
        padding: 7px 12px 7px 17px;
    }
}

.slideraboutlink a:hover {
    transition: 0.75s;
    color: rgba(0, 0, 0, 1.0);
    background-color: rgba(255, 255, 255, 1.0);
}


/* ----------- HORIZONTAL NAVIGATION ---------------------------------------------------------------------------- */

@media only screen and (max-width: 740px) {
    nav {
        display: none;
        visibility: hidden;
    }
}

nav {
    padding: 8px 0 0 0;
    text-transform: uppercase;
}

nav a {
    padding: 7px 7px 3px 7px;
    text-decoration: none;
    color: rgba(0, 0, 0, 1.0);
    cursor: pointer;
}

nav a:hover {
    transition: 0.75s;
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(0, 0, 0, 1.0);
}

nav a.aktiv {
    padding: 7px 7px 3px 7px;
    text-decoration: none;
    transition: 0.75s;
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(0, 0, 0, 1.0);
}

nav a.aktive:hover {
    padding: 7px 7px 3px 7px;
    text-decoration: none;
    transition: 0.75s;
    color: rgba(255, 255, 255, 1.0);
    background-color: rgba(0, 0, 0, 1.0);
}

/* ----------- DROPDOWN NAVIGATION ---------------------------------------------------------------------------- */

/* cursor: pointer; wurde für den Aufruf beim a-Tag beim nav-Element hinzugefügt*/

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
}

.dropdown-content a {
    width: 260px;
    margin: 1px 0 0 0;
    background-color: #000;
    text-transform: none;
    color: #FFF;
    padding: 4px 7px 2px 7px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: #000;
}

.dropdown:hover .dropdown-content {
    display: block;
}


/* ----------- HAMBURGER NAVIGATION ---------------------------------------------------------------------------- */

@media only screen and (min-width: 740px) {
    .hamburger {
        display: none;
        visibility: hidden;
    }
}

.hamburger {
    padding: 3px 0 0 0;
    font-size: 25px;
}

/* The side navigation menu */
.sidenav {
    height: 100vh;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 1001;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    right: 0;
    background-color: rgba(0, 0, 0, 1.0);
    /* Black*/
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 40px;
    /* Place content 60px from the top */
    transition: 0.3s;
    /* 0.5 second transition effect to slide in the sidenav */
    opacity: 1.0;
}

/* The navigation menu links */
.sidenav a {
    padding: 0 40px 0 40px;
    text-decoration: none;
    font-size: 1.25em;
    color: rgba(255, 255, 255, 1.0);
    display: block;
    transition: 0.3s;
    font-family: TSTARBold;
    text-transform: uppercase;
}

.sub a {
    padding: 0px 40px 3px 40px;
    text-decoration: none;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 1.0);
    display: block;
    transition: 0.3s;
    font-family: TSTARLight;
    text-transform: none;
}

.sidenav hr {
    margin: 6px 40px 10px 40px;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid;
    border-color: rgba(255, 255, 255, 0.75);

}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: rgba(255, 255, 255, 1.0);
    opacity: 0.5;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0px;
    font-size: 55px;
    margin: 11px 0 0 0;
    font-family: TSTARRegular;
    right: -6px;
}

/* ----------- MAIN ---------------------------------------------------------------------------- */
main {
    width: 100%;
}

section {
    width: 100%;
    display: flex;
    justify-content: start;
    flex-direction: row;
    flex-wrap: wrap;
}

/* ----------- PRODUCTOVERVIEW ---------------------------------------------------------------------------- */
.productoverview {
    width: 33.333%;
    height: 33.333vw;
    font-size: 1.25em;
    background-position: center;
    background-size: cover;
}

@media only screen and (max-width: 1224px) {
    .productoverview {
        width: 50%;
        height: 50vw;
    }
}

@media only screen and (max-width: 720px) {
    .productoverview {
        font-size: 1em;
    }
}

@media only screen and (max-width: 480px) {
    .productoverview {
        width: 100%;
        height: 100%;
        font-size: 1.25em;
    }
}

.productoverview img {
    width: 100%;
}

.productoverview a {
    display: block;
    padding: 80px;
    width: calc(100% - 160px);
    height: calc(33.333vw - 160px);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.0);
    color: rgba(0, 0, 0, 1.0);
}

@media only screen and (max-width: 1224px) {
    .productoverview a {
        padding: 60px;
        width: calc(100% - 120px);
        height: calc(50vw - 120px);
    }
}

@media only screen and (max-width: 720px) {
    .productoverview a {
        padding: 40px;
        width: calc(100% - 80px);
        height: calc(50vw - 80px);
    }
}


@media only screen and (max-width: 480px) {
    .productoverview a {
        padding: 40px;
        width: calc(100% - 80px);
        height: calc(100vw - 80px);
    }
}

.productoverview a:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.75s;
    color: rgba(255, 255, 255, 1.0);
}

.productoverview a b {
    font-family: TSTARBold;
    color: rgba(0, 0, 0, 1.0);
}

.productoverview a:hover b {
    font-family: TSTARBold;
    transition: 0.75s;
    color: rgba(255, 255, 255, 1.0);
}

/* ----------- Möglichkeit zur Abhebung vom Text zum Bild 
.productoverview a mark {
    background-color: rgba(255, 255, 255, 1.0);
    padding: 3px 0 0 0;
}

.productoverview a:hover mark {
    background-color: rgba(0, 0, 0, 1.0);
    color: rgba(255, 255, 255, 1.0);
    transition: 0.75s;
}
----------- */

/* ----------- ARTICLE ---------------------------------------------------------------------------- */

.onethird {
    width: 33.333%;
    text-decoration: none;
    color: rgba(0, 0, 0, 1.0);
    background-position: center;
    background-size: cover;
}

@media only screen and (max-width: 1524px) {
    .onethird {
        width: 50%;
    }
}

@media only screen and (max-width: 820px) {
    .onethird {
        width: 100%;
    }
}

.onethird img {
    width: 100%;
}

.twothird {
    width: 66.666%;
    text-decoration: none;
    color: rgba(0, 0, 0, 1.0);
}

@media only screen and (max-width: 1524px) {
    .twothird {
        width: 50%;
    }
}

@media only screen and (max-width: 820px) {
    .twothird {
        width: 100%;
    }
}

.twothird img {
    width: 100%;
}

.twothird iframe {
    width: 100%;
    height: 100%;
}

.onehalf {
    width: 50%;
    text-decoration: none;
    color: rgba(0, 0, 0, 1.0);
    background-position: center;
    background-size: cover;
}

@media only screen and (max-width: 820px) {
    .onehalf {
        width: 100%;
    }
}

.onehalf img {
    width: 100%;
}



.onequater {
    width: 25%;
    text-decoration: none;
    color: rgba(0, 0, 0, 1.0);
    background-position: center;
    background-size: cover;
}

@media only screen and (max-width: 1024px) {
    .onequater {
        width: 50%;
    }
}

@media only screen and (max-width: 820px) {
    .onequater {
        width: 100%;
    }
}

.onequater img {
    width: 100%;
}

.threequater {
    width: 75%;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 1.0);
    color: rgba(0, 0, 0, 1.0);
    background-position: center;
    background-size: cover;
}

@media only screen and (max-width: 1024px) {
    .threequater {
        width: 50%;
    }
}

@media only screen and (max-width: 820px) {
    .threequater {
        width: 100%;
    }
}

.threequater img {
    width: 100%;
}


/* ----------- Paragraph Elements ---------------------------------------------------------------------------- */


p {
    padding: 20px 80px 0 80px;
}

@media only screen and (max-width: 1024px) {
    p {
        padding: 20px 60px 0 60px;
    }
}

@media only screen and (max-width: 720px) {
    p {
        padding: 20px 40px 0 40px;
    }
}


p:last-child {
    padding: 20px 80px 80px 80px;
}

@media only screen and (max-width: 1024px) {
    p:last-child {
        padding: 20px 60px 60px 60px;
    }
}

@media only screen and (max-width: 720px) {
    p:last-child {
        padding: 20px 40px 40px 40px;
    }
}



h1 {}

@media only screen and (max-width: 850px) {
    h1 {}
}

h2 {
    padding: 80px 80px 0 80px;
    font-size: 2em;
    font-family: TSTARBold;
    line-height: 1.25em;
}

@media only screen and (max-width: 1024px) {
    h2 {
        padding: 60px 60px 0 60px;
    }
}

@media only screen and (max-width: 720px) {
    h2 {
        padding: 40px 40px 0 40px;
    }
}


h3 {
    padding: 20px 80px 80px 80px;
    font-size: 1.5em;
    font-family: TSTARLight;
    line-height: 1.25em;
}

@media only screen and (max-width: 1024px) {
    h3 {
        padding: 20px 60px 60px 60px;
    }
}

@media only screen and (max-width: 720px) {
    h3 {
        padding: 20px 40px 40px 40px;
    }
}


mark {
    background-color: #000000;
    color: #ffffff;
    padding: 5px 5px 2px 5px;
}




.shop {
    font-family: TSTARLight;
}

.shop b {
    font-family: TSTARbold;
    line-height: 1.25em;
}


@media only screen and (max-width: 1024px) {
    h2 {
        padding: 60px 60px 0 60px;
    }
}

@media only screen and (max-width: 720px) {
    h2 {
        padding: 40px 40px 0 40px;
    }
}



a {
    text-decoration: unterline;
    color: rgba(0, 0, 0, 1.0);
}

a:hover {
    transition: 0.5s;
    color: rgba(0, 0, 0, 0.5);
}

b {
    font-family: TSTARBold;
    color: rgba(0, 0, 0, 1.0);
}

/* ----------- Media ---------------------------------------------------------------------------- */

.onehalfnegativ {
    width: 50%;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 1.0);
    color: rgba(255, 255, 255, 1.0);
    background-size: cover;
}

@media only screen and (max-width: 1020px) {
    .onehalfnegativ {
        width: 100%;
    }
}

.onehalfnegativ h2 {
    color: rgba(255, 255, 255, 1.0);
}

.onehalfnegativ p {
    color: rgba(255, 255, 255, 1.0);
}

.onehalfnegativ b {
    color: rgba(255, 255, 255, 1.0);
}

.onehalfnegativ a {
    color: rgba(255, 255, 255, 1.0);
    text-decoration: underline;
}

.onehalfnegativ a:hover {
    transition: 0.5s;
    color: rgba(255, 255, 255, 0.5);
}


/* ----------- News ---------------------------------------------------------------------------- */

.news {
    display: block;
    width: 25%;
    text-decoration: none;
    color: rgba(255, 255, 255, 1.0);
    background-size: cover;
    background-position: center top;
    background-blend-mode: none;
}

.news:hover {
    margin: -40px 0 0 0;
    padding: 0 0 40px 0;
    background-blend-mode: screen;
    background-color: rgba(255, 255, 255, 1.0);
    transition: 0.5s ease-out;
}

@media only screen and (max-width: 1400px) {
    .news {
        width: 33.333%;
    }
}

@media only screen and (max-width: 1024px) {
    .news {
        width: 50%;
    }
}


@media only screen and (max-width: 720px) {
    .news {
        width: 100%;
    }
}

@media only screen and (max-width: 720px) {
    .news:hover {
        margin: 0;
        padding: 0;
    }
}

.news img {
    width: 100%;
    filter: grayscale(1);
    opacity: 1;
}

.news h2 {
    color: rgba(255, 255, 255, 1.0);
}

.news p {
    color: rgba(255, 255, 255, 1.0);
}

.news b {
    color: rgba(255, 255, 255, 1.0);
}

.news small {
    display: block;
    padding: 20px 80px 0 80px;
    font-size: 0.75em;
    color: rgba(255, 255, 255, 1.0);
}

@media only screen and (max-width: 1024px) {
    .news small {
        padding: 20px 60px 0 60px;
    }
}

@media only screen and (max-width: 720px) {
    .news small {
        padding: 20px 40px 0 40px;
    }
}

.news a {
    color: rgba(255, 255, 255, 1.0);
    text-decoration: none;
}

.news a:hover img {
    width: 100%;
    filter: none;
    opacity: 1.0;
}

.news a:hover {
    transition: 0.5s;
    color: rgba(0, 0, 0, 1.0);
}

.news a:hover h2 {
    transition: 0.5s;
    color: rgba(0, 0, 0, 1.0);
}

.news a:hover p {
    transition: 0.5s;
    color: rgba(0, 0, 0, 1.0);
}

.news a:hover small {
    transition: 0.5s;
    color: rgba(0, 0, 0, 1.0);
}

.news a:hover b {
    transition: 0.5s;
    color: rgba(0, 0, 0, 1.0);
}


/* ----------- Quote ---------------------------------------------------------------------------- */

.quote {
    width: calc(100% - 160px);
    padding: 80px 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: rgba(255, 255, 255, 1.0);
    font-size: 2em;
    font-family: TSTARLight;
    /* text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); */
    background-color: rgba(0, 0, 0, 1.0);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.quote h1 {
    color: rgba(255, 255, 255, 1.0);
}

.quote b {
    color: rgba(255, 255, 255, 1.0);
    font-size: 2em;
}

@media only screen and (max-width: 720px) {
    .quote {
        width: calc(100% - 80px);
        padding: 40px 40px;
        font-size: 1.5em;
    }

    .quote b {
        font-size: 1.75em;
    }
}

/* ----------- FOOTER ----------------------------------------------------------------------------- */

footer {
    width: 100%;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 1.0);
    padding: 80px 0 80px 0;
    font-size: 0.8em;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

@media only screen and (max-width: 920px) {
    footer {
        width: calc(100% - 120px);
        flex-direction: column;
        padding: 0 60px 0 60px;
    }
}

@media only screen and (max-width: 720px) {
    footer {
        width: calc(100% - 80px);
        flex-direction: column;
        padding: 0 40px 0 40px;
    }
}

.linevertical {
    background-color: rgba(255, 255, 255, 1);
    width: 1px;
}

@media only screen and (max-width: 720px) {
    .linevertical {
        display: none;
    }
}

.linehorizontal {
    display: none;
}

@media only screen and (max-width: 920px) {
    .linehorizontal {
        background-color: rgba(255, 255, 255, 1);
        height: 1px;
        width: 100%;
        padding: 0;
        visibility: visible;
        display: block;
    }
}

footer article {
    color: rgba(255, 255, 255, 1);
    width: calc(33.333% - 161px);
    padding: 0 80px 0 80px;
}


@media only screen and (max-width: 1024px) {
    footer article {
        width: calc(33.333% - 121px);
        padding: 0 60px 0 60px;
    }
}

@media only screen and (max-width: 920px) {
    footer article {
        width: 100%;
        padding: 60px 0 60px 0;
    }
}

@media only screen and (max-width: 720px) {
    footer article {
        width: 100%;
        padding: 40px 0 40px 0;
    }
}

footer a {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}

footer a:hover {
    color: rgba(255, 255, 255, 0.5);
    transition: 1s;
}

footer b {
    color: rgba(255, 255, 255, 1);
}

footer article {
    color: rgba(255, 255, 255, 1);
}

footer ul {}

footer li {
    line-height: 2em;
    list-style: none;
    color: #fff;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    display: block;
    margin: 5px 0 0 0;
    padding: 3px 0 5px 35px;

}

footer li a {
    color: #fff;
}

footer li a:hover {
    color: #fff;
    opacity: 0.75;
    transition: 0.5s;
}

/* ----------- TOP ARROW ---------------------------------------------------------------------------- */

#myBtn {
    transform: rotate(-90deg);
    display: none;
    position: fixed;
    bottom: 80px;
    right: 80px;
    z-index: 1001;
    font-size: 2em;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 1.0);
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    padding: 5px 20px 5px 20px;
}

@media only screen and (max-width: 1024px) {
    #myBtn {
        bottom: 60px;
        right: 60px;
    }
}

@media only screen and (max-width: 720px) {
    #myBtn {
        bottom: 40px;
        right: 40px;
    }
}

#myBtn:hover {
    background-color: rgba(255, 255, 255, 1.0);
    color: rgba(0, 0, 0, 1.0);
    transition: 0.5s;
}


/* ----------- Order ---------------------------------------------------------------------------- */

#order {
    display: block;
    position: fixed;
    bottom: 80px;
    left: 80px;
    z-index: 1002;
    font-size: 1.5em;
    border: none;
    outline: none;
    background-color: rgb(00, 00, 00);
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
    padding: 11px 15px 9px 15px;
}

@media only screen and (max-width: 1024px) {
    #order {
        bottom: 60px;
        left: 60px;
    }
}

@media only screen and (max-width: 720px) {
    #order {
        bottom: 40px;
        left: 40px;
    }
}

#order:hover {
    background-color: #007c44;
    color: rgba(255, 255, 255, 1);
    transition: 0.5s;
}



/* ----------- Products ---------------------------------------------------------------------------- */


.products {
    width: calc(100% - 160px);
    margin: 0;
    padding: 80px 80px 0px 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


@media only screen and (max-width: 1024px) {
    .products {
        width: calc(100% - 120px);
        padding: 60px 60px 0px 60px;
    }

}

@media only screen and (max-width: 720px) {
    .products {
        width: calc(100% - 80px);
        padding: 40px 40px 0 40px;
        flex-direction: column;
    }
}

.products:last-child {
    padding: 80px 80px 80px 80px;
}

@media only screen and (max-width: 1024px) {
    .products:last-child {
        padding: 60px 60px 60px 60px;
    }

}

@media only screen and (max-width: 720px) {
    .products:last-child {
        padding: 40px 40px 40px 40px;
    }
}




.products h2 {
    margin: 0 0 20px 0;
    padding: 0;
    font-family: TSTARBold;
    line-height: 1.25em;
}

.products h3 {
    margin: 0 0 20px 0;
    padding: 0;
    font-family: TSTARLight;
    line-height: 1.5em;
    font-size: 1.5em;
}

.products p {
    margin: 0 0 20px 0;
    padding: 0;
}

.products p:last-child {
    margin: 0 0 0 0;
    padding: 0;
}



.products b {
    font-family: TSTARBold;
    line-height: 1.5em;
}

.products h2.lead {
    margin: 0;
    padding: 0;
    font-family: TSTARLight;
    line-height: 1.5em;
}


.products hr {
    margin: 40px 0 40px 0;
    width: 100%;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid;
}

.products .spez {
    margin: 20px 0 20px 0;
    width: 100%;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid;
}




.products img {
    width: 100%;
}


@media only screen and (max-width: 1024px) {
    .products {
        width: calc(100% - 120px);
        padding: 60px 60px 60px 60px;
    }

}

@media only screen and (max-width: 720px) {
    .products {
        width: calc(100% - 80px);
        padding: 40px 40px 0 40px;
        flex-direction: column;
    }
}





.products_onethird {
    width: calc(1/3*100% - (1 - 1/3)*80px);
}

.products_twothird {
    width: calc(2/3*100% - (1 - 2/3)*80px);
}

@media only screen and (max-width: 1024px) {
    .products_onethird {
        width: calc(1/3*100% - (1 - 1/3)*60px);
    }

    .products_twothird {
        width: calc(2/3*100% - (1 - 2/3)*60px);
    }

}

@media only screen and (max-width: 720px) {
    .products_onethird {
        width: 100%;
        margin: 0 0 40px 0;
    }

    .products_twothird {
        width: 100%;
        margin: 0 0 40px 0;
    }

}


.products_onequater {
    width: calc(1/4*100% - (1 - 1/4)*80px);
}

.products_threequater {
    width: calc(3/4*100% - (1 - 3/4)*80px);
}

@media only screen and (max-width: 1224px) {
    .products_onequater {
        width: calc(1/3*100% - (1 - 1/3)*80px);
    }

    .products_threequater {
        width: calc(2/3*100% - (1 - 2/3)*80px);
    }

}

@media only screen and (max-width: 1024px) {
    .products_onequater {
        width: calc(1/3*100% - (1 - 1/3)*60px);
    }

    .products_threequater {
        width: calc(2/3*100% - (1 - 2/3)*60px);
    }

}

@media only screen and (max-width: 720px) {
    .products_onequater {
        width: 100%;
        margin: 0 0 40px 0;
    }

    .products_threequater {
        width: 100%;
        margin: 0 0 40px 0;
    }

}


.products_onehalf {
    width: calc(1/2*100% - (1 - 1/2)*80px);
}

@media only screen and (max-width: 1024px) {
    .products_onehalf {
        width: calc(1/2*100% - (1 - 1/2)*60px);
    }

}

@media only screen and (max-width: 720px) {
    .products_onehalf {
        width: 100%;
        margin: 0 0 40px 0;
    }

}


.products_one {
    width: 100%;
}


.products_one hr {
    margin: 0;
}






/* ----------- Shop ---------------------------------------------------------------------------- */


.shop {
    width: calc(100% - 160px);
    margin: 0;
    padding: 0 80px 0 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.shop:first-child {
    margin: 80px 0 0 0;
}

.shop:last-child {
    margin: 0 0 80px 0;
}

@media only screen and (max-width: 1024px) {
    .shop {
        width: calc(100% - 120px);
        padding: 0 60px 0 60px;
    }

    .shop:first-child {
        margin: 60px 0 0 0;
    }

    .shop:last-child {
        margin: 0 0 60px 0;
    }
}

@media only screen and (max-width: 720px) {
    .shop {
        width: calc(100% - 80px);
        padding: 0 40px 0 40px;
        flex-direction: column;
    }

    .shop:first-child {
        margin: 40px 0 0 0;
    }

    .shop:last-child {
        margin: 0 0 40px 0;
    }
}


.shop hr {
    width: 100%;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid;
}


.hrspez {
    margin: 0;
    visibility: hidden;
    width: 100%;
    display: block;
    height: 0px;
    border: 0;
    border-top: 0px solid;
}

@media only screen and (max-width: 720px) {
    .hrspez {
        margin: 40px 0 0 0;
        visibility: visible;
        height: 1px;
        border: 0;
        border-top: 1px solid;
    }
}


.shop h2 {
    line-height: 1.5em;
    width: 100%;
    display: block;
    margin: 0 0 40px 0;
    padding: 0;
}

.shop p {
    line-height: 1.5em;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}

.shop b {
    line-height: 1.5em;
}

.shop p:last-child {
    margin: 0 0 40px 0;
}


.shop_one {
    width: calc(1/5*100% - (1 - 1/5)*40px);
    text-align: right;
}

.shop_one img {
    width: 100%;
    margin: 40px 0;
}

.shop_one input {
    margin: 40px 0;
    display: block;
    width: calc(100% - 40px);
    background-color: #000;
    color: #FFF;
    padding: 12px 20px 9px 20px;
    font-family: TSTARLight;
    border-radius: 0;
}

@media only screen and (max-width: 720px) {
    .shop_one {
        width: 100%;
    }

    .shop_one img {
        width: 100%;
        margin: 40px 0 0 0;
    }

    .shop_one input {
        margin: 0 0 40px 0;
    }
}



.shop_three {
    width: calc(3/5*100% - (1 - 3/5)*40px);
}

@media only screen and (max-width: 720px) {
    .shop_three {
        width: 100%;
    }
}

.shop_three h2 {
    width: 100%;
    display: block;
    margin: 40px 0 20px 0;
    padding: 0;
    font-family: TSTARLight;
}

.shop_three p {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}

.shop_three p:last-child {
    margin: 0 0 40px 0;
}

.shop_two {
    width: calc(1/2*100% - (1 - 1/2)*40px);
}

.shop_two h2 {
    width: 100%;
    display: block;
    margin: 40px 0 20px 0;
    padding: 0;
    font-family: TSTARBold;
}

.shop_two p {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0;
    display: block;
}

.shop_two p:last-child {
    margin: 0 0 40px 0;
}

.shop_two input {
    margin: 40px 0;
    display: block;
    width: calc(100% - 40px);
    background-color: #000;
    color: #FFF;
    padding: 12px 20px 9px 20px;
    font-family: TSTARLight;
    border-radius: 0;
}


@media only screen and (max-width: 720px) {
    .shop_two {
        width: 100%;
    }

    .shop_two input {
        margin: 0 0 40px 0;
    }
}

input.checkbox {
    display: inline;
    height: 16px;
    width: 16px;
    margin: 2px 5px 0 0;
}

.shopbutton {
    margin: 40px 0 0 0;
    width: calc(50% - 20px);
    display: block;
    color: #FFF;
    font-size: 1em;
    background-color: #007c44;
    text-align: center;
    font-family: TSTARBold;
    padding: 12px 20px 9px 20px;
    text-align: center;
    border-radius: 0;
}

.shopbutton:hover {
    background-color: #000000;
    transition: 0.5s;
}


@media only screen and (max-width: 720px) {
    .shopbutton {
        width: 100%;
    }
}


.total {
    width: calc(100% - 160px);
    margin: 0;
    padding: 0 80px 0 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.total:first-child {
    margin: 80px 0 0 0;
}

.total:last-child {
    margin: 0 0 80px 0;
}

@media only screen and (max-width: 1024px) {
    .total {
        width: calc(100% - 120px);
        padding: 0 60px 0 60px;
    }

    .total:first-child {
        margin: 60px 0 0 0;
    }

    .total:last-child {
        margin: 0 0 60px 0;
    }
}

@media only screen and (max-width: 720px) {
    .total {
        width: calc(100% - 80px);
        padding: 0 40px 0 40px;
    }

    .total:first-child {
        margin: 40px 0 0 0;
    }

    .total:last-child {
        margin: 0 0 40px 0;
    }
}


.shop_total {
    margin: 20px 0 10px 0;
    width: calc(1/2*100% - (1 - 1/2)*40px);
}

.shop_total h3 {
    width: 100%;
    display: block;
    margin: 0 0 0 0;
    padding: 0;
    font-family: TSTARBold;
}

/* ----------- Form Newsletter ---------------------------------------------------------------------------- */

.mc-field-group {
    width: calc(100% - 160px);
    padding: 0 80px;
}


@media only screen and (max-width: 1024px) {
    .mc-field-group {
        width: calc(100% - 120px);
        padding: 0 60px 0 60px;
    }
}

@media only screen and (max-width: 720px) {
    .mc-field-group {
        width: calc(100% - 80px);
        padding: 0 40px 0 40px;
    }
}

.mc-field-group input {
    display: block;
    padding: 10px;
    width: calc(100% - 20px);
    background-color: #000;
    color: #fff;
    font-size: 1em;
    font-family: TSTARBold;
}

.mc-field-group label {
    margin: 20px 0 10px 0;
    display: block;
    color: #000;
    font-size: 1em;
    font-family: TSTARBold;
}

.response {
    display: block;
    color: #000;
    width: calc(100% - 160px);
    padding: 20px 80px 0 80px;
    font-size: 1.5em;
    font-family: TSTARBold;
}

@media only screen and (max-width: 1024px) {
    .response {
        width: calc(100% - 120px);
        padding: 20px 60px 0 60px;
    }
}

@media only screen and (max-width: 720px) {
    .response {
        width: calc(100% - 80px);
        padding: 20px 40px 0 40px;
    }
}

.button {
    width: calc(100% - 160px);
    display: block;
    color: #FFF;
    font-size: 1em;
    background-color: #007c44;
    text-align: center;
    font-family: TSTARBold;
    padding: 12px 0 9px 0;
    margin: 60px 80px 80px 80px;
    border-radius: 0;
}

.button:hover {
    background-color: #e81010;
    transition: 0.5s;
}

@media only screen and (max-width: 1024px) {
    .button {
        width: calc(100% - 120px);
        margin: 60px 60px 80px 60px;
    }
}

@media only screen and (max-width: 720px) {
    .button {
        width: calc(100% - 80px);
        margin: 60px 40px 80px 40px;
    }
}

/* ----------- Fade in ---------------------------------------------------------------------------- */

.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-in-out, transform 1.0s ease-in-out;
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}