/* GLOBAL STYLES
-------------------------------------------------- */
/* Deklarationen (Variablen) */
/* Schrift, Linkfarbe, Hintergrund Nav */
/* Mouseover, active */
/* Hintergrund Sidebar */
/* Schriftfarbe Sidebar */
/* Schriftfarbe Sidebar */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
    font-weight: normal;
    color: #545454;
}

body {
    padding-bottom: 0 !important;
}

.dunkel-gelb {
    color: #ffbc10;
    width: 100%;
    padding-top: 1.6rem;
    padding-bottom: 0.3rem;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.15rem;
}

.rot {
    color: #cb362a;
}

.gruen {
    color: #00993b;
}

.blau {
    color: #21409a;
}

.gelb {
    color: #ffbc10;
}

html {
    scroll-behavior: smooth;
}

/* Padding below the footer and lighter body text */
body {
    margin-top: 0.7rem;
    padding-bottom: 3rem;
    color: #5a5a5a;
}

a {
    color: #21409a;
}

a:hover,
a:active {
    color: #cb362a;
    text-decoration: none;
}

.logo-zeile {
    max-width: 1100px;
    margin: auto;
    position: relative;
}

.header-info {
    padding-top: 3.3rem;
    line-height: 2.0rem;
    color: #000;
}

.phone {
    font-size: 1.3rem;
}

.fa-phone-alt {
    font-size: 1.2rem;
    padding-right: 0.3rem;
}

.fa-envelope {
    font-size: 1.3rem;
    padding-right: 0.3rem;
}

.mail {
    font-size: 1.2rem;
}

.navbar-expand-md {
    padding: 0;
}

.navbar-collapse {
    background-color: #21409a;
}

.nav-container {
    max-width: 1100px;
    width: 100%;
}

.navbar li {
    font-size: 1.1875rem;
}

a.nav-link {
    color: #fff;
    padding-top: 0.5rem;
    padding-bottom: 0.625rem;
    padding-left: 1.7rem !important;
    padding-right: 1.7rem !important;
    outline: none;
}

a.nav-link:hover {
    background-color: #fff;
    color: #21409a;
    font-weight: normal;
    letter-spacing: normal;
}

a.nav-link:active {
    background-color: #fff;
    color: #21409a;
    font-weight: normal;
    letter-spacing: normal;
}

/*.nav-item.active {
    background-color: #fff;
    color: #21409a !important;
    font-weight: normal;
    letter-spacing: normal;
}*/

.dropdown-menu {
    border: none;
    opacity: .9;
    margin-top: 0;
    border-radius: unset;
}

.dropdown-item {
    color: #21409a;
}

.dropdown-item:hover {
    color: #cb362a;
}

.header-mobil {
    display: none;
}

.logo-mobil {
    display: none;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.carousel {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.carousel-inner img {
  width: 100%;
  height: auto;
}

.carousel-control-prev,
.carousel-control-next {
    opacity: .8;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 50px;
    width: 30px;
    position: relative;
    opacity: .8;
}

.carousel-control-prev-icon {
    background-image: url("images/pfeil-links.png");
    left: -50px;
}

.carousel-control-next-icon {
    background-image: url("images/pfeil-rechts.png");
    right: -50px;
}

.standbild {
    display: none;
}

/* MARKETING CONTENT
-------------------------------------------------- */
.intro {
    max-width: 1100px;
    margin: 0 auto;
}

.intro p {
    width: 100%;
}

.flex-text {
    text-align: center;
}

/* Center align the text within the three columns below the carousel */
.content {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.mobile-only {
    display: none;
}

aside {
    padding: 2rem 0;
}

.sidebar {
    background-color: #e8e8e8;

    /*font-size: 1.2rem;*/
    color: #4b4b4b;
    text-align: left !important;
    line-height: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.sidebar h2 {
    font-size: 1.2rem;
    text-transform: uppercase;
    padding-left: 1rem !important;
    padding: 0.5rem;
}

.sb-gailit {
    font-size: 1.1rem;
    text-transform: uppercase;
}

.sidebar p {
    padding-left: .35rem;
}

.sidebar hr {
    border-top: 2px solid #fff;
}

.sidebar a {
    color: #2140b5;
}

.sidebar a:hover {
    color: #cb362a;
}

h2.tablet {
    display: none;
}

.kreise {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
}

.reihe-kreise1 {
    margin-top: 1rem;
}

.reihe-kreise2 {
    padding-top: 3rem;
}

.kreise-img-container {
    max-width: 320px;
    max-height: 320px;
}

.kreise a {
    height: 318px;
    width: 318px;
    display: block;
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.reihe-kreise-baby {
    margin-top: 1rem;
}

#baby {
    background-image: url("images/kreis-gelb.png");
}

#baby:hover {
    background-image: url("images/kreis_baby_kleinkinder.png");
}

#babygruppen {
    background-image: url("images/kreis-gelb-baby.png");
}

#babygruppen:hover {
    background-image: url("images/kreis_baby.png");
}

#kindergruppen {
    background-image: url("images/kreis-gelb-kleinkinder.png");
}

#kindergruppen:hover {
    background-image: url("images/kreis_mit_Eltern.png");
}

#kinder {
    background-image: url("images/kreis-gruen.png");
}

#kinder:hover {
    background-image: url("images/kreis_ohne_eltern.png");
}

#schule {
    background-image: url("images/kreis-blau.png");
}

#schule:hover {
    background-image: url("images/kreis_schueler.png");
}

#chor {
    background-image: url("images/kreis-rot.png");
}

#chor:hover {
    background-image: url("images/kreis_chor.png");
}

.carousel-page {
    margin-bottom: -1.8rem;
}

.page-content {
    margin-top: 2.1rem;
    padding-left: 2.8rem;
}

.page-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 2.1;
}

.page-content h3 {
    font-size: 1rem;
    font-weight: bolder;
    color: #5a5a5a;
}

.btn-back {
    border: none;
    border-radius: none;
    background-color: #fff;
    padding-left: 0;
    color: #21409a;
}

.marketing {
    margin-top: 1.5rem;
}

.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.marketing h2 {
    font-weight: 600;
}

.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}

.doris {
    background-color: #e8e8e8;
    color: #4b4b4b;
    max-width: 1100px;
    margin: auto;
    margin-top: 3rem;
    padding: 2.5rem 4rem;
}

.img-container-doris {
    max-width: 180px;
}

.doris-text {
    max-width: calc(80%);
    line-height: 1.75rem;
    padding-top: 1rem;
    padding-left: 2.2rem;
}

footer {
    margin-top: 3rem;
    height: 8rem;
    background-color: #21409a;
    color: #fff;

    /*font-size: 1.2rem;*/
}

#footer-content {
    max-width: 1100px;
    margin: auto;
    height: 100%;
}

footer .logo-container {
    max-width: 100px;
}

.footer-text {
    margin-top: 1rem;
    line-height: 1.75rem;
}

.footer-text a {
    color: #fff;
}

.footer-text a:hover,
footer-text a:active {
    color: #cb362a;
}

/* Featurettes
------------------------- */
.featurette-divider {
    margin: 5rem 0;

    /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.05rem;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 767px) {
    body {
        margin-top: 0;
    }

    .logo-zeile {
        display: none;
    }

    .logo-mobil {
        display: block;
        margin-left: 0.9rem;
        padding-top: 0.6rem;
    }

    .header-mobil {
        display: block;
        padding-left: 1.5rem;
        padding-top: 0.8rem;
    }

    .mail {
        font-size: 1.1rem;
    }

    .navbar {
        background-color: #21409a;
    }

    .navbar-toggler {
        font-size: 2rem;
        border-radius: 0;
        margin-bottom: -0.7rem;
    }

    .navbar-nav {
        margin-top: -20px;
        margin-bottom: 15px;
    }

    p.header-mobil,
    .header-mobil a {
        color: #fff;
    }

    hr.mobile-only {
        border-color: #fff;
    }

    #myCarousel {
        /*display: none;*/
    }

    .standbild {
        display: none;
        margin: 0;
    }

    .standbild img {
        width: 100%;
    }

    .dunkel-gelb {
        text-align: left !important;
        padding-top: 0.9rem;
        padding-bottom: 0.1rem;
        padding-left: 1rem;
    }

    .marketing {
        margin-top: 0.5rem;
        margin-bottom: 0;
        padding: 0 13px;
    }

    .flex-text {
        text-align: left;
        padding: 0 1em;
    }

    .space {
        display: none;
    }

    .kreise {
        display: none;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .acc-title {
        color: #21409a;
        text-transform: uppercase;
        font-size: 1.4rem;
    }

    .card {
        margin-bottom: .5rem;
        border: none;
    }

    .card-header {
        border-radius: .5rem !important;
        border: none;
        padding: 0.1rem 1.25rem;
    }

    .card-body {
        padding-bottom: 0;
        padding-left: .9rem;
    }

    #headingOne {
        background-color: #ffbc10;
        color: #fff;
    }

    #headingTwo {
        background-color: #00993b;
    }

    #headingThree {
        background-color: #21409a;
    }

    #headingFour {
        background-color: #cb362a;
    }

    #accordion a,
    #accordion button {
        color: #fff;
        text-align: left;
    }

    #child1 {
        padding-top: 1.2rem;
        padding-bottom: 0.1rem;
        padding-right: 0;
    }

    #child1 .card-header {
        padding-top: 5px;
        background: none;
        border: 1px solid #ffbc10;
    }

    #child1 a {
        color: #ffbc10;
    }

    #child1 a::before {
        content: url("images/symbole/tulpe-gelb.png");
        float: left;
        margin-right: 1rem;
        margin-top: .2rem;
        display: block;
    }

    .symbol::before {
        /* vertical-align: middle; */
        display: block;
        position: relative;
        float: left;
        margin-left: -1rem;
        margin-right: 1rem;
        margin-top: .7rem;
    }

    .sym-baby::before {
        content: url("images/symbole/symbol_tulpe_klein.png");
    }

    .sym-kinder::before {
        content: url("images/symbole/symbol_dreieck_klein.png");
        margin-top: 0;
    }

    .sym-schule::before {
        content: url("images/symbole/symbol_sonne_klein.png");
    }

    .sym-chor::before {
        content: url("images/symbole/symbol_rechteck_klein.png");
    }

    .container .mobile-only {
        padding-bottom: 0.5rem;
    }

    aside {
        padding: 0 !important;
    }

    .marketing .col-lg-4 {
        margin-bottom: 0;
    }

    .sidebar {
        background: none;
        padding-top: 0;
    }

    .sidebar h2.rot {
        color: #21409a;
        font-size: 1.4rem;
    }

    .logo-container {
        padding-left: 1rem;
        padding-bottom: 0.5rem;
    }

    #myBtn,
    .pg-node-id-106 {
      display: none;
      position: fixed;
        background-image: url("images/top.png");
        width: 40px;
        height: 40px;
        background-color: transparent;
        color: transparent;
        outline: none;
        border: none;
      bottom: 9rem;
      right: 40px;
      z-index: 99;
        /*float: right;
        margin-right: 25px;
        margin-top: 1.3rem;*/
    }

    /* Footer */
    footer {
        margin-top: 0;
    }

    .footer-text {
        text-align: center !important;
        margin: 0 auto;
        padding-top: 1.0rem;
    }
}

@media (min-width: 499px) and (max-width: 767px) {
    .symbol::before {
        margin-top: 0;
    }
}

@media (min-width: 768px) and (max-width: 1019px) {
    .container {
        max-width: 600px;
    }

    .logo-container {
        margin-left: 1.2rem;
    }

    .header-info {
        padding-right: 1.5rem;
    }

    .carousel-control-prev-icon {
        left: -20px;
    }

    .carousel-control-next-icon {
        right: -20px;
    }

    .marketing {
        margin-top: 0;
    }

    .marketing-baby {
        margin-top: 0;
    }

    .intro {
        padding: 0 2rem;
    }

    .kreise-baby {
        margin-top: 1.5rem !important;
    }

    h2.tablet {
        margin-left: 1rem;
        display: block;
        color: #21409a;
        text-transform: uppercase;
    }

    .col-md-8.page-content {
        max-width: 100%;
        padding-right: 0;
    }

    .page-content {
        margin-top: 3.5rem;
        padding-left: 1.9rem;
    }

    aside {
        margin-top: 2rem;
    }

    .kreise {
        margin-left: 5rem;
        margin-top: 1rem;
    }

    .reihe-kreise-baby {
        margin-top: 2rem;
    }

    .reihe-kreise1 {
        margin-top: 2rem;
    }

    .reihe-kreise2 {
        margin-top: 1rem;
    }

    .img-kreise-baby {
        margin-bottom: 2rem;
    }

    #kinder {
        margin-top: 2.1rem;
    }

    #chor {
        margin-top: 2rem;
    }

    .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .doris-text {
        max-width: calc(70%);
        padding-left: 1.5rem;
    }

    .doris {
        margin-top: 0;
    }

    .footer-baby {
        margin-top: 1rem;
    }

    footer .logo-container {
        margin-left: 1rem;
    }

    .footer-text {
        margin-right: 1rem;
    }

    .space {
        display: none;
    }
}

@media (min-width: 1023px) and (max-width: 1100px) {
    .logo-container {
        margin-left: 1.2rem;
    }

    .header-info {
        padding-right: 1.5rem;
    }

    .sidebar {
        margin-left: -1.5rem;
        margin-right: 0.3rem;
    }

    .sidebar-baby {
        margin-left: 0;
    }

    footer .logo-container {
        margin-left: 1rem;
    }

    .footer-text {
        margin-right: 1rem;
    }
}

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}