/****************************************************************************************/
/* Grundelemente ************************************************************************/
/****************************************************************************************/
html { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; line-height:1.4em; min-height:100.1%; }

/* Body *********************************************************************************/
body { font-size:100%; margin:0; padding:0; background:#ffffff no-repeat bottom right; background-size:contain; }
body.tobiasstocker { background-image:url('/images/portraits/portrait-inhaber-tobias-stocker.jpg'); }
body.karinbitterlin { background-image:url('/images/portraits/portrait-mitinhaberin-karin-bitterlin.jpg'); }
body.iainvert { background-image:url('/images/portraits/portrait-druckvorstufe-iain-vert.jpg'); }
body.guidobrunner { background-image:url('/images/portraits/portrait-drucker-guido-brunner.jpg'); }
body.michaelisaak { background-image:url('/images/portraits/portrait-drucker-michael-isaak.jpg'); }
/* responsive */
@media screen and (max-width:1000px) {
	body { background-size:auto 50%; }
}

/* Container ****************************************************************************/
div.container { margin:0 auto; width:88%; /*max-width:1300px;*/ }
div.container div.container-inner { width:100%; }
body.portrait div.container div.container-inner { margin-right:25%; width:75%; }
/* responsive */
@media screen and (max-width:1500px) {
	body.portrait div.container div.container-inner { margin-right:30%; width:70%; }
}
@media screen and (max-width:1000px) {
	body.portrait div.container div.container-inner { margin-right:0; width:100%; }
}

.visually-hidden {
	display: none;
}

/****************************************************************************************/
/* HEADER *******************************************************************************/
/****************************************************************************************/
header { width:100%; }

/* Logo *********************************************************************************/
header.header-top { display:block; padding:5em 0 2.5em 0; width:100%; height:120px; border: 0px solid black; }
header.header-top p { margin:0; width:100%; text-align:center; }
header.header-top p a { text-decoration:none; }
header.header-top p a img { display:block; margin:0 auto; border:0; padding:0 0 2.5em 0; width:200px; height:auto; }
header.header-top h1 { font-family:"Minion Pro", Minion, Times, serif; font-size:4.5em; line-height:1.1em; font-weight:bold; font-style:italic; color:#a0a0a0; margin:0; padding:0 0 2.5em 0; width:100%; text-align:center; }
/* responsive */
@media screen and (max-width:1024px) {
	header.header-top h1 { font-size:4.25em; }
}
@media screen and (max-width:920px) {
	header.header-top h1 { font-size:4em; }
}
@media screen and (max-width:880px) {
	header.header-top h1 { font-size:3.75em; }
}
@media screen and (max-width:840px) {
	header.header-top h1 { font-size:3.5em; }
}
@media screen and (max-width:760px) {
	header.header-top { padding:3em 0 0 0; height:auto; }
	header.header-top p a img { padding:0 0 2em 0; width:180px; }
	header.header-top h1 { font-size:2.75em; padding:0 0 2em 0; }
}
@media screen and (max-width:680px) {
	header.header-top h1 { font-size:2em; }
}


/* Hauptmenu ****************************************************************************/
nav.navigation { display:block; position:relative; width:100%; border: 0px solid black; }
nav.navigation ul { margin:0; padding:0; list-style-type:none; text-align:center; }
nav.navigation ul li { display:inline-block; margin:0 2em; }
nav.navigation ul li a { font-size:1.2em; font-weight:bold; color:#dcdcdc; text-transform:uppercase; text-decoration:none; transition:color 0.3s ease; }
nav.navigation ul li a:hover { color:#a0a0a0; }
nav.navigation ul li.active > a { color:#a0a0a0; }
nav.navigation ul li label { font-size:0.75em; font-weight:bold; color:#dcdcdc; text-transform:uppercase; text-decoration:none; transition:color 0.3s ease; }
/* responsive */
@media screen and (max-width:760px) {
	nav.navigation ul { margin:0 0 1em 0; }
}
@media screen and (max-width:680px) {
	nav.navigation ul li { margin:0 1.5em; }
}
@media screen and (max-width:600px) {
	nav.navigation ul { margin:0 0 2.5em 0; }
	nav.navigation ul li { margin:0 1em; }
}
@media screen and (max-width:410px) {
	nav.navigation ul li { margin:0 0.75em; }
}

/* Submenu ******************************************************************************/
nav.navigation ul li ul { display:none; position:absolute; margin:0 0 0 -4em; padding:0.5em 0 1em 0; width:10em; background:#ffffff; background:rgba(255,255,255,0.95); border-radius:0.5em; z-index:500; }
nav.navigation ul li.item-481 ul { margin:0 0 0 -3.75em; }
nav.navigation ul li.item-482 ul { margin:0 0 0 -2.1em; }
nav.navigation ul li:hover ul { display:block; z-index:1000; }
nav.navigation ul li ul li { display:block; margin:0 1em; }
nav.navigation ul li ul li a { font-size:1em; font-weight:normal; text-transform:none; }
@media screen and (max-width:768px) {
	nav.navigation ul li:hover ul { display:none; }
}

/* Mobilenavigation *********************************************************************/
nav.navigation .toggle, nav.navigation [id^=drop] { display:none; }
nav.navigation .parent.active > .toggle { display:inline-block; margin-right:-1em; padding:0 1em; }
nav.navigation [id^=drop]:checked + ul { display:block; }



/****************************************************************************************/
/* CONTENT ******************************************************************************/
/****************************************************************************************/
div#content { display:block; padding:0 0 0 0; width:100%; }

/* Zitat ********************************************************************************/
div.zitat {  display:table; position:relative; width:100%; height:380px; }
body.zitatlos div.zitat { position:absolute; margin:0 auto; width:88%; z-index:-500; }
body.zitatlos #cf_1 { margin-left: auto; margin-right: auto; }
div.zitat div.zitat-inner { display:table-cell; vertical-align:middle; padding:2em; width:auto; }
div.zitat h1 { font-family:"Minion Pro", Minion, Times, serif; font-size:4.5em; line-height:1em; font-weight:bold; font-style:italic; color:#a1a1a1; text-align:center; margin:0; }
div.zitat div.passermarke { display:block; position:absolute; width:100px; height:100px; background:url('/images/grafiken/passermarken-druckerei-basel.gif') no-repeat center; background-size:100%; }
div.zitat div.passermarke.eins { top:0; left:0; }
div.zitat div.passermarke.zwei { top:0; right:0; }
div.zitat div.passermarke.drei { bottom:0; left:0; }
div.zitat div.passermarke.vier { bottom:0; right:0; }
/* responsive */
@media screen and (max-width:1024px) {
	div.zitat { height:306px; }
	div.zitat h1 { font-size:4em; }
	div.zitat div.passermarke { width:81px; height:81px; }
}
@media screen and (max-width:920px) {
	div.zitat h1 { font-size:4em; }
	div.zitat div.passermarke { width:76px; height:76px; }
}
@media screen and (max-width:840px) {
	div.zitat h1 { font-size:3.75em; }
	div.zitat div.passermarke { width:71px; height:71px; }
}
@media screen and (max-width:880px) {
	div.zitat h1 { font-size:3.5em; }
	div.zitat div.passermarke { width:66px; height:66px; }
}
@media screen and (max-width:760px) {
	div.zitat { height:206px; }
	div.zitat div.zitat-inner { padding:1em; }
	div.zitat h1 { font-size:2.5em; }
	div.zitat div.passermarke { width:51px; height:51px; }
}
@media screen and (max-width:680px) {
	div.zitat h1 { font-size:2em; }
	div.zitat div.passermarke { width:41px; height:41px; }
}
@media screen and (max-width:600px) {
	div.zitat { height:186px; }
	div.zitat h1 { font-size:2em; line-height:1.1em; }
	div.zitat div.passermarke { width:41px; height:41px; }
}
@media screen and (max-width:410px) {
	div.zitat h1 { font-size:1.5em; line-height:1.1em; }
}



/* Text *********************************************************************************/
div.item-page { margin:0 auto; width:100%; }
body.wer div.page-header { display:none; }
div.item-page p { font-size:2em; line-height:1.2em; color:#a0a0a0; text-align:center; }
body.zitatlos div.item-page p { font-size:1.2em; line-height:1.4em; color:#a0a0a0; text-align:center; padding-top:5em; }
body.zitatlos.referenzen div.item-page p:last-child { padding-top:0; }
div.item-page p a { color:#a0a0a0; text-decoration:none; transition:color 0.3s ease; }
div.item-page p a:hover { color:#000000; }
/* responsive */
@media screen and (max-width:1000px) {
	body.portrait div.item-page { margin:0 30% 0 0; width:70%; }
	body.portrait div.item-page { padding:2.5em 0; }
	div.item-page p { font-size:1.75em; }
}
@media screen and (max-width:760px) {
	div.item-page p { font-size:1.5em; }
	body.zitatlos div.item-page p { padding-top:2.5em; }
}
@media screen and (max-width:600px) {
	div.item-page p { font-size:1.2em; }
}


/* Anfrageformular **********************************************************************/
form#m4jForm.ProformsForm { display:block; margin:0 auto; padding:4em 0; width:65%; max-width:400px; }
table.m4j_form_table { margin:0; border:0; padding:0; width:100%; }
table.m4j_form_table > tr { margin:0; border:0; padding:0; width:100%; }
table.m4j_form_table td { margin:0; border:0; padding:0; width:100%; }
table.m4j_form_table td label { font-size:1em; color:#a0a0a0; display:block; padding:1em 0 0.25em 0; }
select#m4j-4.m4jSelection { border:1px solid #dcdcdc; padding:0.25em 2%; width:54% !important; font-size:1em; color:#a0a0a0; background:#f8f8f8;  }
input.m4jInputField { border:1px solid #dcdcdc; padding:0.25em 2%; width:96% !important; font-size:1em; color:#a0a0a0; }
input.m4jInputField:hover,
input.m4jInputField:focus { border:1px solid #a0a0a0; outline:none; color:#000000; }
textarea.m4jTextArea { border:1px solid #dcdcdc; padding:0.25em 2%; width:96% !important; min-height:200px; font-size:1em; color:#a0a0a0; }
textarea.m4jTextArea:hover { border:1px solid #a0a0a0; outline:none; color:#000000; }
textarea.m4jTextArea:focus { border:1px solid #a0a0a0; outline:none; color:#000000; background-color:#f8f8f8; }
input#m4j-10.m4jCheckBox { font-size:1em; margin:0; padding:0; }
div#captchaWrapButtons { margin-top:1em !important; text-align:left !important; }
input.m4j_submit { margin:0 0 0 35%; border:1px solid #dcdcdc; padding:0.5em 5%; width:35%; font-size:1em; color:#a0a0a0; background-color:#f8f8f8; }
input.m4j_submit:hover { background:#dcdcdc; }
input.m4j_submit:active { color:#000000; }
/* responsive */
@media screen and (max-width:760px) {
	form#m4jForm.ProformsForm { margin:-2em auto 0 auto; padding:2.5em 0 0 0; }
}
@media screen and (max-width:600px) {
	select#m4j-4.m4jSelection { width:100% !important;  }
	div#captchaWrapButtons { text-align:center !important; }
	input.m4j_submit { margin:0; width:auto; }	
}
/* Dankesseite nach Formularversand */
div#proforms_proforms.m4j_form_wrap { text-align:center; }
div#proforms_proforms.m4j_form_wrap h3 { font-size:1.2em; line-height:1.4em; font-weight:normal; color:#a0a0a0; text-align:center; padding:6em 0; }
/* responsive */
@media screen and (max-width:1024px) {
	div#proforms_proforms.m4j_form_wrap h3 { padding:5em 0; }
}
@media screen and (max-width:760px) {
	div#proforms_proforms.m4j_form_wrap h3 { padding:2.5em 0; }
}


/****************************************************************************************/
/* FOOTER *******************************************************************************/
/****************************************************************************************/
footer { display:block; position:fixed; bottom:5em; left:0; width:100%; height:auto; }
footer div.footer-inner { position:relative; margin:0 auto; width:88%; /*max-width:1300px;*/ }
/* responsive */
@media screen and (max-width:900px) {
	footer { position:relative; bottom:auto; left:auto; padding-top:2.5em; }
}
@media screen and (max-height:1000px) and (min-width:760px) {
	footer { position:relative; bottom:auto; left:auto; margin:5em 0 5em 0; }
	footer div.footer-inner { width:100%; }
}
@media screen and (max-height:1024px) and (max-width:760px) {
	footer { padding-bottom:2.5em; }
	footer div.footer-inner { width:100%; }
}

/* Logo klein ***************************************************************************/
div.footer-left { display:block; position:absolute; left:0; bottom:0; width:auto; height:auto; vertical-align:bottom; }
div.footer-left p { margin:0; }
div.footer-left a img { display:block; margin:0 0 -5px 0; border:0; padding:0; width:auto; height:auto; }
/* responsive */
@media screen and (max-width:900px) {
	div.footer-left { position:relative; left:auto; bottom:auto; padding:2.5em 0; }
}
@media screen and (max-width:760px) {
	div.footer-left { padding:2.5em 0 0 0; }
}


/* Fussnote *****************************************************************************/
div.footer-middle { display:block; width:100%; height:auto; vertical-align:bottom; }
body.portrait div.footer-middle { margin-right:25%; width:75%; }
div.footer-middle p { margin:0; font-size:1.2em; color:#787878; text-align:center; }
div.footer-middle p strong { font-weight:bold; color:#787878; }
div.footer-middle p a { color:#787878; text-decoration:none; transition:color 0.3s ease; }
div.footer-middle p a:hover { color:#000000; }
/* Googel Map */
body.druckkontakt div.footer-middle div.custom { margin:0 auto; width:100%; max-width:600px; height:300px; }
body.druckkontakt div.footer-middle div.custom > a { display:none; }
body.druckkontakt div#googlemap83_zn6u5_0.map { width:600px !important; height:300px !important; }
body.druckkontakt div.googlemap { margin:0 auto; width:100%; max-width:600px; height:300px; text-align:center; }
body.druckkontakt div.googlemap iframe { width:100%; max-width:600px; height:300px; }
/* responsive */
@media screen and (max-width:1024px) {
	body.portrait div.footer-middle { margin-right:30%; width:70%; }
	body.druckkontakt div.footer-middle div.custom { max-width:500px; }
	body.druckkontakt div.googlemap { max-width:500px; }
	body.druckkontakt div.googlemap iframe { max-width:500px; }
}
@media screen and (max-width:760px) {
	div.footer-middle p { font-size:1em; color:#787878; text-align:center; }
}
@media screen and (max-height:1000px) and (min-width:1024px) {
	body.portrait div.footer-middle { margin-right:0; width:100%; }
}