* {
  margin: 0;
  box-sizing: border-box;
}

/*.grid-container .item6 table {
    width: 100%;
}*/



@font-face { 
font-family: "opensans"; 
/*src: url("opensans-regular.ttf"); */
src: local('opensans-regular'),
	   url('fonts/opensans-regular.ttf') format('truetype'),
       url(fonts/opensans-regular.woff2) format('woff2'), /* Super Modern Browsers */
       url(fonts/opensans-regular.woff) format('woff'); /* Modern Browsers */
}

@font-face { 
font-family: "osi"; 
src: local('opensans-italic'),
	   url('fonts/opensans-italic.ttf') format('truetype'),
       url("fonts/opensans-italic.woff2") format('woff2'), /* Super Modern Browsers */
       url("fonts/opensans-italic.woff") format('woff'); /* Modern Browsers */ 
font-style: italic;
}

@font-face { 
font-family: "opensanssemi"; 
src: local('opensans-semibold'),
	   url('fonts/opensans-semibold.ttf') format('truetype'),	
       url('fonts/opensans-semibold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/opensans-semibold.woff') format('woff'); /* Modern Browsers */ 
}

body {
	max-width: 100%;
	font-size: 100%;
}

html {
	font-size: 100%;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header'
    'pic'
	'gap' 
    'desc'
	'player'
	'texte'
	'footer';
    gap: 0px;
    background-color: white;
    padding: 0px;
}

.grid-container > div {
  padding: 0px;
  font-size: 16px;
}

.item1 {
  grid-area: header;
  background-color: white;
  text-align: center;
  color: #ffffff;
}

.item2 {
  	grid-area: pic;
	align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
	
	
}

.item3 {
	grid-area: gap;
	margin-top: 480px;
	
}

.item4 {
  	grid-area: desc;
	margin-left: 30%;
	margin-right: 30%;
	margin-top: 0px;
	padding: 50px;
	
	
}

.item5 {
  grid-area: player; 
  align: center;
  border: 0px solid #0099cc;
  background-color: white;
  margin: auto;
  color: #000000;
}

.item6 {
  grid-area: texte;
  background-color: #ffffff;
  color: #000000;
  margin-left: 15%;
  margin-right: 15%;
 }

.item6i {
  grid-area: texte;
  background-color: #ffffff;
  color: #000000;
  margin-left: 0%;
  margin-right: 0%;
 }

.item7 {
  grid-area: footer;
  background-color: #8fa9b0;
  color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	align: center;
}


a {
text-decoration:none;
color:#000000;	
}



p {
position:relative;
background-color: #FFFFFF;
border: 0px solid #000000;
}

h1 {
font-family: "osi";/*, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";*/
font-size:20px;	
font-style: italic;
color: #8fa9b0;
background-color: #FFFFFF;
text-align: right;
}

h2 {
font-family: "opensans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 25px;
color: #FFFFFF;
background-color: #8fa9b0;
text-align: center;
position:relative;
}

h3 {
font-family: "opensans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size:30px;
color: #000000;
background-color: #FFFFFF;
text-align: justify;
/*position: relative;	*/
}

h4 {
    font-family: "opensans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size:25px;
    color: #8fa9b0;
    background-color: #FFFFFF;
    text-align: justify;
/*position: relative;	*/
}

h5 {
font-family: "opensans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size:20px;
color: #000000;
background-color: #FFFFFF;
text-align: center;
}

h6 {
font-family: "opensans", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size:30px;
color: #2B2B2B;
background-color: #FFFFFF;
text-align: left;
}



#Box {
width: 1024px;
height: 768px;
padding: 5px;
padding-left: 10px;
border: 2px solid #cccccc;
margin: 15px;
}



/*#ud_slider {width: 100%; height: 100px; margin: 10px auto auto auto; overflow:hidden; position:relative;}*/
#ud_slider {position:relative;}

.slider_img {position:absolute; top:0; margin-left: -250px; margin-right: 200px; border:2px; height: 500px;}

.Klasse_1 {animation: UD_KLASSE_1 infinite 20000ms; -moz-animation: UD_KLASSE_1 infinite 20000ms; -ms-animation: UD_KLASSE_1 infinite 20000ms; -o-animation: UD_KLASSE_1 infinite 20000ms; -webkit-animation: UD_KLASSE_1 infinite 20000ms; }

.Klasse_2 {animation: UD_KLASSE_2 infinite 20000ms; -moz-animation: UD_KLASSE_2 infinite 20000ms; -ms-animation: UD_KLASSE_2 infinite 20000ms; -o-animation: UD_KLASSE_2 infinite 20000ms; -webkit-animation: UD_KLASSE_2 infinite 20000ms; }

.Klasse_3 {animation: UD_KLASSE_3 infinite 20000ms; -moz-animation: UD_KLASSE_3 infinite 20000ms; -ms-animation: UD_KLASSE_3 infinite 20000ms; -o-animation: UD_KLASSE_3 infinite 20000ms; -webkit-animation: UD_KLASSE_3 infinite 20000ms; }

.Klasse_4 {animation: UD_KLASSE_4 infinite 20000ms; -moz-animation: UD_KLASSE_4 infinite 20000ms; -ms-animation: UD_KLASSE_4 infinite 20000ms; -o-animation: UD_KLASSE_4 infinite 20000ms; -webkit-animation: UD_KLASSE_4 infinite 20000ms;}

@-webkit-keyframes UD_KLASSE_1 {
						0% {opacity: 1;}
						20% {opacity: 1;}
						25% {opacity: 0;}
						100% {opacity: 0;}
					}

@-webkit-keyframes UD_KLASSE_2 {
						0% {opacity: 0;}
						20% {opacity: 0;}
						25% {opacity: 1;}
						45% {opacity: 1;}
						50% {opacity: 0;}
						100% {opacity: 0;}
					}

@-webkit-keyframes UD_KLASSE_3 {
						0% {opacity: 0;}
						45% {opacity: 0;}
						50% {opacity: 1;}
						70% {opacity: 1;}
						75% {opacity: 0;}
						100% {opacity: 0;}
					}	
	
@-webkit-keyframes UD_KLASSE_4 {
						0% {opacity: 0;}
						70% {opacity: 0;}
						75% {opacity: 1;}
						95% {opacity: 1;}
						100% {opacity: 0;}
					}
/*
@keyframes UD_KLASSE_1 {
						0% {opacity: 1;}
						20% {opacity: 1;}
						25% {opacity: 0;}
						100% {opacity: 0;}
					}
@keyframes UD_KLASSE_2 {
						0% {opacity: 0;}
						20% {opacity: 0;}
						25% {opacity: 1;}
						45% {opacity: 1;}
						50% {opacity: 0;}
						100% {opacity: 0;}
					}

@keyframes UD_KLASSE_3 {
						0% {opacity: 0;}
						45% {opacity: 0;}
						50% {opacity: 1;}
						70% {opacity: 1;}
						75% {opacity: 0;}
						100% {opacity: 0;}
					}	
	
@keyframes UD_KLASSE_4 {
						0% {opacity: 0;}
						70% {opacity: 0;}
						75% {opacity: 1;}
						95% {opacity: 1;}
						100% {opacity: 0;}
					}

*/