body {

    font-family: 'Encode Sans', sans-serif;
    background-color: #e85527;

}



h1 {font-size:1rem;}

h1, h2, h4, h5, h6 {font-family: 'EB Garamond', serif;font-weight:lighter;}

p, li, h3, input {font-family: 'Encode Sans', sans-serif;font-weight:lighter;}

h3 {color:#916944;}

h2, h1 {text-transform: uppercase;}

a {
    color:#e85527;
}

a:hover {
    color:#80ba4f;
    text-decoration: none;
}

.garten-ani-con {

}

#ani-h {
    color:#e85527;
    font-size:5rem;
    text-align: center;
}

#ani-s {
    color:#e85527;

}

#ani-t {
    color:#666;
    font-size:1.2rem;
    text-align: center;
}

.more-circle {
    position: absolute;
    left:80%;
    text-align: center;
    height:100px;
    width:100px;
    background: rgba(236,116,32,0.8);
    color:#fff;
    border-radius: 50px;
    list-style: none;

}


.display-3 {
    font-size: 44px;
}

.container-fluid {
    background-color: #fff;
    padding-left:0;
    padding-right:0;
    max-width: 1140px !important;
}

.row {
    padding:0px;
}

#content-desc {
    height:160px;
    background-color: #916944;
    color:#fff;
}

.p-5 {
    padding: 8rem 1rem !important;
}

#content-desc-ani {
    height:300px;
    background-color: #cfe5bd;
    color:#fff;
}

#content-desc-ueberuns {
    height:auto;
    background-color: #cfe5bd;
    color:#fff;
}

#start_text, #start_l1, #start_l2 {
    position:absolute;
    height:auto;
}

#start_bg {
   height:auto;

}

#content-1 {
    height:auto;

}

#content-2 {
    height:auto;
    background-color: #60a923;
    color:#fff;
}

.green-layer {
    position:absolute !important;
    width:400px;

    height:400px;
    background-color: rgba(96,169,35,0.7);
    color:#fff;
}

.green-layer-ref {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    color:#fff;
}

#cat-1{background-color: rgba(96,169,35,0.5);}
#cat-2{background-color: rgba(96,169,35,0.6);}
#cat-3{background-color: rgba(96,169,35,0.7);}
#cat-4{background-color: rgba(96,169,35,0.8);}
#cat-5{background-color: rgba(96,169,35,0.9);}
#cat-6{background-color: rgba(96,169,35,0.7);}

#cat-1:hover{background-color: rgba(96,169,35,0.3);}
#cat-2:hover{background-color: rgba(96,169,35,0.4);}
#cat-3:hover{background-color: rgba(96,169,35,0.5);}
#cat-4:hover{background-color: rgba(96,169,35,0.6);}
#cat-5:hover{background-color: rgba(96,169,35,0.7);}
#cat-6:hover{background-color: rgba(96,169,35,0.5);}


.copy {
    width:60%;
    padding-top:25px;
    padding-bottom:25px;
    color:#666;
}

.copy p, li {
    font-size: 16px;
    color:#666;
}

.nav {
    width:100%;
    background-image: url("../../../../../storage/app/media/Global/nav_bg_brenn.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height:150px;
    position: absolute;
    top:0px;


}

.logo {

    background-image: url("../../../../../storage/app/media/Global/logo_brennholz.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 98%;
    height:95px;
    width:180px;
    position: absolute;
    top:12px;
    left:59%;
    cursor: pointer;
    overflow: visible;
}


.stoerer_brennholz {
    width: 220px;
    position: absolute;
    right: 20%;
    bottom: 14%;
}


.footer {
    width: 100%;
    background-image: url("../../../../../storage/app/media/Global/footer_bg_brenn.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    height: 300px;
}

.footer-text {
    padding-top:100px;
    margin-left:200px;
    line-height: 19px;
    float:left;
}

.footer-text a {color:#fff;text-decoration: none;}
.footer-text a:hover {color:#ccc;text-decoration: none;}

.footer-nav {
    padding-left:600px;
    padding-top:100px;
    color:#fff;
}

.footer-nav a {color:#fff;text-decoration: none;}
.footer-nav a:hover {color:#ccc;text-decoration: none;}

/* CIRCLE-NAV ANIMATION */

.hidden {

    opacity: 0;
    pointer-events: none;
}

.visible {

    opacity: 1;
}

.hidden-all{
    display:none;
    opacity:0;
}

.circle-nav {
    position: absolute;
    left:135px;
    top:70px;
}

.circle-nav li {
    text-align: center;
    height:150px;
    width:150px;
    background: rgba(236,116,32,0.8);
    color:#fff;
    border-radius: 75px;
    list-style: none;
}

.circle-nav li a {

    text-decoration: none;
    color:#fff;

}



#nav0  {
    background-image: url("../../../../../storage/app/media/Global/icon_brennholz.png");
    background-repeat: no-repeat;
    background-position: 30px 10px;
    background-size: 50%;
    width:100px;
    height:100px;
    margin-top:250px;
    margin-left:25px;
    background: rgba(255,255,255,0.5);
    border-radius: 50px;
    padding-top: 5%;

}

#nav0 a {
    font-size: 3em;

}

#nav5  {
    background-image: url("../../../../../storage/app/media/Global/icon_brennholz.png");
    background-repeat: no-repeat;
    background-position: 32px 20px;
    background-size: 40%;
    width:100px;
    height:100px;
    margin-top:-100px;
    margin-left:25px;
    background-color:rgba(255,255,255,0.7);
    border-radius: 50px;
    padding-top: 25%;
    color:#0b2e13;
}

#nav5 a {
    font-size: 1em;

}

#nav5 a:hover {
    color:rgba(255,255,255,0.5);

}

#nav1  {
    margin-top:-230px;
    padding-top:65px;
}

#nav2  {
    margin-top:-40px;
    margin-left:115px;
    padding-top:65px;
}

#nav3  {
    margin-top:-45px;
    padding-top:65px;
}

#nav4  {
    margin-top:-255px;
    margin-left:-115px;
    padding-top:65px;
}

#nav_max {color:#0b2e13;font-weight: 800;}

#nav_min{z-index: 9999;}

#ani-2 {position: absolute;}

.copyright{
    font-size:11px;
    text-align:center;
    align-items: center;
}









/* BREAKPOINTS */

@media (max-width: 500px) {
    .nav {
        width:100%;
        background-image: url("../../../../../storage/app/media/Global/nav_bg_brenn.png");
        background-repeat: no-repeat;
        background-position: top;
        background-size:120%;
        height:200px;
        position: absolute;
        top:0px;
    }

    .circle-nav {
        position: absolute;
        left:135px;
        top:40px;
        zoom: 1;
    }

    .circle-nav li {
        text-align: center;
        height:80px;
        width:80px;
        background: rgba(236,116,32,0.8);
        color:#fff;
        border-radius: 40px;
        list-style: none;
        font-size: x-small;
    }

    .logo {
        top:10px;
        width:150px;
        height:70px;
        left:59% !important;
        background-size: 100%;
    }

    .display-3 {
        font-size: 34px;
    }

    #content-desc {
        height:100px;
    }

    .p-5 {
        padding: 2rem 0rem !important;
    }

    .copy {
        width:80%;
    }

    small{
        font-size: x-small;
    }

    .footer {
        height: 150px;
    }

    .footer-text {
        padding-top:100px;
        margin-left:50px;
        line-height: 15px;
        float:left;

    }
}

@media (max-width:991px) {
    .nav {
        width:100%;
        background-image: url("../../../../../storage/app/media/Global/nav_bg_brenn.png");
        background-repeat: no-repeat;
        background-position: top;
        background-size:120%;
        height:200px;
        position: absolute;
        top:0px;
    }

    .circle-nav {
        position: absolute;
    left:135px;
        top:70px;
        zoom: 1;
    }

    .circle-nav li {

        font-size: 18px;
    }

    #nav0 a {
        font-size: 3em;

    }



    .logo {
        top:15px;
        width:200px;
        height:120px;
        left:59% !important;
        background-size: 88%;
    }

    .display-3 {
        font-size: 34px;
    }

    #content-desc {
        height:100px;
    }

    .p-5 {
        padding: 2rem 0rem !important;
    }

    .copy {
        width:60%;
    }

    small{
        font-size: x-small;
    }

    .footer {
        height: 200px;
    }

    .footer-text {
        padding-top:45px;
        margin-left:200px;
        line-height: 12px;
        float:left;
        font-size: small;

    }

    .footer-nav {
        padding-left:500px;
        padding-top:50px;
        color:#fff;
        font-size: small;
    }

}



/* BILDWECHSEL REFERENZEN */



.ba-slider {
    position: relative;
    overflow: hidden;
}

.ba-slider img {
    width: 100%;
    display:block;
}

.ba-slider .resize {
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 80%;
    overflow: hidden;
}


.handle {
    position:absolute;
    left:80%;
    top:0;
    bottom:0;
    width:4px;
    margin-left:-2px;

    background: rgba(0,0,0,.5);
    cursor: ew-resize;
}

.handle:after {
    position: absolute;
    top: 85%;
    width: 68px;
    height: 68px;
    margin: -32px 0 0 -32px;

    content:'\2194';
    color:white;
    font-weight:bold;
    font-size:36px;
    text-align:center;
    line-height:64px;

    background: #80ba4f; /* @orange */
    border:1px solid #80ba4f; /* darken(@orange, 5%) */
    border-radius: 50%;
    transition:all 0.3s ease;
    box-shadow:
            0 2px 6px rgba(0,0,0,.3),
            inset 0 2px 0 rgba(255,255,255,.5),
            inset 0 60px 50px -30px #80ba4f; /* lighten(@orange, 20%)*/
}

.handle.draggable:after {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    line-height:50px;
    font-size:30px;
}

.schieber {position: absolute; bottom: 11%;left:78%; color:#fff; width:150px;}

/* REFERENZEN AUSWAHL */

#content-ref-1 {
    height:auto;
}