@charset "utf-8";
/* CSS Document */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 1rem;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b, strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code, kbd, samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button, input, optgroup, select, textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button, input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button, select { /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"], [type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */ ::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
body {
  max-width: 960px;
  margin: auto;
  font-size: 100%;
  color: #AAA695;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  background-image: url("img/nachthimmel.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
/*mobiles Menü small Screen mit CSS ANFANG*/
.headertest {
  background-color: rgba(26, 28, 35, 0.50);
  width: inherit;
  margin: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  float: left;
}
.headertest ul {
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
}
#steuerung li {
  list-style: none;
  float: left;
}
#steuerung a {
  display: block;
  /*height: 100%;*/
  width: 100%;
  padding: 0.5em;
  text-decoration: none;
  color: #C5B358;
  background-color: rgba(26, 28, 35, 0.50);
}
.menue-button {
  display: none;
}
#steuerung {
  float: left;
  width: 100%;
}
#steuerung a:hover {
  color: #AAA695;
  background: rgba(26, 28, 35, 0.50);
}
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
  display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
  display: none;
}
/*nav nav ul a {
    color: white; }
*/
/* nav ul {
    
    display: flex;
	margin: 0 0 0 0;
	flex-flow: row;
	flex-wrap: wrap;
    height: 0;
    list-style-type: none;
    opacity: 0;
    text-align: center;
    transition: all 1s ease;
    width: 70%;
    visibility: hidden; 
}

  
  nav li {
	  	  background-color: rgba(26,28,35,0.50);
	    margin: 0 0.2em 0 0;
      color:#C5B358;
    display:block;
    font-size: 2rem thick;
	  padding: 0.3em 0.3em; }

nav li a {
	text-decoration: none;
	color: #D8D5D5;
	}

  
  nav #menu-toggle:checked ~ ul {
	opacity: 1;
    height: auto;
    visibility: visible;}

nav input#menu-toggle {
	display: none;
}

  
 nav .label-toggle {
    background: linear-gradient(to bottom, #C5B358 0%, #C5B358 20%, transparent 20%, transparent 40%, #C5B358 40%, #C5B358 60%, transparent 60%, transparent 80%, #C5B358 80%, #C5B358 100%);
    cursor: pointer;
    display: block;
	 border-radius: 2px;
    float: left;
    height: 1em;
    margin-top: 1em;
	 margin-left: 2em;
    width: 1.2em; }

  
 nav .navwrapper {
    display: block; 
	 width: 95%;
}*/
/*mobile menü ENDe*/
.container-main {
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  width: 95%;
  margin: auto;
  padding-top: 1em;
  justify-content: center;
}
.container-header {
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  width: 95%;
  margin: auto;
  margin-top: -1.5em;
  justify-content: flex-start;
  padding: 1em 0 0 0;
}
.container-headerartist {
  width: 95%;
  display: flex;
  flex-flow: row;
  margin: auto;
  justify-content: space-between;
  align-content: space-between;
}
.container-artist {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0em;
  margin-bottom: 2em;
  justify-content: space-between;
  /*align-content: center;*/
  align-items: stretch;
}
.nonreverse {
  flex-direction: row;
}
.reverse {
  flex-direction: row-reverse;
}
.container-text-letter {
  display: flex;
  width: 100%;
  flex-flow: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1 1 60%;
  margin: 0;
}
.h1box {
  flex: 1 1 0;
  width: 80%;
  text-align: center;
  margin: auto;
  align-self: center;
}
.h1box p {
  margin: auto;
  width: 95%;
}
header {
  background: rgba(26, 28, 35, 0.50);
  margin: 0 1em;
  padding: 1em 0;
  border-radius: 5px;
}
.headercanvas {
  width: 95%;
  margin: auto;
  max-height: 2em;
  /*max-width: 30em;*/
  background-image: url(img/uraschneu@800.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 1 1 auto;
  border-radius: 10px;
}
.headerhandletter {
  max-width: 30%;
  margin-top: 1em;
  /*max-height: 5em;*/
  align-self: flex-start;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 1 1 auto;
}
.handletterbox {
  width: 100%;
  max-height: 10em;
  align-self: flex-start;
  margin: 0;
  padding: 0 0 0 1em;
  flex: 1 1 100%;
}
.handlettercanvas {
  width: 30%;
  max-height: 10em;
  margin: auto;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  align-self: flex-start;
  flex: 1 1 90%;
}
#handsupremes {
  background-image: url(img/supremes@800.png);
}
#headersupremes {
  background-image: url(img/supremes_@800.png);
}
#handtemptations {
  background-image: url(img/temptations@800.png);
}
#headertemptations {
  background-image: url(img/temptations_@800.png);
}
#handrobertoalagna {
  background-image: url(img/roberto_alagna@800.png);
}
#headerrobertoalagna {
  background-image: url(img/roberto_alagna_@800.png);
}
#handjilaigrot {
  background-image: url(img/jil-Aigrot@800.png);
}
#headerjillagrot {
  background-image: url(img/jil-Aigrot_@800.png);
}
#handshakatak {
  background-image: url(img/shakatak@800.png);
}
#headershakatak {
  background-image: url(img/shakatak_@800.png);
}
#handgloriagaynor {
  background-image: url(img/gloria_gaynor@800.png);
}
#headergloriagaynor {
  background-image: url(img/gloria_gaynor_@800.png);
}
#handkidcreole {
  background-image: url(img/kid_creole@800.png);
}
#headerkidcreole {
  background-image: url(img/kid_creole_@800.png);
}
#handvsop {
  background-image: url(img/vsop@800.png);
}
#headervsop {
  background-image: url(img/vsop_@800.png);
}
#handdeo {
  background-image: url(img/deo@800.png);
}
#headerdeo {
  background-image: url(img/deo_@800.png);
}
#handfischerz {
  background-image: url(img/fischer_z@800.png);
}
#headerfischerz {
  background-image: url(img/fischer_z_@800.png);
}
#handgipsygold {
  background-image: url(img/gipsy_gold@800.png);
}
#headergipsygold {
  background-image: url(img/gipsy_gold_@800.png);
}
#headeramelzen {
  background-image: url(img/amelzen_.png);
}
#handamelzen {
  background-image: url(img/amelzen.png);
}
#picture {
  background-image: url(img/pictures.png);
}
#video {
  background-image: url(img/videos.png);
}
#news {
  background-image: url(img/news.png);
}
#news {
  background-image: url(img/news.png);
}
#bio {
  background-image: url("img/uraschneu@800.png")
}
.imgbox {
  width: 100%;
  justify-content: center;
  align-content: center;
  flex: 1 1 40%;
  margin: 0;
}
.thumbbox {
  width: 95%;
  margin: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.textboxindex {
  width: 90%;
  flex: 1 1 55%;
  padding: 0em 1em 1em 1em;
  min-width: 0;
}
.textboxintro {
  display: flex;
  padding: 0em 1em 1em 1em;
  width: 90%;
  flex-flow: column;
  flex-wrap: nowrap;
  flex: 1 1 60%;
}
.textboxintro p {}
.img-li {
  font-size: 1rem;
  list-style-type: none;
}
.libox {
  max-width: 50%;
  text-align: right;
  align-self: center;
}
.libox .h3 {
  text-align: right;
  margin-right: 1em;
  font-size: 1rem;
  color: #D8D5D5;
  letter-spacing: 10px;
}
.footerbox {
  display: flex;
  width: 95%;
  margin: 1em;
  padding: 1em;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  background: rgba(26, 28, 35, 0.50);
  border-radius: 10px;
}
.footertextbox {
  width: 25%;
}
.footertextbox a {
  font-size: 1rem;
  list-style: none;
}
#footernocolumn {
  flex: 1 1 100%;
  flex-flow: column;
}
.imgbordercanvas {
  width: 90%;
  margin: 0 3em 0 0;
  border: 1px solid #5A5597;
  border-width: 0.2em;
  border-image: url(img/goldborder@400.png) 49 stretch;
  background-size: 98%;
  background-position: center;
  background-origin: border-box;
  background-repeat: no-repeat;
}
.fb {
  width: 90%;
  align-self: center;
}
.galerie li {
  width: 10em;
  display: inline-block;
  list-style-type: none;
}
button {
  background: rgba(26, 28, 35, 0.50);
  border-radius: 10px;
  border: 0.2em solid rgba(26, 28, 35, 0.50);
}
button:focus, button:hover {
  border-width: 0.2em;
  border-image: url(img/goldborder@400.png) 49 stretch;
}
.container-artist.picvid {
  background: rgba(26, 28, 35, 0.50);
  padding: 1em;
  border-radius: 10px;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
.vidpic {
  width: 25%;
  max-height: 100px;
  /*margin: auto;*/
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  align-self: flex-start;
  flex: 1 1 25%;
}
.videobox {
  width: 75%;
}
.picbox {
  width: 75%;
}
#imgsb01 {
  background-image: url("img/Supremes_sb.png");
}
#imgsb02 {
  background-image: url("img/brown_SB.png");
}
#imgsb03 {
  background-image: url("img/chaka+cwu5.png");
}
#imgsb04 {
  background-image: url("img/GIRLS_sb.png");
}
#imgsb05 {
  background-image: url("img/glo_sb.png");
}
#imgsb06 {
  background-image: url("img/james_brown_sb.png");
}
#imgBIOthumb1 {
  background-image: url("img/bio/urasch.jpg");
}
#imgBIOthumb2 {
  background-image: url("img/bio/urasch2.jpg");
}
#imgxxx {
  background-image: url(img/browncwupress.jpg);
}
#imgxxxx {
  background-image: url(img/chakacwu.jpg);
}
#imgDEOthumb1 {
  background-image: url(img/DEO/DEO_group_concert_color_front_thumb.jpg);
}
#imgDEOthumb2 {
  background-image: url(img/DEO/DEO_duke_ellington_concert_color_thumb.jpg);
}
#imgDEOthumb3 {
  background-image: url(img/DEO/DEO_mercer_ellington_trompete_train_thumb.jpg);
}
#imgGGAthumb1 {
  background-image: url(img/GGa/GGA_1.jpg)
}
#imgGGAthumb2 {
  background-image: url("img/GGa/gloria_grammy.png")
}
#imgGGAthumb3 {
  background-image: url(img/GGa/GGA_albumcovers.jpg)
}
#imgGGAthumb4 {
  background-image: url("img/GGa/GGA_2.jpg")
}
#imgRAthumb1 {
  background-image: url(img/RA/RA_in_concert_thumb.jpg)
}
#imgRAthumb2 {
  background-image: url(img/RA/RA_profil_thumb.jpg)
}
#imgRAthumb3 {
  background-image: url(img/RA/RA_in_concert_sing.png)
}
#imgJAthumb1 {
  background-image: url(img/JA/JA_profile.jpg)
}
#imgJAthumb2 {
  background-image: url(img/JA/JA_in_concert_blue.jpg)
}
#imgJAthumb3 {
  background-image: url(img/JA//JA_in_concert.jpg)
}
#imgFZthumb1 {
  background-image: url(img/FZ/FZ_augenpartie.jpg)
}
#imgFZthumb2 {
  background-image: url(img/FZ/FZ_inconcert.jpg)
}
#imgFZthumb3 {
  background-image: url(img/FZ/FZ_weiss.jpg)
}
#imgSTthumb1 {
  background-image: url(img/ST/ST_supremes_schwarze_kleider.jpg)
}
#imgSTthumb2 {
  background-image: url(img/ST/ST_farbige_kleider.jpg)
}
#imgSTthumb3 {
  background-image: url(img/ST/ST_supremes_blaue_kleider.jpg)
}
#imgSTthumb4 {
  background-image: url("img/ST/ST_braune_kleider.jpg")
}
#imgSTthumb5 {
  background-image: url("img/ST/ST_rosa.jpg")
}
#imgSTthumb6 {
  background-image: url("img/ST/ST_plakat.jpg")
}
#imgGGOthumb1 {
  background-image: url(img/GGo/GGo_mit_gitarre.png)
}
#imgGGOthumb2 {
  background-image: url(img/GGo/GGo_logo_gitarre.jpg)
}
#imgGGOthumb3 {
  background-image: url(img/GGo/GGo_mit_gitarre2.png)
}
#imgVSOPthumb1 {
  background-image: url(img/VSOP/VSOP_artists.jpg)
}
#imgVSOPthumb2 {
  background-image: url(img/VSOP/VSOP_album_best_of.jpg)
}
#imgVSOPthumb3 {
  background-image: url(img/VSOP/VSOP_love_album.jpg)
}
#imgSHthumb1 {
  background-image: url(img/SH/SH_shakatak.jpg)
}
#imgSHthumb2 {
  background-image: url(img/SH/SH_band.jpg)
}
#imgKCCthumb1 {
  background-image: url(img/KCC/KCC_inconcert.jpg)
}
#imgKCCthumb2 {
  background-image: url(img/KCC/KCC_album.jpg)
}
#imgAZthumb1 {
  background-image: url(img/AZ/amelzen.png)
}
#imgAZthumb2 {
  background-image: url(img/AZ/amel_zen_2.jpg)
}
h1 {
  font-size: rem;
  font-style: normal;
  color: #D8D5D5;
  /*text-shadow: 0.8px 0.8px 1px #C5B358;*/
  align-self: center;
  flex: 1 1 0;
  margin: 0;
}
h2 {
  color: #C5B358;
}
h3 {
  font-size: 1em;
  margin-top: 0;
  color: #C5B358;
  /*text-shadow: 0.5px 0.5px 1px #C5B358;*/
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
}
a {
  text-decoration: none;
  color: #D4C683;
}
p {
  font-size: 1em;
  margin: 0;
}
/*Mobile Media*/
@media all and (max-width:30em) {
  body {
    max-width: 100%;
    margin: 0.5em;
    font-size: 5vw;
  }
  .menue-button {
    display: block;
  }
  .menue-button {
    background-color: #C5B358;
    max-width: 2em;
    display: block;
    position: fixed;
    right: 0;
    top: 0.1em;
    padding: 0.2em 0 0.2em 0.2em;
    color: rgba(26, 28, 35, 0.50);
    cursor: pointer;
    text-decoration: none;
  }
  #steuerung {
    float: left;
    width: 100%;
    display: none;
  }
  #steuerung li {
    width: 100%;
    border-bottom: 0.05em solid #C5B358;
  }
  .menue-button:hover {
    color: rgba(26, 28, 35, 0.50);
    background: #AAA695;
  }
  /*nav ul {
	display:block;
	flex-flow: none;
	 width: 90%;
	}
	
nav li {
	background-color: rgba(26,28,35,0.50);
	margin: 0 0 0.1em 0;
	padding: 0.5em 0.1em;
	}*/
  .container-main {
    display: block;
    width: 100%;
    margin: 0;
  }
  .container-artist {
    display: block;
    width: 100%;
    margin: 0;
    margin-top: 4em;
  }
  .container-headerletter {
    max-width: 100%;
  }
  .container-headerartist {
    display: block;
  }
  .textboxindex {
    margin: 0;
  }
  .textboxintro {
    margin: 0;
  }
  .headerhandletter {
    max-width: 60%;
    width: 60%;
    margin: 2em;
  }
  .container-text-letter {
    display: block;
    flex-flow: none;
    flex-wrap: none;
    width: 100%;
    margin: 0;
  }
  .handletterbox {
    display: block;
    width: 100%;
    padding: 0;
  }
  .handlettercanvas {
    display: block;
    width: 100%;
  }
  .galerie ul, li {
    margin: 0.1em;
    padding: 0.1em;
  }
  .galerie li {
    display: inline-block;
    list-style-type: none;
    width: 45%;
  }
  .galerie img {
    padding: 0;
    margin: 0;
    width: 100%;
    /* Bild passt sich an verfügbaren Raum im li an */
  }
  button {
    padding: 0.1em;
  }
  .vidpic {
    max-width: 60%;
    width: 60%;
    margin: 2em;
  }
  .videobox, .picbox {
    margin: 0 0 0 1em;
  }
  .fb {
    width: 100%;
    margin: 0;
  }
  .imgbox {
    display: block;
    width: 90%;
    margin: auto;
  }
  .textbox {
    display: block;
    width: 100%;
    margin: auto;
    padding: 0.3em;
  }
  .textboxartist {
    width: 90%;
    column-count: 1 !important;
  }
  .libox {
    display: block;
    margin: auto;
  }
  .thumbbox {
    display: block;
    width: 90%;
  }
  .footerbox {
    display: block;
    padding: 0;
    width: 100%;
  }
  .footertextbox {
    margin: 1em 0;
    width: 100%;
  }
  .footertextbox a {
    font-size: 5vw;
  }
}