main.less

@import "_bootstrap.less";
@import "_variables.less";
//@import (inline) "_bower_components/animate.css/animate.css";

html.wf-active li, html p {
  letter-spacing: 0;
}

body{
  height:101%;
  padding-top:0;

  font-weight: 100;
}

* {
  // text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
  // -webkit-text-stroke: 1px rgba(0, 0, 0, 0.4);
  -webkit-font-smoothing: antialiased;
}

p, dd, li {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

.container-full {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  background-color:@boxblau;
}

.container.content {
  padding-top:210px;
}

@media (max-width: @screen-md-max)  {
  body{
    padding-top:50px;
  }
  .container.content {
    padding-top:50px;
  }
}

@media (max-width: @screen-md-max)  {
  body{
    // padding-top:100px;
  }
}

h1,h2,h3,h4,h5,h6 {
  font-weight:400;
}

.navbar .logo {
  margin-top: 50px;
  width:269px;
  height:82px;
}

@media (max-width: @screen-md-max)  {
  .navbar .logo {
    margin-top: 0px;
    width:92px;
    height:28px;
  }
}

.einblicke {
  .table>tbody>tr>td {
    padding:3px;
    border-top: none;
  }
  td {
    img {
      //height: 168px;
    }
  }
  td[rowspan] {
    img {
      //height: 343px;
    }
  }
  img {
    width:100%;
  }
}

.kompedent-grau {
  background-color: @boxgrau;
}

#sidebar {
  font-weight:400;
  h4 {
    color:@boxblau;
    margin-top:0;
    font-size:@font-size-base;
    text-transform: uppercase;
  }
  a {
    color:#232323;
    font-size:@font-size-base;
    text-decoration: none;

    &:hover, &:active, &:visited {
      color:#232323;
    }

    &.active {
      color:@boxblau;
    }
  }
}

section {
  &.kompedent-grau {
    padding-top:60px;
    padding-bottom:60px;

    h1 {
      font-size:63px;
      line-height:63px;
      padding-left:40px;
      padding-bottom:10px;
      margin-bottom:30px;
      text-transform: uppercase;

      font-weight:100;

      border-bottom: 1px solid @leichtgrau;
    }

    p {
      padding-left:40px;
    }
  }

  &.kontakt {
    font-weight:100;
  }
}

.kontakt {
  .panel-footer {
    padding-bottom:0px !important;

    h1 {
      text-transform: uppercase;
      font-size:50px;
      margin-top:6px;
      margin-bottom:50px;
      font-weight:100;

      &.email {
        text-transform: none;
        font-size: 15px;
        line-height: 48px;
        font-weight:700;
        text-align:right;

        a {
          text-decoration: none;
        }

	img {
          margin-right: 10px;
        }
      }
    }
    h2 {
      font-size:20px;
      font-weight:100;
      strong {
        font-weight:400;
      }
    }
    p {
      font-size:20px;
      padding-top:10px;
      font-weight:100;
    }
  }
  iframe {
    margin-bottom:60px;
  }
}

.impressum {
  h1, h2 {
    font-weight:100;
  }
  h1,h2 {
    margin-bottom:20px;

    strong {
      font-weight:400;
    }
  }
  h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight:700;
  }
  h4 {
    margin-top: 25px;
    margin-bottom: 0px;
    font-size: 16px;
    font-weight:700;
  }

  .rechtlich {
    margin-bottom:50px;
  }
}

@media (max-width: @screen-xs-max)  {
  .kontakt {
    .panel-footer {
      h1 {
        &.email {
          text-align:left;
          padding-left:0;
        }
      }
    }
  }
}

.navbar-default {
  border-color: #e7e7e7;
  margin-bottom: 0px;
  border:none;
}

nav {
  box-shadow:0px 0px 10px rgba(0,0,0,.5);
}
.kompedent-nav {
    padding-top: 5px;
    padding-bottom: 10px;
    text-transform: uppercase;
    display: inline-block;
    margin-top:100px;
    margin-bottom:10px;

    li {
      letter-spacing:1px !important;
      &.active, &:hover, &:focus, &:visited {
        background: url('/public/images/navigation.active.svg') no-repeat top left;
      }
      background: url('/public/images/navigation.normal.svg') no-repeat top left;
      padding-right: 18px;
      font-size: 14px;
      font-weight: 400;
      a {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }

  a, a:hover, a:focus, a:visited {
    background: none !important;
  }
}

@media (max-width: @screen-md-max)  {
  .kompedent-nav {
    width:100%;
    text-align: center;
    li {
      &.active, &:hover, &:focus, &:visited {
        background: none;
      }
      background: none;
    }
  }
  .navbar-default {
    background-color: #FFFFFF;
  }
}

@media (max-width: @screen-md-max)  {
  .kompedent-nav {
    margin-top:0;
  }
  #navbar {
    .container {
      width:100%;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  .navbar-brand>img {
    max-width: 92px !important;
    max-height: 65px !important;
  }
  .kompedent-nav {
    padding-top:20px;
    li {
      padding-right:0px;
      font-size: 16px;
      letter-spacing:1px;
      a {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }
}


.panel-kompedent {
  margin-bottom:60px;

  .panel-heading {
    color: #fff;
    background-color: @boxblau;
    border-radius:0;
    padding-top:15px;
    padding-bottom:0px;
    padding-left:47px;
    padding-right:10px;
    height:100px;

    border-bottom:2px solid #FFF;

    overflow:hidden;
    vertical-align: text-bottom;
    line-height:55px;

    h2 {
      vertical-align: text-bottom;
      line-height:30px;
      margin-top:10px;
      padding-top:25px;
      strong {
        padding-right: 10px;
        font-weight:100;
        text-transform: uppercase;
        font-size:50px;
      }
      ul {
        white-space: nowrap;

        font-size:14px;
        font-weight:400;
        li {
          padding-top:13px;
          &:not(:last-child):after {
            content: ' |';
            padding-left:8px;
          }
        }
      }

    }
  }
  .panel-body {
    padding:0;
    border-radius:0;

    .img-responsive {
      width:100%;
    }
  }
  .panel-footer {
    background-color: @boxgrau;
    border-radius: 0;
    padding-top: 40px;
    padding-left: 50px;
    padding-bottom: 40px;

    li {
      padding-left: 0px;
    }

    p {
      font-size:16px;
    }
  }

  .panel-footer-blue {
    color:#FFFFFF;
    background-color: @boxblau;
     a {
       color:#FFFFFF;
     }
  }
}

@media (max-width: @screen-md-max)  {

  .panel-kompedent {
    padding:0;
    .panel-heading {
      padding-left:10px;
      padding-right:10px;
      padding-top:0;
      padding-bottom:0;

      height:auto;


      h2 {
        margin-top: 10px;
        padding-top:inherit;
        strong {
          font-size: 27px;
        }

        ul {
          clear: both;
          li {
            display: inline;
          }
        }
      }
    }
  }
}

@media (max-width: @screen-xs-max)  {
  .panel-kompedent {
    .panel-heading {
      h2 {
        ul {
           font-size:10px;
        }
      }
    }
    .panel-footer {
      padding:10px;
      ul {
        li {
          font-size:12px;
          padding-right:5px;
        }
      }
    }
  }
}

.blau {
  background-color: @boxblau;
  height:120px;
}

footer {
  text-align: right;
  font-weight: 400;
  color: #fff;
  border-top:1 px solid #000000;

  img {
    margin-top:20px;
    margin-bottom:0px;
    margin-right:35px;
  }

  ul.list-inline {
    margin-right:35px;
    li {
      padding-right:0px;
      padding-left:4px;

      &:not(:last-child):after {
        content: ' •';
        padding-left:3px;
      }
    }
  }
}

@media (max-width: @screen-xs-max) {
  .blau {
    height:60px;
  }
  footer {
    font-size:6px;

    img {
      margin-top:20px;
      margin-bottom:0px;
      margin-right:7px;
      float:right;
    }

    ul.list-inline {
      float:right;
      margin-right:7px;
    }
  }
}

#sidebar {
  h4 {
    padding-bottom:10px;
  }
  position:fixed;
  top:272px;
  width:288px;
  //padding-right: 20px;
  line-height: 21px;
}

@media (max-width: 978px) {
  #sidebar {
    display:none;
  }
}

@media (min-width: 979px) {
  #sidebar.affix-top {
    //margin-top:0px;
    //width:196px;
  }

  #sidebar.affix {
    //position: fixed;
    //top:180px;
    //width:196px;
  }
}


.carousel-control {

  &.left {
    .helper {
      img {
        left:10px;
      }
    }
  }

  .helper {
    position: relative;
    height:100%;
    width:100%;
    img {
      position: absolute;
      top:50%;
      height:60px;
      width:60px;
      margin:-30px auto 0 auto;
    }
  }
}

@media (max-width: @screen-xs-max) {
  .helper {
    padding-right:20px;
    img {
      left:-25px;
    }
  }
}

/* Parallax base styles
 --------------------------------------------- */

.parallax {
  //padding-top:160px;

  .slide {
    position: relative;
    height: 500px;
    height: 100vh;
/*
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0;
*/
    h1 {
      color: #FFFFFF;
      font-weight: 100;
      font-size: 80px;
      line-height:65px;
      text-transform: uppercase;
      padding-left:10px;
      padding-right:10px;
      padding-bottom:20px;
      border-bottom: 1px solid rgba(255,255,255,0.5);
    }
    h4 {
      font-size:16px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      position: absolute;
      bottom: 0;
      text-align: center;
      width: 100%;
    }

  }
  .marker {
    min-height: 350px;
    color:#646464;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
  }

  .slogan, .claim, .logo {
    position: absolute;
  }

  #verantwortung {
    .slogan {
      top:30%;
      right:5%;
    }
    .claim {
      top:70%;
      left:10%;
    }
    .logo {
      bottom:5%;
      right:5%;
    }
  }
  #herkunft {
    .slogan {
      bottom:5%;
      right:10%;
    }
    .claim {
      top:60%;
      left:15%;
    }
    .logo {
      top:10%;
      left:10%;
    }
  }
  #region {
    .slogan {
      top:10%;
      right:10%;
    }
    .claim {
      top:80%;
      left:20%;
    }
    .logo {
      top:40%;
      left:20%;
    }
  }
  #team {
    .slogan {
      bottom:10%;
      left:20%;
    }
    .claim {
      top:50%;
      right:10%;
    }
    .logo {
      top:2%;
      left:15%;
    }
  }

}

@media (max-width: @screen-xs-max)  {
  .parallax {
    padding-top: 0;

    .slide {
      height: inherit;
      background-position: 0 0px !important;

      h1 {
        font-size: 28px !important;
        line-height: 30px;

      }
    }

    .marker {
      h1 {
        font-size: 28px !important;
        line-height: 30px;
      }
    }
  }
}
@media (max-width: @screen-md-max)  {
  .parallax {
    .slide {
      height: 90vh !important;
      background-position: 0 0px !important;
    }
  }
}


.experten-details {
  li {
     padding-right: 48px;
     img {
       margin-right:10px;
     }
     strong {
       font-weight:700;
     }
  }

}