/*************************************************************/ /* Design: PM-WILDHABER.CH */ /* File: screen.css */ /*-----------------------------------------------------------*/ /* Autor: Thomas Dürig, www.nuun.ch */ /* Datum: Februar 2019 */ /* Site: www.pm-wildhaber.ch */ /*************************************************************/ /* LAYOUT */ /*************************************************************/ /*FARBEN*/ /* dunkel: #30424A mittel: #75797B hell: #F2F2F2 gruen: #99C63E */ /*Cookiebar*/ .contao-cookiebar .cc-inner {max-width: 500px; font-size: 1.5rem; line-height: 1.8rem;} .contao-cookiebar .cc-inner label {line-height: 1.9rem;} .contao-cookiebar .cc-cookies .cc-cookie p {font-size: 1.5rem; line-height: 1.8rem;} .contao-cookiebar .cc-info > p {font-size: 1.2rem; line-height: 1.6rem;} .contao-cookiebar .cc-info > p a {color:#999999; text-decoration: none;} .cc-module {text-align: center; margin-top: 60px;} .cc-module a {color: #75797B;} .content-cookiebar-opener {display: block; margin-bottom:50px;} .content-cookiebar-opener a {display: inline-block; margin-top: 10px; font-family: 'MulishRegular'; text-decoration: none; color: #75797B; padding: 10px 15px; border:1px solid #a6abad; background: none; transition: background 0.3s ease;} .content-cookiebar-opener a:hover {background: #99C63E; color:#30424A;} /* GLOBAL */ /*************************************************************/ html, body {position: relative; height: 100%; width:100%; font: 62.5% "LoraRegular", Arial, Verdana, Helvetica, sans-serif; letter-spacing:0em;} body {font-size:16px; font-size:1.6rem; line-height: 2.4rem; color: #75797B; background-color: #fff;} .invisible {display: none !important;} .schmal50 {width: 50% !important; margin: 1em auto;} .schmal75 {width: 75% !important; margin: 1em auto;} .ce_text a, .content-text a {color: #99C63E; text-decoration: none;} #container hr {border-bottom: none; border-right: none; border-left: none; border-color: #CBCBCB;} /*Backtotop*/ #backtotop {width: 70px; position: fixed; bottom: 45px; right: 20px; cursor: pointer; opacity: 0; z-index: 5000;} #backtotop img {width: 100%;} .mobile {display: none;} body .ccm-root .ccm-modal--body .button.ccm--button-primary, body .ccm-root .ccm-modal--body button.ccm--button-primary, body .ccm-root .ccm-modal--body .button.ccm--button-primary:hover, body .ccm-root .ccm-modal--body .button.ccm--button-primary:focus, body .ccm-root .ccm-modal--body button.ccm--button-primary:hover, body .ccm-root .ccm-modal--body button.ccm--button-primary:focus {color: #fff; background: #41a252; border-color: #41a252;} body .ccm-root .ccm-modal--body .button.ccm--decline-cookies, body .ccm-root .ccm-modal--body button.ccm--decline-cookies, body .ccm-root .ccm-modal--body button.ccm--decline-cookies:hover, body .ccm-root .ccm-modal--body .button.ccm--decline-cookies:hover, body .ccm-root .ccm-modal--body .button.ccm--decline-cookies:focus, body .ccm-root .ccm-modal--body button.ccm--decline-cookies:hover, body .ccm-root .ccm-modal--body button.ccm--decline-cookies:focus {color: #fff; background-color: #b93f43; border-color: #b93f43;} body .ccm-root .ccm-modal--body button.ccm--ctrl-init {background-color: #525252; border: 3px solid #525252;} /* HEADER / NAVIGATION */ /*************************************************************/ #header {height: 150px; position: fixed; z-index: 1000; width: 100%; background: #fff;} #header .inside {position: relative; width: 1160px; margin: 0 auto; border-bottom: 1px solid #CBCBCB; height: 149px;} #header .inside .logo {display: inline-block; float: left; margin-top: 47px;} #header .inside .navigation {float: right; height: 150px;} #header .inside .navigation ul {margin-bottom: 0;} #header .inside .navigation ul.level_1 li {display: inline-block; margin-left: 40px; margin-top: 67px; height: 83px;} #header .inside .navigation ul.level_1 li a, #header .inside .navigation ul.level_1 li .tapsub {font-family: 'MulishBold'; position: relative; color: #30424A; line-height: 1.8rem; padding: 20px 0 44px 0; letter-spacing: 0.7px; display: block; text-transform: uppercase; text-decoration: none; transition: color 0.3s ease;} #header .inside .navigation ul.level_1 > li > span > a:before, #header .inside .navigation ul.level_1 > li > .tapsub:before {content: " "; position: absolute; display: block; height: 1px; background: #99C63E; top: 0; left: 0; width: 0%; transition: width 0.3s ease;} #header .inside .navigation ul.level_1 > li:hover > span > a:before, #header .inside .navigation ul.level_1 > li.active > span > a:before, #header .inside .navigation ul.level_1 > li:hover > .tapsub:before, #header .inside .navigation ul.level_1 > li.trail > .tapsub:before {width: 100%;} #header .inside .navigation ul.level_1 li:hover a, #header .inside .navigation ul.level_1 li.active a, #header .inside .navigation ul.level_1 li.trail a, #header .inside .navigation ul.level_1 li:hover .tapsub, #header .inside .navigation ul.level_1 li.active .tapsub, #header .inside .navigation ul.level_1 li.trail .tapsub {color: #99C63E;} #header .inside .navigation ul.level_2 {visibility: hidden; opacity: 0; position: absolute; padding: 30px; max-width: 350px; background: #30424A; transition: opacity 0.3s ease;} #header .inside .navigation ul.level_1 li:hover ul.level_2 {visibility: visible; opacity: 1;} #header .inside .navigation ul.level_1 li ul.level_2 li {margin-left: 0; margin-top: 5px; height: auto; margin-bottom: 10px; clear: left; float: left;} #header .inside .navigation ul.level_1 li ul.level_2 li a {padding: 0; color: #fff;} #header .inside .navigation ul.level_1 li ul.level_2 li a:hover, #header .inside .navigation ul.level_1 li ul.level_2 li.active a {color: #99C63E;} #mod_nav_mobile {background: #99C63E; font-family: 'MulishRegular'; color: #30424A; z-index: 10000;} #mod_nav_mobile .mm-listview {font-size: 1.6rem;} #mod_nav_mobile .mm-navbar {display: none;} #mod_nav_mobile .mm-panels>.mm-panel {padding-top: 0;} #mod_nav_mobile .mm-listview>li:not(.mm-divider):after {border-color: #30424A;} #mod_nav_mobile .mm-listview .mm-next:before {border-color: #30424A;} #mod_nav_mobile .mm-next:after, .mm-prev:before {border-color: #30424A;} .mm-menu em.mm-counter {color: #30424A;} .mm-panels {padding-top: 0; top: 70px;} #mod_nav_mobile .mm-panels>.mm-panel {padding-top: 0; top: 0px;} .mm-listview .mm-next:before {display: none;} .mm-listview>li:not(.mm-divider):after {display: none;} /*.mm-listview>li, .mm-listview>li .mm-next {background-color: #99C63E;}*/ .mm-menu a.active {font-family: 'MulishMedium';} .mm-vertical>.mm-counter {z-index: 100;} /*.mm-menu ul li {background-color: #99C63E;}*/ .mm-menu ul li .tapsub {color: #30424A !important; background-color: #99C63E;} .mm-menu .mm-listview>li.mm-opened.mm-vertical>.mm-panel, .mm-menu .mm-listview>li.mm-opened.mm-vertical>a.mm-next, .mm-menu.mm-vertical .mm-listview>li.mm-opened>.mm-panel, .mm-menu.mm-vertical .mm-listview>li.mm-opened>a.mm-next {background-color: rgba(0,0,0,0);} /*.mm-menu ul li.mm-opened .tapsub {position: relative; z-index: 100;} .mm-menu ul li.mm-opened em.mm-counter {position: relative; z-index: 150;}*/ .mobilebtn.close {display: block; width: 30px; height: 30px; position: absolute; right: 20px; top: 20px;} .mobilebtn.close img {width: 100%; height: auto;} /*html.mm-right.mm-opened .mm-menu.mm-fx-menu-slide {-webkit-transform: translate(100%,0); -ms-transform: translate(100%,0); transform: translate(100%,0); -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);}*/ /* INHALTSELEMENTE */ /*************************************************************/ /*Container*/ #container {padding-top: 150px;} /*Article*/ .mod_article {padding: 40px 0;} .mod_article .inside {width: 1160px; margin: 0 auto;} .mod_article.grau {background: #F2F2F2;} .mod_article.quote {background: #F2F2F2; padding: 30px 0 20px 0;} .mod_article.quote .inside {padding-left: 200px; width: 930px; min-height: 116px; background: url(../graphics/ico-quote.svg) left top no-repeat; background-size:10%;} .mod_article.quote p {font-size: 2.6rem; line-height: 3.2rem; color: #CBCBCB;} .mod_article.quote blockquote p {font-family: 'MulishRegular'; color: #99C63E; font-size: 1.6rem; line-height: 2.2rem;} body.home .mod_article.dreieck {background: url(../graphics/topdreieck-bg.svg) center no-repeat;} body.home .mod_article.dreieck .rs-column:first-of-type {position: relative;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox, body.home .mod_article.dreieck .rs-column:first-of-type .rte {position: absolute; top: 0; width: 100%; margin-top: 94px;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox p, body.home .mod_article.dreieck .rs-column:first-of-type .rte p {color: #30424A; line-height: 1.8rem;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox h4, body.home .mod_article.dreieck .rs-column:first-of-type .rte h4 {margin-bottom: 5px; margin-top: 18px;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox a, body.home .mod_article.dreieck .rs-column:first-of-type .rte a {text-decoration: none;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox .arrowdown, body.home .mod_article.dreieck .rs-column:first-of-type .rte .arrowdown {height: 19px; width: 40px; margin: 0 auto; background: url(../graphics/down-arrow.svg) center top no-repeat; transition: background 0.3s ease;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox a:hover .arrowdown, body.home .mod_article.dreieck .rs-column:first-of-type .rte a:hover .arrowdown {background: url(../graphics/down-arrow.svg) center top 5px no-repeat;} body.home .mod_article.dreieck .rs-column:last-of-type .textbox, body.home .mod_article.dreieck .rs-column:last-of-type .rte {margin-top: 150px;} body.home .mod_article.dreieck .rs-column:last-of-type .textbox a, body.home .mod_article.dreieck .rs-column:last-of-type .rte a {display: inline-block; margin-top: 10px; font-family: 'MulishBold'; text-decoration: none; color: #30424A; padding: 20px; border:1px solid #30424A; background: none; transition: background 0.3s ease;} body.home .mod_article.dreieck .rs-column:last-of-type .textbox a:hover, body.home .mod_article.dreieck .rs-column:last-of-type .rte a:hover {background: #99C63E;} body.home .mod_article.dreieck .mobiledreieck {display: none;} .mod_article.dreieck {background: url(../graphics/topdreieck-bg-slim.svg) center no-repeat;} .mod_article.dreieck .rs-column:first-of-type {position: relative; text-align: center;} .mod_article.dreieck .rs-column:first-of-type .textbox, .mod_article.dreieck .rs-column:first-of-type .rte {position: absolute; top: 0; width: 100%; margin-top: 135px;} .mod_article.dreieck .rs-column:first-of-type .textbox p, .mod_article.dreieck .rs-column:first-of-type .rte p {color: #30424A; line-height: 1.8rem;} .mod_article.dreieck .rs-column:first-of-type .textbox h4, .mod_article.dreieck .rs-column:first-of-type .rte h4 {margin-bottom: 5px; margin-top: 18px;} .mod_article.dreieck .rs-column:first-of-type .textbox a, .mod_article.dreieck .rs-column:first-of-type .rte a {text-decoration: none;} .mod_article.dreieck .rs-column:first-of-type .textbox .arrowdown, .mod_article.dreieck .rs-column:first-of-type .rte .arrowdown {height: 19px; width: 40px; margin: 0 auto; background: url(../graphics/down-arrow.svg) center top no-repeat; transition: background 0.3s ease;} .mod_article.dreieck .rs-column:first-of-type .textbox a:hover .arrowdown, .mod_article.dreieck .rs-column:first-of-type .rte a:hover .arrowdown {background: url(../graphics/down-arrow.svg) center top 5px no-repeat;} .mod_article.dreieck .rs-column:last-of-type .textbox, .mod_article.dreieck .rs-column:last-of-type .rte {margin-top: 90px;} .mod_article.dreieck .rs-column:last-of-type .textbox a, .mod_article.dreieck .rs-column:last-of-type .rte a {display: inline-block; margin-top: 10px; font-family: 'MulishBold'; text-decoration: none; color: #30424A; padding: 20px; border:1px solid #30424A; background: none; transition: background 0.3s ease;} .mod_article.dreieck .rs-column:last-of-type .textbox a:hover, .mod_article.dreieck .rs-column:last-of-type .rte a:hover {background: #99C63E;} /*Headlines*/ h1, h2 {font-size: 4.5rem; line-height: 5rem; font-family: 'MulishBold'; color: #30424A; text-transform: uppercase;} h3 {font-size: 2.5rem; line-height: 3rem; font-family: 'LoraBold'; color: #30424A;} h4 {font-size: 1.6rem; line-height: 2.1rem; font-family: 'MulishBold'; color: #30424A;} /*Text*/ .image_container img, figure img {max-width: 100%; height: auto;} #container .ce_text {margin-bottom: 30px;} #container .ce_text .image_container.float_left {width: 48.5%; float: left; margin-right: 3%;} #container .ce_text .image_container.float_right {width: 48.5%; float: right; margin-left: 3%;} #container .ce_text.referenz .image_container.float_left {width: 30%; float: left; margin-right: 3%;} #container .ce_text.referenz .image_container.float_right {width: 30%; float: right; margin-left: 3%;} #container .ce_text.bildklein .image_container.float_left {width: 25%; text-align: center; float: left; margin-right: 3%;} #container .ce_text.bildklein .image_container.float_right {width: 25%; text-align: center; float: right; margin-left: 3%;} #container .content-text {margin-bottom: 30px;} #container .content-text.media--left {display: inline-block; width: 100%;} #container .content-text.media--left figure {width: 48.5%; float: left; margin-right: 3%;} #container .content-text.media--right {display: inline-block; width: 100%;} #container .content-text.media--right figure {width: 48.5%; float: right; margin-left: 3%;} #container .content-text.referenz.media--left figure {width: 30%; float: left; margin-right: 3%;} #container .content-text.referenz.media--right figure {width: 30%; float: right; margin-left: 3%;} #container .content-text.bildklein.media--left figure {width: 25%; text-align: center; float: left; margin-right: 3%;} #container .content-text.bildklein.media--right figure {width: 25%; text-align: center; float: right; margin-left: 3%;} #container span.hervorgehoben {border-bottom: 3px solid #E5ECC3; box-shadow: 0 -10px 0 #E5ECC3 inset; text-decoration:none;} body.home #container .content-text a {display: inline-block; margin-top: 10px; font-family: 'MulishRegular'; text-decoration: none; color: #75797B; padding: 7px 10px; border:1px solid #a6abad; background: none; transition: background 0.3s ease;} body.home #container .content-text a:hover {background: #99C63E; color:#30424A;} body.home #container .grau .content-text {margin-bottom: 50px;} /*Hyperlink*/ .content-hyperlink {display: inline-block; width: 100%; text-align: center; margin-bottom:50px;} .content-hyperlink a {display: inline-block; margin-top: 10px; font-family: 'MulishRegular'; text-decoration: none; color: #75797B; padding: 10px 15px; border:1px solid #a6abad; background: none; transition: background 0.3s ease;} .content-hyperlink a:hover {background: #99C63E; color:#30424A;} .content-hyperlink.links a {background: url(../graphics/arrow-left.svg) center left 20px no-repeat; padding: 7px 10px 7px 40px; float: left;} .content-hyperlink.links a:hover {background: #99C63E url(../graphics/arrow-left.svg) center left 10px no-repeat;} .content-hyperlink.rechts a {background: url(../graphics/arrow-right.svg) center right 20px no-repeat; padding: 7px 40px 7px 10px; float: right;} .content-hyperlink.rechts a:hover {background: #99C63E url(../graphics/arrow-right.svg) center right 10px no-repeat;} /*Gallery*/ #container #main .ce_gallery ul {display: flex; justify-content: center; flex-wrap: wrap;} #container #main .ce_gallery ul li {width: 22.75%; margin-right: 3%; margin-bottom: 30px; display: inline-block; float: left; line-height: 1;} #container #main .ce_gallery ul li.col_last, #container #main .ce_gallery ul li:last-of-type {margin-right: 0;} #container #main .ce_gallery ul li figure {width: 100%; overflow: hidden; line-height: 0;} #container #main .ce_gallery ul li figure img {width: 100%; height: auto; -webkit-transition: all .5s ease; transition: all .5s ease;} #container #main .ce_gallery ul li figure:hover img {-webkit-transform: scale(1.1); transform: scale(1.1);} #colorbox #cboxTitle {display: none !important;} #colorbox #cboxCurrent {font-size: 1.5rem;} /*List*/ #main .content-text ul {display: table; margin-bottom: 25px;} #main .content-text ul li {position: relative; vertical-align: middle; list-style: none; padding-left: 15px; /*background: url(../graphics/icon-listbullet.svg) no-repeat top 12px left;*/} #main .content-text ul li:before {content: "-"; padding-right: 10px; position: absolute; left: 0;} #main .content-text ol { counter-reset:li; /* Initiate a counter */ margin-left:0; /* Remove the default left margin */ padding-left:0; /* Remove the default left padding */ } #main .content-text ol > li { position:relative; /* Create a positioning context */ margin:0 0 0 20px; /* Give each list item a left margin to make room for the numbers */ list-style:none; /* Disable the normal item numbering */ } #main .content-text ol > li:before { content:counter(li)"."; /* Use the counter as content */ counter-increment:li; /* Increment the counter by 1 */ /* Position and style the number */ position:absolute; left: -18px; top: 1px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } #main .content-text ol li ul {margin-bottom: 0;} /*Downloads*/ .ce_download.sc.last, .ce_downloads.sc.last {padding-right: 0;} .ce_download, .ce_downloads {position:relative; width:100%; /*margin:0;*/ padding:0;} .ce_download ul, .ce_downloads ul {position:relative; float:left; width:100%; margin:0; padding:0 0 0 0;} .ce_download ul li, .ce_downloads ul li {position:relative; width:100%; line-height:21px; padding:0 0 0 0; border:1px solid #30424A; margin:0 0 5px 0; background:none;} .ce_download img, .ce_downloads img {position:absolute; left:10px; top:7px; z-index:400;} body #container .ce_downloads a, body #container .ce_downloads a:link, body #container .ce_downloads a:visited, body #container .ce_download a, body #container .ce_download a:visited, body #container .ce_download a:link, body #container .enclosure a:link, body #container .enclosure a:visited { position:relative; z-index:300; text-decoration: none; font-size: 1.6rem; font-family: "MulishLight", Arial, Verdana, Helvetica, sans-serif; color: #30424A; display:block; padding:10px 30px 10px 40px; margin:0 0 0 0; transition: background-color 0.5s ease; -webkit-transition: background-color 0.5s ease; } body #container .ce_downloads a:hover, body #container .ce_downloads a:active, body #container .ce_download a:hover, body #container .ce_download a:active {background-color:#99C63E;} /*Form*/ #container .formbody input {-webkit-appearance:none;} #container .formbody button {-webkit-appearance:none;} #container .ce_form {margin-top: 40px; margin-bottom: 30px; width: 50%; margin-right: auto; margin-left: auto;} #container .formbody label {width: 100%; padding-top: 10px; margin-bottom: 5px; font-size: 1.6rem; display: inline-block; float: left;} #container .formbody input {width: 94%; padding:3%; font-size: 1.6rem; margin-bottom: 20px; border:none; background-color: #F2F2F2; transition: background-color 0.3s ease;} #container .formbody textarea {width: 94%; padding:3%; font-size: 1.6rem; border: none; margin-bottom: 20px; background-color: #F2F2F2; transition: background-color 0.3s ease;} #container .formbody .submit {float: right; display: inline-block; margin-top: 10px; font-family: 'MulishRegular'; text-decoration: none; color: #75797B; padding: 10px 15px; border:1px solid #a6abad; background: none; transition: background 0.3s ease; cursor:pointer;} #container .formbody .submit:hover {background: #99C63E; color:#30424A;} #container .formbody select {width: 94%; padding:3%; font-size: 1.6rem; margin-bottom: 20px; border:none; background-color: #F2F2F2; transition: background-color 0.3s ease;} #container .formbody fieldset {margin-bottom: 10px;} #container .formbody fieldset legend {font-size: 1.6rem; margin-bottom: 5px;} #container .formbody fieldset span {width:100%; float: left;} #container .formbody fieldset span input {float: left; width: 5%; height: 26px;} #container .formbody fieldset span label {padding-top: 0; width: 95%;} #container .formbody .explanation p {font-size: 1.6rem; line-height: 1.4em;} #container .formbody .widget-captcha {margin-bottom: 40px;} #container .formbody .widget-captcha input {margin-bottom: 5px;} #container .formbody .widget-captcha span {width: 100%; float: left; font-size: 1.6rem;} #container .formbody .widget-captcha label span.mandatory {width: auto; float: none;} #container .formbody textarea::placeholder, #container .formbody input::placeholder {color: #CBCBCB;} #container .formbody select:focus, #container .formbody textarea:focus, #container .formbody input:focus {outline:none; background-color:rgba(153,198,62,0.35);} /*Columns*/ #container .rs-column.-large-col-2-1 {width: 48.5%; margin-right: 3%;} #container .rs-column.-large-col-2-1.-large-last {margin-right: 0;} #container .rs-column.-large-col-3-1 {width: 31.3%; margin-right: 3%;} #container .rs-column.-large-col-3-1.-large-last {margin-right: 0;} #container .rs-column.-large-col-4-1 {width: 22.75%; margin-right: 3%; margin-top: 0;} #container .rs-column.-large-col-4-1.-large-last {margin-right: 0;} /*YouTube*/ #container .content-youtube {clear: both;} #container .content-youtube embed {width: 100%;} #container .content-youtube video {width: 100%;} #container .content-youtube .me-plugin {width: 100%;} #container .content-youtube .mejs-overlay {width: 100% !important;} /*Google Map*/ .dlh_googlemap {width: 100% !important;} #map {height: 500px;} /* NEWS / TERMINE */ /*************************************************************/ /*.mod_newslist .layout_latest {clear: both; margin-bottom: 30px; padding-top: 20px; border-top: 1px solid #CBCBCB;} .mod_newslist .layout_latest .newsleft {width: 25%; text-align: center; float: left; margin-right: 3%;} .mod_newslist .layout_latest .newsright {width: 72%; float: left;}*/ .mod_newslist .layout_latest {position: relative; width: 31.3%; margin-right: 3%; margin-bottom: 30px; display: inline-block; box-sizing: border-box; float: left; /*border: 1px solid #ECECEC;*/ transition: transform 0.3s ease, box-shadow 0.3s ease;} .mod_newslist .layout_latest:nth-of-type(3n) {margin-right: 0;} .mod_newslist .layout_latest:nth-of-type(3n+1) {clear: left;} .mod_newslist .layout_latest .newsright h4 a {color: #30424A; text-decoration: none;} .mod_newslist p.more a {display: inline-block; margin-top: 10px; font-family: 'MulishRegular'; text-decoration: none; color: #75797B; padding: 7px 10px; border:1px solid #a6abad; background: none; transition: background 0.3s ease;} .mod_newslist p.more a:hover {background: #99C63E;} body #container .content-text.allenews {text-align: right; margin-top: -48px; margin-bottom: 0;} body #container .content-text.allenews a {padding: 0; border: none; font-family: 'LoraRegular';} body #container .content-text.allenews a:hover {background: none; text-decoration: underline;} .mod_newsreader .back a {cursor: pointer; color: #30424A; display: inline-block; font-size: 1.6rem; border:1px solid #30424A; text-transform: uppercase; font-family: 'MulishBold'; letter-spacing: 0.1rem; width: auto; padding: 15px 40px; text-decoration: none; background: none; transition: background 0.3s ease, color 0.3s ease;} .mod_newsreader .back a:hover {background: #99C63E;} .mod_newslist .pagination {font-family: 'MulishRegular'; clear: both; display: block; width: 100%; margin-top: 20px; float: left;} .mod_newslist .pagination p {display: inline-block; float: right;} .mod_newslist .pagination ul {display: inline-block; float: left;} #container #main .mod_newslist .pagination ul li {width: auto; margin-right: 5px; display: inline-block; margin-bottom: 10px;} #container #main .mod_newslist .pagination ul li a, #container #main .mod_newslist .pagination ul li span {padding:7px 0 5px 0; width: 30px; display: block; text-align: center; background: none; border:1px solid #30424A; color: #30302F; text-decoration: none; transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;} #container #main .mod_newslist .pagination ul li a:hover, #container #main .mod_newslist .pagination ul li span.active {background: #99C63E;} #container #main .mod_newslist .pagination ul li.next a, #container #main .mod_newslist .pagination ul li.last a, #container #main .mod_newslist .pagination ul li.first a, #container #main .mod_newslist .pagination ul li.previous a {width: auto; padding: 7px 7px 5px 7px; text-decoration: none;} /* SCIFORMA UPDATES */ /*************************************************************/ #header .content-text {position: absolute; right: 0; top: 20px;} #header .content-text a {color: #30424A; font-family: 'MulishRegular'; font-size: 1.6rem; line-height: 2.2rem; letter-spacing: 0.63px; } .sciformaupdatesite .ihreversion {visibility: hidden;} .sciformaupdates {width: 100%; margin: 0 auto;} .sciformaupdates.mod_newslist .layout_latest {width: 100%; margin: 0 0 50px 0; box-sizing: border-box; padding: 50px 10%; position: relative; overflow: hidden;} .sciformaupdates.mod_newslist .layout_latest.yourversion {background: #F2F2F2;} .sciformaupdates.mod_newslist .layout_latest.yourversion:after {content:"Ihre Version"; color: #30424A; font-family: 'MulishRegular'; visibility: visible; position: absolute; height: 20px; padding: 9px 100px; z-index: 100; right: -70px; top: 40px; background: #99C63E; border-bottom: 5px solid #79983b; transform: rotate(41deg); text-align: center;} .sciformaupdates.mod_newslist .layout_latest .newsleft {display: inline-block; width: 30%; float: left; margin-right: 5%;} .sciformaupdates.mod_newslist .layout_latest .newsleft .image_container {width: 100%; height: 180px; box-sizing: border-box; padding: 20px; border: 1px solid #DCDCDC; margin-top: 105px; background: #fff;} .sciformaupdates.mod_newslist .layout_latest .newsleft .image_container img {width: 100%; height: 100%; object-fit: scale-down;} .sciformaupdates.mod_newslist .layout_latest .newsright {display: inline-block; width: 65%; float: left;} .sciformaupdates.mod_newslist .layout_latest .newsright .info {font-family: 'MulishRegular'; font-size: 1.4rem; line-height: 2.4rem; letter-spacing: 0.35px; color: #75797B;} .sciformaupdates.mod_newslist .layout_latest .newsright .subheadline {font-size: 1.6rem; line-height: 2rem; letter-spacing: 0.4px; color: #30424A; font-family: 'LoraBold';} .sciformaupdates.mod_newslist .layout_latest .newsright h2 {margin-top: 15px; font-size: 3.5rem; line-height: 4rem;} .sciformaupdates.mod_newslist .layout_latest .newsright h2 a {color: #30424A; text-decoration: none;} .sciformaupdates.mod_newslist .layout_latest .newsright .more {display: none;} .sciformaupdates.mod_newslist .layout_latest:nth-of-type(1) .newsright .more {display: block;} .sciformaupdates.mod_newslist .layout_latest:nth-of-type(2) .newsright .more {display: block;} #main .sciformaupdates.mod_newslist .ce_text ul li:before {display: none;} #main .sciformaupdates.mod_newslist .ce_text ul li {background: url(../graphics/sciforma-listicon.svg) center left no-repeat; padding-left: 25px;} #container .layout_full .ce_form {width: 100%;} /* FOOTER */ /*************************************************************/ #footer {height: auto; display: block; clear: both; position: relative; color: #30424A;} #footer strong {font-family: 'MulishBold';} #footer a {color: #30424A; text-decoration: none;} #footer .footertop {background: #99C63E;} #footer .footertop .inside {width: 1160px; margin: 0 auto; padding: 45px 0 30px 0;} #footer .footerbot {background: #fff;} #footer .footerbot .inside {width: 1160px; margin: 0 auto; padding: 20px 0 10px 0;} #footer .footerbot .content-text {display: inline-block; float: left;} #footer .footerbot .content-image {float: right; margin-top: -3px; display: inline-block;} /* LIGHTBOX */ /*************************************************************/ #cboxTitle {display: none !important;} #cboxLoadedContent {border: none;} #cboxNext {background: url("../graphics/lightbox-next.svg"); width: 35px; position: absolute; right: 15px; height: 45px; top: 53%; background-position: center; background-repeat: no-repeat; background-size: contain;} #cboxPrevious {background: url("../graphics/lightbox-prev.svg"); width: 35px; position: absolute; left: 15px; height: 45px; top: 53%; background-position: center; background-repeat: no-repeat; background-size: contain;} #cboxClose {background: url("../graphics/lightbox-close.svg"); width: 35px; position: absolute; right: 15px; top: 15px; height: 35px; background-position: center; background-repeat: no-repeat; background-size: contain;} #cboxCurrent {font-size: 14px;} /* FIXES */ /*************************************************************/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height:0px;} .clearfix {display: block;} /* End hide from IE-mac */ /* MEDIA QUERIES */ /*************************************************************/ @media screen and (max-width: 1250px) { #header .inside {width: 94%; padding-left: 3%; padding-right: 3%;} .mod_article .inside {width: 94%; padding-left: 3%; padding-right: 3%;} #footer .footertop .inside {width: 94%; padding-left: 3%; padding-right: 3%;} #footer .footerbot .inside {width: 94%; padding-left: 3%; padding-right: 3%;} #header .inside .navigation ul.level_1 li {font-size: 1.5rem; margin-left: 30px;} .mod_article.dreieck h1 {font-size: 3rem; line-height: 3.5rem;} .mod_article.quote .inside {padding-left: 19%; width: 77%; background: url(../graphics/ico-quote.svg) left 1.5% top no-repeat; background-size: 16%;} .mod_article.quote p {font-size: 2rem; line-height: 2.5rem;} } @media screen and (max-width: 1250px) and (min-width: 1000px) { body.home .mod_article.dreieck .rs-column:first-of-type .textbox, body.home .mod_article.dreieck .rs-column:first-of-type .rte {margin-top: 7.1vw;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox h4, body.home .mod_article.dreieck .rs-column:first-of-type .rte h4 {margin-top: 2vw; margin-bottom: 0.4vw; font-size: 1.3vw; line-height: 1.9vw;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox p, body.home .mod_article.dreieck .rs-column:first-of-type .rte p {font-size: 1.3vw; line-height: 1.3vw; margin-bottom: 0.6vw;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox .arrowdown, body.home .mod_article.dreieck .rs-column:first-of-type .rte .arrowdown {height: 1.5vw; background-size: contain; margin-bottom: 0.7vw; width: 2vw;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox a:hover .arrowdown, body.home .mod_article.dreieck .rs-column:first-of-type .rte a:hover .arrowdown {background-size: contain;} body.home .mod_article.dreieck .rs-column:last-of-type .textbox, body.home .mod_article.dreieck .rs-column:last-of-type .rte {margin-top: 100px;} #header .content-text {right: 3%;} } @media screen and (max-width: 1000px) { body.home .desktop {display: none;} body.home .mobile {display: block !important;} body.home #container .mod_article.dreieck .rs-column {width: 100%; margin: 0;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox h4, body.home .mod_article.dreieck .rs-column:first-of-type .rte h4 {margin-top: 29px;} #header .navigation {display: none;} .nuunnavbutton {display: block; width: 36px; height: 36px; float: right; margin-top: 24px; background: url(../graphics/btn-mobile.svg) center no-repeat; background-size: contain;} #header {height: 85px;} #header .inside {height: 84px;} #header .inside .logo {width: 160px; margin-top: 20px;} #header .content-text {right: 13%; top: 29px;} #container {padding-top: 85px;} .desktop {display: none;} .mobile {display: block !important;} h1, h2 {font-size: 3rem; line-height: 3.5rem;} h3 {font-size: 2rem; line-height: 2.5rem;} h4 {font-size: 1.6rem; line-height: 2.1rem;} #container .mod_article.dreieck .rs-column {width: 100%; margin: 0;} #footer .rs-column.-large-col-4-1 {width: 48.5%; margin-right: 3%; margin-top: 0;} #footer .rs-column.-large-col-4-1:nth-of-type(2n) {margin-right: 0;} #container .rs-column.-large-col-4-1 {width: 48.5%; margin-right: 3%; margin-top: 0;} #container .rs-column.-large-col-4-1:nth-of-type(2n) {margin-right: 0;} #container {padding-top: 115px;} #main .mod_article.first {padding-top: 0;} .mod_article.dreieck {padding-bottom: 0;} .sciformaupdates.mod_newslist .layout_latest {padding: 50px 3%;} .sciformaupdates.mod_newslist .layout_latest .newsleft {width: 100%; max-width: 500px;} .sciformaupdates.mod_newslist .layout_latest .newsleft .image_container {margin-top: 0;} .sciformaupdates.mod_newslist .layout_latest .newsright {width: 100%;} } @media screen and (max-width: 670px) { body.home .mod_article.dreieck .rs-column:first-of-type .textbox, body.home .mod_article.dreieck .rs-column:first-of-type .rte {margin-top: 17vw;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox h4, body.home .mod_article.dreieck .rs-column:first-of-type .rte h4 {margin-top: 5.5vw; margin-bottom: 1vw; font-size: 2.7vw; line-height: 3.4vw;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox p, body.home .mod_article.dreieck .rs-column:first-of-type .rte p {font-size: 2.4vw; line-height: 3.1vw; margin-bottom: 1.6vw;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox .arrowdown, body.home .mod_article.dreieck .rs-column:first-of-type .rte .arrowdown {height: 3vw; background-size: contain; margin-bottom: 4.3vw; width: 5vw;} body.home .mod_article.dreieck .rs-column:first-of-type .textbox a:hover .arrowdown, body.home .mod_article.dreieck .rs-column:first-of-type .rte a:hover .arrowdown {background-size: contain;} body.home .mod_article.dreieck .desktopdreieck {display: none;} body.home .mod_article.dreieck .mobiledreieck {display: block;} body.home .mod_article.dreieck {background: url(../graphics/topdreieck-bg-cut.svg) center no-repeat;} #container .rs-column.-large-col-2-1 {width: 100%; margin-right: 0; margin-top: 0;} #container .rs-column.-large-col-3-1 {width: 100%; margin-right: 0; margin-top: 0;} #container .rs-column.-large-col-4-1 {width: 100%; margin-right: 0; margin-top: 0;} #footer .rs-column.-large-col-4-1 {width: 100%; margin-right: 0; margin-top: 0;} .schmal75 {width: 100% !important; margin: 0 auto;} .schmal50 {width: 100% !important; margin: 0 auto;} h1, h2 {font-size: 2.5rem; line-height: 3rem;} #container .ce_form {width: 100%;} .mod_newslist .layout_latest {width: 100%; margin-right: 0; margin-bottom: 30px;} .mod_newslist .layout_latest .newsbild {height: 60vw;} .mod_newslist .layout_latest .newsleft {width: 100%; margin: 0 0 30px 0;} .mod_newslist .layout_latest .newsright {width: 100%; margin: 0 0 30px 0;} #container .ce_text .image_container.float_left {width: 100%; margin: 0 0 30px 0;} #container .ce_text .image_container.float_right {width: 100%; margin: 0 0 30px 0; float: left;} #container .ce_text.bildklein .image_container.float_left {width: 100%; margin: 0 0 30px 0;} #container .ce_text.bildklein .image_container.float_right {width: 100%; margin: 0 0 30px 0;} #container .ce_text.referenz .image_container.float_left {width: 100%; margin: 0 0 30px 0; text-align: center;} #container .ce_text.referenz .image_container.float_right {width: 100%; margin: 0 0 30px 0; text-align: center;} #container .content-text.media--left figure {width: 100%; float: left; margin-right: 0%;} #container .content-text.media--right figure {width: 100%; float: right; margin-left: 0%;} #container .content-text.referenz.media--left figure {width: 100%; float: left; margin-right: 0%;} #container .content-text.referenz.media--right figure {width: 100%; float: right; margin-left: 0%;} #container .content-text.bildklein.media--left figure {width: 100%; float: left; margin-right: 0%;} #container .content-text.bildklein.media--right figure {width: 100%; float: right; margin-left: 0%;} } @media screen and (max-width: 470px) { .mod_article.dreieck .rs-column:first-of-type .textbox, .mod_article.dreieck .rs-column:first-of-type .rte {margin-top: 28vw;} .mod_article.dreieck .rs-column:first-of-type .textbox img, .mod_article.dreieck .rs-column:first-of-type .rte img {width: 23vw;} .mod_article.dreieck .rs-column:first-of-type .textbox h4, .mod_article.dreieck .rs-column:first-of-type .rte h4 {margin-top: 3vw; font-size: 3.5vw;} } /* FONTS */ /*************************************************************/ @font-face { font-family: 'MulishItalic'; src: url('Fonts/Mulish-Italic.woff2') format('woff2'), url('Fonts/Mulish-Italic.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'MulishBlack'; src: url('Fonts/Mulish-Black.woff2') format('woff2'), url('Fonts/Mulish-Black.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MulishBold'; src: url('Fonts/Mulish-Bold.woff2') format('woff2'), url('Fonts/Mulish-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'MulishSemiBold'; src: url('Fonts/Mulish-SemiBold.woff2') format('woff2'), url('Fonts/Mulish-SemiBold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MulishRegular'; src: url('Fonts/Mulish-Regular.woff2') format('woff2'), url('Fonts/Mulish-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MulishMedium'; src: url('Fonts/Mulish-Medium.woff2') format('woff2'), url('Fonts/Mulish-Medium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MulishLight'; src: url('Fonts/Mulish-Light.woff2') format('woff2'), url('Fonts/Mulish-Light.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LoraSemiBold'; src: url('Fonts/Lora-SemiBold.woff2') format('woff2'), url('Fonts/Lora-SemiBold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LoraItalic'; src: url('Fonts/Lora-Italic.woff2') format('woff2'), url('Fonts/Lora-Italic.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'LoraBold'; src: url('Fonts/Lora-Bold.woff2') format('woff2'), url('Fonts/Lora-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'LoraRegular'; src: url('Fonts/Lora-Regular.woff2') format('woff2'), url('Fonts/Lora-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LoraMedium'; src: url('Fonts/Lora-Medium.woff2') format('woff2'), url('Fonts/Lora-Medium.woff') format('woff'); font-weight: normal; font-style: normal; }