@font-face {
    font-family: MenschReg;
    src: url(../fonts/mensch.ttf);
}

@font-face {
    font-family: MenschBold;
    src: url(../fonts/mensch-bold.ttf);
}

@font-face {
    font-family: HelveticaLightObli;
    src: url(../fonts/Helvetica-LightOblique.ttf);
}

@font-face {
    font-family: HelveticaNeueBold;
    src: url(../fonts/HelveticaNeue-CondensedBold.ttf);
}
@font-face {
    font-family: HelveticaNeueBold;
    src: url(../fonts/HelveticaNeue-CondensedBold.ttf);
}
@font-face {
    font-family: HelveticaReg;
    src: url(../fonts/Helvetica.ttf);
}


html
{
    height: 100%;

}

body{
    background-color: #f2f2f2;
    height: 100%;
}

#aboutWithoutBtn{
    background-color: #1f2426;
    max-height: 90%;
    text-align: center;
    padding-top:40px;
    padding-bottom:40px;
    overflow: scroll;
    display: none;
}

#aboutWrapper{
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    max-width: 900px;
}

#about h2{
    display: inline-block;
    color: #ff7b7b;
    font-family: MenschReg;
    font-size: 2.1em;
    margin-top: 30px;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
}

#about p{
    font-family: HelveticaLightObli;
    color: #f2f2f2;
    font-size: 1em;
    line-height: 2em;
    letter-spacing: 1px;
}

#about a{
    font-family: HelveticaLightObli;
    color: #f2f2f2;
    font-size: 1em;
    text-decoration: none;
    line-height: 2em;
    letter-spacing: 1px;
}

#email:hover{
    text-decoration: underline;
}

.underlineAbout{
    background-image: url("../images/about/line.png");
    background-repeat: repeat-x;
    height: 5px;
    width: 255px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 12px;
}

#btnABout{
    display: block;
    width: 78px;
    margin-left: 70%;
    margin-top: -1px;
    cursor: pointer;
}

#headerTitel{
    text-align: center;
    font-family: HelveticaNeueBold;
    color: #4cfc93;
    font-size: 1.2em;
    margin-top: 30px;
}

#headerWrapper{
    width: 186px;
    height: 42px;
    margin-left: auto;
    margin-right: auto;
}

h1#titel {
    width: 186px;
    height: 42px;
    background-image: url(../images/titel.svg);
    margin-bottom: 8px;
}
h1#titel span {
    display: none;
}


/* *********** WORK DETAIL ********** */
#workWrapper{
    background-color: #f9f9f9;
    width: 1080px;
    padding: 10px;
    padding-bottom: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    position: relative;
}

#cover{
    width: 100%
}

#workInfo{
    margin-top: 45px;
    margin-bottom: 45px;

}
#workInfo h2{
    color: #2f414a;
    font-family: MenschReg;
    font-size: 2.1em;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
}

#infoTextWrapper{
    margin-bottom: 15px;
}

#workInfo p{
    margin-left: auto;
    margin-right: auto;
    color: #89a0a5;
    font-family: HelveticaReg;
    font-size: 1em;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    width: 70%;
    margin-top: 15px;
}

#closeDiv{
    width: 100%;
    position:absolute;
    left:0;
    top: -20px;
}
#close{
    float: right;
    width: 81px;
}

#footnoot{
    width: 100%;
    text-align: center;
    margin-top: 50px;
    font-family: HelveticaLightObli;
    color: #2f414a;
    font-size: 1em;
    text-decoration: none;
    letter-spacing: 1px;
    visibility: hidden
}


/* *********** DETAIL IMAGES ********** */

.desktopScreenShot{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.tabletScreenShot{

}

.printScreenShot{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.video{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: auto;

}

.video4{
    background-color: black;
}