html{
	margin:0;
	padding:0;
}

/* //// FONTS //// */
/* dosis-300 - latin */
@font-face {
  font-display: fallback; 
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/dosis-v32-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/dosis-v32-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dosis-v32-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/dosis-v32-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/dosis-v32-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* dosis-800 - latin */
@font-face {
  font-display: fallback; 
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/dosis-v32-latin-800.eot'); /* IE9 Compat Modes */
  src: url('../fonts/dosis-v32-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dosis-v32-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/dosis-v32-latin-800.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/dosis-v32-latin-800.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* Base body font size. This is the growth-base for all other fonts. */
html { 
	font-size: calc(14px + 0.5 * 1vw); 
	line-height:  calc((14px + 0.5 * 1vw)*1.2); 
}

/* By using 1rem - 14px, our growth-base starts from zero at 400px and goes up from there. */
h1 { 
	font-size: calc(22px + 4.0 * (1rem - 14px));
	line-height: calc((22px + 4.0 * (1rem - 14px))*1.1);
}

/* Lock font sizes below 400px and above 2000px with manually-calculated sizes. */
@media screen and (max-width: 400px) { html { font-size: 14px; } }
@media screen and (min-width: 2000px) { html { font-size: 25px; } }


/* //// GENERAL ELEMENTS //// */

body{
	font-family: "Dosis", Helvetica, Arial, Sans-Serif;
	padding:2vh;
	margin:0;
	color: #656463;
}

a{
	color: #656463;
	text-decoration: none;
	transition: all 0.5s;
}

a:hover{
	color: #910A3A;
	text-decoration: underline;
}

p{
	margin-bottom:0;
}

h1{
	
	padding: 0;
	margin:0;
}


/* //// HEADER //// */
header{
	height: 8vh;
	margin-bottom: 1.5vh;
}

nav {
    display: flex;
    justify-content: space-between; 
    align-items: center;
	align-content: stretch;
	flex-wrap: wrap;
    padding: 0px;
	box-sizing: border-box;
	height: 100%;
}

nav > div{
	flex:1;
}

nav > div.flex2{
	text-align: center;
}

nav > div.flex3{
	text-align: right;
}

nav .logo img{
	width:100%;
	max-height: 100%;
	padding:0.5vh;
	box-sizing: border-box;
}

nav .logo{
	object-fit: contain;
	height:100%;
	min-width: 300px;
	display: flex;
	align-content: center;
}

.menu ul{
	list-style-type: none;
	margin:0;
	padding:0;
}

.menu ul li{
	display:inline-block;
	margin-right: 10px;
}

.menu ul li:first-child:after{
	content:"|";
	margin-left:10px;
}

footer .menu{
	text-align: center;
	display: none;
}

@media only screen and (max-width: 850px) {
	header{
		height: auto;
	}
	
	nav > div.flex1,
	nav > div.flex3{
		text-align: center;
		min-width: 100%;
	}
	
	nav > div.flex2{
		max-width: 300px;
		margin: 0 auto;
	}
	
	nav > div.flex3{
		display: none;
	}

	footer .menu{
		display: block;
	}
	
	nav .logo{
		margin:0 auto;
		margin-top:2vh
	}
}

/* //// INTRO //// */
.intro{
	background-color: #656463;
	margin-bottom: 2vh;
	height: 34.5vh;
	color:#fff;
	box-sizing: border-box;
	padding:5vh;
	background-image:url(../img/group-background.jpg);
	background-size: 66%;
	background-position: right center;
	background-repeat: no-repeat;
	position: relative;
	display : flex;
	align-items : center;
}

.intro:before{
	content:"";
	display: block;
	background: linear-gradient(90deg, rgba(101,100,99,1) 33%, rgba(101,100,99,0) 100%);
	width:100%;
	height: 100%;
	top:0;
	left:0;
	position: absolute;
	z-index: 0;
}

.intro div{
	position: absolute;
	z-index: 10;
	width:50%;
}

@media only screen and (max-width: 850px) {
	.intro{
		padding:0px;
		background-size: cover;
		align-items: end;
		height: 40vh;
	}
	
	.intro:before{
		background: linear-gradient(0deg, rgba(101,100,99,0.9) 33%, rgba(101,100,99,0.2) 100%);
	}
	
	.intro div{
		width:100%;
		padding:20px;
        box-sizing: border-box;
	}
}


/* //// Impressum Datenschutz  //// */
.text{
	max-width: 1280px;
	margin:auto;
	padding: 10vh 0;
}

/* //// PANELS //// */


.panels * {
  transition: all .5s ease-in-out;
}

.panels a:hover{
	text-decoration: none;
}

.panels {
  display: flex;
  flex-wrap: wrap;
	height:50vh;
}

.panels .content {
  height: 100%;
  padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	z-index: 20;
	position: relative;
	background:rgba(0,0,0,0.5);
}

.panel:after{
	content:"";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top:0;
	background: linear-gradient(0deg, rgba(145,10,58,0.8) 0%, rgba(145,10,58,0.2) 100%);
	z-index: 10;
	opacity: 0.6;
	transition: all .5s ease-in-out;
}


.panel_logo {
	width:20vw;
	min-width: 250px;
	position: absolute;
	height: 100%;
	top:0;
}

.panel {
  background-size: cover;
  background-position: center;
  height: 100%;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 100px;
  background-repeat: no-repeat;
position: relative;
	z-index: 10;
	overflow: hidden;
}

.panel:hover {
  flex-grow: 1.25;
}

.panels .panel:hover:after {
    opacity: 1;
}

.panels .panel:hover{
	z-index: 20;
}

.panels .panel:hover .content{
	background:rgba(0,0,0,0.1);
}

.panel p {
  color: #fff;
  width: 54vw;
	box-sizing: border-box;
	padding: 2vw;
	flex:1;
	display: flex;
	align-items: end;
    align-self: flex-start;
	opacity: 0;
}

.panels .panel:hover p{
	opacity: 1;
}

@media only screen and (max-width: 850px) {
	.panels {
		height:80vh;
    	margin-bottom: 2vh;
	}
	
	.panel:hover {
    	flex-grow: 1; 
	}
	
	.panel:nth-of-type(1) {
		min-width: 100%;
	}
	
	.panel {
		min-width: 300px;
		margin-bottom: 0px;
		height:40vh;
	}
	
	.panel p {
	  	width: 100%;
		padding:20px;
		opacity: 1;
	}
}