/* Font: Dosis */

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

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

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




/* Font: Rubik */

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

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

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

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



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

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



body { background-image:url(bilder/bg.png); margin:0px; padding:0px; }



#bg_head { position:absolute; top:0px; left:0px; width:100%; min-width:320px; height:70px; background-image:url(bilder/bg_head.png); background-repeat:repeat-x; z-index:1; }




#container { position:relative; top:0px; left:0px; width:320px; height:100%; margin: 0px auto; text-align:left; z-index:10; }




#logo { position:absolute; top:100px; left:20px; width:280px; height:100px; z-index:11; }

#picture { position:absolute; top:230px; left:20px; width:280px; height:260px; z-index:12; }


#phone { position:absolute; top:515px; left:20px; width:130px; height:28px; z-index:13; }
#mail { position:absolute; top:515px; left:170px; width:130px; height:28px; z-index:13; }


#content { position:absolute; top:575px; left:20px; width:280px; z-index:14; }




p   { font-size:16px;
      line-height:22px;
      font-family: 'rubik_light', Arial, Helvetica, sans-serif;
      font-style:normal;
      font-weight:normal;
      font-stretch:normal;
      font-variant:normal;
      letter-spacing:0px;
      word-spacing:0px;
      text-decoration:none;
      text-align:left;
      vertical-align:top;
      color:#3c3c3c;
      border:0px;
      margin:0px; }


ul   { font-size:16px;
       line-height:22px;
       font-family: 'rubik_light', Arial, Helvetica, sans-serif;
       font-style:normal;
       font-weight:normal;
       font-stretch:normal;
       font-variant:normal;
       letter-spacing:0px;
       word-spacing:0px;
       text-decoration:none;
       text-align:left;
       vertical-align:top;
       color:#3c3c3c;
       border:0px;
       margin:0px; }


p.navigation   { font-family: 'dosis_medium', Arial, Helvetica, sans-serif; font-size:17px; line-height:50px; color:#969696; letter-spacing:1px;}

p.regular     { font-family: 'rubik_regular', Arial, Helvetica, sans-serif; }

p.medium     { font-family: 'rubik_medium', Arial, Helvetica, sans-serif; }

p.lightitalic     { font-family: 'rubik_light_italic', Arial, Helvetica, sans-serif; }

p.blue   { color:#007dc3; }

p.blueregular   { font-family: 'rubik_regular'; color:#007dc3; }

p.bluemedium   { font-family: 'rubik_regular'; color:#007dc3; }

p.small   { font-size:16px;
            line-height:24px; }


h1  { font-size:28px;
      line-height:36px;
      font-family: 'dosis_regular', Arial, Helvetica, sans-serif;
      font-style:normal;
      font-weight:normal;
      font-stretch:normal;
      font-variant:normal;
      letter-spacing:2px;
      word-spacing:0px;
      text-decoration:none;
      text-align:left;
      vertical-align:top;
      color:#007dc3;
      border:0px;
      margin:0px; }


h2  { font-size:22px;
      line-height:32px;
      font-family: 'rubik_regular', Arial, Helvetica, sans-serif;
      font-style:normal;
      font-weight:normal;
      font-stretch:normal;
      font-variant:normal;
      letter-spacing:0px;
      word-spacing:0px;
      text-decoration:none;
      text-align:left;
      vertical-align:top;
      color:#007dc3;
      border:0px;
      margin:0px; }


.navigation   { font-family: 'dosis_medium', Arial, Helvetica, sans-serif; font-size:16px; line-height:36px; color:#969696; letter-spacing:1px;}

.regular     { font-family: 'rubik_regular', Arial, Helvetica, sans-serif; }

.medium     { font-family: 'rubik_medium', Arial, Helvetica, sans-serif; }

.lightitalic     { font-family: 'rubik_light_italic', Arial, Helvetica, sans-serif; }

.blue   { color:#007dc3; }

.blueregular   { font-family: 'rubik_regular'; color:#007dc3; }

.bluemedium   { font-family: 'rubik_regular'; color:#007dc3; }

.small   { font-size:16px;
           line-height:24px; }




a:link { text-decoration:none; color:#007dc3; }
a:visited { text-decoration:none; color:#007dc3; }
a:hover { text-decoration:none; color:#007dc3; }
a:active { text-decoration:none; color:#007dc3; }

a.white:link { text-decoration:none; color:#ffffff; }
a.white:visited { text-decoration:none; color:#ffffff; }
a.white:hover { text-decoration:none; color:#ffffff; }
a.white:active { text-decoration:none; color:#ffffff; }

a.black:link { text-decoration:none; color:#000000; }
a.black:visited { text-decoration:none; color:#000000; }
a.black:hover { text-decoration:none; color:#000000; }
a.black:active { text-decoration:none; color:#