/* Copyright by TwooDoo Werbeagentur, Wegberg - 2014 Dieses Style-Sheet steht unter dem Schutz des Urheberrechs. Jegliche Weiterverwendung, auch auszgweise, ohne unsere schriftliche Zustimmung ist untersagt. */
@font-face { font-family: 'LinBiolinum'; local: 'LinBiolinum'; src: url("webfonts/LinBiolinum_R.woff"); font-style: normal; font-weight: normal; }
@font-face { font-family: 'LinBiolinum'; local: 'LinBiolinum'; src: url("webfonts/LinBiolinum_RB.woff"); font-style: normal; font-weight: bold; }
@font-face { font-family: 'LinBiolinum'; local: 'LinBiolinum'; src: url("webfonts/LinBiolinum_RI.woff"); font-style: italic; font-weight: normal; }
:focus { outline: none; }

* { padding: 0px; margin: 0px; }

a, span { transition: all .3s ease-in-out; }

a:link { font-weight: bold; color: #2e2e2e; }

a:visited { font-weight: bold; color: #2e2e2e; }

a:hover { font-weight: bold; color: #000; text-shadow: #ffcc00 0px 0px 5px; }

body { color: #2e2e2e; background-color: #ffcc00; font-family: 'LinBiolinum', 'sans-serif'; font-size: 1em; line-height: 1.2em; margin-left: 0px; margin-right: 0px; margin-top: 10px; }

h1, h2, h3, h4 { font-weight: normal; padding-bottom: 10px; line-height: 1.4em; }

h1 { font-style: italic; font-weight: normal; letter-spacing: 0.1em; font-size: 200%; padding: 0px 40px 40px 205px; }

h2 { padding-top: 10px; font-size: 150%; }

h3 { padding-top: 10px; font-size: 125%; }

h4 { padding-bottom: 4px; font-size: 110%; }

ol, ul { padding-bottom: 25px; padding-left: 25px; }

p { padding-bottom: 15px; }

strong { font-weight: normal; }

hr { margin: 20px 0px 30px 0px; }

body { overflow: hidden; height: 100%; text-align: center; }
body div#top { width: 100%; height: 100%; }
body div#top div#inside { margin-top: 15%; }
body div#signatur { position: absolute; bottom: 5px; width: 100%; color: #c5c5c5; font-size: 75%; margin: 5px auto; text-align: center; }
body div#signatur strong, body div#signatur a { color: #c5c5c5; font-weight: normal; text-decoration: none; }
body div.welle3d { width: 100%; height: 80px; position: absolute; bottom: 40px; background-image: url("images/bg-meer.png"); background-repeat: repeat-x; background-position: 125px -135px; }

body.anim-welle { background-image: url("images/bg-meer.png"); background-repeat: repeat-x; background-position: 0px bottom; background-attachment: fixed; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-duration: 4s; -webkit-animation-duration: 4s; -ms-animation-duration: 4s; -moz-animation-duration: 4s; -o-animation-duration: 4s; animation-name: wellen-bg; -webkit-animation-name: wellen-bg; -ms-animation-name: wellen-bg; -moz-animation-name: wellen-bg; -o-animation-name: wellen-bg; }

@-moz-keyframes wellen-bg { 0% { background-position: 0px bottom; }
  50% { background-position: 25px bottom; } }
@-webkit-keyframes wellen-bg { 0% { background-position: 0px bottom; }
  50% { background-position: 25px bottom; } }
@-o-keyframes wellen-bg { 0% { background-position: 0px bottom; }
  50% { background-position: 25px bottom; } }
@-ms-keyframes wellen-bg { 0% { background-position: 0px bottom; }
  50% { background-position: 25px bottom; } }
@-khtml-keyframes wellen-bg { 0% { background-position: 0px bottom; }
  50% { background-position: 25px bottom; } }
@keyframes wellen-bg { 0% { background-position: 0px bottom; }
  50% { background-position: 25px bottom; } }
img#anim-postschiff { position: absolute; bottom: 110px; animation-timing-function: linear; -webkit-animation-timing-function: linear; -ms-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-duration: 20s; -webkit-animation-duration: 20s; -ms-animation-duration: 20s; -moz-animation-duration: 20s; -o-animation-duration: 20s; animation-name: horizontal01; -webkit-animation-name: horizontal01; -ms-animation-name: horizontal01; -moz-animation-name: horizontal01; -o-animation-name: horizontal01; }

@-moz-keyframes horizontal01 { 0% { left: -300px; bottom: 105px; transform: rotate(-1deg); }
  10% { bottom: 112px; transform: rotate(0deg); }
  20% { bottom: 110px; transform: rotate(2deg); }
  30% { bottom: 101px; transform: rotate(0deg); }
  40% { bottom: 110px; transform: rotate(-2deg); }
  50% { bottom: 112px; transform: rotate(0deg); }
  60% { bottom: 110px; transform: rotate(2deg); }
  70% { bottom: 101px; transform: rotate(0deg); }
  80% { bottom: 110px; transform: rotate(-2deg); }
  90% { bottom: 112px; transform: rotate(0deg); }
  100% { left: 100%; } }
@-webkit-keyframes horizontal01 { 0% { left: -300px; bottom: 105px; transform: rotate(-1deg); }
  10% { bottom: 112px; transform: rotate(0deg); }
  20% { bottom: 110px; transform: rotate(2deg); }
  30% { bottom: 101px; transform: rotate(0deg); }
  40% { bottom: 110px; transform: rotate(-2deg); }
  50% { bottom: 112px; transform: rotate(0deg); }
  60% { bottom: 110px; transform: rotate(2deg); }
  70% { bottom: 101px; transform: rotate(0deg); }
  80% { bottom: 110px; transform: rotate(-2deg); }
  90% { bottom: 112px; transform: rotate(0deg); }
  100% { left: 100%; } }
@-o-keyframes horizontal01 { 0% { left: -300px; bottom: 105px; transform: rotate(-1deg); }
  10% { bottom: 112px; transform: rotate(0deg); }
  20% { bottom: 110px; transform: rotate(2deg); }
  30% { bottom: 101px; transform: rotate(0deg); }
  40% { bottom: 110px; transform: rotate(-2deg); }
  50% { bottom: 112px; transform: rotate(0deg); }
  60% { bottom: 110px; transform: rotate(2deg); }
  70% { bottom: 101px; transform: rotate(0deg); }
  80% { bottom: 110px; transform: rotate(-2deg); }
  90% { bottom: 112px; transform: rotate(0deg); }
  100% { left: 100%; } }
@-ms-keyframes horizontal01 { 0% { left: -300px; bottom: 105px; transform: rotate(-1deg); }
  10% { bottom: 112px; transform: rotate(0deg); }
  20% { bottom: 110px; transform: rotate(2deg); }
  30% { bottom: 101px; transform: rotate(0deg); }
  40% { bottom: 110px; transform: rotate(-2deg); }
  50% { bottom: 112px; transform: rotate(0deg); }
  60% { bottom: 110px; transform: rotate(2deg); }
  70% { bottom: 101px; transform: rotate(0deg); }
  80% { bottom: 110px; transform: rotate(-2deg); }
  90% { bottom: 112px; transform: rotate(0deg); }
  100% { left: 100%; } }
@-khtml-keyframes horizontal01 { 0% { left: -300px; bottom: 105px; transform: rotate(-1deg); }
  10% { bottom: 112px; transform: rotate(0deg); }
  20% { bottom: 110px; transform: rotate(2deg); }
  30% { bottom: 101px; transform: rotate(0deg); }
  40% { bottom: 110px; transform: rotate(-2deg); }
  50% { bottom: 112px; transform: rotate(0deg); }
  60% { bottom: 110px; transform: rotate(2deg); }
  70% { bottom: 101px; transform: rotate(0deg); }
  80% { bottom: 110px; transform: rotate(-2deg); }
  90% { bottom: 112px; transform: rotate(0deg); }
  100% { left: 100%; } }
@keyframes horizontal01 { 0% { left: -300px; bottom: 105px; transform: rotate(-1deg); }
  10% { bottom: 112px; transform: rotate(0deg); }
  20% { bottom: 110px; transform: rotate(2deg); }
  30% { bottom: 101px; transform: rotate(0deg); }
  40% { bottom: 110px; transform: rotate(-2deg); }
  50% { bottom: 112px; transform: rotate(0deg); }
  60% { bottom: 110px; transform: rotate(2deg); }
  70% { bottom: 101px; transform: rotate(0deg); }
  80% { bottom: 110px; transform: rotate(-2deg); }
  90% { bottom: 112px; transform: rotate(0deg); }
  100% { left: 100%; } }
div.welle3d { animation-timing-function: ease; -webkit-animation-timing-function: ease; -ms-animation-timing-function: ease; -moz-animation-timing-function: ease; -o-animation-timing-function: ease; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-duration: 6s; -webkit-animation-duration: 6s; -ms-animation-duration: 6s; -moz-animation-duration: 6s; -o-animation-duration: 6s; animation-name: wellen3d; -webkit-animation-name: wellen3d; -ms-animation-name: wellen3d; -moz-animation-name: wellen3d; -o-animation-name: wellen3d; }

@-moz-keyframes wellen3d { 0% { background-position: 125px -135px; }
  50% { background-position: 90px -135px; } }
@-webkit-keyframes wellen3d { 0% { background-position: 125px -135px; }
  50% { background-position: 90px -135px; } }
@-o-keyframes wellen3d { 0% { background-position: 125px -135px; }
  50% { background-position: 90px -135px; } }
@-ms-keyframes wellen3d { 0% { background-position: 125px -135px; }
  50% { background-position: 90px -135px; } }
@-khtml-keyframes wellen3d { 0% { background-position: 125px -135px; }
  50% { background-position: 90px -135px; } }
@keyframes wellen3d { 0% { background-position: 125px -135px; }
  50% { background-position: 90px -135px; } }
