body {height: 100%; margin: 0px; padding: 0px;}
hr {width:100%; height:10px; color:black; background-color: black; margin-bottom:0px; margin-top:-6px; border: 0 none;}

@font-face { 
font-family: 'Blender';
src: url('../Fonts/Blender-Bold.eot');
src: local('â€šÃ²âˆ«'), url('../Fonts/Blender-Bold.woff') format('woff'), 
url('../Fonts/Blender-Bold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
}

.red{background-color:#f1a187; padding:4% 7%;}
.green{background-color:#c3db9a; padding:4% 7%;}
.white{padding: 4% 7%;}
h1 {font-family:"Blender"; font-size: 44px; line-height: 40px; color: black; margin:0px;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1.7px;
   -webkit-text-stroke-color: black;}
h2 {font-family:"Blender"; margin:0px; font-size: 38px; line-height: 39px;}
h3 {font-family:"ITC Machine W03 Bold"; margin:0px 7%; text-align: center; font-size: 38px; line-height: 39px;}
h4 {font-family:"Blender"; margin:0px;}
a {text-decoration: none; color: black;}
a:hover{text-decoration:underline;}


#schauspieler {width:100%; padding-top: 10px;}
.image_red   {display:block; margin:0 auto; mix-blend-mode:multiply; background-color:#f1a187;}
.image_green {display:block; margin:0 auto; mix-blend-mode:multiply; background-color:#c3db9a;}
.minibox {border:5px solid black; display:block; margin-bottom:25px; padding:25px 4%;}
.minibox_oben {border:5px solid black; display:block; margin-bottom:25px; padding:25px 4%;}
.minibox_unten {border:5px solid black; display:block; margin-top:25px; padding:25px 4%;}
.text{padding:0px 7%;}
.text_02{padding:0px 20%;}

.myButton{
    background:url(../images/button_01.png) no-repeat center center; 
    cursor:pointer;
    border:none;
    width:100%;
    height:100%;
    position:absolute;
    z-index:300000;}

.myButton.playing {background:url(../images/button_02.png) no-repeat;}

#outerbox {width: 100%; overflow: hidden; margin-bottom: 5px; position:relative;}

#arrow {background:url(../images/arrow.svg) no-repeat; 
	background-position:50% 99%;     
	background-size: 6% 6%;
    position:absolute;
    z-index:300000;
	width: 100%;
	height: 100%;}

#sliderbox {width: 500%; position: relative; animation: slide 20s infinite;}

.slide{width: 20%;float: left;}

@keyframes slide
{0%
{left: 0%;}

20%
{left: 0%;}

25%
{left: -100%;}

45%
{left: -100%;}

50%
{left: -200%;}

70%
{left: -200%;}

75%
{left: -300%;}

95%
{left: -300%;}

100%
{left: -400%;}
}

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}