@charset "utf-8";

#banner{
  width: 99.5%;
  height: 30%;
  position: fixed;
  top: 1px;
  !z-index:1;
  !border: 1px solid red;
}                                                                                                                                                                                                 




body {    overflow-y: scroll;    }

.buttonC { 
    font-family: Quicksand;                                                                                                                                                                                                                                                
    font-size: 1.0em; 
    font-style: normal; 
    line-height: normal; 
    font-weight: bold;                                                                                                                                                                                                                                                                 
    !text-transform: none; 
    color: #454540; 
}


.area_text_1 {
  width: 65%;
  font-family: Quicksand;  
  font-size: 1.8em;
  
}


.area_mail_1 {
  width: 65%;
  font-family: Quicksand;  
  font-size: 1.8em;
  
}



.logo{
  width: 90%;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  padding-left: 0.5em;
    font-family: Quicksand;  
  text-align: left;
  font-size: 4.8em;
}


#bild_start{
  width: 90%;
  height: min;
  z-index:1;
}                                                                                                                                                                                                 


#schrift_start {  
  ms-transform: rotate(-90deg);
  moz-transform: rotate(-90deg);
  webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);

  !padding: 2px;
  margin-top: 24.7%;
  position: fixed;
  left: -13.7%;
  !border: 1px solid white;       
  !text-align: center;
  font-family: Quicksand;    
  color: rgb(255,102,0) ;  
  
  line-height: 2.5;
  !font-size: calc(30px + (30 - 25) * ((100vw - 320px) / (1600 - 320)));  
  
  !font-size: 2em; 
  !font-weight: bold;    
  font-size: 2.7vw; 
  letter-spacing:0.12em;
  display: inline-block;
  !z-index:71;
  !display:block;
  width: 35%; 
  !height: 20;
} 



#probetraining_box {  
  padding: 2px;
!  margin-top: 24%;
  position: absolute;
  left: 17%;
  border: 1px solid white;       
  text-align: center;
  font-family: Quicksand;    
  color: white ; 
  line-height: 2.5;
  font-size: calc(10px + (16 - 10) * ((100vw - 320px) / (1600 - 320)));    
  letter-spacing:0.12em;
  display: inline-block;
  z-index:71;
} 





#box_oben {  
  !float: left;
  padding-bottom: 3px;
  top: 30%
  !position: absolute;
  position: fixed;
  left: 50%;
  border: 1px solid red;       
  text-align: center;
  font-family: Quicksand;    
  color: white ; 
  !line-height: 2.5;
  font-size: calc(10px + (16 - 10) * ((100vw - 320px) / (1600 - 320)));    
  letter-spacing:0.12em;
  !display: inline-block;
  z-index:50;
  border: 5px rgb(224,255,255);
  background: rgb(250,250,250);   
} 





#bild_weiter {  
  padding: 2px;
  !margin-top: 29%;
  position: absolute;
  left: 75%;
  !border: 1px solid white;       
  text-align: center;
  font-family: Quicksand;    
  color: white ; 
  line-height: 2.5;
  font-size: calc(10px + (16 - 10) * ((100vw - 320px) / (1600 - 320)));    
  letter-spacing:0.12em;
  display: inline-block;
  z-index:71;
} 


div a {
    display:block;
    height:100%;
    text-decoration:none;
    color: white ; 
}
div a:hover {
    background:#fff;
    color: rgb(255,102,0) ;
}



#text_box_abstand_links {     
  float: left;
  width: 15%;
  width: 7.1%;
  z-index:1;
  padding:38px;     
} 



#menue_unten {
  float: left;
}



#menue_box {  
  position: fixed;
  bottom: 0%;
  left: 10px;
  width: 80%;
  !border: 2px solid blue;
  background:#fff;
  border-top: 0.2px solid rgb(223,223,223);    
  padding-top:12px;
} 




#text_box {  
  position: absolute;
  width: 65%;
  !right: 25%;
  top: 32%;
  left: 12%;
  font-size: 1em;     
  background: rgb(240,248,255) ;  
  z-index: -1;
} 

                            
.ueberschrift {  
    font-weight: normal; 
    font-family: Quicksand;    
    color: rgb(255,102,0) ; 
    font-size: 2.2em;
    letter-spacing:0.1em;
    line-height: 1;
}



                            
.ueberschrift_2 {  
    font-weight: normal; 
    font-family: Quicksand;    
    color: rgb(51,102,255) ; 
    font-size: 1.8em;
    letter-spacing:0.1em;
    line-height: 1;
}




.zeile_2 {  
    font-weight: normal; 
    font-family: Quicksand;    
    color: rgb(255,102,0) ; 
    font-size: 0.8em;
    font-size: calc(8px + (38 - 20) * ((25vw - 320px) / (600 - 120)));
    letter-spacing:0.15em;
    color: #454540;
    line-height: 1.0;
}





.text_klein {  
    font-weight: normal; 
    font-family: Quicksand;    
    color: rgb(255,102,0) ; 
    font-size: 1em;
    color: #454540;
    !line-height: 1.5;
}





.text_oben {  
    font-weight: normal; 
    font-family: Quicksand;    
    color: rgb(255,102,0) ; 
    font-size: 1.00em;
    color: #454540;
    line-height: 1.5;
    text-align: right;
}




.text_normal {  
    font-weight: normal; 
    font-family: Quicksand;    
    color: rgb(255,102,0) ; 
    font-size: 1.20em;
    color: #454540;
    line-height: 1.5;
}




.text_grund.... {  
    font-weight: normal; 
    font-family: Quicksand;    
    color: rgb(255,102,0) ; 
    font-size: 2.20em;
    color: #454540;
    line-height: 1.5;
}




a.link_aktiv {
  font-size: calc(10px + (18 - 10) * ((100vw - 320px) / (1600 - 320)));    
  font-family: Quicksand;    
}

a.link_aktiv:visited {
  color: rgb(51,102,255); text-decoration:none;   
}

a.link_aktiv:link {
  color: rgb(51,102,255); text-decoration:none;  
}

a.link_aktiv:hover {
  color: rgb(51,102,255);  
  text-decoration:none;  
  background: rgb(242,242,242);   
}

a.link_aktiv:active {
  color: rgb(51,102,255);   
}




a.link_inaktiv_2 {
  font-size: calc(10px + (18 - 10) * ((100vw - 320px) / (1600 - 320)));   
  font-family: Quicksand;    
}

a.link_inaktiv_2:visited {
  color: #454540; text-decoration:none;   
}

a.link_inaktiv_2:link {
  color: #454540; text-decoration:none;  
}

a.link_inaktiv_2:hover {
  color: rgb(255,102,0); 
  text-decoration:none;
  background: rgb(224,255,255);    
}

a.link_inaktiv_2:active {
  color: #454540;    
}





a.link_inaktiv {
  font-size: calc(10px + (18 - 10) * ((100vw - 320px) / (1600 - 320)));   
  font-family: Quicksand;    
}

a.link_inaktiv:visited {
  color: rgb(119,136,153); 
  text-decoration:none;   
}

a.link_inaktiv:link {
  color: rgb(51,102,255); text-decoration:none;  
}

a.link_inaktiv:hover {
  color: rgb(51,102,255); text-decoration:none;
  background: rgb(242,242,242);   
  
}

a.link_inaktiv:active {
  color: rgb(51,102,255);    
}




a.link_grund {
  font-weight: normal; 
  display: inline-block;
  font-family: Quicksand;    
  color: rgb(255,102,0) ; 
    font-size: 2.20em;
  color: #454540;
  !line-height: 1.5;
}

a.link_grund:visited {
  color: #454540; text-decoration:none;   
}

a.link_grund:link {
  color: #454540; text-decoration:none;  
}

a.link_grund:hover {
  color: rgb(255,102,0); text-decoration:none;   
}

a.link_grund:active {
  color: #454540;    
}




a.link_text {
  font-weight: normal; 
  display: inline-block;
  font-family: Quicksand;    
  color: rgb(255,102,0) ; 
  font-size: 0.99em;
  color: #454540;
  !line-height: 1.5;
}

a.link_text:visited {
  color: #454540; 
  text-decoration:none;   
}

a.link_text:link {
  color: #FCF3CF; text-decoration:none; 
  color: #454540; 
}

a.link_text:hover {
  color: rgb(255,102,0); text-decoration:none;  
  background: rgb(240,248,255) ;   
}

a.link_text:active {
  color: #454540;    
}





a.link_maps {
  font-weight: normal; 
  font-family: Quicksand;    
  color: rgb(255,102,0) ; 
  font-size: 0.99em;
  color: #454540;
  line-height: 1.5;
}

a.link_maps:visited {
  color: #454540; text-decoration:none;   
}

a.link_maps:link {
  color: #454540; text-decoration:none;  
}

a.link_maps:hover {
  color: rgb(255,102,0); text-decoration:none;   
}

a.link_maps:active {
  color: #454540;    
}



#menue_aktiv {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:1;
  padding-top:5px;     
  font-family: Quicksand;  
  color: rgb(255,102,0);           
  text-align: center;
  font-size: calc(17px + (38 - 20) * ((25vw - 320px) / (600 - 120)));
}



.abstand {  
  clear: left;
  !border: 1px solid green;    
} 




#menue_inaktiv {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:1;
  padding-top:5px;     
  font-family: Quicksand;  
  color: rgb(51,102,255);           
  text-align: center;
  font-size: calc(17px + (38 - 20) * ((25vw - 320px) / (600 - 120)));
}


#menue_links_abstand {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7.1%;
  z-index:1;
  padding:20px;     
  font-size: calc(16px + (28 - 16) * ((30vw - 320px) / (600 - 120)));
}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#979797;
	width:190px;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
  font-family: "helvetica neue", helvetica;
	background: #000;
	font-weight: 400;
	font-size: 15px;
	color: #aa3e03;
	overflow-y: scroll;
	overflow-x: hidden;
}
.ie7 body{
	overflow:hidden;
}
a{
	color: #333;
	text-decoration: none;
}
.container{
	!border: 2px solid red;
    position: relative;
	text-align: center;
}
.clr{
	clear: both;
}
.container > header{
	padding: 30px 30px 10px 20px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: left;
}
.container > header h1{
  font-family: "helvetica neue", helvetica;
	font-size: 35px;
	line-height: 35px;
	position: relative;
	font-weight: 400;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{

}
.container > header h2, p.info{
	font-size: 16px;
	font-style: italic;
	color: #f8f8f8;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

.slideshow,
.slideshow:after {
    !position: absolute;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    z-index: 0;
}
.slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}
.slideshow li span {
    width: 99%;
    height: 99%;
    position: absolute;
    top: 5px;
    left: 5px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}
.slideshow li div {
    z-index: 1;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
}
.slideshow li div h3 {
  font-family: "helvetica neue", helvetica;
  text-transform: uppercase;
  font-size: 80px;
  padding: 0;
  line-height: 200px;
	color: rgba(255,255,255, 0.8);
}
.slideshow li:nth-child(1) span { 
!background-image: url(https://24.media.tumblr.com/6ddffd6a6036f61a1f2b1744bad77730/tumblr_mzgz9vJ1CK1st5lhmo1_1280.jpg) 
}
.slideshow li:nth-child(2) span {
    !background-image: url(https://25.media.tumblr.com/aff8a8a33156a0eda844140764fd4359/tumblr_mzgz3tBAAU1st5lhmo1_1280.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
    !background-image: url('https://24.media.tumblr.com/f87b54bbce49e59debf7606662f54862/tumblr_n0hpxxDOJ91st5lhmo1_1280.jpg');
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
    !background-image: url(https://24.media.tumblr.com/0df0b55a4615378cf593241bad80a7da/tumblr_n0hpwpZrVc1st5lhmo1_1280.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
    !background-image: url(https://24.media.tumblr.com/b94dbb2a392198d5cc39c19959598229/tumblr_n0hpthN8VH1st5lhmo1_1280.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.slideshow li:nth-child(6) span {
    !background-image: url(https://31.media.tumblr.com/67d222ee577fc35faca83f0e08efc48e/tumblr_mzzqt7wyEU1st5lhmo1_1280.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
.slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -webkit-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -moz-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -o-transform: scale(1.05);
	    -o-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -o-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -ms-transform: scale(1.05);
	    -ms-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -ms-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.00);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.0);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.0);
	}
	100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -webkit-transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    -webkit-transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    -webkit-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -moz-transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    -moz-transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    -moz-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -o-transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    -o-transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    -o-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -ms-transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    -ms-transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    -webkit-transform: scale(10);
	}
	100% { opacity: 0 }
}
@keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    transform: scale(10);
	}
	100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .slideshow li span{
	opacity: 1;
}
@media screen and (max-width: 1140px) { 
	.slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) { 
	.slideshow li div h3 { font-size: 50px }
}
/*
  !border: 2px solid blue;
  */