/* generic */

html,body           { height:100%; }
html,body           { font-family: Arial, Helvetica, sans-serif; }
html,body,div       { margin:0px; padding:0px; line-height:0; }
div                 { font-size:0px; }
p                   { line-height: 120%; font-size:14pt; padding:0px; margin:0px; padding-bottom:1em; letter-spacing:0.03em }
h2                  { line-height: 120%; font-size:16pt; padding:0px; margin:0px; padding-bottom:1em; letter-spacing:0.03em }
h3                  { line-height: 120%; font-size:16pt; padding:0px; padding-top:1em; margin:0px; padding-bottom:1em; font-style:italic; letter-spacing:0.03em }

html                { -webkit-text-size-adjust: none; }

html,body           { font-family: "Amplitude Cond Med"; font-style: Normal; font-weight: Normal; }

a.greylink          { color:#6B6B6B; text-decoration:none; }


/* smartphone menu as inner content */

.inner-content-menu a {
    display:block;
    width:100%;
    height:1.5em;
    line-height: 100%;
    font-size:12pt;
    text-align:center;
    color:#FFF;
    text-decoration:none;
    padding-top:0.5em;
    
    -webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -o-transition: all .5s ease; /* IE 9 */
    -ms-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

.inner-content-menu a:hover {
    opacity: 0.75;
}

#corporatelink  { background:#FB3245; }
#printlink      { background:#76B82A; }
#webdesignlink  { background:#0093D6; }
#infografiklink { background:#FFC800; }
#artworklink    { background:#A7A7A7; }
#kontaktlink    { background:#6B6B6B; background:transparent; }

a.menuicon {  float:right; display:inline-block; width:36px; height:36px; padding:0px; margin:0px; background: url(Mobile-Icon-00.png) no-repeat; background-size: 36px 36px; }

.largeheader p,
.largeheader a {
    display:block;
    color:#FFF;
    text-decoration:none;
    position:absolute;
    line-height: 100%;
    font-size:13pt;
    letter-spacing:0.025em;
    white-space:nowrap;
    
    -webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -o-transition: all .5s ease; /* IE 9 */
    -ms-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

.largeheader a:hover {
}

.smallheader a { text-decoration:none; color:#6B6B6B; }

#postext            { left:24px; top:45px; color:#6B6B6B; }
/*
#posinfografiklink  { left:50%; top:42px; margin-left:-254px; }
#poscorporatelink   { left:50%; top:82px; margin-left:-146px; }
#posprintlink       { left:50%; top:32px; margin-left:158px; }
#poswebdesignlink   { left:50%; top:59px; margin-left:60px; }
*/

#posinfografiklink  { left:50%; top:2px; margin-left:-265px; padding-left:6px; padding-top:40px; width:279px; height:18px; /* background:#900; opacity:0.5; */ }
#poscorporatelink   { left:50%; top:35px; margin-left:-152px; padding-left:6px; padding-top:50px; width:162px; height:18px; /* background:#900; opacity:0.5; */ }
#posprintlink       { left:50%; top:11px; margin-left:3px; padding-right:6px; padding-top:20px; width:259px; height:18px; /* background:#900; opacity:0.5; */ text-align:right; }
#poswebdesignlink   { left:50%; top:54px; margin-left:3px; padding-right:6px; padding-top:20px; width:119px; height:18px; /* background:#900; opacity:0.5; */ text-align:right; }

#posartworklink     { right:0px; top:0px; width:125px; line-height:100%; padding:20px 8px 3px 0px; background:#B2B2B2; text-align:right; }
#poskontaktlink     { right:0px; top:44px; width:125px; line-height:100%; padding:20px 8px 3px 0px; background:#B2B2B2; text-align:right; }


/* general overlay stuff */

.overlay-container {
    opacity:0.0;
    position: fixed;
    top: 0px;
    left: 0px;
    right: -30px;           /* -30 for firefox scrollbar */
    bottom: -30px;          /* -30 for firefox scrollbar */
    background-color: rgba(110,110,110, 0.93);

    z-index:1;
    overflow:auto;
}

.overlay-content {
    color: #FFF;
    overflow:scroll;
    padding: 0.5em 2.5em 0.5em 2em;
}

.overlay-container:target {
    z-index:3;
    opacity:1.0;
    
    -webkit-transition: opacity 150ms ease-in;
    -moz-transition: opacity 150ms ease-in;
    transition: opacity 150ms ease-in;
    
}

.overlay-close {
    position:fixed;
    top: 14px;
    right: 0px;
    display: block;
    width: 36px;
    height: 36px;
    background: url(icon_x.png) no-repeat;
    background-color: #000;
    background-size: 32px 32px;
    background-position: 2px 2px;
    opacity:0.75;
}

#page-menu .overlay-close {
    top:200px;
}


.overlay-close:hover {
    background-color: #F00;
}
 
.overlay-open:hover {
    background-color: rgba(64,64,64,128);
}

/* general sections */

.mainpage {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    background:#FFF;
    z-index:2;
    padding:0px;
}

div.smallheader {
    padding: 16px 0px 6px 32px;
    color:#6B6B6B;
}

div.largeheader {
    /*background: #F00;*/
    width:100%;
    height:142px;
    background: url(MAINMENUE-00.png) no-repeat center 0px;
}

#page_infografik div.largeheader { background-image:url(MAINMENUE-01.png); }
#page_corporate div.largeheader { background-image:url(MAINMENUE-03.png); }
#page_print div.largeheader { background-image:url(MAINMENUE-02.png); }
#page_webdesign div.largeheader { background-image:url(MAINMENUE-04.png); }

#page_artwork #posartworklink { background-color:#000; }
#page_kontakt #poskontaktlink { background-color:#000; }


/* zoomlink */

div.zoomlink    { margin:4px; display:inline-block; overflow:hidden; background: transparent; }
div.zoomlink a  { width:100%; height:100%; display:inline-block; background:#FF0; background-size: 100%; }

div.zoomlink a {
    /*opacity:0.75;*/
    -webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -o-transition: all .5s ease; /* IE 9 */
    -ms-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

div.zoomlink a:hover {
    /*opacity:1;*/
    -webkit-transform:scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:scale(1.05); /* Opera */
    transform:scale(1.05);
}

img.mainimage {
    opacity:0.75;
    -webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -o-transition: all .5s ease; /* IE 9 */
    -ms-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

img.mainimage:hover {
    opacity:1.0;
    /*
    -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    -ms-transform:scale(1.05);
    -o-transform:scale(1.05);
    transform:scale(1.05);
    */
}


/* smart switches */


/* headerbreak large */
@media (min-width: 880px) {
    div.largeheader { display:block; }
    div.smallheader { display:none; }
}
/* headerbreak small */
@media (max-width: 880px) {
    div.largeheader { display:none; }
    div.smallheader { display:block; }
}

/* kontaktstyle large */
@media (min-width: 700px) {
    div.kontaktstyle { width:400px; margin:auto; background:#FFF; color:#6B6B6B; text-align:left; }
    span.kontakthide { display:inline; }
}
/* kontaktstyle small */
@media (max-width: 700px) {
    div.kontaktstyle { padding-left:30px; padding-right:30px; background:#FFF; color:#6B6B6B; text-align:left; }
    span.kontakthide { display:none; }
}


/* imagebreak large */
@media (min-width: 600px) {
    div.images { width:100%; text-align:center; }
    div.images a { white-space:nowrap; display:inline-block; margin: 2px; }
    div.images img.mainimage { width:auto; height:250px; }
    div.images img.iconimage { width:32px; height:32px; margin-left:-32px; background:#000; opacity:0.5; }
}
/* imagebreak small */
@media (max-width: 600px) {
    div.images { width:100%; }
    div.images a { white-space:nowrap; display:inline-block; margin-bottom:3px; }
    div.images img.mainimage  { width:100%; height:auto; }
    div.images img.iconimage { width:32px; height:32px; margin-left:-32px; background:#000; opacity:0.5; }
}

/* contentbreak large */
@media (min-width: 600px) {
    .inner-content { margin:40px auto 40px auto; width:520px; }
}
/* contentbreak small */
@media (max-width: 600px) {
    .inner-content { margin:40px 70px 40px 40px; }  /* 70 = 40+30 for the firefox scrollbar */
}