/* ============================================================================= * reset & defaults * ========================================================================== */ /* --reset ------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;} * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;} body, input, textarea, select, button {text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern";} ol, ul {list-style: none;} table {border-spacing: 0;} html {-webkit-font-smoothing: antialiased;} article, aside, figure, footer, header, hgroup, nav, section {display:block;} nav ul {list-style:none;} a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;} table {border-collapse:collapse; border-spacing:0;} input, select {vertical-align:middle;} input[type="radio"] {vertical-align: text-bottom;} input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;} .clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both} /* --float classes ------------------------------------------------- */ .float-left {float: left;} .float-right {float: right;} /* --lightbox link height ------------------------------------------------- */ .image_container a {line-height: 0;} /* --lightbox width ------------------------------------------------- */ #mbCenter img {width: auto; max-width: 100%; height: auto; vertical-align: middle;} /* --clearings + defaults ------------------------------------------------- */ .inside{position:relative;text-align:left} .block{overflow:hidden} .clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both} .invisible{width:0;height:0;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline} .custom{display:block;text-align:left} .custom:after{content:".";display:block;height:0;clear:both;visibility:hidden} *+html #main{position:static} header,footer,nav,section,aside,article,figure,figcaption{display:block} #container:after, #header:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;} .image_container img {display: block;} /* ============================================================================= * COLUMNS FOR BETTER CONTENT SEPARATION - RESPONSIVE * ========================================================================== */ .full {overflow: hidden; margin-left: 0; width:100%; float:left; position:relative;} .one_half {overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative;} .one_third {overflow: hidden; margin-left: 5%; width:30%; float:left; position:relative;} .two_third {overflow: hidden; margin-left: 5%; width:65%; float:left; position:relative;} .one_fourth {overflow: hidden; margin-left: 4%; width:22%; float:left; position:relative;} .two_fourth {overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative;} .three_fourth {overflow: hidden; margin-left: 4%; width:74%; float:left; position:relative;} .one_fifth {overflow: hidden; margin-left: 5%; width:16%; float:left; position:relative;} .two_fifth {overflow: hidden; margin-left: 4%; width:37%; float:left; position:relative;} .three_fifth {overflow: hidden; margin-left: 4%; width:57%; float:left; position:relative;} .four_fifth {overflow: hidden; margin-left: 4%; width:79%; float:left; position:relative;} .one_sixth {overflow: hidden; margin-left: 4%; width:13%; float:left; position:relative;} .two_sixth {overflow: hidden; margin-left: 5%; width:30%; float:left; position:relative;} .three_sixth {overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative;} .four_sixth {overflow: hidden; margin-left: 5%; width:65%; float:left; position:relative;} .five_sixth {overflow: hidden; margin-left: 4%; width:83%; float:left; position:relative;} .full.first, .one_half.first, .one_third.first, .two_third.first, .one_fourth.first, .two_fourth.first, .three_fourth.first, .one_fifth.first, .two_fifth.first, .three_fifth.first, .four_fifth.first, .one_sixth.first, .two_sixth.first, .three_sixth.first, .four_sixth.first, .five_sixth.first { margin-left: 0!important; clear: left;} /* ============================================================================= * BASICS * ========================================================================== */ #container {clear: both; margin: 0 auto; position: relative;} a {text-decoration: none;} blockquote {font-style: italic; font-size: 16px; margin-bottom: 20px;} blockquote p {line-height: 22px;} iframe {max-width: 100%;} #container .image_container img {width: 100%;} code, pre {font-family: monospace;} hr {padding: 0; border: none; border-top: medium double #ddd; color: #ccc; text-align: center; height: 1px; margin: 25px 0;} img {max-width: 100%; height: auto; -ms-interpolation-mode: bicubic;} h1, h2, h3, h4, h5, h6 {line-height: 1.4;} h1 {font-size: 36px; margin-bottom: 30px;} h2 {font-size: 30px; margin-bottom: 16px;} h3 {font-size: 26px; margin-bottom: 14px;} h4 {font-size: 22px; margin-bottom: 12px;} h5 {font-size: 20px; margin-bottom: 10px;} h6 {font-size: 18px; margin-bottom: 10px;} p, a, span, input, textarea, li {font-size: 18px; line-height: 1.2;} #topbar .inside, #header .kopfzeile, #container .mod_article, #footer .inside, #prefooter .prefooter-content, #container .mod_article.fullwidth .inhalt, .programm-hersteller #container .inside { max-width: 1200px; width: 100%; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container .mod_article.fullwidth { max-width: 100%; width: 100%; } #wrapper {width: 100%;} .ce_gallery .cols_1 li {overflow: hidden; margin-left: 0; width:100%; float:left; margin-bottom: 40px;} .ce_gallery .cols_2 li {overflow: hidden; margin-left: 4%; width:48%; float:left; margin-bottom: 30px;} .ce_gallery .cols_3 li {overflow: hidden; margin-left: 5%; width:30%; float:left; margin-bottom: 20px;} .ce_gallery .cols_4 li {overflow: hidden; margin-left: 4%; width:22%; float:left; margin-bottom: 15px;} .ce_gallery .cols_5 li {overflow: hidden; margin-left: 5%; width:16%; float:left; margin-bottom: 15px;} .ce_gallery .cols_6 li {overflow: hidden; margin-left: 2%; width:15%; float:left; margin-bottom: 15px;} .ce_gallery .cols_7 li {overflow: hidden; margin-left: 1.5%; width:13%; float:left; margin-bottom: 15px;} .ce_gallery .cols_8 li {overflow: hidden; margin-left: 1.71%; width:11%; float:left; position:relative;} .ce_gallery .cols_9 li {overflow: hidden; margin-left: 1.25%; width:10%; float:left; position:relative;} .ce_gallery .cols_10 li {overflow: hidden; margin-left: 1%; width:9.1%; float:left; position:relative;} .ce_gallery .cols_11 li {overflow: hidden; margin-left: 1.1%; width:8.09%; float:left; position:relative;} .ce_gallery .cols_12 li {overflow: hidden; margin-left: 1%; width: 7.41%; float:left; position:relative;} .ce_gallery li:first-child {margin-left: 0!important; clear: both;} .ce_gallery img {width: 100%; display: block; height: auto;} .ce_gallery li a img:hover {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity:.5;} .ce_gallery li a img {-webkit-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; transition:all .4s ease-in-out;} .ce_gallery .caption {letter-spacing: 0; word-spacing: 0; font-size: 12px; line-height: 16px;}*/ .image_container {position: relative; padding: 0;} .image_container img {width: 100%; display: block; height: auto;} .image_container.float_right {float: right;width: 30%;} .image_container.float_left {float: left;width: 30%;} .ce_text ul, .ce_list ul, .ce_text ol, .ce_list ol {margin-bottom: 15px;} .ce_text li, .ce_list li, .ce_text ol, .ce_list ol {line-height: 1.5em;} .ce_text ol, .ce_list ol {list-style: decimal; padding-left: 25px;} .ce_text ol ol, .ce_list ol ol {list-style: upper-alpha;} .ce_text ol ol ol, .ce_list ol ol ol {list-style: lower-roman;} label.error {color: red;} input.error {border: 1px solid red;} p.error {color: red; clear: both;} /* ============================================================================= * MEDIA QUERIES * ========================================================================== */ /* --tablets ------------------------------------------------- */ @media only screen and (max-width: 1240px) { /* body */ body {padding: 0;} /* width */ #topbar .inside, #header .kopfzeile, #container .mod_article, #footer .inside, #prefooter .prefooter-content, #container .mod_article.fullwidth .inhalt, .programm-hersteller #container .inside { width: 100%!important; padding: 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container {width: 100%;} } /* --phones ------------------------------------------------- */ @media only screen and (max-width: 767px) { /* body */ body {padding: 0;} /* wrapper */ #wrapper {width: 100%;} /* image_container */ .ce_image .image_container {margin-bottom: 10px; width: 100%; padding: 0; margin: 0 0 10px 0; float: none;} /* ce_text */ .ce_text {margin-bottom: 10px; width: 100%;} /* disable webkit text size adjust (for iPhone) */ html {-webkit-text-size-adjust: none;} /* css-framework */ .full, .one_half, .one_third, .two_third, .one_fourth, .two_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth {width: 100%; margin: 0 0 10px 0;} /* extension subcolumns */ .c20r, .c25r, .c33r, .c40r, .c38r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r, .c15r, .c16r, .c30r, .c45r, .c55r, .c70r, .c85r, .c20l, .c25l, .c33l, .c40l, .c38l, .c50l, .c60l, .c66l, .c62l, .c75l, .c80l, .c15l, .c16l, .c30l, .c45l, .c55l, .c70l, .c85l {float: none; width: 100%; padding: 0; margin: 0;} .subcr, .subcl, .subc {padding: 0!important;} /* ce_gallery */ .ce_gallery .cols_2 li, .ce_gallery .cols_3 li, .ce_gallery .cols_4 li, .ce_gallery .cols_5 li, .ce_gallery .cols_6 li, .ce_gallery .cols_7 li, .ce_gallery .cols_8 li, .ce_gallery .cols_9 li, .ce_gallery .cols_10 li, .ce_gallery .cols_11 li, .ce_gallery .cols_12 li {overflow: hidden; margin-left: 4% !important; width:48%; float:left; margin-bottom: 30px; clear: none !important;} .ce_gallery .cols_2 li:nth-child(2n-1), .ce_gallery .cols_3 li:nth-child(2n-1), .ce_gallery .cols_4 li:nth-child(2n-1), .ce_gallery .cols_5 li:nth-child(2n-1), .ce_gallery .cols_6 li:nth-child(2n-1), .ce_gallery .cols_7 li:nth-child(2n-1), .ce_gallery .cols_8 li:nth-child(2n-1), .ce_gallery .cols_9 li:nth-child(2n-1), .ce_gallery .cols_10 li:nth-child(2n-1), .ce_gallery .cols_11 li:nth-child(2n-1), .ce_gallery .cols_12 li:nth-child(2n-1), .ce_gallery .cols_2 li.nth-child-2n-1, .ce_gallery .cols_3 li.nth-child-2n-1, .ce_gallery .cols_4 li.nth-child-2n-1, .ce_gallery .cols_5 li.nth-child-2n-1, .ce_gallery .cols_6 li.nth-child-2n-1, .ce_gallery .cols_7 li.nth-child-2n-1, .ce_gallery .cols_8 li.nth-child-2n-1, .ce_gallery .cols_9 li.nth-child-2n-1, .ce_gallery .cols_10 li.nth-child-2n-1, .ce_gallery .cols_11 li.nth-child-2n-1, .ce_gallery .cols_12 li.nth-child-2n-1 {margin-left: 0!important; clear: both !important;} /* headlines */ h1 {font-size: 32px; margin-bottom: 25px;} h2 {font-size: 26px; margin-bottom: 18px;} h3 {font-size: 22px; margin-bottom: 12px;} h4 {font-size: 18px; margin-bottom: 10px;} h5 {font-size: 16px; margin-bottom: 10px;} h6 {font-size: 14px; margin-bottom: 10px;} } @media only screen and (max-width: 500px) { /* ce_gallery */ .ce_gallery .cols_1 li, .ce_gallery .cols_2 li, .ce_gallery .cols_3 li, .ce_gallery .cols_4 li, .ce_gallery .cols_5 li, .ce_gallery .cols_6 li, .ce_gallery .cols_7 li, .ce_gallery .cols_8 li, .ce_gallery .cols_9 li, .ce_gallery .cols_10 li, .ce_gallery .cols_11 li, .ce_gallery .cols_12 li {width: 100%; margin-left: 0 !important;} }