*{
 margin:0;
 padding:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,body{
    width:100%;
    max-height:100%;
    font-family: 'Biryani', sans-serif;
    background-color:white;
    -webkit-font-smoothing: antialiased;
}

.Colorbackground{
    background:black;
    height: 100%;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    position: fixed;
  -webkit-animation:colour 25s linear infinite;
	-moz-animation:colour 25s linear infinite; 
  -moz-animation: color_change 25s infinite alternate;
}
@-webkit-keyframes colour{
  0%{background:rgb(217,0,44)}
	10%{background:rgb(243,146,0)}
	27%{background:rgb(255,209,1)}
	50%{background:rgb(0,194,117)}
  60%{background:rgb(31,94,245)}
	77%{background:rgb(119,20,189)}
	94%{background:rgb(217,0,44)}
	100%{background:rgb(217,0,44)}
}

@-moz-keyframes color_change{
	0%{background:rgb(217,0,44)}
	10%{background:rgb(243,146,0)}
	27%{background:rgb(255,209,1)}
	50%{background:rgb(0,194,117)}
  60%{background:rgb(31,94,245)}
	77%{background:rgb(119,20,189)}
	94%{background:rgb(217,0,44)}
	100%{background:rgb(217,0,4)}
}


button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: crosshair;
}

header{
    height: 50px;
    width:100%;
    top: 0;
    position: fixed;
    z-index: 10;
    cursor:crosshair;
}

header img{
    width: 100px;
    padding: 20px 0 0 22px;
    cursor:crosshair;
}
/**header----------------------------------------------------------------------------------------------------------------**/
/**menu----------------------------------------------------------------------------------------------------------------**/

ul{
  margin-top:8%;
  list-style:none;
  cursor:crosshair;
}

li{
   text-align: center;
   margin-bottom: .5%;
   cursor:crosshair;
}

li a{
    text-decoration: none;
    font-weight: 900;
    font-size: 30px;
    color:black;
    display:block;
  -webkit-transition:.02s ease-out;
  cursor:crosshair;
}

li a:hover{
  color:white;
  display:block;
  cursor:crosshair;
}

.goethe{
  padding-top:10px;
      -webkit-transition:.02s ease-out;
      cursor:crosshair;
}
.goethe:hover{
  color:white;
  background-color:rgb(243,146,0);
  cursor:crosshair;
}

.beethoven{padding-top:10px;
    -webkit-transition:.02s ease-out;
    cursor:crosshair;
  }

.beethoven:hover{
  color:white;
  background-color:rgb(217,0,44);
  cursor:crosshair;
}

.darwin{padding-top:10px;
   -webkit-transition:.02s ease-out;
 cursor:crosshair;
}

.darwin:hover{
  color:white;
  background-color:rgb(0,194,117);
  cursor:crosshair;
}

.nietzsche{padding-top:10px;  
   -webkit-transition:.02s ease-out;
   cursor:crosshair;
}

.nietzsche:hover{
  color:white;
  background-color:rgb(119,20,189);
  cursor:crosshair;
}

.van_gogh{padding-top:10px;
  -webkit-transition:.02s ease-out;
  cursor:crosshair;
  }

.van_gogh:hover{
  color:white;
  background-color:rgb(255,209,1);
  cursor:crosshair;
}

.nash{padding-top:10px;
   -webkit-transition:.02s ease-out;
   cursor:crosshair;
  }

.nash:hover{
  color:white;
  background-color:rgb(31,94,245);
  cursor:crosshair;
}

.ich{padding-top:10px;
    -webkit-transition:.02s ease-out;
    cursor:crosshair;
}

.ich:hover{
  color:white;
  background-color:rgb(0,0,0);
  cursor:crosshair;
}

/**menu----------------------------------------------------------------------------------------------------------------**/
/**video----------------------------------------------------------------------------------------------------------------**/


.masthead {
    position: relative;
    min-width: 720px;
}
.masthead-video {
    z-index: 0;
}
.masthead-overlay {
    opacity: 1;
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    width: 100%;
    height: 100%;
}

#goethe{
  background-color: rgb(243,146,0);
}

#beethoven{
      background-color: rgb(217,0,44);
}

#darwin{
    background-color: rgb(0,194,117);
}

#nietzsche{
      background-color: rgb(119,20,189);
}

#vangogh{
     background-color: rgb(255,209,1); 
}

#nash{
      background-color: rgb(31,94,245);
}

.masthead-video-credit {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    opacity: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding-right: 10px;
    bottom: 10px;
    text-decoration: none;
    text-align: right;
    line-height: 1.5;
    -webkit-transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    transition: 0.2s ease all;
}
.masthead-video-credit span {
    display: block;
}
.masthead-video-credit:hover {
    opacity: 1;
}

.video-container{
    width: 100%;
    height: auto;
}

.video-neu{
  width:100%;
  z-index: 1;
  position: relative;
}

.controller-neu{
    position: absolute;
    text-align: center;
    z-index: 6;
    width: 97%;
    margin-left:1.5%;
    margin-right:1.5%;
    bottom:1%;
}

.controller{
    position: relative;
    top: 88%;
    text-align: center;
    z-index: 6;
    width: 97%;
    margin-left:1.5%;
    margin-right:1.5%;
}

.video-button{
    width: 35%;
    margin-left: 45%;
}

.masthead-arrow {
    left: 0px;
    background-image:url(img/button/pfeil_u_s.png);
    border:none;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 35px;
    height: 20px;
    opacity: 1;
    float:left;
    margin-right: 3%;
    margin-top: 8px;
}

.masthead-arrow_none {
    left: 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 22px;
    height: 22px;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    opacity: 1;
    float:left;
    margin-right:5%;
    display:none;
}


input[type="button"]{
    height: 35px;
    width: 18px;
    margin: 2px 10px 0 10px;
    box-shadow: none;
    cursor:crosshair;
    float:left;
}

input[type="button"]:hover{
}

input[type="button"]:focus{
    outline:0;
}


.toggle{
    background-image:url(img/button/play_s.png);
    border:none;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: transparent;
}


.un-toggle{
    background-image:url(img/button/play_ss.png);
    border:none;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: transparent;
}


.mute-video{
    background-image:url(img/button/mute_ss.png);
    border:none;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: transparent;
}

.unmute-video{
    background-image:url(img/button/mute_s.png);
    border:none;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: transparent;
}

/*-BUTTON ENDE---------------------------------------------------------------------*/

input[type="range"]{
    width: 100%;
    cursor: crosshair;
    background-color: transparent;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: crosshair;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}


.controller input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  border: ;
  background-image:url(img/button/thumb.png);
  height: 28px;
  width: 8px;
  border-radius: 0px;
  cursor: crosshair;
  background-size:100%;
  background-repeat:no-repeat;
}

.controller-neu input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  border: ;
  background-image:url(img/button/thumb.png);
  height: 28px;
  width: 8px;
  border-radius: 0px;
  cursor: crosshair;
  background-size:100%;
  background-repeat:no-repeat;
}

 input[type=range]::-moz-range-track {
    outline: transparent;
    background-color:transparent;

}

input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  border: none;
  background-image:url(img/button/thumb.png);
  height: 28px;
  width: 8px;
  border-radius: 0px;
  cursor: crosshair;
  background-size:100%;
  background-repeat:no-repeat;
  background-color:transparent;
}

/**video-ende---------**/
/**unterseite--------**/


h1{
  font-size: 110px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

h2{
  padding-bottom: 10px;
  font-weight:900;
}

/**unterseite-----------------**/
/**unterseite-GOETHE----------**/


.box_1_goethe{
  width:90%;
  float: left;
  z-index:2;
  margin-bottom:5%;
  margin-left:10%;
  margin-top:10%;
}

.goethe_allgemein_text{
    line-height: 150%;
    width: 50%;
    float: left;
    font-size: 15px;
  }

.goethe_allgemein_text h1{
   margin-bottom: 10%;
}  

.goethe_allgemein_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.goethe_allgemein_bild img{
  width:70%;
}

.box_2_goethe{
  width:90%;
  float:right;
  z-index:2;
  margin-bottom:5%;
  margin-right:10%;
  margin-top:10%;
}

.goethe_wahnsinn_text{
  line-height: 150%;
  width: 50%;
  float:right;
  font-size: 15px;
}

.goethe_wahnsinn_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.goethe_wahnsinn_bild img{
  width:80%;
}

.box_3_goethe{
  width: 90%;
  float: left; 
  z-index:2;
  margin-left:10%;
  margin-top:10%;
}

.goethe_genie_text{
  line-height: 150%;
  width: 50%;
  float: left;
  font-size: 15px;
}

.goethe_genie_bild{
    float: right;
    width: 45%;
    padding-right: 5%;
    margin-top: 5%;
    margin-bottom:5%mast;
}


.goethe_genie_bild img{
  width:95%;
}

.goethe_Letter{
    color: rgb(243,146,0);
    z-index: -1;
    position: absolute;
    right: 2%;
    margin-top: 45%;

}

.goethe_Letter p{
    font-size: 700px;
    font-weight: 900;
}

/**unterseite-GOETHE-----------**/
/**unterseite-BEETHOVEN--------**/

.box_1_beethoven{
  width:90%;
  float: left;
  z-index:2;
  margin-bottom:5%;
  margin-left:10%;
  margin-top:10%;
}

.beethoven_allgemein_text{
    line-height: 150%;
    width: 50%;
    float: left;
    font-size: 15px;
  }

.beethoven_allgemein_text h1{
   margin-bottom: 10%;
}  

.beethoven_allgemein_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.beethoven_allgemein_bild img{
  width:80%;
}

.box_2_beethoven{
  width:90%;
  float:right;
  z-index:2;
  margin-bottom:5%;
  margin-right:10%;
  margin-top:4%;
}

.beethoven_wahnsinn_text{
  line-height: 150%;
  width: 50%;
  float:right;
  font-size: 15px;
}

.beethoven_wahnsinn_bild{
  float: right;
  width: 50%;
  text-align: left;
}

.beethoven_wahnsinn_bild img{
  width:80%;
}

.box_3_beethoven{
  width: 90%;
  float: left; 
  z-index:2;
  margin-left:10%;
  margin-top:4%;
}


.beethoven_genie_text{
  line-height: 150%;
  width: 50%;
  float: left;
  font-size: 15px;
  margin-top:10%;
}

.beethoven_genie_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.beethoven_genie_bild img{
  width:80%;
}

.beethoven_Letter{
    color: rgb(217,0,44);
    z-index: -1;
    position: absolute;
    left: 13%;
    margin-top: 98%;

}

.beethoven_Letter p{
    font-size: 700px;
    font-weight: 900;
}


/**unterseite-BEETHOVEN------**/
/**unterseite-DARWIN---------**/

.box_1_darwin{
  width:90%;
  float: left;
  z-index:2;
  margin-left:10%;
   margin-top: 10%;
}

.darwin_allgemein_text{
    line-height: 150%;
    width: 50%;
    float: left;
    font-size: 15px;
  }

.darwin_allgemein_text h1{
   margin-bottom: 10%;
}  

.darwin_allgemein_bild{
  float: right;
  width: 50%;
  text-align: center;
  margin-top:-15%;
}

.darwin_allgemein_bild img{
  width:70%;
}

.box_2_darwin{
  width:90%;
  float:right;
  z-index:2;
  margin-right:10%;
  margin-top:9%;
}

.darwin_wahnsinn_text{
  line-height: 150%;
  width: 50%;
  float:right;
  font-size: 15px;
}

.darwin_wahnsinn_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.darwin_wahnsinn_bild img{
  width:70%;
}

.box_3_darwin{
  width: 90%;
  float: left; 
  z-index:2;
  margin-left:10%;
}


.darwin_genie_text{
  line-height: 150%;
  width: 50%;
  float: left;
  font-size: 15px;
  margin-top: 10%;
}

.darwin_genie_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.darwin_genie_bild img{
  width:80%;
}

.darwin_Letter{
    color: rgb(0,194,117);
    z-index: -1;
    position: absolute;
    left: 10%;
    margin-top: 70%;

}

.darwin_Letter p{
    font-size: 700px;
    font-weight: 900;
}


/**unterseite-DARWIN--------------**/
/**unterseite-NIETZSCHE-----------**/

.box_1_nietzsche{
  width:90%;
  float: left;
  z-index:2;
  margin-left:10%;
  margin-top:10%;
}

.nietzsche_allgemein_text{
    line-height: 150%;
    width: 50%;
    float: left;
    font-size: 15px;
  }

.nietzsche_allgemein_text h1{
   margin-bottom: 10%;
   white-space: pre;
}  

.nietzsche_allgemein_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.nietzsche_allgemein_bild img{
    width: 75%;
    margin-top: 13%;
}

.box_2_nietzsche{
  width:90%;
  float:right;
  z-index:2;
  margin-bottom:5%;
  margin-right:10%;
}

.nietzsche_wahnsinn_text{
    line-height: 150%;
    width: 50%;
    float: right;
    font-size: 15px;
    margin-top: 17%;
}

.nietzsche_wahnsinn_bild{
  float: right;
  width: 50%;
  text-align: center;
  margin-top:5%;
}

.nietzsche_wahnsinn_bild img{
    width: 40%;
}

.box_3_nietzsche{
  width: 90%;
  float: left; 
  z-index:2;
  margin-left:10%;
  margin-top:4%;
}

.nietzsche_genie_text{
    line-height: 150%;
    width: 50%;
    float: left;
    font-size: 15px;
    margin-top: 10%;
}

.nietzsche_genie_bild{
  float: right;
  width: 50%;
  text-align: center;
  margin-bottom:10%;
}

.nietzsche_genie_bild img{
  width:35%;
  margin-top:30%;
  margin-left: 15%;
}

.nietzsche_Letter{
    color: rgb(119,20,189);
    z-index: -1;
    position: absolute;
    right: 25%;
    margin-top: 75%;
    bottom: 15;

}

.nietzsche_Letter p{
    font-size: 700px;
    font-weight: 900;
}


/**unterseite-NIETZSCHE-------------**/
/**unterseite-VAN GOGH--------------**/

.box_1_vangogh{
  width:90%;
  float: left;
  z-index:2;
  margin-left:10%;
  margin-top:10%;
}

.vangogh_allgemein_text{
    line-height: 150%;
    width: 50%;
    float: left;
    font-size: 15px;
  }

.vangogh_allgemein_text h1{
   margin-bottom: 10%;
   white-space: pre;
}  

.vangogh_allgemein_bild{
  float: right;
  width: 50%;
  text-align: right;
}

.vangogh_allgemein_bild img{
  width:100%;
}

.box_2_vangogh{
  width:90%;
  float:right;
  z-index:2;
  margin-bottom:5%;
  margin-right:10%;
}

.vangogh_wahnsinn_text{
    line-height: 150%;
    width: 50%;
    float: right;
    font-size: 15px;
    margin-top: 17%;
}

.vangogh_wahnsinn_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.vangogh_wahnsinn_bild img{
  width: 80%;
}


.box_3_vangogh{
  width: 90%;
  float: left; 
  z-index:2;
  margin-left:10%;
  margin-top:10%;
}

.vangogh_genie_text{
  line-height: 150%;
  width: 50%;
  float: left;
  font-size: 15px;
  margin-top: 10%;
}

.vangogh_genie_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.vangogh_genie_bild img{
  width:100%;
}

.vangogh_Letter{
        color: rgb(255,209,1);
    z-index: -1;
    position: absolute;
    left: 12%;
        margin-top: 80%;
    bottom: 15;
}

.vangogh_Letter p{
    font-size: 700px;
    font-weight: 900;
}

/**unterseite-VAN GOGH------------------**/
/**unterseite-Nash----------------------**/

.box_1_nash{
  width:90%;
  float: left;
  z-index:2;
  margin-left:10%;
  margin-top:10%;
}

.nash_allgemein_text{
    line-height: 150%;
    width: 50%;
    float: left;
    font-size: 15px;
  }

.nash_allgemein_text h1{
   margin-bottom: 10%;
   white-space: pre;
}  

.nash_allgemein_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.nash_allgemein_bild img{
  width:80%;
}

.box_2_nash{
  width:90%;
  float:right;
  z-index:2;
  margin-bottom:5%;
  margin-right:10%;
  margin-top:15%;
}

.nash_wahnsinn_text{
  line-height: 150%;
  width: 50%;
  float:right;
  font-size: 15px;
}

.nash_wahnsinn_bild{
  float: right;
  width: 50%;
  text-align: center;
}

.nash_wahnsinn_bild img{
  width:70%;
}

.box_3_nash{
  width: 90%;
  float: left; 
  z-index:2;
  margin-left:10%;
  margin-top:8%;
}


.nash_genie_text{
  line-height: 150%;
  width: 50%;
  float: left;
  font-size: 15px;
}

.nash_genie_bild{
  float: right;
  width: 50%;
  text-align: center;
  margin-top:10%;
}

.nash_genie_bild img{
  width:60%;
}

.nash_Letter{
    color:rgb(31,94,245);
    z-index: -1;
    position: absolute;
    right: 10%;
    /* top: 100%; */
    margin-top: 75%;

}

.nash_Letter p{
    font-size: 700px;
    font-weight: 900;
}


/**unterseite-NASH-----------**/
/**pfeile--------------------**/

.pfeile{
  bottom: 0;
    position: fixed;
    width: 100%;
    height: 100px;
    margin-bottom: 20%;
    z-index: 5;
    cursor:crosshair;
}

.pfeile_quiz{
  bottom: 0;
    position: fixed;
    width: 5%;
    height: 100px;
    margin-bottom: 20%;
    z-index: 5;
    cursor:crosshair;
}

.plinks{
  position:absolute;
  z-index: 5;
  left: 22px;
  opacity: 1;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out; 
  cursor:crosshair;
}

.plinks:hover{
  opacity:0.5;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out;
  cursor:crosshair;
} 

.plinks-link{
  z-index:5;
  width:20px;
  background-image:url(img/button/pfeil_l_s.png);
  display:block;
  height:80px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out; 
  background-size:100%;
  cursor:crosshair;
}

.prechts{
  position:absolute;
  z-index:5;
  right:22px;
  opacity:1;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out;
  cursor:crosshair;
}

.prechts-link:hover{
  opacity:0.5;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out;
  cursor:crosshair;
}

.prechts-link{
  background-image:url(img/button/pfeil_r_s.png); 
  display:block;
  height:90px;
  background-repeat:no-repeat;
  z-index:5;
  width:20px;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out; 
  background-size:100%;
  cursor:crosshair;  
}


/**pfeile-ende-------------**/
/**quiz--------------------**/
.questionWrap{
    background-color: white;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    z-index: 3;
}

.questionWrap li{
	text-align: center;
}

.answersContainer ul{
	margin-top:4%;
}

#quizMainContainer {  
  margin: 0% 0% 0 0%;
  background-color: white;
}

.quizheadline{
	position: relative;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 65px;
    line-height: 110px;
    margin-top: 12%;
}

.startButtonContainer{
    margin-top: 5%;
    text-align: center;
}


.startButtonContainer a{ 
    font-weight: 900;
    font-size: 25px;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    cursor: crosshair;
    background-color: black;
    padding: 1% 15% 0.5% 15%;
}


.questionTextContainer {
    text-align: center;
}

.Testfragen {
	margin-top: 6%;
    display: inline-block;
    font-size: 28px;
    font-weight: 800;
    color: black;
    padding: 1% 15% 0.5% 15%;
}

.antwortkasten{
	width:40%;
	margin-left:30%;
}

.answersContainer{
    height: auto;
    padding: 0;
}

.quizNavigationContainer {
    margin-top: 4%;
    text-align: center;

}

#quizRestartButton2 {
    font-weight: 900;
    font-size: 25px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: crosshair;
    padding: 1% 4% 0.5% 4%;
    text-align: center;
    font-weight: 900;
    background-color:transparent;
  }

#restartLink:hover{
  background-color: white;
  color: black;
}

#restartLink{
  color:white;
    margin-top: 5%;
    text-align: center;
    border-color: white;
    border-style: solid;
    padding-top: 1%;
    padding-bottom: 0.5%;
    width: 20%;
    margin-left: 40%;
}

.button-answer{
    background: white;
    color: black;
    text-decoration: none;
    font-size: 18px;
    cursor: crosshair;
    text-align: left;
    height: 74px;
    padding-top: 16px;
    line-height: 23px;
    font-weight: 800;
}

.button-answer:hover{
    color:white;
	background-color:black;
}

.Buchstaben{
    float: left;
    font-size: 50px;
    margin: 2.5% 3% 0% 2%;
    font-weight: 800;
}

.button-navigation {
    font-weight: 900;
    font-size: 25px;
    text-transform: uppercase;
    color: black;
    text-decoration: none;
    cursor: crosshair;
    background-color: white;
    padding: 1% 4% 0.5% 4%;
    border-color: black;
    border: 4px;
    border-style: solid;
}

.button-navigation:hover{
  background-color: black;
  color: white;
  border-color: black;
    border: 4px;
    border-style: solid;
}

#resultsHeader {
    font-size: 50px;
    font-weight: 800;
    color: white;
    padding: 10px 0 5px 0;
    text-align: center;
    margin-top: 8%;
    text-transform: uppercase;
}

#resultsSubhead {
    width: 40%;
    margin: 2% 30% 3%;
    text-align: left;
    font-weight: 800;
    color: white;
}

.hide {
  display:none;
}

.darkerBlue {
  background: black;
  color:white;
}

/**quiz-ende-----**/
/**about---------**/

.box_about h1{
  font-size:80px;
  margin-left:10%;
  margin-top:5%;
}

.about_text{
    width: 80%;
    margin: 0% 10% 0% 10%;
    -webkit-column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-count: 2;
    -moz-column-gap:2em;
    column-count: 2;
}

.about_text p{
  font-size:14px;
  line-height:145%;
}

.daten_text{
  float:left;
  margin: 5% 10% 1% 10%;
}


.regular{
  font-weight:400;
  line-height:145%;
  font-size:14px;
}

.regular a{
  color:black;
  cursor:crosshair;
}

.bold{
  font-size:14px;
  font-weight:800;
  line-height:145%;
}

/**about-ende-------------**/
/**impressum-link---------**/

.impressum_link{
    margin: 7% 0 15% 0;
}

.impressum_link a{
    color: black;
    font-weight: 700;
    text-decoration: none;
    font-size: 12px;
    border-top-style: solid;
    border-color: transparent;
    border-width: 2px;
    cursor:crosshair;
}

.impressum_link a:hover{
    border-top-style: solid;
    border-color: black;
    border-width: 2px;

}

/**impressum-link-ende---------**/
/**impressum-------------------**/

.impressum{
  margin:5% 15% 10% 15%;
  font-size:10px;
  text-decoration:none;
}

.impressum a{
  text-decoration:none;
  color:black;

}

.impressumgenerator{
  color:grey;
}

.impressumgenerator a{
  color:grey;
}



/**impressum-ende--------**/
/**footer----------------**/

footer{ 
    position: fixed;
    bottom: 0;
    padding: 0px 0px 5px 22px;
    text-align: left;
    background-size: cover;
    text-transform: uppercase;
    z-index: 4;
    cursor: crosshair;
}

.kreis{
  z-index:5;
  width:20px;
  background-image:url(img/button/kreis_s.png);
  display:inline-block;
  height:20px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out; 
  background-size:100%;
  cursor: crosshair;
}

.kreis:hover{
  z-index:5;
  width:20px;
  background-image:url(img/button/kreis_ss.png);
  display:inline-block;
  height:20px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.5s ease-in-out;
  -webkit-transition:.3s ease-in;
  -moz-transition:.3s ease-in;
  -o-transition:.3s ease-in; 
  background-size:100%;
  cursor: crosshair;
}

.kreis1{
  z-index:5;
  width:20px;
  background-image:url(img/button/kreis_ss.png);
  display:inline-block;
  height:20px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out; 
  background-size:100%;
  cursor: crosshair;

}

.kreis1:hover{
  z-index:5;
  width:20px;
  background-image:url(img/button/kreis_s.png);
  display:inline-block;
  height:20px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.5s ease-in-out;
  -webkit-transition:.3s ease-in;
  -moz-transition:.3s ease-in;
  -o-transition:.3s ease-in; 
  background-size:100%;
  cursor: crosshair;
}

.quadrat{
  z-index:5;
  width:19px;
  background-image:url(img/button/quadrat_s.png);
  display:inline-block;
  height:20px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out; 
  background-size:100%;
  margin: 0px 10px 0px 0px;
  cursor: crosshair;
}

.quadrat:hover{
  z-index:5;
  width:19px;
  background-image:url(img/button/quadrat_ss.png);
  display:inline-block;
  height:20px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.5s ease-in-out;
  -webkit-transition:.3s ease-in;
  -moz-transition:.3s ease-in;
  -o-transition:.3s ease-in; 
  background-size:100%;
  cursor: crosshair;
}


.quadrat1{
  z-index:5;
  width:19px;
  background-image:url(img/button/quadrat_ss.png);
  display:inline-block;
  height:20px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.3s ease-in-out;
  -webkit-transition:.3s ease-out;
  -moz-transition:.3s ease-out;
  -o-transition:.3s ease-out; 
  background-size:100%;
  margin: 0px 10px 0px 0px;
  cursor: crosshair;
}

.quadrat1:hover{
  z-index:5;
  width:19px;
  background-image:url(img/button/quadrat_s.png);
  display:inline-block;
  height:20px;
  background-repeat:no-repeat;
  z-index:1;
  transition-duration:.5s ease-in-out;
  -webkit-transition:.3s ease-in;
  -moz-transition:.3s ease-in;
  -o-transition:.3s ease-in; 
  background-size:100%;
  cursor: crosshair;
}

/*----------------------------------------------------------mediaanfang_kleine monitore---------*/

@media all and (min-width: 320px) and (max-width: 600px) {

header img{
  width:50px;
  padding:5px 0 0 5px;
}

ul{
  margin-top:25%;
}

#g{
  color: rgb(243,146,0);
}

#b{
  color: rgb(217,0,44);
}

#d{
  color: rgb(0,194,117);
}

#ni{
  color: rgb(119,20,189);
}

#v{
  color: rgb(255,209,1);
}

#na{
  color: rgb(31,94,245);
}

li a {
  font-size:20px;
}

.goethe:hover, .beethoven:hover, .darwin:hover, .nietzsche:hover, .vangogh:hover, .nash:hover {
    background-color: black;
}

/*--header-ende------------*/
/*--video------------------*/

.controller-neu{
  top: 25%;
}

.masthead-overlay{
  display:none;
}

.video-button{
  width:50%;
  margin-left:40%;
}

input[type="button"] {
    height: 16px;
    width: 10px;
    margin: 2px 7px 0 10px;
}

.masthead-arrow{
display:none;
}

.controller-neu input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  height: 14px;
  width: 4px;
}

/*--video-ende-------------*/
/*--unterseiten------------*/

.pfeile{
  display:none;
}

h1{
  font-size:50px;
}

/*--video------------------*/
/*--goethe-----------------*/

.box_1_goethe{
  margin:0 5%;
  width:90%;
}

.goethe_allgemein_text {
  float:none;
  width:100%;
  font-size:10px;
}

.box_2_goethe{
  margin:0 5%;
  width:90%;
}

.goethe_wahnsinn_text {
  float:none;
  width:100%;
  font-size:10px;
}

.box_3_goethe{
  margin:0 5%;
  width:90%;
}

.goethe_genie_text {
  float:none;
  width:100%;
  font-size:10px;
}

/*--goethe-ende------------------*/
/*--beethoven--------------------*/
.box_1_beethoven{
  margin:0 5%;
  width:90%;
}

.beethoven_allgemein_text {
  float:none;
  width:100%;
  font-size:10px;
}

.box_2_beethoven{
  margin:0 5%;
  width:90%;
}

.beethoven_wahnsinn_text {
  float:none;
  width:100%;
  font-size:10px;
}

.box_3_beethoven{
  margin:0 5%;
  width:90%;
}

.beethoven_genie_text {
  float:none;
  width:100%;
  font-size:10px;
}








footer{
  position:relative;
}

}

/*-----------------------------------------------------------------IMPRESSUM ENDE-----*/  
 /*--media_---------*/
@media all and (min-width: 600px) and (max-width: 980px){


}
  

/* ---------------------------------------------------------------------------------------------*/
/*--mediaanfang_mittlere monitore---------*/

@media only screen and (min-width: 980px) {


}  
  


/*---------------------------------------------------------------------------*/
/*--mediaanfang_große monitore---------*/

@media only screen and (min-width: 1280px){


}