﻿* {
	box-sizing: border-box;
}

body {
	font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
	font-size: 12px;
	margin: 0em;
	padding: 0em;
	background: #000066;
}

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 15px;
}

.klein {
	font-size: 0.8em;
}

.cyan {
	color: cyan;
}

.red {
	color: red;
}

.orange {
	color: orange;
	vertical-align: middle;
	margin: 5px 0;
}

.green {
	color: green;
	vertical-align: middle;
	margin: 5px 0;
}

.item-1 {
	grid-column: 1 / 2;
}

.item-2 {
	grid-column: 2 / 7;
	text-align: right;
}

.item-3, .item-8 {
	grid-column: 1 / 4;
	text-align: center;
}

.item-4 {
	grid-column: 4 / 7;
	text-align: center;
}

.item-5 {
	grid-column: 3 / 5;
	grid-row: 3 / 4;
}

.item-6 {
	grid-column: 1 / 3;
	text-align: center;
	grid-row: 3 / 4;
}

.item-7 {
	grid-column: 5 / 7;
	text-align: center;
	grid-row: 3 / 4;
}

.item-9 {
	grid-column: 4 / 7;
	text-align: right;
}

.item-9 p {
	color: black;
}

.item-9 span {
	font-weight: bold;
}

.item-10 {
	grid-column: 1 / 3;
	text-align: center;
	grid-row: 5 / 6;
}

.item-11 {
	grid-column: 3 / 5;
	grid-row: 5 / 6;
	text-align: center;
}

.item-12 {
	grid-column: 5 / 7;
	text-align: center;
	grid-row: 5 / 6;
}

.item-13 {
	grid-column: 1 / 4;
	grid-row: 6 / 7;
	text-align: center;
}

.item-14 {
	grid-column: 4 / 7;
	grid-row: 6 / 7;
	text-align: center;
}
.item-15 {
	grid-column: 1 / 4;
	grid-row: 7 / 8;
	text-align: center;
}

.item-16 {
	grid-column: 4 / 7;
	grid-row: 7 / 8;
	text-align: center;
}
.item-17 {
	grid-column: 2 / 6;
	grid-row: 8 / 9;
	text-align: center;
}

.color-3, .color-5, .color-6, .color-7, .color-8, .color-10, .color-11, .color-12, .color-13, .color-14, .color-15, .color-16  {
	border: 1px solid black;
	background-color: #212146;
	padding: 5px;
}
.color-17 {
	border: 1px solid black;
	background-color: #c7c7c7;
	padding: 5px;
}
.color-4 {
	border: 1px solid black;
	background-color: grey;
	background-image: url("http://kanal43.de/impfarama/statistik.png");
	background-position: bottom;
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover;
	padding: 5px;
}
.color-8 .xl  {
	color: yellow;
}
.color-9 {
	border: 1px solid black;
	background-color: white;
	background-image: url("http://kanal43.de/impfarama/Ugur-Sahin.gif");
	background-position: left;
	background-repeat: no-repeat; /* Do not repeat the image */
	padding-right: 10px;
}
/*.color-12  {
	border: 1px solid black;
	background-color: #212146;
}*/

#biontech {
	background-color: cyan;
	height: 30%;
	display: table;
}

#biontech p {
	display: inline-table;
	color: black;
}

#moderna {
	background-color: orange;
	height: 30%;
	float: left;
}

#moderna p {
	display: inline-table;
	color: black;
}

#astrazeneca {
	background-color: green;
	height: 30%;
	float: left;
	clear: both;
}

#astrazeneca p {
	display: inline-table;
	color: black;
	vertical-align: middle;
	margin: auto;
}

#box_oben {
	width:100%;
	display: flex;
}

.links, .rechts {
	width: 45%;
}

.links {
	float:left;
	text-align: right;
	padding-right: 35px;
}

.rechts {
	padding-left: 35px;
}

#unten {
	text-align: center;
}

#gesamt {
	width: 100%;
	max-width: 1200px;
	overflow: hidden;
	margin: 0 auto;
	padding: 5px;
}

#box_main {
	width: 100%;
	/*height: 80%;
	float: left;*/
	margin-top: 25px;
	margin-bottom: 25px;
}

#box_mitte {
	width: 100%;
}

.kastenlinks, .kastenmitte, .kastenrechts {
	width: 30%;
	text-align: center;
	display: inline-grid;
	background-color: #121284;
	margin: 1em;
	border: solid 1px black;
}

.kastenunten {
	background-color: #05380f;
}

.kastenlinks, .kastenmitte {
	float: left;
}

h1 {
	color: white;
	font-size: 18px;
	margin: 10px 0px;
	text-align: center;
}

p {
	color: white;
	font-size: 16px;
	/*margin: 7px 0px;
	text-align: center;*/
}

#streifen {
	width: 100%;
/*	float: left;*/
	text-align: center;
	margin: 10px auto;
}

.rkistudie {
	width: 250px;
	height: auto;
}

.impflogo {
	width: 100px;
	height: auto;
}

.logoklein {
	height: 5em;
	width: auto;
}

.xxl {
	font-size: 3.5em;
}

.xl {
	font-size: 2.5em;
}

.l {
	font-size: 1.5em;
}


@media only screen and (max-width: 500px){
.impflogo {
	width: 60px;
	height: auto;
} 

 .container{
   grid-template-columns: 1fr 1fr;
   grid-gap: 5px
  } 
  .item-1 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.item-2 {
	grid-column: 2 / 3;
	text-align: right;
	grid-row: 1 / 2;
}
  .item-3, .item-4, .item-5, .item-6, .item-7, .item-8, .item-10, .item-11, .item-12, .item-13, .item-14, .item-15, .item-16 {
	grid-column: 1 / 3;
/*	margin: 5px;*/
	text-align: center;
}
.item-3 {
	grid-row: 2 / 3;
}
.item-4 {
	grid-row: 3 / 4;
}
.item-5 {
	grid-row: 4 / 5;
}
.item-5 p {
	margin: 0 auto;
}
.item-6 {
	grid-row: 5 / 6;
}
.item-7 {
	grid-row: 6 / 7;
}
.item-8 {
	grid-row: 7 / 8;
}
.item-9 {
	grid-row: 8 / 9;
	grid-column: 1 / 3;
/*	margin: 5px;*/
	text-align: right;
	background-size: cover;
}
.item-10 {
	grid-row: 9 / 10;
}
.item-11 {
	grid-row: 11 / 12;
}
.item-12 {
	grid-row: 10 / 11;
}
.item-13 {
	grid-row: 12 / 13;
}
.item-14 {
	grid-row: 13 / 14;
}
.item-15 {
	grid-row: 14 / 15;
}
.item-16 {
	grid-row: 15 / 16;
}
.item-17 {
	grid-row: 16 / 17;
	grid-column: 1 / 3;
	text-align: center;
}
  .xxl, p.xl {
	font-size: 2.5em;
}

.xl {
	font-size: 1.5em;
}

.l {
	font-size: 1.0em;
}
}