@charset "UTF-8";
/* CSS Document */
html, 
html * {
	box-sizing: border-box;
	font-family: Fira sans, Helvetica Neue, Helvetica, Arial,"sans-serif";
}

body {
	margin: 25px;
	padding: 0;
}

img {
	width: auto;
	height: auto;
	vertical-align: middle;
}
a, a:hover, a:focus, a:active {
	text-decoration: none;
  	color: inherit;
 }

/*Colors:
light-blue: #CCDDEF ;
green-blue: #3D7995 ;
dark-blue: #00324b ;*/

.wrapper{
	height: 750px;
	width: 1200px;
	margin: 25px auto 25px auto;
}

/*Text design */

h3 { 
	display: block;
	font-size: 1.17em;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
h4 { 
	display: block;
	font-size: 1.13em;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
}
p {
	display: block;
	margin-top: 0.5em;
  	margin-bottom: 0;
  	margin-left: 0;
  	margin-right: 0;
}
strong {
   	font-weight: bold;
}

div.Box_2 p.fine_print {
	font-size: 0.75em;
	margin-top: 0;
	line-height: 1;
}
div.Box_2 h4 {
	font-size: 1em;
	margin-top: 0.1em ;
}
div.Box_4 p {
    font-size: 0.9em;
	margin-top: 0.3em;
}
div.Box_4 p.fine_print {
	font-size: 0.65em;
	margin-top: 0;
}

div.Box_7 p {
    font-size: 0.85em;
	margin-top: 0;
}
div.Box_7 strong {
    font-size: 1.1em;
	margin-top: 1.5em;
}
div.Box_7 h4 {
	margin-bottom: 0.1em;
}
.columns {
	columns: 2 ;
}


/*Grid design*/

.container {
	height:90%;
	width: 80%;
	margin: auto;
  	display: grid; 
  	grid-template-rows: 28.571% 28.571% 28.571% 14.285%;
	grid-template-columns: 20% 20% 20% 20% 20%; 
	grid-gap: 10px;
}

/*Boxes*/

.Box_1 {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	background-color: #CCDDEF;
	padding-left: 50px;
}

.Box_2 {
	background-color: #CCDDEF;
	grid-column: 1 / 3;
	grid-row: 3 / 5;
	padding-top: 12px;
/*	padding-left: 50px;*/
}
.Box_2_text {
	padding-left: 50px;
}
.Box_3 {
  	background-color: #3D7995;
	background: url("images/Dermatoskop_2.jpg");
	background-size: 12em;
	background-repeat: no-repeat;
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}

.Box_4 {
	background-color: #CCDDEF;
	grid-column: 4 / 6;
	grid-row: 1 / 2;
	text-align: right;
	padding-right: 60px;
	padding-top: 14px;
	
}

.Box_5 {
  	background-color: #00324b;
	background: url("images/Flur_2.jpg");
	background-size: 25em;
	background-repeat: no-repeat;
	grid-column: 3 / 5;
	grid-row: 2 / 3;
}

.Box_6 {
  	background-color: #00324b;
	grid-column: 5 / 6;
	grid-row: 2 / 3;
	padding: 30px;
	color: white;
	font-weight: 700;	
}

.Box_7 {
	background-color: #8A9E70;
	grid-column: 3 / 6;
	grid-row: 3 / 4;
	color: white;
	padding-top: 12px;
	padding-left: 55px;
}

.Box_8 {
	background-color: #3D7995;
	grid-column: 3 / 5;
	grid-row: 4 / 5;
	color: white;
	padding-top: 15px;
	padding-left: 30px;

}

.Box_9 {
	background-color: #00324b;
	grid-column: 5 / 6;
	grid-row: 4 / 5;
	color: white;
	padding-top: 15px;
	text-align: center;
}


/* Links */

.Imp {
	grid-column: 5 / 6;
	grid-row: 5 / 5;
	text-align: right;
	color: grey;
}

.job_ad {
	grid-column: 1/ 6;
	grid-row: 5 / 5;
	text-align: left;
	color: #DC2022;
}

/* Images */
.pic_column {
  float: left;
  /*width: 33.33%;*/
  width: 23%;
  padding: 10px;
  padding-left: 40px;
}
div.pic_column img {
	height: 65px;
}
.pic_row::after {  /* Clear floats after image containers */
	content: "";
	clear: both;
	display: table;
}

.Logo {
	display: block;
	height: 80%; 
	width: auto;
	margin-top: 30px;
}