html,button,input,select,textarea{font-family: 'din', sans-serif;color: #000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
body{font-size:1em;line-height:1.4;margin:0;background:#fff;overflow-x: hidden;}
::-moz-selection{background:#b3d4fc;text-shadow:none}
::selection{background:#b3d4fc;text-shadow:none}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc}
img{vertical-align:middle}
fieldset{border:0}
textarea{resize:vertical}
input[type=submit] {outline: none}
h1,h2,h3,h4,h5,h6{text-rendering:optimizelegibility}

a,a:link,a:visited{color:#000;text-decoration:none}
a:hover{color:#000}
p{font-size:17px;line-height:24px}
button:focus{outline:0}

/* ==========================================================================
   layout */

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
}


/* ========================================================================== */

.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}

/* ==========================================================================
   print styles */

@media print {
    *{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}
    a,a:visited{text-decoration:underline}
    a[href]:after{content:" (" attr(href) ")"}
    abbr[title]:after{content:" (" attr(title) ")"}
    a[href^="javascript:"]:after,a[href^="#"]:after {content:""}
    pre,blockquote{border:1px solid #999;page-break-inside:avoid}
    thead{display:table-header-group}
    tr,img{page-break-inside:avoid}
    img{max-width:100% !important}
    @page{margin:0.5cm}
    p,h2,h3{orphans:3;widows:3}
    h2,h3{page-break-after:avoid}
}

/* ========================================================================== */

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

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

/*--------------------*/


body {
  background-color: #F0F5F9;
}

section {
  margin: 0 auto;
}

a:hover {
	color: #005494;
	font-weight: 400;
}

.logo-section {
  background-color: white;
  width: 100%;
  height: 129px;
  padding: 20px 0;
  position: relative;
}

.logo-section img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.teaser {
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.black-filter {
  position: absolute;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.32) 75%, rgba(0,0,0,0.00) 100%);
  width: 100%;
  height: 100%;
}

.teaser-bg {
  position: relative;
}

.teaser-bg img {
  width: 100%;
}

.teaser-text {
  position: absolute;
  top: 27%;
  left: 50%;
  transform: translate(-50%, 50%);
}

h1 {
  text-align: center;
  font-family: Lato;
  font-weight: normal;
  color: white;
  margin-bottom: 21px;
  font-size: 2.25rem;
}

p {
  font-family: Lato;
  font-size: 1rem;
  text-align: center;
  font-weight: 300;
}

.teaser p {
  color: white;
  font-size: 1.125rem;
  font-weight: normal;
  font-family: Lato;
}

.arrow img{
  position: absolute;
  left: 49%;
  transform: translate(-50%, 0);
  bottom: 30px;

  -webkit-animation: fade 2s ease-in-out infinite;
  -moz-animation:    fade 2s ease-in-out infinite;
  animation:         fade 2s ease-in-out infinite;
}

@-webkit-keyframes fade {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,20px); opacity: 0; }
}
@-moz-keyframes fade{
  0%   { -moz-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,20px); opacity: 0; }
}
@keyframes fade{
  0%   { transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,20px); opacity: 0; }
}




.text-box {
  margin: 0 auto; 
  text-align: center;
  margin-top: 80px;
  max-width: 700px;
}

.margin-top {
  margin-top: 71px;
}

.margin-bottom {
  margin-bottom: 71px;
}


h2 {
  text-align: center;
  font-family: Prata;
  margin-bottom: 21px;
  font-weight: normal;
  font-size: 2.25rem;
}

h3 {
  color: #005494;
  font-family: Lato;
  font-size: 1.125rem;
  font-weight: normal;
  text-align: center;
  margin-top: 71px;
}

footer h3 {
  color: black;
  text-align: left;
  margin: 0 0 32px 0;
}

footer p {
  text-align: left;
  font-size: .75rem;
  line-height: 16px;
}

.flex-container {
  display: flex;
  background-color: white;
  padding: 66px 119px;
}

.flex-item1 {
  width: 25%;
  padding-right: 2%
}

.flex-item2 {
  width: 50%;
  padding-top: 57px;
  padding-right: 2%
}

.flex-item3 {
  width: 25%;
}

.flex-item3 img {
  width: 155px;
  height: auto;
  float: right;
}

.datenschutz-content p{
	text-align: left;
	margin-bottom: 71px;
}

.datenschutz-text-box {
	max-width: 60%;
}




@media screen and (max-width: 1350px) {

  .teaser p {
    font-size: 1rem;
  }

  .teaser-text {
    top: 6%;
  }

  .arrow img{
    position: absolute;
    left: 48%;
  }
}


@media screen and (max-width: 1100px) {

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }

  .arrow img {
    width: 25px;
  }

  .flex-container {
    padding: 50px 80px;
  }

  .teaser-text {
    width: 90%;
  }

  .text-box {
    max-width: 590px;
  }
}

@media screen and (max-width: 800px) {

  h1 {
    font-size: 1.2rem;
  }

  h2 {
    font-size: 1.2rem;
    margin-bottom: 7px;
  }

  .margin-top {
    margin-top: 35px;
  }

  .text-box {
    margin-top: 50px;
  }

  h3 {
    margin-top: 50px;
  }

  .flex-container {
    flex-wrap: wrap;
    align-items: center;
  }

  .flex-item1 {
    width: 100%;
  }

  footer h3 {
    text-align: center;
  }

  footer p {
    text-align: center;
  }

  .flex-item2 {
    width: 100%;
    padding-top: 30px;
    text-align: center;
  }

  .flex-item3 {
    width: 100%;
    text-align: center;
  }

  .flex-item3 img {
    float: none;
    padding-top: 30px;
  }

  .logo-section img {
    width: 20%;
  }

  .logo-section {
    height: 69px;
    padding: 7px 0;
  }

  .teaser-text {
    top: -1%;
  }

  .datenschutz-text-box {
	max-width: 80%;
  }
}


@media screen and (max-width: 650px) {

  .teaser-text {
    position: relative;
    margin-top: -27px;
  }

  .arrow img {
    bottom: 100px;
  }

  .teaser-text h1 {
    color: black;
  }

  .teaser-text p {
    color: black;
  }

  .teaser {
    margin-bottom: 90px;
  }

  .logo-section {
    height: 60px;
  }

  .text-box {
    width: 80%
  }
}

@media screen and (max-width: 500px) {

  .logo-section img {
    width: 25%;
  }

  .arrow img {
    left: 47%
  }
}


@media screen and (max-width: 400px) {

  .arrow img {
    bottom: 120px;
  }

  .logo-section {
    height: 55px;
  }
  
}