@import url('https://fonts.googleapis.com/css?family=Exo');
@import url('https://fonts.googleapis.com/css?family=Bellefair');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed');

@font-face {
font-family: 'Exo';
src: url('fonts/Exo-Regular.ttf')
format("truetype");
}

@font-face {
font-family: 'Barlow+Condensed';
src: url('fonts/BarlowCondensed-Regular.ttf')
format("truetype");
}

@font-face {
font-family: 'Bellefair';
src: url('fonts/Bellefair-Regular.ttf')
format("truetype");
}

header, a, p, li{
	transition: all 1s;
	-moz-transition: all 1s; /* Firefox 4 */
	-webkit-transition: all 1s; /* Safari and Chrome */
	-o-transition: all 1s; /* Opera */
}

/* Basic layout */
body{

}

#background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-image: url("img/background.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment:fixed;
background-position:center;
}

audio{
margin-top:5px;
height:30px;
width:200px;

       background-color: #b3b3b3 !important;
       background-image: linear-gradient(#eaeaea, #eaeaea) !important;
       background: -webkit-linear-gradient(#b3b3b3, #eaeaea) !important;
       border: 0px solid #b3b3b3 !important;
       border-radius: 0px 0px 0px 0px;
       color: #6B6B6B;
}

video {
margin-top:5px;
width: 100%    !important;
height: auto   !important;
}

a {
color:#969696;
font-weight:300;
}

a:hover{
color:#000;
text-decoration:underline;
}


h1{

font-family: 'Barlow Condensed', sans-serif;
font-size:2em;
}

h2{
font-family: 'Barlow Condensed', sans-serif;
font-size:1.4em;
}

h3{
font-family: 'Barlow Condensed', sans-serif;
font-size:1.2em!important; 
}

h1::after{
  content: ' ';
  position: relative;
  margin-top:5px;
  display: block;
  width: 33px;
  border-bottom: 1px solid #C9D0DA;
}

table{
width:100%;
}

td .tdleft{
width:95%;
}

td{
padding: 0 5px 20px 5px;
margin-top:-5px;
}

.tdright{
text-align: right;
width:5%;
vertical-align:top;
}

strong{
font-size:1.0em;
}

.small{
font-size:0.9em;
}

.wert{


}



.browser-default{
margin-top:12px;
margin-left:-20px;
}

.navimenu ul{
	list-style-type: none;
	display: flex;
    justify-content: space-between;
	margin-left:10px;
	margin-right:40px;
}

.navimenu li{
	display: inline;
	float: left;
}

.container {
    width: 980px;
}

.content{
	width:800px;
	font-size:1.1em
}


.weiss, .grau, .end{

position:relative;
top:180px;
background-color:rgba(255,255,255,0.9);
padding:50px 150px 80px 150px;
width:100%;

}


.grau{
margin-top:10px;
background-color:rgba(124,164,189,0.3);
padding: 40px 150px 40px 150px;
color:#2f2f2f;
font-size:0.9em;
}

.grau a {
color:#2f2f2f;
}

.end{

background-color:rgba(124,164,189,0.0);
height:10px;
padding: 0;
}

.row {
    margin-bottom: 0px;
}	
	

p.logo{
	text-align:center;
	font-family: 'Bellefair', serif;
	}


section.stretch{
	float: left;
	height: 1500px;
	width: 100%;
}






header{
	background-color:#fff;
	float: left;
	width: 100%;
	position: fixed;
	z-index: 10;
	-webkit-box-shadow: 2px -4px 28px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px -4px 28px -6px rgba(0,0,0,0.75);
	box-shadow: 2px -4px 28px -6px rgba(0,0,0,0.75);
}

header a{
color: #969696;
text-decoration: none;
font-family: 'Barlow Condensed', sans-serif;

}

header a.active, header a:hover{
color: #000;
text-decoration:none;
	}
	
header a.active::after{
  content: ' ';
  position: relative;
  margin-top:1px;
  display: block;
  border-bottom: 1px solid #C9D0DA;
}	

	header li{
margin-right: 30px;
font-size:19px;
	}

	/* Sizes for the bigger menu */
	header.large{
height: 120px;
	}

	header.large p{
font-size:32px;
margin-top:38px;
	}

	header.large li{
margin-top: 36px;
}


	/* Sizes for the smaller menu */
	header.small{ 
height: 85px; 
	}

	header.small p{ 
font-size:27px;
margin-top: 26px; 
	}

	header.small li{ 
font-size:18px;	
margin-top: 20px; 
	}

	
.hamburger {
  display: none;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 48%;
  z-index: 10000;
  padding-top: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
.hamburger__icon {
  position: relative;
  margin-top: 7px;
  margin-bottom: 7px;
}
.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {
  display: block;
  width: 25px;
  height: 2px;
  background-color: #222;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.hamburger__icon:before, .hamburger__icon:after {
  position: absolute;
  content: "";
}
.hamburger__icon:before {
  top: -7px;
}
.hamburger__icon:after {
  top: 7px;
}
.hamburger.active .hamburger__icon {
  background-color: transparent;
}
.hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after {
  background-color: #fff;
}
.hamburger.active .hamburger__icon:before {
  -moz-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active .hamburger__icon:after {
  -moz-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

.fat-nav {
  top: 0;
  left: 0;
  z-index: 9999;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.fat-nav__wrapper {
  width: 100%;
  height: 100%;
  display: table;
  table-layout: fixed;
}
.fat-nav.active {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.fat-nav ul {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  margin: 0;
  padding: 0;
}
.fat-nav li {
  list-style-type: none;
  text-align: center;
  padding: 10px;
  font-size: 1.6em;
}
.fat-nav li, .fat-nav li a {
  color: #fff;
}
.fat-nav li a {
  text-decoration: none;
}
	
	
.collapsible{
border:0;
}	

.collapsible-header{
background-color:transparent;
padding:15px 0 15px 0;
}

.collapsible-header i{
margin-right:10px;
}

.collapsible-body{
background-color:rgba(255,255,255,1);
padding:26px 36px 20px 36px;
font-size:0.8em;
border-bottom: 1px solid #fff
}	

.collapsible-body img{
margin-top:5px;
width: 100%    !important;
height: auto   !important;
}

.collapsible-header.active i {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}

.material-icons{
color:#9f9f9f;
}

.mittel{
background-color:rgba(255,255,255,0.9);
padding:0;
font-size:40px;
}

.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(0, 0, 0, 0.2);
}


.textright{
text-align:right;
}

.modal{
width:98%;
height:98%;
}

.modal img{

width:100%;

}


@media screen and (max-width: 1024px) {
    .hamburger {display:block;
    }
	
	.container, .row .col.m4, .row .col.m8 {
	width:100%;	

	}
	
	.navimenu{
	display:none;
	}
		
	header.large, header.small{
	height: 85px;
	}	
	
	header.large p, header.small p{ 
	font-size:27px;
	margin-top: 35px; 
	}
	
	.weiss{
	top:140px;
	}
	
	.content{
	width:80%;
	}
	
	.textright{
	margin-top:10px;
	text-align:left;
	}
	
	.weiss {
	
	padding:50px 110px 50px 110px;
	
	}
	
	.grau{
	padding: 30px 110px 30px 110px;
	margin-top:-30px;
	}	
	
}
	


@media screen and (max-width: 902px) {

	.weiss {
	
	padding:50px 70px 50px 70px;
	
	}
	
	.grau{
	padding: 30px 70px 30px 70px;
	}
	
}	

@media screen and (max-width:601px) {

	.content{
	width:95%;
	}

	.weiss {
	top:100px;
	padding:10px 30px 30px 30px;
	
	}
	
	.grau{
	padding: 30px 30px 30px 30px;
	margin-top:-70px;
	}
	
	.collapsible-body{
	padding:20px 15px 20px 15px;
	font-size:0.9em
	}	
	
	.collapsible-header{
	font-size:1.1em
	}
	
}


@media screen and (max-width:380px) {

	.content{
	width:100%;
	}	

	.weiss{
	top:80px;
	padding:10px;
	}

	.grau{
	margin-top:-100px;
	padding: 30px 10px 30px 10px;
	}

	.collapsible-body{
	padding:20px 1px 20px 1px;
	font-size:0.9em
	}	
	
	table{
	width:98%;
	}
	
}