@charset "utf-8";
/*
* Color(monochrome&darg gray)
* d-grey:   #1A1A1A
*           #323232
*           #4a4a4a
* l-grey:   #CCCCCC
* d-green:  #0c5832
* m-green:  #12874d
* h-green:  #4f7763
************************************************************************************************************************

/* General
-----------------------------------------------------------------------------------------------------------------------*/
html, body{
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    width: 100%;
}
/*Fonts*/
@media (max-width: 767px) {
    h1, h2, h3, h4, h5, h6{
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

}
@media (min-width: 767px) {
    h1, h2, h3{
        font-family: Helvetica, Arial, sans-serif;
    }
}

/*Hyperlinks*/
a{
    color: #000000;
}
a:hover, a:focus{
    color:#0c5832;
}

p {
    line-height: 1.5;
    margin-top: 0;
}

/* special*/
.sb_center {
    display: block;
    margin: auto;
    text-align: center;
}

.sb_bold{
    font-weight: 600;
}


/*Parallax allgemein*/
.sb_parallax{
    /* The image used is defined in the special parallax*/

    /* Full height */
    height: 100% !important;

    /* Create the parallax scrolling effect */
    background: no-repeat fixed center;
    background-size: cover;
}
/* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 992px) {
    .sb_parallax {
        background-attachment: scroll;
    }
}

/*Toggle Areas*/
.sb_toggle-area {
    opacity: 0;
    display: none;
}
.sb_toggle-area:target, .sb_toggle-area.open{
    opacity: 1;
    display: inherit;
}

/*Tooltips*/
a.sb_tooltip {
    position: relative;
    text-decoration: none;
}
a.sb_tooltip:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 20%;
    background: #555555;
    padding: 5px 15px;
    color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius : 10px;
    border-radius : 10px;
    white-space: nowrap;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition : all 0.4s ease;
    transition : all 0.4s ease;
}
a.sb_tooltip:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid #555555;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transition: all 0.4s ease;
    -moz-transition : all 0.4s ease;
    transition : all 0.4s ease;
    opacity: 0;
    left: 30%;
    bottom: 90%;
}
a.sb_tooltip:hover:after {
    bottom: 100%;
}
a.sb_tooltip:hover:before {
    bottom: 70%;
}
a.sb_tooltip:hover:after, a:hover:before {
    opacity: 1;
}

/* Navigation
-----------------------------------------------------------------------------------------------------------------------*/
/* --- general --- */
/*navigation at start*/
.navbar{
    background-color: #1A1A1A;
    border-radius: inherit;
    border: none;
    opacity: 1;
    z-index: 999;
}

/*Font-color*/
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-brand,
.navbar-brand > a{
    background-color: #1A1A1A;
    color: #cccccc;
}

/*Burger*/
button.navbar-toggle,
button.navbar-toggle:visited,
button.navbar-toggle:active{
    background-color: #1A1A1A;
    color: #cccccc;
}

/*aktive nav-element*/
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover{
    background-color: #2A2A2A;
    color: #ffffff;
}

/*hover nav-element*/
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover{
    color: #4f7763;
}
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover{
    color: #4f7763;
}

/*base navigation*/
/*xs*/
@media (max-width: 767px){
    .top-nav-collapse {
        background-color: #1A1A1A;
        opacity: 1;
    }
}
/*opacity by sm+*/
@media (min-width: 768px) {
    .top-nav-collapse {
        background-color: #1A1A1A;
        opacity: 0.8;
    }
}

.top-nav-collapse .navbar-nav>li>a:focus,
.top-nav-collapse .navbar-nav>li>a:hover{
    background-color: #222222;
}
.navbar-default .navbar-toggle{
    border: none;
}
.navbar-default .navbar-toggle:hover, .navbar-toggle:focus{
    background-color: #12874d;
    border: none;
}

/* --- wide navigation --- */
@media(min-width:767px) {
    .navbar {
        padding: 25px 0;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .navbar-brand > img{
        max-width: 15vw;
        margin-top: -15px;
    }
    .top-nav-collapse .navbar-brand > img{
        height: 40px;
        margin-top: -10px;
    }
    /*schmale/ base navigation*/
    .top-nav-collapse {
        padding: 0;
    }
}



/* Main Content
-----------------------------------------------------------------------------------------------------------------------*/
/*Bilder XS*/
@media (max-width: 767px){
    .sb_image {
        width: 90vw;
        height: auto;
    }
}
/*Bilder SM*/
@media (min-width: 767px){
    .sb_image {
        display: block;
        width: 30vw !important;
        height: auto;
    }
}
/*Bilder MD*/
@media (min-width: 992px){
    .sb_image {
        display: block;
        width: 38vw !important;
        height: auto;
    }
}

/*Text XS*/
@media (max-width: 767px){
    .sb_text{
        padding-left: 9vw;
        padding-rigth: 9vw;
    }
}
/*Text SM*/
@media (min-width: 767px){
    .sb_text{
        padding-left: 8vw;
        padding-rigth: 8vw;
    }
    .sb_text_left{
        padding-left: 20px;
    }
}
/*Text MD*/
@media (min-width: 992px){
    .sb_text{
        padding-left: 7vw;
        padding-rigth: 7vw;
    }
    .sb_text_left{
        padding-left: 20px;
    }
}


/* --- Section1 | Startseite ------------------------------------------------------------------------------- */
.sb_s1{
    /*min-height: 80vh !important;*/
    overflow: hidden;
    padding-top: 80px;
    /*padding-bottom: 5vh;*/
    text-align: center;
}

#sb_IMG_1{
    width: 100vw!important;
     padding-bottom: -5vh;
}
/*Parallax1*/
.sb_parallax_1{
    background-image: url("../assets/image/IMG_1_HG.jpg");
}

/* --- Parallax 0 | Tag  --------------------------------------------------------------------------------*/
.sb_parallax_0{
    background-image: url("../assets/image/IMG_0.jpg");
    overflow: hidden;
    padding-top: 5vh;
    text-align: center;
}
.sb_IMG_0{
    width: 80vw;
}
#sb_IMG_0_Jahre{
    width: 60vw;
}

/* --- Section2 | Kurzbeschreibung ------------------------------------------------------------------------- */
.sb_s2{
    color:  #cccccc;
    overflow: hidden;
    padding-bottom: 2vh;
    font-size: large;
}

.sb_s2 a{
    color: #ffffff;
}
.sb_s3 a:hover, .sb_s3 a:focus{
    color:#ffffff;
}
/* --- Section3 | Haesausstellung -------------------------------------------------------------------------- */
.sb_s3{
    background-color: #1A1A1A;
    color: #cccccc;
    overflow: hidden;
    padding-top: 65px;
    padding-bottom: 65px;
}

.sb_s3 a{
    color: #cccccc;
}
.sb_s3 a:hover, .sb_s3 a:focus{
    color:#ffffff;
}

/* --- Section4 | Zunftball -------------------------------------------------------------------------------- */
.sb_s4{
    background-color: #1A1A1A;
    color: #cccccc;
    overflow: hidden;
    padding-top: 65px;
    padding-bottom: 65px;
}

.sb_s4 a{
    color: #cccccc;
}
.sb_s4 a:hover, .sb_s4 a:focus{
    color:#ffffff;
}


/* --- Section5 | Narrengericht ---------------------------------------------------------------------------- */
.sb_s5{
    background-color: #1A1A1A;
    color: #cccccc;
    overflow: hidden;
    padding-top: 65px;
    padding-bottom: 30px;
}
.sb_s5 a{
    color: #cccccc;
}
.sb_s5 a:hover, .sb_s5 a:focus{
    color:#ffffff;
}

/* --- Section6 | Zunftabend ------------------------------------------------------------------------------- */
.sb_s6{
    background-color: #1A1A1A;
    color:  #cccccc;
    overflow: hidden;
    padding-bottom: 65px;
}

.sb_s6 a{
    color: #cccccc;
}
.sb_s6 a:hover, .sb_s6 a:focus{
    color:#ffffff;
}

/* --- Section7 | Gottesdienst ---------------------------------------------------------------------------------- */
.sb_s7{
    background-color: #1A1A1A;
    color:  #cccccc;
    overflow: hidden;
    padding-top: 65px;
    padding-bottom: 30px;
}
.sb_s7 a{
    color: #cccccc;
}
.sb_s7 a:hover, .sb_s7 a:focus{
    color:#ffffff;
}

/* --- Section8 | Narrendorf -------------------------------------------------------------------------------- */
.sb_s8{
    background-color: #1A1A1A;
    color:  #cccccc;
    overflow: hidden;
    padding-bottom: 30px;
}
.sb_s8 a{
    color: #cccccc;
}
.sb_s8 a:hover, .sb_s8 a:focus{
    color:#ffffff;
}

#sb_s8_Plan{
    min-width: 62vw; !important;
}

/* --- Section9 | Umzug -------------------------------------------------------------------------------- */
.sb_s9{
    background-color: #1A1A1A;
    color:  #cccccc;
    overflow: hidden;
    padding-bottom: 30px;
}
.sb_s9 a{
    color: #cccccc;
}
.sb_s9 a:hover, .sb_s9 a:focus{
    color:#ffffff;
}

/* --- Section10 | Sponsoren -------------------------------------------------------------------------------- */
.sb_s10{
    background-color: #ffffff;
    color:  #1A1A1A;
    overflow: hidden;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

@media (min-width: 767px) {
    .sb_s10 img{
        max-width: 45vw;
        margin: 1vw;
        height: auto;
    }
}
@media (max-width: 767px) {
    .sb_s10 img{
        max-width: 90vw;
        margin: 1vw;
        height: auto;
    }
}
.sb_sponsor img{
    max-width: 17vw;
    max-height: 17vw;
}
.sb_sponsor_klein img{
    max-width: 48vw;
    max-height: 48vw;
}
/* Footer
-----------------------------------------------------------------------------------------------------------------------*/
.sb_footer{
    background-color: #1A1A1A;
    overflow: hidden;
    padding-top: 5px;
}
/*Footer xs*/
@media (max-width: 767px) {
    .sb_footer{
        height: 100px;
    }
}
/*Footer sm*/
@media (min-width: 768px) {
    .sb_footer{
        height: 250px;
    }
}


/* Extra
-----------------------------------------------------------------------------------------------------------------------*/
/* --- Icons --- */
.fa-10x {
    font-size: 10em;
}

/*Kontakticons xs*/
@media (max-width: 767px) {
    .sb_icon>img{
        max-height: 80px;
        padding-top: 10px;
        width:  20vw;
    }
}
/*Kontakticons sm und md*/
@media (min-width: 768px) {
    .sb_icon>img{
        width: 8vw !important;
        padding-top: 85px;
    }
}