html, body{									/*body wird angesprochen*/
	margin: 0px;
	padding: 0px;
	height: 100%;							
	text-align: center;						/*damit der ganze Text, der sich im Body befindet, mittig ist*/
}

	
section{									/*jede Section wird angesprochen*/
	min-height: 100%;   					/*damit jede Section so groß wie das Display des Gerätes ist*/
}

	
a{											/*Die Links werden angesprochen*/
	text-decoration: none;					/*damit die Elemente in der Menüleiste nicht mehr unterstrichen sind*/
}


li{											/*jede Liste wird angesprochen*/
	list-style-type: none; 					/*damit die Aufzählungspunkte der Listen entfernt werden*/
}


h1, h2, a{									/*Überschrift h1,h2 und Links werden angesprochen*/
	font-family: 'Raleway', sans-serif; 	/*Schriftart wird geändert; Falls Raleway nicht verwendet werden kann wird sans-serif verwendet*/
	font-weight: 500; 						/*Schrift wird dünner*/
	color: #303030;							/*Schriftfarbe wird geändert (grau)*/
	}
	
h1, h2{										/*Überschrift h1 und h2 werden angesprochen*/
	color: #405687;							/*Schriftfarbe der Überschrift h1 und h2 werden geändert (blau); alles andere bleibt grau*/
}

h1{											/*Überschrift h1 wird angesprochen*/
	font-size: 100px;						/*Schriftgröße wird geändert*/
}

h2{											/*Überschrift h1 wird angesprochen*/
	font-size: 35px;						/*Schriftgröße wird geändert*/
	padding-top: 7%;						/*damit die Seite an das Display des Gerätes, mit dem man sich auf der Website befindet, angepasst wird*/
}

h3{											/*Überschrift h3 wird angesprochen*/
	color: black;							/*Farbe der Überschrift h3 wird schwarz*/
}

p{											/*der Text wird angesprochen*/
	font-family: 'Raleway', sans-serif; 	/*Schriftart wird geändert*/
	color: #303030;							/*Schriftfarbe wird geändert (grau)*/
}

hr{											/*Trennlinie wird angesprochen*/
	width: 700px;							/*Breite der Trennlinie*/
	height: 1px;							/*Höhe der Trennlinie*/
	background: #303030;					/*Farbe der Füllung der Linie*/
	border: 0px;							/*Entfernung des Randes der Linie*/
}


/*HEADER******************************************************************************************************************************************************/


header{										/*Header wird angesprochen*/
	width: 100%;							/*damit die Weite vom Header sich an das Display des Gerätes anpasst*/
	height: 75px;							/*header wird kleiner*/
	position: fixed;						/*header geht beim scrollen nach unten/oben mit*/
	top: 0;									/*die Entfernung vom Header vom oberen Rand der Seite*/
	left: 0;								/*die Entfernung vom Header vom linken Rand der Seite*/
	background: white; 						/*der Hintergrund des Headers wird weiß*/
	z-index: 10;							/*damit der Header immer im Vordergrund ist (keine Ausnahmen)*/
}

header nav{									/*Navigation wird angesprochen*/
	float: right; 							/*damit die Navigationsleiste sich rechts befindet*/
	margin: 10px 10px 0 0;					/*es soll vom oberen Rand 10px entfernt sein; rechts auch 10px; unten 0px und links ebenfalls 0px*/
}

header nav ul li{							/*die Liste der Navigation wird angesprochen*/
	float: left; 							/*die einzelnen Punkte der Liste werden nebeneinander angezeigt*/
	margin-right: 20px; 					/*der Abstand zwischen den einzelnen Auswahlmöglichkeiten soll 20px sein*/
}

header nav ul li a{							/*Auswahlmöglichkeiten werden angesprochen*/
	font-size: 18px;						/*Schriftgröße der Auswahlmöglichkeiten*/
}

header nav ul li:hover{			
	opacity: 0.7;							/*wenn man über die Auswahlmöglichkeiten wird die ausgewählte etwas heller*/
} 

#logo{										/*Logo wird angesprochen*/
	transition: all 200ms; 
	-webkit-transition: all 300ms;			/*Browser Support: damit das transition bei jedem Browser funktioniert und es keine Probleme gibt*/
	-moz-transition: all 300ms;
}

#logo{										/*Logo wird angesprochen*/
	width: 100px;							/*das Logo soll 100px breit sein*/
	float: left; 							/*es soll sich links befinden*/
	margin: 5px 0px 0px 10px;	  			/*es soll vom oberen Rand 10px entfernt sein; rechts 0px; unten 0px und links wieder 10px*/
}

#logo:hover{
	opacity: 0.7;							/*wenn man über das Logo geht wird es heller*/
}

#logo img{									/*das Logo direkt (also das Bild) wird angesprochen*/
	width: 70%;								/*damit das Logo genau in den Container passt*/
}


/*HOME********************************************************************************************************************************************************/


#home{																/*Section Home wird angesprochen*/
	background: linear-gradient(to top, #869ac6 -70%, white 66%); 	/*Farbverlauf im Hintergrund*/
	background-attachment: fixed;									/*Hintergrund passt sich beim runter scrollen an*/
	
	border: 1px solid transparent;									/*Rahmen der Website ist durchsichtig*/
}


#home ul {
	padding: 0px;
	display: block;
	
	
}


#home ul li {

	display: inline-block;	/*damit die Auswahlmöglichkeiten der Navigationsleiste nebeneinander sind*/
	margin: 10px;
	
}

	
#home ul li img {		/*Flaggen werden angesprochen*/		
	width: 30px;		/*Breite des Bildes wird verändert*/
	height: 30px;		/*Höhe des Bildes wird verändert*/

}

#German {										/*Deutsch-Flagge wird angesprochen*/
	transition: all 200ms; 						/*Damit die Flagge langsam heller wird wenn man den Cursor darauf platziert*/
	-webkit-transition: all 300ms;				/*Browser Support: damit das transition bei jedem Browser funktioniert und es keine Probleme gibt*/
	-moz-transition: all 300ms;
	
	
}


#German:hover {
	opacity: 0.7;		/*die Deutsch-Flagge wird, wenn man mit dem Curser darüber geht, heller*/
}
	
	
#English {										/*Englisch-Flagge wird angesprochen*/
	transition: all 200ms; 						/*Damit die Flagge langsam heller wird wenn man den Cursor darauf platziert*/
	-webkit-transition: all 300ms;				/*Browser Support: damit das transition bei jedem Browser funktioniert und es keine Probleme gibt*/
	-moz-transition: all 300ms;

}


#English:hover{
	opacity: 0.7;		/*die Englisch-Flagge wird, wenn man mit dem Curser darüber geht, heller*/
}


/*TUTORIAL****************************************************************************************************************************************************/


#Hinweis_Youtube {
	border-radius: 200px;	/*der Radius des Rahmens des Hinweises wird bearbeitet*/
}


/*ANLEITUNG***************************************************************************************************************************************************/


#Hinweis {
	border-radius: 200px;	/*der Radius des Rahmens des Hinweises wird bearbeitet*/
	width:260;
	height:260;
}


/*ÜBER UNS****************************************************************************************************************************************************/


#uberuns img{								/*Teammitglieder-Bild wird angesprochen*/
	width: 355px;
}


#uberuns p{
	font-size: 20px;						/*Schriftgröße*/
	width: 804px;							/*Breite des Absatzes*/
	margin: 0px auto 0px auto;				/*damit der Text genau in der Mitte liegt*/
}


.box
{
	
	font-size: 16px;						/*Schriftgröße wird geändert*/
	font-family: 'Raleway', sans-serif; 	/*Schriftart wird geändert*/
	color: black;							/*Schriftfarbe wird geändert*/
	
	border: 3px solid black;				/*der Rahmen der Boxen wird bearbeitet*/
	background-color: #4e618a;				/*die Hintergrundfarbe der Boxen wird Blau*/

	
	box-shadow: 7px 7px 15px silver;		/*ein Schatten wird bei den Textboxen hinzugefügt*/
	
	display: inline-block;

	margin: 10px;
	padding: 35px;
	vertical-align: middle;					/*damit sich alles in den Textboxen auch vertikal mittig befindet*/
	text-align: middle;						/*damit sich der Text  mittig befindet*/
}


#box1 {
	max-width: 265px;						/*Anpassung der Größer der Box1*/
	border-radius: 200px;					/*Radius des Rahmens der Box1 wird bearbeitet*/
	-webkit-border-radius: 200px;			/*Browser Support*/
	-moz-border-radius: 200px;
	width: 270px;							/*Anpassung der Größe*/
	height: 255px;
	margin: -780px -726px 66px 168px;		/*Anpassung der Lage*/
}
#box2 {
	max-width: 356px;
	border-radius: 200px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	width: 350px;
	height: 345px;
	padding: 8px 31px 35px 30px;
	margin: -146px -120px 0px 78px;
}


/*PARTNER UND SPONSOREN***************************************************************************************************************************************/


#partnersponsoren{							/*Section Partner und Sponsoren wird angesprochen*/			
	width: 900px;
	margin: 0px auto 0px auto;
}

#partnersponsoren ul{
	padding: 0px;							/*damit auch die nicht sichtbaren Aufzählungspunkte verschwinden*/
}

#partnersponsoren ul li{
	width: 33.3%;							/*damit jeder Partner/Sponsor nur 33.3% Platz hat*/
	float: left;							/*die einzelnen Partner/Sponsoren sind nebeneinander*/
}

#partnersponsoren ul li img {
	width: 230px;							/*bilder kleiner machen*/
	height: 230px;
	margin-bottom: 40px;					/*abstand zwischen den einzelnen Bildern ändern*/
	margin-left: 40px;
}

	

/*FOOTER******************************************************************************************************************************************************/
	
	
	
.footer-basic {
  padding:40px 0px;					/*Lage des Footers wird bearbeitet*/
  background-color:#ffffff;			/*Hintergrundfarbe des Footers wird bearbeitet*/
  color:#4b4c4d;					/*Die Farbe des Textes, welcher sich im Footer befindet wird grau*/
}

.footer-basic ul {					
  padding:0px;
  list-style:none;					/*alle Erkennungsmerkmale einer Liste werden entfernt*/
  text-align:center;				/*Der Text soll sich mittig befinden*/
  font-size:18px;					/*Schriftgröße wird angepasst*/
  line-height:1.6;					/*Höhe des Footers wird bearbeitet*/
  margin-bottom:0px;
}

.footer-basic li {
  padding:0px 10px;
}

.footer-basic ul a {
  color:inherit;					/*die Farbe von dem Element, von dem dieses "erbt" wird verwendet ("Elternelement")*/
  text-decoration:none;				/*die üblichen Merkmale der Links werden entfernt*/
  opacity:0.8;
}

.footer-basic ul a:hover {
  opacity:1;						/*wenn man mit dem Mauszeiger über einen Link im Footer geht wird dieser etwas heller*/
}

.footer-basic .copyright {			/*der Copyright-text wird angesprochen*/
  margin-top:15px;					/*Entfernung vom oberen Rand des Footers*/
  text-align:center;				/*der Text soll sich mittig befinden*/
  font-size:13px;					/*Schriftgröße wird geändert*/
  color:#aaaaaa;					/*Farbe wird geändert*/
  margin-bottom:0;					/*Entfernung vom unteren Rand*/
}

.footer-basic ul {
	padding: 0px;
	display: block;	
}

.footer-basic ul li {
	display: inline-block;
	margin: 10px;
}

.footer-basic ul li img {
	width: 80px;							/*die Bilder werden kleiner gemacht*/
	height: 80px;
	margin-bottom: -31px;					/*der Abstand zwischen den einzelnen Bildern wird geändert*/
	margin-left: 0px;
	}


/*SLIDESHOW***************************************************************************************************************************************************/
	
	
.slideshow-container{
    height: 500px;			/*Höher der Slideshow wird geändert*/
    overflow: hidden;		/*Falls ein Bild größer als die zu Verfügung 
								gestellte "Box" sein sollte wird es hinter 
								die Box gelegt damit man den überstehenden 
								Rand nicht sieht*/
}


.slideshow-container > div{
    width: 350px;
    height: 350px;
    margin: 0px 0px 0px 322px;
    overflow: hidden;
}


.slide{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center;	/*das jeweils angezeigte Bild soll sich in der Mitte der Slideshow befinden*/
    background-repeat: no-repeat;	/*damit jedes Bild abwechselnd angezeigt wird*/
    background-size: cover;			/*damit die "Box" mit dem jeweiligen Bild ausgefüllt ist*/
    position: relative;
    animation: slide 12s infinite;	/*Die Slideshow soll unendlich lange laufen und pro Slide 12 Sekunden benötigen*/
    
}


.slide:nth-child(1){									/*Erstes Bild der Slideshow*/
    left: 0;
    z-index: 4;											/*gibt die Reihenfolge an*/
    background-image: url(images/slideshow_1.jpeg);		/*Bild wird eingefügt*/
    animation-delay: -1s;								/*wann der "Slide" stattfinden soll*/
}
.slide:nth-child(2){
    left: 0;
    top: -100%;
    z-index: 3;
    background-image: url(images/slideshow_2.jpeg);
    animation-delay: 2s;
}
.slide:nth-child(3){
    left: 0;
    top: -200%;
    z-index: 2;
    background-image: url(images/slideshow_3.jpeg);
    animation-delay: 5s;
}
.slide:nth-child(4){
    left: 0;
    top: -300%;
    z-index: 1;
    background-image: url(images/slideshow_4.jpeg);
    animation-delay: 8s;
}

@keyframes slide{					/*durch @keyframes kann man die einzelnen Schritte der Bilder der Slideshow "formatieren"*/
    0%{								/*damit das 1.Bild nach dem 4.Bild wieder angezeigt wird*/
        left: 100%;
		width: 100%;		
    }
    5%{								/*damit das 1.Bild bei 5% angezeigt wird*/
        left: 0%;
    }
    25%{							/*damit das 2.Bild bei 25% angezeigt wird*/
        left: 0%
    }
    30%{							/*damit das 3.Bild bei 30% angezeigt wird*/
        left: -100%;
		width: 100%;
    }
    100%{
        left: -100%;				/*damit das 4.Bild bei 100% angezeigt wird*/
    }
}