body{
    background-image:url(grafiken/hintergrund.jpg); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:top left;
}

.text {
    margin:33px auto;
    max-width:850px;
    width:90%;
    font-family: 'Didact Gothic', sans-serif; 
    text-align:justify; 
    font-size:0.95em; 
    position:relative; 
    overflow:visible;
}

#contentbox {
    position:absolute; 
    left:312px; 
    top:26px; 
    right:26px; 
    min-width:400px; 
    max-width: 1030px;
}
#header {
    height:134px;
}
.box {
    margin-bottom:14px; 
    overflow:visible; 
    width:100%; 
    background: rgb(255,255,255); 
    background: rgba(255, 255, 255, 0.9); 
    border-width: 1px; 
    border-style: solid; 
    border-color: #CCCCCC;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15); 
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.15); 
}
#projektbox {
    text-align:center;
    max-width:950px;
}
#logo {
    width:100%; 
    height:100%; 
    background:url(grafiken/logo.png) no-repeat center center;
}
#adresse {
    margin:5px 33px 5px 33px; 
    text-align: center; 
    font-family: 'Old Standard TT', serif; 
    font-size:0.9em; 
    font-style:italic; 
    letter-spacing:0.04em;
}
#vp {position: absolute; 
     top:0px; 
     width:1px; 
     height:600px;
}
.protected {
    unicode-bidi:bidi-override; 
    direction: rtl; 
    white-space: nowrap;
}
.spam {
    display:none;
}

.headline {
    text-align:center; 
    font-family: 'Old Standard TT', serif; 
    font-size:3em; 
    font-style:italic; 
    padding-bottom:0.4em; 
    letter-spacing:0.1em;
}
#bueroheadline {
    padding-bottom:0.2em;
}

.button {
    position:absolute; 
    display:none;
}
#startseite-button {
    top:11px; 
    left:28px;
    width:153px;
    height:59px;
    background-image: url(grafiken/startseite-up.png);
}
#buero-button {
    top:25px; 
    left:33px;
    width:144px;
    height:33px;
    background-image: url(grafiken/buero-up.png);
}
#projekte-button {
    top:27px; 
    left:42px;
    height:37px;
    width:129px;
    background-image: url(grafiken/projekte-up.png);
}
#impressum-button {
    top:13px; 
    left:33px;
    width:158px;
    height:64px;
    background-image: url(grafiken/impressum-up.png);
}

.hitbox:hover .button {
    display:block;
}

.hitbox {
    position:fixed;
    cursor:pointer;
}

#shitbox {
    top:175px;
    left:62px;
    width:209px;
    height:86px;
}

#bhitbox {
    top:274px;
    left:43px;
    width:209px;
    height:86px;
}

#phitbox {
    top:371px;
    left:45px;
    width:209px;
    height:86px;
}

#ihitbox {
    top:471px;
    left:57px;
    width:209px;
    height:86px;
}

#outer{
    width:100%; 
    padding-bottom:75%; 
    position:relative;
}

#kategoriebox {
    margin-bottom: 40px;
}
.projektitem {
    display:inline; 
    margin: 10px;
}
.projektlink {
    color:rgb(0, 0, 0); 
    padding:3px;
}
.activeprojektlink {
    color:rgb(0, 0, 0); 
    padding:3px;
}
a.projektlink:link {
    text-decoration:underline;
}
a.projektlink:hover {
    text-decoration:none; background-color: #ccc;
}
a.activeprojektlink:link {
    text-decoration:none; 
    background-color: #ccc;
}
a.activeprojektlink:hover {
    text-decoration:underline; 
}

#textblock{
    margin-top: 40px; 
    text-align:justify; 
    margin-bottom:7px;
}

.thumb{
    display: inline-block;
    width: 228px;
    height: 171px;
    margin:8px;
    position:relative;
    background-size:contain;
}

#thumbcontainer{
    margin-left: -15px;
    margin-right:-15px;
}

.pnamebg{
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.7);
    display:none;
    color:white;
}

.pname{
    vertical-align: middle;
    display:inline-block;
    margin:10px;
}

.pname1{
    font-weight: bold;
    font-size:18px;
}

.pname2{
    font-family: 'Old Standard TT', serif; 
    font-size:14px;
}

.thumb:hover .pnamebg{
    display:block;
}

.thumb:hover {
    -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.3);
}

#thumbhr{
    color:white;
    border-style:solid;
}

#headlinehr{
    color:black;
    border-style:solid;
    margin-left:33%;
    margin-right:33%;
}

#pheadline1{
    margin-top:107px;
    font-size:large;
    font-weight: bold;
}

#pheadline2{
    font-family: 'Old Standard TT', serif; 
    margin-bottom:60px;
}

#projektelink{
    color:black; 
    text-decoration:none;
}

.vcenterspan{
    height:100%;
    vertical-align: middle;
    display:inline-block;
}

.noselect {
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
}


@media (max-height: 600px) {
    body{
        background-attachment: scroll;
    }
    .hitbox {
        position:absolute;
    }
}

@media (min-width: 1654px) {
    #contentbox {
        left:50%; margin-left: -515px;
    }    
}

@media (min-width: 1390px) {
    .thumb{
    width: 300px;
    height: 225px;
}
#pheadline1{
    margin-top:150px;
  }

#pheadline2{
    margin-bottom:71px;
}
    
}
@media (min-width: 1920px) {
    #contentbox {
        left:445px; margin-left: 0px;
    }    
}