@charset "UTF-8";
@font-face {
  font-family: 'Congenial RegularWeb';
  src: url("../fonts/Congenial RegularWeb.woff") format("woff"); }
@font-face {
  font-family: 'Congenial ExtraLightWeb';
  src: url("../fonts/Congenial ExtraLightWeb.woff") format("woff"); }
/* -------------------------------------
--------------- DOKUMENT ---------------
------------------------------------- */
html, body {
  height: 100%;
  line-height: 150%;
  margin: 0;
  background-color: #fff; }

body, p {
  font-family: Congenial RegularWeb, sans-serif;
  font-size: 21px;
  /*ca 16pt */
  color: #7B3C5F; }

#seite {
  position: relative;
  min-height: 100%;
  width: 100%;
  margin: 0 auto; }

/* -------------------------------------
--------------- HEADER ---------------
------------------------------------- */
#headerC {
  margin: 0 auto;
  width: 800px;
  /*padding-left: 100px; /*nur f├╝r startseite*/ }

#header {
  z-index: 999;
  width: 100%;
  height: 70px;
  overflow: hidden;
  background-color: #6B3854;
  color: #7B3C5F;
  -webkit-transition: height 0.5s ease;
  /*safari*/
  transition: height 0.5s ease; }

#logo {
  position: absolute;
  width: 48px;
  margin: 5px; }

#logoType {
  /* evtl in svg file integrieren */
  /*display: inline;*/
  position: relative;
  top: 18px;
  left: 67px;
  margin: 0;
  font-size: 12pt;
  line-height: 14pt;
  color: #fff; }

#logoType > span:first-child {
  letter-spacing: 5px; }

#logoType > span:last-child {
  letter-spacing: 1px;
  font-family: Congenial ExtraLightWeb, sans-serif; }

#headerC > #lt {
  position: relative;
  width: 225px;
  left: 50px; }

#headerC > .menu {
  left: 231px !important; }

.fixi {
  position: fixed;
  /*background-color: #111 !important; */ }

.fixi + #main {
  top: 95px; }

.smaller {
  height: 16px !important;
  -webkit-transition: height 0.3s ease;
  /*safari*/
  transition: height 0.3s ease; }

.smaller:hover {
  height: 70px !important;
  -webkit-transition: height 0.5s ease;
  /*safari*/
  transition: height 0.5s ease; }

.smaller #hMenu {
  width: 48px !important;
  top: -28px;
  -webkit-transition: all 0.5s ease;
  /*safari*/
  transition: all 0.5s ease; }

.smaller:hover #hMenu {
  width: 100% !important;
  top: 0;
  left: 0;
  -webkit-transition: all 0.5s ease;
  /*safari*/
  transition: all 0.5s ease; }

/* -------------------------------------
--------------- MENU -----------------
------------------------------------- */
.menu {
  position: relative;
  top: -16px;
  left: 171px;
  font-family: Congenial ExtraLightWeb, sans-serif;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  padding: 3px;
  /*aus altem Style*/
  -webkit-transition: color 0.5s ease;
  /*safari*/
  transition: color 0.5s ease; }

.location {
  color: #fff; }

#hMenu > .menu {
  /*f├╝r unterseiten*/
  top: -12px; }

.menu:hover {
  color: #FFC817; }

#hMenuLogo {
  /*obsolet*/
  position: relative;
  top: 6px;
  width: 48px; }

#hMenuContainer {
  position: relative;
  float: right;
  max-width: 800px;
  width: 100%;
  margin: 0 0 10px 0;
  background-color: #6B3854; }

#hMenu {
  position: relative;
  top: 0;
  /* for css animation */
  left: 0;
  /* for css animation */
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
  /*-webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;*/ }

#hMenu:hover {
  width: 100%;
  /*-webkit-transition: width 1.5s ease;
  transition: width 1.5s ease;*/ }

/* -------------------------------------
--------------- MAIN INHALT ALG. -------
------------------------------------- */
#main {
  position: relative;
  min-height: 100%;
  width: 800px;
  /* f├╝r unterseiten 800 */
  margin: 0 auto;
  /*padding-bottom: 100px; Abstand zum Footer*/ }

h2.homePage {
  font-family: Congenial RegularWeb, sans-serif;
  font-size: 32px;
  line-height: 143%;
  position: relative;
  left: 50px; }

h2.galery {
  font-family: Congenial ExtraLightWeb, sans-serif;
  font-size: 30px; }

#hMenuContainer + h2, h2.galery {
  /* f├╝r Unterseiten */
  top: 12px;
  margin: 0px 0px 10px; }

a {
  /* in use??? */
  font-family: Congenial ExtraLightWeb, sans-serif;
  color: #fff;
  font-size: 18px;
  text-decoration: none; }

a:hover {
  color: #000;
  text-decoration: none; }

/* -------------------------------------
--------------- FOOTER ---------------
------------------------------------- */
#footer {
  font-family: Congenial ExtraLightWeb, sans-serif;
  font-size: 16px;
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  -webkit-column-rule: 1px solid white;
  -moz-column-rule: 1px solid white;
  column-rule: 1px solid white;
  width: 98%;
  padding: 10px 1% 10px 1%;
  background-color: #FFCB8C;
  color: #fff;
  line-height: 143%;
  position: relative;
  top: 95px;
  text-align: center;
  height: 20px; }

.push {
  height: 135px; }

#seite {
  margin-bottom: -135px; }

#footer a {
  font-size: 16px;
  color: #fff; }

#footer a:hover {
  font-size: 16px;
  color: #7B3C5F; }

/* -------------------------------------
---------- INHALT STARTSEITE ----------
------------------------------------- */
.storyIcon {
  float: left;
  display: inline; }

.mainStory {
  clear: both;
  position: relative;
  left: 50px;
  border: dashed lightGrey 0px;
  margin-top: 30px;
  height: 149px; }

.storyP {
  border: dashed lightGrey 0px;
  position: relative;
  left: 30px;
  top: -7px;
  width: 670px;
  margin: 0px;
  color: #7B3C5F; }

/* -------------------------------------
----------- INHALT UNTERSEITEN --------
------------------------------------- */
#leftPrevList {
  position: relative;
  top: 2px;
  float: right;
  width: 100%;
  max-width: 800px;
  color: #892061;
  /*background-color: #fff; blackbefore*/ }

div.webWorkPrev {
  position: relative;
  left: 0px;
  top: 15px;
  height: 230px;
  margin-bottom: 50px;
  background-color: #fff;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px; }

div.webWorkPrev:hover {
  background-color: #fff; }

.prevImg {
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 1;
  /*height: 200px;
  width: auto;*/
  width: 50%;
  /*min-width: =>4 Zeilen*/
  float: left; }

h3.WebLink {
  position: relative;
  top: -5px;
  left: 15px;
  margin: 0;
  width: 95%;
  font-family: Congenial RegularWeb, sans-serif;
  font-size: 21px;
  color: #892061;
  line-height: 140%; }

p.webtxt {
  position: relative;
  top: -3px;
  left: 15px;
  width: 100%;
  margin: 0;
  font-family: Congenial ExtraLightWeb, sans-serif;
  font-size: 16px;
  color: #892061;
  text-decoration: none;
  line-height: 186%; }

#video {
  width: 100%;
  position: relative;
  margin-bottom: 40px; }

div.inListVideo {
  height: auto; }

/* -------------------------------------
--------------- MOBILE -----------------
------------------------------------- */
@media only screen and (max-width: 800px) {
  body {
    min-width: 200px; }

  #main {
    width: 100%;
    /*min-width: 400px; /*oldStuff*/
    /*padding: 2.5%; /*oldStuff*/
    /*padding-bottom: 200px;*/ }

  .padding {
    position: relative;
    width: 92%;
    left: 4%; }

  #headerC {
    width: 100%; }
    #headerC a {
      display: block;
      left: 4%;
      position: relative;
      width: 200px;
      top: 0;
      font-size: 16pt; }

  #header {
    height: auto;
    padding-bottom: 10px; }

  #logo {
    left: 4%;
    position: absolute; }

  #logoType {
    /*left: $leftMargin;*/
    position: relative; }

  #hMenu {
    width: auto;
    white-space: normal;
    height: auto; }

  #lt {
    height: 70px;
    left: 0 !important;
    /*margin already in logo*/ }

  .menu {
    white-space: nowrap;
    width: 95%;
    display: block;
    top: 0px !important; }

  #headerC > .menu {
    left: 4% !important; }

  #hMenuLogo {
    /*obsolet*/
    left: 50%;
    margin-left: -11px;
    margin-bottom: 10px; }

  .smaller {
    height: 70px !important; }

  .smaller:hover {
    height: 70px !important; }

  .smaller #hMenu {
    width: 100% !important;
    top: 0;
    left: 0; }

  .smaller:hover #hMenu {
    width: 100% !important;
    top: 0;
    left: 0; }

  .fixi {
    position: relative; }

  .fixi + #main {
    top: 16px; }

  #footer {
    font-family: Congenial ExtraLightWeb, sans-serif;
    font-size: 18px;
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
    -webkit-column-rule: 1px solid white;
    -moz-column-rule: 1px solid white;
    column-rule: 1px solid white;
    background-color: #FFCB8C;
    color: #fff; }

  #footer, .push {
    height: 55px; }

  h2 {
    position: relative;
    left: 4%;
    width: 92%; }

  h2.homePage {
    left: 4%; }

  .mainStory {
    clear: both;
    border: dashed lightGrey 0px;
    margin-top: 30px;
    height: auto;
    left: 0; }

  .storyIcon {
    display: block;
    float: none;
    margin: 0 auto;
    width: 50%;
    min-width: 149px;
    max-width: 250px; }

  .storyP {
    border: dashed lightGrey 0px;
    position: relative;
    left: 4%;
    top: 5px;
    width: 92%;
    margin: 0px; }

  div.webWorkPrev {
    height: auto;
    width: 92%;
    left: 4%; }

  img.prevImg {
    top: 0;
    height: auto;
    width: 100%;
    left: 0; }

  h3.WebLink {
    top: 12px;
    width: auto;
    left: 0; }

  p.webtxt {
    top: 12px;
    width: auto;
    left: 0; }

  #video {
    width: 92%;
    left: 4%;
    top: 16px; }

  div.inListVideo {
    height: auto; }

  div.inListVideo > video {
    width: 100% !important; } }