@import url("css/slick.css");

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/JosefinSans-Medium.eot');
    src: url('fonts/JosefinSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/JosefinSans-Medium.woff2') format('woff2'),
        url('fonts/JosefinSans-Medium.woff') format('woff'),
        url('fonts/JosefinSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/JosefinSans-Light.eot');
    src: url('fonts/JosefinSans-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/JosefinSans-Light.woff2') format('woff2'),
        url('fonts/JosefinSans-Light.woff') format('woff'),
        url('fonts/JosefinSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* Basis */

html, body {
      margin: 0;
      padding: 0;
      font-family: 'Josefin Sans', sans-serif;
    background: #00468e;
    }
    
    @media (min-width: 1024px) {
    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Josefin Sans', sans-serif;
      background: url(../bilder/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
}

h1 {
    color:#00468e;
font-weight: 300;
line-height: 150%;}

h2 {
    color:#fff;
font-weight: 300;}

h3 {
    color:#00468e;
font-weight: 300;}

h4 {
    color:#00468e;
font-weight: 300;}

.frame-indent { margin-left: 0; margin-right: 0; }

.frame-indent h4 { text-align: center; width:100%; background: #00468e; color:#fff; font-size: 1.3em; padding: 6px 0;font-weight: 500; }

.frame-indent h5{ margin:0;text-align: center; width:100%; color:#00468e;font-size: 1.3em;font-weight: 500;}

p, li {color:#444;font-family: 'Josefin Sans', sans-serif;font-size: 1.2em;line-height: 150%;}

a {color:#00468e;}

img {
    width:100%;
    max-width: 1200px;
    height:auto;
}

#header_logo {
    display: inline-block;
    width:30%;
    max-width: 250px;
    padding-top: 10px;
}

#container {
    display: block;
    background: #00468e;
    width:100%;
    
}

#container_header {
    position: relative;
    background: url(../bilder/bg.png) repeat-x;
    width:100%;
    height:180px;
z-index: 100;}

#container_header_top {
    display: flex;
    width:100%;
    max-width: 1200px;
margin:0 auto;}

#container_content {
    display: block;
    width:100%;
   
margin:0 auto;
    padding-top: 30px;
}
.header {width:100%;max-width: 1200px;margin:0 auto;position: relative;padding-bottom: 200px;}
.text-wr {max-width: 1200px;margin:0 auto;text-align: left:}
#c6 {position:absolute; left:30px;bottom:20px;width:364px;height:321;background: #fff;padding: 20px;border-radius: 30px;}
#c6 p {font-size: 0.9em;}

.header img{
width: 100%;
box-sizing: border-box;
border-radius: 30px;
}

.nav {
    display: inline-block;
	width: 70%;
	text-align: right;
    padding-top: 90px;
	z-index: 101;
}

.nav a {
	padding: 7px 20px;
	border-radius: 7px;
	margin-right: 10px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	text-decoration: none;
	color: #fff;
	font-weight: 100;
    text-transform: uppercase;
}

.nav a.active {
	color: #999;
}

.nav a:hover {
color:#999;
}

section {
    display: block;
    height:100%;
	min-height: 400px;
	position: relative;
	text-align: left;
	margin: 0;
    background: #fff; 
    border-bottom: 0px solid #00468e;
    padding:70px 0;
}

hr.ce-div {border: 5px solid #00468e;margin-bottom: 20px;margin-top: 20px;}

.section figure.image-embed-item {padding: 10px; box-shadow: 10px 10px 15px silver;}

#section1 {display: block; background:#fff;padding: 30px 0;text-align: left;}
#section2 {display: block; background:#fff;padding: 30px 0;text-align: left;}
#section3 {border-top: 10px solid #00468e;}

#section2 a {text-decoration: none; background: #00468e; color: #fff; padding: 10px 15px;box-shadow: 5px 5px 7px silver;}

.frame-layout-1 {display: inline-block;width:45%;vertical-align: top;padding-right: 5%;}
.frame-layout-2 {display: inline-block;width:46%; padding:15px;box-shadow: 10px 10px 15px silver;vertical-align: top;}


.frame-layout-3 {display: inline-block;width:49%; vertical-align: top;}
.frame-layout-3 img{width:100%; max-width:160px;box-shadow: 10px 10px 15px silver;margin-right:10px;margin-bottom: 20px;padding:5px;}
#section3 .frame-layout-1 p{line-height: 110%;}

#footer {width:100%; max-width: 1200px; margin:0 auto;padding: 20px 0;}

#footer_left a {color: #fff; text-decoration: none; padding-right: 25px;}

.galerie {width: 100%;max-width: 1200px;margin:0 auto;}

.bilder {display: inline-block;width:45%;margin-right: 4%;vertical-align: top;padding-top: 30px;}

.galerie .text-wr {display: inline-block;width:48%; vertical-align: top;text-align: left;}

.text-blau {background:#00468e; color:#fff; margin-bottom: 15px;}

.text-blau p {display: block; width:100%;max-width:1200px; padding: 20px 0;margin:0 auto; color:#fff;}


@media screen and (max-width: 800px) {
    
    .header {width:92%;}
    
.text-wr {
    width:92%;
    padding:15px 0;
    margin:0 auto;
}   
    .text-blau p {display: block; width:92%;}
.frame-layout-1 {display: block;width:96%; margin: 0 auto;vertical-align: top;padding-right: 5%;}
.frame-layout-2 {display: block;width:96%; margin: 0 auto;padding:15px;box-shadow: 10px 10px 15px silver;vertical-align: top;}
.frame-layout-3 {display: block;width:96%; margin: 0 auto;vertical-align: top;}
    
    .nav a {
	padding: 7px 10px;
	border-radius: 7px;
	margin-right: 5px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	text-decoration: none;
	color: #fff;
	font-weight: 100;
    text-transform: uppercase;
        
}
    #footer_left a {color: #fff; text-decoration: none; padding-right: 25px;padding-left: 15px;}
}

@media screen and (max-width: 600px) {
    h2 {
    color:#fff;
font-weight: 300;
    font-size: 1.1em}
    #container_header_top {
    display: relative;
    }
    #header_logo {
    display: block;
    width:100%;
    max-width: 250px;
    padding-top: 10px;
        text-align: center
}
    .nav {display: block;
    padding-top: 30px;
    width:100%;
    }
    #c6 {position:relative; left:0px;bottom:0px;width:92%;height:auto;background: #fff;padding: 10px;border-radius: 30px;margin:0 auto;}
    #c6 img{width:90%;}
    #c6 p {font-size: 0.8em;}
    
    .bilder {display: block;width:92%;margin-right: 0%;vertical-align: top;padding-top: 30px; margin:0 auto;}

    .galerie .text-wr {display: block;width:92%; vertical-align: top;text-align: left;margin:0 auto;}
}