@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/open-sans-v15-latin-300.eot);
    src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/open-sans-v15-latin-300.eot?#iefix) format('embedded-opentype'), url(../fonts/open-sans-v15-latin-300.woff2) format('woff2'), url(../fonts/open-sans-v15-latin-300.woff) format('woff'), url(../fonts/open-sans-v15-latin-300.ttf) format('truetype'), url(../fonts/open-sans-v15-latin-300.svg#OpenSans) format('svg')
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/open-sans-v15-latin-300italic.eot);
    src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(../fonts/open-sans-v15-latin-300italic.eot?#iefix) format('embedded-opentype'), url(../fonts/open-sans-v15-latin-300italic.woff2) format('woff2'), url(../fonts/open-sans-v15-latin-300italic.woff) format('woff'), url(../fonts/open-sans-v15-latin-300italic.ttf) format('truetype'), url(../fonts/open-sans-v15-latin-300italic.svg#OpenSans) format('svg')
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/open-sans-v15-latin-regular.eot);
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/open-sans-v15-latin-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/open-sans-v15-latin-regular.woff2) format('woff2'), url(../fonts/open-sans-v15-latin-regular.woff) format('woff'), url(../fonts/open-sans-v15-latin-regular.ttf) format('truetype'), url(../fonts/open-sans-v15-latin-regular.svg#OpenSans) format('svg')
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/open-sans-v15-latin-600.eot);
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/open-sans-v15-latin-600.eot?#iefix) format('embedded-opentype'), url(../fonts/open-sans-v15-latin-600.woff2) format('woff2'), url(../fonts/open-sans-v15-latin-600.woff) format('woff'), url(../fonts/open-sans-v15-latin-600.ttf) format('truetype'), url(../fonts/open-sans-v15-latin-600.svg#OpenSans) format('svg')
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/open-sans-v15-latin-700.eot);
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/open-sans-v15-latin-700.eot?#iefix) format('embedded-opentype'), url(../fonts/open-sans-v15-latin-700.woff2) format('woff2'), url(../fonts/open-sans-v15-latin-700.woff) format('woff'), url(../fonts/open-sans-v15-latin-700.ttf) format('truetype'), url(../fonts/open-sans-v15-latin-700.svg#OpenSans) format('svg')
}

body,
html,
input,
textarea {
    font: 16px/27px 'Open Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body,
html,
section {
    overflow-y: inherit!important
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

::selection {
    background: #000;
    color: #fff;
    text-shadow: none
}

::-moz-selection {
    background: #000;
    color: #fff;
    text-shadow: none
}

.wrapper {
    width: 80%;
    margin: 0 auto
}

a {
    color: #3f3c39;
    text-decoration: none;
    transition: all 1s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a,
a:hover,
div,
footer,
section {
    outline: 0!important
}

body,
html,
main {
    height: inherit!important
}

h1,
h2 {
    margin: 0 0 15px 0;
    font-weight: 600
}

h1 {
    padding-top: 45px
}

h2 {
    color: #fff;
    font-weight: 500
}

h3 {
    font-size: 20px;
    font-weight: 600
}

h5 {
    font-size: 16px
}

b {
    font-weight: 600
}

p {
    margin: 0 0 16px 0
}

.referenzen li {
    display: inline-block
}

.ref {
    color: #ffa904
}

.urheber {
    font-size: 18px;
    font-weight: 300;
    font-style: italic
}

.extra p {
    text-shadow: 3px 3px 4px #000
}

.zitat {
    text-align: center;
    font-weight: 800
}

.zitat span {
    font: italic 300 14px/18px 'Open Sans', sans-serif;
    display: block;
    margin: 10px 0 0 0
}

.btn {
    margin: 20px 0 0 0;
    display: inline-block;
    color: #ffa904;
    padding: 8px 20px;
    border: 2px solid #ffa904;
    transition: all 1s ease
}

.btn:hover {
    color: #fff;
    background-color: #ffa904
}

.compat-object-fit {
    background-size: cover;
    background-position: center center
}

.objectfit .support-objectfit {
    -o-object-fit: cover;
    object-fit: cover
}

.no-objectfit .support-objectfit {
    display: none
}

.logo {
    position: absolute;
    right: 5%;
    bottom: 5%
}

header {
    background: url(../images/holz-und-parkettboden.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh
}

header .zitat {
    font-family: 'Open Sans';
    font-weight: 300;
    font-size: 25px;
    color: #ffa904;
    text-align: center;
    padding-top: 350px
}

.zitat p {
    background: #fff;
    width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 10px;
    line-height: 40px
}

.black {
    color: #000;
    font-weight: 700;
    font-size: 34px;
    padding-top: 50px
}

nav {
    background: #ffa904;
    height: 60px;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 20
}

.logo-fixed {
    display: none
}

.logo-fixed.is-fixed {
    display: block;
    top: 0;
    left: 5%;
    background: #fff;
    margin: 0 30px 0 0
}

nav.menu-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    height: 63px
}

nav ul {
    align-items: center;
    padding-top: 15px
}

nav ul li {
    font: 300 16px/20px 'Open Sans', sans-serif;
    display: inline-block;
    margin: 0 50px 0 0
}

nav ul li:last-child {
    margin: 0
}

nav ul li a {
    color: #fff;
    text-decoration: none
}

nav ul li a.active {
    color: #000;
    font-weight: 600
}

#navwrapper {
    width: 860px;
    margin: auto
}

#nav_button,
#toggle {
    display: none
}

.flex-container {
    display: flex
}

#section-1 {
    color: #ffa904
}

#section-1 .flex-item:nth-of-type(1) {
    background: #f2f1f1;
    flex-basis: 50%;
    padding: 5%;
    margin: 100px 0
}

#section-1 .flex-item:nth-of-type(2),
#section-1 .flex-item:nth-of-type(3) {
    flex-basis: 25%
}

#section-1 .flex-item:nth-of-type(2) img {
    width: 100%;
    height: 100%
}

#section-1 .flex-item:nth-of-type(3) {
    background: #f2f1f1;
    margin: 100px 0
}

#section-2 .flex-item {
    flex-basis: 50%
}

#section-2 .flex-item:nth-of-type(1) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: url(../images/dunkler-dielenboden.jpg) no-repeat center center/cover;
    background-repeat: no-repeat;
    font: 300 24px/28px 'Open Sans', sans-serif;
    color: #fff;
    padding: 5%
}

#section-2 .flex-item:nth-of-type(2) {
    background: #ffa904;
    color: #fff;
    padding: 5%
}

#section-2 ul {
    margin: 0 0 70px 0
}

#section-2 ul li {
    display: inline-block
}

#section-2 ul li:last-of-type:after {
    content: ""
}

#section-2 ul li,
#section-2 ul li a {
    color: #fff;
    font-size: 14px
}

#section-2 h2 {
    margin: 0 0 50px 0
}

#section-3 {
    height: 90vh
}

#section-3>.flex-item {
    flex-basis: 50%
}

#section-3>.flex-item img {
    object-fit: cover;
    height: 100%;
    width: 100%
}

.square-container>.flex-item>.flex-container:nth-of-type(1) .flex-item,
.square-container>.flex-item>.flex-container:nth-of-type(2) .flex-item {
    flex-basis: 50%;
    height: 24vh;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 2%
}

#section-3 .flex-item>.flex-container:nth-of-type(1) .flex-item:nth-of-type(1) {
    background: url(https://via.placeholder.com/800x800?text=Bild) center center/cover
}

#section-3 .flex-item>.flex-container:nth-of-type(1) .flex-item:nth-of-type(2),
#section-3 .flex-item>.flex-container:nth-of-type(2) .flex-item:nth-of-type(1) {
    background: #ffa904
}

#section-3>.flex-item>.flex-container:nth-of-type(2) .flex-item:nth-of-type(2) {
    background: url(https://via.placeholder.com/800x800?text=Bild) center center/cover
}

#section-3 a,
#section-3 h3,
#section-4 a,
#section-4 h3 {
    color: #fff
}

#section-3 h3,
#section-4 h3 {
    font-size: 24px;
    margin: 0 0 10px 0;
    position: relative
}

#section-4 {
    height: 48vh;
    display: flex;
    flex-direction: row-reverse
}

#section-4>.flex-item:nth-of-type(1) {
    background: url(../images/dunkler-dielenboden.jpg) center bottom/cover;
    flex-basis: 60%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    font: 300 24px/28px 'Open Sans', sans-serif;
    color: #fff;
    padding: 5%
}

#section-4 .flex-item:nth-of-type(2) {
    flex-basis: 50%
}

#section-4 .flex-item>.flex-container:nth-of-type(1) .flex-item:nth-of-type(1) {
    background: url(../images/dielenboden-ref1.jpg) center center/cover
}

#section-4 .flex-item>.flex-container:nth-of-type(1) .flex-item:nth-of-type(2) {
    background: url(../images/parkettboden-ref3.jpg) center center/cover
}

#section-4 .flex-item>.flex-container:nth-of-type(2) .flex-item:nth-of-type(1) {
    background: url(../images/dielenboden-ref4.jpg) center center/cover
}

#section-4 .flex-item>.flex-container:nth-of-type(2) .flex-item:nth-of-type(2) {
    background: url(../images/parkettboden-ref2.jpg) center center/cover
}

#section-5 .flex-item:nth-of-type(1) {
    background: #f2f1f1;
    flex-basis: 40%;
    padding: 5%;
    margin: 100px 0
}

#section-5 .flex-item:nth-of-type(2) {
    flex-basis: 25%
}

#section-5 .flex-item:nth-of-type(2) img {
    height: 100%;
    width: 100%
}

#section-5 .flex-item:nth-of-type(3) {
    flex-basis: 80%;
    padding: 5%;
    margin: 100px 0;
    background: #f2f1f1
}

#section-5 h2 {
    color: #ffa904;
    margin-top: 80px
}

#kontakt {
    background: #ffa904;
    padding: 40px 5%
}

#kontakt .flex-item {
    flex-basis: 50%
}

#kontakt .flex-item:first-of-type {
    margin: 0 5% 0 0;
    color: #fff;
    padding: 100px 0
}

#kontakt a {
    color: #fff!important
}

#kontakt h2,
#kontakt h3 {
    color: #fff
}

#kontakt ul {
    margin: 0 0 50px 25px
}

#kontakt ul:last-of-type {
    margin-bottom: 0
}

#kontakt ul li {
    list-style: url(../images/listpunkt-2.png)
}

.kontaktformular {
    border: none;
    width: 100%;
    height: 900px;
    padding: 5% 0
}

#impressum {
    background: #fff;
    color: #ffa904
}

#impressum h2 {
    color: #ffa904
}

#impressum .flex-item {
    flex-basis: 50%;
    padding: 5%
}

footer a {
    color: #8b2c2d!important
}

.bildquellen a {
    display: block
}

#popup1,
#popup2,
#popup3,
#popup4,
#popup5,
#popup6,
#popup7,
#popup8 {
    transform: scale(.8)
}

.popup_visible #popup1,
.popup_visible #popup2,
.popup_visible #popup3,
.popup_visible #popup4,
.popup_visible #popup5,
.popup_visible #popup6,
.popup_visible #popup7,
.popup_visible #popup8 {
    transform: scale(1)
}

.popup-style {
    margin: 2rem 0;
    width: 80%;
    min-height: 20px;
    padding: 2rem 1rem;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05)
}

.popup-style h4 {
    font-size: 20px
}

.popup-style p {
    margin: 0 0 20px 0
}

.popup-style ul {
    margin: 0 0 20px 15px
}

.popup-style ul li {
    list-style: disc
}

.popup-style h4 {
    color: #ffa904;
    margin: 0 0 15px 0
}

@media (min-width:576px) {
    .popup-style {
        width: 70%
    }
}

@media (min-width:768px) {
    .popup-style {
        width: 60%
    }
}

@media (min-width:992px) {
    .popup-style {
        width: 50%
    }
}

.popup-style a {
    color: #1b5d84
}

.popup-style a:hover {
    opacity: .8;
    text-decoration: none
}

.popup-style p {
    color: #000;
    text-align: left
}

.popup-style h4+p {
    padding-top: 1rem
}

@media only screen and (min-width:768px) {
    .popup-style {
        padding: 4rem 2rem
    }
}

button {
    margin: 0;
    padding: 0;
    background: 0 0;
    border: none
}

.close-popup {
    transition: all 1s ease;
    cursor: pointer;
    position: fixed;
    top: .5rem;
    right: .5rem
}

.close-popup i {
    transition: all 1s ease;
    font-size: 2rem;
    color: #020d1a
}

.close-popup:hover i {
    color: #020d1a
}

table {
    width: 100%
}

table tr:nth-of-type(odd) {
    background: #ffa904;
    color: #fff
}

table tr td {
    padding: 10px
}

#impressum {
    position: relative
}

.legals {
    position: fixed!important;
    left: 5%;
    bottom: 0;
    z-index: 9999
}

.legals li {
    display: inline-block
}

.legals li a {
    background: #ffa904;
    padding: 5px 8px;
    color: #fff!important
}

.back-to-top {
    -webkit-transition: color 2s ease-in-out;
    -o-transition: color 2s ease-in-out;
    transition: color 2s ease-in-out;
    padding-top: 3px;
    text-align: center;
    border: 1px solid #000;
    cursor: pointer;
    z-index: 5;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, .4);
    border-radius: .25em;
    overflow: hidden
}

.back-to-top i {
    color: #000;
    font-size: 2rem
}

@media screen and (min-width:1101px) {
    section {
        height: calc(100vh - 60px)
    }
}

@media screen and (max-height:750px) {
    section {
        height: auto!important
    }
}

@media screen and (max-width:1100px) {
    header {
        height: 600px
    }
    header .zitat {
        padding-top: 100px
    }
    section {
        height: auto!important
    }
}

@media screen and (min-width:901px) {
    nav button {
        display: none
    }
}

@media screen and (max-width:900px) {
    h1 {
        padding-top: 80px
    }
    #section-1 .flex-item:nth-of-type(2),
    #yoga .flex-item:nth-of-type(3) {
        display: none
    }
    #section-1 .flex-item:nth-of-type(3) {
        display: none
    }
    nav {
        -webkit-transition: all linear .8s;
        -o-transition: all linear .8s;
        transition: all linear .8s
    }
    body.fixed,
    html.fixed {
        position: fixed
    }
    nav.overlay {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 10;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        text-align: center;
        -webkit-transition: all linear .8s;
        -o-transition: all linear .8s;
        transition: all linear .8s;
        justify-content: center;
        align-items: center
    }
    nav button {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 90px;
        margin: auto;
        cursor: pointer;
        color: #fff;
        background: #ffa904;
        padding: 5px 8px;
        font-weight: 600;
        width: 100%
    }
    nav ul {
        display: none
    }
    nav ul li {
        display: block;
        margin: 0 0 30px 0
    }
    nav button span.rotate:after {
        content: "schließen"
    }
    nav button span:after {
        content: "öffnen"
    }
    nav button.menu-on+ul {
        display: block
    }
    #kontakt.flex-container,
    #section-1.flex-container,
    #section-3.flex-container,
    #section-4.flex-container {
        flex-wrap: wrap
    }
    #section-1 .flex-item:nth-of-type(1) {
        flex-basis: 100%;
        margin: 0
    }
    #section-1 .flex-item:nth-of-type(2),
    #yoga .flex-item:nth-of-type(3) {
        flex-basis: 50%;
        margin: 0
    }
    #section-1 .flex-item:nth-of-type(2) img {
        max-height: 300px
    }
    #section-3>.flex-item {
        flex-basis: 100%
    }
    #section-3,
    #section-4 {
        height: auto
    }
    #section-3>.flex-item:nth-of-type(2) {
        max-height: 300px
    }
    #section-4>.flex-item:nth-of-type(1) {
        height: 300px
    }
    #section-4 .flex-item:nth-of-type(1),
    #section-4 .flex-item:nth-of-type(2) {
        flex-basis: 100%
    }
    #section-5 .flex-item:nth-of-type(1) {
        display: none
    }
    #section-5 .flex-item:nth-of-type(2),
    #section-5 .flex-item:nth-of-type(3) {
        flex-basis: 50%;
        margin: 0
    }
    #kontakt .flex-item {
        flex-basis: 100%;
        margin: 0!important
    }
}

@media screen and (max-width:500px) {
    .zitat p {
        line-height: 25px;
        font-size: 20px
    }
    .black {
        font-size: 25px
    }
    #section-5 .flex-item:nth-of-type(2) {
        display: none
    }
    #section-5 .flex-item:nth-of-type(3) {
        flex-basis: 100%
    }
    #impressum.flex-container {
        flex-wrap: wrap
    }
    #impressum .flex-item {
        flex-basis: 100%
    }
    #section-1 .flex-item:nth-of-type(1) {
        background: #f2f1f1 url(../images/mandela-rechts.png) no-repeat center right
    }
    #section-1 .flex-item:nth-of-type(2),
    #section-1 .flex-item:nth-of-type(3) {
        display: none
    }
    #section-2.flex-container {
        flex-wrap: wrap
    }
    .flex-container .flex-item>.flex-container {
        flex-wrap: wrap
    }
    #section-2 .flex-item,
    .flex-container>.flex-item>.flex-container>.flex-item {
        flex-basis: 100%!important
    }
    #section-2 .flex-item:nth-of-type(1) {
        height: 300px
    }
    #section-3 .flex-item>.flex-container:nth-of-type(1) .flex-item:nth-of-type(2),
    #section-4 .flex-item>.flex-container:nth-of-type(2) .flex-item:nth-of-type(1) {
        background: #ffa904
    }
    .logo {
        position: relative;
        right: inherit;
        bottom: inherit;
        margin: 0 0 60px 0
    }
}