/*
    ******************
    Fonts
    ******************
*/
/*
    ******************
    Variables (Colors, fonts etc.)
    ******************
*/
/*
    ******************
    General markup
    ******************
*/
* {
  box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0; }

body {
  color: #555;
  font-size: 100%;
  line-height: 1.6875;
  margin: 70px 0 0 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  font-family: 'myriad-pro', sans-serif;
  font-style: normal;
  font-weight: 400; }

h1 {
  color: #007cb0;
  font-size: 3em;
  letter-spacing: 1px;
  margin: 4em 0 0 0;
  padding: 0;
  font-family: 'myriad-pro', sans-serif;
  font-style: normal;
  font-weight: 600; }

h2 {
  color: #999;
  font-size: 35px;
  letter-spacing: 1px;
  margin: 0 0 30px 0;
  padding: 0; }

h3 {
  font-size: 25px; }

a {
  color: #555;
  outline: none;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }
  a:hover {
    color: #0bf; }

.hidden {
  display: none; }

.invisible {
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0; }

.fixed {
  position: fixed; }

.colorBoxDimensions {
  height: 80%;
  width: 85%; }

.colorBoxDimensionsInner {
  height: 100%;
  width: 100%; }

/*
    ******************
    Top section: Logo & Navigation
    ******************
*/
#section-top {
  background: #fff;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 3; }
  #section-top .logo {
    float: left; }
    #section-top .logo img {
      height: 2.4em;
      margin-top: 2px; }
  #section-top .container {
    height: 70px;
    padding-top: 14px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
  #section-top .hamburger-menu {
    border-radius: 12%;
    cursor: pointer;
    display: none;
    float: right;
    margin: 5px 0 26px 0;
    padding: 4px 7px;
    width: 40px; }
    #section-top .hamburger-menu:hover, #section-top .hamburger-menu.active {
      background: #ddd; }
    #section-top .hamburger-menu span {
      background: #555;
      display: block;
      height: 2px;
      margin: 4px 0; }
  #section-top nav {
    display: block; }
    #section-top nav:after {
      content: ' ';
      height: 100%;
      background: left;
      clear: both;
      content: ' ';
      display: block;
      width: 100%; }
  #section-top .navigation ul {
    float: right;
    margin: 7px 0 17px 0;
    padding: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
    #section-top .navigation ul li {
      float: left;
      list-style: none;
      margin-left: 30px; }
      #section-top .navigation ul li:nth-child(4) {
        padding-left: 25px; }
      #section-top .navigation ul li a {
        font-family: 'myriad-pro', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 1.125em; }
        #section-top .navigation ul li a.active, #section-top .navigation ul li a.active span {
          color: #555;
          cursor: default; }
        #section-top .navigation ul li a.active span {
          border-bottom: 2px solid #555; }
          #section-top .navigation ul li a.active span:hover {
            border-bottom: 2px solid #555;
            color: #555;
            cursor: default; }

/*
    ******************
    Page claims
    ******************
*/
#page-claim {
  height: 875px;
  position: relative; }
  #page-claim .col-sm-12 {
    overflow: hidden; }
  #page-claim .container:first-child,
  #page-claim .col-sm-12:first-child {
    height: 875px; }
  #page-claim .infinite-loop {
    height: 875px;
    overflow: hidden;
    position: absolute;
    width: 100%; }
    #page-claim .infinite-loop .bg {
      background-repeat: no-repeat;
      background-size: cover;
      height: 875px;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      -webkit-transition: transform 10s, opacity 2s;
      -moz-transition: transform 10s, opacity 2s;
      -o-transition: transform 10s, opacity 2s;
      transition: transform 10s, opacity 2s; }
      #page-claim .infinite-loop .bg.resize {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1); }
      #page-claim .infinite-loop .bg.fadeOut {
        -khtml-opacity: 0;
        -moz-opacity: 0;
        opacity: 0; }
      #page-claim .infinite-loop .bg.fadeIn {
        -khtml-opacity: 1;
        -moz-opacity: 1;
        opacity: 1; }
    #page-claim .infinite-loop .bg1 {
      background-image: url(../img/backgrounds/bg1.jpg); }
    #page-claim .infinite-loop .bg2 {
      background-image: url(../img/backgrounds/bg2.jpg); }
    #page-claim .infinite-loop .bg3 {
      background-image: url(../img/backgrounds/bg3.jpg); }
  #page-claim .claim-wrapper p,
  #page-claim .claim-wrapper span {
    color: #0bf;
    display: inline-block;
    float: left;
    font-size: 69px;
    line-height: 1.2em;
    font-family: 'myriad-pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s; }
  #page-claim .claim-wrapper p {
    color: #fff;
    margin: 10px 0 0 0; }
  #page-claim .rotators {
    margin: 10px 0 0 22px; }
  #page-claim .line1 {
    padding-top: 100px; }
  #page-claim .line2 {
    padding: 20px 0 50px 0; }
  #page-claim .competence-content {
    bottom: 30px;
    position: absolute;
    width: 95%;
    z-index: 2; }
    #page-claim .competence-content ul,
    #page-claim .competence-content li {
      list-style: none;
      margin: 0;
      padding: 0; }
    #page-claim .competence-content li {
      color: #fff;
      float: left;
      text-align: center;
      margin-right: 9.5%;
      width: 27%; }
      #page-claim .competence-content li:last-child {
        margin-right: 0; }
      #page-claim .competence-content li span {
        display: block;
        float: none; }
        #page-claim .competence-content li span::after {
          border-left: 2px dotted #fff;
          content: ' ';
          display: block;
          height: 40px;
          margin: 5px 0 0 49.5%;
          width: 1px; }
        #page-claim .competence-content li span img {
          height: 8em; }
      #page-claim .competence-content li strong {
        display: block;
        font-size: 2.188em; }
      #page-claim .competence-content li p {
        font-size: 1.125em;
        line-height: 1.6;
        margin: 0; }
  #page-claim .competence-background {
    background: #000;
    bottom: 0;
    height: 370px;
    position: absolute;
    width: 100%;
    z-index: 1;
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    opacity: 0.6; }

#page-subclaim {
  margin: 12.500em 0 15.625em 0; }
  #page-subclaim p {
    font-size: 2.188em;
    line-height: 150%;
    margin: 0;
    padding: 0 3.125em;
    text-align: center;
    font-family: 'myriad-pro', sans-serif;
    font-style: normal;
    font-weight: 400; }
    #page-subclaim p a,
    #page-subclaim p strong {
      font-family: 'myriad-pro', sans-serif;
      font-style: normal;
      font-weight: 600; }

/*
    ******************
    Recent Work
    ******************
*/
#recent-work::after {
  background: left;
  clear: both;
  content: ' ';
  display: block;
  width: 100%; }
#recent-work .work-wrap {
  height: 30em;
  float: left;
  overflow: hidden;
  position: relative;
  width: 33.333333%;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  /* Vodafone */
  /* McFit */
  /* Telekom */
  /* Volkswagen */
  /* Wall */ }
  #recent-work .work-wrap .work {
    background-color: #eef2f5;
    background-position: center;
    background-size: cover;
    display: block;
    height: 100%;
    width: 100%;
    /*
        ******************
        Work examples
        ******************
    */ }
    #recent-work .work-wrap .work:hover {
      -webkit-transform: scale(1.25);
      -moz-transform: scale(1.25);
      -ms-transform: scale(1.25);
      -o-transform: scale(1.25);
      transform: scale(1.25); }
    #recent-work .work-wrap .work.gethappy {
      background-image: url(../img/work/CCDigital_GetHappy_00.jpg); }
    #recent-work .work-wrap .work.vodafone {
      background-image: url(../img/work/Vodafone_FlagshipStore_00.jpg); }
    #recent-work .work-wrap .work.mcfit {
      background-image: url(../img/work/McFIT_Machdichwahr_00.jpg); }
    #recent-work .work-wrap .work.telekom {
      background-image: url(../img/work/Telekom_Kundencenter_00.jpg); }
    #recent-work .work-wrap .work.vw-hongkong {
      background-image: url(../img/work/VW_Hongkong_00.jpg); }
    #recent-work .work-wrap .work.vw-picturethis {
      background-image: url(../img/work/VW_PictureThis_00.jpg); }
    #recent-work .work-wrap .work.wall {
      background-image: url(../img/work/Wall_CityToiletteApp_00.jpg); }
  #recent-work .work-wrap comment {
    background: #fff;
    bottom: 0;
    color: #555;
    display: block;
    padding: 1.5em 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8; }
    #recent-work .work-wrap comment img {
      margin-right: 15px;
      vertical-align: middle;
      width: 20%; }
    #recent-work .work-wrap comment em {
      font-style: normal; }
  #recent-work .work-wrap:nth-child(1) img {
    margin-bottom: -1px; }
  #recent-work .work-wrap:nth-child(2) img {
    margin-bottom: -7px;
    width: 15%; }
  #recent-work .work-wrap:nth-child(3) img {
    margin-bottom: -2px; }
  #recent-work .work-wrap:nth-child(4) img, #recent-work .work-wrap:nth-child(5) img {
    margin-bottom: 3px;
    width: 21%; }
  #recent-work .work-wrap:nth-child(6) img {
    width: 14%; }

/*
    ******************
    Recent work in image sliders
    ******************
*/
.work-content {
  background: #eef2f5;
  height: 100%;
  overflow: hidden !important;
  position: relative; }
  .work-content .slide {
    background-position: center;
    background-size: cover; }
  .work-content .contentWrap {
    height: 100%;
    position: absolute;
    right: 0;
    width: 32%;
    z-index: 50; }
    .work-content .contentWrap .contentInner {
      bottom: 0;
      padding: 0 40px 40px 40px;
      position: absolute; }
    .work-content .contentWrap h3 {
      font-size: 2.12em;
      font-weight: normal; }
    .work-content .contentWrap p {
      font-size: 1.24em; }

/*
    ******************
    Services
    ******************
*/
#services {
  margin-bottom: 12.500em;
  position: relative; }
  #services::after {
    background: left;
    clear: both;
    content: ' ';
    display: block;
    width: 100%; }
  #services #portfolio {
    margin: 1.625em 0 0 0;
    padding: 0; }
    #services #portfolio li {
      list-style: none;
      margin: 0;
      padding: 0; }
      #services #portfolio li p {
        font-size: 1.755em;
        margin: 0;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        font-family: 'myriad-pro', sans-serif;
        font-style: normal;
        font-weight: 600; }
        #services #portfolio li p:hover {
          color: #0bf; }
        #services #portfolio li p::after {
          background: url(../img/icon_arrow_right.svg) 50% 50% no-repeat;
          content: ' ';
          height: 36px;
          position: absolute;
          right: 50%;
          width: 24px;
          top: 15px;
          z-index: 0;
          -khtml-opacity: 0;
          -moz-opacity: 0;
          opacity: 0;
          -webkit-transition: all 0.4s;
          -moz-transition: all 0.4s;
          -o-transition: all 0.4s;
          transition: all 0.4s; }
        #services #portfolio li p em {
          cursor: pointer;
          display: block;
          font-style: normal;
          padding: 0.188em 1.125em 0.188em 0;
          width: 50%; }
      #services #portfolio li span {
        display: block;
        font-size: 1.375em;
        left: 60%;
        overflow: hidden;
        position: absolute;
        top: 8%;
        width: 38%;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s; }
        #services #portfolio li span img {
          display: block;
          margin-bottom: 1em;
          width: 300px; }
        #services #portfolio li span comment {
          display: block;
          line-height: 30px; }
        #services #portfolio li span.padded comment {
          margin-top: 30px; }
      #services #portfolio li:first-child p.active em,
      #services #portfolio li p.active em {
        color: #007cb0; }
      #services #portfolio li:first-child p.active::after, #services #portfolio li:first-child p.active + span,
      #services #portfolio li p.active::after,
      #services #portfolio li p.active + span {
        overflow: auto;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        opacity: 1; }

/*
    ******************
    Contact
    ******************
*/
#contact {
  margin-bottom: 100px; }

/*
    ******************
    Logos of companies we have worked for
    ******************
*/
#companies {
  background: #007cb0; }
  #companies .companies-list {
    margin: 120px 0 0 0;
    padding: 0; }
    #companies .companies-list::after {
      background: left;
      clear: both;
      content: ' ';
      display: block;
      width: 100%; }
    #companies .companies-list li {
      float: left;
      height: 120px;
      list-style: none;
      margin: 0 9% 0 0;
      padding: 0;
      text-align: center;
      width: 18%;
      /* VW */
      /* Miles&More */
      /* Vodafone */
      /* adidas */
      /* Fraunhofer */
      /* BMW */
      /* Generali */
      /* E-Post */
      /* Danone */ }
      #companies .companies-list li:nth-child(4n) {
        margin-right: 0; }
      #companies .companies-list li img {
        width: 60%; }
      #companies .companies-list li:nth-child(3) img {
        margin-top: 5px;
        width: 85%; }
      #companies .companies-list li:nth-child(4) img {
        margin-top: 5px;
        width: 70%; }
      #companies .companies-list li:nth-child(5) img {
        margin-top: 13px;
        width: 70%; }
      #companies .companies-list li:nth-child(6) img {
        margin-top: 10px;
        width: 55%; }
      #companies .companies-list li:nth-child(8) img {
        margin-top: 5px;
        width: 85%; }
      #companies .companies-list li:nth-child(9) img {
        margin-top: 0;
        width: 40%; }
      #companies .companies-list li:nth-child(10) img {
        margin-top: 10px;
        width: 40%; }
      #companies .companies-list li:nth-child(11) img {
        margin-top: 24px; }
      #companies .companies-list li:nth-child(12) img {
        margin-top: 20px;
        width: 80%; }
  #companies h1 {
    color: #fff;
    font-weight: normal;
    margin: 120px 0 20px 0;
    padding: 0;
    text-align: center; }
  #companies .contact {
    height: 220px;
    text-align: center; }
    #companies .contact a {
      color: #fff;
      font-size: 2.188em;
      -webkit-transition: all 0.1s;
      -moz-transition: all 0.1s;
      -o-transition: all 0.1s;
      transition: all 0.1s; }

/*
    ******************
    Imprint
    ******************
*/
.toggled-content {
  background: #ddd;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }
  .toggled-content.open {
    height: auto;
    z-index: 1;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
  .toggled-content.closed {
    height: 0;
    overflow: hidden;
    z-index: -1;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
  .toggled-content .toggle-wrap {
    height: 35px;
    position: absolute;
    right: 40px;
    top: 30px;
    width: 35px;
    z-index: 1;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
    .toggled-content .toggle-wrap .toggle-trigger {
      background: url(../img/close.svg) no-repeat;
      background-size: cover;
      display: block;
      height: 100%;
      position: relative;
      width: 100%; }
      .toggled-content .toggle-wrap .toggle-trigger::before {
        content: ' ';
        height: 0;
        left: 50%;
        position: absolute;
        top: 50%;
        width: 0;
        z-index: -1;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s; }
      .toggled-content .toggle-wrap .toggle-trigger:hover::before {
        border: 28px solid #fff;
        border-radius: 100%;
        left: -10px;
        top: -10px;
        -khtml-opacity: 1;
        -moz-opacity: 1;
        opacity: 1; }
  .toggled-content h1 {
    margin: 0.5em 0 0.6em 0; }
  .toggled-content .col-sm-12 {
    margin-bottom: 2.5em;
    position: relative; }

/*
    ******************
    Legal
    ******************
*/
#legal p {
  font-size: 0.8em; }

/*
    ******************
    Page-footer
    ******************
*/
#page-footer {
  background: #252525;
  bottom: 0;
  height: 150px;
  overflow: hidden;
  width: 100%; }
  #page-footer::after {
    background: left;
    clear: both;
    content: ' ';
    display: block;
    width: 100%; }
  #page-footer .company-data {
    float: left;
    margin: 40px 0 0 0;
    padding: 0;
    width: 69%; }
    #page-footer .company-data li {
      line-height: 1.4em;
      float: left;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 22%; }
      #page-footer .company-data li a,
      #page-footer .company-data li span {
        color: #fff;
        font-size: 0.9em;
        -khtml-opacity: 0.5;
        -moz-opacity: 0.5;
        opacity: 0.5; }
      #page-footer .company-data li a {
        -khtml-opacity: 0.5;
        -moz-opacity: 0.5;
        opacity: 0.5;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s; }
        #page-footer .company-data li a img {
          margin-top: 2px;
          width: 135px; }
        #page-footer .company-data li a:hover {
          -khtml-opacity: 1;
          -moz-opacity: 1;
          opacity: 1; }
  #page-footer .navigation {
    margin: 37px 0 0 0;
    float: right; }
    #page-footer .navigation li {
      color: #fff;
      float: left;
      list-style: none;
      margin-left: 40px; }
      #page-footer .navigation li a {
        color: #fff;
        font-size: 1.125em;
        font-family: 'myriad-pro', sans-serif;
        font-style: normal;
        font-weight: 600;
        -khtml-opacity: 0.5;
        -moz-opacity: 0.5;
        opacity: 0.5;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s; }
        #page-footer .navigation li a:hover {
          color: #fff;
          -khtml-opacity: 1;
          -moz-opacity: 1;
          opacity: 1; }
  #page-footer .copyright {
    color: #fff;
    float: right;
    font-size: 0.7em;
    margin: 6px 0 0 0;
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5; }

/*# sourceMappingURL=main.css.map */