* {
    cursor: url(../img/mic.cursor.png), auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
}

/* ---------------------------------------- NAVIGATION ---------------------------------------- */

.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF;
    width: 100%;
    height: 130px;
    padding-right: 100px;
}

.logo{
    margin-top: 50px;
    width: 400px;
}

@media screen and (max-width: 600px) {
    .svg-logo{
        display: none;
    }
    .burger-nav{
        margin-top: 120px;
    }
    .toggle-button{
        margin-top: 20px;
        margin-right: 20px;
    }
}

.png-logo img{
    position: absolute; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
}

@media screen and (min-width: 601px) {
    .png-logo{
        display: none;
    }
    .toggle-button{
        margin-top: 40px;
        margin-right: 50px;
    }
}

.instagram:hover{
    fill: #006e8e;
}
  
.instagram-bg:hover + .instagram{
    fill: #006e8e;
}

.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: #ea5658;
    font-size: 24px;
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
    padding: 3rem;
}

.navbar-links li a:hover {
    text-decoration: none;
    color: #006e8e;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: #ea5658;
    border-radius: 10px;
}

@media (max-width: 1570px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links ul li {
        text-align: center;
    }

    .navbar-links ul li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }

    .navbar-links.active .burger-nav{
        margin-left: auto; 
        margin-right: -50px;
        background-color: white;
        position: absolute;
        width: 100vw;
        border-bottom: solid #006e8e 4px;
    }
}

/* ---------------------------------------- CONTENT ---------------------------------------- */

h1, h2, th{
    font-weight: 500;
    font-style: normal;
}

.content{
    display: flex;
}
  
.text{
    flex: 2;
    order: 2;
    flex-grow: 2;
}

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

.textfeld{
    padding-top: 40px;
    display: inline-block;
    text-align: left;
    color: #006e8e;
}

.textfeld a{
    color: #ea5658;
    text-decoration: none;
}

.textfeld a:hover{
    text-decoration: underline;
}

.textfeld a:visited{
    color: #ea5658;
}
 
.text h1{
    font-size: 36px;
    font-weight: bold;
    margin-top: 24px;
    margin-bottom: 15px;
    color: #006e8e;
    font-family: futura-pt, sans-serif;
}
  
.text p{
    font-size: 22px;
    font-weight: medium;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: futura-pt, sans-serif;
}

.links{
    display: none;
}

.links a{
    color: #006e8e;
    text-decoration: none;
}

.links a:hover{
    color: #ea5658;
}

/* ---------------------------------------- CONTENT PAGES ---------------------------------------- */

.video{
    flex: 2;
    order: 2;
    flex-grow: 2;
}

.video h1{
    text-align: center;
    color: #e95858;
    padding-top: 35px;
}

.video iframe{
    display: block;
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    border: 6px solid;
    border-top-color: #e95858;
    border-left-color: #e95858;
    border-right-color: #fbba1c;
    border-bottom-color: #fbba1c;
}

.credits{
    margin-left: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    max-width: 1100px;
}

.credits tr{
    text-align: left;
}

.credits td{
    font-size: 24px;
    text-align: left;
    color: #006f8e;
    padding-right: 50px;
}

.credits th{
    padding-top: 20px;
    font-size: 28px;
    color: #e95858;
}

.credits a{
    text-decoration: none;
    color: #006f8e;
}
.credits td a:hover{
    color: #e95858;
}
.credits a:visited{
    color: #006f8e;
}

/*hide the inputs/checkmarks and submenu*/
.lyrics input, ul.submenu{
    display: none;
}

.lyrics{
    max-width: 1100px;
    margin: auto;
    margin-left: 50px;
    margin-bottom: 30px;
}
  
/*position the label*/
.lyrics label{
    position: relative;
    display: block;
    cursor: pointer;
    font-size: 20px;
    color: #006f8e;
}

.lyrics label h2:hover{
    color: #e95858;
}

/*show the submenu when input is checked*/
.lyrics input:checked~ul.submenu{
    display: block;
}

.lyrics h3{
    color: #e95858;
    font-size: 25px;
    padding: 20px;
    padding-left: 0px;
}

.lyrics p{
    color: #006f8e;
    font-size: 20px;
}

/* ---------------------------------------- GALLERY ---------------------------------------- */

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 33%;
    max-width: 33%;
    padding: 0 8px;
}

.column img {
    margin-top: 16px;
    vertical-align: middle;
    width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------- BACKGROUND ---------------------------------------- */

.left_yellow2{
    fill: #fbba1c;
    animation: lyel2 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes lyel2{
    from {transform: rotateZ(-1deg);}
    to{transform: rotateZ(1deg);}
}
.left_blue1{
    fill: #006f8e;
    animation: lblu1 2s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes lblu1{
    from {transform: rotateZ(1deg);}
    to{transform: rotateZ(-1deg);}
}
.left_red1{
    fill: #e95858;
    animation: lre1 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes lre1{
    from {transform: rotateZ(-1deg);}
    to{transform: rotateZ(1deg);}
}
.left_yellow1{
    fill: #fbba1c;
    animation: lyel1 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes lyel1{
    from {transform: rotateZ(1deg);}
    to{transform: rotateZ(-2deg);}
}
.left_blue2{
    fill: #006f8e;
    animation: lblu2 2s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes lblu2{
    from {transform: rotateZ(-2deg);}
    to{transform: rotateZ(1deg);}
}
.left_red2{
    fill: #e95858;
    animation: lre2 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes lre2{
    from {transform: rotateZ(1deg);}
    to{transform: rotateZ(-1deg);}
}

.right_blue1{
    fill: #006f8e;
    animation: rblu1 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes rblu1{
    from {transform: rotateZ(1deg);}
    to{transform: rotateZ(-1deg);}
}
.right_yellow1{
    fill: #fbba1c;
    animation: ryel1 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes ryel1{
    from {transform: rotateZ(-1deg);}
    to{transform: rotateZ(2deg);}
}

.right_red1{
    fill: #e95858;
    animation: rre1 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes rre1{
    from {transform: rotateZ(0deg);}
    to{transform: rotateZ(-1.5deg);}
}
.right_red2{
    fill: #e95858;
    animation: rre2 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes rre2{
    from {transform: rotateZ(0deg);}
    to{transform: rotateZ(1.5deg);}
}
.right_blue2{
    fill: #006f8e;
    animation: rblu2 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes rblu2{
    from {transform: rotateZ(-1deg);}
    to{transform: rotateZ(1deg);}
}
.right_yellow2{
    fill: #fbba1c;
    animation: ryel2 1.5s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes ryel2{
    from {transform: rotateZ(1deg);}
    to{transform: rotateZ(-1deg);}
}

.bg-left{
    flex: 1;
    order: 1;
    flex-grow: 1;
}
#bg-left{
    float: left;
    height: 90vh;
    margin-left: -30px;
}

.bg-left_long{
    flex: 1;
    order: 1;
    flex-grow: 1;
}
#bg-left_long{
    float: left;
    height: 180vh;
    margin-left: -30px;
}

.bg-right{
    flex: 1;
    order: 3;
    flex-grow: 1;
}
#bg-right{
    float: right;
    height: 90vh;
    margin-right: -20px;
}

.bg-right_long{
    flex: 1;
    order: 3;
    flex-grow: 1;
}
#bg-right_long{
    float: right;
    height: 180vh;
    margin-right: -40px;
}

/* ---------------------------------------- PRESSE ---------------------------------------- */

.presse{
    flex: 2;
    order: 2;
    flex-grow: 2;
}

@media screen and (min-width: 1201px) {
    .presse .column{
        flex: 50%;
        max-width: 50%;
        padding: 0 10px;
    }
}

@media screen and (max-width: 1200px) {
    .presse .column {
        flex: 100%;
        max-width: 100%;
        padding: 0 10px;
        max-width: 800px;
        align-items: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.presse .column img{
    margin-top: 30px;
    vertical-align: middle;
    width: 100%;
}

.presse h1{
    text-align: center;
    color: #e95858;
    padding-top: min(35px, 40px);
}

.presse a{
    text-decoration: none;
    color: #006f8e;
    font-size: 20px;
}

.presse a:visited{
    color: #006f8e;
}

.presse a:hover{
    color: #e95858;
}

.presse-artikel{
    margin-top: 50px;
}

/* ------------------------------------- PARTNERINNEN ------------------------------------- */



.partners{
    flex: 2;
    order: 2;
    flex-grow: 2;
}

.partners h1{
    text-align: center;
    color: #e95858;
    padding-top: 35px;
    padding-bottom: 60px;
}

.partners table{
    margin: auto;
    color: #006f8e;
}

.partners table td{
    padding: 10px;
}

.partners table img{
    width: 300px;
}

.sponsors{
    padding-top: 100px;
}

.sponsors table{
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.partners-phone{
    text-align: center;
    margin: auto;
}

.partners-phone img{
    width: 300px;
}

.partners-phone h1{
    text-align: center;
    color: #e95858;
    padding-top: 35px;
    padding-bottom: 10px;
}

.partners-phone h2{
    padding-top: 10px;
}

.partners-phone h3{
    padding-bottom: 40px;
}

.partners-phone table{
    margin: auto;
    margin-top: 50px;
    color: #006f8e;
}

.partners-phone .sponsors-phone img{
    padding: 10px;
}

.partners a, .partners-phone a{
    text-decoration: none;
    color: #006f8e;
}

.partners a:hover h2, .partners-phone a:hover h2{
    color: #e95858;
}

#d-zentral_bild {width:200px;}
#MusikZentrum_bild img{width: 200px;}
#NeuStartKultur_bild img{width: 200px;}
#FondsSoziokultur_bild img{width: 200px;}
#BundesregierungMundK_bild img{width: 200px;}

#MWK_bild img{width: 200px;}
#SparkasseHannover_bild img{width: 200px;}
#KulturregionHannover_bild img{width: 200px;}
#BuergerstiftungHannover_bild img{width: 200px;}
#BuergerstiftungIsernhagen_bild img{width: 200px;}

/* ---------------------------------------- DATENSCHUTZ ---------------------------------------- */

.datenschutz{
    flex: 2;
    order: 2;
    flex-grow: 2;
    margin: 5vh auto;
    margin-top: 0;
    color: #006f8e;
    max-width: 1200px;
    padding: 0px 50px;
}

.datenschutz h1{
    text-align: center;
    color: #e95858;
    padding-top: 35px;
    padding-bottom: 50px;
}

.datenschutz p{
    margin-top: 10px;
    margin-bottom: 20px;
}

.datenschutz p strong{
    padding-bottom: 10px;
}

.datenschutz ul li{
    margin-left: 30px;
}

/* ---------------------------------------- IMPRESSUM ---------------------------------------- */

.impressum{
    flex: 2;
    order: 2;
    flex-grow: 2;
    margin: 5vh;
    margin-top: 0;
    color: #006f8e;
}

.impressum h1{
    text-align: center;
    color: #e95858;
    padding-top: 35px;
    padding-bottom: 50px;
}

.impressum p{
    margin-top: 10px;
    margin-bottom: 10px;
}

.impressum p strong{
    padding-bottom: 10px;
}

/* ---------------------------------------- KARTE ---------------------------------------- */

.karte_wrap{
    text-align: center;
}
.karte_wrap2{
    text-align: center;
}

#karte path:hover:not(#lehrte, #burgdorf, #uetze, #wennigsen){
    fill: #006f8e;
}

#karte2 path:hover:not(#lehrte, #burgdorf, #uetze, #wennigsen){
    fill: #006f8e;
}

#lehrte, #burgdorf, #uetze, #wennigsen{
    fill: #e95858;
}

/*
barsinghausen 
burgdorf 
burgwedel 
garbsen 
gehrden 
hannover
hemmingen 
isernhagen 
laatzen 
langenhagen 
neustadt 
nordstemmen 
pattensen 
ronnenberg 
seelze 
sehnde 
springe 
uetze
wedemark 
wennigsen 
wunstorf

(lehrte)
*/  

#location{
    text-align: center;
    color: #e95858;
}
#location2{
    text-align: center;
    color: #e95858;
}
#location-phone{
    text-align: center;
    color: #e95858;
}

/* --------------------------------------- AUSWAHL --------------------------------------- */

.auswahl{
    flex: 2;
    order: 2;
    flex-grow: 2;
}

.auswahl table{
    margin: auto;
    margin-top: 80px;
}

.auswahl table td{
    padding: 10px;
}

.auswahl table td a{
    text-decoration: none;
    color: #006e8e;
    font-size: 24px;
}

.auswahl table td a:hover{
    text-decoration: none;
    color: #ea5658;
}

/* --------------------------------------- RESPONSIVE --------------------------------------- */

@media screen and (max-width: 1830px) {
    .bg-left, .bg-left_long, .bg-right, .bg-right_long{
        display: none;
    }
}
@media screen and (min-width: 1426px) {
    .textfeld{
        width: 1200px;
    }
    .stadt-liste{
        display: none;
    }
    #location-phone{
        display: none;
    }
    #location2{
        display: none;
    }
    .karte_wrap2{
        display: none;
    }
}

@media screen and (max-width: 1425px) {
    .karte_wrap{
        display: none;
    }
    .karte_wrap2{
        margin-top: 30px;
    }
    .textfeld{
        max-width: 1000px;
        margin-left: 30px;
        margin-right: 30px;
    }
    #location-phone{
        display: none;
    }
    #location{
        display: none;
    }
    .stadt-liste{
        display: none;
    }
}

@media screen and (max-width: 1070px) {
    .karte_wrap2{
        display: none;
    }
    #location2{
        display: none;
    }
    #location-phone{
        display: block;
        margin-top: 80px;
    }
    .stadt-liste{
        display: block;
        margin-top: 20px;
    }
    .stadt-liste ul{
        list-style: none;
        text-align: center;
    }
    .stadt-liste ul li a{
        text-decoration: none;
        color: #006f8e;
        font-size: 24px;
        font-weight: medium;
    }
    .stadt-liste ul li a:visited{
        color: #006f8e;
    }
    .stadt-liste ul li a:hover{
        color: #e95858;
    }
    .video iframe{
        width: 640px;
        height: 360px;
    }
    .partners{
        display: none;
    }
}

@media screen and (min-width: 1071px) {
    .video iframe{
        width: 854px;
        height: 480px;
    }
    .partners-phone{
        display: none
    }
}

@media screen and (max-width: 650px) {
    .video iframe{
        width: 426px;
        height: 240px;
    }
}