/* 
  compass 
*/
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* 
  custom 
*/
/* 
  FONT SET

  CHEAT SHEET
  http://www.impressivewebs.com/css-font-shorthand-cheat-sheet.pdf

  MyriadPro, Adelle & AdelleSans 
  https://typekit.com/kit_editor/kits/wai3tsp
*/
/* 
  apply a natural box layout model to all elements 
*/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 
  @include breakpoints 
*/
/* 
  color sets 
*/
/*
  max-width
*/
/* 
  default margins 
*/
/* 
  default width 
*/
  /*
  clear floats
*/
.clear {
  clear: both;
}

/*
  text align
*/
.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

/* 
  apply natural table vertical-align
*/
.table {
  display: table;
  overflow: hidden;
}
.table .table-cell {
  display: table-cell;
  vertical-align: middle;
}

/* 
  apply justify elements
*/
.justify-elements {
  margin-bottom: 40px;
  text-align: justify;
  font-size: 0.1px;
}

.justify-elements li, .justify-elements .justify-box {
  width: 100%;
  max-width: 320px;
  min-width: 290px;
  height: auto;
  min-height: 1px;
  margin-right: 15px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}
.justify-elements li.double, .justify-elements .justify-box.double {
  max-width: 500px;
  min-width: 580px;
}

.justify-elements::after {
  content: '';
  width: 100%;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}

.justify-elements .placeholder {
  padding: 0;
  border-top: 10px solid #922d8d;
  /* Border added to make element visible for demonstration purposes */
}

/*
  image border
*/
.img-wrapper .inline-border {
  position: relative;
}
.img-wrapper .inline-border:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 10px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.img-wrapper:hover .inline-border.black:after {
  border-color: black;
}
.img-wrapper:hover .inline-border.white:after {
  border-color: white;
}

/*
  width
*/
.width100 {
  width: 100%;
}
.width100 img {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}

/* 
  apply margins
*/
.margin-top-450, .csc-space-before-450 {
  margin-top: 450px;
}
@media screen and (max-width: 1000px) {
  .margin-top-450, .csc-space-before-450 {
    margin-top: 150px !important;
  }
}

.margin-top-400, .csc-space-before-400 {
  margin-top: 400px;
}
@media screen and (max-width: 1000px) {
  .margin-top-400, .csc-space-before-400 {
    margin-top: 133.33333px !important;
  }
}

.margin-top-350, .csc-space-before-350 {
  margin-top: 350px;
}
@media screen and (max-width: 1000px) {
  .margin-top-350, .csc-space-before-350 {
    margin-top: 116.66667px !important;
  }
}

.margin-top-300, .csc-space-before-300 {
  margin-top: 300px;
}
@media screen and (max-width: 1000px) {
  .margin-top-300, .csc-space-before-300 {
    margin-top: 100px !important;
  }
}

.margin-top-250, .csc-space-before-250 {
  margin-top: 250px;
}
@media screen and (max-width: 1000px) {
  .margin-top-250, .csc-space-before-250 {
    margin-top: 83.33333px !important;
  }
}

.margin-top-200, .csc-space-before-200 {
  margin-top: 200px;
}
@media screen and (max-width: 1000px) {
  .margin-top-200, .csc-space-before-200 {
    margin-top: 66.66667px !important;
  }
}

.margin-top-150, .csc-space-before-150 {
  margin-top: 150px;
}
@media screen and (max-width: 1000px) {
  .margin-top-150, .csc-space-before-150 {
    margin-top: 50px !important;
  }
}

.margin-top-130, .csc-space-before-130 {
  margin-top: 130px;
}
@media screen and (max-width: 1000px) {
  .margin-top-130, .csc-space-before-130 {
    margin-top: 43.33333px !important;
  }
}

.margin-top-100, .csc-space-before-100 {
  margin-top: 100px;
}
@media screen and (max-width: 1000px) {
  .margin-top-100, .csc-space-before-100 {
    margin-top: 33.33333px !important;
  }
}

.margin-top-70, .csc-space-before-70 {
  margin-top: 70px;
}
@media screen and (max-width: 1000px) {
  .margin-top-70, .csc-space-before-70 {
    margin-top: 23.33333px !important;
  }
}

.margin-top-50, .csc-space-before-50 {
  margin-top: 50px;
}
@media screen and (max-width: 1000px) {
  .margin-top-50, .csc-space-before-50 {
    margin-top: 16.66667px !important;
  }
}

.margin-top-30, .csc-space-before-30 {
  margin-top: 30px;
}
@media screen and (max-width: 1000px) {
  .margin-top-30, .csc-space-before-30 {
    margin-top: 30px;
  }
}

.multicol {
  margin-bottom: 100px;
}
@media screen and (max-width: 1000px) {
  .multicol {
    margin-bottom: 33.33333px !important;
  }
}

.margin-bottom-50, .csc-space-after-50 {
  margin-bottom: 50px;
}
@media screen and (max-width: 1000px) {
  .margin-bottom-50, .csc-space-after-50 {
    margin-bottom: 16.66667px !important;
  }
}

.transition-all {
  -webkit-transition: .3s all ease;
  -moz-transition: .3s all ease;
  -o-transition: .3s all ease;
  -ms-transition: .3s all ease;
  transition: .3s all ease;
}

.transition-opacity {
  -webkit-transition: .3s opacity ease;
  -moz-transition: .3s opacity ease;
  -o-transition: .3s opacity ease;
  -ms-transition: .3s opacity ease;
  transition: .3s opacity ease;
}

.transition-margin {
  -webkit-transition: .3s margin ease;
  -moz-transition: .3s margin ease;
  -o-transition: .3s margin ease;
  -ms-transition: .3s margin ease;
  transition: .3s margin ease;
}

.shadow {
  -webkit-box-shadow: 5px 3px 2px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 5px 3px 2px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 3px 2px 2px rgba(0, 0, 0, 0.2);
}

#menu-off-canvas {
  position: absolute;
  z-index: 300;
  font: normal 100 1em/1.1em "adelle-sans", serif;
}
@media screen and (min-width: 1001px) {
  #menu-off-canvas {
    top: -5000px;
    left: -5000px;
    display: none;
    visibility: hidden;
  }
}
#menu-off-canvas .levelHolderClass {
  position: absolute;
  top: 0px;
  left: 0px;
  padding-top: 70px;
}
#menu-off-canvas .levelHolderClass .levelHolderClass {
  position: absolute;
  top: 0px;
  left: 0px;
  padding-left: 7px;
  height: 100%;
}
#menu-off-canvas .levelHolderClass .levelHolderClass li:first-child {
  margin-top: 15px;
}
#menu-off-canvas .levelHolderClass .levelHolderClass li a {
  padding-left: 20px;
}
#menu-off-canvas .levelHolderClass .levelHolderClass li a:after {
  width: 100%;
  background-color: red;
}
#menu-off-canvas span.line-holder {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
#menu-off-canvas span.line-holder span.line {
  margin-left: -2px;
}

.medienagenten-off-canvas a {
  font-size: 100%;
  padding-left: 24px;
}
.medienagenten-off-canvas ul li {
  height: 20px;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.medienagenten-off-canvas .backItemClass {
  margin-bottom: 30px;
}
.medienagenten-off-canvas .backItemClass a {
  padding-left: 20px;
  background-position: 7px 8px;
  background-repeat: no-repeat;
}

.collapsed .medienagenten-off-canvas {
  display: none;
  visibility: hidden;
}

/*
  apply defaults
*/
html,
body {
  font-size: 16px;
  font: normal 100 1em/1.1em "adelle-sans", serif;
  width: 100%;
  letter-spacing: 2px;
  overflow-x: hidden;
  overflow-y: auto;
}
html.expanded #open,
body.expanded #open {
  display: none;
  visibility: hidden;
}
html.expanded #close,
body.expanded #close {
  cursor: pointer;
  position: relative;
  left: 10px;
  top: 14px;
  z-index: 999999;
  height: 30px;
  width: 30px;
  visibility: visible;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 99999999;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
html.collapsed #open,
body.collapsed #open {
  cursor: pointer;
  position: absolute;
  z-index: 999999;
  width: 30px;
  height: 30px;
  top: -11px;
  left: -5px;
  background-image: url(../images/page/menu-black.png);
  background-repeat: no-repeat;
  background-position: center;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
html.collapsed #close,
body.collapsed #close {
  display: none;
  visibility: hidden;
}
html.white,
body.white {
  background-color: white;
  color: black;
}
html.white #consulting,
body.white #consulting {
  background-image: url(../images/page/branding/consulting-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #consulting,
  body.white #consulting {
    background-image: url(../images/page/branding/consulting-black@x2.png);
    background-size: 55px 68px;
  }
}
html.white #design,
body.white #design {
  background-image: url(../images/page/branding/design-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #design,
  body.white #design {
    background-image: url(../images/page/branding/design-black@x2.png);
    background-size: 56px 68px;
  }
}
html.white #programmierung,
body.white #programmierung {
  background-image: url(../images/page/branding/programmierung-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #programmierung,
  body.white #programmierung {
    background-image: url(../images/page/branding/programmierung-black@x2.png);
    background-size: 46px 68px;
  }
}
html.white #pr,
body.white #pr {
  background-image: url(../images/page/branding/pr-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #pr,
  body.white #pr {
    background-image: url(../images/page/branding/pr-black@x2.png);
    background-size: 76px 68px;
  }
}
html.white #branding,
body.white #branding {
  background-image: url(../images/page/branding/branding-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #branding,
  body.white #branding {
    background-image: url(../images/page/branding/branding-black@x2.png);
    background-size: 47px 68px;
  }
}
html.white #sub.stuck,
body.white #sub.stuck {
  background-color: white;
}
html.white #sub.stuck .trenner,
body.white #sub.stuck .trenner {
  border-top: 1px solid black;
  background-color: white;
}
html.white h1, html.white h2, html.white h3, html.white h4, html.white h5, html.white h6, html.white p, html.white a,
body.white h1,
body.white h2,
body.white h3,
body.white h4,
body.white h5,
body.white h6,
body.white p,
body.white a {
  color: black;
}
html.white #close,
body.white #close {
  background-image: url(../images/page/close-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #close,
  body.white #close {
    background-image: url(../images/page/close-black@x2.png);
    background-size: 21px 21px;
  }
}
html.white #open,
body.white #open {
  background-image: url(../images/page/menu-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #open,
  body.white #open {
    background-image: url(../images/page/menu-black@x2.png);
    background-size: 21px 21px;
  }
}
html.white .backItemClass a,
body.white .backItemClass a {
  background-image: url(../images/page/back-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white .backItemClass a,
  body.white .backItemClass a {
    background-image: url(../images/page/back-black@x2.png);
    background-size: 4px 7px;
  }
}
html.white .levelHolderClass,
body.white .levelHolderClass {
  background-color: white;
}
html.white #scrollTop,
body.white #scrollTop {
  background-image: url(../images/page/top-filled-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #scrollTop,
  body.white #scrollTop {
    background-image: url(../images/page/top-filled-black@x2.png);
    background-size: 10px 11px;
  }
}
html.white #scrollTop:hover,
body.white #scrollTop:hover {
  background-image: url(../images/page/top-outline-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.white #scrollTop:hover,
  body.white #scrollTop:hover {
    background-image: url(../images/page/top-outline-black@x2.png);
    background-size: 10px 11px;
  }
}
html.white a:hover u, html.white .selected > a u, html.white .active > a u, html.white .active-tag > a u,
body.white a:hover u,
body.white .selected > a u,
body.white .active > a u,
body.white .active-tag > a u {
  border-bottom-color: black;
}
html.black,
body.black {
  background-color: black;
  color: white;
}
html.black #consulting,
body.black #consulting {
  background-image: url(../images/page/branding/consulting-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #consulting,
  body.black #consulting {
    background-image: url(../images/page/branding/consulting-white@x2.png);
    background-size: 55px 68px;
  }
}
html.black #design,
body.black #design {
  background-image: url(../images/page/branding/design-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #design,
  body.black #design {
    background-image: url(../images/page/branding/design-white@x2.png);
    background-size: 56px 68px;
  }
}
html.black #programmierung,
body.black #programmierung {
  background-image: url(../images/page/branding/programmierung-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #programmierung,
  body.black #programmierung {
    background-image: url(../images/page/branding/programmierung-white@x2.png);
    background-size: 46px 68px;
  }
}
html.black #pr,
body.black #pr {
  background-image: url(../images/page/branding/pr-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #pr,
  body.black #pr {
    background-image: url(../images/page/branding/pr-white@x2.png);
    background-size: 76px 68px;
  }
}
html.black #branding,
body.black #branding {
  background-image: url(../images/page/branding/branding-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #branding,
  body.black #branding {
    background-image: url(../images/page/branding/branding-white@x2.png);
    background-size: 47px 68px;
  }
}
html.black #theM,
body.black #theM {
  background-image: url(../images/page/branding/m-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #theM,
  body.black #theM {
    background-image: url(../images/page/branding/m-white@x2.png);
    background-size: 300px 230px;
  }
}
html.black #theB,
body.black #theB {
  background-image: url(../images/page/branding/b-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #theB,
  body.black #theB {
    background-image: url(../images/page/branding/b-white@x2.png);
    background-size: 300px 136px;
  }
}
html.black #sub.stuck,
body.black #sub.stuck {
  background-color: black;
}
html.black #sub.stuck .trenner,
body.black #sub.stuck .trenner {
  border-top: 1px solid white;
  background-color: black;
}
html.black h1, html.black h2, html.black h3, html.black h4, html.black h5, html.black h6, html.black p, html.black a,
body.black h1,
body.black h2,
body.black h3,
body.black h4,
body.black h5,
body.black h6,
body.black p,
body.black a {
  color: white;
}
html.black #close,
body.black #close {
  background-image: url(../images/page/close-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #close,
  body.black #close {
    background-image: url(../images/page/close-white@x2.png);
    background-size: 21px 21px;
  }
}
html.black #open,
body.black #open {
  background-image: url(../images/page/menu-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #open,
  body.black #open {
    background-image: url(../images/page/menu-white@x2.png);
    background-size: 21px 21px;
  }
}
html.black .backItemClass a,
body.black .backItemClass a {
  background-image: url(../images/page/back-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black .backItemClass a,
  body.black .backItemClass a {
    background-image: url(../images/page/back-white@x2.png);
    background-size: 4px 14px;
  }
}
html.black .levelHolderClass,
body.black .levelHolderClass {
  background-color: black;
}
html.black #scrollTop,
body.black #scrollTop {
  background-image: url(../images/page/top-filled-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #scrollTop,
  body.black #scrollTop {
    background-image: url(../images/page/top-filled-white@x2.png);
    background-size: 10px 11px;
  }
}
html.black #scrollTop:hover,
body.black #scrollTop:hover {
  background-image: url(../images/page/top-outline-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  html.black #scrollTop:hover,
  body.black #scrollTop:hover {
    background-image: url(../images/page/top-outline-white@x2.png);
    background-size: 10px 11px;
  }
}
html.black a:hover u, html.black .selected > a u, html.black .active > a u, html.black .active-tag > a u,
body.black a:hover u,
body.black .selected > a u,
body.black .active > a u,
body.black .active-tag > a u {
  border-bottom-color: white;
}
html.startseite.white #header a,
body.startseite.white #header a {
  color: white;
}
html.startseite.white #header a:hover u, html.startseite.white #header .selected > a u, html.startseite.white #header .active > a u, html.startseite.white #header .active-tag > a u,
body.startseite.white #header a:hover u,
body.startseite.white #header .selected > a u,
body.startseite.white #header .active > a u,
body.startseite.white #header .active-tag > a u {
  color: white;
  border-bottom-color: white;
}
html.startseite.white #open,
body.startseite.white #open {
  background-image: url(../images/page/menu-white.png);
}

a {
  text-decoration: none;
  padding: 0 0 10px 0;
  overflow: hidden;
}
a u {
  border-bottom: 1px solid transparent;
  margin-left: 0;
  margin-right: -2px;
  overflow: hidden;
  padding-bottom: 3px;
  text-decoration: none;
  margin-bottom: 3px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}

@-moz-document url-prefix() {
  a u {
    margin-right: -3px;
  }
}

p {
  line-height: 2.25em;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

h2 {
  font: normal 100 1em/1.1em "adelle-sans", serif;
  font-size: 2.95em;
  line-height: 1.75em;
  letter-spacing: 17px;
  text-transform: uppercase;
}
@media screen and (max-width: 1000px) {
  h2 {
    font-size: 1.3em;
    letter-spacing: 10px;
  }
}
@media screen and (max-width: 700px) {
  h2 {
    font-size: 1.1em;
    letter-spacing: 6.5px;
  }
}

.link h3 {
  font-size: 1em;
}
.link h2 {
  font-size: 1.6em;
}
.link h2 span.line-holder {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  overflow: hidden;
}
.link h2 span.line-holder span.line {
  margin-top: -30px;
  margin-left: -20px;
}
@media screen and (max-width: 1000px) {
  .link h2 {
    font-size: 1.2em;
  }
}

h3, h4 {
  font: normal 100 1em/1.1em "adelle-sans", serif;
  font-size: .875em;
  line-height: 1.875em;
  letter-spacing: 5.5px;
  text-transform: uppercase;
}
@media screen and (max-width: 1000px) {
  h3, h4 {
    letter-spacing: 3.5px;
  }
}

.agenten h2 {
  font: normal 400 1em/1.1em "adelle", serif;
  font-size: .875em;
  letter-spacing: 5.5px;
  line-height: 1.875em;
}
.agenten h3 {
  font: normal 100 1em/1.1em "adelle-sans", serif;
  font-size: .875em;
  letter-spacing: 5.5px;
  line-height: 1.875em;
}
@media screen and (max-width: 700px) {
  .agenten h3 {
    margin-bottom: 45px;
  }
}

.facts h3 {
  font-size: 1.6em;
}
@media screen and (max-width: 1000px) {
  .facts h3 {
    font-size: 1.2em;
  }
}
.facts h4 {
  line-height: 1.9em;
}
.facts h2, .facts h4, .facts h3 {
  margin-top: 50px;
}
@media screen and (max-width: 1000px) {
  .facts h2, .facts h4, .facts h3 {
    margin-top: 16.66667px;
  }
}

.inner {
  position: relative;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 25px;
}
@media screen and (max-width: 1000px) {
  .inner {
    padding: 0;
    width: 90%;
  }
}

.startseite #content .inner100 {
  width: 100%;
  margin-top: -14%;
}
@media screen and (max-width: 1000px) {
  .startseite #content .inner100 {
    margin-top: -10%;
  }
}

#content .inner100 {
  width: 100%;
  margin-top: 2.5%;
}
@media screen and (max-width: 1000px) {
  #content .inner100 {
    margin-top: 5%;
  }
}

/*
  apply page
*/
#page {
  position: relative;
}
#page .page-wrapper {
  width: 100%;
  margin: 0 auto;
}

#content {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

/*
  apply header
*/
#header {
  position: relative;
  z-index: 999999;
}
#header .inner {
  min-height: 345px;
}
@media screen and (max-width: 1000px) {
  #header .inner {
    min-height: 45px;
  }
}

.startseite #header {
  position: absolute;
  width: 100%;
}

#logo {
  position: absolute;
  right: 0;
}
@media screen and (max-width: 1000px) {
  #logo {
    right: 0;
  }
}
#logo a {
  margin-top: -3px;
  letter-spacing: 4px;
  float: left;
}
#logo a i {
  font: normal 400 1em/1.1em "adelle", serif;
  font-size: 1.3125em;
  margin: 0 0 10px;
  letter-spacing: 5px;
  float: right;
}
@media screen and (max-width: 1000px) {
  #logo a i {
    font-size: 0.8125em;
  }
}
#logo a span {
  position: absolute;
  margin-left: -85px;
  margin-top: 3px;
}
@media screen and (max-width: 1200px) {
  #logo a span {
    visibility: hidden;
    display: none;
  }
}

#footer h1 {
  font: normal 400 1em/1.1em "adelle", serif;
  font-size: 1.3125em;
  letter-spacing: 5px;
}

#consulting {
  width: 55px;
  height: 68px;
}

#design {
  height: 68px;
  width: 56px;
}

#programmierung {
  height: 68px;
  width: 46px;
}

#pr {
  height: 68px;
  width: 76px;
}

#theM {
  width: 300px;
  height: 230px;
}

#theB {
  width: 300px;
  height: 136px;
}

.together {
  width: 40px;
  height: 40px;
  background-image: url(../images/page/branding/together-black.png);
  background-repeat: no-repeat;
  background-position: center;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .together {
    background-image: url(../images/page/branding/together-black@x2.png);
    background-size: 27px 10px;
  }
}

.black .together {
  background-image: url(../images/page/branding/together-white.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .black .together {
    background-image: url(../images/page/branding/together-white@x2.png);
  }
}

#branding {
  height: 68px;
  width: 47px;
}

.branding {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  margin-top: 10px;
  background-repeat: no-repeat;
}

.the-m {
  max-width: 900px;
  width: 100%;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
.the-m .one {
  width: 100%;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  margin: 50px 0;
}
.the-m .three {
  text-align: left;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin: 50px 0;
}
.the-m .three .width30 {
  width: 30%;
  text-align: center;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
.the-m .three .width30:nth-child(2) {
  width: 40%;
}
@media screen and (max-width: 1000px) {
  .the-m .three .width30 {
    width: 100%;
  }
  .the-m .three .width30:nth-child(2) {
    width: 100%;
    margin: 100px auto;
  }
}
.the-m .width100 {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}

#navigation {
  position: relative;
  width: 100%;
  margin-top: 100px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
@media screen and (max-width: 1000px) {
  #navigation {
    margin-top: 25px;
  }
}
#navigation ul {
  position: relative;
  width: 100%;
}
#navigation li.menu-point {
  float: left;
  margin-right: 40px;
  overflow: hidden;
}
@media screen and (max-width: 1100px) {
  #navigation li.menu-point {
    margin-right: 20px;
  }
}
@media screen and (max-width: 1000px) {
  #navigation li.menu-point {
    display: none;
    visibility: hidden;
  }
}
#navigation li.menu-point:last-child {
  margin-right: 0;
}
#navigation .menu-off-canvas {
  display: none;
  visibility: hidden;
}
@media screen and (max-width: 1000px) {
  #navigation .menu-off-canvas {
    display: block;
    visibility: visible;
  }
}
#navigation li a {
  text-transform: uppercase;
}

.sticky-wrapper {
  position: absolute;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 25px;
}

#sub {
  position: relative;
  line-height: 1.1em;
  min-height: 95px;
  text-align: center;
  letter-spacing: 2px;
  width: 100%;
  padding-bottom: 25px;
}
#sub.stuck {
  margin: 0 auto;
  width: 100;
  position: fixed;
  top: 0;
  left: 0;
}
#sub.stuck .trenner {
  width: 92%;
}
#sub.stuck #scrollTop {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  visibility: visible;
}
#sub .trenner {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 1px;
  margin-top: 11px;
}
#sub #scrollTop {
  position: absolute;
  bottom: 32px;
  width: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 40px;
  left: 23px;
  display: none;
  visibility: hidden;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  #sub {
    display: none;
    visibility: hidden;
  }
}
#sub ul {
  width: 80%;
  margin-top: 40px;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
#sub li {
  line-height: 15px;
  text-transform: uppercase;
  margin: 0 20px 5px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}
@media screen and (max-width: 1100px) {
  #sub li {
    margin: 0 15px;
  }
}
#sub li a {
  font-size: 100%;
  margin: 0;
  padding: 0;
  text-decoration: none;
  display: block;
  overflow: hidden;
}
#sub li a span {
  margin-left: -5px;
}
#sub.filter li {
  padding-left: 25px;
  margin-left: 5px;
}
#sub.filter li.active-tag {
  background-repeat: no-repeat;
  background-position: left 5px;
  background-image: url(../images/page/toggle-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  #sub.filter li.active-tag {
    background-size: 7px 7px;
    background-image: url(../images/page/toggle-black@x2.png);
  }
}

#anker-menu {
  position: fixed;
  left: 3%;
  top: 34%;
  z-index: 999999;
}
#anker-menu ul {
  background-color: white;
  width: 50px;
  text-align: center;
}
#anker-menu ul li {
  width: 100%;
  margin: 15px 0;
}
@media screen and (max-width: 1000px) {
  #anker-menu {
    display: none;
    visibility: hidden;
  }
}

/*
  apply content
*/
#video-teaser {
  padding-bottom: 40%;
  height: 0;
  left: 0;
  top: 0;
  z-index: 0;
  position: relative;
  overflow: hidden;
}
#video-teaser img {
  width: 100%;
}
#video-teaser img.overlay {
  position: absolute;
}
@media screen and (max-width: 1000px) {
  #video-teaser img.overlay {
    display: none;
    visibility: hidden;
  }
}
#video-teaser img.overlay.mobile {
  position: absolute;
  display: none;
  visibility: hidden;
}
@media screen and (max-width: 1000px) {
  #video-teaser img.overlay.mobile {
    display: block;
    visibility: visible;
  }
}

#multicol {
  display: block;
  text-align: left;
  margin-top: 50px;
}
@media screen and (max-width: 700px) {
  #multicol {
    text-align: center;
  }
}
#multicol.max-three {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media screen and (max-width: 700px) {
  #multicol.max-three.agenten h3 {
    margin-bottom: 0px !important;
  }
}
@media screen and (min-width: 1011px) {
  #multicol.max-three .item {
    width: 33.33%;
  }
  #multicol.max-three .item.doubled {
    width: 33.33%;
  }
}
#multicol .item {
  margin-top: 150px;
  width: 20%;
  padding: 0 15px;
  text-align: left;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}
@media screen and (max-width: 1750px) {
  #multicol .item {
    width: 25%;
  }
}
@media screen and (max-width: 1350px) {
  #multicol .item {
    width: 33.33%;
  }
}
@media screen and (max-width: 1010px) {
  #multicol .item {
    width: 50%;
  }
}
@media screen and (max-width: 700px) {
  #multicol .item {
    width: 100%;
    max-width: 360px;
    padding: 0 2%;
    margin-left: auto;
    margin-right: auto;
    float: none;
    margin-top: 50px;
  }
}
#multicol .item.doubled {
  width: 40%;
}
@media screen and (max-width: 1750px) {
  #multicol .item.doubled {
    width: 50%;
  }
}
@media screen and (max-width: 1350px) {
  #multicol .item.doubled {
    width: 66.66%;
  }
}
@media screen and (max-width: 1010px) {
  #multicol .item.doubled {
    width: 50%;
  }
}
@media screen and (max-width: 700px) {
  #multicol .item.doubled {
    width: 100%;
    max-width: 360px;
    padding: 0 2%;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
}
#multicol .item img {
  width: 100%;
}
#multicol .item p:first-child {
  margin-top: -12px;
}
#multicol .item .news-header {
  height: 200px;
}
@media screen and (max-width: 700px) {
  #multicol .item .news-header {
    height: auto !important;
  }
}
#multicol .datum {
  width: 100%;
  font-size: 0.975em;
  letter-spacing: 5.5px;
  line-height: 1.875em;
  padding-bottom: 7px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}
#multicol span.line-holder {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  overflow: hidden;
}
#multicol span.line-holder span.line {
  margin-top: -20px;
  margin-left: -2px;
}

@media screen and (max-width: 1000px) {
  #address {
    text-align: center;
  }
}
#address .item {
  width: 50%;
  max-width: 400px;
  float: left;
}
@media screen and (max-width: 1000px) {
  #address .item {
    max-width: none;
    width: 100%;
    float: none;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }
}

.address p {
  line-height: 1.9em;
  letter-spacing: 7px;
}
@media screen and (max-width: 1000px) {
  .address p {
    letter-spacing: 3.5px;
  }
}

.pin-wrapper {
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  width: 96%;
}
.pin-wrapper .pin-it {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px 5px;
  display: none;
  visibility: hidden;
}
@media screen and (max-width: 1000px) {
  .pin-wrapper .pin-it {
    top: auto;
    right: auto;
    padding: 0;
    position: relative;
    width: 100%;
    margin-top: 15px;
    width: auto;
    display: block;
    visibility: visible;
    text-align: left;
  }
  .pin-wrapper .pin-it a {
    color: white;
    padding: 5px;
    background-color: black;
  }
}
.pin-wrapper.black .pin-it {
  background-color: black;
}
.pin-wrapper.white .pin-it {
  background-color: white;
}
.pin-wrapper:hover .pin-it {
  display: block;
  visibility: visible;
  cursor: pointer;
}

img {
  width: 100%;
}

/*
  apply footer
*/
#footer {
  position: relative;
  text-transform: uppercase;
  width: 100%;
}
#footer .inner ul {
  width: auto !important;
  display: block;
}
#footer .inner ul li {
  line-height: 20px;
}

.csc-textpic {
  display: inline-block;
  width: 100%;
}
.csc-textpic img {
  width: 100% !important;
  height: 100% !important;
  max-width: 1000px;
}

.csc-textpic-image {
  margin-top: 30px;
}

.csc-textpic-center .csc-textpic-imagewrap {
  text-align: center;
}

.news-header a {
  display: inline-block;
  padding-bottom: 30px;
}

#menu-off-canvas .tags {
  border-bottom: 1px solid #000000;
  display: inline-block;
  margin-left: 25px;
  margin-top: 50px;
  padding-bottom: 23px;
  padding-left: 0;
  text-align: left;
}
#menu-off-canvas h2 {
  display: none;
}
#menu-off-canvas li.active-tag {
  background-repeat: no-repeat;
  background-position: 6px 5px;
  background-image: url(../images/page/toggle-black.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  #menu-off-canvas li.active-tag {
    background-size: 7px 7px;
    background-image: url(../images/page/toggle-black@x2.png);
  }
}

#sub li {
  margin-bottom: 10px !important;
}

#anker-menu ul {
  background-color: none !important;
}

#anker-menu ul li {
  padding: 10px 0;
  width: 100%;
  background-color: #FFF;
  margin: 0px !important;
  display: none;
}
#anker-menu ul li.active {
  display: inline-block;
}

#multicol .item img {
  height: auto;
}

#sub .all.toggle.selected a u {
  border-bottom: 1px solid #FFF !important;
}

.csc-default a u {
  text-transform: uppsercase;
}