@charset "UTF-8";

 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 hgroup,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   outline: 0;
 }

 /* HTML5 display-role reset for older browsers */
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
   display: block;
 }

 body {
   line-height: 1;
 }

 /* fonts */
 @font-face {
   font-family: 'sketch_fine_serif_regular';
   src: url('../fonts/sketch_fine_serif-webfont.woff2') format('woff2'),
     url('../fonts/sketch_fine_serif-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: 'din_pro_regular';
   src: url('../fonts/DINPro-Regular.eot');
   src: url('../fonts/DinPro-Regular.woff') format('woff'),
     url('../fonts/DINPro-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }

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

 /* ==================================================
    Global
   ================================================== */
 body {
   background-color: #FFF;
   font-family: sans-serif;
 }

 #wrapper {
   width: 980px;
   min-height: 600px;
   margin: 0 auto;
 }

 ul {
   list-style-type: none;
 }

 strong {
   font-weight: bold;
 }

 .fa {
   display: inline-block;
   font-size: 115%;
   font-family: Helvetica sans-serif;
   text-rendering: auto;
   font-weight: bold;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 i.fa-at:before {
   content: "@";
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 a:hover {
   color: #008B8B;
 }

 em {
   font-style: italic;
 }

 .smaller {
   font-size: 0.85em;
 }

 /* ==================================================
    Header
   ================================================== */
 #header {
   width: 100%;
   height: 121px;
 }

 #header .header-title-wrapper {
   width: 490px;
 }

 #header .title {
   width: 100%;
   padding-top: 73px;
 }

 #header .title .eins {
   vertical-align: -5%;
 }

 /* k */
 #header .title .zwei {
   vertical-align: -11%;
 }

 /* l */
 #header .title .drei {
   vertical-align: 0%;
 }

 /* e */
 #header .title .vier {
   vertical-align: -5%;
 }

 /* i */
 #header .title .fuenf {
   vertical-align: -10%;
 }

 /* n */
 #header .title .sechs {
   vertical-align: -5%;
 }

 /* e */
 #header .title .sieben {
   vertical-align: -5%;
 }

 /* n */
 #header .title .acht {
   vertical-align: -5%;
 }

 /* t */
 #header .title .neun {
   vertical-align: 3%;
 }

 /* i */
 #header .title .zehn {
   vertical-align: -5%;
 }

 /* g */
 #header .title .elf {
   vertical-align: -5%;
 }

 /* e */
 #header .title .zwoelf {
   vertical-align: -10%;
 }

 /* r */

 #header h1 {
   font-size: 2.3em;
   font-family: 'sketch_fine_serif_regular';
   float: right;
 }

 #header h1 .bigger,
 .bigger {
   font-size: 1.2em;
 }

 .index #header h1 {
   margin-top: -5px;
 }

 /* ==================================================
    Nav
   ================================================== */
 #main-nav-wrapper {
   width: 480px;
   float: right;
 }

 #main-nav {
   float: right;
   /*  background: rgb(236, 228, 215); 
  background: rgba(236, 228, 215, .95);*/
 }

 ul#nav {
   list-style: none;
   margin: 0;
   padding: 10px;
   text-align: right;
   color: #9D9E9A;
 }

 ul#nav li {
   display: inline;
 }

 ul#nav a {
   display: inline-block;
   /*  width: 130px;*/

   padding: 5px 20px;

   text-align: center;
   text-decoration: none;
   font-size: 0.9em;
   font-family: 'din_pro_medium';
   color: inherit;
 }

 ul#nav a.active {
   color: #DD7A24;
 }

 ul#nav a:hover {
   color: #DD7A24;
 }

 ul#nav a:hover {
   text-decoration: none;
 }

 ul#nav span.devider {
   font-size: 1.1em;
   font-weight: 300;
 }

 /* ==================================================
    Content
   ================================================== */

 .content {
   width: 100%;
 }

 .content-left {
   width: 50%;
   float: left;
   height: 489px;
 }

 .content-right {
   width: 50%;
   float: right;
   height: 489px;
 }

 .content-text p,
 .content-text li {
   color: #FFFFFE;
 }

 .content-text-wrapper {
   padding: 30px 30px 60px 30px;
 }

 .content-text h4 {
   float: right;
   font-size: 2em;
   font-family: 'sketch_fine_serif_regular';
 }

 .content-text p,
 .content-text li {
   font-size: 0.8em;
   line-height: 1.6em;
   font-family: 'din_pro_regular';
 }

 .content-container ul li.bullet:before {
   content: "•";
   font-size: 10pt;
   padding-right: 5px;
 }

 .content-text p,
 .content-container ul {
   margin-bottom: 20px;
 }

 .content-pic {
   background-repeat: no-repeat;
   background-size: cover;
 }

 .content-quarter {
   float: left;
   width: 25%;
   overflow: auto;
 }

 .content-quarter.first {
   margin-top: 60px;
   background-color: #C5D189;
 }

 .content-quarter.second {
   margin-top: 10px;
   background-color: #EFB1A4;
 }

 .content-quarter.third {
   margin-top: 125px;
   background-color: #86B3B2;
 }

 .content-quarter.fourth {
   margin-top: 25px;
   background-color: #C78577;
 }

 /* *** Index ************************ */
 .index .content-pic {
   background-image: url("../img/pic1_quadr.jpg");
 }

 .index .content-text {
   background-color: #7BBBC9;
 }

 /* *** Philosophie ************************ */

 .philosophie .content-pic {
   background-image: url("../img/pic2.jpg");
 }

 .philosophie .content-text {
   background-color: #AEB972;
 }

 /* *** Info ************************ */

 .info-subject-wrapper {
   padding: 20px;
 }

 .info-subject p {
   font-family: 'din_pro_medium';
   font-size: 0.77em;
   line-height: 1.2em;
 }

 .info-subject {
   margin-bottom: 10px;
 }

 .info-subject.white p {
   color: white;
 }

 .info-subject p.title {
   font-family: 'din_pro_medium';
   font-size: 0.95em;
 }

 .zwei-tiger img {
   position: absolute;
   width: 170px;
   margin-left: 40px;
   margin-top: -18px;
   z-index: -1;

 }

 .geteilter-tiger img {
   z-index: -1;
   position: absolute;
   margin-left: -80px;
   margin-top: -100px;
   width: 400px;
 }

 /* *** Galerie ************************ */

 .galerie .content-container {
   margin: 0 auto;
   background: #fff;
 }

 .galerie .content-container>div {
   position: relative;
   float: left;
 }

 .galerie .content-container>div>img {
   display: block;
   width: 240px;
   height: 240px;
 }

 /* *** Kontakt ************************ */

 .kontakt .content-text {
   background-color: #C78577;
 }

 /* *** Impressum ************************ */

 .impressum .content-text,
 .datenschutz .content-right.content-text {
   background-color: #AEB972;
 }

 .impressum .content-pic {
   background-image: url("../img/pic_socke.jpg");
 }

 /* *** Datenschutzerklärung ************ */
 .datenschutz .content-left {
   height: auto;
 }

 /* ==================================================
    Footer
   ================================================== */
 #footer {
   clear: both;
   width: 100%;
   height: 200px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center bottom;
 }

 .index #footer {
   background-image: url("../img/tiger_illu_1.jpg");
 }

 .philosophie #footer {
   background-image: url("../img/tiger_illu_2.jpg");
 }

 .galerie #footer {
   background-image: url("../img/tiger_illu_3.jpg");
 }

 @media only screen and (max-width: 880px) {
   #wrapper {
     width: 100%;
   }

   #header .header-title-wrapper {
     width: 100%;
   }

   #header h1 {
     font-size: 1.8em;
   }

   .content-right {
     height: inherit;
   }

   .kontakt .content-left,
   .kontakt .content-right,
   .impressum .content-left,
   .impressum .content-right,
   .datenschutz .content-left {
     float: none;
     width: 490px;
   }

   .index .content-right {
     height: 800px;
   }



   .index .content-left,
   .index .content-right,
   .philosophie .content-left,
   .philosophie .content-right,
   .datenschutz .content-right {
     float: none;
     width: 100%;
   }

   .content-pic {
     background-size: cover !important;
     background-position: center;
   }

   .geteilter-tiger,
   .zwei-tiger {
     display: none;
   }
 }

 @media only screen and (max-width: 700px) {
   #header h1 {
     float: left;
   }

   #main-nav {
     float: left;
   }

   #header .title {
     min-width: 100%;
   }

   #header .title h1 {
     padding-left: 20px;
   }

   .content-half {
     width: 100%;
     clear: both;
   }

   .content-quarter {
     width: 50%;
     float: left;
   }

   .content-text p,
   .content-text li {
     font-size: 1em;
     line-height: 1.8em;
   }

   .galerie .content-container>div>img {
     width: 100%;
     height: auto;
   }

   .kontakt .content-left,
   .kontakt .content-right,
   .impressum .content-left,
   .impressum .content-right,
   .datenschutz .content-left {
     width: 100%;
     height: 620px;
   }
 }