/*
Theme Name:  Twenty Twenty Five Kid
Theme URI:   https://stephangoldbach.de/twentytwentyfive-kid
Description: The Kiddle
Author:      Nils Pollom
Template:    twentytwentyfive
Version:     1.0.0
 */


/* Hamburger-Menü mobile colouring */

.wp-block-navigation__responsive-container-content {
    background-color: #1B6F39;  /* Hintergrund des Menüs */
    color: #ffffff;             /* Textfarbe der Links */
	}
}

.wp-block-navigation__responsive-container {
	background-color: #1B6F39;  /* Hintergrund des Menüs */
    color: #ffffff;             /* Textfarbe der Links */
}

/* -.- das Menüüüüü */
/* Overwrite Standart Header mit BG=Farbe Klasse in transparenten BG */

.wp-block-navigation__responsive-container-content {
	background-color: transparent !important;
}


/* geöffnetes HAMBURGERMENÜ mainbody */
@media (max-width: 599px){
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		background-color:#1B6F39 !important; /*grüne Farbe für den Background*/
		color: white !important; /*weiße Schrift */
	}
}
/* geöffnetes HAMBURGERMENÜ mainbody margins */
@media (max-width: 599px){
	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		background-color:#1B6F39 !important; /*grüne Farbe für den Background*/
	}
} 

/* Display Startpage als mobile oder desktop */

.cover-desktop {
  display: block;
}

.cover-mobile {
  display: none;
}

@media (max-width: 450px) {
  .cover-desktop {
    display: none !important;
  }
	.cover-tablet {
	display: none !important;
  }
  .cover-mobile {
    display: block;
  }
}

@media screen and (min-width: 451px) and (max-width: 1340px) {
	.cover-mobile {
		display: none !important;
	}
	.cover-desktop {
		display: none !important;
	}
	.cover-tablet {
		display: block;
	}
}

@media screen and (min-width: 1341px) {
	.cover-mobile {
		display: none !important;
	}
	.cover-tablet {
		display: none !important;
	}
	.cover-desktop {
		display: block;
	}
}



.music-section-responsive {
  position: relative;
  width: 100%;
  height: 415px;
/*  margin: 0px; */
  overflow: hidden;
}

/*Desktop view Music Section */
@media (min-width:1245px) {
	.music-section-responsive {
  position: relative;
  width: 100%;
  height: 415px;
/*  margin: 0px; */
  overflow: hidden;
	}
}

/*mobile view Music Section*/
@media (max-width: 450px) {
		.music-section-responsive {
  position: relative;
  width: 100%;
  height: 100%;
/*  margin: 0px; */
  overflow: hidden;
	}
}

/* Bandcamp embedd via Media Query mit dem padding-bottom Trick */

@media screen and (min-width:451px) {
.bandcamp-player-responsive {
	width: clamp(200px, 25vw, 400px);
	position: relative;
	padding-bottom: 100%;
	height: 0;
	}
}

@media screen and (min-width:451px) {
.bandcamp-player-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
	}
}

/* Bandcamp mobile fix sizing */

@media screen and (max-width:450px) {
	.bandcamp-player-responsive iframe {
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  border: 0;
	}
}

/* Section transition parallax' "Section backgrounds" Plugin problem: Overwriting the dynamic CSS (!) from render.php */
/* The plugin creates a new #evbBackground-* iterative, so its evbBackground-2; 3; 4 ... */

@media (max-width: 960px) {
  #evbBackground-2 {
    /* Meine gewünschten Werte */
    padding: 0 !important;
  }
  #evbBackground-2 .backgroundContent {
    padding: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 960px) {
  #evbBackground-3 {
    /* Meine gewünschten Werte */
    padding: 0 !important;
  }
  #evbBackground-3 .backgroundContent {
    padding: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 960px) {
  #evbBackground-4 {
    /* Meine gewünschten Werte */
    padding: 0 !important;
  }
  #evbBackground-4 .backgroundContent {
    padding: 0 !important;
    max-width: none !important;
  }
}

/* Section titles verschieben bei Desktop & mobile view getrennt */

@media screen and (min-width: 960px) {
  .section-titles {
  margin-top: -220px !important;
  }
}

@media screen and (max-width: 450px) {
  .videos {
  margin-top: -50px !important;
  }
}


/* Z > 0 means: ES KOMMT DIREKT AUF UNS ZU !!!! */
.ztransplus {
	position: relative;
	z-index: 4;
}

.calender-typeset {
	color: white
}