/*=======================================================
  colors
=======================================================*/
/* white */
/* black */
/* blue */
/* gray */
/*@gray: #c4cfd6;*/
/* mobile navigation blue */
/* red */
/* path variables */
/*=======================================================
  fonts
=======================================================*/
@font-face {
  font-family: 'klavika-regular';
  src: url('Fonts/regular/klavika-regular-webfont.eot#') format('eot'), url('Fonts/regular/klavika-regular-webfont.woff') format('woff'), url('Fonts/regular/klavika-regular-webfont.ttf') format('truetype');
}
@font-face {
  font-family: 'klavika-light';
  src: url('Fonts/light/klavika-light-webfont.eot#') format('eot'), url('Fonts/light/klavika-light-webfont.woff') format('woff'), url('Fonts/light/klavika-light-webfont.ttf') format('truetype');
}
@font-face {
  font-family: 'klavika-medium';
  src: url('Fonts/medium/klavika-medium-webfont.eot#') format('eot'), url('Fonts/medium/klavika-medium-webfont.woff') format('woff'), url('Fonts/medium/klavika-medium-webfont.ttf') format('truetype');
}
.light {
  font-family: klavika-light;
}
.medium {
  font-family: klavika-medium;
}
.regular {
  font-family: klavika-regular;
}
/* spacing */
p {
  font-size: 20px;
  line-height: 30px;
}
/* font-size */
h1 {
  font-size: 40px;
  font-family: klavika-light;
}
h2 {
  font-size: 20px;
  font-family: klavika-light;
}
h3 {
  font-size: 16px;
  font-family: klavika-medium;
}
h4 {
  font-size: 16px;
}
b,
strong {
  font-weight: bold;
}
.borderRadius {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.boxShadow {
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
}
.gradientBlue {
  background: #5bc5f2;
  /* Old browsers */
  background: -moz-linear-gradient(top, #5bc5f2 0%, #009fe3 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc5f2), color-stop(100%, #009fe3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5bc5f2 0%, #009fe3 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5bc5f2 0%, #009fe3 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5bc5f2 0%, #009fe3 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #5bc5f2 0%, #009fe3 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc5f2', endColorstr='#009fe3', GradientType=0);
  /* IE6-9 */
}
.transition {
  -webkit-transition: height 200ms ease-in;
  -moz-transition: height 200ms ease-in;
  -o-transition: height 200ms ease-in;
  transition: height 200ms ease-in;
}
/*=======================================================
  navigation
=======================================================*/
@media only screen and (max-width: 959px) {
  /* section */
  section {
    /* fourth row video */
  }
  section.firstRow {
    /* home */
  }
  section.firstRow.home.contentSlider {
    overflow: hidden;
  }
  section.fourthRow.home .videoContainer {
    overflow: hidden;
  }
  /* header */
  header {
    height: 60px;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    /* starting point */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  header h1 {
    color: #ffffff;
    text-align: center;
    padding-left: 0;
    display: block;
  }
  /* burger */
  .burger {
    display: block;
  }
  /* nav */
  nav {
    float: right;
    height: 100%;
    margin: 14px 0 0;
    right: 0;
    top: 0;
    width: 91%;
  }
  nav ul {
    height: 100%;
    padding-left: 34px;
  }
  nav ul li {
    display: block;
    float: none;
  }
  nav ul li a {
    padding: 22px 25px;
    font-size: 14px;
    text-decoration: none;
    /* active */
    /* hover */
  }
  nav ul li a.active {
    color: #fff;
    background-color: #141e23;
    border-bottom: 1px solid #1d2d35;
  }
  nav ul li a:hover {
    color: #fff;
    background-color: #19252c;
  }
  nav .open {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -webkit-animation: slideIn 0.35s ease-in-out;
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -moz-animation: slideIn 0.35s ease-in-out;
    transform: translate3d(0, 0, 0) scale(1);
    animation: slideIn 0.35s ease-in-out;
  }
  @-webkit-keyframes slideIn {
    0% {
      opacity: .3;
      -webkit-transform: translate3d(5%, 0, 0) scale(0.97);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
  }
  @-moz-keyframes slideIn {
    0% {
      opacity: .3;
      -moz-transform: translate3d(5%, 0, 0) scale(0.97);
    }
    100% {
      opacity: 1;
      -moz-transform: translate3d(0, 0, 0) scale(1);
    }
  }
  @keyframes slideIn {
    0% {
      opacity: .3;
      transform: translate3d(5%, 0, 0) scale(0.97);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
  nav .close {
    opacity: 0.3;
    -webkit-transform: translate3d(5%, 0, 0) scale(0.97);
    -webkit-animation: slideOut 0.3s ease-in-out;
    -moz-transform: translate3d(5%, 0, 0) scale(0.97);
    -moz-animation: slideOut 0.3s ease-in-out;
    transform: translate3d(5%, 0, 0) scale(0.97);
    animation: slideOut 0.3s ease-in-out;
  }
  @-webkit-keyframes slideOut {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
      opacity: .3;
      -webkit-transform: translate3d(5%, 0, 0) scale(0.97);
    }
  }
  @-moz-keyframes slideOut {
    0% {
      opacity: 1;
      -moz-transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
      opacity: .3;
      -moz-transform: translate3d(5%, 0, 0) scale(0.97);
    }
  }
  @keyframes slideOut {
    0% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
      opacity: .3;
      transform: translate3d(5%, 0, 0) scale(0.97);
    }
  }
  header.open,
  .content.open {
    -webkit-transform: translate3d(-240px, 0, 0);
    -webkit-animation: open 0.5s ease-in-out;
    -moz-transform: translate3d(-240px, 0, 0);
    -moz-animation: open 0.5s ease-in-out;
    transform: translate3d(-240px, 0, 0);
    animation: open 0.5s ease-in-out;
  }
  @-webkit-keyframes open {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
    }
    70% {
      -webkit-transform: translate3d(-260px, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-240px, 0, 0);
    }
  }
  @-moz-keyframes open {
    0% {
      -moz-transform: translate3d(0, 0, 0);
    }
    70% {
      -moz-transform: translate3d(-260px, 0, 0);
    }
    100% {
      -moz-transform: translate3d(-240px, 0, 0);
    }
  }
  @keyframes open {
    0% {
      transform: translate3d(0, 0, 0);
    }
    70% {
      transform: translate3d(-260px, 0, 0);
    }
    100% {
      transform: translate3d(-240px, 0, 0);
    }
  }
  header.close,
  .content.close {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: close 0.3s ease-in-out;
    -moz-transform: translate3d(0, 0, 0);
    -moz-animation: close 0.3s ease-in-out;
    transform: translate3d(0, 0, 0);
    animation: close 0.3s ease-in-out;
  }
  @-webkit-keyframes close {
    0% {
      -webkit-transform: translate3d(-240px, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
    }
  }
  @-moz-keyframes close {
    0% {
      -moz-transform: translate3d(-240px, 0, 0);
    }
    100% {
      -moz-transform: translate3d(0, 0, 0);
    }
  }
  @keyframes close {
    0% {
      transform: translate3d(-240px, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  .content {
    /* starting point */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 1;
  }
  /* end of media */
}
@media only screen and (min-width: 1024px) {
  /*=======================================================
        news container // branchen
  =======================================================*/
}
@media only screen and (min-width: 1220px) {
  /*=======================================================
        news container // branchen
  =======================================================*/
  .newsContainer {
    width: 76.3%;
  }
}
/* SLIDER */