/* FIXED CSS */

/*HEADER   910 stavi do prostred-zkontrolovat*/  
#header {
  width: 910px;
  margin:0 auto;
  text-align: center;
  z-index= 0;
}

/*BODY   hlavni text prubezne*/  
body {
    color: 000000;
    font-family: "Century Gothic", Arial, sans-serif;
    font-size : 15
}
.mydiv {
  width:100%;
  height:100%;
  color:black;
  animation: myanimation 50s infinite;
}
@keyframes myanimation {
  0% {background-color:#aaaaaa;}
  10%{background-color:#999999;}
  20%{background-color:#888888;}
  30%{background-color:#777777;}
  40%{background-color:#666666;}
  50%{background-color:#777777;}
  60%{background-color:#888888;}
  70%{background-color:#999999;}
  80%{background-color:#aaaaaa;}
  90%{background-color:#ffffff;}
100% {background-color:#aaaaaa;}
}


/*LINKS*/  
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
a:hover,
a:active {
  text-decoration: none;
  color: #f00;
  border-bottom: 0px solid #f00;
}
a:hover::after {
  content: attr(title);
  color: blue;
  position: absolute;
  top: 3ex;
  left: -.5ch;
  border-bottom: 0 none transparent;
}
a[name]:hover::after {
  content: attr(href);
  background: black;
  color: cyan;
  border-bottom: 2px solid #f00;
}
a[target]:hover::after {
  content: attr(target);
  left: -1.5ch;
  background: red;
  color: white;
  border-bottom: 0 none transparent;
}
a[data-node]:hover::after {
  content: attr(data-node);
  left: -4ch;
  border-bottom: 0 none transparent;
  background: black;
  color: gold;
}
a[data-anything]:hover::after {
  content: attr(data-anything);
  left: 0;
  border-bottom: 0 none transparent;
  color: purple;
  width: 8ch;
  border-bottom: 3px solid #f00;
}

#red_text {
  color : ff5555;
}
#black_text {
  color : 000000;
}
#musicians {
  color : 000000;
    font-size : 17;
    font-weight : bold
}
#musicians2 {
  color : 000;
    font-size : 12;
    
}

/*ROTATE IMAGE*/  
.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/*TEXT GALERY*/  
.awesome2_a {
      width:100%;
      margin: 0 auto;
      text-align: center;
      color:#313131;
      position: relative;
      -webkit-animation:colorchange 20s infinite alternate;
    }   

@-webkit-keyframes colorchange {
      0% {

        color: blue;
      }

      10% {

        color: #8e44ad;
      }

      20% {

        color: #1abc9c;
      }

      30% {

        color: #d35400;
      }

      40% {

        color: blue;
      }

      50% {

        color: #34495e;
      }

      60% {

        color: blue;
      }

      70% {

        color: #2980b9;
      }
      80% {

        color: #f1c40f;
      }

      90% {

        color: #2980b9;
      }

      100% {

        color: pink;
      }
    }
 
 /*TEXT GALLERY NAME*/
 .awesome2 {
       width:100%;
       margin: 0 auto;
       text-align: center;
       color:#000000;
 
       position: relative;
    }
    
/*TEXT GUITAR*/    
#body_underline_guitar {
    color: 000000;
    font-family: "Century Gothic", Arial, sans-serif;
    font-size : 25;
    font-weight : bold
}    

/*SUMMARY - DETAILS*/
details summary::-webkit-details-marker {
  display:none;
}
summary_footer p {
  display: inline;
}

#harenda {
   	font-family: "Century Gothic", Arial, sans-serif;
    	background: transparent;
	border:none;
	height:70px;
	width:400;
	overflow:hidden    
}

/*PLAYER*/
#top_player_container {
    position:fixed;
    top: 10%;
    left: 85%;
    width:90em;
    height:40em;
    margin-top: -10em; /*set to a negative number 1/2 of your height*/
    margin-left: -30em; /*set to a negative number 1/2 of your width*/
    border: 0px solid transparent;
    background-color: transparent;
    font-size:5px;
}
#top_player_container_2 {
    position:fixed;
    top: 10%;
    left: 85%;
    width:90em;
    height:70em;
    margin-top: -10em; /*set to a negative number 1/2 of your height*/
    margin-left: -30em; /*set to a negative number 1/2 of your width*/
    border: 0px solid transparent;
    background-color: transparent;
    font-size:5px;
}
#top_player_container_controlls {
    position:fixed;
    top: 95%;
    left: 95%;
    width:20em;
    height:20em;
    margin-top: -10em; /*set to a negative number 1/2 of your height*/
    margin-left: -10em; /*set to a negative number 1/2 of your width*/
    border: 0px solid transparent;
    background-color: transparent;
    font-size:5px;
}
audio{
 width: 400px;
 border-radius: 0px;
}

#audio_with_controls {
background-color: rgba(0, 0, 0, 0) !important; 
background-image: none !important;
}

#cas_player{
	width: 93%;
	height: 125px;
	top: 40px;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	text-align: center;
	padding: 15px 3%;
	box-sizing: border-box;
	box-shadow: 0 0 21px 0px rgba(0,0,0,0.3);
	border-radius: 0px;
}

#bereich_player_outer {
    background-color: #dddddd;
    /*background-image: url("backgrounds/notes.jpg");*/
    width: 88%;
	box-shadow: 0 0 35px 0px rgba(0,0,0,0.9);
	padding : 20px
}
#bereich_player_inner {
    background-color: #dddddd;/* farbe player unter text */
    width: 80%
	box-sizing: border-box;
    box-shadow: 0 0 15px 0px rgba(0,0,0,0.9);

}

/*PLAYER - jednotlive skladby pod sebou*/
#player_text {
    background-color: #bbbbbb;
    font-size : 15
}

/*YOUTUBE*/
#bereich_youtube_inner {
    background-color: #dddddd;
    width: 94%
	box-sizing: border-box;
    box-shadow: 0 0 15px 0px rgba(0,0,0,0.9);
	padding : 3px

}
#bereich_youtube_outer {
    background-color: #999999;
    width: 94%;
    box-sizing: border-box;
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}

#bereich_youtube_outer_480 {
    background-color: #999999;
    width: 480px;
    height: 360px;
    box-sizing: border-box;
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}

/*KAPITEL*/

#kapitel {
    text-align: center;
    font-size : 35;
    font-family: "Century Gothic", Arial, sans-serif;
    font-weight : bold
}
#bereich_outer_kapitel {
	background-color: #bbbbbb;
    	width: 100%;
	box-shadow: 0 0 35px 0px rgba(0,0,0,0.7);
}

#text_konec {

    	width: 90%;
	
}

#bereich_inner_kapitel {
	background-color: #bbbbbb;
    	width: 100%;
	box-shadow: 0 0 35px 0px rgba(0,0,0,0.7);
}
.kapitel_summary {
      width:100%;
      margin: 0 auto;
      text-align: center;
      color:#000000;
      position: relative;
    }
.awesome {
      width:100%;
      margin: 0 auto;
      text-align: center;
      color:#3333aa;
      font-size:45px;
      position: relative;
    }
.awesome_a {
  width:100%;
  margin: 0 auto;
  text-align: center;
  color:#313131;
  font-size:45px;
  position: relative;
  -webkit-animation:colorchange 20s infinite alternate;
}

/*GALERIES*/
#bereich_outer {
	background-color: #bbbbbb;
    width: 90%;
	box-shadow: 0 0 35px 0px rgba(0,0,0,0.7);
	font-size : 14
}

#bereich_gallery_outer {
    background-color: #bbbbbb;
    width: 90%;
	box-shadow: 0 0 35px 0px rgba(0,0,0,0.9);
	padding : 20px
}

#bereich_inner_all {
	background-color: #555555;
	 background-image: url("backgrounds/bg_bricks.jpg");
	 background-size: 600px;
    width: 82%;   /* breite für text unter bildern */
    font-size : 15
}
#bereich_inner_1 {
    background-color: #bbbbbb;
    width: 82%;   /* breite für text unter bildern */
    font-size : 15
}
#bereich_inner_1_headline {
    background-color: #bbbbbb;
    text-align: center;
    width: 100%;   /* breite für text unter bildern */
    font-size : 85;
    font-family: "Bodoni MT Black"
}
#bereich_inner_1_headline_2 {
    background-color: #bbbbbb;
    text-align: center;
    width: 100%;   /* breite für text unter bildern */
    font-size : 20;
    font-family: "Bodoni MT Black","Times New Roman";
    font-weight : bold
}
#bereich_inner_1_headline_3 {
    background-color: #bbbbbb;
    text-align: center;
    width: 100%;   /* breite für text unter bildern */
    font-size : 30;
    font-family: "Bodoni MT Black","Times New Roman";
    font-weight : bold
}
#bereich_inner_1_subline {
    background-color: #bbbbbb;
    text-align: center;
    width: 100%;   /* breite für text unter bildern */
    font-size : 13;
    font-family: "Bodoni MT Black","Times New Roman";
   font-weight : bold
}
#bereich_inner_1_subline_2 {
    background-color: #bbbbbb;
    text-align: center;
    width: 100%;   /* breite für text unter bildern */
    font-size : 13;
    font-family: "Century Gothic", Arial, sans-serif;
    /*font-weight : bold*/
}
#bereich_inner_1_subline_3 {
    
    text-align: center;
    width: 100%;   /* breite für text unter bildern */
    font-size : 12;
    font-family: "Century Gothic", Arial, sans-serif;
    /*font-weight : bold*/
}
#bereich_inner_1a {
    background-color: #bbbbbb;
    width: 90%;
    font-size : 15
}
#bereich_inner_1b {
    background-color: #bbbbbb;
    width: 88%;
    font-size : 15
}

/*BILD*/
.pic_100 {
      width:100px;
    }   
#bereich_bild_01 {,
    background-color: #999999;
    box-sizing: border-box;
	/*box-shadow: 0 0 45px 0px rgba(0,0,0,0.9) inset;*/
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}

#bereich_bild_znaky {
	 height:70px;
   


}
#bereich_bild_znaky_mobile {
	 height:200px;

}

#bereich_bild_free_mit_schatten {
    

    box-sizing: border-box;
	/*box-shadow: 0 0 45px 0px rgba(0,0,0,0.9) inset;*/
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}


#bereich_bild_01_player {
    background-color: transparent;

    box-sizing: border-box;
	/*box-shadow: 0 0 45px 0px rgba(0,0,0,0.9) inset;*/
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}
#bereich_bild_02 {
    background-color: #999999;
	height: 40px;
    box-sizing: border-box;
	/*box-shadow: 0 0 45px 0px rgba(0,0,0,0.9) inset;*/
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}
#bereich_bild_03 {
    background-color: #999999;
	height: 80px;
    box-sizing: border-box;
	/*box-shadow: 0 0 45px 0px rgba(0,0,0,0.9) inset;*/
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}
#bereich_bild_03c {
    background-color: #999999;
	height: 100px;
	width:  100px;
    box-sizing: border-box;
	/*box-shadow: 0 0 45px 0px rgba(0,0,0,0.9) inset;*/
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}
#bereich_bild_04 {
    background-color: #999999;
	width: 80px;
    box-sizing: border-box;
	/*box-shadow: 0 0 45px 0px rgba(0,0,0,0.9) inset;*/
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}
#bereich_bild_05 {
    background-color: transparent;
	height: 100px;
}
#bereich_bild_06 {
    background-color: transparent;
	height: 80px;
}

#bereich_bild_250 {
    background-color: transparent;
	height: 250px;
}

#bereich_bild_300 {
    background-color: transparent;
	height: 300px;
}

#bereich_div_300 {,
    background-color: #999999;
    width: 300px;
    height: 250px;
    box-sizing: border-box;
	/*box-shadow: 0 0 45px 0px rgba(0,0,0,0.9) inset;*/
	box-shadow: 0 0 45px 0px rgba(0,0,0,0.9);
	padding : 0px
}

#bereich_bild_400 {
    background-color: transparent;
	height: 400px;
}


/*TIMELINE*/
#body_timeline_1 {
    color: ff3333;
    font-family: "Century Gothic", Arial, sans-serif;
    font-size : 15;
    font-weight : bold
    text-align: left;
}
/*TIMELINE*/
#body_timeline_2 {
    color: ff3333;
    font-family: "Century Gothic", Arial, sans-serif;
    font-size : 15;
    font-weight : bold
    text-align: left;
}
/*FLOATING */
#floating-div {
    position:relative;
    top: 55%;
    left: -5%;
    width:20em;
    height:2.5em;
    margin-top: -1.25em; /*set to a negative number 1/2 of your height*/
    margin-left: -10em; /*set to a negative number 1/2 of your width*/
    border: 6px solid ;
}
#floating-div2 {
    position:relative;
    top: 55%;
    left: 4%;
    width:10em;
    height:2.5em;
    margin-top: -1.25em; /*set to a negative number 1/2 of your height*/
    margin-left: -5em; /*set to a negative number 1/2 of your width*/
    border: 6px solid ;
}


/* UNUSED CSS

.center {
      margin: 0 auto;
    }
    


#bereich_inner_2 {
    background-color: #aaaaaa;
    width: 80%
    box-sizing: border-box;
    box-shadow: 0 0 35px 0px rgba(0,0,0,0.9);

}
#bereich_inner_2a {
    background-color: #888888;
    width: 88%
    box-sizing: border-box;
    box-shadow: 0 0 35px 0px rgba(0,0,0,0.9);
     padding : 20px
}




body_headline {
    color: ff0000;
    font-family: "Times New Roman", Arial, sans-serif;
    font-size : 15
}

body_underline_side_1 {
    color: 000000;
    font-family: "Times New Roman", Arial, sans-serif;
    font-size : 3
}

body_underline_side {
    color: 000000;
    font-family: "Century Gothic", Arial, sans-serif;
    font-size : 3
}

main{
	width: 93%;
	height: 100px;
	top: 40px;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	text-align: center;
	padding: 15px 3%;
	box-sizing: border-box;
	box-shadow: 0 0 21px 0px rgba(0,0,0,0.3);
	border-radius: 0px;
}

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

year_block{
	width: 80%;
	height: 100px;
	top: 40px;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	text-align: center;
	padding: 5px 2%;
	box-sizing: border-box;
	box-shadow: 0 0 21px 0px rgba(0,0,0,0.3);
	border-radius: 0px;
}

#container {
    position:fixed;
    top: 50%;
    left: 50%;
    width:90em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -45em; /*set to a negative number 1/2 of your width*/
    border: 0px solid transparent;
    background-color: transparent;
}

#container {height: 160px; overflow: hidden; background: #111111; position: relative;}

#background_text {
   position: relative;
   z-index: -5;
   overflow: hidden;
    color: 000000;
    font-family: "Century Gothic", Arial, sans-serif;
    font-size : 100;
     opacity: 0.01;
}


.ls_icon {
  width:2%;
  height:2%;
}


.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 45%;
  width:10%;
}

#leftallign {
    
    background-color: #bbbbbb;
    text-align: left;
    width: 45%;   /* breite für text unter bildern */
    font-size : 15;
    font-family: "Century Gothic", Arial, sans-serif;
}

span01 {
  display: table-cell;
  vertical-align: middle;
}





 */