@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Bold.woff2') format('woff2'),
        url('../fonts/Caveat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-SemiBold.woff2') format('woff2'),
        url('../fonts/Caveat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Medium.woff2') format('woff2'),
        url('../fonts/Caveat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Regular.woff2') format('woff2'),
        url('../fonts/Caveat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
        url('../fonts/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-LightItalic.woff2') format('woff2'),
        url('../fonts/OpenSans-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.woff2') format('woff2'),
        url('../fonts/OpenSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Light.woff2') format('woff2'),
        url('../fonts/OpenSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-ExtraBold.woff2') format('woff2'),
        url('../fonts/OpenSans-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/OpenSans-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-BoldItalic.woff2') format('woff2'),
        url('../fonts/OpenSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
        url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-MediumItalic.woff2') format('woff2'),
        url('../fonts/OpenSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/OpenSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Medium.woff2') format('woff2'),
        url('../fonts/OpenSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
        url('../fonts/OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html, body {
    width: 100%;
    overflow-x: hidden !important;
}

a {
    text-decoration: none;
}

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    background: #fefefc;
    color: #333;
}

#topbar {
    font-size: 150%;
    font-weight: 300;
}

#topbar svg {
    position: relative;
    top: -2px;
    left: -5px;
    width: 24px;
    height: 24px;
}

#header {
    min-height: 105vh;
    background: #fff url(../img/header.jpg) no-repeat;
    background-position: bottom center;
    background-size: cover;   
}

#header.sub {
    min-height: 500px;
    background: #fff url(../img/header.jpg) no-repeat;
    background-position: bottom center;
    background-size: cover;   
}

#header a {
    color: #fff;
    text-decoration: none;
}

#header .btn {
    color: #333;
}

#header .logo {
    max-width: 768px;
    width: 100%;
    height: auto;
}

#header .slogan {
    font-size: 300%;
    letter-spacing: -2px;
    font-family: 'Caveat', Arial, Helvetica, sans-serif;
    line-height: 1.15em;
    display: block;
    color: #fff;

}

@media ( min-width:1280px ) {

    #header {
        background-position: top center;
        background-size: 100%;
    } 

}

#slogan span {
    font-size: 300%;
    letter-spacing: -2px;
    font-family: 'Caveat', Arial, Helvetica, sans-serif;
    line-height: 1.15em;
}

#slogan a,
#content a {
    text-decoration: none;
    border-bottom: solid #acc00a 3px;
    font-weight: bold;
    color: #333;
}

a img.icon {
    position: relative;
    top: -5px;
    width: 50px;
    background: #fff;
}

a.link {
    text-decoration: none;
    border-bottom: solid #acc00a 3px;
    font-weight: bold;
    color: #333;
}

.back-to-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    color: #333;
    transition: all .2s;
}

.back-to-top:hover {
    position: fixed;
    right: 15px;
    bottom: 15px;
    color: #acc00a;
    transition: all .2s;
}

h1, h2, h3, h4 {
    letter-spacing: -1px;
    font-family: 'Caveat', Arial, Helvetica, sans-serif;
    font-weight: 700;
}

h2 {
    font-size: 300%;
}

h4 {
    font-size: 200%;
    font-weight: 300;
}

.product {
    margin: 5em -15px 5em -15px;
}

.product a {
    text-decoration: none;
    border-bottom: solid #acc00a 3px;
    font-weight: bold;
    color: #333;
}

#product_eier .col2 {
    background: url(../img/product_eier2.jpg) no-repeat top center;
    background-size: 100%;
    min-height: 500px;
}

#product_nudeln .col2 {
    background: url(../img/product_nudeln2.jpg) no-repeat top center;
    background-size: 100%;
    min-height: 500px;
}

#product_wolle .col2 {
    background: url(../img/product_wolle2.jpg) no-repeat top center;
    background-size: 100%;
    min-height: 500px;
}

#product_suppenhuhn .col2 {
    background: url(../img/product_suppenhuhn2.jpg) no-repeat top center;
    background-size: 100%;
    min-height: 500px;
}

#footer {
    background: url(../img/footer.jpg) no-repeat top center;
    background-size: cover;
    min-height: 600px;
    margin-top: 5em;    
}

#footer .slogan {
    font-size: 400%;
    letter-spacing: -2px;
    font-family: 'Caveat', Arial, Helvetica, sans-serif;
    line-height: 1.15em;
    color: #333;
    display: block;
    margin: 0 auto 0 auto;
}

#footer a {
    color: #333;
    font-style: italic;
    border-bottom: solid #acc00a 3px;
}

.text-right {
    text-align: right !important; 
}

.btn:hover span {
    border-bottom: solid #acc00a 3px;
    transition: all .2s;
}