body {
  /* fuer Fliesstext. */
  font-family: 'DIN Next W01 Regular', sans-serif,arial;
  font-weight:100;
  line-height: 1.0;
  font-size: 16px;
  color:#000;

  }

  /* fuer Fliesstext. */
  h1 {
  font-family: 'DIN Next W01 Bold', sans-serif,arial;
  /* color:#ccc; */
  }

  /* fuer die kleinen Ueberschriften.. */
  h2,h3,h4,h5,h6,a {
  font-family: 'FetteEngD W01 Regular', sans-serif,arial;

  color:#000;

  }

  /* super cooleer Text Schatten */
/*
h1,h2,h3,h4,h5,h6, {
text-shadow: 0 1px 5px rgba(0,0,0,.2);
}

*/

.footer-text {
  font-size:0.75em;
  color:#808080;
  line-height: 1.1em;
  }

  .floatleft {
    text-align:left!important;
    border-bottom: 2x solid white!important;
    padding: 0.4em 0.8em;
  }

  a.bottom{
  font-family: 'DIN Next W01 Bold', sans-serif,arial;

  }

a.navi {
 
font-family: 'DIN Next W01 Bold', sans-serif,arial;
  font-size:0.85em;
  font-weight:100;
}


p {
    font-size:0.85em;
    font-weight:100;
    line-height: 1.3em;
  }
h1 {
  font-size:1.9em;
  font-weight:400;
  margin-top: 0px;
  margin-bottom: 0px;

}

h2 {
  font-size:1.6em;
  margin-top: 0px;
  margin-bottom: 0px;
  letter-spacing: 0.01em;
  font-weight:100;
}
h3 {
  font-size:1.4em;
}
h4 {
  font-size:1em;
}

/* GLYCK FARBEN */



.bgweiss h1,.bgweiss h2,.bgweiss h3,.bgweiss h4 {color:#f39200;}
.bgweiss p {color:#000;}
.bgweiss a.bottom {color:#00a7a8;}

.apotheker h2 {color:#00a7a8;}

.bgtuerkies h1,.bgtuerkies h2,.bgtuerkies h3,.bgtuerkies h4 {color:#fff;}
.bgtuerkies p {color:#fff;}
.bgtuerkies .bottom,.bgtuerkies .download {color:#fff;}

.bgorange h1,.bgorange h2,.bgorange h3,.bgorange h4 {color:#fff;}
.bgorange p {color:#fff;}
.bgorange .bottom {color:#fff;}

.bggrau h1,.bggrau h2,.bggrau h3,.bggrau h4 {color:#fff;}
.bggrau p {color:#000;}
.bggrau .bottom {color:#fff;}

.bghellgrau h1,.bghellgrau h2,.bghellgrau h3,.bghellgrau h4 {color:#00a7a8;}
.bghellgrau p {color:#000;}
.bghellgrau .bottom {color:#00a7a8;}


.bgrezept h1,.bgrezept h2,.bgrezept h3,.bgrezept h4 {color:#f39200;}
.bgrezept p {color:#000;}
.bgrezept .bottom {color:#f39200;}
.bgrezept .detail {margin-left:50px;font-weight:400;}

.orange {color:#f39200;!important}
.hellgrau {color:#f2f2f2;!important}
.tuerkies {color:#00a7a8;!important}
.turkies {color:#00a7a8;!important}
.grau {color:#cccccc;!important}
.weiss {color:#fff;!important}



.bottom
  {
  position:absolute;
  bottom:27px;
  left:27px;
  font-weight:100;
  vertical-align: top;
  }

a.mail:before {
 font-family: FontAwesome;
 content: "\f0e0";
 display: inline-block;
 padding-right: 8px;
 vertical-align: middle;
}

a.arrow:before {
 font-family: FontAwesome;
 content: "\f061";
 display: inline-block;
 padding-right: 6px;
 vertical-align: middle;
}
a.pfeil:before {
 font-family: FontAwesome;
 content: "\f061";
 display: inline-block;
 padding-right: 6px;
 vertical-align: middle;
}

/*  #  ##### Material Icons ----  NEW * NEW * NEW * ######  # */



a.navi:before {
font-family: "Material Icons";
font-size: 1.2em;
content: "\E5C8";
display: inline-block;
padding-right: 6px;
vertical-align: top;
color:#00a7a8;
text-decoration: none;

}

a.link:before {
  font-family: "Material Icons";
  content: "\E5C8";
  display: inline-block;
  padding-right: 6px;
  vertical-align: top;
  text-decoration: none;

}


.navigation {list-style-type: none;}
.navi {    line-height: 1.4em;}
.aktiv {color:#00a7a8;}
.navi:hover {
  text-decoration: none;
  color:#00a7a8;
  text-decoration:none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
ul.navigation {
  
margin-left:-50px; 
  
}



.roll {
    display: inline-block;
    overflow: hidden;

    vertical-align: top;

    -webkit-perspective: 400px;
       -moz-perspective: 400px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
}
.roll span {
    display: inline-block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
}
    .roll:hover span {
        /* background: #fff; */

        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }
.roll span:after {
    content: attr(data-title);

    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;

    color: #000;
    /* background: #fff; */

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

a.bottom:before {
  font-family: "Material Icons";
  content: "\E5C8";
  display: inline-block;
  padding-right: 2px;
  vertical-align: middle;
  text-decoration: none;

}


.schmal {
  line-height: 1.2em;
  font-size:13px;

}



a.download:before {
  font-family: "Material Icons";
  content: "\E5C8";
  display: inline-block;
  padding-right: 2px;
  vertical-align: middle;
  text-decoration: none;

}
h1 a.glyckwochenlink  {

/*
  font-family: 'DIN Next W01 Bold', sans-serif,arial;
  font-family: 'DIN Next W01 Regular', sans-serif,arial;
  font-family: 'FetteEngD W01 Regular', sans-serif,arial;  */
  
  font-family: 'DIN Next W01 Bold', sans-serif,arial;  
  font-size:1.1em;
  font-weight:100;

  margin-left: -27px;
  margin-bottom: 0px;
  color:#fff;
  text-decoration: none!important;
}

a.glyckwochenlink:before {
  font-family: "Material Icons";
  content: "\E5C8";
  display: inline-block;
  padding-right: 2px;
  vertical-align: bottom;
  text-decoration: none!important;
  color:#fff;
}