/* ++++++++++++++++++++++++++++++ Browser Reset +++++++++++++++++++++++++++++++++++++++++++++ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: middle; } /* ++++++++++++++++++++++ HTML5 display-role reset for older browsers ++++++++++++++++++++ */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} table { border-collapse: collapse; border-spacing: 0; } body { width: 100%; height: 100%; margin: 0; padding: 0; } /* +++++++++++++++++++++++++++ Christoph-Dornier-Stiftung ++++++++++++++++++++++++++++++++++++++++++++++ */ /* ____________________________________STAND_23.02.2016________________________________________________________ */ /* Farben: ---------------- Logo blau-hell: #A5A9CF - 165,169,207 blau-dunkel: #002B7F - 0,51,133 */ /* ++++++++++++++++++++++++++++++++++++++ BASIC ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .hidephone { display:inherit !important; } .hidescreen { display:none !important; } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ body { width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; } *::-moz-selection { background: none repeat scroll 0 0 #689240; color: #FFFFFF; text-shadow: none; } section { width: 100%; } article { width: 90%; max-width: 1225px; margin: 0 auto; } article div { position: relative; float: left; } article.teaser { margin: 30px auto; /*background-color: rgba(165,169,207,0.15); background-color: #f3f3f3; */} article.teaser div { position: relative; float: right; padding: 10px; } .inner { display: inline; width: 82%; margin: 50px 9% 50px 9%; } .innerbase { display: inline; width: 94%; margin: 50px 3% 10px 3%; } .container { display: inline; width: 100%; margin: 100px 0% 0px 0%; padding: 10px 10px 50px 20px; background-color: rgba(247,247,247,0.8)} iframe { width: 80%; margin: 0px 10% 0px 10%; height: 100px; } .target { padding-top: 100px; } .targetmax { padding-top: 200px; } .ontop { margin-top: 100px; } .onbottom { padding-bottom: 70px; } .one { width: 100%; } .two { width: 50%; } .three { width: 33.33%; } .doublethree { width: 66.66%; } .four { width: 25%; } .threefour { width: 75%; } .five { width: 20%; } .grow { min-height: 100px; } .grow_index_institut { min-height: 130px; } .grow00 { min-height: 170px; } .grow0 { min-height: 200px; } .grow1 { min-height: 240px; } .grow2 { min-height: 350px; } .grow3 { min-height: 600px; } .ligth { background: rgba(235,236,240,0.5); padding-bottom: 100px; } .white { background: rgba(255,255,255,1); } .white p { padding: 7px; } .white h5 { padding: 7px; } /* ++++++++++++++++++++++++++++++++++++++ TYPO ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* latin */ @font-face { font-family: 'Droid Sans Mono'; font-style: normal; font-weight: 400; src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'), url(../fonts/droid_sans-mono.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 400; src: local('Droid Serif Regular'), local('DroidSerif-Regular'), url(../fonts/droid_serif.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html { font-family: "Calibri"; color: #1C1C1C; font-weight: 200; } h1, h2, h5, h6 { margin: 1em 0 1em 0; } p, a { color: #1C1C1C; } h1 { font-size: 1.6em; line-height: 1.7em; font-family: Calibri; color: #002B7F; text-transform: uppercase; } h2 { font-size: 1.4em; line-height: 1.4em; font-family: Calibri; color: #1C1C1C; } h3 { font-size: 1.4em; line-height: 2.8em; font-family: Calibri; color: rgba(27,29,45,1); text-transform: uppercase; } h3 { background-color: rgba(165,169,207,0.3); margin: 0px 0xp 10px 0px; padding: 0px 10px 0px 10px; text-align: right; border-top: 3px solid rgba(27,29,45,1); } h3 span { font-size: 0.7em; font-weight: normal; } h3.none { line-height: 1.6em; } h3.quote { line-height: 3.5em; text-shadow: 0px 5px 5px #ffffff; text-align: left; border-top: 3px solid rgba(0,38,77,0); } h3.quote-therapie { background: url('../img/01_bottum.png') right no-repeat; line-height: 3.5em; text-shadow: 0px 25px 5px #ffffff; text-align: left; border-top: 3px solid rgba(27,29,45,1); } h3.quote-forschung { background: url('../img/02_bottum.png') right no-repeat; line-height: 3.5em; text-shadow: 0px 25px 5px #ffffff; text-align: left; border-top: 3px solid rgba(27,29,45,1);} h3.quote-weiterbildung { background: url('../img/03_bottum.png') right no-repeat; line-height: 3.5em; text-shadow: 0px 25px 5px #ffffff; text-align: left; border-top: 3px solid rgba(27,29,45,1); } h3.quote-institut { font-size: 1.4em; text-shadow: 0px 25px 5px #ffffff; text-align: left; border-top: 3px solid rgba(27,29,45,1); } h3.quote-behandlung { background: url('../img/06_bottum.png') right no-repeat; line-height: 3.5em; text-align: left; border-top: 3px solid rgba(27,29,45,1); } h4 { font-size: 1.5em; line-height: 2.4em; background-color: rgba(255,255,255,1); border-bottom: 1px solid #999; border-top: 3px solid rgba(0,38,77,1); padding-left: 5px;} h5 { font-size: 1.5em; line-height: 1.5em; font-family: Calibri; } h6 { font-size: 1.2em; line-height: 1.4em; font-family: Calibri; } p { font-size: 16px; line-height: 1.2em; padding: 10px 0px 10px 0px; } p span { font-family: Calibri; font-size: 16px; font-weight: bold; padding: 0px 0px 0px 0px; } p strong { font-family: Calibri; font-weight: bold; width: 100%; float: left; margin: 5px; } p strong.pullquote { font-family: Calibri; width: 50%; float: left; font-weight: bold; margin: 5px; padding: 0px 20px 5px 0px; font: italic; color: rgba(0,38,77,1); } .break { hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto;} .column { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;} .column3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding-left: 20px; } .bold { font-weight: bold; } .center { text-align: center; } .right { text-align: right; } .border { border-bottom: 1px solid rgba(0,38,77,1); padding-bottom: 10px;} .top-border { border-top: 1px solid rgba(0,38,77,1); padding-bottom: 10px;} .deko { padding: 10px 20px 10px 20px;} .blue { color: rgba(27,29,45,1); } .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } .shadowone { -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; } /* ++++++++++++++++++++++++++++++++++++++ Deutscher Psychologie-Preis ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .dpp {background-image: linear-gradient(#18222b,#4c5c67); } .dpp-border { border-top: 20px solid #788C17; } .dpp p { color: #ffffff; padding: 10px 20px 10px 20px; } .dpp p span { color: #788C17; } /* ++++++++++++++++++++++++++++++++++++++ LINK ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ a { font-size: 16px; line-height: 1.2em; font-weight: bolder; text-decoration: none; padding: 5px 0px 5px 0px; } a:hover { text-decoration: underline; color: rgba(27,29,45,1);} a.email { font-family: "Calibri"; font-size: 0.9em; line-height: 1.3em; font-weight: bolder; text-decoration: none; padding: 10px 0px 50px 10px; } a.email:hover { text-decoration: underline; color: rgba(27,29,45,1);} a.medien { display: block; margin-top: 0px; text-align: center; font-weight: bolder; color: 4d4d4d; padding: 10px; line-height: 20px; } a.medien:hover { text-decoration: none; color: rgba(0,38,77,1); } a.link { display: block; margin-top: 0px; text-align: center; font-weight: bolder; background: rgba(27,29,45,1); color: #ffffff; padding: 10px; line-height: 20px; border: 1px solid #999999; -moz-border-radius: 1px; border-radius: 1px; } a.link:hover { text-decoration: none; background: #ffffff; color: rgba(27,29,45,1); } a.ilink { display: block; margin-top: 0px; text-align: center; font-weight: bolder; background: rgba(27,29,45,1); color: #ffffff; padding: 10px; line-height: 20px; border: 1px solid #999999; -moz-border-radius: 1px; border-radius: 1px; } a.ilink:hover { text-decoration: none; background: #ffffff; color: rgba(27,29,45,1); } a.exlink { display: block; margin-top: 0px; text-align: center; font-weight: bolder; background: rgba(27,29,45,1); color: #ffffff; padding: 10px; line-height: 20px; border: 1px solid #999999; -moz-border-radius: 1px; border-radius: 1px; } a.exlink:hover { text-decoration: none; background: #ffffff; color: rgba(27,29,45,1); } a.tlink { display: block; margin: 5px 0px 0px 0px; line-height: 2.5em; text-align: center; background-color: rgba(165,169,207,0.2); color: rgba(27,29,45,1); text-transform: uppercase; } a.tlink:hover { background-color: rgba(165,169,207,0.1);} a.dpplink { display: block; margin: 0px 20px 0px 20px ; text-align: center; background-color: #ffffff; color: #788C17; padding: 10px; line-height: 20px; border: 1px solid #788C17; -moz-border-radius: 5px; border-radius: 5px; } a.dpplink:hover { text-decoration: none; background-color: #788C17; color: #ffffff; } /* ++++++++++++++++++++++++++++++++++++++ LIST ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ ul.square { padding-left: 20px; list-style: square; } ul.square li { line-height: 30px; } ul.square li a { font-size: 1.1em; font-family: "Calibri"; font-weight: bold; color: #4D4D4D; } ul.nonestyle { padding-left: 30px; list-style: none; } ul.nonestyle li { font-size: 1.0em; line-height: 1.2em; color: #4D4D4D; } ul.nonestyle li span { font-size: 1.1em; font-family: "Calibri"; font-weight: bold; } ul.cdsstyle { padding-left: 10px; list-style: none; margin-top: 30px } ul.cdsstyle li { font-size: 1.0em; line-height: 2.4em; color: #4D4D4D; } ul.cdsstyle li span { font-size: 1.1em; font-family: "Calibri"; font-weight: bold; } /* ++++ IMAGES +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ img.full { display: block; margin: 0px; padding: 0px; width: 100%; height: 100%; } img.fullm { display: block; margin: 10px; padding: 0px; width: 100%; height: auto; } img.height { display: inline; margin: 20px 0px 0px 0px; padding: 0px; width: auto; height: 100%; } img.max { display: block; margin: 0px; padding: 0px; width: 100%; height: 100px; } img.displayed { display: block; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; background-color: #ffffff; } img.text { width: 33%; height: auto; padding: 0px; float: left; margin: 0px; } img.textborder { width: 33%; height: auto; padding: 0px 20px 10px 0px; float: left; margin: 0px; } /* ++++ BREADCRUMB ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ ul.breadcrumb { font-family: Calibri; list-style: none; overflow: hidden; font-size: 16x; margin: 20px 0px 20px 0px; } .breadcrumb li { float: left; color: #ffffff; text-decoration: none; padding: 10px 0 10px 65px; background: #08088A; position: relative; display: block; } .breadcrumb li:after { content: " "; display: block; width: 0; height: 0;border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid #08088A; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li:before { content: " "; display: block; width: 0; height: 0;border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid #ffffff; position: absolute; top: 50%; margin-top: -50px; margin-left: 5px; left: 100%; z-index: 1; } .breadcrumb li:first-child { padding-left: 20px;} .breadcrumb li:nth-child(2) { background: #013ADF; } .breadcrumb li:nth-child(2):after { border-left-color: #013ADF; } .breadcrumb li:nth-child(3) { background: #0174DF; } .breadcrumb li:nth-child(3):after { border-left-color: #0174DF; } .breadcrumb li:nth-child(4) { background: #A9BCF5; } .breadcrumb li:nth-child(4):after { border-left-color: #A9BCF5; } /* .breadcrumb li:last-child { background: transparent !important; color: black; pointer-events: none; cursor: default; } */ /* ++++ MITARBEITER +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .mitarbeiter { position: relative; width: 85%; margin: 30px 7% 30px 7%; float: left; background: rgba(255,255,255,1);overflow: hidden; } .mitarbeiter img { display: block; position: relative; top: 0px; } .mitarbeiter h5 { position: relative; font-size: 1.2em; line-height: 1.2em; color: rgba(27,29,45,1); text-align: right; padding: 5px; background: rgba(165,169,207,0.25); margin: 0px; -moz-border-radius: 2px; border-radius: 2px; } .mitarbeiter p { position: relative; line-height: 1.5em; color: #4d4d4d; padding: 0px 10px 0px 0px; text-align: right; } .mitarbeiter a { display: inline-block; text-decoration: none; margin: 120px 10px 10px 10px; padding: 10px 20px; background: #fff; color: rgba(0,38,77,0.8); box-shadow: 1px 1px 1px #000; text-align: rigth; } .mitarbeiter a:hover { background: #fff; color: rgba(0,38,77,0.8); box-shadow: 0 5px 5px #000; } /* -- TO TOP ----------------------------------------------------------------------------- */ a#totop { position: fixed; color: #ffffff; height: 40px; width: 40px; bottom: 0px; right: 10px; z-index: 12; border: 0px solid #d4d4d4; background: url(../img/icon/top.jpg) no-repeat center center; background-color: rgba(0,0,0,0.2); } a#totop:hover { background-color: #E1001A; } /* ++++ TOPNAVI +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ #topnav nav { position: fixed; top: 0px; width: 100%; height: auto; background: rgba(255,255,255,0.98); border-bottom: 0px solid rgba(27,29,45,1); z-index: 10; } nav ul { padding: 0; width: 80%; margin: 0 10% 0px 10%; } nav li { display: inline; float: left; width: 12%; } nav a { display: inline-block; font-family: Calibri; font-size: 16px; color: rgba(0,38,77,1); width: 100%; text-align: center; text-decoration: none; line-height: 60px; } nav li a { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} nav a.content { background-color: rgba(165,169,207,0.2);} nav a:hover, nav a:active { color: #777777; text-decoration: none; } nav a#pull { display: none;} .logo { padding-left: 16%; } /* ++++ SUBNAVI +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ #sitenav .subnav { position: absolute; top: 280px; right: 0px; width: 100px; height: auto; } .subnav a { display: inline-block; margin-top: 1px; font-family: Calibri; font-weight: lighter; background: rgba(255,255,255,0.85); color: #002B7F; font-size: 16px; width: 100%; text-align: center; text-decoration: none; line-height: 30px; } .subnav a.content { color: #ffffff; background-color: #A5A9CF;} .subnav a:hover, .subnav a:active { color: #777777; text-decoration: none; } /* ++++ MAIN-TOP ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .start { background: url('../img/00_start.jpg') right no-repeat; background-size: cover; } .therapie { background: url('../img/01_therapie.jpg') right no-repeat; background-size: cover;} .forschung { background: url('../img/02_forschung.jpg') right no-repeat; background-size: cover;} .weiterbildung { background: url('../img/03_weiterbildung.jpg') right no-repeat; background-size: cover;} .stiftung { background: url('../img/04_stiftung.jpg') right no-repeat; background-size: cover;} .impressum { background: url('../img/05_impressum.jpg') right no-repeat; background-size: cover;} .institute { background: url('../img/06_institute.jpg') right no-repeat; background-size: cover;} #main-top { margin-top: 100px; padding-top: 50px; min-height: 450px; } #info { position: relative; top: 100px; width: 32%; left: 6%; padding: 20px; background-color: rgba(255,255,255,0.9); border: 1px solid rgba(27,29,45,0.3); min-height: 220px;} #info h1 { padding: 0px 0px 10px 0px; border-bottom: 1px solid #999999; } #infokoeln { position: relative; top: 70px; width: 250px; right: 40%; padding: 10px 30px 10px 30px; background-color: rgba(255,255,255,1); border: 1px solid rgba(27,29,45,1); } /* ++++ OVERLAY ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .overlay { overflow: scroll; position: fixed; top: 0; bottom: 100%; left: 0; right: 0; width: 100%; z-index: 10000; background: rgba(0,0,0,0.4); transition: opacity 0ms linear;} .overlay-inner { width: 50%; margin: 5% 25%; padding: 2rem; background: #FFF; border: 1px solid #17448C; text-align: left; } .overlay-inner a { text-align: left; } .overlay_big { overflow: scroll; position: fixed; top: 0; bottom: 100%; left: 0; right: 0; width: 100%; z-index: 10000; background: rgba(0,0,0,0.6); transition: opacity 0ms linear;} .overlay_big-inner { width: 85%; margin: 5%; padding: 2rem; background: #FFF; } .overlay-open { bottom: 0; opacity: 1; transition: opacity 100ms linear; } .overlay-view { overflow: hidden;} .overlay-close { position: absolute; width: 40px; height: 40px; left: -10px; top: -10px; } .overlay-close:hover { cursor: pointer;} /* ++++ FOOTER ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ #footer { margin-top: 0px; background: rgba(27,29,45,1); text-align: center; padding-top: 50px;} #footer h5 { padding: 0px; font-size: 22px; line-height: 26px; font-weight: bold; color: #999999; text-align: center; text-decoration: none; vertical-align: middle;} #footer h6 { padding: 0px; font-size: 18px; line-height: 22px; font-weight: bold; color: #999999; text-align: center; text-decoration: none; vertical-align: middle;} #footer p { padding: 0px; font-size: 0.9em; line-height: 1.3em; color: #666666; text-align: center; text-decoration: none; vertical-align: middle;} #footer a { padding: 0px; font-size: 0.9em; line-height: 1.3em; color: #666666; text-align: center; text-decoration: none; vertical-align: middle;} #footer a:hover { color: #ffffff; } #footer ul { padding: 0px; list-style: none; } #footer li { padding: 0px; font-size: 0.9em; line-height: 1.3em; color: #666666; text-align: center; text-decoration: none; vertical-align: middle;} .copy { margin: 50px 0 10px 0;} /* ++++ MEDIA QUERY +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* Pads ------------------------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 801px) and (max-width: 1024px) { .showphone { display:none !important; } .hidephone { display:inherit !important; } article { width: 100%; margin: 0px; } .inner { display: inline; width: 86%; margin: 50px 7% 20px 7%; } .innerbase { display: inline; width: 86%; margin: 50px 7% 10px 7%; } .one { width: 100%; height: auto; } .two { width: 50%; height: auto; } .three { width: 50%; height: auto; } .doublethree { width: 50%; height: auto; } .four { width: 50%; height: auto; } .five { width: 50%; height: auto; } .grow00 { min-height: auto; } .grow0 { min-height: 200px; } .grow1 { min-height: 240px; } .grow2 { min-height: auto; } .grow3 { min-height: 340px; } /* ++++ TONAVI ++++ */ nav { height: auto ;} nav ul { width: 100%; margin: 0; display: inline; height: auto;} nav li { width: 13%; float: left; position: relative; } nav a { text-align: center; width: 100%; text-indent: 25px; } .logo { float: none; width: 220px; padding-left: 6%; } } /* Pads ------------------------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 641px) and (max-width: 800px) { .hidephone { display:none !important; } .hidescreen { display:inherit !important; } article { width: 100%; } article div { position: relative; float: left; } article div h2 { padding: 20px; } article.teaser { width: 100%; margin: 0px auto; /*background-color: rgba(165,169,207,0.15); background-color: #f3f3f3; */} article.teaser div { position: relative; float: left; padding: 0px; } article.teaser div h2 { padding: 20px; } article.teaser div p { padding: 20px; } .inner { display: inline; width: 86%; margin: 50px 7% 20px 7%; } .innerbase { display: inline; width: 86%; margin: 50px 7% 10px 7%; } .container { display: inline; width: 100%; margin: 100px 0% 0px 0%; padding: 10px 10px 50px 20px; background-color: rgba(247,247,247,0.8)} iframe { width: 80%; margin: 0px 10% 0px 10%; height: 100px; } .target { padding-top: 100px; } .one { width: 100%; height: auto; } .two { width: 80%; height: auto; margin: 0px 10% 0px 10%; } .three { width: 80%; height: auto; margin: 0px 10% 0px 10%; } .doublethree { width: 80%; height: auto; margin: 0px 10% 0px 10%; } .four { width: 50%; height: auto; } .five { width: 50%; height: auto; } .grow00 { min-height: auto; } .grow0 { min-height: auto; } .grow1 { min-height: 240px; } .grow2 { min-height: auto; } .grow3 { min-height: auto; } /* ++++ TYPO ++++ */ h1 { font-size: 1.6em; line-height: 1.7em; font-family: Calibri; color: #002B7F; text-transform: uppercase; } h2 { font-size: 1.2em; line-height: 1.4em; font-family: Calibri; color: #4D4D4D; } h3 { font-size: 1.4em; line-height: 1.4em; font-family: Calibri; color: rgba(27,29,45,1); text-transform: uppercase; padding: 0.7em 0.em 0.7em 0.3em; } /* ++++ TONAVI ++++ */ nav { width: 100%; margin: 0px; height: auto; background: rgba(255,255,255,1 ); border-bottom: 1px solid rgba(0,38,77,1); } nav ul { display: none; width: 100%; margin: 0; height: auto; } nav li { display: block; float: none; width: 100%; } nav a { text-align: left; width: 100%; text-indent: 25px; line-height: 35px; } nav a.content { background-color: rgba(0,38,77,1); color: #ffffff; } nav a:hover, nav a:active { background-color: rgba(0,38,77,0.5); color: #ffffff; text-decoration: none; } nav a#pull { display: block; color: rgba(0,38,77,1); background-color: rgba(255,255,255,1); width: 100%; position: relative; } nav a#pull:after { content:""; background: url('../img/icon/menu_h.png') center no-repeat; width: 40px; height: 40px; display: inline-block; position: absolute; right: 15px; top: 10px; } .logo { float: none; width: 200px; padding: 5px 5px 5px 20px; } /* ++++ MAIN ++++ */ #main-top { margin-top: 40px; padding-top: 30px; } #info { position: relative; top: 40px; width: 70%; left: 10%; padding: 5px; background-color: rgba(255,255,255,0.7); -moz-border-radius: 2px; border-radius: 2px; } .column { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; padding: 10px;} .column3 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; padding: 10px; } ul.breadcrumb { padding: 0px; } .breadcrumb li { float: left; color: #ffffff; width: 100%; text-decoration: none; padding: 10px 0px 10px 0px; background: #08088A; position: relative; display: block; text-align: center; } .breadcrumb li:after { content: " "; display: block; width: 0; height: 0;border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid #08088A; position: absolute; top: 0%; margin-top: 0px; left: 0px; z-index: 2; } .breadcrumb li:before { content: " "; display: block; width: 0; height: 0;border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid #ffffff; position: absolute; top: 0%; margin-top: 0px; margin-left: 0px; left: 0px; z-index: 1; } .breadcrumb li:first-child { padding-left: 0px;} .mitarbeiter { position: relative; width: 90%; margin: 10px 5% 0px 5%; float: left; overflow: hidden; background: rgba(0,0,0,0.03); } .mitarbeiter p { padding: 0px 10px 0px 0px; margin: 0px 0px 0px 0px; } } /* Smartphones ----------------------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 480px) and (max-width: 640px) { .hidephone { display:none !important; } .hidescreen { display:inherit !important; } article { width: 100%; } article div { position: relative; float: left; } article div h2 { padding: 20px; } article.teaser { width: 100%; margin: 0px auto; /*background-color: rgba(165,169,207,0.15); background-color: #f3f3f3; */} article.teaser div { position: relative; float: left; padding: 0px; } article.teaser div h2 { padding: 20px; } article.teaser div p { padding: 20px; } .inner { display: inline; width: 90%; margin: 50px 5% 20px 5%; } .innerbase { display: inline; width: 90%; margin: 50px 5% 10px 5%; } .container { display: inline; width: 100%; margin: 100px 0% 0px 0%; padding: 10px 10px 50px 20px; background-color: rgba(247,247,247,0.8)} iframe { width: 80%; margin: 0px 10% 0px 10%; height: 100px; } .target { padding-top: 100px; } .one { width: 100%; height: auto; } .two { width: 100%; height: auto; } .three { width: 100%; height: auto; } .doublethree { width: 100%; height: auto; } .four { width: 100%; height: auto; } .five { width: 100%; height: auto; } .grow00 { min-height: auto; } .grow0 { min-height: auto; } .grow1 { min-height: auto; } .grow2 { min-height: auto; } .grow3 { min-height: auto; } /* ++++ TYPO ++++ */ h1 { font-size: 1.6em; line-height: 1.7em; font-family: Calibri; color: #002B7F; text-transform: uppercase; } h2 { font-size: 1.2em; line-height: 1.4em; font-family: Calibri; color: #4D4D4D; } h3 { font-size: 1.4em; line-height: 1.4em; font-family: Calibri; color: rgba(27,29,45,1); text-transform: uppercase; padding: 0.7em 0.em 0.7em 0.3em; } /* ++++ TONAVI ++++ */ nav { width: 100%; margin: 0px; height: auto; background: rgba(255,255,255,1 ); border-bottom: 1px solid rgba(0,38,77,1); } nav ul { display: none; width: 100%; margin: 0; height: auto; } nav li { display: block; float: none; width: 100%; } nav a { text-align: left; width: 100%; text-indent: 25px; line-height: 35px; } nav a.content { background-color: rgba(0,38,77,1); color: #ffffff; } nav a:hover, nav a:active { background-color: rgba(0,38,77,0.5); color: #ffffff; text-decoration: none; } nav a#pull { display: block; color: rgba(0,38,77,1); background-color: rgba(255,255,255,1); width: 100%; position: relative; } nav a#pull:after { content:""; background: url('../img/icon/menu_h.png') center no-repeat; width: 40px; height: 40px; display: inline-block; position: absolute; right: 15px; top: 10px; } .logo { float: none; width: 200px; padding: 5px 5px 5px 20px; } #sitenav { display:none !important; } /* ++++ TO TOP ++++ */ a#totop { display:none !important; } /* ++++ MAIN ++++ */ #main-top { margin-top: 40px; padding-top: 30px; } #info { position: relative; top: 50px; width: 100%; left: 0%; padding: 0px; background-color: rgba(255,255,255,0.7); -moz-border-radius: 0px; border-radius: 0px; } .infoborder { border: 0px solid #999999; min-height: auto; background-color: rgba(255,255,255,0); padding: 15px; margin: 10px; } #info h1 { padding: 10px; border-bottom: 1px solid #999999; } .column { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; padding: 10px;} .column3 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; padding: 10px; } ul.breadcrumb { padding: 0px; } .breadcrumb li { float: left; color: #ffffff; width: 100%; text-decoration: none; padding: 10px 0px 10px 0px; background: #08088A; position: relative; display: block; text-align: center; } .breadcrumb li:after { content: " "; display: block; width: 0; height: 0;border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid #08088A; position: absolute; top: 0%; margin-top: 0px; left: 0px; z-index: 2; } .breadcrumb li:before { content: " "; display: block; width: 0; height: 0;border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid #ffffff; position: absolute; top: 0%; margin-top: 0px; margin-left: 0px; left: 0px; z-index: 1; } .breadcrumb li:first-child { padding-left: 0px;} .mitarbeiter { position: relative; width: 90%; margin: 10px 5% 0px 5%; float: left; overflow: hidden; background: rgba(0,0,0,0.03); } .mitarbeiter p { padding: 0px 10px 0px 0px; margin: 0px 0px 0px 0px; } } /* Smartphones --------------------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 479px) { .hidephone { display:none !important; } .hidescreen { display:inherit !important; } article { width: 100%; } article div { position: relative; float: left; } article div h3 { padding: 10px; } article.teaser { width: 100%; margin: 0px auto; /*background-color: rgba(165,169,207,0.15); background-color: #f3f3f3; */} article.teaser div { position: relative; float: left; padding: 0px; } article.teaser div h2 { padding: 20px; } article.teaser div p { padding: 20px; } .inner { display: inline; width: 90%; margin: 50px 5% 20px 5%; } .innerbase { display: inline; width: 90%; margin: 50px 5% 10px 5%; } .container { display: inline; width: 100%; margin: 100px 0% 0px 0%; padding: 10px 10px 50px 20px; background-color: rgba(247,247,247,0.8)} iframe { width: 80%; margin: 0px 10% 0px 10%; height: 100px; } .target { padding-top: 100px; } .one { width: 100%; height: auto; } .two { width: 100%; height: auto; } .three { width: 100%; height: auto; } .doublethree { width: 100%; height: auto; } .four { width: 100%; height: auto; } .five { width: 100%; height: auto; } .grow00 { min-height: auto; } .grow0 { min-height: auto; } .grow1 { min-height: auto; } .grow2 { min-height: auto; } .grow3 { min-height: auto; } .ligth { background: rgba(0,0,0,0.1); } .deko { padding: 20px 20px 0px 20px;} /* ++++ TYPO ++++ */ h1 { font-size: 1.6em; line-height: 1.7em; font-family: Calibri; color: #002B7F; text-transform: uppercase; } h2 { font-size: 1.2em; line-height: 1.4em; font-family: Calibri; color: #4D4D4D; } h3 { font-size: 1.4em; line-height: 1.4em; font-family: Calibri; color: rgba(27,29,45,1); text-transform: uppercase; padding: 0.7em 0.em 0.7em 0.3em; } p { font-size: 14px; line-height: 1.5em; ; } /* ++++ TONAVI ++++ */ nav { width: 100%; margin: 0px; height: auto; background: rgba(255,255,255,1 ); border-bottom: 1px solid rgba(0,38,77,1); } nav ul { display: none; width: 100%; margin: 0; height: auto; } nav li { display: block; float: none; width: 100%; } nav a { text-align: left; width: 100%; text-indent: 25px; line-height: 35px; } nav a.content { background-color: rgba(0,38,77,1); color: #ffffff; } nav a:hover, nav a:active { background-color: rgba(0,38,77,0.5); color: #ffffff; text-decoration: none; } nav a#pull { display: block; color: rgba(0,38,77,1); background-color: rgba(255,255,255,1); width: 100%; position: relative; } nav a#pull:after { content:""; background: url('../img/icon/menu_h.png') center no-repeat; width: 40px; height: 40px; display: inline-block; position: absolute; right: 15px; top: 10px; } .logo { float: none; width: 200px; padding: 5px 5px 5px 20px; } #sitenav { display:none !important; } /* ++++ TO TOP ++++ */ a#totop { display:none !important; } /* ++++ MAIN ++++ */ #main-top { margin-top: 40px; padding-top: 30px; } #info { position: relative; top: 50px; width: 100%; left: 0%; padding: 0px; background-color: rgba(255,255,255,0.7); -moz-border-radius: 0px; border-radius: 0px; } .infoborder { border: 0px solid #999999; min-height: auto; background-color: rgba(255,255,255,0); padding: 15px; margin: 10px; } #info h1 { padding: 10px; border-bottom: 1px solid #999999; } .column { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; padding: 10px;} .column3 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; padding: 10px; } ul.breadcrumb { padding: 0px; } .breadcrumb li { float: left; color: #ffffff; width: 100%; text-decoration: none; padding: 10px 0px 10px 0px; background: #08088A; position: relative; display: block; text-align: center; } .breadcrumb li:after { content: " "; display: block; width: 0; height: 0;border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid #08088A; position: absolute; top: 0%; margin-top: 0px; left: 0px; z-index: 2; } .breadcrumb li:before { content: " "; display: block; width: 0; height: 0;border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid #ffffff; position: absolute; top: 0%; margin-top: 0px; margin-left: 0px; left: 0px; z-index: 1; } .breadcrumb li:first-child { padding-left: 0px;} .mitarbeiter { position: relative; width: 90%; margin: 10px 5% 0px 5%; float: left; overflow: hidden; background: rgba(0,0,0,0.03); } .mitarbeiter p { padding: 0px 10px 0px 0px; margin: 0px 0px 0px 0px; } }