body {
    background-color: #f5eee6;
    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
}

body, .container-fluid {
    background-color: #f5eee6;
}

nav, footer, .container-fluid {
    max-width: 2000px;
    margin: auto;
}

/* cormorant-garamond-600italic - latin */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/cormorant-garamond-v16-latin-600italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/cormorant-garamond-v16-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/cormorant-garamond-v16-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/cormorant-garamond-v16-latin-600italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/cormorant-garamond-v16-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/cormorant-garamond-v16-latin-600italic.svg#CormorantGaramond') format('svg'); /* Legacy iOS */
}

/* freckle-face-regular - latin */
@font-face {
    font-family: 'Freckle Face';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/freckle-face-v14-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/freckle-face-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/freckle-face-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/freckle-face-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/freckle-face-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/freckle-face-v14-latin-regular.svg#FreckleFace') format('svg'); /* Legacy iOS */
}

.navbar {
    background-color: rgba(235, 222, 206, 1);
    position: absolute;
    top: 0;
    width: 100%;
    font-weight: 400;
}

.navbar-nav .nav-link.active {
    color: #8c1819;

}

.navbar-nav .nav-link {
    color: #4f5050;
}

.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
    font-size: 24px;
    font-weight: bold;
    color: #8c1819;
}

header.home {
    text-align: center;
    margin-top: 60px;
    background: url("../images/header.jpg") center center;
    background-size: cover;
    height:92vh;
    max-height: 850px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header.home h1 {
    font-family: "Freckle Face", serif;
    padding: 50px 20px 10px;
    font-size: 82px;
    letter-spacing: 8px;
    color: yellow;
    text-shadow: 4px 3px 0 rgba(72, 0, 1, 0.88);
    line-height: 1;
}

.formatSvg svg {
    display: block;
    margin-bottom: -5px;
}

/*   Displayanpassungen header home  */

@media screen and (max-width: 1150px) {
    header.home {
        max-height: 600px;
    }
    header.home h1 {
        padding-top: 40px;
        font-size: 64px;
        letter-spacing: 7px;
    }
}

@media screen and (max-width: 991px) {
    header.home, header.repertoire, header.gallery {
        max-height: 500px;
    }
    header.home h1 {
        font-size: 48px;
        letter-spacing: 4px;
    }
}

@media screen and (max-width: 767px) {
    header.home, header.repertoire, header.gallery {
        max-height: 400px;
    }
    header.home h1 {
        font-size: 30px;
        letter-spacing: 2px;
    }
}

@media screen and (max-width: 1350px) {
    header.home {
        max-height: 700px;
    }
}


header.repertoire {
    margin-top: 60px;
    background: url("../images/banner-1036482.jpg") center;
    background-size: cover;
    height: 55vh;
    max-height: 600px;
    width: 100%;
}

header.gallery {
    margin-top: 60px;
    background: url("../images/galllery-header.jpg") center;
    background-size: cover;
    height: 55vh;
    max-height: 600px;
    width: 100%;
}

section {
    padding: 85px 0;
}
.section-bg {
    background: url("../images/paint-brush-3607521.jpg") center;
    color: #fcc182;
    transform: skewY(-3deg);
}
.section-bg p {
    background-color: rgba(72, 0, 1, 0.85);
}

p {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media screen and (max-width: 280px) {
    .note {
        display: none;
    }
}
.zitat:hover {
    position: relative;
}

.zitat[data]:hover:after {
    white-space: pre;
    padding: 10px 12px;
    color: #8c1819;
    position: absolute;
    font-size: 18px;
    line-height: 1.1;
    font-style: italic;
    text-align: left;
    letter-spacing: normal;
    border: 2px solid #8c1819;
    border-radius: 6px ;
    background: rgba(235, 222, 206, 0.9);
    z-index: 100;
}

.note {
    position: absolute;
}
.note_1 {
    right: 6%;
}
.note_2, .note_4, .note_5 {
    left: 6%;
}
.note_3 {
    right: 6%;
    bottom: 30px;
}
.note_6, .note_7 {
    right: 6%;
    margin-top: -150px;
}
.zitat_1[data]:hover:after {
    right: 70px;
    content: 'Singen ist die eigentliche\A Muttersprache des Menschen.\A                (Sir Yehudi Menuhin)';
}
.zitat_2[data]:hover:after {
    left: 70px;
    content: 'Ich sah ganz klar, dass wir nicht in all\A unserem Tun virtuos sein müssen, um\A im Leben virtuos zu sein. Virtuosität\A im Leben bedeutet, aus vollem Herzen\A zu singen - nicht unbedingt gut zu singen.\A                      (Marianne Williamson aus:\A                           Ein Kurs in Wundern)';
}
.zitat_3[data]:hover:after {
    right: 70px;
    content: 'Ein kleines Lied! Wie geht’s nur an,\A Dass man so lieb es haben kann,\A Was liegt darin? Erzähle!\A Es liegt darin ein wenig Klang,\A Ein wenig Wohllaut und Gesang\A Und eine ganze Seele.\A          (Marie von Ebner-Eschenbach)   '
}
.zitat_4[data]:hover:after {
    left: 70px;
    content: 'Es sind nicht die Worte des Liedes,\A welche die Kraft des Gebetes\A ausmachen. Es ist die Art wie es\A gesungen wird, die des Lebens Ohr\A erreicht. Ein gutes Lied wächst\A und wächst mit dem Singen. \A             (Norman H. Russel, Cherokee)'
}
.zitat_5[data]:hover:after {
    left: 70px;
    content: 'Wir Menschen sind im Singen schöpfende\A und schöpferische Klangwesen. Wir vermögen\A durch Gesang unsere Welt und unser Handeln\A zu beseelen, singend Liebe, Freude, Hoffnung,\A Zuversicht zu schenken, uns aber auch den\A Schmerz von der Seele zu singen...\A                                   (Sir Yehudi Menuhin)'
}
.zitat_6[data]:hover:after {
    right: 70px;
    content: 'Singe, so lernst du singen.\A                         (Volksmund)'
}
.zitat_7[data]:hover:after {
    right: 70px;
    content: 'Einer kann reden und\A sieben können singen.\A                   (Volksmund)'
}

@media screen and (max-width: 420px) {
    .note img {
        height: 60px;
        width: auto;
    }
    .zitat_1[data]:hover:after, .zitat_3[data]:hover:after,
    .zitat_6[data]:hover:after, .zitat_7[data]:hover:after {
        right: -10px;
    }
    .zitat_2[data]:hover:after, .zitat_4[data]:hover:after,
    .zitat_5[data]:hover:after {
        left: -10px;
    }
}

.leiter {
    transform: skewY(3deg);
}

.leiter p {
    line-height: 1.3;
}

.leiter img {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media screen and (min-width: 992px) {
    .leiter img {
        float: left;

    }
    .leiter p {
        column-count: 2;
    }
}

@media screen and (min-width: 1400px) {
    .leiter p {
        column-count: 3;
    }
}

.title {
    text-align: center;
    letter-spacing: 4px;
    font-style: italic;
    font-size: 48px;
}

.title-line2 {
    text-align: center;
    margin-top: 5px;
    letter-spacing: 2px;
    font-style: italic;
    font-size: 24px;
    margin-bottom: 50px;
}

.article-img {
    width: 100%;
    margin: auto;
    border-radius: 15px;
}

#repertoire ul {
    list-style-type: circle;
}

#repertoire span {
    font-size: small;
    color: #6c757d;
}

#gallery .item-list .nav-tabs {
    border: none;
}

#gallery .item-list .nav-tabs .nav-link {
    color: #212529;
    background-color: transparent;
    border: none;
}

#gallery .item-list .nav-tabs .nav-link.active {
    color: #8c1819;
    background-color: transparent;
}

#gallery .tab-content {
    width: 100%;
}

#gallery .nav-tabs .break {
    flex-basis: 100%;
    height: 0;
}

footer {
    margin-top: 20px;
}

footer, footer a {
    background-color: #3b090b;
    color: whitesmoke;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    color: #5c636a;
}

footer hr {
    opacity: .75;
    width: 90%;
    margin: auto
}
/*   Chorfahrt Herbst 2022 (image gallery)   */

#fahrt-2022-2 a img {
    border-radius: 3px;
}

/*   Carousel slide  */

#fahrt-2022-1, #auftritt-lochwitz {
    max-width: 640px;
    margin: auto;
}
.carousel-item img {
    display: block;
    width: 100%;
}
.carousel-inner {
    border-radius: 6px;
    box-shadow: 10px 10px 5px #a2a0a0;
}

.carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    opacity: .8;
}
.carousel-indicators .active,
.carousel-indicators button:hover {
    background-color: #8c1819;
    opacity: 1;
}

/*   Videos   */
#videos .tab-pane {
    max-width: 260px;
    margin: 0 auto;
}
#videos figure {
    background-color: #d9d7d7;
    padding: 4px;
    border: 1px solid grey;
    border-radius: 2px;
}

#videos figure img {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

#videos a {
    font-family: "Helvetica Neue", serif;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
}

#videos figcaption {
    position: relative;
    padding: 6px;
    color: #8c1819;
    height: 85px;
}

#videos figcaption span {
    position: absolute;
    left: 6px;
    bottom: 6px;
}

.blueimp-gallery > .slides > .slide > .video-content  {
    max-height: 450px;
}