/* --------------------------------  Parallax  -------------------------------- */
@media (max-width: 449px) {
    .parallax {
        height: 230px;
        width: 100hv;
        background-size: cover;
    }
}
@media (min-width: 450px) {
    .parallax {
        height: 420px;
        width: 100hv;
        background-size: cover;
    }
}
@media (min-width: 800px) {
    .parallax {
        height: 500px;
        width: 100hv;
        background-size: cover;
    }
}
@media (min-width: 1200px) and (max-height: 799px) {
    .parallax {
        height: 550px;
        width: 100hv;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
}
@media (min-width: 1200px) and (min-height: 800px) {
    .parallax {
        height: 660px;
        width: 100hv;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
}
/* these are the urls for projects title pictures. The names follow the structure like titleProject1, titleProject2, titleProject3 ...
There are 10 predefined. Add more if needee and follow the structure*/
.parallax-project1 {
    background-image: url("/img/project1Title.jpg");
}
.parallax-project2 {
    background-image: url("/img/project2Title.jpg");
}
.parallax-project3 {
    background-image: url("/img/project3Title.jpg");
}
.parallax-project4 {
    background-image: url("/img/project4Title.jpg");
}
.parallax-project5 {
    background-image: url("/img/project5Title.jpg");
}
.parallax-project6 {
    background-image: url("/img/project6Title.jpg");
}
.parallax-project7 {
    background-image: url("/img/project7Title.jpg");
}
.parallax-project8 {
    background-image: url("/img/project8Title.jpg");
}
.parallax-project9 {
    background-image: url("/img/project9Title.jpg");
}
.parallax-project10 {
    background-image: url("/img/project10Title.jpg");
}

/* --------------------------------  Basics  --------------------------------*/
html,
body {
    height: 100%;
    background-color: #2f2f2f;
}


/* --------------------------------  Navigation  --------------------------------*/
#b2top {
    position: fixed;
    bottom: 11px;
    right: 11px;
    z-index: 999;
}
#mail {
    position: fixed;
    bottom: 11px;
    left: 11px;
    z-index: 998;
}
a.svg {
  position: relative;
  display: inline-block;
}
a.svg:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}

.errorMessage {
    color: #ffe65d;
}


/* --------------------------------  Projects  --------------------------------*/
.white-background {
    background: #f7f7f7;
}
.grey-background {
    background: #333333;
}
.project-text-container {
    padding-top: 3.6rem;
    font-weight: 300;
    text-align: left;
}
.project-textstyle-ger {
    color: #333333;
}
.project-textstyle-eng {
    color: #333333;
}

/* --------------------------------  Fonts PT Sans  --------------------------------*/

/*.project-title {
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2rem;
    font-size: 2.6rem;
    line-height: 1;
}
.project-text-ger {
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.5.;
}
.project-text-highlight {
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.5.;
    color: #ff5100
}
.project-text-eng {
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.5.;
}
.project-author {
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    padding-top: 1.6rem;
    padding-bottom: 4rem;
    font-size: 1.3rem;
    line-height: 1.428;
    font-weight: 400;
}
.footer-text-ger {
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.5.;
}
/* --------------------------------  Inconsolata  --------------------------------*/

.project-title {
    font-family: 'Inconsolata', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2rem;
    font-size: 2.6rem;
    line-height: 1;
}
.project-text-ger {
    font-family: 'Inconsolata', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.5.;
}
.project-text-highlight {
    font-family: 'Inconsolata', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.5.;
    color: #ff5100
}
.project-text-eng {
    font-family: 'Inconsolata', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.5.;
}
.project-author {
    font-family: 'Inconsolata', sans-serif;
    font-weight: 400;
    padding-top: 1.6rem;
    padding-bottom: 4rem;
    font-size: 1.3rem;
    line-height: 1.428;
    font-weight: 400;
}
.footer-text-ger {
    font-family: 'Inconsolata', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.5.;
}

.project-text-spacer-one-line {
    height: 1.7rem;
}
.project-text-spacer-bottom {
    height: 8rem;
}
@media (max-width: 767px) {
    .project-picture-container {
        padding-bottom: 5rem;
        align-content: center;
        align-self: center;
    }
}
@media (min-width: 768px) {
    .project-picture-container {
        padding-bottom: 6rem;
        align-content: center;
        align-self: center;
    }
}
.project-picture-spacing {
    padding-bottom: 15px;;
}
.project-picture-same-height {
    height: 40rem;
    background-size: cover;
}

/* --------------------------------  responsive video --------------------------------*/
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
}
.responsive-video {
    position: relative;
    padding-bottom: 66.25%; /* Default for 1600x900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}


/* --------------------------------  Container  --------------------------------*/
@media (max-width: 449px) {
    .container-padding {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media (min-width: 450px) {
    .container-padding {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* --------------------------------  Contact  --------------------------------*/
.contact-spacer {
    height: 2rem;
}
.contact-headline {
    color: #fff;
}
.contact-formular-padding {
    padding-left: 1rem;
    padding-top: 0.4rem;
}