@charset "UTF-8";
/* 

rot		dc3c0a

hellblau	6e9bb4

dunkelblau	003e63
 */

* {
	border: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
  box-sizing: border-box;
  
}
*:focus {outline: none;}
/* rajdhani-regular - latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rajdhani-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Rajdhani Regular'), local('Rajdhani-Regular'),
       url('../fonts/rajdhani-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/rajdhani-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/rajdhani-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/rajdhani-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/rajdhani-v7-latin-regular.svg#Rajdhani') format('svg'); /* Legacy iOS */
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto Light';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

body {
	font-family: 'Roboto Light', sans-serif;
	font-size: 1.1em;
	color: #333;
	text-align: center;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

#wrapper {
	width: 100%;
	margin: 0 auto 0 auto;
	text-align: left;
}

.header {
	width: 100%;
	text-align: center;
	background-color: #fff;
	padding: 20px 0 0 0;
    background: hsla(0,50%,100%,0.8); 
    transition: background 1s;
    transition: padding 1s ease;
    position: fixed;
    top: 0;
	z-index: 100;
	display: inline-block;
}

.header .inside {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: left;
	display: inline-block;
	padding: 0 10%;
}

/*===================  LOGO  ==================*/

.header .logo {
	float: left;
	transition: width 3s ease;
}

.header.kleiner {
   background: hsla(0,100%,100%,1);
   border-bottom: 1px solid #6e9bb4;
   padding: 15px 0 5px 0;
}

.header.kleiner .logo {
	width: 150px;
	height: auto;
}

@media (max-width: 850px) {
    .header .logo {width: 150px; height: auto;}
}

@media (max-width: 500px) {
    .header.kleiner {padding: 15px 15px 5px 15px;}
}

/*=================  MAIN  ================*/

#main {
	width: 100%;
	text-align: center;
	background-color: #fff;
	padding: 50px 0 0 0;
	margin-top: 50px;
}

#main .mod_article:nth-child(even) {
	background-color: #fff;
}

#main .mod_article:nth-child(odd) {
	background-color: #ddd;
}

#main .mod_article.slider {
	height: 600px;
}

#main .mod_article .inside {
	margin: 0 auto;
	text-align: left;
	padding: 30px 10%;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 400;
	margin-bottom: 20px;
}

h1 {
	font-size: 2em;
	color: #6e9bb4;
	position: relative;
	display: inline-block;
	margin-bottom: 40px;
	line-height: 1em;
}

h1:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #619AB5;
  content: "";
  transition: width 0.2s;
  animation: underline 5s .5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}

@keyframes underline {
  from{width:0%} 
  to{width:100%}
}

h2 {
	color: #6e9bb4;
	font-size: 2em;
	font-weight: 400;
}

h3 {
	font-size: 1.2em;
	margin-bottom: 20px;
	color: #6e9bb4;
}

h4 {
	font-size: 1.2em;
	margin-bottom: 0;
	margin-top: 20px;
}


p {
	margin-bottom: 20px;
}

a {
	color: #dc3c0a;
}

strong {
	font-weight: 400;
	font-family: 'Roboto';
}

.image_container.float_right {
	margin-left: 30px;
	margin-bottom: 30px;
}

@media only screen and (max-width: 767px) {
   #main .image_container.float_right {float: none; margin: 0 0 30px 0;}
}


div.trennlinie {
	height: 5px;
	text-align: center;
	margin: 20px 0 30px 0;
}

div.trennlinie div.trennlinie_kurz {
	width: 100px;
	height: 2px;
	background-color: #dc3c0a;
	margin: 0 auto;
}

.c33l .ce_text,
.c33r .ce_text{
	padding-right: 40px;
}

.box_rot {
	background-color: #DD453C;
	padding: 20px 20px 0 20px;
	text-align: center;
	color: #fff;
	font-family: 'Rajdhani', sans-serif;
	font-size: 1.4em;
	font-weight: 600;
	margin: 30px 0;
}

.box_rot a {
	color: #fff;
	text-decoration: underline;
}

@media only screen and (max-width: 767px) {
	.c33l, .c33r { width: 100%; display: block;}
}

/*================  FOOTER  =================*/

#footer {
	background-color: #003e63;
	width: 100%;
	min-height: 200px;
	text-align: center;
}

#footer .inside {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: left;
	padding: 30px 10%;
	color: #fff;
	font-size: 0.8em;
}

#footer a {
	color: #fff;
	text-decoration: underline;
	margin-left: 20px;
}

#footer .kontakt {
	float: left;
	width: 300px; 
}

#footer .kontakt2 {
	float: left;
	width: 300px; 
}

#footer .kontakt a,
#footer .kontakt2 a {
	margin-left: 0; 
}

#footer .menue {
	float: right;
}

@media only screen and (max-width: 767px) {
	#footer .kontakt, #footer .kontakt2, #footer .menue {float: none; display: block; margin-bottom: 20px;}
}