html, body {
    width: 100%;
    font-size: 100%;
    font-family: Verdana, Helvetica, Arial, sans-serif; 
    color: #000000;
    margin: 0;
    padding: 0;
}

h1, h3{
    font-family: Verdana, Helvetica, Arial, sans-serif;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.container h3 {
    color: #00457A;
}

a img { 
    border:none;
}

.wrapper-header {
    width: 100%;
    margin-top: 2%;
}

header {
    background: #3b4043;
    width: 100%;
    position: fixed;
    display: inline-block;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 100%;
    top: 0;
    left: 0; 
    z-index: 100;
/*    opacity: 0.9%;	*/
}

header h1, h2 { 
    display: none; 
}

header .sitenav h3 {
    display: none;
}

#logo {
    margin: 0.9% 1%;
    padding-top: 1%;
    width: 10%;
}

.sitenav {
    float: right;
    padding-right: 2%;
}

nav .sitenav:after {
   content: "";
   display: block;
   clear: both;
}


#menu {
    margin-top: -4.9%;
}

.sitenav li {
    list-style-type: none;
    float: left;
}

.sitenav li:after {
   content: "";
   display: block;
   clear: both;
}

#menu > li {
    float: left;
    position: relative;
	}

#menu > li:after {
    content: "";
    display: block;
    clear: both;
}

#menu a {
    display: block;
	position: relative;
	z-index: 10;
	padding: 14px;
	text-decoration: none;
	color: white;
	line-height: 1;
	font-weight: 600;
	font-size: 0.9em;
	letter-spacing: -.05em;
	background: transparent;
    -webkit-transition: all .25s ease-in-out;		
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

#menu > li:hover > a {
	background: rgb(54, 131, 255);
	color: #fcfcfc;
	text-shadow: none;
}

ul #current {
	color: rgb(54, 131, 255);
}

#menu li ul  {
	position: absolute;
	left: 0;
	z-index: 1;
	width: 120px;
	padding: 0 0.2% 0 0;
	opacity: 0;
	visibility: hidden;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background: transparent;
	overflow: hidden;
	transform-origin: 50% 0%;
}

#menu li:hover ul {
	padding: 8px 0;
	background: #00457A;
	opacity: 1;
	visibility: visible;
	box-shadow: 1px 1px 7px rgba(0,0,0,.5);
	animation-name: swingdown;
	animation-duration: 1s;
	animation-timing-function: ease;
}


@keyframes swingdown {
	0% {
		opacity: .99999;
		transform: rotateX(90deg);
		}

	30% {			
		transform: rotateX(-20deg) rotateY(5deg);
		animation-timing-function: ease-in-out;
		}

	65% {
		transform: rotateX(20deg) rotateY(-3deg);
		animation-timing-function: ease-in-out;
		}

	100% {
		transform: rotateX(0);
		animation-timing-function: ease-in-out;
		}
}

#menu ul li a {
	padding-left: 15px;
	font-weight: 400;
	color: #ddd;
	text-shadow: none;
	border-top: dotted 1px transparent;
	border-bottom: dotted 1px transparent;
	transition: all .15s linear;
}

#menu ul li a:hover {
	color: #f39200;
	border-top: dotted 1px rgba(255,255,255,.15);
	border-bottom: dotted 1px rgba(255,255,255,.15);
	background: rgba(0,223,252,.02);
}

.wrapper-index {
    height: auto;
    width: 100%;
    margin-top: 4%;
}

main .slideshow h1 { 
    display: none; 
}

.slideshow {
    position: relative;
    padding-bottom: 23%;
}

/*layer 4 entfernen*/
.layer1, .layer2, .layer3 {
    position: absolute;
    max-width: 100%;
    height: auto;
}

.layer1 {
    animation: layer1animation 20s infinite;
}

.layer2 {
    animation: layer2animation 20s infinite;
}

.layer3 {
    animation: layer3animation 20s infinite;
}



/*die 1 auf 100*/
@keyframes layer1animation{
    0%{opacity: 1}
    17%{opacity: 1}
    33%{opacity: 0}
    50%{opacity: 0}
    67%{opacity: 0}
    100%{opacity: 0}
}

@keyframes layer2animation{
    0%{opacity: 0}
    17%{opacity: 0}
    33%{opacity: 1}
    50%{opacity: 1}
    67%{opacity: 0}
    100%{opacity: 0}
}

@keyframes layer3animation{
    0%{opacity: 0}
    50%{opacity: 0}
    67%{opacity: 1}
    100%{opacity: 1}
}


.slideshow:after {
   content: "";
   display: block;
   clear: both;
}

.wrapper-wiki {
    display: flex;
    margin: 6% 0 0 18%;
}

.wrapper-wiki h1 {
    color: #00457A;
    font-size: 1.5em;
}

.wrapper-wiki h5 {
    color: #00457A;
    font-size: 1em;
}

.wrapper-wiki h4 {
    color: #3b4043;
    font-size: 1em;
}

main #productbox h2 { 
    display: none; 
}

.productbox {
    width: 100%;
    float: left;
    margin-top: 23%;
} 

.productbox:after {
   content: "";
   display: block;
   clear: both;
}


.coloured {
    background: #f39200;
    background: cover;
    padding: 0.1% 0;
}

.coloured h1 {
    color: white;
    font-size: 120%;
    text-align: center;
}

section #text h1 {
    color: #666666;
    font-size: 140%;
    text-align: center;
    margin-top: 0;
    padding-top: 1%;
}


.faux-underline {
  border-bottom: 2px solid #00457A;
  padding-bottom: 2px;
  font-weight: bold;
}


.highlight {
  background-color: #ffff99;
  padding: 2px 4px;
/*  font-weight: bold;*/
}

.smart-underline {
  border-bottom: 2px dashed #FF9900;
  font-weight: bold;*/
  color: #333;
  padding-bottom: 2px;*/
}




.box2 {
    width: 180px;
    height: 180px;
    border-radius: 25px;
    background: #fff;
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
}

figure {
    margin: 0;
}

figcaption {
    padding-top: 4%;
    text-align: center;
}

#link {
    text-align: right;   
}


footer {
    background: #333333;
    width: 100%;
    margin-bottom: 0;
    float: left;
    opacity: 0.90;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #fff;
    text-align: center;
}

.footer:after {
   content: "";
   display: block;
   clear: both;
}

footer ul li h3 {
    padding: 0;
    margin: 0 3% 0 0;
}

footer ul li h4 {
    padding-bottom: 1%;
    margin: 0.5% 3% 0 0;
    font-size: 1em;
}

footer ul li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#number, #faxnumber, #emailaddress {
    display: inline-block;
    font-size: 80%;
}

#info {
    font-size: 65%;
    padding-top: 0.5%;
}

.copyright {
    border-top : 1px solid #4D4E50;
    background-color: #333333;
    font-size: 80%;
    opacity: 0.95;
    padding: 0;
    margin: 0;
}

/*Impressum Datenschutz*/


.wrapper-impressum {
    display: flex;
    width: 75%;
    margin: 8% 0 0 25%;
}

.wrapper-datenschutz {
    display: flex;
    width: 80%;
    margin: 8% 10% 4% 10%;
}

.datenschutz h1 {
    color: #3caa35;
}

.datenschutz h5 {
    color: #00457A;
}

.datenschutz h3 {
    color: #00457A;
}

.datenschutz h6 {
    color: #00457A;
    font-size: 1.1em;
}

.datenschutz ul li {
    list-style-type: none;
}

.wrapper-impressum h1 {
    padding: 0 0 1% 0;
}

#anschriftimpressum h3 {
    text-decoration: underline;
    font-size: 1.4em;
    padding: 1% 0 0 0;
}

#anschriftimpressum h2 {
    color: #3caa35;
    font-size: 1.8em;
    padding: 0;
}

#informationenimpressum h3 {
    font-size: 1.1em;
    color: #00457A;
}

#inhalt h3 {
    padding: 1% 0 0 0;
    text-decoration: underline;
    color: #00457A;
}

.aufzaehlung {
    font-size: 1em;
    font-weight: 600;
    color: #00457A;
}

.linksur {
    font-size: 1em;
    color: #000000;  
    padding: 0 5% 0 0;
}

.auf-name {
    padding: 0.9% 1.5% 1.7% 1.5%;
    font-size: 1em;
    color: #000000;
}


.box3 {
    width: 22%;
    height: 15%;
    display: inline;
    overflow: hidden;
    margin: 2% 2% 2% 7%;
    border-radius: 25px;
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
}

.mehr {
    text-align: center;
    color: #00457A;
    padding: 0.5% 0;
    font-size: 80%;
    background-color: darkgrey;
}

.mehr a {
    color: #FFF;
}

/* ------- */

.mark {
    color: darkgreen;
    font-size: 18px;
    font-weight: 600;
    padding-right: 0.8%;
}

.dn {
    height: 25px;
    background-color: lightgrey;
    margin: 4% 0 6% 0;
}

/*Button Two*/
.button-two {
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 6px 2px;
  outline: none;
  background-color: #00457A;
  border: none;
  border-radius: 4px;
  width: 110%;
}

.button-two:hover{
  background-color: #f39200;
}

.button-two:active {
  background-color: #f39200;
  box-shadow: 0 0 #95a5a6;
  transform: translateY(4px);
}

button{
  color: #FFF;
  text-align: center;
  padding: 0;
}

.button-contacts {
  text-align: center;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin: 0 0 0 4%;
  padding: 1%;
  outline: none;
  background-color: #f39200;
  border: none;
  border-radius: 4px;
  font-size: 0.7em;
}

/*Button One*/
.button-one {
  text-align: center;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 5px 30px;
  outline: none;
  background-color: #00457A;
  border: none;
  border-radius: 4px;
}

.button-one:hover {
  background-color: #f39200;
}

.button-contacts:hover {
  background-color: #f39200;
}

.button-one:active {
  background-color: #f39200;
  box-shadow: 0 0 #95a5a6;
  transform: translateY(4px);
}

.button-contacts:active {
  background-color: #00457A;
  box-shadow: 0 0 #95a5a6;
  transform: translateY(4px);
}

/*Button Info*/
.button-info {
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin-top: 2%;
  padding: 10px 50px;
  outline: none;
  background-color: #f39200;
  border: none;
  border-radius: 4px;
}

.button-info:hover{
  background-color: #00457A;
}

.button-info:active {
  background-color: #00457A;
  box-shadow: 0 0 #95a5a6;
  transform: translateY(4px);
}


.serverbox {
    padding: 5% 10% 1% 10%;
}

.serverbox h1, .infobox h1, .dokubox h1 {
    color: #fff;
    font-size: 190%;
    padding: 1%;
    text-align: left;
    background: #00457A;
    background: cover;
    border-radius: 4px;
}

.dokubox h1 span {
    font-size: 60%;
    color: #fff;
}

/*----*/

:-ms-input-placeholder {  
    color: lightgray; 
}
 
::-webkit-input-placeholder {
    color: lightgray; 
}
 
:-moz-placeholder { 
    color: lightgray; 
}
 
::-moz-placeholder {  
    color: lightgray; 
}


plan .h3 {
    color: #00457A;
}

/* --------------- */


/*----------*/


#second-entwicklung {
    font-size: 50%;
    padding-top: 1%;
 
}

#entwicklung-cont {
    margin: -2% 10% 2% 10%;
    background: azure;
    border-radius: 5px;
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
}

#entwicklung-cont2 {
    margin: -2% 10% 2% 15%;

}

#hardware, #software {
    background: #3b4043;
    background: cover;
    padding: 0;
    margin: 4% 0 1% 0;
}

#hardware h1, #software h1 {
    color: #ffffff;
    font-size: 1.5rem;
    text-align: left;
    padding: 1% 0 1% 6%;
}

.hardwareimg {
    margin: 0 1% 6% 6%;
    float: left;
    width: 250px;
    border-radius: 8px;
    -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
    -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.44);
}

.hardwareimg:after {
   content: "";
   display: block;
   clear: both;
}

#hardwareinfo, #softwareinfo {
    font-size: 1rem;
    padding: 0 0 1% 20%;
    width: 60%;
    color: #000000;
    float: left;
    overflow: hidden;
    list-style-type: none;
}

#hardwareinfo:after {
   content: "";
   display: block;
   clear: both;
}

#hardwareinfo2 {
    font-size: 1rem;
    padding: 0 0 1% 40%;
    width: 60%;
    color: #666666;
    float: left;
    overflow: hidden;
    list-style-type: none;
}

#hardwareinfo3 {
    font-size: 1rem;
    padding: 0 0 1% 46%;
    color: #666666;
}


#hardwareinfo h5{
    font-weight: bold;
    color: #00457A;
    font-size: 2.3rem;
    padding: 0;
}

#hardwareinfo span {
    font-weight: bold;
    color: #00457A;
    font-size: 1.4rem;
}


#hardwareinfo2 span {
    font-weight: bold;
    color: #00457A;
    font-size: 1.4rem;
}

#hardwareinfo span3 {
    font-weight: bold;
    font-size: 2rem;
    color: #666666;
}


#hardwareinfo spanr {
    font-weight: bold;
    color: #ea1515;
    font-size: 1.4rem;
}

#hardwareinfo spanrk {
    color: #ea1515;
    font-size: 0.8rem;
}

#hardwareinfo spann {
    font-weight: bold;
    color: #ea1515;
    font-size: 1rem;
}

#hardwareinfo ul {
    list-style-type: none;
    padding: 2% 0;
}

.wrapper-impressum, .wrapper-datenschutz {
    margin: 0;
}

.impressum {
    padding: 5% 10% 1% 10%;
}

.wrapper-impressum h1, .contactinfo h1, .datenschutz h1 {
    color: #fff;
    font-size: 190%;
    padding: 1%;
    background: #3b4043;
    background: cover;
    border-radius: 4px;
}

.datenschutz {
    margin: 5% 10% 1% 10%;    
}

.datenschutz span {
    font-size: 50%;
}

.datenschutz ul li {
    list-style: none;
    text-decoration: none;
}

.datenschutz h6 {
    font-size: 100%;
    margin: -0.2% 0 0 -0.2%;
}

#hinweis h5 {
    color: #00457A;
    font-size: 160%;
    padding: 0 0 0 1%;
}

#hinweis strong {
    font-style: italic;
    color: #00457A;
}

.datenschutz p, .erhebung p {
    padding: 0 0 0 2%;
}

#anschriftimpressum, #anschriftkontakt {
    line-height: 170%;
}

.kaffeepot img, .ballons img {
    width: 400px;
}

.board img {
    width: 600px;
}

.board2 img {
    width: 400px;
}

#informationenimpress ul li {
 font-size: 90%;    
}

#anschriftimpressum, #haftung, #urheber, #daten {
    padding-bottom: 1%;
}

#anschriftkontakt {
    padding-bottom: 0;
    padding-left: 4%;
}

#haftung {
    padding-top: 2%;
}

#informationenimpressum h3, #anschriftkontakt h3, #reportimpressum h3, #informationenimpress h3 {
    padding-top: 1%;
}

#anschriftkontakt h3 span, #anschriftimpressum h3 span {
    font-size: 150%;
}

#anschriftkontakt h3, #anschriftimpressum h3 {
    font-size: 110%;
}

#informationenimpressum h3, #reportimpressum h3, #haftung h3, #urheber h3, #daten h3, #bildnachweis h3, #informationenimpress h3 {
    text-decoration: underline;
}

#anschriftimpressum, #anschriftkontakt, #informationenimpressum h3, #reportimpressum h3, #haftung h3, #urheber h3, #daten h3, #bildnachweis h3, #informationenimpress h3 {
    color: #00457A;
}

#bildnachweis h3{
    font-size: 1.2rem;
}


.datenschutz h3 {
    color: #00457A;
    padding: 0 0 0 2%;
}

#report {
    padding: 0;
    margin-left: 0;
}

#report ul {
    list-style: none;
    line-height: 150%;
}

#anschrift, #haftung, #urheber, #daten, #report, #information, #hinweis, #erhebung, .cookie {
    text-align: justify;
    line-height: 23px;
    font-size: 1rem;
    width: 100%;
}

#bildnachweis {
    text-align: justify;
    line-height: 0;
    font-size: 0.9rem;
    width: 100%;    
}

#hinweis h3, #erhebung h3, .cookie h3 {
    padding-top: 0;
}

#erhebung span {
    font-size: 1.1rem;
    text-decoration: underline;
    color: #00457A;
}

#report h3 {
    margin: 0;
}

#report ul{
    padding: 0 0 2% 10%;
    margin: 0;
}

.angaben {
    font-size: 0.6em;
    line-height: 170%;
    padding-top: 0.1%;
}

.impressum ul li, #contactinformationen ul li {
    list-style: none;
    line-height: 160%;
    text-decoration: none;
}

.contacts, .contacts2 {
    font-size: 90%;
}

.contacts2 {
    padding: 2% 0;
}


#sicherheitsmeldung {
    text-align: left;
    background: #00457A;
    background: cover;
    padding: 0.3% 12% 0.3% 2%;
    margin-bottom: 5%;
}

#meldungen {
    padding: 0 5%;
}


#plugin {
    text-decoration: underline;
    color: #555;
}

hr {
  height: 30px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 1px 0 0 0;
  border-radius: 20px;
  margin-top: 60px;
}

hr:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

.wrapper-contact {
    margin: 0;
}

.contactinfo {
    padding: 5% 10% 1% 10%;
}


.markbox {
    margin: 0 2% 0 0;
}




/*---*/

aside {
    display: inline-block;
    width: 97%;
    padding-left: 1%;
}


div.hr {
    height: 1px;
    background: lightgrey no-repeat center;
    margin: 20px 0;
}

div.hr hr {
  display: none;
}

.login-page1 #info-anmeldung2 {
  font-size: 100%; 
  text-align: center;
}




/******** Tabelle Wettkampf **************/
/**************************************/


#ueberschrift {
    text-decoration: underline;
}

.table-wettkampf #platzierung {
    width: 33%;
    font-size: 140%;
    padding: 0.5% 0;
    background: #faf348;
}

.table-wettkampf #name {
    width: 33%;
    font-size: 140%;
    background: #faf348;
}

.table-wettkampf #ergebnis {
    width: 33%;
    font-size: 140%;
    background: #faf348;
}

.table-wettkampf td.infoplatz {
    font-size: 130%;
    padding: 0.5% 0;   
    font-style: italic;
    text-align: center;
}

.table-wettkampf td.nummer {
    padding: 1% 0;
    text-align: center;
    font-size: 130%;   
}

.table-wettkampf td.name {
    padding: 1% 0 1% 10%;
    text-align: left;
    font-size: 130%;   
}

.table-wettkampf td.end {
    padding: 1% 0;
    text-align: center;
    font-size: 130%;   
}

.table-wettkampf tr:nth-of-type(odd) {
    background: #e8e8e8;
}

.table-wettkampf {
    font-size: 90%;
    padding: 3% 0 0 0;
    color: #666666;
    font-weight: 600;
}

.table-wettkampf td {
    text-align: left;
}






/*###############Media Queries################*/

/*################## 1920px ####################*/

@media screen and (max-width: 1920px) {
    
#logo {
    margin: 0;
    padding: 0.5% 0 0.2% 0.5%;
    width: 9%;
}

#menu {
    margin-top: -4.9%;
}  

figcaption {
    padding-left: 0;
} 
    
.board2 img {
    width: 400px;
}
    
.board3 img {
    width: 800px;
}

    
}

/*################## 1600px ####################*/

@media screen and (max-width: 1600px) {

#logo {
    padding-bottom: 0.7%;
}
    

#hardware h1 {
    margin-top: 8%;
}  
    
#number, #faxnumber, #emailaddress {
    width: 13%;
}  

#bildergalerie {
   padding: 8% 0 0 5%;
}
    
}


/*################## 1500px ####################*/

@media screen and (max-width: 1500px) {



}

/*################## 1250px ####################*/

@media screen and (max-width: 1250px) {

.slideshow {
    margin-top: 8%;       
}   
    
.boxheader h4 {
    padding: 0 12% 0 0;
}    
    
    
}

/*################## 1200px ####################*/

@media screen and (max-width: 1200px) {
    
.burger-nav {
    display: block;
    height: 30px;
    width: 100%;
    margin: -4% 0 5% 0;
    padding-bottom: 1%;
    background: url(images/menu.png) no-repeat 98% center;
    cursor: pointer;
}
    
header nav ul {
    overflow: hidden;
    height: 0;
}    
    
header nav ul.open {
    height: auto;
} 
    
header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
    display: block;
    border-bottom: 0.5px solid silver;
    font-size: 100%;    
}
    
header nav ul li:after {
    content: "";
    display: block;
    clear: both;
}
 
#menu {
    margin-top: -6.9%;
}    
    
.slideshow {
    margin-top: 9.2%;       
}     
    
.wrapper-index {
    margin-top: 5.5%;
}
  
    
.box2 {
    width: 150px;
    height: 150px;
} 

#hardware h1 {
    margin-top: 10%;
} 

.boxheader h4 {
    padding-right: 21%;
}
    
#number, #faxnumber, #emailaddress {
    display: inline-block;
    font-size: 80%;
}

#bildergalerie {
   padding: 10% 0 0 5%;
}

}


/*################## 1100px #####################*/

@media screen and (max-width: 1100px) {

    
.slideshow {
    margin-top: 9%;       
} 
    
#hardware h1 {
    margin-top: 16%;
}  
    
#hardwareinfo2 {
   margin: 2% 0 0 0;    
}    
    
#bildergalerie {
   padding: 10% 0 0 5%;
}
    
.kaffeepot img, .ballons img {
    width: 300px;
}
    
.board img {
    width: 400px;
}
    
.board2 img {
    width: 400px;
}
    
.board3 img {
    width: 800px;
}
    
.table-wettkampf td.nummer {
    font-size: 110%;   
}    
    
.table-wettkampf td.name {
    padding: 1% 0 1% 6%;
    font-size: 110%;   
}

.table-wettkampf td.end {
    font-size: 110%;   
}
    
    
    
}




/*################# 1024px ####################*/

@media screen and (max-width: 1024px) {

.burger-nav {
    display: block;
    height: 20px;
    width: 100%;
    margin: -4% 0 5% 0;
    background: url(images/menu.png) no-repeat 98% center;
    cursor: pointer;
}
    
header nav ul {
    overflow: hidden;
    height: 0;
}    
    
header nav ul.open {
    height: auto;
} 
    
header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
    display: block;
    border-bottom: 0.5px solid silver;
    font-size: 100%;    
}
    
header nav ul li:after {
    content: "";
    display: block;
    clear: both;
}
    
 
.box2 {
    width: 140px;
    height: 140px;
} 
    
.board2 img {
    width: 300px;
}
    
.board3 img {
    width: 600px;
}

.hardwareimg {
    margin-left: 27%;
}    

#bildergalerie {
   padding: 10% 0 0 20%;
}       
    
    
}

/*################# 992px ####################*/

@media screen and (max-width: 992px) {
    
.burger-nav {
    display: block;
    height: 20px;
    width: 100%;
    margin: -4% 0 5% 0;
    background: url(images/menu.png) no-repeat 98% center;
    cursor: pointer;
}
    
header nav ul {
    overflow: hidden;
    height: 0;
}    
    
header nav ul.open {
    height: auto;
} 
    
header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
    display: block;
    border-bottom: 0.5px solid silver;
    font-size: 100%;    
}
    
header nav ul li:after {
    content: "";
    display: block;
    clear: both;
}
    
.board2 img {
    width: 200px;
}
    
.board3 img {
    width: 600px;
}
    
}

/*################# 976px ####################*/


@media screen and (max-width: 976px) {
    
.burger-nav {
    display: block;
    height: 20px;
    width: 100%;
    margin: -4% 0 5% 0;
    background: url(images/menu.png) no-repeat 98% center;
    cursor: pointer;
}
    
header nav ul {
    overflow: hidden;
    height: 0;
}    
    
header nav ul.open {
    height: auto;
} 
    
header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
    display: block;
    border-bottom: 0.5px solid silver;
    font-size: 100%;    
}
    
header nav ul li:after {
    content: "";
    display: block;
    clear: both;
}
    
#hardwareinfo2 {
   margin: 2% 0 0 -7%;    
}    
    
#bildergalerie {
   padding: 10% 0 0 14%;
}
    
}

/*##################812px#####################*/

@media screen and (max-width: 812px) {

.burger-nav {
    display: block;
    height: 20px;
    width: 100%;
    margin: -4% 0 5% 0;
    background: url(images/menu.png) no-repeat 98% center;
    cursor: pointer;
}
    
header nav ul {
    overflow: hidden;
    height: 0;
}    
    
header nav ul.open {
    height: auto;
} 
    
header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
    display: block;
    border-bottom: 0.5px solid silver;
    font-size: 100%;    
}
    
header nav ul li:after {
    content: "";
    display: block;
    clear: both;
}
    
.slideshow {
    margin-top: 9%;       
} 
    
    
#hardware h1 {
    margin-top: 16%;
}    
    
#hardwareinfo2 {
   margin: 2% 0 0 -7%;    
}    
    
#bildergalerie {
   padding: 10% 0 0 5%;
}
    
#taichi-abteilung {
    display: none;
}    
    
.table-wettkampf #platzierung {
    font-size: 130%;
}

.table-wettkampf #name {
    font-size: 130%;
}

.table-wettkampf #ergebnis {
    font-size: 130%;
}    
    
.table-wettkampf td.infoplatz {
    font-size: 120%;
}
    
.board2 img {
    width: 200px;
}
    
.board3 img {
    width: 600px;
}
    
}

/*################## 768px #####################*/


@media screen and (max-width: 768px) {

.burger-nav {
    display: block;
    height: 20px;
    width: 95%;
    margin: -4% 0 5% 0;
    background: url(images/menu.png) no-repeat 98% center;
    cursor: pointer;
}
    
header nav ul {
    overflow: hidden;
    height: 0;
}    
    
header nav ul.open {
    height: auto;
} 
    
header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
}

header nav ul li:after {
    display: block;
    border-bottom: 0.5px solid silver;
    margin: 0;
    font-size: 100%;
}
    
.slideshow {
    margin-top: 9%;       
}  
        
.coloured h1 {
    font-size: 80%;
}

.boxheader h1 {
    font-size: 1em;
}
    
.boxheader h4 {
    font-size: 0.9em;
}    
    
section #text h1 {
    font-size: 100%;
}
    
#text {
    padding-left: 10%;
}  
 
.box2 {
    width: 120px;
    height: 120px;
} 
    
#hardware h1 {
    margin-top: 15%;
}  

#hardware h5 {
    font-size: 1.0em;
} 
    
#hardwareinfo h5 {
    font-size: 1.3em;
}
    
#hardwareinfo h3 {
    font-size: 1.1em;
}
    
#hardwareinfo span {
    font-size: 1em;
}
    
#hardwareinfo ul li {
    font-size: 0.9em;
}
    
#contactaddress {
     font-size: 70%;        
}
    
#info {
    font-size: 45%;
}  
    
#number, #faxnumber, #emailaddress {
    width: 100%;
    text-align: center;
}   

.wrapper-footer h3 {    
    font-size: 0.9em;
}
    
.wrapper-footer h4 {    
    font-size: 0.8em;
}
    
.wrapper-footer #info {    
    font-size: 0.6em;
    padding-right: 3%;
}
    
#hardware h1 {
    font-size: 1.3rem;
}
    
.board2 img {
    width: 200px;
}
    
.board3 img {
    width: 400px;
}
   
}


/*################## 480px #####################*/


@media screen and (max-width: 480px) {

#logo {
    width: 40%;
}    
    
.burger-nav {
    display: block;
    height: 20px;
    width: 100%;
    margin: -4% 0 5% 0;
    background: url(images/menu.png) no-repeat 98% center;
    cursor: pointer;
}
    
header nav ul {
    overflow: hidden;
    height: 0;
}    
    
header nav ul.open {
    height: auto;
} 
    
header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
}

header nav ul li {
    display: block;
    border-bottom: 0.5px solid silver;
    margin: 0;
}

#menu a {
	padding: 10px;
}
    
.slideshow {
    display: none;       
}    
  
.wrapper-wiki {
    margin-left: 8%;
}
    
.boxheader h1 {
    padding: 18% 5% 0 0;
    font-size: 1em;
}
    
.boxheader h5 {
    font-size: 0.9em;
}    
   
#hardware h1 {
    margin-top: 25%;
    font-size: 1.2em;
}  
    
#hardwareinfo h5 {
    font-size: 1em;
}

#hardwareinfo h3 {
    font-size: 0.9em;
}
    
    
#hardwareinfo {
    padding: 0 0 1% 4%;
    width:100%;
    margin: 0;
}
    
#hardwareinfo span3 {
    font-size: 100%;
}
 
.box {
    width: 60%;
    padding-left: 6%;
}    
    
.coloured h1 {
    font-size: 120%;
}

section #text h1 {
    font-size: 90%;
    margin-right: 12%;
}
  
.box2 {
    width: 200%;
    height: 200%;
} 

figure {
    padding: 2px;
    width: 70px;
}

figcaption {
    font-size: 90%;
    padding-left: 55px;
}       
    
.wrapper-footer ul {
    margin: 0;
    padding: 0;
}

footer ul li h3 {
    font-size: 100%;
    padding: 0 ;
}  
    
#contactaddress {
     font-size: 50%;        
} 
    
#number, #faxnumber, #emailaddress {
    width: 100%;
    font-size: 50%;
    color: #fff;
    list-style-type: none;
    display: block;
}
    
#info {
    font-size: 35%;
}   
    
.box3 {
    width: 50%;
    height: 40%;
    margin-left: 25%;
} 
    
article .sbox {
    width: 49%;
    margin: 2% 10% 8% 20%;
}  
    
.form-group {
    margin-left: 30%;
}
      
.infobox h1 {
    font-size: 130%;
}
    
.container h3 {
    font-size: 90%;
}
    
.container p {
    font-size: 80%;
}
    
.wrapper-entwicklung {
    margin: 7% 10% 11% 8%;
    width: 80%;
}
    
.datenschutz h1 {
    margin-top: 20%;
} 

#hinweis h5 {
    font-size: 120%;
}    
    
#allgemein {
    margin-top: 23%;
}    
    
#allgemein h1 {
    font-size: 150%;
    color: #fff;
    margin: 2% 0 0 0;    
}    
    
.hardwareimg {
    margin: 0 1% 6% 12%;
}    
  
.wrapper-impressum h1 {
    margin-top: 25%;
}    


.button-one {
    font-size: 0.8em;
} 
    
#emailaddress {
    font-size: 0.8em;
}
    
#hardwareinfo2 {
   display: none;   
}  
    
    
#bildergalerie {
   padding: 25% 0 0 7%;
}
    
.kaffeepot img, .ballons img {
    width: 200px;
}
    
.board img {
    width: 200px;
}
    
.board2 img {
    width: 100px;
}
    
.board3 img {
    width: 300px;
}
    
#hardware h1 {
    font-size: 0.7rem;
}

  #ueberschrift {
    font-size: 80%;
}    
   
.table-wettkampf #platzierung {
    width: 20%;
    font-size: 100%;
}

.table-wettkampf #name {
    width: 20%;
    font-size: 100%;
}

.table-wettkampf #ergebnis {
    width: 20%;
    font-size: 100%;
}  
    
.table-wettkampf td.nummer {
    font-size: 100%;   
}

.table-wettkampf td.name {
    font-size: 100%;   
}

.table-wettkampf td.end {
    font-size: 100%;   
}
    
table.table-wettkampf {
    padding-left: 80%;
}
    
.table-wettkampf td.infoplatz {
    font-size: 80%;
}
    
}  

/*################## 320px #####################*/


@media screen and (max-width: 320px) {

#logo {
    width: 40%;
}    
    
.burger-nav {
    display: block;
    height: 20px;
    padding: 0 1% 6% 0;
    background: url(images/menu.png) no-repeat 98% center;
    cursor: pointer;
}
    
header nav ul {
    overflow: hidden;
    height: 0;
}    
    
header nav ul.open {
    height: auto;
} 
    
header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
}

header nav ul li {
    display: block;
    border-bottom: 0.5px solid silver;
    margin: 0;
}

.slideshow {
    display: none;       
}    
   
#hardware h1 {
    margin-top: 55%;
    font-size: 0.8em;
}      
    
.boxheader {
    margin: 20% 0 0 0;
}

   
    
.productbox {
    padding: 5% 0 5% 0;    
} 

.box {
    width: 60%;
    padding-left: 6%;
}    
    
.coloured h1 {
    font-size: 80%;
}


section #text h1 {
    font-size: 90%;
}
    
.offer {
    margin: 1% 25% 2% 25%;
} 

.box2 {
    width: 200%;
    height: 200%;
} 

figure {
    padding: 2px;
    width: 70px;
}

figcaption {
    font-size: 90%;
    padding-left: 45px;
}       
    
.box3 {
    width: 90%;
    height: 80%;
    margin-left: 5%;
} 
    
  
.wrapper-footer ul {
    margin: 0;
    padding: 0;
}

footer ul li h3 {
    font-size: 100%;
    padding-top: 2%;
}    
    
#contactaddress {
     font-size: 50%;        
} 
    
#number, #faxnumber, #emailaddress {
    font-size: 50%;
}
    
article .sbox {
    width: 59%;
    margin-left: 15%;
} 
    

#allgemein {
    margin-top: 35%;
}    
    
#allgemein h1 {
    font-size: 100%;
}    

#allgemein p {
    font-size: 80%;
}    
    
.hardwareimg {
    width: 80%;
}    
    
.datenschutz h1 {
    margin-top: 50%;
    font-size: 120%;
}    
    
#emailaddress {
    font-size: 0.9em;
}
   
.container {
    margin: 0 0 0 -12%;
}
    
#bildergalerie {
   padding: 55% 0 0 0;
}  
    
.kaffeepot img, .ballons img {
    width: 150px;
}
   
.board img {
    width: 100px;
}
    
.board2 img {
    width: 100px;
}
    
.board3 img {
    width: 300px;
}    
    
table.table-wettkampf {
    padding-left: 80%;
}
    
.table-wettkampf #platzierung {
    font-size: 80%;
}

.table-wettkampf #name {
    font-size: 80%;
}

.table-wettkampf #ergebnis {
    font-size: 80%;
} 
    
.table-wettkampf td.nummer {
    font-size: 60%;   
}

.table-wettkampf td.name {
    font-size: 60%;   
}

.table-wettkampf td.end {
    font-size: 60%;   
}
  
.table-wettkampf td.infoplatz {
    font-size: 60%;
}
    
}