@charset "UTF-8";
@font-face {
  font-family: typeface;
  src: url("../fonts/apercu-bold-webfont.eot");
  /* IE9 Compatibility Modes */
  src: url("../fonts/apercu-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu-bold-webfont.woff") format("woff"), url("../fonts/apercu-bold-webfont.ttf") format("truetype"), url("../fonts/apercu-bold-webfont.svg#MyFont") format("svg");
  /* Legacy iOS */
  font-weight: 700; }

/*-----------------------------------------------------------------------------------*/
/* SASS */
/*-----------------------------------------------------------------------------------*/
/*links*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*----------------------------------  GENERAL ---------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.no-padding {
  padding: 0;
  margin-top: 0; }

.chocolat-pagination {
  font-family: typeface, sans-serif; }

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

.caps {
  text-transform: uppercase; }

body {
  margin: 0 auto;
  padding: 0 auto;
  color: #000;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto; }

a {
  text-decoration: none;
  color: #000; }
  a:link {
    text-decoration: none;
    color: #000; }
  a:hover {
    text-decoration: none !important;
    color: #000 !important; }
  a:visited {
    text-decoration: none;
    color: #000; }
  a:active  {
    text-decoration: none;
    color: #000; }

::selection {
  background-color: black;
  color: yellow; }

.space {
  width: 100%;
  height: 100px; }

.half-space {
  width: 100%;
  height: 50px; }

.current {
  border-bottom: 3px solid black; }

.jumbotron {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  background-color: #fff !important; }

.yellow {
  background-color: yellow; }

.nojs {
  font-size: 13px;
  font-family: typeface, sans-serif;
  color: white;
  background-color: red;
  text-align: center; }

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*---------------------------------- NAVIGATION -------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.navigation {
  padding-top: 13px;
  padding-left: 15%;
  padding-right: 15%;
  margin-left: auto;
  margin-right: auto;
  font-family: typeface, sans-serif;
  font-size: 17px;
  line-height: 20px;
  vertical-align: middle;
  color: #000;
  text-align: center; }
  .navigation span {
    line-height: 32px; }
  .navigation span:hover {
    border-bottom: 3px solid black;
    cursor: pointer; }

.navbar-toggle {
  float: left;
  font-family: typeface, sans-serif; }

.nav-background {
  background-color: yellow; }

.nav-align {
  vertical-align: middle; }

.logo {
  text-align-last: center;
  line-height: 32px;
  cursor: default;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }

.nav-about {
  border-width: 0 0 0px !important;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: yellow; }

.nav-contact {
  border-width: 0 0 0px !important;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: yellow; }

/* Responsive, noch kopieren!
Eventuell noch Klasse finden für größere Displays!

.logo {
    text-align: left;
    left: 20%;
}

.navigation {
    .row {
        text-align:center;ß
    }
}
*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*------------------------------------ ABOUT ----------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.about {
  background-color: yellow; }

.about-text {
  font-family: typeface, sans-serif;
  font-size: 62px;
  line-height: 71px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  color: #000;
  -moz-hyphens: auto;
  -webkit-hyphens: auto; }

.about-vita {
  font-family: typeface, sans-serif;
  color: #000;
  size: 13px;
  line-height: 20px;
  padding-top: 10px; }

.myself {
  background-image: url(../images/myself.jpg);
  width: 100%;
  height: 500px;
  background-size: contain;
  background-repeat: no-repeat; }

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*------------------------------------ WORK -----------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.affix {
  top: 0;
  width: 100%;
  z-index: 99999 !important; }

.affix + .full-width {
  padding-top: 83px !important; }

.hello {
  font-family: typeface, sans-serif;
  color: #000;
  font-size: 62px;
  background-color: yellow;
  height: 170px; }

.hello-text {
  line-height: 62px;
  padding-top: 20px;
  width: 765px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -o-hyphens: none;
  hyphens: none; }

.work-text {
  font-family: typeface, sans-serif;
  color: #000;
  line-height: 20px;
  hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto; }

.full-width {
  width: 100%;
  text-align: center;
  margin-bottom: 20px; }
  .full-width img {
    width: 100%; }

.informations a:hover {
  border-bottom: 3px solid black; }

footer {
  font-family: typeface, sans-serif;
  padding-bottom: 3%; }

.more-work {
  text-align: center;
  font-family: typeface, sans-serif;
  line-height: 40px; }
  .more-work a:hover {
    border-bottom: 3px solid black; }

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*------------------------------------ CONTACT --------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.contact,
.impressum {
  background-color: yellow;
  font-family: typeface, sans-serif; }

.not-here {
  visibility: hidden; }

.contact-text {
  font-family: typeface, sans-serif;
  font-size: 62px;
  line-height: 71px;
  hyphens: auto;
  color: #000;
  -moz-hyphens: auto;
  -webkit-hyphens: auto; }

.left a:hover {
  border-bottom: 5px solid black; }

input[type="text"], input[type="email"], textarea {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: black !important;
  font-family: typeface, sans-serif;
  outline: none;
  resize: none;
  width: 100%;
  margin-bottom: 10px;
  padding-left: 10px;
  color: yellow; }

input[type="text"], input[type="email"] {
  height: 50px; }

input:focus::-webkit-input-placeholder {
  color: transparent !important; }

input:focus:-moz-placeholder {
  color: transparent !important; }

/* FF 4-18 */
input:focus::-moz-placeholder {
  color: transparent !important; }

/* FF 19+ */
input:focus:-ms-input-placeholder {
  color: transparent !important; }

/* IE 10+ */
textarea {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: 150px !important;
  margin-bottom: 10px !important;
  padding-left: 10px !important;
  width: 100% !important;
  padding-top: 10px !important;
  font-family: typeface, sans-serif !important; }

::-moz-focus-inner {
  border: 0  !important;
  padding: 0  !important; }

.button-send {
  background-color: yellow;
  border: 5px solid black;
  border-radius: 0px;
  font-family: typeface, sans-serif;
  color: #000;
  width: 103% !important;
  text-transform: uppercase;
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out; }
  .button-send:hover, .button-send:active {
    background-color: black;
    color: yellow;
    border-color: black; }

::-webkit-input-placeholder {
  color: yellow !important;
  -webkit-transition: all .5s ease !important;
  -moz-tranozsition: all .5s ease !important;
  -o-transition: all .5s ease !important;
  transition: all .5s ease !important; }

.captcha {
  font-size: 15px;
  text-align: center;
  line-height: 45px; }

.social-links {
  text-align: center; }
  .social-links a {
    opacity: 1;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out; }
    .social-links a:hover {
      opacity: 0.5; }

.impressum-link {
  position: fixed;
  margin: 0 auto;
  left: 20px;
  top: 50%;
  margin-top: -70px;
  width: 55px;
  height: 20px;
  font-family: typeface, sans-serif;
  color: black;
  font-size: 10px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  text-transform: uppercase; }
  .impressum-link span:hover {
    border-bottom: 3px solid black; }

.impressum a:hover {
  border-bottom: 3px solid black; }

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*------------------------------------ OVERLAY --------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.img-cover {
  object-fit: cover;
  width: 100%;
  height: 200px; }

.overlay-open {
  overflow: hidden; }

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  overflow: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  visibility: hidden;
  color: black; }

.overlay:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  opacity: 0.95;
  filter: alpha(opacity=95);
  display: block !important;
  background: yellow; }

.overlay.slide-down,
.overlay.slide-up {
  visibility: visible;
  height: 0;
  opacity: 100;
  filter: alpha(opacity=10000); }

.overlay.slide-up {
  bottom: 0;
  top: auto; }

.overlay.overlay-active {
  opacity: 100;
  filter: alpha(opacity=10000);
  visibility: visible; }

.overlay.overlay-active.slide-down,
.overlay.overlay-active.slide-up {
  height: 100%;
  visibility: visible; }

.overlay-content {
  z-index: 1041;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  text-align: center;
  padding: 5% 10%;
  overflow-y: scroll; }

.overlay-content .overlay-header:after,
.overlay-content .overlay-footer:before {
  content: '';
  height: 1px;
  width: 40%;
  margin: 15px auto;
  background: #ffffff;
  display: block;
  opacity: 0.2;
  filter: alpha(opacity=20); }

.overlay-trigger {
  cursor: pointer;
  position: absolute;
  left: 32px;
  top: 21px;
  color: #000; }
  .overlay-trigger i {
    color: black; }
    .overlay-trigger i:hover {
      opacity: 0.7;
      -webkit-transition: all .5s ease-out;
      -moz-transition: all .5s ease-out;
      -o-transition: all .5s ease-out;
      transition: all .5s ease-out; }

.overlay-close {
  font-family: typeface, sans-serif; }

.overlay-body .row {
  padding-bottom: 25px; }

.overlay img {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }
  .overlay img:hover {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%); }

.overlay a:hover {
  border-bottom: 3px solid black; }

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
@media screen and (max-width: 991px) {
  .impressum-link {
    display: none; }
  .not-here {
    visibility: visible; }
  .logo {
    display: none; }
  .hello {
    font-size: 40px;
    height: 130px; }
  .hello-text {
    line-height: 40px;
    width: 495px; } }

@media screen and (max-width: 600px) {
  .not-here-space {
    display: none; }
  .about-text, .contact-text {
    font-size: 40px;
    line-height: 43px; }
  .mobile-padding {
    padding-left: 0 !important;
    padding-right: 0 !important; }
  .overlay-trigger {
    right: 20px;
    float: right;
    left: auto;
    top: 31px; }
  .mobile-space {
    display: none; }
  .work-text {
    padding-bottom: 40px;
    padding-top: 5px; }
  .impressum-link {
    display: none; }
  .logo {
    display: none; }
  .hello {
    font-size: 20px;
    height: 80px;
    margin-left: 0px; }
  .hello-text {
    line-height: 18px;
    padding-left: 0px;
    width: 100%; }
  .navigation {
    padding-left: 18px; }
  .mobile-nav {
    padding-top: 10px; }
  .form {
    display: none; } }

@media screen and (max-width: 767px) {
  .hello-text {
    padding-left: 0px; }
  .overlay-trigger {
    right: 20px;
    float: right;
    left: auto;
    top: 31px; }
  .navigation {
    padding-left: 18px; } }

@media (min-width: 600px) {
  .row-eq-height {
    flex-direction: row; } }