:root {
/* Document Font size, the rest font sizes will be set with REM and depend on this setting */
font-size: 16px;
/* CSS Vars | need to be suplemented for IE11 */
--high-emphasize: #001F28;
--medium-emphasize: #506F79;
--low-emphasize: #6B919C;
--deemphasize: #90ADB5;
--comp-blue: #009BC9;
--comp-yellow: #F0CA00 ;
--comp-yellow-light: rgba(255, 215, 0, 0.5);
--light-grey: #DAE3E6;
--bg-1: #EFF4F6;
}
@media screen and (max-width: 786px) {
}
@media screen and (min-width: 786px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1440px) {
}
.wpedit { position:fixed; top:0; left:10px; z-index: 100;}
.wpedit a { color: white; display:block; padding:20px 15px; background-color: var(--high-emphasize); border: 1px solid var(--medium-emphasize); border-radius: 10px !important; }
.wpedit a i { padding: 0 10px 0 0 !important; }
.bg-1 { background-color: var(--bg-1); /*padding-left:64px; padding-right:64px;*/}
.bg-dark { background-color: var(--high-emphasize);}
.bg-dark * { color:white;}
.bg-image h2 { color:white;}
.bg-image .tag { color: var(--low-emphasize);}
.s.bg-image { padding-left:32px; padding-right:32px; background-size: cover;}
/* Basic Settings */
html, body { font-family: 'Mulish', sans-serif;
font-size: 1.125rem; /*18px*/
line-height:1.688rem /*27px*/;
color: #001F28 /* Demonstrating IE11 Problems */ ;
color: var(--high-emphasize);
box-sizing: border-box;
line-height: 1.25rem;
}
body * {
box-sizing: border-box;
}
/* Core Block Elements */
/*.s { padding-top:32px; padding-bottom:32px;}*/
.s { padding-top:64px; padding-bottom:64px;}
.r { padding-left: 0; padding-right:0;}
.c { padding-top:20px; padding-bottom:20px; }
.c img { width:100%; height:auto;}
p { line-height: 150%;}
.main { overflow: hidden;}
/*****************************************************
*
* Header , Logo, Helper Nav & Main Navigation
*
******************************************************/
/* Header Basics */
#header { height: 130px; background: #fff; position: absolute; width: 100%; z-index: 10; top: 0; left:0; }
#header.fixed { height: 90px; position: fixed; width: 100%; top: 0; left:0; box-shadow: 0 2px 20px 0 rgba(0,0,0,0.15);}
.navigationwrapper { padding:0 16px; justify-content:space-between; align-items: center; padding-top: 48px;}
.headerspacer { height:130px; position: relative;}
/*#header nav { margin-top:40px;}*/
@media screen and (max-width: 786px) {
#header { height:90px;}
.headerspacer { height:90px;}
}
@media screen and (min-width: 786px) {
.headerspacer { height:64px;}
}
@media screen and (min-width: 992px) {
.headerspacer { height:64px;}
}
@media screen and (min-width: 1200px) {
.headerspacer { height:64px;}
}
@media screen and (min-width: 1440px) {
.headerspacer { height:64px;}
}
/* Helper Nav | Top Nav | Icons */
.topnav { position: relative;}
.helpernav { position:absolute; right:-5px; top:0; width:auto; height:30px; padding:0 20px 6px 20px; text-align: center; }
.helpernav a { display:inline-block; padding: 10px 16px 5px 16px; color: var(--low-emphasize); font-size: 0.875rem /*14px*/; }
.helpernav a .fal { padding-right: 4px; }
.fixed .helpernav { display:none;}
.fal.mn_foldericon { display:none;}
/***************
*
* Logo
*
***************/
.logocontainer { position:relative; }
.btn_logo { position:relative; display:block; height:auto; width:200px; }
#logo { position:absolute; display:block; max-width:120px; width: 100%; margin-top: -16px; }
/* Logo Position */
@media screen and (max-width: 786px) {
/*.btn_logo { width:200px; }
/*#logo { top:11px; left:10px; }*/
}
@media screen and (min-width: 786px) {
/*.btn_logo { width:200px; }
.navwrapper { padding-top:32px;}
/*#logo { top:10px; left:0; }*/
}
@media screen and (min-width: 992px) {
/*.btn_logo { width:220px; }
/*#logo { top:-52px; left:0; }*/
/*.navwrapper { padding-top:32px;}*/
}
@media screen and (min-width: 1200px) {
/*.btn_logo { width:200px; }
.navwrapper { padding-top:0;}
/*#logo { top:-52px; }
.fixed #logo { top:-64px; }*/
}
@media screen and (min-width: 1440px) {
/*.btn_logo { width:253px; }
.fixed .btn_logo { width:200px; }
/*#logo { top:-52px; }
.fixed #logo { top:-62px; }*/
}
/* Navigation & Submenues */
#header .c { transition: padding .2s; }
#mn { position: relative; margin: 0; font-weight: bold; color: var(--high-emphasize); padding-left:0; }
#mn li { list-style: block; display: inline-block; }
#mn li a { display: block; padding: 16px; text-decoration: none; color: var(--high-emphasize); transition: all 0.2s; font-size:1rem; }
#mn li:hover > a { color: var(--comp-blue); }
#mn li:hover > a + i { color: var(--comp-blue); }
#mn > li.menu-item-has-children > a:after { content:'\f107'; font-family: "Font Awesome 5 Pro"; font-weight: 200; color: var(--high-emphasize); padding: 0 0 0 10px;}
#mn > li.menu-item-has-children > a:hover:after { color: var(--comp-blue);}
#mn > li.menu-item-has-children > a.mn_active:after { content:'\f106';}
/*.scrolled #header .c { padding-top: 0; padding-bottom: 0; }
.scrolled #logo { width: 180px; margin: 10px 0; }*/
#mobilenav { display: none; }
#mobilesearch { display: none; }
/* 2te Ebene */
#mn li ul.sub-menu { display: none; /*flex-direction: row; flex-wrap: wrap; */position: absolute; z-index: 2; background: #fff; width: auto; min-width:200px; padding: 0 0 0 0; margin: 0; box-shadow: 0px 9px 20px rgba(80, 111, 121, 0.18), 0px 1.12694px 2.50431px rgba(80, 111, 121, 0.09); border-radius: 4px; }
#mn li ul.sub-menu li { display: block; }
#mn li ul.sub-menu a { font-size: 1rem; color: var(--medium-emphasize); font-weight: normal; }
/*#mn li a.mn_active + i + ul.sub-menu { display: flex; }
#mn li li { flex: 50%; width:70px; margin: 0; padding: 0; border-bottom: 0; }
*/
/*#mn .sub-menu a::before { content: '\f101'; font-family: "Font Awesome 5 Pro"; padding-right:10px; padding-left:5px; font-display:swap;}*/
/*#mn li li a:hover
*/
#mn .current-menu-parent > a,
#mn .current-menu-item > a { color: var(--comp-blue) !important;}
#mn li li.current-menu-item > a { background: #f0f0f0; }
#mn li li:hover a { background: #f0f0f0; }
#header .r + .r { margin-top:0;}
#header .c.helper_extra { padding-top:0 !important; padding-bottom:0; height:0;}
/* Searchbox in Navigation */
@media screen and (min-width: 786px) {
/* Show | Hide Elements for normal nav */
.fal.mn_foldericon { display:none;}
#mn .headersearch { display:block; } /* Searchbox in Mobile Nav */
#header .topnav { display:block; } /* Helpernav / Topnav in Mobile View */
#mn li.mobile_helper { display:none;}
.navigationwrapper { display: block;}
#mn { padding-right:0; width:100%; top:30px;}
.fixed #mn { top:0;}
#mn > li:first-child a { padding-left:0;}
#header .searchbox { width:185px;right:0;}
#header .searchbox input{ width:calc(185px - 44px) ;}
#header.fixed { height: 130px;}
#header.fixed .navigationwrapper { display: flex;}
#header.fixed #mn { width:auto; /*padding-right:calc(200px + 32px);*/ padding-right:0;}
#header.fixed .searchbox:not(.sb_active) { width:200px;}
#header.fixed .searchbox input{ width:calc(200px - 44px) ;}
#header.fixed #mn { margin-top:0;}
#mn li:hover ul.sub-menu { display: block; }
}
@media screen and (min-width: 992px) {
.navigationwrapper { display: flex;}
#mn { top:0;}
#mn > li:first-child a { padding-left:16px;}
}
@media screen and (min-width: 1200px) {
#header.fixed { height: 100px;}
.navigationwrapper { display: flex;}
#mn { width:auto; padding-right:0;}
#header .searchbox { width:200px;}
#header .searchbox input{ width:calc(200px - 44px) ;}
#header.fixed #mn { margin-top:-20px;}
#header.fixed #logo { margin-top: -25px;}
}
@media screen and (min-width: 1440px) {
.navigationwrapper { display: flex;}
#mn { padding-right:0;}
#header .searchbox { width:220px;}
#header .searchbox input { width:calc(220px - 44px) ;}
}
/* mobile Nav*/
.highlight a {
transition: all .3s ease;
display: inline-block;
text-align: center;
border-radius: 50px;
text-decoration: none;
padding:12px 24px !important;
cursor: pointer;
background-color: white;
border: 1px solid var(--comp-yellow);
}
.highlight a:before { content: '\f1d8'; font-family: "Font Awesome 5 Pro"; padding-right: 10px; color: var(--medium-emphasize); font-weight: 300; }
@media only screen and (max-width: 768px){
#mn li a { font-size: 1.5rem; padding: 16px; }
#mn li ul.sub-menu a { font-size: 1.5rem; padding: 16px; }
#mn li.highlight { padding-top:16px; padding-bottom:16px; }
#mn li.highlight a { display:inline-block; border:none; color: var(--low-emphasize); padding: 16px !important; font-size: 1em;}
.helpernav { display: block;}
.highlight a:before { display:none;}
.highlight .fal { display:none;}
/*#mn li:hover ul.sub-menu { display: inherit !important; }*/
}
@media only screen and (min-width: 768px){
/*hide other buttons*/
#mn li.highlight a{ display: none; }
#mn li.highlight a:first-child{ display: block; }
}
/*****************************
*
* Mobile Navigation
*
****************************/
@media screen and (max-width: 786px) {
/*@media screen and (min-width: 7860px) {*/
/* Show | Hide elements for mobile nav */
.fal.mn_foldericon { display:block;}
#mn .headersearch { display:none; } /* Searchbox in Mobile Nav */
#header .topnav { display:none; } /* Helpernav / Topnav in Mobile View */
#mn li.mobile_helper { display:block; border-top:none;}
.logocontainer { position: absolute; top: 0;}
.logocontainer #logo { margin:26px 16px;}
/*#mn li:last-child a { display: block; }*/
#header { position: absolute; }
/*#header .col-sm-9 { margin-top: -80px; }*/
#mobilenav { z-index: 1000; display: block; position: absolute; top: 0; right: 0; font-size: 24px; padding: 32px; line-height: 1; }
#mn { display: none; text-align: left; padding: 0; margin: 0; margin-top: 1em; }
#mn > li { display: block; border-bottom: 1px solid var(--light-grey); }
#mn li a { padding: 1em 1em; }
/*#mn > li.mobile_nav_parent > a { color: var();}*/
/* Menüs */
.navigationwrapper { display: block; padding:0; }
.navwrapper { padding: 0; position:relative; width:100%;}
#header nav { margin-top: 80px; padding-top:0; position: relative; }
#mn > li.menu-item-has-children > a:after { content:''; display:none;}
#mn li ul.sub-menu { /*display: none; */position:relative; box-shadow: none; border-top: 1px solid var(--light-grey); padding: 0; padding:16px 0; }
#mn li ul.sub-menu li { width:100%; }
#mn { margin-top:0; background:white;}
#mn li { position: relative; }
#mn li ul {/* position: relative;*/ }
#mn .sub-menu a { font-size: 1rem; display:block; /*font-size: 0.875rem;*/ }
#mn a .description { font-size: 1rem; display:block; padding-top:8px; /*font-size: 0.875rem;*/ }
/*#mn > li > a:hover, .current-menu-item > a { border-bottom: none !important; background-color: #dcdcdc; }*/
/*#mn li:hover ul { display:none;}*/
/* Display on small screens */
#mn .fal { font-size:20px; position:absolute; right:25px; top:1px; padding:12px; z-index: 10; }
#mn li.mobile_helper .helpernav { text-align: left; position:relative; padding:0; height:auto; left:0; top:0;}
}
/*******************************
* End of Navigation
*******************************/
/* Basic Fonts | Headlines | Normal Padding & Margins */
h1, h2, h3, h4, h5, h6,
.likeh1, .likeh2, .likeh3, .likeh4, .likeh5, .likeh6 { color: var(--high-emphasize); font-family: 'Nimbus Sans L', sans-serif; padding:0; margin:0;}
h1.upscale { font-size: 3rem /*48px*/; line-height: 3.875rem /*62px*/; font-weight: bold; }
h1, .likeh1 { font-size: 3rem /*48px*/; line-height: 3.875rem /*62px*/; font-weight: bold; }
h1.notused { font-size: 2.375rem /*38px*/ ; line-height: 3.063rem /*49px*/; font-weight: bold; }
h2, .likeh2 { font-size: 2rem /*32px*/ ; line-height: 2.625rem /*42px*/; font-weight: bold; }
h3, .likeh3 { font-size: 1.5rem /*24px*/; line-height: 1.938rem /*31px*/; font-weight: bold; }
h4, .likeh4 { font-size: 1.25rem /*20px*/; line-height: 1.875rem /*30px*/; font-weight: bold; }
h5, .likeh5 { font-size: 1.125rem /*18px*/; line-height: 1.688rem /*27px*/; font-weight: bold; }
*.white {color:white;}
p { margin: 10px 0 0 0;}
h1 + p { margin-top:16px;}
h2 + p { margin-top:14px;}
h3 + p { margin-top:10px;}
h4 + p { margin-top:6px;}
*:not(div) + h1 { margin-top:24px;}
*:not(div) + h2 { margin-top:24px;}
*:not(div) + h3 { margin-top:24px;}
*:not(div) + h4 { margin-top:24px;}
.subhead { font-size: 1.375rem /*22px*/; line-height: 2.063rem /*33px*/; color: var(--medium-emphasize)}
.headerimage { width:110%;}
/* Links */
a { color: var(--comp-blue); text-decoration: none;}
a:hover { text-decoration: underline;}
a:active { background-color: none;}
/* Pattern*/
.patternstyle { position:relative;}
.patternholder { position:absolute; width:100%; }
@media only screen and (min-width:992px){
/*.patternholder { max-width: 864px; }*/
}
.patternholder .c { position:relative;}
.pattern-flex { display: flex; align-items: stretch; height: 100%;}
.r .pattern { flex-basis: 50%; background-image: url(https://www.drycon.de/wp-content/themes/drycon/data/diagonal-lines.svg); background-repeat: repeat; opacity: 0.3; }
.fliph { transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";}
.normalstyle .pattern-wrapper { margin-top: calc(-40px - 33px); position:relative; z-index:-1;width:100%; background: white; height:200px; opacity: 1; border-radius: 30px; overflow: hidden;}
.circlepattern .pattern-wrapper {position:absolute; width:15.6rem; height:15.6rem; right:-80px; top:-100px; border-radius: 100%; overflow: hidden; }
.circlepattern.pbottom .pattern-wrapper {position:absolute; width:15.6rem; height:15.6rem; bottom:-100px; border-radius: 100%; overflow: hidden; }
.circlepattern.bottom .pattern-wrapper {position:absolute; width:15.6rem; height:15.6rem; bottom:-100px; border-radius: 100%; overflow: hidden; z-index: -1;}
/* Numberedlist*/
.numbered-list { padding: 32px 0 ;}
.numbered-list .listitem { padding: 32px 0 ; display:flex; justify-content: flex-start; align-items: flex-start; }
.numbered-list .listitem .number { margin-right: 24px; padding: 24px; line-height: 20px; /*width: 80px; height: 80px;*/ font-size: 2.375rem; font-weight: 700; color: var(--medium-emphasize); background-image: url(https://www.drycon.de/wp-content/themes/drycon/data/img/background-circle.png); background-size: auto; background-position: center center; border-radius: 50px;}
/* Numberedlist*/
.iconteaser { padding: 0 0 32px 0 ; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
.iconteaser .elementitem { width:100%; padding: 16px 0 16px 0; }
.iconteaser .elementitem p { text-align: justify; }
.iconteaser .elementitem .icon { color: var(--comp-blue); font-size: 2rem; padding-bottom:16px; }
@media only screen and (min-width: 992px) {
.iconteaser .elementitem { width: calc(50% - 16px); }
}
@media only screen and (min-width: 1400px) {
.iconteaser .elementitem { width: calc(33% - 32px); }
}
.teammember .info {padding-top:16px;}
.teammember .info p {color: var(--low-emphasize);}
.teammember .info a {color: var(--medium-emphasize);}
/* Social Icons */
@media screen and (max-width: 786px) {
.socalicons { position:absolute; top: unset; left:0; bottom: 0;}
.socalicons .sicon { display: inline-block; color: var(--comp-blue); font-size:1.25rem; background-color: white; border-radius: 100px; padding: 10px; text-align: center; margin: 16px; }
}
@media screen and (min-width: 786px) {
.socalicons { position:absolute; top: calc(50% - 120px); left:30px; bottom:unset}
.socalicons .sicon { display:block;color: var(--comp-blue); font-size:1.25rem; background-color: white; border-radius: 100px; padding: 20px; text-align: center; margin: 16px 0; }
}
@media screen and (min-width: 992px) {
.socalicons { position:absolute; top: calc(50% - 120px); left:-16px;}
.socalicons .sicon { color: var(--comp-blue); font-size:1.25rem; background-color: white; border-radius: 100px; padding: 20px; text-align: center; margin: 16px 0; }
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1440px) {
}
/* shadow-light */
.shadow-light {filter: drop-shadow(0px 9px 20px rgba(80, 111, 121, 0.18));}
.iconcontent { position:relative; width:100%; padding-left:24px; padding-top:18px; }
.iconcontent i { position: absolute; left:0;}
a.link i { width: 24px;}
/* List Elements */
.main ul { padding-left:30px; margin: 16px 0 0 0;}
.main ul li { list-style: none; padding:10px 0;}
.main ul li:before { content:'•'; position: absolute; margin-left: -25px;}
.main ul.checklist li:before { margin-left: -30px; content:'\f00c'; font-family: "Font Awesome 5 Pro"; color: var(--orange_2);}
/* Box Shadows */
.shadow-basic { box-shadow: 0px 9px 20px rgba(80, 111, 121, 0.18), 0px 1.12694px 2.50431px rgba(80, 111, 121, 0.09); border-radius: 4px;}
.shadow-large { box-shadow: 0px 9px 20px rgba(80, 111, 121, 0.18), 0px 1.12694px 2.50431px rgba(80, 111, 121, 0.09); border-radius: 4px;; border-radius: 4px;}
/* Background-Colors */
.background-yellow { background-color: var(--yellow_5);}
/* Form Elements */
input.no-outline{ outline: none; border-top-style: hidden; border-right-style: hidden; border-left-style: hidden; border-bottom-style: hidden; }
.no-outline:focus { outline: none; }
/* Textbox Combinations with separate UL and Column UL */
.rtextbox .textbox:not(.onlyUl) { padding-bottom:16px;}
.rtextbox .textbox .content ul:only-child { margin-top:0;}
.rtextbox .textbox.onlyUl { padding-bottom:0;}
.rtextbox ul + ul { margin-top:0;}
.c.textbox + .c.textbox { padding-top: 0;}
.rtextbox .textbox.onlyUl + .textbox:not(.onlyUl) { padding-top:16px;}
.c.textbox .content > p:first-child { margin-top: 0;}
.r.spacer { padding:20px 16px; }
.r.spacer .line { width:100%; height:1px; background-color: var(--black_4); margin: 0 16px; }
.r.spacer.noline .line { display:none;}
/* Box */
.box { cursor:pointer; }
.box { position:relative; padding:16px; margin: 5px 16px; border-radius: 16px; width:100%; height:100%; background-color: white;}
.teaserbox-shadow {
filter: drop-shadow(0px 22px 37px rgba(0, 31, 40, 0.27)), drop-shadow(0px 4.91399px 8.26443px rgba(0, 31, 40, 0.160949)), drop-shadow(0px 1.46302px 2.46054px rgba(0, 31, 40, 0.109051));
}
.dropshadow-standard {
filter: drop-shadow(0px 22px 37px rgba(0, 31, 40, 0.27));
}
/* Teaserbox */
.teaserboxcontainer { cursor:pointer; }
.teaserbox { position:relative; transition: all .2s ease; border-radius: 16px; width:100%; height:100%; background-color: white; filter: drop-shadow(0px 22px 37px rgba(0, 31, 40, 0.27));}
.teaserbox:hover { transform: scale(1.02); border-radius: 16px;}
.teaserbox .image { overflow:hidden; width:100%; height:auto; border-radius: 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.87) 100%), url(/wp-content/themes/drycon/data/blank_10x10.gif); background-position: center center; background-size: cover;}
.teaserbox .image img { width:100%; visibility: hidden;}
.teaserbox .teasertext { padding:15px 20px;position: absolute; bottom:0; left:0; color: white;}
.teaserbox .teasertext .tag { font-size: 0.875rem; color: white; padding-bottom: 0;}
.teaserbox .teasertext .likeh3 { color: white;}
.teaserbox .teaserbtn { background-color:white; color: var(--high-emphasize); position:absolute; bottom:0; right:0; border-radius: 16px 0 15px 0; }
.teaserbox .teaserbtn:after { content: '\f054'; display:block; color: var(--high-emphasize); padding:15px 23px; font-family: "Font Awesome 5 Pro"; }
/* Logoslider */
.logoslider .slide { height: 92px; display: flex; align-items: center; }
.logoslider .slide .imgcontainer { padding: 32px; }
.logoslider .slide .imgcontainer img { width:auto; height: auto;}
.logosdisplay { display:flex; align-items: center; flex-wrap: wrap; justify-content: space-between; opacity: 0.5;}
.logosdisplay .slide .imgcontainer { padding: 16px; }
.logosdisplay .slide .imgcontainer img { width:auto; height: auto;}
/* Events */
.infobox { font-weight: 600;}
.infobox .ico { padding: 8px 0; color: var(--black_2);}
.infobox .ico strong { color: var(--black_1); font-weight: 600;}
.infobox .ico:before { display:inline-block; font-family: "Font Awesome 5 Pro"; font-weight: lighter; width:32px; color: var(--black_2);}
.infobox .ico.date:before { content: '\f073';}
.infobox .ico.location:before { content: '\f3c5';}
.infobox .ico.user:before { content: '\f007';}
.infobox .ico.costs:before { content: '\f153';}
.teaserboxcontainer .dummy_more.event { padding:0; position:absolute; right:32px; bottom:32px;}
.teaserboxcontainer .dummy_more.opencall { padding:0; }
.teaserboxcontainer .teaserbox.event .teasertext,
.teaserboxcontainer .teaserbox.opencall .teasertext { width: auto; flex: auto;}
.partnerbox .teasertext { padding-right:94px;}
/* Sidebarbox */
.sidebarboxcontainer { position:relative; }
.sidebarbox { position:relative; border-radius: 16px; background-color: white; padding: 32px; }
.sidebarbox .sidebarend { position:relative; width:100%;}
.sidebarbox a.btn { display:block; background-color: #ffd700;width: 100%;}
.sidebarbox .sidebarsplit { display: flex; align-items: flex-start;}
.sidebarbox .sidebarsplit i { color: #009BC9; color: var(--comp-blue);}
.sidebarbox .sleft { width:66%;}
.sidebarbox .sright { width:33%;}
.sidebarbox .contact { font-size:0.75rem; color: var(--low-emphasize); text-align: center;}
@media only screen and (max-width: 786px){
.sidebarbox .sleft a {padding: 8px 0; display:inline-block;}
}
/*.rsidebarcontainer .dummy_more { padding:0; position:absolute; right:32px; bottom:32px;}
.rsidebarcontainer .dummy_more.relative { margin-top: 16px;position:relative; right:0; bottom:0;}
.sidebarbox.highlight_1 { background-color: var(--cta_100); border:none;}
.sidebarbox.highlight_2 { background-color: var(--black_1); border:none; color: white;}
.sidebarbox.highlight_2 * { color: white;}
.sidebarbox.highlight_2 a { color: var(--yellow_1);}
*/
/* Projectfacts */
.projectfacts { display:flex; justify-items: space-between; padding-top:32px;flex-wrap: wrap;}
.projectfacts .col { width: 33%;}
.projectfacts .pfact { margin-bottom:16px;}
.projectfacts .fal { padding-right: 8px;}
@media only screen and (min-width: 992px) {
.projectfacts .col { width: 50%; }
.projectfacts .col_3 { width:100%; }
}
@media only screen and (min-width: 1200px) {
.projectfacts .col { width: 33%; }
.projectfacts .col_3 { width: 33%; }
}
.s.projectpager { background-color: #001F28; background-color: var(--high-emphasize); border-bottom:1px solid var(--medium-emphasize); width:100%; margin-top: -128px;}
.s.projectpager a { color:white; line-height: 20px; }
/*.s.projectpager a:hover { box-shadow: 0 10px 20px rgba(255, 255, 255, 0.5); }*/
.s.projectpager .fal { color:var(--medium-emphasize); padding: 16px 8px; }
/* Quotes */
.rquote { padding-top: 32px; padding-bottom:32px; }
.quote-container { position:relative; padding-left: 70px; }
/* Todo: richtige Quotemarks (rund) */
.quote-container .quote-sign { position:absolute; left:0; }
.quote-text { padding-left:64px; }
.quote-author { display:flex; align-items: center; padding-left:64px; padding-top:32px; }
.quote-author .image {padding:12px; border-radius:100%; margin-right:16px; background: url("/wp-content/themes/drycon/data/diagonal-lines-light.svg");}
.quote-author .image img {border-radius:100%; width:100px !important; height:auto; }
.quote-author .author { font-size: 1.125rem; color: var(--medium-emphasize); }
.quote-author .author-job { font-size: 1.125rem; color: var(--low-emphasize); }
.quote-container .bg-color-box.vertical { left: -32px; top:-32px; height: calc( 100% + 64px); width: 160px; }
.quote-container .line { margin: 16px 0;: }
@media only screen and (max-width: 767px){
.quote-container .quote-sign { position: relative; padding-bottom:32px; }
.quote-container .quote-sign img { width: 64px;}
.quote-container,
.quote-text ,
.quote-author { padding:0;}
.quote-author { padding-top:32px;}
}
/*.quote-container .image { display:relative; width:50px; height:50x;}*/
/* Newsbox */
.newsbox { display: flex; align-items: flex-start;}
.newsbox .image { width:200px; min-width: 200px; flex-basis: 200px; background-size: cover; background-position: center center;}
.newsbox .teasertext { padding:0 16px; }
a.newslink { text-decoration: none; color:inherit; display:block;}
/*a.newslink:hover { background-color: var(--cta_100);}*/
.newsentry { transition: all 0.4s;}
.newsentry:hover { background-color: var(--cta_100);}
@media only screen and (max-width: 767px){
.newsbox { display: block;}
.newsbox .image { margin-bottom: 8px; flex-basis: 100%; width:100%;}
}
@media only screen and (min-width: 992px) and (max-width: 1200px){
.newsbox .image { flex-basis: 180px; width:180px;min-width: 180px; }
}
/* Elements for boxes */
.line { width: 54px; height:0; margin:24px 0; border-top: 2px solid;}
.line.line-orange { border-color: var(--orange_1);}
.line.line-yellow { border-color: var(--yellow_1);}
/* Optimizing for md display */
@media only screen and (min-width: 600px) and (max-width: 1200px){
.size_3 .teaserboxcontainer .teaserbox { display:flex; }
.size_3 .teaserboxcontainer .image { border-radius: 16px 0 0 16px;flex-basis: 40%;}
.size_3 .teaserboxcontainer .teasertext { flex-basis: 60%;}
.news .teaserboxcontainer .teaserbox { display:flex; }
.news .teaserboxcontainer .image { border-radius: 16px 0 0 16px;flex-basis: 40%;}
.news .teaserboxcontainer .teasertext { flex-basis: 60%;}
/*.size_3 .teaserboxcontainer .dummy_more { width:10%;}*/
}
/* Optimizing for sd display */
@media only screen and (min-width: 600px) and (max-width: 768px){
.size_2 .teaserboxcontainer .teaserbox { display:flex; }
.size_2 .teaserboxcontainer .image { border-radius: 16px 0 0 16px;flex-basis: 40%;}
.size_2 .teaserboxcontainer .teasertext { flex-basis: 60%;}
/*.size_2 .teaserboxcontainer .dummy_more { width:10%;}*/
}
/* FAQs */
.faqs { border-radius: 4px; overflow: hidden; background: white; }
.faq { position:relative; padding-left:32px; border-left: 4px solid var(--light-grey);}
.faq.show { border-left: 4px solid var(--comp-blue); }
.faq .question { transition: all 0.2s; padding:16px 42px 16px 0; cursor:pointer;color: var(--low-emphasize);}
.faq .question:hover, .faq.show .question { color: var(--high-emphasizeemphasize);}
.faq .answer { display:none; padding-bottom:16px;color: var(--low-emphasize);}
/*.faq.show .answer { display:block; }*/
.faq .icon:before { content:'\f107'; font-family:"Font Awesome 5 Pro"; display:block; position:absolute; right:0; padding:16px; font-weight: 400; cursor: pointer; color: var(--low-emphasize);}
.faq.show .icon:before { content:'\f106'; }
/* Quickfacts */
.divider { width:100; height:0; margin: 48px 0; border-top:1px solid var(--light-grey);}
.divider.vertical { width:2px; min-height:100px; margin: 0; background-color: var(--light-grey); }
.verticaldivider { width:2px; min-height:100px; margin: 0; background-color: var(--light-grey); }
.quickfacts { width:100%; display:flex; align-content: stretch ; justify-content: space-between; padding-bottom:128px; }
.quickfacts .fact { text-align: center; font-weight: 700;}
.quickfacts .fact .icon { font-family: 'Font Awesome 5 Pro'; font-weight: 300; font-size:2rem; color: var(--comp-blue); padding:16px;}
.quickfacts .fact .number { font-size: 3rem; /*48px*/ padding:16px; line-height: 3rem; );
}
.quickfacts .fact .info { font-size: 1.125rem; /*18px*/ padding:8px;}
@media screen and (max-width: 786px) {
.quickfacts { flex-wrap: wrap; }
.quickfacts .fact { width:100%; padding-bottom: 32px;}
.verticaldivider { display:none;}
}
@media screen and (min-width: 786px) {
.quickfacts { flex-wrap: wrap; }
.quickfacts .fact { flex-basis: 20%; padding-bottom: 32px;}
.verticaldivider { display:none;}
}@media screen and (min-width: 992px) {
.quickfacts { flex-wrap: wrap; }
.quickfacts .fact { flex-basis: 30%;}
.quickfacts .fact { flex-basis: 130px;}
}
@media screen and (min-width: 1200px) {
.quickfacts { flex-wrap: nowrap; }
.quickfacts .fact { width:auto;}
.verticaldivider { display:block;}
}
/* Buttons */
/*
.btn.color
.btn.border
*/
a.btn { font-size: 1rem; transition: all .3s ease; display: inline-block; text-align: center; border-radius: 50px; text-decoration: none; padding: 20px 28px; font-weight: 700; cursor: pointer; line-height: 1.25rem; }
a.btn .fal { padding-left:8px;}
a.btn.color { background-color: var(--comp-yellow); border: 2px solid var(--comp-yellow); color: var(--high-emphasize);}
a.btn.simple { }
/*a.btn.arrow-right:after { display:inline-block; padding-left:8px; content: '\f178'; font-family: "Font Awesome 5 Pro"; }*/
a.btn.outline { background-color: white; border: 2px solid var(--comp-yellow); color: var(--high-emphasize);}
.btn,
.btn:link,
.btn:visited { margin-top:16px; transition: all 0.2s; /*position: absolute;*/ position: relative;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
.btn:active { transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
.btn::after { content: ""; display: inline-block; height: 100%; width: 100%; border-radius: 100px; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.4s; /*background-color: var(--comp-yellow);*/ }
.btn.color::after {
background-color: #ffd700;
background-color: var(--comp-yellow-light);
}
.btn.outline { background-color: white; }
.btn.outline::after { background-color: #ffd700; background-color: var(--comp-yellow-light); }
.btn:hover::after { transform: scaleX(1.4) scaleY(1.6); opacity: 0; }
.btn.simple:hover { transform: translateY(-3px); box-shadow: none; }
.link.phone:before { display:inline-block; content:'\f095'; font-family: 'Font Awesome 5 Pro'; width:24px; }
.link.mailto:before { display: inline-block; content:'\f0e0'; font-family: 'Font Awesome 5 Pro';width:24px; }
.contactbox .link { display: block; padding: 8px 0;}
.contactbox { transform: scale(1.02);}
/*a.btn.cirlce_more { width:35px; height:35px; line-height: 35px; border: 1px solid var(--blue_4);}
a.btn.cirlce_more:hover,
.teaserbox:hover a.btn.cirlce_more { color:white; background-color: var(--blue_2); border-color: var(--blue_2);}
a.btn.cirlce_more.orange { color: var(--orange_1); border: 1px solid var(--orange_1);}
a.btn.cirlce_more.orange:hover,
.teaserbox:hover a.btn.cirlce_more.orange { color:white; background-color: var(--orange_1); border-color: var(--orange_1);}
a.btn.read_more { margin-top:16px; font-weight:700; text-transform:uppercase; padding: 10px 20px; color: var(--blue_2);border: 1px solid var(--blue_2); border-radius: 100px;}
a.btn.read_more.extend:before { content: '\f078'; font-family: "Font Awesome 5 Pro"; padding-right:10px; }
a.btn.read_more:hover { color:white; background-color: var(--blue_2); }
a.btn.cta { margin-top:16px; width:auto; margin-right:16px;}
a.btn.cta:before { content: '\f178'; font-family: "Font Awesome 5 Pro"; padding-right:10px; }
a.btn.cta_1 { font-weight:700; text-transform:uppercase; padding: 10px 20px; color: white; background-color: var(--blue_1); border: 1px solid var(--blue_1); border-radius: 100px; }
a.btn.cta_1:hover { color: var(--blue_1); background-color: white; border-color: var(--blue_1); }
a.btn.cta_2 { font-weight:700; text-transform:uppercase; padding: 10px 20px; color: var(--blue_2);background-color: var(--blue_3);border: 1px solid var(--blue_3); border-radius: 100px; }
a.btn.cta_2:hover { color: var(--blue_2); background-color: var(--blue_4); border-color: var(--blue_2); }
a.btn.cta_3 { font-weight:700; text-transform:uppercase; padding: 10px 20px; color: var(--blue_1);background-color: white ;border: 1px solid var(--blue_1); border-radius: 100px; }
a.btn.cta_3:hover { color: var(--blue_2); background-color: var(--blue_4); border-color: var(--blue_2); }
a.btn.cta_4 { font-weight:700; text-transform:uppercase; padding: 10px 20px; color: var(--blue_2);background-color: none;border: none; }
a.btn.cta_5 { font-size: 0.875rem ; text-transform:uppercase; padding: 5px 10px; color: var(--blue_2);background-color: none;border: none; }
a.btn.cta_6 { font-size: 0.875rem; font-weight:700; text-transform:uppercase; padding: 5px 10px; color: var(--blue_2);background-color: var(--blue_3);border: 1px solid var(--blue_3); border-radius: 100px; }
a.btn.cta_6:hover { color: var(--blue_2); background-color: var(--blue_4); border-color: var(--blue_2); }
a.btn.cta_3.orange { color:var(--orange_1); border-color:var(--orange_1);}
a.btn.cta_3.orange:hover,
.teaserbox:hover a.btn.cta_3.orange { color: white; background-color: var(--orange_1); border-color: var(--orange_1); }
a.btn.cta_3.yellow { color: var(--yellow_1); background-color: white; border-color: var(--yellow_1);}
a.btn.cta_3.yellow:hover,
.teaserbox:hover *:not(multibtn) a.btn.cta_3.yellow { color: white; background-color: var(--yellow_1); border-color:var(--yellow_1); }
a.btn.cta_3.yellow_2 { color: var(--black_1); background-color: var(--yellow_5); border-color: var(--yellow_5);}
a.btn.cta_3.yellow_2:hover { color: white; background-color: var(--yellow_1); border-color:var(--yellow_1); }
.teaserbox .cta { font-size: 0.875rem;}
a.btn_topic { display:block; font-weight: 600; padding-top:8px;}
a.btn.special { position:relative;}
a.btn.special:before { content:'';}
a.btn.special .fal { position:absolute; left:16px; top:14px;}
*/
/* SlickSlider */
.slick-loading .slick-list { visibility: hidden; }
.slick-dotted.slick-slider { padding-bottom: 64px; }
ul.slick-dots { padding:0; margin:0; position: absolute; bottom: 0px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 16px; height: 16px; margin: 0 5px; padding: 0; cursor: pointer; background: none; list-style: none; }
.slick-dots li:before { display:none;}
.slick-dots button { text-indent:-9999px; content:' '; background: var(--light-grey); display: block; width: 12px; height: 12px; padding: 5px; cursor: pointer; border: 0; outline: none; border-radius: 16px; transition: all 0.4s; }
.slick-dots li.slick-active button { background: var(--comp-blue); transform: scale(1.4); }
.slickslider { padding-bottom:52px; }
.slickslider .box img { width:100%; height:auto; }
.slickslider .arrow { cursor:pointer; text-align:center; font-size: 0.875rem; height:16px; width:16px; padding:10px; background-color: white; display:block; position:absolute; bottom:10px; border-radius: 100%; color: var(--comp-blue) !important; }
.slickslider .arrow i { margin-top:2px; display:block; color: var(--comp-blue) !important;}
.slickslider .arrow.prev { right: calc(50% + 8px); }
.slickslider .arrow.next { left: calc(50% + 8px );}
.imageslider { position: relative; overflow: visible;}
.imageslider .slick-list { overflow: hidden;}
.imageslider .slide { position: relative;}
.imageslider .slide .info { padding-top:8px;}
.imageslider .arrow { color: var(--comp-blue); cursor:pointer; text-align:center; font-size: 2rem; padding:30px 20px; background-color: white; display:block; position:absolute; top: calc(50% - 70px); border-radius: 100px; z-index: 2; }
.imageslider .arrow i { margin-top:2px; display:block; }
.imageslider .arrow.prev { left: 8px ; }
.imageslider .arrow.next { right:8px; }
@media only screen and (max-width: 768px){
.imageslider .arrow.prev { left: 8px ; }
.imageslider .arrow.next { right:8px; }
}
/* Gallery */
.gallery { display: flex; flex-wrap: wrap; }
.gallery .image { box-sizing: border-box; padding:0; width:25%; background-position: center center; background-size: cover; border:1px solid white;}
.gallery .image img { width:100%; height:auto; }
@media only screen and (min-width: 768px){
.gallery .image { pwidth:50%; }
}
/* Shadowbox */
.shadowbox { padding: 32px 0; background-color: white;}
/* ColorBoxes */
.bg-color-box { position: absolute; top:0;width: calc(100% - 32px); height: calc(50% + 32px); z-index: -1;}
.bg-color-box.full { position: absolute; top:0;width: calc(100%); height: calc(100%); z-index: -1;}
.bg-color-box.vertical { position: absolute; top:0; left:16px; width: calc(41.6667% - 32px); height: 100% ; z-index: -1;}
.colorboxcontainer { position: absolute; top:0; left:0;height:100%; width:100%; }
.tag { font-size: 1rem; padding-bottom:12px; color: var(--medium-emphasize);}
/* Color - Tags */
.tags { margin-bottom:16px; }
.tags .tag { font-family: 'Chivo', sans-serif; font-size: 0.875rem; color: var(--black_1); text-transform:uppercase; display: inline-block; margin-right:16px; padding: 4px 18px; border-radius: 8px; font-weight: 600;}
.tags .tag-yellow { background-color: var(--yellow_2);}
.tags .texttag { font-size: 0.875rem; font-weight: bold;color: var(--black_1); text-transform:uppercase; display: inline-block; margin-right:16px; padding: 4px 0; }
.tags .texttag.tag-orange-text { color: var(--orange_1);}
.tags .pr_tag { font-family: 'Chivo', sans-serif; font-size: 0.875rem; color: var(--black_1); text-transform:uppercase; display: inline-block; padding: 0; font-weight: 600; margin-right:32px;}
/*.tags .pr_tag + .pr_tag { margin-left:32px; }*/
.tags .pr_tag .fal { padding-right:8px;}
.tags .pr_tag.tag-black_2-text { color: var(--black_2);}
/* Helper */
.relative { position: relative;}
.extra_padding_top { padding-top:32px;}
.extra_padding { padding:3rem 4rem 2rem 4rem;}
.flexstart { align-items: flex-start;}
.nopadtop { padding-top:0;}
.nopadbottom { padding-bottom:0;}
.nopadleft { padding-left:0;}
.nopadright { padding-rigth:0;}
.nopadding { padding:0;}
.noanimation { transition: none;}
.nohoverfx:hover { transform: none; box-shadow: initial;}
.rimage_text .image { background-size: cover; }
.rimage_text .image img { background-size: cover; width:100%; height:auto;}
.block { display:block;}
img.fac { top:2px; position: relative;height:1rem; width:auto; display: inline-block; padding-right:8px; } /* Own Icons */
/* Debug & Grid-Overlay */
.debuginfo { display:block; pointer-events: none; position:fixed; z-index: 100; width:100%; bottom:0; }
.keyinfos { display:none; position:absolute; bottom:0; left:0; padding:5px; background: lightgray;}
.debuggrid { display:block; position: relative; padding-top:0;/*margin:0 auto; height:1vm;*/}
.debuggrid .c { padding-top:0; padding-bottom:0;}
.debuggrid .c div { background-color: rgba(255,0,0,0.05); height:100vh;}
.screen_size_display { position:absolute; bottom: 0; right:0;}
.screen_size_display div { padding:5px 10px; background-color: white; }
.showBlockColors .s { background-color: var(--yellow_2); border-top: 1px solid var(--yellow_1);}
.showBlockColors .s.size_2 { background-color: var(--yellow_3); }
.showBlockColors .s.size_3 { background-color: var(--yellow_4); }
.showBlockColors .r { background-color: var(--orange_3); border-top: 1px solid var(--orange_1);}
.showBlockColors .c { background-color: var(--blue_3); }
.showBlockColors .c div { background-color: var(--blue_4); }
.showBlockColors .spacer { background-color: var(--black_1);}
/* Form Select */
form select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
form select::-ms-expand {
display: none;
}
form select {
/* ... */
/*width: auto;*/
width:170px;
height: 40px;
padding-left: 10px;
padding-right: 10px;
background: white;
color: var(--black_2);
font-family: 'Mulish', sans-serif;
font-size: 1rem;
/*margin-left:270px;*/
/*border: 1px solid #919B9C;*/
border: 1px solid var(--black_3);
border-radius: 4px;
font-display:swap;
}
form .select-wrapper {
display:inline-block;
position: relative;
/*background: yellow;*/
height :43px;
width:170px;
margin: 16px 16px 16px 0;
}
form .select-wrapper:before {
font-family: "Font Awesome 5 Pro";
content: "\f0d7";
font-size: 0.875rem;
position: absolute;
right: 15px;
top: 8px;
color: var(--black_2);
font-weight: 900;
pointer-events:none;
touch-action:none;
font-display:swap;
}
/* Footer */
.s.footer { background-color: #001F28;background-color: var(--high-emphasize); color: white; padding:0; width: 100%; margin-top:0; }
.s.footerline { width: 100%; }
.footer > .r > .c { padding: 0 16px;}
.footer .footerblock .footerlogo { padding-bottom:16px;}
.footer .footerblock .footerlogo p { color: var(--deemphasize); padding-bottom:3px;}
.footer .footerblock .footerlogo p .fal,
.footer .footerblock .footerlogo p .fab
{ color: var(--medium-emphasize); padding-right:8px; width:20px;}
.footerlogo img { width: 100%; height: auto;}
.footer ul { padding: 0; margin:0;}
#footermenu { display: flex; padding-top: 36px;}
#footermenu li { list-style: none;}
#footermenu > li { flex: auto; padding-right:16px; padding-bottom:4px;}
#footermenu li { padding-bottom:4px;}
#footermenu li a { font-size: 0.875rem; color: var(--deemphasize);}
#footermenu li .sub-menu { padding-top:8px !important;}
#footermenu > li > a { font-weight: bold; color:white; padding-bottom:5px;}
#footermenu > li:last-child a { font-weight: bold;}
.footerblock { padding: 96px 0;}
.footerline { border-top: 1px solid var(--black_2); padding: 0; }
.footerline, .footerline a { font-size: 0.875rem; color:white}
.footerline a { display:inline-block; padding:0 8px; }
.footerline .footerlinenav {padding-right: 8px; }
.footerline .r { justify-content: space-between;}
.footerline .copyright { padding-left: 16px; padding-right:16px;}
/* Footer opitmizing for extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {
.footer .footerblock { padding-top: 32px; padding-bottom:0;}
.footer .footerblock .footerlogo { padding-top: 8px; padding-bottom:0;}
.footerline { border-top: none;}
.footerline a { display:block; padding:0 32px; }
.footerline .copyright { padding: 16px 32px; border-top: 1px solid var(--black_2);}
.footerline .r { display:block;}
}
@media only screen and (max-width: 600px) {
.footerblock .footerlogo a,
#footermenu li a {
font-size: 1.5rem;
padding: 10px 0;
display:inline-block;
}
#footermenu { display:block; padding-top:0; }
#footermenu > .menu-item { width:100%; padding-top:32px;}
}
/*****************************************************
*
* Responsive optimizing
*
******************************************************/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.screen_600 { display:inline-block;}
.screen_600plus { display:none;}
.screen_768 { display:none;}
.screen_992 { display:none;}
.screen_1200 { display:none;}
.screen_1440 { display:none;}
/*:root { font-size:16px;}*/
:root { font-size:10.665px;} /* => 3rem == 32px h1 upscale*/
/*:root { font-size:12px;} /* => 3rem == 32px h1 upscale*/
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.screen_600 { display:none;}
.screen_600plus { display:inline-block;}
.screen_768 { display:none;}
.screen_992 { display:none;}
.screen_1200 { display:none;}
.screen_1440 { display:none;}
:root { font-size:16px;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.screen_600 { display:none;}
.screen_600plus { display:none;}
.screen_768 { display:inline-block;}
.screen_992 { display:none;}
.screen_1200 { display:none;}
.screen_1440 { display:none;}
:root { font-size:14px;}
/*Todo: check on devices if OK or r = auto*/
/*.r { width:auto;}*/
s > .r, #header > .r { width:768px;}
.s.size_2 > .r { padding-left: calc( 768px / 12);padding-right: calc( 768px / 12); }
.s.size_3 > .r { padding-left: calc( 768px / 12 * 2);padding-right: calc( 768px / 12 * 2) ;}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.screen_600 { display:none;}
.screen_600plus { display:none;}
.screen_768 { display:none;}
.screen_992 { display:inline-block;}
.screen_1200 { display:none;}
.screen_1440 { display:none;}
:root { font-size:14px;}
.s { width:864px; margin:0 auto;}
s > .r, #header > .r { width:864px;}
.s.size_2 > .r { padding-left: calc( 864px / 12);padding-right: calc( 864px / 12); }
/* Todo: .s.size_3 .r { padding-left: calc( 864px / 12 * 1);padding-right: calc( 864px / 12 * 1) ; } not working on Tablets and small Laptops either this or change font size*/
.s.size_3 > .r { padding-left: calc( 864px / 12 * 2);padding-right: calc( 864px / 12 * 2) ; }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.screen_600 { display:none;}
.screen_600plus { display:none;}
.screen_768 { display:none;}
.screen_992 { display:none;}
.screen_1200 { display:inline-block;}
.screen_1440 { display:none;}
:root { font-size:15px;}
.s { width:1084px; margin:0 auto;}
.s > .r, #header > .r { width:1084px;}
.s.size_2 > .r { padding-left: calc( 1084px / 12);padding-right: calc( 1084px / 12); }
.s.size_3 > .r { padding-left: calc( 1084px / 12 * 2);padding-right: calc( 1084px / 12 * 2) ; }
}
/* Big Monitors (large lScreens, 1440px and up) */
@media only screen and (min-width: 1440px) {
.screen_600 { display:none;}
.screen_600plus { display:none;}
.screen_768 { display:none;}
.screen_992 { display:none;}
.screen_1200 { display:none;}
.screen_1440 { display:inline-block;}
:root { font-size:16px;}
.s { width:1344px; margin:0 auto;}
.s > .r, #header > .r { width:1344px;}
.s.size_2 > .r { padding-left: calc( 1344px / 12);padding-right: calc( 1344px / 12); }
.s.size_2 > .r.full { padding-left: 0;padding-right: 0; }
.s.size_3 > .r { padding-left: calc( 1344px / 12 * 2);padding-right: calc( 1344px / 12 * 2) ; }
}
/* Important stuff */
.hide { display:none; }
/* Animation on Image */
.project_btn_animation {
overflow: hidden;
position: relative;
}
.project_btn_animation:before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.project_btn_animation:hover::before {
-webkit-animation: shine .5s;
animation: shine .5s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
/* Form Select */
form select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
form select::-ms-expand {
display: none;
}
form select {
/* ... */
/*width: auto;*/
width:170px;
height: 40px;
padding-left: 10px;
padding-right: 10px;
background: white;
color: var(--deemphasize);
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
/*margin-left:270px;*/
/*border: 1px solid #919B9C;*/
border: 1px solid var(--deemphasize);
border-radius: 4px;
font-display:swap;
}
form .select-wrapper {
display:inline-block;
position: relative;
/*background: yellow;*/
height :43px;
width:170px;
margin: 16px 16px 16px 0;
}
form .select-wrapper:before {
font-family: "Font Awesome 5 Pro";
content: "\f0d7";
font-size: 0.875rem;
position: absolute;
right: 15px;
top: 8px;
color: var(--low-emphasize);
font-weight: 900;
pointer-events:none;
touch-action:none;
font-display:swap;
}
.lb-dataContainer .lb-number { display:none !important;}
.lb-dataContainer .lb-closeContainer { position:absolute; right:30px; top:-30px;}
/*.lb-nav a.lb-prev { margin-left:-64px !important;}
.lb-nav a.lb-next { margin-right:-64px;}*/
.invalid .wpcf7-response-output { margin: 20px 0 !important; color: #ED1314; border: 1px dashed #ed1314; padding: 8px; font-size: 0.875rem;}
.unaccepted .wpcf7-response-output { margin: 20px 0 !important; color: #ED1314; border: 1px dashed #ed1314; padding: 8px; font-size: 0.875rem;}
.wpcf7-form.sent .form { display:none;}
.wpcf7-mail-sent-ok { border:none !important;}
.wpcf7-submit { margin-top: 20px !important;
background-color: var(--comp-yellow);
color: white;
text-transform: uppercase;
font-size: 1rem;
transition: all .2s ease;
display: inline-block;
text-align: center;
border-radius: 5px;
text-decoration: none;
padding: 12px 24px;
font-weight: 700;
cursor: pointer;
border:none;
}
a.btn.submit::before { content: '\f1d8';
font-family: "Font Awesome 5 Pro";
padding-right: 10px;
color: var(--medium-emphasize);
font-weight: 300;
}
.wpcf7-not-valid-tip { display : inline-block; padding-top :10px; padding-left :0; color : #ED1314; font-size : 0.875rem; }
.wpcf7-not-valid-tip:before { display: inline-block; position:relative; content: "\f0de"; font-family: "Font Awesome 5 Pro"; font-weight: 600; padding-right:5px; top:4px; font-display:swap;}
.screen-reader-response { display:none;}
.wpcf7 form.sent .wpcf7-response-output { padding: 20px !important; color: rgb(69, 152, 87); background-color: rgba(69, 152, 87, 0.2); border: 1px dashed rgba(69, 152, 87,0.8);}
.form-wrapper .accept { position:relative;}
.form-wrapper .accept > span { position:absolute; top:15px; }
.form-wrapper label { display: block; font-size:0.875rem; padding-top:32px; }
.form-wrapper .accept label { display: inline-block; padding-top:16px; font-size:0.875rem; width:100%; padding-left:24px; }
@media screen and (max-width: 786px){
.form-wrapper .accept label { width:100%;}
}
.form-wrapper input[type="text"],
.form-wrapper input[type="email"] {
padding: 10px;
background: white;
color: var(--medium-emphasize);
font-soize: 1rem;
border: 1px solid var(--deemphasize);
border-radius: 4px;
width:100%;
}
.form-wrapper textarea {
padding: 10px;
background: white;
color: var(--medium-emphasize);
font-soize: 1rem;
border: 1px solid var(--deemphasize);
border-radius: 4px;
width:100%;
height:135px;
}
.form-wrapper .plzort {display:flex;}
.form-wrapper .plzort .plz input {width: 150px; margin-right: 16px;}
.wpcf7-list-item {
margin: 0 8px 0 0 !important;
}
.form-wrapper label:first-child { padding-top:0;}
/*
Multibox
*/
.r.rmultibox + .r.rmultibox .c { padding-top:0;}
.c.multibox { display:flex; width:100%; }
.c.multibox .text > p { margin-top:0; }
/*.c.multibox .image { width:calc(50% - 32px); padding-right:32px;}*/
.c.multibox .image img { width:100%;}
.c.multibox.vtop { align-items: flex-start;}
.c.multibox.vcenter { align-items: center;}
.c.multibox.vbottom { align-items: flex-end;}
.c.multibox.r5050 .image { width:calc(50% - 32px); padding-right:32px;}
.c.multibox.iright.r5050 .image { width:calc(50% - 32px); padding-left:32px; padding-right:0;}
.c.multibox.r5050 .text { width:50%;}
.c.multibox.r4060 .image { width:calc(40% - 32px); padding-right:32px;}
.c.multibox.iright.r4060 .image { width:calc(40% - 32px); padding-left:32px; padding-right:0;}
.c.multibox.r4060 .text { width:60%;}
.c.multibox.r3070 .image { width:calc(30% - 32px); padding-right:32px;}
.c.multibox.iright.r3070 .image { width:calc(30% - 32px); padding-left:32px; padding-right:0;}
.c.multibox.r3070 .text { width:70%;}
.c.multibox.r2575 .image { width:calc(25% - 32px); padding-right:32px;}
.c.multibox.iright.r2575 .image { width:calc(25% - 32px); padding-left:32px; padding-right:0;}
.c.multibox.r2575 .text { width:75%;}
@media screen and (max-width: 786px){
.c.multibox.r3070 .image { width: calc(40% - 16px); padding-right: 16px; }
.c.multibox.r2575 .image { width: calc(40% - 16px); padding-right: 16px; }
.domainpackage .c.multibox .image { text-align:center; padding-top:32px; }
.domainpackage .c.multibox .image img { max-width: 150px; }
}
.c.multibox.ileft { display:flex; }
.c.multibox.iright { display:flex; flex-direction: row-reverse;}
.c.multibox.itop { display:block;}
.c.multibox.itop .image { width:100%; padding:0 0 16px 0;}
.c.multibox.itop .text { width:100%; padding: 0 0 0 0;}
.contactimage { border-radius: 100%;}
.footerblock .footerlogo a { text-decoration: none; color: inherit;}
.footerblock .footerlogo a:hover { text-decoration: none; color: var(--comp-blue);}
.footerblock .footerlogo a:hover .fal,
.footerblock .footerlogo a:hover .far,
.footerblock .footerlogo a:hover .fab { color: var(--comp-blue);}
.margin_top_-200 { margin-top:-200px;}
.timelinewrapper { padding: 40px; border:1px solid var(--bg-1); border-radius: 10px; position: relative; background-color: white; }
.timeline .timelinecontrols { position:relative;}
.timeline .timelinecontrols .timelinenavigation { padding: 0 100px;}
.timeline .timelinecontrols .timenavelement { text-align:center; cursor: pointer; color: var(--deemphasize);}
.timeline .timelinecontrols .timenavelement.active { color: var(--comp-blue); font-weight: bold;}
.timeline .timelinecontrols .timenavelement i { padding-top:10px; color: var(--deemphasize); background-color: white;}
.timeline .timelinecontrols .timenavelement.active i { color: var(--comp-blue);}
.timeline .timelinecontrols .timenavelement.visited i { color: var(--comp-blue);}
.timeline .timeline-line { position: absolute; top:36px;background-color: var(--deemphasize);height:3px; width:calc(100% - 160px); margin-left:80px;}
.timeline .timeline-line.display { background-color: var(--comp-blue);}
.timeline .arrow { border: 1px solid var(--deemphasize); border-radius: 100px; padding:0 24px; line-height: 40px; text-align: center; display:block; position:absolute; top:15px; z-index: 2; background-color: white; color: var(--comp-blue); cursor: pointer;}
.timeline .arrow:hover { background-color: var(--comp-blue); color: white;}
.timeline .arrow.prev { left:0; }
.timeline .arrow.next { right:0; }
.timeframe { padding: 32px 100px; position: absolute; width:100%; display:none; opacity: 0; transition: opacity 0.5s ease-in-out; }
.timeframe div { padding-top: 20px; }
.timeframe.active { position:relative; display:block; opacity: 1;}
.rtimeline .pattern-wrapper { width:calc(100% + 50px); height:200px; overflow: clip; position: absolute; bottom:-50px; left:-25px; border-radius: 20px; }
@media screen and (max-width: 786px) {
.timeframe { padding: 32px 0; }
.timeline .timelinecontrols .timelinenavigation { padding: 12px 70px;}
.timeline .timeline-line { display:none;}
}
@media screen and (min-width: 786px) {
.timeframe { padding: 5px 0; }
}
@media screen and (min-width: 992px) {
.timeframe { padding: 32px 100px;}
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1440px) {
}
@media screen and (min-width: 786px) {
.hide-not-xs { display:none !important; }
}
/* Optimize for mobile */
.footer .footerlogo img { max-width: 200px;}
@media screen and (max-width: 786px) {
.s {padding-top: 16px; padding-bottom: 16px;}
h1 { font-size: 1.813rem; /*29px*/}
.s.footer { padding-bottom: 24px;}
.s[data-sections="image_slider-100%"] .r100 p a { margin-top:0;}
.s[data-sections="image_slider-100%"] .r100 p .c { padding-top:0;}
.quote-container { text-align: center; }
.quote-sign { text-align: left;}
.quote-text { text-align: left;}
.quote-author { display:inline-block; margin-bottom: 4px; text-align: center;}
.quote-author .image { margin-bottom: 10px; }
.divider { margin: 16px 0;}
.projectfacts .col { width:50%;}
.s.projectpager { margin-top:-80px;}
.footerlogo p { margin: 0; padding: 0 4px; }
.footerlogo p:first-child { margin: 10px 0 0 0 ; padding: 0 4px; }
}
@media screen and (min-width: 786px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1440px) {
}
.footer ._brlbs-btn-cookie-preference { padding:0;}
.r.projectfilter a { margin-right:20px;}
/* Captcha Styling */
.kc_captcha .captcha-image { font-size: 0.875rem;border:1px dashed lightgrey; background-color:#fafafa; text-align: left; width:100%; margin-top:8px;padding:16px 24px 16px 24px;}
.kc_captcha .cf7ic_instructions span { color: var(--comp-blue) !important;}
.kc_captcha .captcha-image svg { width:35px; height:35px; margin-top:10px; color:#666;}
.kc_captcha .captcha-image label { padding-top:8px;}
.kc_captcha .captcha-image label > input:checked + svg,
.captcha-image label > input:checked + svg, .captcha-image label > input:focus + svg { border-color: var(--comp-blue);}
@media screen and (max-width: 780px){
.form-wrapper .accept { width:100%; }
.form-wrapper p { width:100%;}
}
._brlbs-google-maps { width:100%;}
/*
.language-switch { display: inline-block; position: absolute; z-index: 2;}
.language-switch a { display:none;}
.language-switch a:first-child { display:block;}
.language-switch:hover a { display:block;}
*/
.activelang { background: #f0f0f0; border-radius: 0 0 5px 5px;}