@media (min-width: 767px) {
  body {
    font-size: 12px; } }
@media (min-width: 768px) {
  body {
    font-size: 16px; } }

i {
  margin-right: 10px; }

nav {
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.95); }
  @media (min-width: 768px) {
    nav {
      padding: 10px 30px; } }
  nav .navbar-header .navbar-brand {
    box-sizing: content-box;
    margin: 15px;
    padding: 0;
    height: 40px; }
    @media (min-width: 768px) {
      nav .navbar-header .navbar-brand {
        height: 60px;
        margin: 7.5px; } }
    nav .navbar-header .navbar-brand img {
      height: 100%; }
  nav .navbar-header .navbar-toggle {
    margin-top: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: black; }
    nav .navbar-header .navbar-toggle:hover {
      background: black; }
    nav .navbar-header .navbar-toggle .icon-bar {
      background: black; }
    nav .navbar-header .navbar-toggle:hover .icon-bar {
      background: white; }
  nav .nav {
    padding-bottom: 15px; }
    @media (min-width: 768px) {
      nav .nav {
        padding-bottom: 0; } }
    nav .nav li a {
      box-sizing: content-box;
      padding: 15px 20px;
      border: 1px solid transparent;
      border-radius: 4px;
      text-align: center;
      font-size: 1.25em;
      color: black;
      transition: all 0.2s ease; }
      @media (min-width: 768px) {
        nav .nav li a {
          text-align: left; } }
      nav .nav li a:hover, nav .nav li a:focus {
        background: #f5f5f5;
        border: 1px solid transparent;
        color: black; }
        nav .nav li a:hover span, nav .nav li a:focus span {
          color: black; }
      nav .nav li a:after {
        content: '.'; }
      nav .nav li a span {
        display: block;
        font-family: 'Raleway', sans-serif;
        font-size: 1.2em;
        color: #ff8800;
        text-transform: uppercase;
        transition: all 0.2s ease; }
        nav .nav li a span:after {
          content: '//';
          letter-spacing: -6px; }
    nav .nav li.active a {
      background: #f5f5f5;
      border: 1px solid transparent;
      color: black; }
      nav .nav li.active a span {
        color: black; }
    nav .nav li:last-of-type a {
      border: 1px solid #ff8800; }
      nav .nav li:last-of-type a:hover, nav .nav li:last-of-type a:focus {
        background: #ff8800;
        border: 1px solid transparent;
        color: white; }
        nav .nav li:last-of-type a:hover span, nav .nav li:last-of-type a:focus span {
          color: white; }
    nav .nav li:last-of-type.active:last-of-type a {
      background: #ff8800;
      border: 1px solid transparent;
      color: white; }
      nav .nav li:last-of-type.active:last-of-type a span {
        color: white; }

main {
  overflow-x: hidden; }
  main .parallax-window {
    min-height: 210px;
    background: transparent; }
    @media (min-width: 768px) {
      main .parallax-window {
        min-height: 420px; } }
  main section {
    padding-top: 30px;
    padding-bottom: 45px; }
    @media (min-width: 768px) {
      main section {
        padding-top: 60px;
        padding-bottom: 90px; } }
    @media (max-width: 767px) {
      main section .flex-wrapper {
        display: flex;
        display: -webkit-flex;
        flex-flow: wrap;
        -webkit-flex-flow: wrap; }
        main section .flex-wrapper .flex-box-1 {
          order: 2;
          -webkit-order: 2; }
        main section .flex-wrapper .flex-box-2 {
          order: 1;
          -webkit-order: 1; } }
    main section .row-spacing {
      margin-top: 30px;
      margin-bottom: 30px; }
    main section h2 {
      margin-bottom: 15px;
      color: #ff8800;
      text-align: left;
      font-size: 1.875em; }
      @media (min-width: 768px) {
        main section h2 {
          font-size: 2.5em; } }
      main section h2 span {
        font-family: 'Raleway', sans-serif;
        color: black; }
        main section h2 span:after {
          content: '//';
          margin-right: 5px;
          margin-left: 5px;
          font-family: 'Raleway', sans-serif;
          letter-spacing: normal; }
          @media (min-width: 768px) {
            main section h2 span:after {
              margin-right: 20px;
              margin-left: 10px;
              letter-spacing: -0.3em; } }
    main section h3 {
      margin-top: 15px;
      text-align: left;
      font-size: 1.5em; }
    main section p {
      margin-top: 7.5px;
      font-size: 1em;
      line-height: 1.4em; }
      main section p ~ p {
        margin-top: 15px; }
      main section p a {
        color: #ff8800;
        text-decoration: underline; }
        main section p a:hover, main section p a:focus {
          color: black; }
    main section picture {
      display: block;
      margin-bottom: 15px;
      width: 100%;
      text-align: center; }
      @media (min-width: 768px) {
        main section picture {
          display: inline; } }
      main section picture img {
        margin-top: 15px;
        width: 100%; }
        @media (min-width: 768px) {
          main section picture img {
            margin: 0; } }

#section-teaser {
  position: absolute;
  top: 0;
  padding: 0;
  width: 100%;
  background: transparent;
  box-shadow: inset 0 -240px 160px rgba(0, 0, 0, 0.75); }
  #section-teaser .container-fluid {
    z-index: 9;
    position: inherit;
    bottom: 10%;
    width: inherit;
    text-align: center; }
    #section-teaser .container-fluid h1 {
      font-size: 3em;
      color: white; }
      @media (min-width: 768px) {
        #section-teaser .container-fluid h1 {
          font-size: 4em; } }
    #section-teaser .container-fluid a {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 15px;
      background: transparent;
      border-width: 1px;
      border-style: solid;
      border-color: white;
      border-radius: 4px;
      font-size: 1em;
      color: white;
      transition: all 0.4s ease; }
      @media (min-width: 768px) {
        #section-teaser .container-fluid a {
          padding: 20px 30px; } }
      #section-teaser .container-fluid a.active, #section-teaser .container-fluid a:hover, #section-teaser .container-fluid a:focus {
        background: white;
        color: black;
        text-decoration: none; }
      #section-teaser .container-fluid a i {
        margin-right: 0;
        margin-left: 10px; }
  #section-teaser #video-viewport {
    overflow: hidden;
    position: absolute;
    top: 0; }
    @media (max-width: 767px) {
      #section-teaser #video-viewport {
        display: none !important; } }
    @media (min-width: 768px) {
      #section-teaser #video-viewport {
        display: none; } }
    #section-teaser #video-viewport #video-controls {
      z-index: 999;
      position: absolute;
      top: 50%;
      left: 50%; }
      #section-teaser #video-viewport #video-controls span {
        display: block;
        margin-top: -30px;
        margin-left: -60px;
        width: 120px;
        height: 120px;
        background: url(../img/play.png);
        opacity: 0.8;
        cursor: pointer;
        transition: all 0.2s ease; }
        #section-teaser #video-viewport #video-controls span:hover {
          opacity: 1; }
        #section-teaser #video-viewport #video-controls span.play {
          background: url(../img/play.png); }
        #section-teaser #video-viewport #video-controls span.pause {
          background: url(../img/pause.png); }

#impressum .container {
  margin-top: 120px; }
  @media (min-width: 768px) {
    #impressum .container {
      margin-top: 60px; } }
  #impressum .container ul {
    line-height: 1.5em; }
    #impressum .container ul .li-spacer {
      margin-top: 15px; }

form {
  text-align: center; }
  form h2 {
    margin-bottom: 30px !important;
    text-align: inherit !important; }
  form input ~ i,
  form textarea ~ i {
    position: absolute;
    top: 15px;
    left: 30px; }
  form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
    margin-bottom: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 45px;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    font-size: 1em;
    color: black; }
    form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"])::-webkit-input-placeholder {
      color: black; }
    form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-moz-placeholder {
      color: black; }
    form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"])::-moz-placeholder {
      color: black; }
    form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):-ms-input-placeholder {
      color: black; }
  form textarea {
    margin-bottom: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 45px;
    width: 100%;
    height: 150px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    font-size: 1em;
    color: black; }
    form textarea::-webkit-input-placeholder {
      color: black; }
    form textarea:-moz-placeholder {
      color: black; }
    form textarea::-moz-placeholder {
      color: black; }
    form textarea:-ms-input-placeholder {
      color: black; }
  form select {
    padding: 15px;
    width: 100%;
    height: 60px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    font-size: 1em;
    color: black; }
  form .file {
    position: relative; }
    form .file:hover span {
      background: black;
      color: white; }
    form .file input[type="file"] {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer; }
  form .button {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em; }
    form .button:hover {
      background: black;
      color: white; }
  form button {
    width: 100%;
    height: 60px;
    border-width: 1px;
    border-style: solid;
    border-color: #ff8800;
    border-radius: 4px;
    font-size: 1em; }
    form button:hover {
      background: #ff8800;
      color: white; }

.fileupload-hidden {
  display: none; }

#fileupload-liste li {
  display: inline-block;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: black; }
  #fileupload-liste li span {
    float: left;
    display: block;
    width: 47.5%; }
    #fileupload-liste li span:first-of-type {
      text-align: left; }
    #fileupload-liste li span:last-of-type {
      text-align: right; }
  #fileupload-liste li i {
    position: absolute;
    right: 0;
    margin-right: 0;
    cursor: pointer;
    color: black; }

footer {
  position: relative;
  padding: 15px 0;
  background: #ff8800; }
  @media (min-width: 768px) {
    footer .col-footer {
      text-align: right; } }
  footer p {
    margin-top: 15px;
    color: white; }
  footer a {
    text-decoration: underline;
    color: white; }
    footer a:hover, footer a:focus {
      color: white; }
  footer i {
    margin-right: 0;
    margin-left: 10px; }

#loader {
  display: none;
  z-index: 9999999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: white; }
  #loader i {
    position: absolute;
    top: 50%;
    left: 50%; }

.modal-dialog .modal-content {
  border: none;
  box-shadow: none; }
  .modal-dialog .modal-content .modal-header {
    border-bottom: 0; }
    .modal-dialog .modal-content .modal-header h4 {
      font-size: 1.5em;
      color: #ff8800; }
  .modal-dialog .modal-content .modal-footer {
    border-top: 0;
    text-align: center !important; }
    .modal-dialog .modal-content .modal-footer button {
      padding: 10px 15px;
      border-color: #ff8800;
      font-size: 1em;
      color: black; }
      .modal-dialog .modal-content .modal-footer button:hover {
        background-color: #ff8800;
        color: white; }

.side {
  z-index: 99;
  position: fixed;
  top: 75%;
  left: 100%;
  margin-left: -60px;
  padding: 15px;
  width: 300px;
  background: #ff8800;
  border-radius: 4px 0 0 4px;
  cursor: pointer; }
  @media (min-width: 768px) {
    .side {
      top: 50%; } }
  .side i {
    float: left;
    font-size: 2.5em;
    color: white; }
    .side i.fa-phone {
      margin-right: 15px;
      font-size: 2.5em; }
  .side .side-content {
    float: left;
    margin-left: 15px; }
    @media (min-width: 768px) {
      .side .side-content {
        margin-left: 0; } }
    .side .side-content span {
      display: block;
      color: white; }
      .side .side-content span:first-child {
        font-size: 1em; }
      .side .side-content span:last-of-type {
        font-size: 1.5em; }