.shariff:after,.shariff:before{content:" ";display:table}.shariff:after{clear:both}.shariff ul{padding:0;margin:0;list-style:none}.shariff li{overflow:hidden}.shariff li,.shariff li a{height:35px;-webkit-box-sizing:border-box;box-sizing:border-box}.shariff li a{color:#fff;position:relative;display:block;text-decoration:none}.shariff li .share_count,.shariff li .share_text{font-family:Arial,Helvetica,sans-serif;font-size:12px;vertical-align:middle;line-height:35px}.shariff li .fa{width:35px;line-height:35px;text-align:center;vertical-align:middle}.shariff li .share_count{padding:0 8px;height:33px;position:absolute;top:1px;right:1px}.shariff .orientation-horizontal li{-webkit-box-flex:1}.shariff .orientation-horizontal .info{-webkit-box-flex:0}.shariff .orientation-horizontal{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.shariff .orientation-horizontal li{float:left;-webkit-box-flex:0;-ms-flex:none;flex:none;width:35px;margin-right:3%;margin-bottom:10px}.shariff .orientation-horizontal li:last-child{margin-right:0}.shariff .orientation-horizontal li .share_text{display:block;text-indent:-9999px;padding-left:3px}.shariff .orientation-horizontal li .share_count{display:none}.shariff .theme-grey .shariff-button a{background-color:#b0b0b0}.shariff .theme-grey .shariff-button .share_count{background-color:#ccc;color:#333}.shariff .theme-white .shariff-button{border:1px solid #ddd}.shariff .theme-white .shariff-button a{background-color:#fff}.shariff .theme-white .shariff-button a:hover{background-color:#eee}.shariff .theme-white .shariff-button .share_count{background-color:#fff;color:#999}.shariff .orientation-vertical{min-width:110px}.shariff .orientation-vertical li{display:block;width:100%;margin:5px 0}.shariff .orientation-vertical li .share_count{width:24px;text-align:right}@media only screen and (min-width:360px){.shariff .orientation-horizontal li{margin-right:1.8%;min-width:80px;width:auto;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.shariff .orientation-horizontal li .share_count{display:block}.shariff .orientation-horizontal.col-1 li,.shariff .orientation-horizontal.col-2 li{min-width:110px;max-width:160px}.shariff .orientation-horizontal.col-1 li .share_text,.shariff .orientation-horizontal.col-2 li .share_text{text-indent:0;display:inline}.shariff .orientation-horizontal.col-5 li,.shariff .orientation-horizontal.col-6 li{-webkit-box-flex:0;-ms-flex:none;flex:none}}@media only screen and (min-width:640px){.shariff .orientation-horizontal.col-3 li{min-width:110px;max-width:160px}.shariff .orientation-horizontal.col-3 li .share_text{text-indent:0;display:inline}}@media only screen and (min-width:768px){.shariff .orientation-horizontal li{min-width:110px;max-width:160px}.shariff .orientation-horizontal li .share_text{text-indent:0;display:inline}.shariff .orientation-horizontal.col-5 li,.shariff .orientation-horizontal.col-6 li{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}}@media only screen and (min-width:1024px){.shariff li,.shariff li a{height:30px}.shariff li .fa{width:30px}.shariff li .fa,.shariff li .share_count,.shariff li .share_text{line-height:30px}.shariff li .share_count{height:28px}}.shariff .addthis a{background-color:#f8694d}.shariff .addthis a:hover{background-color:#f75b44}.shariff .addthis .fa-plus{font-size:14px}.shariff .addthis .share_count{color:#f8694d;background-color:#f1b8b0}.shariff .theme-white .addthis a{color:#f8694d}@media only screen and (min-width:600px){.shariff .addthis .fa-plus{font-size:14px;position:relative;top:1px}}.shariff .diaspora a{background-color:#999}.shariff .diaspora a:hover{background-color:#b3b3b3}.shariff .diaspora .fa-times-circle{font-size:17px}.shariff .theme-white .diaspora a{color:#999}@media only screen and (min-width:600px){.shariff .diaspora .fa-times-circle{font-size:16px}}.shariff .facebook a{background-color:#3b5998}.shariff .facebook a:hover{background-color:#4273c8}.shariff .facebook .fa-facebook{font-size:22px}.shariff .facebook .share_count{color:#183a75;background-color:#99adcf}.shariff .theme-white .facebook a{color:#3b5998}@media only screen and (min-width:600px){.shariff .facebook .fa-facebook{font-size:19px}}.shariff .flattr a{background-color:#7ea352}.shariff .flattr a:hover{background-color:#f67c1a}.shariff .flattr a:hover .share_count{color:#d56308;background-color:#fab47c}.shariff .flattr .fa-money{font-size:22px}.shariff .flattr .share_count{color:#648141;background-color:#b0c893}.shariff .theme-white .flattr a{color:#f67c1a}@media only screen and (min-width:600px){.shariff .flattr .fa-money{font-size:19px}}.shariff .googleplus a{background-color:#d34836}.shariff .googleplus a:hover{background-color:#f75b44}.shariff .googleplus .fa-google-plus{font-size:22px}.shariff .googleplus .share_count{color:#a31601;background-color:#eda79d}.shariff .theme-white .googleplus a{color:#d34836}@media only screen and (min-width:600px){.shariff .googleplus .fa-google-plus{font-size:19px}}.shariff .info{border:1px solid #ccc}.shariff .info a{color:#666;background-color:#fff}.shariff .info a:hover{background-color:#efefef}.shariff .info .fa-info{font-size:20px;width:33px}.shariff .info .share_text{display:block!important;text-indent:-9999px!important}.shariff .theme-grey .info a{background-color:#fff}.shariff .theme-grey .info a:hover{background-color:#efefef}.shariff .orientation-vertical .info{width:35px;float:right}@media only screen and (min-width:360px){.shariff .orientation-horizontal .info{-webkit-box-flex:0!important;-ms-flex:none!important;flex:none!important;width:35px;min-width:35px!important}}@media only screen and (min-width:1024px){.shariff .info .fa-info{font-size:16px;width:23px}.shariff .orientation-horizontal .info{width:25px;min-width:25px!important}.shariff .orientation-vertical .info{width:25px}}.shariff .linkedin a{background-color:#0077b5}.shariff .linkedin a:hover{background-color:#0369a0}.shariff .linkedin .fa-linkedin{font-size:22px}.shariff .linkedin .share_count{color:#004785;background-color:#33aae8}.shariff .theme-white .linkedin a{color:#0077b5}@media only screen and (min-width:600px){.shariff .linkedin .fa-linkedin{font-size:19px}}.shariff .mail a{background-color:#999}.shariff .mail a:hover{background-color:#a8a8a8}.shariff .mail .fa-envelope{font-size:21px}.shariff .theme-white .mail a{color:#999}@media only screen and (min-width:600px){.shariff .mail .fa-envelope{font-size:18px}}.shariff .print a{background-color:#999}.shariff .print a:hover{background-color:#a8a8a8}.shariff .print .fa-print{font-size:21px}.shariff .theme-white .print a{color:#999}@media only screen and (min-width:600px){.shariff .print .fa-print{font-size:18px}}.shariff .pinterest a{background-color:#bd081c}.shariff .pinterest a:hover{background-color:#d50920}.shariff .pinterest .fa-pinterest-p{font-size:22px}.shariff .pinterest .share_count{color:#a31601;background-color:#eda79d}.shariff .theme-white .pinterest a{color:#bd081c}@media only screen and (min-width:600px){.shariff .pinterest .fa-pinterest-p{font-size:19px;position:relative;top:1px}}.shariff .reddit a{background-color:#ff4500}.shariff .reddit a:hover{background-color:#ff6a33}.shariff .reddit .fa-reddit{font-size:17px}.shariff .theme-white .reddit a{color:#ff4500}@media only screen and (min-width:600px){.shariff .reddit .fa-reddit{font-size:16px}}.shariff .stumbleupon a{background-color:#eb4924}.shariff .stumbleupon a:hover{background-color:#ef7053}.shariff .stumbleupon .fa-stumbleupon{font-size:17px}.shariff .theme-white .stumbleupon a{color:#eb4924}@media only screen and (min-width:600px){.shariff .stumbleupon .fa-stumbleupon{font-size:16px}}.shariff .twitter a{background-color:#55acee}.shariff .twitter a:hover{background-color:#32bbf5}.shariff .twitter .fa-twitter{font-size:28px}.shariff .twitter .share_count{color:#0174a4;background-color:#96d4ee}.shariff .theme-white .twitter a{color:#55acee}@media only screen and (min-width:600px){.shariff .twitter .fa-twitter{font-size:24px}}.shariff .whatsapp a{background-color:#5cbe4a}.shariff .whatsapp a:hover{background-color:#34af23}.shariff .whatsapp .fa-whatsapp{font-size:28px}.shariff .theme-white .whatsapp a{color:#5cbe4a}@media only screen and (min-width:600px){.shariff .whatsapp .fa-whatsapp{font-size:22px}}.shariff .xing a{background-color:#126567}.shariff .xing a:hover{background-color:#29888a}.shariff .xing .fa-xing{font-size:22px}.shariff .xing .share_count{color:#15686a;background-color:#4fa5a7}.shariff .theme-white .xing a{color:#126567}@media only screen and (min-width:600px){.shariff .xing .fa-xing{font-size:19px}}.shariff .tumblr a{background-color:#36465d}.shariff .tumblr a:hover{background-color:#44546b}.shariff .tumblr .fa-tumblr{font-size:28px}.shariff .theme-white .tumblr a{color:#5cbe4a}@media only screen and (min-width:600px){.shariff .tumblr .fa-tumblr{font-size:22px}}.shariff .threema a{background-color:#333}.shariff .threema a:hover{background-color:#1f1f1f}.shariff .threema .fa-lock{font-size:28px}.shariff .theme-white .threema a{color:#333}@media only screen and (min-width:600px){.shariff .threema .fa-lock{font-size:22px}}.shariff .weibo a{background-color:#f56770}.shariff .weibo a:hover{background-color:#fa7f8a}.shariff .weibo .fa-weibo{font-size:28px}.shariff .weibo .share_count{color:#0174a4;background-color:#f56770}.shariff .theme-white .weibo a{color:#f56770}@media only screen and (min-width:600px){.shariff .weibo .fa-weibo{font-size:24px}}.shariff .tencent-weibo a{background-color:#26ace0}.shariff .tencent-weibo a:hover{background-color:#38bbeb}.shariff .tencent-weibo .fa-tencent-weibo{font-size:28px}.shariff .tencent-weibo .share_count{color:#0174a4;background-color:#26ace0}.shariff .theme-white .tencent-weibo a{color:#26ace0}@media only screen and (min-width:600px){.shariff .tencent-weibo .fa-tencent-weibo{font-size:24px}}.shariff .telegram a{background-color:#08c}.shariff .telegram a:hover{background-color:#007dbb}.shariff .telegram .fa-telegram{font-size:28px}.shariff .theme-white .telegram a{color:#08c}@media only screen and (min-width:600px){.shariff .telegram .fa-telegram{font-size:22px}}.shariff .qzone a{background-color:#2b82d9}.shariff .qzone a:hover{background-color:#398fe6}.shariff .qzone .fa-qq{font-size:28px}.shariff .qzone .share_count{color:#0174a4;background-color:#2b82d9}.shariff .theme-white .qzone a{color:#2b82d9}@media only screen and (min-width:600px){.shariff .qzone .fa-qq{font-size:24px}}.shariff .vk a{background-color:#5d7fa4}.shariff .vk a:hover{background-color:#678eb4}.shariff .vk .fa-vk{font-size:22px}.shariff .vk .share_count{color:#55677d;background-color:#fff}.shariff .theme-white .vk a{color:#3b5998}@media only screen and (min-width:600px){.shariff .vk .fa-vk{font-size:19px}} .oneaward , .twoaward , .threeaward { margin: 0px auto; width: 100%; background-color: transparent; float: left; padding: 10px; position: absolute; z-index: 10; bottom: 0; text-align: center; height: 190px; } .twoaward img:nth-of-type(3) , .twoaward img:nth-of-type(4) , .threeaward img:nth-of-type(4) , .oneaward img:nth-of-type(2) , .oneaward img:nth-of-type(3) , .oneaward img:nth-of-type(4) { display: none!important; } .oneaward:after , .twoaward:after , .threeaward:after { background-color: white; content: ''; display: block; position: absolute; top: 25px; left: 25px; right: 25px; bottom: 25px; z-index: -1; } .empty { display: none; } #zwischentext { margin-bottom: 70px!important; margin-top: 50px!important; } .oneaward img , .threeaward img , .twoaward img { width: 115px!important; position: relative; top: 25px!important; transition-duration: 800ms; height: unset!important; } .headschrift h2, .headschrift h1 { margin: 0 0 0px!important; } .headschrift { margin: 30px 0 30px 0; width: 100%; } .projetawards { margin-top: 30px; } .projetawards img { max-width: 100px; display: inline-block; } .conn { width: 100%; display: inline-block; } .kunden_logo img { max-width: 300px; height: 100%; object-fit: contain; } .projekttext { width: 50%; } .projetawards { width: 100%; } .conn aside, .kunden_logo{ width: 20%; } .kunden_logo{ height: 150px; } .conn aside { padding-left: 20px; } .projekttext , .conn aside , .kunden_logo { float: left; } abbr[title] { text-decoration: underline; text-decoration: underline dotted } audio:not([controls]) { display: none } b, strong { font-weight: bolder } button { -webkit-appearance: button; overflow: visible } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText } form button:before { display:none; } button#yform-formular-field-32-nachricht_senden { animation: none; } button#yform-formular-field-16-nachricht_senden { cursor: pointer; } .kontakt-hinweis { margin-left: 10px; } button, select { text-transform: none } details { display: block } html { overflow-y: scroll; -webkit-text-size-adjust: 100% } hr { overflow: visible } input { -webkit-border-radius: 0 } input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button } input[type=number] { width: auto } input[type=search] { -webkit-appearance: textfield } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none } main { display: block } pre { overflow: auto } progress { display: inline-block } summary { display: block } svg:not(:root) { overflow: hidden } template { display: none } textarea { overflow: auto } [hidden] { display: none } *, :before, :after { box-sizing: inherit } * { font-size: inherit; line-height: inherit } :before, :after { text-decoration: inherit; vertical-align: inherit } button, input, select, textarea { font-family: inherit; font-style: inherit; font-weight: inherit } * { margin: 0; padding: 0 } *, :before, :after { border-style: solid; border-width: 0 } a, area, button, input, label, select, textarea, [tabindex] { touch-action: manipulation } select { -moz-appearance: none; -webkit-appearance: none; appearance: none; } select::-ms-expand { display: none } select::-ms-value { color: currentColor } svg { fill: currentColor } [aria-busy=true] { cursor: progress } [aria-controls] { cursor: pointer } [aria-disabled] { cursor: default } [hidden][aria-hidden=false] { clip: rect(0 0 0 0); display: inherit; position: absolute } [hidden][aria-hidden=false]:focus { clip: auto } * { background-repeat: no-repeat } :root { background-color: #fff; box-sizing: border-box; color: #000; cursor: default; font: 100%/1.5 sans-serif } a { text-decoration: none } audio, canvas, iframe, img, svg, video { vertical-align: middle } button, input, select, textarea { background-color: transparent; color: inherit } button, [type=button], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=reset], [type=search], [type=submit], [type=tel], [type=text], [type=time], [type=url], [type=week], select, textarea { min-height: 1.5em } nav ol, nav ul { list-style: none } small { font-size: 80% } table { border-collapse: collapse; border-spacing: 0 } textarea { resize: vertical } ::-moz-selection { background-color: #000; color: #fff; text-shadow: none } ::selection { background-color: #000; color: #fff; text-shadow: none } ::-webkit-scrollbar { background-color: #111; } ::-webkit-scrollbar-thumb { background-color: #ffe300; } :root { color-scheme: dark light; } * { box-sizing: border-box } html, body { font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; overflow-x: hidden; width: 100vw; scrollbar-color: #ffe300 #111; } h1 { font-size: 54.9px; font-size: 3.43125rem; line-height: 1; font-weight: 900; color: #000 } h2 { font-size: 32.4px; font-size: 2.025rem; font-weight: 300; line-height: 1.11; color: #000 } h3 { font-size: 21.6px; font-size: 1.35rem; font-weight: 300; color: #000 } h4 { font-size: 21.6px; font-size: 1.35rem; font-weight: 300; color: #000 } h5 { font-size: 18px; font-size: 1.125rem; font-weight: 300; color: #000 } h6, .h6 { font-size: 14.4px; font-size: .9rem; font-weight: 400; color: #000 } p { font-size: 14.4px; font-size: .9rem; font-weight: 300; color: #000 } a { font-weight: 400; color: #000 } blockquote { font-size: 14.4px; font-size: .9rem; font-weight: 300; color: #000 } h1 { font-size: 36px; font-size: 2.25rem } h2 { font-size: 24px; font-size: 1.5rem } h3 { font-size: 20px; font-size: 1.25rem } h4 { font-size: 18px; font-size: 1.125rem } h5 { font-size: 16px; font-size: 1rem } p, li, a, dt, dl { font-size: 16px; font-size: 1.11rem } :focus { outline: none } .bg { position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -1 } .project_text .con { max-width: 920px; } .back-to-top { background: #ffe300; position: fixed; bottom: 0; right: 20px; padding: .5em; color: #000; z-index: 9999 } @media(min-width: 1700px) { .threeaward img { margin-left: 20px; margin-right: 20px; } } @media(min-width: 1900px) { .threeaward img { margin-left: 30px; margin-right: 30px; } } @media(min-width:86.25em) { .back-to-top { right: 100px } } @media only screen and (min-width:48rem) { h1 { font-size: 3.8125rem } h2 { font-size: 2.25rem } h3 { font-size: 1.5rem } h4 { font-size: 1.5rem } h5 { font-size: 1.25rem } p, li, dt, dl, a { font-size: 1.11rem } .container { grid-row-start: 2; grid-row-end: 3; padding: 7.5rem } } div#wrapper { margin-top: 70px } #news .grid-container { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: auto auto } #news .grid-element { color: white; padding: 20px; font-size: 2em } #news .header_nav { grid-column-start: 1; grid-column-end: 12; grid-row-start: 1; grid-row-end: 2; background: none; z-index: 999; position: fixed; top: 0; left: 0; right: 0; min-height: 100px; min-height: 6.25rem } #news .posts { grid-column-start: 1; grid-column-end: 12; grid-row-start: 3; grid-row-end: 4; display: flex; flex-direction: column; align-items: center } #news .news { width: 1380px; margin: 0; background-size: cover } #news .grid--full { grid-column-start: 1; grid-column-end: 12 } #news .news .client_logo img{ margin-top: 3%; max-height: 80px; display: none; } @media(min-width:86.25em) { div#wrapper { margin-top: 130px } #news .grid-container { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: auto auto } #news .grid-element { color: white; padding: 20px; font-size: 2em } #news .header_nav { grid-column-start: 1; grid-column-end: 12; grid-row-start: 1; grid-row-end: 2; background: none; z-index: 999; position: fixed; top: 0; left: 0; right: 0; min-height: 6.25rem } #news .posts { grid-column-start: 1; grid-column-end: 12; grid-row-start: 3; grid-row-end: 4; display: flex; flex-direction: column; align-items: center } #news .news { width: 1380px; margin: 0; background-size: cover } #news .grid--full { grid-column-start: 1; grid-column-end: 12 } } nav.lan { display: none!important } .logo_small { display: block!important; position: fixed; z-index: 8000; top: 15px; left: 15px; width: 175px; height: 38px; overflow: hidden } .logo_small a { position: absolute; top: 0; left: 0; transition: all .5s ease } .logo_small.hide a { left: -146px } .logo_small img { width: 175px } nav.menu, nav.lan, .logo { display: none } nav ul.lev-0.nav_block li:first-child{ display:none; } nav.service { display: flex; width: 100%; margin: 0 auto } nav.service ul { margin: 0 auto; display: block } nav.service ul li { display: inline-block; transition: transform .2 ease-in; width: 60px; margin: 0!important } nav.service ul li:hover, nav.service ul li:active, nav.service ul li.current, nav.service ul li.active { transition-duration: 400ms; transform: scale(1.4, 1.4); font-weight: 400 } nav.service ul li a { position: relative; top: -5px; text-align: center } nav.service ul li a, nav.service ul li span { text-decoration: none; color: #000; font-size: 16px; text-transform: uppercase; display: block; font-weight: 700 } nav.service ul li a:hover, nav.service ul li a:active, nav.service ul li a.active, nav.service ul li a.current, nav.service ul li span:hover, nav.service ul li span:active, nav.service ul li span.active, nav.service ul li span.current { font-weight: 700; display: block } .burger { display: block } .burger { position: fixed; top: 16px; top: 1rem; right: 16px; right: 1rem; cursor: pointer; z-index: 10000 } .burger__line { display: block; background: black; height: 6px; height: .375rem; width: 56px; width: 3.5rem; transition: all .4s ease-in-out } .burger__line:nth-of-type(2) { margin: 8px 0; margin: .5rem 0 } .burger__line:nth-of-type(3) { width: 56px; width: 3.5rem } .burger.open .burger__line:nth-of-type(1) { transform: translateY(27px) rotate(-45deg) } .burger.open .burger__line:nth-of-type(2) { transform: translateX(100px) } .burger.open .burger__line:nth-of-type(3) { transform: rotate(45deg); width: 56px; width: 3.5rem } .overlay { height: 0; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba(255, 227, 0, .9); overflow: hidden; opacity: 0; transition: .5s; z-index: 7000 } .overlay-content { position: relative; width: 100%; text-align: center; top: 75px } .overlay a { display: block; color: #000; font-size: 36px; text-transform: uppercase; font-weight: 900; text-decoration: none; transition: .5s ease } .overlay a:hover, .overlay a:focus { color: #f3f3f3; transform: scale(1.4, 1.4) } .overlay.open { opacity: 1; visibility: visible; width: 100%; height: 100% } div.overlay li:first-of-type { display:none; } .contact_stoerer { display: none; width: 100px; height: 42px; position: absolute; z-index: 10000; background-color: #ffe300; right: 100px; transition: all .3s ease; margin-top: 5px; transform: skew(-27deg) } .contact_stoerer .white_bg { width: 101%; height: 100%; background-color: #fff; position: absolute; top: 0; transition: all .1s ease-in; z-index: 120; left: 50%; transform: translate(-50%, 0) } .contact_stoerer .gradient_border { height: 5px; width: 100%; position: absolute; z-index: 100; background-image: linear-gradient(to top, #ffe300, #fff); transition: all .3s ease } .contact_stoerer a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) skew(27deg); color: #000; transition: all .3s ease; font-weight: 700; z-index: 150; font-size: 16px; text-transform: uppercase } .contact_stoerer a:hover { color: #ffe300 } .nav-up .contact_stoerer .white_bg { top: -100% } .nav-up .contact_stoerer a { color: #000 } .nav-up .contact_stoerer a:hover { color: #fff } @media(min-width:48em) { nav.service { display: flex; width: 100%; margin: 0 auto } nav.service ul { margin: 0 auto; display: block } nav.service ul li { display: inline-block; transition: transform .2 ease-in; width: 60px; margin: 0!important } nav.service ul li:hover, nav.service ul li:active, nav.service ul li.current, nav.service ul li.active { transition-duration: 400ms; transform: scale(1.4, 1.4); font-weight: 400 } nav.service ul li a { position: relative; top: -5px; text-align: center } nav.service ul li a, nav.service ul li span { text-decoration: none; color: #000; font-size: 16px; text-transform: uppercase; display: block; font-weight: 700 } nav.service ul li a:hover, nav.service ul li a:active, nav.service ul li a.active, nav.service ul li a.current, nav.service ul li span:hover, nav.service ul li span:active, nav.service ul li span.active, nav.service ul li span.current { font-weight: 700; display: block } } @media(min-width:86.25em) { .logo_small { display: none!important } nav.menu, nav.lan, .logo { display: block } header { display: block; margin: 0; height: 85px; position: fixed; top: 0; transition: top .2s ease-in-out; background: white; z-index: 9999; width: 100% } .nav-up { top: -80px } span.logo { width: 270px; z-index: 100; align-items: center; margin-left: 8% } span.logo img { display: grid; width: 228px; height: auto; padding: 20px 0 } span.logo a { text-decoration: none; color: #000; font-weight: 600; font-size: 20px } nav.service { display: flex; width: 100%; margin: 0 auto } nav.service ul { margin: 0 auto; display: block } nav.service ul li { display: inline-block; transition: transform .2 ease-in; width: 60px; margin: 0!important } nav.service ul li:hover, nav.service ul li:active, nav.service ul li.current, nav.service ul li.active { transition-duration: 400ms; transform: scale(1.4, 1.4); font-weight: 400; } nav.service ul li a { position: relative; top: -5px; text-align: center } nav.service ul li a, nav.service ul li span { text-decoration: none; color: #000; font-size: 16px; text-transform: uppercase; display: block; font-weight: 700 } nav.service ul li a:hover, nav.service ul li a:active, nav.service ul li a.active, nav.service ul li a.current, nav.service ul li span:hover, nav.service ul li span:active, nav.service ul li span.active, nav.service ul li span.current { font-weight: 700; display: block } nav { display: flex; text-align: center; align-self: center } nav ol, nav ul { list-style: none } nav ul { display: block; padding: 0; margin: 0 } nav li span.filter { position: relative; top: -5px } nav ul li { display: inline-block; transition: transform .2s ease-in; margin: 0 2% } nav ul li:hover, nav ul li:active, nav ul li.current, nav ul li.active { transition-duration: 400ms; transform: scale(1.4, 1.4); font-weight: 400 } nav ul li a, nav ul li span { text-decoration: none; color: #000; font-size: 16px; text-transform: uppercase; display: block; font-weight: 700 } nav ul li a:hover, nav ul li a:active, nav ul li a.active, nav ul li a.current, nav ul li span:hover, nav ul li span:active, nav ul li span.active, nav ul li span.current { font-weight: 700; display: block } .menu { flex-grow: 1; text-align: right; margin-right: 8%; padding: 20px 0 0; align-items: center } .menu ul { position: relative } .lan { width: 8.33%; flex-grow: 0 } .lan ul li { width: 25px } .lan ul li a { font-size: 12.1px } .main-nav { display: flex; height: 30px; margin: 0; height: 80px; flex-flow: row nowrap; justify-content: space-around; overflow: hidden } .main-nav-scrolled { position: fixed; width: 100%; background-color: #fff; top: -100px; transform: translateY(100px); transition: transform .6s ease-in; z-index: 100 } .burger { display: none } .contact_stoerer { display: block; width: 100px; height: 42px; position: absolute; z-index: 10000; background-color: #ffe300; right: 100px; transition: all .3s ease; margin-top: 5px; transform: skew(-27deg) } .contact_stoerer .white_bg { width: 101%; height: 100%; background-color: #fff; position: absolute; top: 0; transition: all .1s ease-in; z-index: 120; left: 50%; transform: translate(-50%, 0) } .contact_stoerer .gradient_border { height: 5px; width: 100%; position: absolute; z-index: 100; background-image: linear-gradient(to top, #ffe300, #fff); transition: all .3s ease } .contact_stoerer a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) skew(27deg); color: #000; transition: all .3s ease; font-weight: 700; z-index: 150; font-size: 16px; text-transform: uppercase } .contact_stoerer a:hover { color: #ffe300 } .nav-up .contact_stoerer .white_bg { top: -100% } .nav-up .contact_stoerer a { color: #000 } .nav-up .contact_stoerer a:hover { color: #fff } .menu a[href^="/kontakt.html"] { display: none } } .back-to-top { width: 100px; height: 42px; transform: skew(-27deg) } .back-to-top p { transform: skew(27deg); font-weight: 700; text-align: center } @media screen and (max-width:415px) { footer.black { height: 100px; background-color: #000 } footer.black .footer_nav ul li a, footer.black .footer_nav span, footer.black .social_nav ul li a { color: #fff } footer { flex-flow: row } footer .footer_nav { margin-bottom: 20px } footer .footer_nav ul { display: block; text-align: center } footer .footer_nav ul li, footer .footer_nav span { margin: 0; padding: 0; display: inline; margin-right: 30px } footer .footer_nav ul li a { width: 100% } } @media(min-width:20em) { footer { display: flex; align-items: center; align-content: center; margin: 0 auto; justify-content: space-between; padding: 30px 0 } footer .footer_nav { display: flex; margin: 0 auto; padding: 0 0 15px } footer .footer_nav ul { display: block; text-align: center } footer .footer_nav ul li { display: inline-block } footer .footer_nav ul li a, footer .footer_nav span { display: block; transition: 200ms ease-in } footer .footer_nav ul li a:hover, footer .footer_nav ul li a:active, footer .footer_nav ul li a.active, footer .footer_nav ul li a.current, footer .footer_nav span:hover, footer .footer_nav span:active { font-weight: 700 } footer .social_nav { display: flex; margin: 0 auto } footer .social_nav ul { display: block; text-align: center } footer .social_nav ul li { display: inline-block; width: 60px; max-height: 60px; text-align: center; margin: 0; padding: 4% } footer .social_nav ul li a { display: block; transition: 200ms ease-in } footer .social_nav ul li a:hover, footer .social_nav ul li a:active, footer .social_nav ul li a.active, footer .social_nav ul li a.current { font-weight: 700 } footer.black { background-color: #000 } footer.black .footer_nav ul li a, footer.black .footer_nav span, footer.black .social_nav ul li a { color: #fff } } @media(min-width:30em) { footer { display: flex; align-items: center; align-content: center; margin: 0 auto; flex-flow: column; padding: 30px 0 } footer .footer_nav { display: flex; margin: 0 auto; padding: 0 0 15px } footer .footer_nav ul { display: block } footer .footer_nav ul li { display: inline-block; margin: 0 60px } footer .footer_nav ul li a, footer .footer_nav span { display: block; transition: 200ms ease-in; font-weight: 700; text-transform: uppercase; font-size: 1rem } footer .footer_nav ul li a:hover, footer .footer_nav ul li a:active, footer .footer_nav ul li a.active, footer .footer_nav ul li a.current { font-weight: 700 } footer .social_nav { display: flex; margin: 0 auto } footer .social_nav ul { display: block } footer .social_nav ul li { display: inline-block; width: 60px; text-align: center } footer .social_nav ul li a { display: block; transition: 200ms ease-in; font-size: 1.5rem; min-height: 40px } footer .social_nav ul li a:hover, footer .social_nav ul li a:active, footer .social_nav ul li a.active, footer .social_nav ul li a.current { font-weight: 700 } footer.black { background-color: #000 } footer.black .footer_nav ul li a, footer.black .footer_nav span, footer.black .social_nav ul li a { color: #fff } } @media(min-width:86.25em) { footer { display: flex; padding: 20px; justify-content: space-between; padding: 40px 60px; flex-flow: row } footer .yellow { background-color: #ffe300 } footer .footer_nav { display: flex; margin: 0; padding: 0 } footer .footer_nav ul li { margin: 0 60px 0 0 } footer .footer_nav ul li a, footer .social_nav ul li a { color: #000; transition: 200ms ease-in; min-height: 40px } footer .footer_nav ul li a:hover, footer .footer_nav ul li a:active, footer .footer_nav ul li a.active, footer .footer_nav ul li a.current, footer .social_nav ul li a:hover, footer .social_nav ul li a:active, footer .social_nav ul li a.active, footer .social_nav ul li a.current { font-weight: 700 } footer .social_nav { display: flex; margin: 0 } footer .social_nav ul li { width: 60px } footer .social_nav ul li a { font-size: 24px } footer.black { background-color: #000 } footer.black .footer_nav ul li a, footer.black .footer_nav span, footer.black .social_nav ul li a { color: #fff } footer.black .footer_nav ul li:nth-child(2) { width: 250px } } @media(max-width:699px) { .social_nav ul li a { font-size: 2rem } } #project_details nav.overview, #news_details nav.overview, #meister_leistungen nav.overview, #current_details nav.overview { margin: 0 auto; padding: 40px 0 } #project_details nav.overview ul, #news_details nav.overview ul, #meister_leistungen nav.overview ul, #current_details nav.overview ul { display: block; margin: 0; padding: 0 } #project_details nav.overview li, #news_details nav.overview li, #meister_leistungen nav.overview li, #current_details nav.overview li { display: inline-block; width: 150px; transition: transform .2 ease-in-out; text-align: center } #project_details nav.overview li:hover, #project_details nav.overview li.active, #news_details nav.overview li:hover, #news_details nav.overview li.active, #meister_leistungen nav.overview li:hover, #meister_leistungen nav.overview li.active, #current_details nav.overview li:hover, #current_details nav.overview li.active { transform: scale(1.5, 1.5); font-weight: 700; transition-duration: 400ms } #project_details nav.overview li a, #news_details nav.overview li a, #meister_leistungen nav.overview li a, #current_details nav.overview li a { font-size: 1.11rem; text-transform: uppercase; display: block } #project_details nav.overview li:hover a, #news_details nav.overview li a:hover, #meister_leistungen nav.overview li a:hover, #current_details nav.overview li a:hover { font-weight: 700; display: block; transition: transform .2 ease-in-out } #project_details nav.overview .arrow_left:before, #news_details nav.overview .arrow_left:before, #meister_leistungen nav.overview .arrow_left:before, #current_details nav.overview .arrow_left:before, .slider_arrow_left i.arrow_left:before { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(225deg) } .slider_arrow_left i.arrow_left:before { border: 5px solid #fff; border-left-width: 0; border-bottom-width: 0; width: 24px; height: 24px; margin-bottom: 0; } #project_details nav.overview .arrow_right:after, #news_details nav.overview .arrow_right:after, #meister_leistungen nav.overview .arrow_right:after, #current_details nav.overview .arrow_right:after, .slider_arrow_right i.arrow_right:after { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(45deg) } .slider_arrow_right i.arrow_right:after { border: 5px solid #fff; border-left-width: 0; border-bottom-width: 0; width: 24px; height: 24px; margin-bottom: 0; } #project_details .overview, #news_details .overview, #meister_leistungen .overview, #current_details .overview { margin: 30px 0 } #project_details .overview .arrow_left:before, #news_details .overview .arrow_left:before, #meister_leistungen .overview .arrow_left:before, #current_details .overview .arrow_left:before, .slider_arrow_left i.arrow_left:before { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(225deg) } .slider_arrow_left i.arrow_left:before { border: 5px solid #fff; border-left-width: 0; border-bottom-width: 0; width: 24px; height: 24px; margin-bottom: 0; } #project_details .overview .arrow_right:after, #news_details .overview .arrow_right:after, #meister_leistungen .overview .arrow_right:after, #current_details .overview .arrow_right:after, .slider_arrow_right i.arrow_right:after { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(45deg) } .slider_arrow_right i.arrow_right:after { border: 5px solid #fff; border-left-width: 0; border-bottom-width: 0; width: 24px; height: 24px; margin-bottom: 0; } #project_overview .filterlist { display: flex; width: 100vw; padding: 0 0 30px } #project_overview .filterlist ul#filters { display: flex; margin: 0 auto } #project_overview .filterlist ul li { width: 45px } #project_overview .filterlist ul li span { text-decoration: none; color: #000; font-size: 16px; text-transform: uppercase; display: block; font-weight: 700; text-align: center; top: 0 } @media(min-width:48em) { #project_overview .filterlist, #meister_leistungen .filterlist { margin: 30px 0; padding: 0 } #project_overview .filterlist ul li, #meister_leistungen .filterlist ul li { width: 60px } #project_overview .filterlist ul li span, #meister_leistungen .filterlist ul li span { text-decoration: none; color: #000; font-size: 16px; text-transform: uppercase; display: block; font-weight: 700; text-align: center } } @media(min-width:86.25em) { #project_overview .filterlist, #meister_leistungen .filterlist { margin: 30px 0; padding: 0 } #project_overview .filterlist ul li, #meister_leistungen .filterlist ul li { width: 60px } #project_details nav.overview, #news_details nav.overview, #current_details nav.overview, #meister_leistungen nav.overview { margin: 0 auto; padding: 0 0 30px; min-width: 530px } #project_details nav.overview ul, #news_details nav.overview ul, #current_details nav.overview ul, #meister_leistungen nav.overview ul { display: block; margin: 0; padding: 0 } #project_details nav.overview li, #news_details nav.overview li, #current_details nav.overview li, #meister_leistungen nav.overview li { display: inline-block; width: 150px; transition: transform .2 ease-in } #project_details nav.overview li:hover, #project_details nav.overview li.active, #news_details nav.overview li:hover, #news_details nav.overview li.active, #current_details nav.overview li:hover, #current_details nav.overview li.active, #meister_leistungen nav.overview li:hover, #meister_leistungen nav.overview li.active { transform: scale(1.5, 1.5); font-weight: 700 } #project_details nav.overview li a, #news_details nav.overview li a, #current_details nav.overview li a, #meister_leistungen nav.overview li a { font-size: 1.11rem; text-transform: uppercase; display: block; font-weight: 300 } #project_details nav.overview li a:hover, #news_details nav.overview li a:hover, #current_details nav.overview li a:hover, #meister_leistungen nav.overview li a:hover { font-weight: 700; display: block } #project_details nav.overview .arrow_left:before, #news_details nav.overview .arrow_left:before, #current_details nav.overview .arrow_left:before, #meister_leistungen nav.overview .arrow_left:before, .slider_arrow_left i.arrow_left:before { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(225deg) } .slider_arrow_left i.arrow_left:before { border: 5px solid #fff; border-left-width: 0; border-bottom-width: 0; width: 24px; height: 24px; margin-bottom: 0; } #project_details nav.overview .arrow_right:after, #news_details nav.overview .arrow_right:after, #current_details nav.overview .arrow_right:after, #meister_leistungen nav.overview .arrow_right:after, .slider_arrow_right i.arrow_right:after { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(45deg) } .slider_arrow_right i.arrow_right:after { border: 5px solid #fff; border-left-width: 0; border-bottom-width: 0; width: 24px; height: 24px; margin-bottom: 0; } #project_details .overview, #news_details .overview, #current_details .overview, #meister_leistungen .overview { margin: 30px 0 } #project_details .overview .arrow_left:before, #news_details .overview .arrow_left:before, #current_details .overview .arrow_left:before, #meister_leistungen .overview .arrow_left:before, .slider_arrow_left i.arrow_left:before { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(225deg) } .slider_arrow_left i.arrow_left:before { border: 5px solid #fff; border-left-width: 0; border-bottom-width: 0; width: 24px; height: 24px; margin-bottom: 0; } #project_details .overview .arrow_right:after, #news_details .overview .arrow_right:after, #current_details .overview .arrow_right:after, #meister_leistungen .overview .arrow_right:after, .slider_arrow_right i.arrow_right:after { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(45deg) } .slider_arrow_right i.arrow_right:after { border: 5px solid #fff; border-left-width: 0; border-bottom-width: 0; width: 24px; height: 24px; margin-bottom: 0; } } .active_filter { transform: scale(1.4, 1.4)!important } #news .header_hero { display: block } #news .header_hero .fade-in { animation: fade-in 2s ease; visibility: visible; -webkit-backface-visibility: hidden } @keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } } #news .header_hero img.fade-in, #news .header_hero video.fade-in { display: block; background-size: cover; position: relative; margin: 0; padding: 0; z-index: 0 } #news .header_nav ul li { width: 120px; text-align: center } #news .header_nav .logo { display: flex; align-items: flex-start; justify-content: flex-start; flex: 1; height: 51px } #news .header_nav .logo img { display: block } #news .arrow-down { width: 56px; height: 56px; height: 3.5rem; border: 6px solid #fff; border-top-width: 0; border-right-width: 0; position: absolute; z-index: 99; left: 50.5%; top: 0; bottom: 0; transform: translateX(-50%) rotate(-45deg); cursor: pointer; margin-top: calc(100vh - 120px) } #news .arrow-down a { display: block; z-index: 0; width: 100%; height: 100% } #news .animated.bounce { -webkit-animation-name: bouncing; -webkit-animation-duration: 6s; -webkit-animation-iteration-count: infinite; animation-name: bouncing; animation-duration: 6s; animation-iteration-count: infinite } @keyframes bouncing { 0% { top: 0 } 10% { top: 15px } 20% { top: 0 } 100% { top: 0 } } @media(max-width:48em) { #news .arrow-down { margin-top: 80vh!important; display: none!important } #news p.aktuelles { display: none!important } } .random-header { padding: 0!important } .teaser_mobile_only { display: none } .scrolled { position: relative!important } #posts { min-height: 12vh; text-align: center; content-visibility: auto; } .filter { cursor: pointer } .show-news { height: 350px!important; margin: 30px 0 0!important; margin: 1.875rem 0 0!important } .news { opacity: 0; transform: translateY(50px); transition: all 1s ease-out } .news.fade { opacity: 1; transform: translateY(0) } #wrapper { position: relative; background-color: #fff; z-index: 999 } #news h2 { font-size: 3em; margin: 60px 0 30px; text-align: center; font-weight: 600; text-transform: uppercase } #news nav.overview.filterlist { padding: 30px 0; margin: 0 auto; text-align: center; text-transform: uppercase; font-weight: 700 } #news nav.overview.filterlist ul { margin: 0 auto; width: 100% } #news nav.overview.filterlist ul li { margin: 0 auto !important; float: left; padding: 13px; } #news nav.overview.filterlist ul li:hover { transition-duration: 400ms; transform: scale(1.2, 1.2) } #news h3 { text-transform: uppercase; font-weight: 600; width: 80%; margin: 0 auto; word-wrap: break-word; overflow: hidden; line-height: 24px } #news h6, #news .h6 { font-weight: 600 } #news .grid-element.news.fade:after { background-color: rgba(0, 0, 0, .25); content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -1; transition: opacity .45s; border-radius: inherit } #news .grid-element.news.fade.white:after { background-color: rgba(255, 255, 255, .25); content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -1; transition: opacity .45s; border-radius: inherit } #news .grid-element.news.fade:hover:after { opacity: 1 } #news .news { width: 92vw; height: 0; position: relative; transition: 1s ease-in-out; text-align: center; padding: 0; top: 0!important; bottom: 0!important; left: 0!important; right: 0!important; overflow: hidden } #news .news:before { content: ""; position: absolute; width: 100%; height: 100%; background: inherit; z-index: -2; filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="5" /></filter></svg>#filter'); -webkit-filter: blur(5px); filter: blur(5px); top: 0; left: 0; transition: all .5s ease; opacity: 0 } #news .news:hover:before { opacity: 1 } #news .news .fade { opacity: 1; transform: translateY(0) } #news .news p { opacity: 0 } #news .news:hover p, #news .news:hover a { transition: 1s ease-in-out; opacity: 1 } #news .news p { font-size: 14.4px; font-size: .9rem; overflow: hidden; width: 70%; margin: 0 auto; transition: 1s ease-in-out } #news .news .singleview_text { max-height: 380px; overflow: hidden } #news .news .mobile_link { text-transform: unset!important; width: 100%; display: block; position: absolute; left: 0; opacity: 0; font-size: 1.2em; bottom: 30px } #news .news .mobile_link_info { position: absolute; bottom: 14px; text-align: center; width: 100%; left: 0; font-size: 13px } #news .news #date { margin-top: 30px!important } #news .news a { transition: 1s ease-in-out } #news .news p:last-child:after { content: ''; margin: 0 auto } #news .news span.white h6, #news .news span.white .h6, #news .news span.white h3, #news .news span.white p, #news .news span.white a { color: #fff } #news .news span.black h6, #news .news span.black .h6, #news .news span.black h3, #news .news span.black p, #news .news span.black a { color: #000 } #news .news span a { font-size: 100%; text-decoration: underline; } #news .news nav.overview.filterlist li { margin: 10px 0 } #news .show_news:before, #news .show_news:after, #news .news.show_news p, #news .news.show_news a, #news .news:hover p, #news .news:hover a { transition: 1s ease-in-out; opacity: 1!important } .main-heading { display: block; text-align: center } footer.black { height: unset!important } @media(min-width:48em) { #news p.aktuelles { margin: 0 auto; text-align: center } #news h2 { font-size: 60px; margin: 60px 0 30px; text-align: center; font-weight: 600; text-transform: uppercase } #news nav.overview.filterlist { padding: 30px 0; margin: 0 auto; text-align: center; text-transform: uppercase; font-weight: 700 } #news nav.overview.filterlist ul { margin: 0 auto } #news nav.overview.filterlist ul li { margin: 0 auto !important; float: left; padding: 13px; } #news nav.overview.filterlist ul li:hover { transition-duration: 400ms; transform: scale(1.2, 1.2) } #news .news { width: 85vw; height: 0 } #news .news p { opacity: 0 } #news .news p { width: 70%; margin: 0 auto; visibility: visible; transition: 1s ease-in-out } #news .news a { transition: 1s ease-in-out } #news .news .client_logo img{ margin-top: 2%; max-height: 80px; display: inline-block; } #news .news:hover p, #news .news:hover a { transition: 1s ease-in-out; opacity: 1 } #news .news h3 { text-transform: uppercase; font-weight: 600; font-size: 26px; width: 70%; margin: 0 auto; z-index: 999; line-height: unset } .grid-element.news.fade:after { background-color: rgba(0, 0, 0, .25); content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -1; transition: opacity .45s; border-radius: inherit } .grid-element.news.white:after { background-color: rgba(255, 255, 255, .25); content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -1; transition: opacity .45s; border-radius: inherit } .grid-element.news.fade:hover:after { opacity: 1 } .show-news { height: 580px!important; margin: 1.875rem 0 0!important } } @media(min-width:86.25em) { .main-heading { display: none } #news .show-news { height: 580px!important; margin: 1.875rem 0 0!important } #news #posts { max-width: 1380px; width: 90%; margin: 0 auto } #news h6, #news .h6 { font-size: 14px; font-weight: 600 } #news nav.overview.filterlist { padding: 30px 0; margin: 0 auto; text-align: center; text-transform: uppercase; font-weight: 700 } #news nav.overview.filterlist li { width: 200px } #news nav.overview.filterlist li:hover { transition-duration: 400ms; transform: scale(1.2, 1.2) } #news .news { height: 0; position: relative; transition: 1s ease-in-out; max-width: 100%; width: 1380px; text-align: center; padding: 0; top: 0!important; bottom: 0!important; left: 0!important; right: 0!important; overflow: hidden } #news .news p { margin: auto; font-size: .5em; max-width: 700px; opacity: 0; transition: 1s ease-in-out; z-index: 999; max-height: 170px; visibility: visible } #news .news a { text-transform: uppercase; text-decoration: none; font-size: .5em; transition: 1s ease-in-out; z-index: 999 } #news .news h1, #news .news h2, #news .news h3 { text-align: center; text-transform: uppercase; z-index: 999 } #news .news h3 { font-weight: 600; font-size: 36px; width: 70%; margin: 0 auto; z-index: 999 } #news .news #color { position: absolute; width: 100%; height: 100%; left: 0 } #news .news .client_logo img{ margin-top: 2%; max-height: 80px; display: inline-block; } #news .news .mobile_link { text-transform: unset!important; width: 100%; display: block; position: absolute; left: 0; opacity: 0; font-size: 1.2em; bottom: 30px } #news .grid-element.news.fade:hover:after { opacity: 1 } #news .grid-element.news.fade:after { content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -1; transition: opacity .45s; border-radius: inherit } #news .grid-element.news.white:after { content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -1; transition: opacity .45s; border-radius: inherit } #news .description { grid-column-start: 2; grid-column-end: 5; grid-row-start: 4; grid-row-end: 5; background: none } #news h2 { color: #000; font-size: 60px; margin: 60px 0 30px; text-align: center; font-weight: 600; text-transform: uppercase } } .back-to-top { z-index: 9998!important } footer { padding-bottom: 60px!important; padding-top: 20px; flex-flow: column } footer .footer_nav ul li { margin: 0 15px 15px 15px !important } footer .footer_nav ul li a, footer .footer_nav span { font-weight: 700 } #news .header_hero .video:nth-child(2) { display: none } #agency section.video video { width: 100% } @media(max-width:768px) { #news h2 { margin-bottom: 0!important } #news nav.overview.filterlist { padding: 10px 0 0!important } #agency section { margin: 75px 0 25px!important } .projekttext { width: 100%; } .conn aside { padding-left: 0px; } } @media(max-width:1024px) { .slider_wrapper_project .slider_arrow { bottom: 0; } } @media(max-width:834px) { .slider_wrapper_project .slider_arrow { bottom: 0; } } @media(max-width:414px) { .slider_wrapper_project .slider_arrow { bottom: 0; } } @media(max-width:1199px) { .teaser_mobile_only { display: block } } @media(min-width:100px) and (max-width:800px) { #news .news p { font-size: 14px!important; width: 95%!important; line-height: 110%; hyphens: auto; } } @media only screen and (max-width:2561px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(1109.76667px, 1109.76667px)!important } } @media only screen and (max-width:2501px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(1083.76667px, 1083.76667px)!important } } @media only screen and (max-width:2401px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(1040.43333px, 1040.43333px)!important } } @media only screen and (max-width:2301px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(997.1px, 997.1px)!important } } @media only screen and (max-width:2201px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(953.76667px, 953.76667px)!important } } @media only screen and (max-width:2101px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(910.43333px, 910.43333px)!important } } @media only screen and (max-width:2001px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(867.1px, 867.1px)!important } } @media only screen and (max-width:1901px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(823.76667px, 823.76667px)!important } } @media only screen and (max-width:1801px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(780.43333px, 780.43333px)!important } } @media only screen and (max-width:1701px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(737.1px, 737.1px)!important } } @media only screen and (max-width:1601px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(693.76667px, 693.76667px)!important } } @media only screen and (max-width:1501px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(650.43333px, 650.43333px)!important } } @media only screen and (max-width:1401px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(607.1px, 607.1px)!important } } @media only screen and (max-width:1301px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(563.76667px, 563.76667px)!important } } @media only screen and (max-width:1281px) { #projects { grid-template-columns: 1fr 1fr 1fr!important; grid-auto-rows: minmax(555.1px, 555.1px)!important } } @media only screen and (max-width:1201px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(780.65px, 780.65px)!important } } @media only screen and (max-width:1101px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(715.65px, 715.65px)!important } } @media only screen and (max-width:1025px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(666.25px, 666.25px)!important } } @media only screen and (max-width:1001px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(650.65px, 650.65px)!important } .kunden_logo img { padding: 0; } .projekttext { width: 100%; } .conn aside, .kunden_logo { width: 50%; } .kunden_logo { margin-bottom: 20px; } .projekttext { padding-right: 20px; } .conn aside { margin-top: 20px; margin-bottom: 20px; padding-left: 0; } } @media only screen and (max-width:963px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(625.95px, 625.95px)!important } } @media only screen and (max-width:901px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(585.65px, 585.65px)!important } } @media only screen and (max-width:835px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(542.75px, 542.75px)!important } } @media only screen and (max-width:801px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(520.65px, 520.65px)!important } } @media only screen and (max-width:769px) { #projects { grid-template-columns: 1fr 1fr!important; grid-auto-rows: minmax(499.85px, 499.85px)!important } } @media only screen and (max-width:701px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(911.3px, 911.3px)!important } } @media only screen and (max-width:641px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(833.3px, 833.3px)!important } } @media only screen and (max-width:601px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(781.3px, 781.3px)!important } .conn aside, .kunden_logo { width: 100%; } } @media only screen and (max-width:501px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(651.3px, 651.3px)!important } } @media only screen and (max-width:415px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(539.5px, 539.5px)!important } } @media only screen and (max-width:401px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(521.3px, 521.3px)!important } } @media only screen and (max-width:376px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(488.8px, 488.8px)!important } } @media only screen and (max-width:361px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(469.3px, 469.3px)!important } } @media only screen and (max-width:321px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(417.3px, 417.3px)!important } } @media only screen and (max-width:301px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(391.3px, 391.3px)!important } } @media only screen and (max-width:201px) { #projects { grid-template-columns: 1fr!important; grid-auto-rows: minmax(261.3px, 261.3px)!important } } #project_overview #wrapper { min-height: 100vh } #project_overview #projects { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(1080px, 1080px); padding: 0; width: 100vw; transition: all .5s ease } #project_overview #projects { max-width: 2560px !important; margin-left: auto; margin-right: auto; } #project_overview #projects .project_prev { display: none; overflow: hidden; position: relative } #project_overview #projects .project_prev a { position: absolute; top: 0; left: 0; bottom: 0; right: 0 } #project_overview .bg_00 { content: ' '; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; transition: .8s; background-size: cover } #project_overview .bg_00 img { position: relative; top: 0; left: 0; bottom: 0; right: 0; height: 100%; transition: transform .2 ease-in; transition-duration: 800ms; width:auto; display: inline; object-fit: contain; } #project_overview .bg_00 .client_logo_prev img { position: relative; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; transition: transform .2 ease-in; transition-duration: 800ms; --padding-logo: clamp(2.5rem, -0.278rem + 8.889vw, 7.5rem); --img-size: clamp(3.75rem, -1.875rem + 7.5vw, 7.5rem); padding: calc(var(--padding-logo)*0.8) calc(var(--padding-logo)) calc(var(--padding-logo)*0.5) calc(var(--padding-logo)); max-height: calc(var(--padding-logo)*1.5 + var(--img-size)); } @media(max-width:1200px) { #project_overview .bg_00 .client_logo_prev img { --img-size: clamp(3.75rem, 1.667rem + 6.667vw, 7.5rem); } } @media(max-width:1200px) { #project_overview .bg_00 .client_logo_prev img { --img-size: clamp(3.75rem, -1.25rem + 20vw, 7.5rem); } } #project_overview .bg_00.hover img.bg, #project_overview .bg_00:hover img.bg { transform: scale(1.25, 1.25); transition: transform .2 ease-in; transition-duration: 800ms } #project_overview .bg_01:hover:before, #project_overview .bg_01:focus:before, #project_overview .bg_02:hover:before, #project_overview .bg_02:focus:before, #project_overview .bg_03:hover:before, #project_overview .bg_03:focus:before, #project_overview .bg_04:hover:before, #project_overview .bg_04:focus:before, #project_overview .bg_05:hover:before, #project_overview .bg_05:focus:before { transform: scale(1.15) } #project_overview .project_prev .desc { width: 100%; text-align: center; color: #000; text-transform: uppercase; text-decoration: none; position: absolute } #project_overview .project_prev .desc .white { color: #fff } #project_overview .project_prev .client_logo_prev { width: 100%; height: auto; display: block; z-index: 999999; align-items: center; justify-items: center; font-size: 2em } #project_overview .project_prev span.project_teaser.teaser_white { color: #fff } #project_details nav.share, #news_details nav.share, #current_details nav.share { display: flex; justify-content: space-evenly } #project_details .shariff, #news_details .shariff, #current_details .shariff { display: flex; margin: 0 auto } #project_details .shariff ul, #news_details .shariff ul, #current_details .shariff ul { display: block } #project_details .shariff li, #news_details .shariff li, #current_details .shariff li { height: auto!important; margin: 0; padding: 0; display: inline-block } #project_details .shariff li a, #news_details .shariff li a, #current_details .shariff li a { height: auto!important; width: auto!important } #project_details .shariff li .fa, #news_details .shariff li .fa, #current_details .shariff li .fa { line-height: 1em; width: auto!important } #project_details .shariff .orientation-horizontal li, #news_details .shariff .orientation-horizontal li, #current_details .shariff .orientation-horizontal li { min-width: 50px; max-width: 50px } #project_details .shariff .facebook a, #project_details .shariff .pinterest a, #project_details .shariff .twitter a, #project_details .shariff .xing a, #project_details .shariff .linkedin a, #news_details .shariff .facebook a, #news_details .shariff .pinterest a, #news_details .shariff .twitter a, #news_details .shariff .xing a, #news_details .shariff .linkedin a, #current_details .shariff .facebook a, #current_details .shariff .pinterest a, #current_details .shariff .twitter a, #current_details .shariff .xing a, #current_details .shariff .linkedin a { background-color: rgba(255, 255, 255, 0) } #project_details .shariff .facebook a:hover, #project_details .shariff .pinterest a:hover, #project_details .shariff .twitter a:hover, #project_details .shariff .xing a:hover, #project_details .shariff .linkedin a:hover, #news_details .shariff .facebook a:hover, #news_details .shariff .pinterest a:hover, #news_details .shariff .twitter a:hover, #news_details .shariff .xing a:hover, #news_details .shariff .linkedin a:hover, #current_details .shariff .facebook a:hover, #current_details .shariff .pinterest a:hover, #current_details .shariff .twitter a:hover, #current_details .shariff .xing a:hover, #current_details .shariff .linkedin a:hover { background-color: rgba(255, 255, 255, 0) } #project_details span.share_text, #news_details span.share_text, #current_details span.share_text { display: none!important; visibility: hidden } #project_details .shariff .facebook .fa-facebook, #project_details .shariff .pinterest .fa-pinterest-p, #project_details .shariff .twitter .fa-twitter, #project_details .shariff .xing .fa-xing, #project_details .shariff .linkedin .fa-linkedin, #news_details .shariff .facebook .fa-facebook, #news_details .shariff .pinterest .fa-pinterest-p, #news_details .shariff .twitter .fa-twitter, #news_details .shariff .xing .fa-xing, #news_details .shariff .linkedin .fa-linkedin, #current_details .shariff .facebook .fa-facebook, #current_details .shariff .pinterest .fa-pinterest-p, #current_details .shariff .twitter .fa-twitter, #current_details .shariff .xing .fa-xing, #current_details .shariff .linkedin .fa-linkedin { font-size: 24px; display: block; text-align: center } #project_details .shariff .facebook .fa-facebook span, #project_details .shariff .pinterest .fa-pinterest-p span, #project_details .shariff .twitter .fa-twitter span, #project_details .shariff .xing .fa-xing span, #project_details .shariff .linkedin .fa-linkedin span, #news_details .shariff .facebook .fa-facebook span, #news_details .shariff .pinterest .fa-pinterest-p span, #news_details .shariff .twitter .fa-twitter span, #news_details .shariff .xing .fa-xing span, #news_details .shariff .linkedin .fa-linkedin span, #current_details .shariff .facebook .fa-facebook span, #current_details .shariff .pinterest .fa-pinterest-p span, #current_details .shariff .twitter .fa-twitter span, #current_details .shariff .xing .fa-xing span, #current_details .shariff .linkedin .fa-linkedin span { display: block; text-align: center } #project_details .middle_pos, #news_details .middle_pos, #current_details .middle_pos { display: flex; margin: 0 auto; flex-flow: column } #project_details .middle_pos p, #news_details .middle_pos p, #current_details .middle_pos p { text-align: center; margin-bottom: 15px } #project_details .responsive-video.active, #news_details .responsive-video, #current_details .responsive-video { position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; } #project_details .responsive-video iframe, #news_details .responsive-video iframe, #current_details .responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% } #project_details .swiper-button-prev, #news_details .swiper-button-prev, #current_details .swiper-button-prev { left: 35px!important; width: 50px; height: 50px; border: 3px solid #fff; border-left-width: 0; border-bottom-width: 0; display: none; transform: rotate(-135deg); cursor: pointer; z-index: 99; background: none; opacity: 1; transition: .5s ease-in-out } #project_details .swiper-button-prev:hover, #news_details .swiper-button-prev:hover, #current_details .swiper-button-prev:hover { display: block } #project_details .swiper-button-next, #news_details .swiper-button-next, #current_details .swiper-button-next { right: 35px!important; width: 50px; height: 50px; border: 3px solid #fff; display: none; transform: rotate(-135deg); cursor: pointer; z-index: 99; background: none; border-top-width: 0; border-right-width: 0; opacity: 1; transition: .5s ease-in-out } #project_details .swiper-container, #news_details .swiper-container, #current_details .swiper-container { transition: .5s ease-in-out } #project_details .swiper-container:hover .swiper-button-next, #project_details .swiper-container:hover .swiper-button-prev, #news_details .swiper-container:hover .swiper-button-next, #news_details .swiper-container:hover .swiper-button-prev, #current_details .swiper-container:hover .swiper-button-next, #current_details .swiper-container:hover .swiper-button-prev { display: block } #project_details .swiper-container .gradient, #news_details .swiper-container .gradient, #current_details .swiper-container .gradient { width: 100%; height: 600px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; transition: .5s ease-in-out } #project_details .swiper-container .gradient:hover, #news_details .swiper-container .gradient:hover, #current_details .swiper-container .gradient:hover { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(transparent)); transition: .5s ease-in-out } #project_details .swiper-button-next.swiper-button-white:hover, #project_details .swiper-button-next.swiper-button-white.hover, #news_details .swiper-button-next.swiper-button-white:hover, #news_details .swiper-button-next.swiper-button-white.hover, #current_details .swiper-button-next.swiper-button-white:hover, #current_details .swiper-button-next.swiper-button-white.hover { transition: .5s ease-in-out; transform: rotate(-135deg) scale(1.15, 1.15) } #project_details .swiper-button-prev.swiper-button-white:hover, #project_details .swiper-button-prev.swiper-button-white.hover, #news_details .swiper-button-prev.swiper-button-white:hover, #news_details .swiper-button-prev.swiper-button-white.hover, #current_details .swiper-button-prev.swiper-button-white:hover, #current_details .swiper-button-prev.swiper-button-white.hover { transition: .5s ease-in-out; transform: rotate(-135deg) scale(1.15, 1.15) } #project_details .swiper-button-disabled, #news_details .swiper-button-disabled, #current_details .swiper-button-disabled { opacity: .5 } #project_details .swiper-slide img, #news_details .swiper-slide img, #current_details .swiper-slide img { width: 100%!important; height: auto!important } #project_details .center_image_projects, #news_details .center_image_projects, #current_details .center_image_projects { width: 100%; height: auto; position: relative; margin: 60px 0 } #project_details .center_image_projects.mockup, #news_details .center_image_projects.mockup, #current_details .center_image_projects.mockup { height: 600px } #project_details .smartphone, #news_details .smartphone, #current_details .smartphone { background: url(/assets/img/smartphone_19.png); width: 180px; height: 353px; background-size: contain; background-repeat: no-repeat; position: absolute; top: -30px; right: 5.5%; padding: 25px 30px 35px 15px } #project_details .smartphone .smart_screen, #news_details .smartphone .smart_screen, #current_details .smartphone .smart_screen { width: auto; height: 100%; overflow: hidden; animation: slide 312s infinite } #project_details .smartphone .smart_screen:hover, #news_details .smartphone .smart_screen:hover, #current_details .smartphone .smart_screen:hover { animation-play-state: paused } #project_details .tablet, #news_details .tablet, #current_details .tablet { background: url(/assets/img/tablet_19.png); width: 375px; height: 305px; background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -60px; left: 2.5%; padding: 15px 25px 50px 15px } #project_details .tablet .tab_screen, #news_details .tablet .tab_screen, #current_details .tablet .tab_screen { width: auto; height: 100%; overflow: hidden; animation: slide 212s infinite } #project_details .tablet .tab_screen:hover, #news_details .tablet .tab_screen:hover, #current_details .tablet .tab_screen:hover { animation-play-state: paused } @keyframes slide { 0% { background-position-y: 0 } 50% { background-position-y: 100% } 100% { background-position-y: 0 } } #project_details section, #project_details article, #news_details section, #news_details article, #current_details section, #current_details article { flex-flow: row } #project_details .main_content.projects article, #project_details .main_content.news_detail article, #project_details .main_content.current_details article, #news_details .main_content.projects article, #news_details .main_content.news_detail article, #news_details .main_content.current_details article, #current_details .main_content.projects article, #current_details .main_content.news_detail article, #current_details .main_content.current_details article { padding: 0 20px 0 20px; grid-row-gap: 20px } #project_details h2, #news_details h2, #current_details h2 { font-weight: 600 } #project_details .more_proj_details article div, #project_details .more_news_details article div, #project_details .more_current_details article div, #news_details .more_proj_details article div, #news_details .more_news_details article div, #news_details .more_current_details article div, #current_details .more_proj_details article div, #current_details .more_news_details article div, #current_details .more_current_details article div { margin: 20px 0 } #project_details .more_proj_details article ul li, #project_details .more_news_details article ul li, #project_details .more_current_details article ul li, #news_details .more_proj_details article ul li, #news_details .more_news_details article ul li, #news_details .more_current_details article ul li, #current_details .more_proj_details article ul li, #current_details .more_news_details article ul li, #current_details .more_current_details article ul li { list-style: none } #project_details .client_logo, #news_details .client_logo, #current_details .client_logo { display: flex; margin: 0; width: 180px; overflow: hidden } #project_details .client_logo img, #news_details .client_logo img, #current_details .client_logo img { width: 100%; height: 180px; margin-top: 10px } #project_details .last_image_projects .image-wrapper, #news_details .last_image_projects .image-wrapper, #current_details .last_image_projects .image-wrapper { display: block; margin: 15px; height: auto } #project_details .last_image_projects .image-wrapper .img_secound, #news_details .last_image_projects .image-wrapper .img_secound, #current_details .last_image_projects .image-wrapper .img_secound { display: flex; flex-flow: column; width: 100% } #project_details .last_image_projects .image-wrapper .img_placeholder_00, #news_details .last_image_projects .image-wrapper .img_placeholder_00, #current_details .last_image_projects .image-wrapper .img_placeholder_00 { display: flex; flex-flow: column; margin: 0 0 10px; width: 100% } #project_details .last_image_projects .image-wrapper .img_placeholder_00 img, #news_details .last_image_projects .image-wrapper .img_placeholder_00 img, #current_details .last_image_projects .image-wrapper .img_placeholder_00 img { width: 100%; height: auto; object-fit: cover } #project_details .last_image_projects .image-wrapper .img_placeholder_01, #news_details .last_image_projects .image-wrapper .img_placeholder_01, #current_details .last_image_projects .image-wrapper .img_placeholder_01 { display: flex; flex-flow: column; margin: 0 0 10px } #project_details .last_image_projects .image-wrapper .img_placeholder_01 img, #news_details .last_image_projects .image-wrapper .img_placeholder_01 img, #current_details .last_image_projects .image-wrapper .img_placeholder_01 img { width: 100%; height: auto; object-fit: cover } #project_details .last_image_projects .image-wrapper .img_placeholder_02, #news_details .last_image_projects .image-wrapper .img_placeholder_02, #current_details .last_image_projects .image-wrapper .img_placeholder_02 { display: flex; flex-flow: column; margin: 0 } #project_details .last_image_projects .image-wrapper .img_placeholder_02 img, #news_details .last_image_projects .image-wrapper .img_placeholder_02 img, #current_details .last_image_projects .image-wrapper .img_placeholder_02 img { width: 100%; height: auto; object-fit: cover } #project_details .sharing, #news_details .sharing, #current_details .sharing { display: flex; flex-flow: row; margin: 0 auto; align-items: center; align-self: center; align-content: center; padding: 20px 0 40px } #project_details .sharing p, #news_details .sharing p, #current_details .sharing p { text-transform: uppercase; padding-left: 18px } #project_details .sharing .share ul, #news_details .sharing .share ul, #current_details .sharing .share ul { display: block; width: auto } #project_details .sharing .share ul li, #news_details .sharing .share ul li, #current_details .sharing .share ul li { display: inline-block; width: 50px; text-align: center; transition-duration: 400ms; margin: 0 } #project_details .sharing .share ul li a, #news_details .sharing .share ul li a, #current_details .sharing .share ul li a { font-size: 20px; font-size: 1.25rem; color: #000 } #project_details .sharing .share ul li:hover, #project_details .sharing .share ul li.hover, #news_details .sharing .share ul li:hover, #news_details .sharing .share ul li.hover, #current_details .sharing .share ul li:hover, #current_details .sharing .share ul li.hover { transition: transform .2 ease-in; transform: scale(1.2, 1.2) } #project_details nav.overview, #news_details nav.overview, #current_details nav.overview { text-align: center; display: flex; flex-flow: row nowrap; justify-content: center; width: 100% } #project_details nav.overview ul, #news_details nav.overview ul, #current_details nav.overview ul { width: 100%; display: flex } #project_details nav.overview li, #news_details nav.overview li, #current_details nav.overview li { width: 100%; margin: 0 0 10px } #project_details nav.overview:first-child, #news_details nav.overview:first-child, #current_details nav.overview:first-child { display: none } #project_details .hideMobile, #news_details .hideMobile, #current_details .hideMobile { display: none!important } #project_details article div.services { display: flex; order: 2; width: 100%; align-content: space-around; justify-content: center; flex-wrap: wrap; margin: auto; } #project_details article div.services div { width: auto; min-width: 265px; padding: 0 15px; } #project_details .more_proj_details.project_text article h2 { margin-top: 30px; } @media(max-width:1100px){ #project_details article div.services { width: 708px; } } @media(min-width:48em) { #project_details .hideMobile, #news_details .hideMobile, #current_details .hideMobile { display: block!important } #project_details .swiper-slide img, #news_details .swiper-slide img, #current_details .swiper-slide img { width: 100%!important; height: auto!important } #project_details .client_logo, #news_details .client_logo, #current_details .client_logo { display: flex; margin: 0; width: 180px; overflow: hidden } #project_details .client_logo img, #news_details .client_logo img, #current_details .client_logo img { width: 100%; height: 180px; margin-top: 10px } #project_details .last_image_projects .image-wrapper, #news_details .last_image_projects .image-wrapper, #current_details .last_image_projects .image-wrapper { display: flex; margin: 0 auto; height: auto } #project_details .last_image_projects .image-wrapper .img_secound, #news_details .last_image_projects .image-wrapper .img_secound, #current_details .last_image_projects .image-wrapper .img_secound { display: flex; flex-flow: column; width: 100% } #project_details .last_image_projects .image-wrapper .img_placeholder_00, #news_details .last_image_projects .image-wrapper .img_placeholder_00, #current_details .last_image_projects .image-wrapper .img_placeholder_00 { display: flex; flex-flow: column; background-size: cover!important; margin: 0 10px 0 0; width: 100% } #project_details .last_image_projects .image-wrapper .img_placeholder_00 img, #news_details .last_image_projects .image-wrapper .img_placeholder_00 img, #current_details .last_image_projects .image-wrapper .img_placeholder_00 img { width: 100%; height: auto; object-fit: cover } #project_details .last_image_projects .image-wrapper .img_placeholder_01, #news_details .last_image_projects .image-wrapper .img_placeholder_01, #current_details .last_image_projects .image-wrapper .img_placeholder_01 { display: flex; flex-flow: column; margin: 0; background-size: cover!important } #project_details .last_image_projects .image-wrapper .img_placeholder_01 img, #news_details .last_image_projects .image-wrapper .img_placeholder_01 img, #current_details .last_image_projects .image-wrapper .img_placeholder_01 img { width: 100%; height: auto; object-fit: cover } #project_details .last_image_projects .image-wrapper .img_placeholder_02, #news_details .last_image_projects .image-wrapper .img_placeholder_02, #current_details .last_image_projects .image-wrapper .img_placeholder_02 { display: flex; flex-flow: column; margin: 0; background-size: cover!important } #project_details .last_image_projects .image-wrapper .img_placeholder_02 img, #news_details .last_image_projects .image-wrapper .img_placeholder_02 img, #current_details .last_image_projects .image-wrapper .img_placeholder_02 img { width: 100%; height: auto; object-fit: cover } #project_details nav.overview nav.overview, #news_details nav.overview nav.overview, #current_details nav.overview nav.overview { text-align: center; display: flex; margin: 0 auto } #project_details nav.overview nav.overview ul, #news_details nav.overview nav.overview ul, #current_details nav.overview nav.overview ul { margin: 0 auto; text-align: center } #project_details nav.overview nav.overview li, #news_details nav.overview nav.overview li, #current_details nav.overview nav.overview li { width: 150px } #project_details nav.overview nav.overview:first-child, #news_details nav.overview nav.overview:first-child, #current_details nav.overview nav.overview:first-child { display: block } #project_details .center_image_projects, #news_details .center_image_projects, #current_details .center_image_projects { width: 100%; height: auto; position: relative; margin: 80px 0 60px } #project_details .center_image_projects.mockup, #news_details .center_image_projects.mockup, #current_details .center_image_projects.mockup { height: 600px } #project_details .center_image_projects.mockup .smartphone, #news_details .center_image_projects.mockup .smartphone, #current_details .center_image_projects.mockup .smartphone { background: url(/assets/img/smartphone_19.png); width: 240px; height: 463px; background-size: contain; background-repeat: no-repeat; position: absolute; top: -60px; right: 60px; padding: 25px 45px 35px 15px } #project_details .center_image_projects.mockup .smartphone .smart_screen, #news_details .center_image_projects.mockup .smartphone .smart_screen, #current_details .center_image_projects.mockup .smartphone .smart_screen { width: auto; height: 100%; overflow: hidden; animation: slide 212s infinite } #project_details .center_image_projects.mockup .smartphone .smart_screen:hover, #news_details .center_image_projects.mockup .smartphone .smart_screen:hover, #current_details .center_image_projects.mockup .smartphone .smart_screen:hover { animation-play-state: paused } #project_details .center_image_projects.mockup .tablet, #news_details .center_image_projects.mockup .tablet, #current_details .center_image_projects.mockup .tablet { background: url(/assets/img/tablet_19.png); width: 595px; height: 455px; background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -80px; left: 60px; padding: 15px 35px 55px 15px } #project_details .center_image_projects.mockup .tablet .tab_screen, #news_details .center_image_projects.mockup .tablet .tab_screen, #current_details .center_image_projects.mockup .tablet .tab_screen { width: auto; height: 100%; overflow: hidden; animation: slide 212s infinite } #project_details .center_image_projects.mockup .tablet .tab_screen:hover, #news_details .center_image_projects.mockup .tablet .tab_screen:hover, #current_details .center_image_projects.mockup .tablet .tab_screen:hover { animation-play-state: paused } @keyframes slide { 0% { background-position-y: 0 } 50% { background-position-y: 100% } 100% { background-position-y: 0 } } } @media(min-width:48em) and (min-width:86.25em) { #project_details section, #project_details article, #news_details section, #news_details article, #current_details section, #current_details article { display: block } #project_details :focus, #news_details :focus, #current_details :focus { outline: none } #project_details .main_content.projects, #project_details .main_content.news_detail, #project_details .main_content.current_details, #news_details .main_content.projects, #news_details .main_content.news_detail, #news_details .main_content.current_details, #current_details .main_content.projects, #current_details .main_content.news_detail, #current_details .main_content.current_details { width: 1380px; margin: 0 auto } #project_details .main_content.projects article, #project_details .main_content.news_detail article, #project_details .main_content.current_details article, #news_details .main_content.projects article, #news_details .main_content.news_detail article, #news_details .main_content.current_details article, #current_details .main_content.projects article, #current_details .main_content.news_detail article, #current_details .main_content.current_details article { margin: 45px 0; padding: 0 0px; max-width: 1000px; max-width: 1200px; margin: 0 auto; } #project_details .main_content.projects article p, #project_details .main_content.projects article h2, #project_details .main_content.news_detail article p, #project_details .main_content.news_detail article h2, #project_details .main_content.current_details article p, #project_details .main_content.current_details article h2, #news_details .main_content.projects article p, #news_details .main_content.projects article h2, #news_details .main_content.news_detail article p, #news_details .main_content.news_detail article h2, #news_details .main_content.current_details article p, #news_details .main_content.current_details article h2, #current_details .main_content.projects article p, #current_details .main_content.projects article h2, #current_details .main_content.news_detail article p, #current_details .main_content.news_detail article h2, #current_details .main_content.current_details article p, #current_details .main_content.current_details article h2 { flex-flow: row } #project_details .swiper-container, #news_details .swiper-container, #current_details .swiper-container { width: 100%; height: 610px; margin: 0 auto; position: relative; overflow: hidden; z-index: 1 } #project_details .swiper-slide img, #news_details .swiper-slide img, #current_details .swiper-slide img { width: 100%!important; height: 600px!important } #project_details .center_image_projects, #news_details .center_image_projects, #current_details .center_image_projects { width: 100%; height: 600px; position: relative; margin: 60px 0 } #project_details .center_image_projects.mockup, #news_details .center_image_projects.mockup, #current_details .center_image_projects.mockup { height: 600px; margin: 120px 0 } #project_details .smartphone, #news_details .smartphone, #current_details .smartphone { background: url(/assets/img/smartphone_19.png); width: 230px; height: 413px; background-size: contain; background-repeat: no-repeat; position: absolute; top: -80px; right: 80px; padding: 45px 45px 55px 15px } #project_details .smartphone .smart_screen, #news_details .smartphone .smart_screen, #current_details .smartphone .smart_screen { width: auto; height: 100%; overflow: hidden; animation: slide 212s infinite } #project_details .smartphone .smart_screen:hover, #news_details .smartphone .smart_screen:hover, #current_details .smartphone .smart_screen:hover { animation-play-state: paused } #project_details .tablet, #news_details .tablet, #current_details .tablet { background: url(/assets/img/tablet_19.png); width: 735px; height: 565px; background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -120px; left: 100px; padding: 25px 65px 65px 45px } #project_details .tablet .tab_screen, #news_details .tablet .tab_screen, #current_details .tablet .tab_screen { width: auto; height: 100%; overflow: hidden; animation: slide 212s infinite } #project_details .tablet .tab_screen:hover, #news_details .tablet .tab_screen:hover, #current_details .tablet .tab_screen:hover { animation-play-state: paused } @keyframes slide { 0% { background-position-y: 0 } 50% { background-position-y: 100% } 100% { background-position-y: 0 } } #project_details section.project_details article, #project_details section.news_detail article, #project_details section.current_details article, #news_details section.project_details article, #news_details section.news_detail article, #news_details section.current_details article, #current_details section.project_details article, #current_details section.news_detail article, #current_details section.current_details article { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 12px } #project_details section.project_details article .con, #project_details section.news_detail article .con, #project_details section.current_details article .con, #news_details section.project_details article .con, #news_details section.news_detail article .con, #news_details section.current_details article .con, #current_details section.project_details article .con, #current_details section.news_detail article .con, #current_details section.current_details article .con { order: 2; display: flex; flex-flow: row } #project_details section.project_details article .con { order: 1; } #project_details section.project_details article h2, #project_details section.news_detail article h2, #project_details section.current_details article h2, #news_details section.project_details article h2, #news_details section.news_detail article h2, #news_details section.current_details article h2, #current_details section.project_details article h2, #current_details section.news_detail article h2, #current_details section.current_details article h2 { flex-flow: row; font-size: 38px; margin: 0; font-weight: 600; margin: 0 0 30px } #project_details section.project_details article p, #project_details section.news_detail article p, #project_details section.current_details article p, #news_details section.project_details article p, #news_details section.news_detail article p, #news_details section.current_details article p, #current_details section.project_details article p, #current_details section.news_detail article p, #current_details section.current_details article p { display: flex; order: 1; flex-flow: row } #project_details section.project_details article aside, #project_details section.news_detail article aside, #project_details section.current_details article aside, #news_details section.project_details article aside, #news_details section.news_detail article aside, #news_details section.current_details article aside, #current_details section.project_details article aside, #current_details section.news_detail article aside, #current_details section.current_details article aside { margin-left: 50px; order: 2 } #project_details section.project_details article aside strong, #project_details section.news_detail article aside strong, #project_details section.current_details article aside strong, #news_details section.project_details article aside strong, #news_details section.news_detail article aside strong, #news_details section.current_details article aside strong, #current_details section.project_details article aside strong, #current_details section.news_detail article aside strong, #current_details section.current_details article aside strong { padding: 16px 0 } #project_details section.project_details article .client_logo, #project_details section.news_detail article .client_logo, #project_details section.current_details article .client_logo, #news_details section.project_details article .client_logo, #news_details section.news_detail article .client_logo, #news_details section.current_details article .client_logo, #current_details section.project_details article .client_logo, #current_details section.news_detail article .client_logo, #current_details section.current_details article .client_logo { display: flex; order: 3; margin-left: 60px; min-width: 180px; min-height: 180px } #project_details section.project_details article .client_logo img, #project_details section.news_detail article .client_logo img, #project_details section.current_details article .client_logo img, #news_details section.project_details article .client_logo img, #news_details section.news_detail article .client_logo img, #news_details section.current_details article .client_logo img, #current_details section.project_details article .client_logo img, #current_details section.news_detail article .client_logo img, #current_details section.current_details article .client_logo img { width: 180px; height: 180px } #project_details .more_proj_details article, #project_details .more_news_detail article, #project_details .more_current_details article, #news_details .more_proj_details article, #news_details .more_news_detail article, #news_details .more_current_details article, #current_details .more_proj_details article, #current_details .more_news_detail article, #current_details .more_current_details article { display: flex; flex-flow: column } #project_details .more_proj_details article h2, #project_details .more_news_detail article h2, #project_details .more_current_details article h2, #news_details .more_proj_details article h2, #news_details .more_news_detail article h2, #news_details .more_current_details article h2, #current_details .more_proj_details article h2, #current_details .more_news_detail article h2, #current_details .more_current_details article h2 { font-weight: 600; display: flex; order: 1; flex-flow: row } #project_details .more_proj_details article div.services, #project_details .more_news_detail article div.services, #project_details .more_current_details article div.services, #news_details .more_proj_details article div.services, #news_details .more_news_detail article div.services, #news_details .more_current_details article div.services, #current_details .more_proj_details article div.services, #current_details .more_news_detail article div.services, #current_details .more_current_details article div.services { display: flex; order: 2; width: 100%; align-content: space-around } #project_details .more_proj_details article div, #project_details .more_news_detail article div, #project_details .more_current_details article div, #news_details .more_proj_details article div, #news_details .more_news_detail article div, #news_details .more_current_details article div, #current_details .more_proj_details article div, #current_details .more_news_detail article div, #current_details .more_current_details article div { display: block; width: 100% } #project_details .more_proj_details article ul, #project_details .more_proj_details article ul li, #project_details .more_news_detail article ul, #project_details .more_news_detail article ul li, #project_details .more_current_details article ul, #project_details .more_current_details article ul li, #news_details .more_proj_details article ul, #news_details .more_proj_details article ul li, #news_details .more_news_detail article ul, #news_details .more_news_detail article ul li, #news_details .more_current_details article ul, #news_details .more_current_details article ul li, #current_details .more_proj_details article ul, #current_details .more_proj_details article ul li, #current_details .more_news_detail article ul, #current_details .more_news_detail article ul li, #current_details .more_current_details article ul, #current_details .more_current_details article ul li { list-style: none; padding: 0; margin: 0 } #project_details .image-wrapper, #news_details .image-wrapper, #current_details .image-wrapper { width: 100%; margin: 0 auto; height: 600px } #project_details .last_image_projects, #news_details .last_image_projects, #current_details .last_image_projects { min-height: 690px } #project_details .last_image_projects .image-wrapper, #news_details .last_image_projects .image-wrapper, #current_details .last_image_projects .image-wrapper { display: flex; height: 690px } #project_details .last_image_projects .image-wrapper .img_placeholder_00, #news_details .last_image_projects .image-wrapper .img_placeholder_00, #current_details .last_image_projects .image-wrapper .img_placeholder_00 { display: flex; background-size: cover; margin: 0; flex-flow: column; height: auto; width: 100% } #project_details .last_image_projects .image-wrapper .img_placeholder_01, #news_details .last_image_projects .image-wrapper .img_placeholder_01, #current_details .last_image_projects .image-wrapper .img_placeholder_01 { display: flex; flex-flow: row; background-size: cover; height: 50%; margin: 0 0 2.5% 2.5% } #project_details .last_image_projects .image-wrapper .img_secound.half .img_placeholder_01, #news_details .last_image_projects .image-wrapper .img_secound.half .img_placeholder_01, #current_details .last_image_projects .image-wrapper .img_secound.half .img_placeholder_01 { height: 100%; margin: 0 0 0 2.5% } #project_details .last_image_projects .image-wrapper .img_placeholder_02, #news_details .last_image_projects .image-wrapper .img_placeholder_02, #current_details .last_image_projects .image-wrapper .img_placeholder_02 { display: flex; flex-flow: row; height: 50%; background-size: cover; margin: 0 0 0 2.5% } #project_details .sharing, #news_details .sharing, #current_details .sharing { display: flex; flex-flow: row; margin: 0 auto; padding: 20px 0 80px; align-content: center; align-self: center; align-items: center } #project_details .sharing p, #news_details .sharing p, #current_details .sharing p { text-transform: uppercase } #project_details nav.share, #news_details nav.share, #current_details nav.share { display: flex } #project_details nav.share ul li, #news_details nav.share ul li, #current_details nav.share ul li { width: 50px } #project_details nav.share ul li a, #news_details nav.share ul li a, #current_details nav.share ul li a { font-size: 30px } nav.overview { text-align: center } nav.overview li { width: 150px } } .hide_on_mobile { display: none!important } .smartphone_mockup, .tablet_mockup { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain } .smartphone_mockup { background-image: url(/assets/img/smartphone_19.png) } .tablet_mockup { background-image: url(/assets/img/tablet_19.png) } .tablet { padding: 2px 2px 40px!important } .smartphone { padding: 3px 10px 3px 3px!important } .tab_screen, .smart_screen { border-radius: 15px!important } @media(min-width:768px) { .hide_on_desktop { display: none!important } .hide_on_mobile { display: block!important } .tablet { padding: 5px 5px 38px!important } .smartphone { padding: 5px 20px 5px 5px!important } } .text_head_2 { display: block } .parallax { margin-left: auto; margin-right: auto; } #agency .wrapper { overflow: hidden } #agency section.main_content { display: block; width: 100%; max-width: 2560px !important; margin-left: auto; margin-right: auto; height: 100% } #agency strong { font-weight: 600!important } #agency .desire, #agency .work { display: flex; position: relative; align-items: center; margin: 80px 0; min-height: 60vh; width: 100vw } #agency .desire h2, #agency .work h2 { color: #ffe300; font-weight: 900; text-transform: uppercase; font-size: 17.85vw; line-height: .7em; align-self: center } #agency .desire h3, #agency .work h3 { display: flex; font-weight: 900; font-size: 35px; line-height: 28px; margin: 0 0 30px } #agency .desire .text_wrapper, #agency .work .text_wrapper { display: flex; width: 100%; padding: 0 20px; margin: 0 auto; flex-flow: column; z-index: 1 } #agency .desire .text, #agency .work .text { display: flex; flex-flow: column; align-self: center; margin: 30px auto 0; position: relative } #agency .clients { display: flex; flex-flow: column; align-items: center; position: relative } #agency .clients h2 { display: flex; color: #fff; font-weight: 900; font-size: 27.15vw; text-transform: uppercase; position: absolute; bottom: unset!important; z-index: 0; left: 0; top: 50%; transform: translate(0, -50%); margin: 0!important; line-height: 100% } #agency .clients .logo_wrapper { display: block; width: 100vw; max-width: 1599px; z-index: 1 } #agency .clients .first_row, #agency .clients .secound_row, #agency .clients .third_row { display: flex; justify-content: space-around; flex-flow: row wrap } #agency .clients .first_row .logo_client_slider, #agency .clients .secound_row .logo_client_slider, #agency .clients .third_row .logo_client_slider { width: 320px; float: left; height: 210px; position: relative; overflow: visible; margin: 0 0 3%; } #agency .clients .first_row .slide1- .logo-resize, #agency .clients .secound_row .slide1- .logo-resize, #agency .clients .third_row .slide1- .logo-resize { width: 100%; opacity: 0; transition: all 1s ease; position: absolute; padding: 70px; height: fit-content; max-height: 100%; filter: brightness(0); } #agency .clients .first_row .slide1- .logo-fade, #agency .clients .secound_row .slide1- .logo-fade, #agency .clients .third_row .slide1- .logo-fade { opacity: 1; } #agency .logo_client_slider > div { width: 100%; height: 100%; display: flex; align-items: center; } #agency .agency { display: flex; flex-flow: column } #agency .agency .text { display: flex; flex-flow: column; margin: 0 auto } #agency .agency .text p { display: flex; margin: 0 auto; padding: 5px 0 } #agency section.panel.agency { display: flex } #agency section.panel.agency .head_pos { display: block!important } #agency section.panel.agency .head_00 { display: flex; flex-flow: column; margin: 0 auto } #agency section.panel.agency .head_00 .picture_00 { display: flex; width: 100%; height: auto; margin: 0; padding: 0 } #agency section.panel.agency .head_00 .picture_00 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency section.panel.agency .head_00 .picture_00 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency section.panel.agency .head_00 .picture_00 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency .picture_01 { display: flex; width: 100%; height: auto; margin: 0; padding: 0 } #agency .picture_01 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .picture_01 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .picture_01 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency .text { margin: 0 auto; width: 100%; padding: 30px 0 } #agency .gen_pos { background-color: #ffe300; width: 100vw; align-items: center } #agency .gen_pos .general_desc { margin: 0 auto } #agency .gen_pos .general_desc p { padding: 30px 20px } #agency .head_01 { display: flex; flex-flow: column-reverse } #agency .picture_02 { order: 1; min-width: unset } #agency .picture_02 .video .thevideo { position: relative; left: 50%; transform: translate(-50%, 0) } @media(min-width:1400) { #agency .desire h2, #agency .work h2 { font-size: 17.85vw; line-height: .7em } #agency .logo_client_slider { float: left; min-height: 50px; max-height: unset; position: relative; overflow: visible } #agency .slide1- .logo-resize { width: 100%; opacity: 0; transition: all 1s ease; position: absolute } #agency section.panel.agency { display: flex; flex-flow: row wrap; height: auto } #agency section.panel.agency .head_pos { } #agency section.panel.agency .head_00 { display: flex; flex-flow: column; width: 100vw; margin: 50px auto 0 } #agency section.panel.agency .head_00.textonly { margin:0 auto } #agency section.panel.agency .head_00 .picture_00 { display: flex; width: 50%; height: auto } #agency section.panel.agency .head_00 .picture_00 div#videosList { display: flex; width: 100% } #agency section.panel.agency .head_00 .picture_00 div#videosList .video { display: flex; width: 100% } #agency section.panel.agency .head_00 .picture_00 div#videosList .thevideo { width: 100% } #agency section.panel.agency .head_00 .picture_01 { display: flex; width: 50%; height: auto } #agency section.panel.agency .head_00 .picture_01 div#videosList { display: flex; width: 100% } #agency section.panel.agency .head_00 .picture_01 div#videosList .video { display: flex; width: 100% } #agency section.panel.agency .head_00 .picture_01 div#videosList .video .thevideo { width: 100% } #agency section.panel.agency .text { display: flex; flex-flow: row wrap; align-self: center; order: 3; margin-top: 0!important; padding: 30px 0 } #agency section.panel.agency .gen_pos { height: 100%; display: flex; flex-flow: row wrap } #agency section.panel.agency .gen_pos .general_desc { background-color: #ffe300; display: flex; flex-flow: column; height: 100% } #agency section.panel.agency .gen_pos .general_desc div { padding: 30px 0 } #agency section.panel.agency .gen_pos .general_desc p { padding: 0 2%; display: flex; align-self: center; flex-flow: column } } @media (max-width:1399px) and (min-width:1000px){ #agency .text_head { width: 80vw; margin: 0 auto; } #agency .head_yellow { width: 80%; margin: 0 auto; padding: 30px 0 !important; } } @media(min-width:86.25em) { body#agency { transition: background-color 1s ease } #agency .wrapper { margin-top: 130px; overflow: hidden } #agency .desire, #agency .work { display: flex; width: 100vw; position: relative; align-items: center } #agency .desire h2, #agency .work h2 { display: flex; color: #ffe300; font-weight: 900; text-transform: uppercase; font-size: 17.85vw; line-height: .7em } #agency .desire h3, #agency .work h3 { display: flex; font-weight: 900; font-size: 61px; margin-top: -70px; line-height: 45px; position: relative; width: 40%; padding: 0 30px 0 0; top: 450px } #agency .desire strong, #agency .work strong { display: flex; font-weight: 900; text-transform: uppercase } #agency .desire .text, #agency .work .text { display: flex; flex-flow: column; align-self: center; width: 600px; margin: 0 auto; top: 100px } #agency .desire .text_wrapper, #agency .work .text_wrapper { display: flex; width: 1280px; margin: 0 auto; flex-flow: row } #agency .work h2 { font-size: 21.35vw } #agency .clients { display: flex; flex-flow: column; align-items: center } #agency .clients .logo_client_slider { font-weight: 900; max-width: unset!important; float: left; min-height: 50px; max-height: unset; position: relative; overflow: visible } #agency .clients .slide1- .logo-resize { width: 100%; opacity: 0; transition: all 1s ease; position: absolute } #agency .clients .slide1- .logo-fade { opacity: 1 } #agency .clients h2 { display: flex; color: #fff; font-weight: 900; font-size: 27.15vw; text-transform: uppercase; margin-top: -7% } #agency section.panel.agency { display: flex; flex-flow: column } #agency section.panel.agency .head_pos { display: flex; flex-flow: column; } #agency section.panel.agency .gen_pos { display: flex; flex-flow: row wrap; height: 100%; width: 100vw } #agency section.panel.agency .head_00 { display: flex; height: auto; width: 100%; flex-flow: column } #agency section.panel.agency .head_00 .picture_00 { display: flex; width: 50%; height: auto } #agency section.panel.agency .head_00 .picture_00 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency section.panel.agency .head_00 .picture_00 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency section.panel.agency .head_00 .picture_00 video::-webkit-media-controls { display: none!important } #agency section.panel.agency .head_00 .picture_00 video.thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency section.panel.agency .head_00 .picture_01 { display: flex; width: 50%; height: auto } #agency section.panel.agency .head_00 .picture_01 #videosList { display: flex; width: 50%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency section.panel.agency .head_00 .picture_01 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency section.panel.agency .head_00 .picture_01 video::-webkit-media-controls { display: none!important } #agency section.panel.agency .head_00 .picture_01 video.thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency section.panel.agency .head_00 .text { display: flex; margin: 0 auto; flex-flow: column; align-self: center } #agency section.panel.agency .head_00 .text p { display: flex; flex-flow: column; margin: 0 auto; width: 80% } #agency section.panel.agency .picture_00, #agency section.panel.agency .picture_01, #agency section.panel.agency .picture_02 { background-color: #313131 } #agency section.panel.agency strong { font-weight: 600 } #agency section.panel.agency .general_desc { background-color: #ffe300; display: flex; flex-flow: column } #agency section.panel.agency .general_desc p { display: flex; align-self: center; flex-flow: column } } @media(min-width:80em) { #agency .head_00 { flex-flow: column } #agency .section.panel.agency { display: flex } #agency .section.panel.agency .head_pos { width: 100vw } #agency .section.panel.agency .head_00 { display: flex; flex-flow: column } #agency .section.panel.agency .head_00 .picture_00 { display: flex; width: 50%; height: auto; margin: 0; padding: 0 } #agency .section.panel.agency .head_00 .picture_00 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .section.panel.agency .head_00 .picture_00 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .section.panel.agency .head_00 .picture_00 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency .picture_01 { display: flex; width: 50%; height: auto; margin: 0; padding: 0 } #agency .picture_01 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .picture_01 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .picture_01 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency .text { margin: 0 auto; width: 80vw; padding: 30px 0 } } @media(min-width:1400px) { .head_01 { display: flex; flex-flow: row!important; height: 600px } .head_01 .picture_02 { display: flex; max-width: 1000px; height: 600px; margin: 0; order: 0!important } .head_01 .picture_02 #videosList { display: flex; max-width: 1000px; height: 600px; overflow: hidden; margin: 0; padding: 0 } .head_01 .picture_02 .video { display: flex; max-height: 600px; width: 1000px; margin: 0; padding: 0; overflow: hidden } .head_01 .picture_02 video::-webkit-media-controls { display: none!important } .head_01 .picture_02 video.thevideo { display: flex; margin: 0; padding: 0; width: auto; height: 600px } .head_01 .text { display: flex; align-self: center; margin: 0 auto; flex-flow: column } .head_01 .text p { display: flex; width: 80%; flex-flow: column } } @media(min-width:1750px) and (max-width:2500px) { #agency .head_00 { flex-flow: column!important } #agency .text { order: 0!important } #agency .section.panel.agency { display: flex } #agency .section.panel.agency .head_pos { width: 100vw } #agency .section.panel.agency .head_00 { display: flex } #agency .section.panel.agency .head_00 .picture_00 { display: flex; width: 50%; height: auto; margin: 0; padding: 0 } #agency .section.panel.agency .head_00 .picture_00 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .section.panel.agency .head_00 .picture_00 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .section.panel.agency .head_00 .picture_00 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency .picture_01 { display: flex; width: 50%; height: auto; margin: 0; padding: 0 } #agency .picture_01 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .picture_01 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .picture_01 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency .text { margin: 0 auto; width: 80vw; padding: 30px 0 } #agency .gen_pos { background-color: #ffe300; width: 100vw; align-items: center } #agency .gen_pos .general_desc p { padding: 30px 20px } } @media(min-width:2560px) { #agency .desire { min-height: 73vh; } #agency .clients h2 { font-size: 680px; } #agency .desire h2 { font-size: 460px; } #agency .work h2 { font-size: 555px; } section.contact_form form { max-width: 2560px; margin-left: auto; margin-right: auto; } } @media(min-width:1201px) and (max-width:1751px) { #agency .head_00 { flex-flow: column!important } #agency .text { order: 3!important; margin-top: 30px!important } #agency .general_desc p { padding: 0 20px!important } #agency .section.panel.agency { display: flex } #agency .section.panel.agency .head_pos { width: 100vw } #agency .section.panel.agency .head_00 { display: flex; flex-flow: column } #agency .section.panel.agency .head_00 .picture_00 { display: flex; width: 50%; height: auto!important; margin: 0!important; padding: 0 } #agency .section.panel.agency .head_00 .picture_00 .video { display: flex; max-height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .section.panel.agency .head_00 .picture_00 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .section.panel.agency .head_00 .picture_00 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency .picture_01 { display: flex; width: 100%; height: auto; margin: 0; padding: 0 } #agency .picture_01 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .picture_01 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .picture_01 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } } @media(min-width:769px) and (max-width:1201px) { #agency .head_00 { flex-flow: column!important } #agency .text { order: 3!important; margin-top: 30px!important } #agency .general_desc p { padding: 0 20px!important } #agency .section.panel.agency { display: flex } #agency .section.panel.agency .head_pos { width: 100vw } #agency .section.panel.agency .head_00 { display: flex; width: 100%; flex-flow: column } #agency .section.panel.agency .head_00 .picture_00 { display: flex; width: 100%; height: auto!important; margin: 0!important; padding: 0 } #agency .section.panel.agency .head_00 .picture_00 .video { display: flex; max-height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .section.panel.agency .head_00 .picture_00 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .section.panel.agency .head_00 .picture_00 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } #agency .picture_01 { display: flex; width: 50%; height: auto; margin: 0; padding: 0 } #agency .picture_01 .video { display: flex; height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden } #agency .picture_01 .video .thevideo { display: flex; margin: 0; padding: 0; width: 100%; height: auto } #agency .picture_01 #videosList { display: flex; width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0 } } @media(min-width:1000px) { .picture_02 { min-width: 1000px } } @media(min-width:480px) and (max-width:639px) { #agency .clients .first_row .logo_client_slider, #agency .clients .secound_row .logo_client_slider, #agency .clients .third_row .logo_client_slider { width: 240px!important } } @media(max-width:479px) { #agency .clients .first_row .logo_client_slider, #agency .clients .secound_row .logo_client_slider, #agency .clients .third_row .logo_client_slider { width: 160px!important; height: 100px!important } #agency .clients .slide1- .logo-resize{ padding: 20px !important; } } @media(min-width:500px) and (max-width:1201px) { #agency .desire, #agency .work { margin: 150px 0 } #agency .desire .text_wrapper .layer2, #agency .desire .text_wrapper .layer3, #agency .desire .text_wrapper .layer5, #agency .desire .text_wrapper .layer6, #agency .work .text_wrapper .layer2, #agency .work .text_wrapper .layer3, #agency .work .text_wrapper .layer5, #agency .work .text_wrapper .layer6 { position: relative; top: 200px } } .head_yellow, .head_white { padding: 0 40px } .head_white_small { display: none; padding: 30px 20px; width: 80%; margin: 0 auto } @media(max-width:1520px) { .head_white { display: none } .head_white_small { display: block } .head_white_small { padding: 30px 0!important } .text_head_2 { width: 80vw; margin: 0 auto } } @media(max-width:1279px) { .head_yellow { width: 80%; margin: 0 auto; padding: 30px 0!important } .text_head { width: 80vw; margin: 0 auto } } #agency .text.b2b { width: 80vw } @media(max-width:1201px) { .head_white_small, .head_yellow { width: 100% } .text_head { width: 100%; padding: 0 20px } .head_00 { width: 100%; padding: 0 20px } #agency .text.b2b { width: 100% } } @media(max-width:1000px) { .work h2, .desire h2 { font-size: 180px!important; justify-content: center!important } .work .sehnsucht, .desire .sehnsucht { margin-left: -120px } .work .eroberung, .desire .eroberung { margin-left: -60px } .work .wie_wir, .desire .wie_wir { margin-left: -50px } .work .arbeiten, .desire .arbeiten { margin-left: 20px } #agency .clients h2.kunden { margin-left: -130px!important; font-size: 40vw } } @media(max-width:1380px) { .gen_pos { display: block!important } } @media(max-width:768px) { .layer2 { margin-bottom: 0!important; margin-top: 50px!important } .layer3, .layer6 { margin-top: 0!important } .layer5 { margin-bottom: 0!important } } #contact .profile-links { margin-top: 25px } #contact .profile-links li { transition: all .5s ease } #contact .profile-links li span { font-size: 24px } #contact .profile-links li:hover { transform: scale(1.8) } #contact nav.contact_share { display: flex; align-self: flex-end; width: 100%; margin-top: 30px } #contact .shariff { display: flex; width: 100%!important } #contact .shariff ul { display: flex; flex-flow: row nowrap; justify-content: space-between; text-align: center; width: 100% } #contact .shariff li { height: auto!important; margin: 0; padding: 0; display: inline-block } #contact .shariff li a { height: auto!important; width: auto!important } #contact .shariff li .fa { line-height: 1em; width: auto!important } #contact .shariff .orientation-horizontal li { min-width: 50px; max-width: 50px } #contact .shariff .facebook a, #contact .shariff .pinterest a, #contact .shariff .twitter a, #contact .shariff .xing a, #contact .shariff .linkedin a { background-color: rgba(255, 255, 255, 0) } #contact .shariff .facebook a:hover, #contact .shariff .pinterest a:hover, #contact .shariff .twitter a:hover, #contact .shariff .xing a:hover, #contact .shariff .linkedin a:hover { background-color: rgba(255, 255, 255, 0) } #contact span.share_text { display: none!important; visibility: hidden } #contact .shariff .facebook .fa-facebook, #contact .shariff .pinterest .fa-pinterest-p, #contact .shariff .twitter .fa-twitter, #contact .shariff .xing .fa-xing, #contact .shariff .linkedin .fa-linkedin { font-size: 24px; display: block; text-align: center } #contact .shariff .facebook .fa-facebook span, #contact .shariff .pinterest .fa-pinterest-p span, #contact .shariff .twitter .fa-twitter span, #contact .shariff .xing .fa-xing span, #contact .shariff .linkedin .fa-linkedin span { display: block; text-align: center } #contact .main_content { width: 100% } .adress { display: flex; flex-flow: column; width: 80vw; justify-content: space-between; padding: 0 0 30px; max-width: 2560px; margin-left: auto; margin-right: auto; } .adress div { display: flex; text-align: center } .adress div p { max-width: 40em; margin: -5px auto 30px } .adress div a { font-size: 16px; font-size: 1rem } #contact #map { height: 100% } #contact #google-container { position: relative; width: 100%; height: 30vh; background-color: #ffe300 } #contact section.info { display: flex; justify-content: space-around; margin: 50px auto; max-width: 1280px; width: 100%; padding: 30px 40px; flex-flow: row wrap } #contact section.info div { display: flex; flex-flow: column; width: 35%; min-width: 320px } #contact section.info div p { margin: 0; padding: 0; width: 100%; align-self: flex-end } #contact section.info ul { display: flex; flex-flow: row nowrap; justify-content: space-between; text-align: center; width: 100% } #contact section.info ul li { display: inline-block; width: 50px } #contact section.info div.panel { margin-left: -260px; visibility: hidden; opacity: 0; left: 0; transform: translateY(5em); z-index: 1; transition: all .3s ease-in-out 0s, visibility 0s linear .3s, z-index 0s linear .01s, max-height .5s ease-in-out 0s; max-height: 0; width: 35%; min-width: 320px } #contact section.info div.panel p { align-self: flex-start; width: 100% } #contact section.info .show { visibility: visible!important; opacity: 1!important; z-index: 1!important; transform: translateY(0)!important; transition-delay: 0s, 0s, .3s!important; max-height: 6000px!important } #contact section.info button.accordion.pulse { background-color: transparent; cursor: pointer; text-align: left; border: none; outline: none; transition: .4s; position: relative; left: -44px; top: -100px; float: left; animation: pulse 1.25s infinite } #contact section.info button.accordion.pulse:before { content: '\002B'; color: #ffe300; font-weight: 900; float: left; font-size: 8em; transition: 300ms; line-height: 40px; font-family: Arial , 'Helvetica Neue', Helvetica, sans-serif } #contact section.info button.accordion.pulse.active:before { content: "\002B"; transform: rotateZ(45deg) } @keyframes pulse { 0% { transform: scale(.9) } 70% { transform: scale(1) } 100% { transform: scale(.9) } } #contact section.info button.accordion.pulse h3 { font-size: 20px; margin-bottom: 0; padding: 0 } @media(min-width:48em) { .adress { display: flex; flex-flow: row; width: 80vw; justify-content: space-between; margin: 0 auto; padding: 0 0 30px } .adress div { text-align: left } #contact #google-container { width: 100vw; height: 45vh } } @media(min-width:86.25em) { #contact .main_content { width: 100% } .adress { display: flex; flex-flow: row; justify-content: space-between; width: 80vw; margin: 0 auto; padding: 0 0 30px } .adress div { display: flex } .info { display: flex } #contact .info div p.cross:before { content: '\002B'; color: #ffe300; font-weight: 900; float: left; font-size: 7em; transition: 300ms; position: absolute; top: -240px; left: -30px; z-index: -1 } #contact .info .contact_share ul li { width: 50px } #contact .info .contact_share ul li a { font-size: 24px!important } #contact #map { height: 100% } #contact #google-container { position: relative; width: 100%; height: 100vh; background-color: #ffe300 } } @media(max-width:86.25em) { .contact-icon { width: 50px } } @media(min-width:900px) and (max-width:1199px) { #contact section.info div .shariff-button a { color: #000!important } #contact section.info div.panel { margin-left: 0!important } #contact section.info .accordion.pulse { width: 80px; height: 80px; top: unset!important; left: unset!important } } @media(min-width:400px) and (max-width:899px) { #contact section.info { flex-flow: column nowrap!important; justify-content: center!important } #contact section.info div { width: 100%!important } #contact section.info div .shariff-button a { color: #000!important } #contact section.info div.panel { margin-left: 0!important; margin-bottom: 20px!important } #contact section.info .accordion.pulse { width: 80px; height: 80px; top: unset!important; left: unset!important } } @media(max-width:399px) { #contact section.info { flex-flow: column nowrap!important; justify-content: center!important; padding-left: 40px!important; padding-right: 40px!important } #contact section.info div { min-width: 300px!important; width: 100%!important } #contact section.info div p { width: 100%!important } #contact section.info div .shariff-button a { color: #000!important } #contact section.info div.panel { margin-left: 0!important; margin-bottom: 20px } #contact section.info .accordion.pulse { width: 80px; height: 80px; top: unset!important; left: unset!important } } #contact .content.contact_form div.contact_bg { background: url(/media/rk_panorama_nacht_contact.png) top center no-repeat!important; background-size: 100% auto!important } #doku .icon { margin-left: -4px!important } #doku h3 { display: none; } #contact .ckeck_box, #project_overview .ckeck_box, #project_details .ckeck_box, #news_details .ckeck_box, #current_details .ckeck_box, #meister_leistungen .ckeck_box, .body--services .ckeck_box, #next_services .ckeck_box { display: flex; align-items: center } #contact .ckeck_box input[type=checkbox], #project_overview .ckeck_box input[type=checkbox], #project_details .ckeck_box input[type=checkbox], #news_details .ckeck_box input[type=checkbox], #current_details .ckeck_box input[type=checkbox], #meister_leistungen .ckeck_box input[type=checkbox], .body--services .ckeck_box input[type=checkbox], #next_services .ckeck_box input[type=checkbox] { width: 25px; height: 25px } #contact .ckeck_box .container input, #project_overview .ckeck_box .container input, #project_details .ckeck_box .container input, #news_details .ckeck_box .container input, #current_details .ckeck_box .container input, #meister_leistungen .ckeck_box .container input, .body--services .ckeck_box .container input, #next_services .ckeck_box .container input { position: absolute; opacity: 0; cursor: pointer } #contact .ckeck_box .checkmark, #project_overview .ckeck_box .checkmark, #project_details .ckeck_box .checkmark, #news_details .ckeck_box .checkmark, #current_details .ckeck_box .checkmark, #meister_leistungen .ckeck_box .checkmark, .body--services .ckeck_box .checkmark, #next_services .ckeck_box .checkmark { position: absolute; top: 67%; left: 10%; height: 25px; width: 25px; background-color: #ffe300 } #contact .ckeck_box .container:hover input~.checkmark, #project_overview .ckeck_box .container:hover input~.checkmark, #project_details .ckeck_box .container:hover input~.checkmark, #news_details .ckeck_box .container:hover input~.checkmark, #current_details .ckeck_box .container:hover input~.checkmark, #meister_leistungen .ckeck_box .container:hover input~.checkmark, .body--services .ckeck_box .container:hover input~.checkmark, #next_services .ckeck_box .container:hover input~.checkmark { background-color: #ffe300 } #contact .ckeck_box .container input:checked~.checkmark, #project_overview .ckeck_box .container input:checked~.checkmark, #project_details .ckeck_box .container input:checked~.checkmark, #news_details .ckeck_box .container input:checked~.checkmark, #current_details .ckeck_box .container input:checked~.checkmark, #meister_leistungen .ckeck_box .container input:checked~.checkmark, .body--services .ckeck_box .container input:checked~.checkmark, #next_services .ckeck_box .container input:checked~.checkmark { background-color: #ffe300 } #contact .ckeck_box .checkmark:after, #project_overview .ckeck_box .checkmark:after, #project_details .ckeck_box .checkmark:after, #news_details .ckeck_box .checkmark:after, #current_details .ckeck_box .checkmark:after, #meister_leistungen .ckeck_box .checkmark:after, .body--services .ckeck_box .checkmark:after, #next_services .ckeck_box .checkmark:after { content: ""; position: absolute; display: none } #contact .ckeck_box .container input:checked~.checkmark:after, #project_overview .ckeck_box .container input:checked~.checkmark:after, #project_details .ckeck_box .container input:checked~.checkmark:after, #news_details .ckeck_box .container input:checked~.checkmark:after, #current_details .ckeck_box .container input:checked~.checkmark:after, #meister_leistungen .ckeck_box .container input:checked~.checkmark:after, .body--services .ckeck_box .container input:checked~.checkmark:after, #next_services .ckeck_box .container input:checked~.checkmark:after { display: block } #contact .ckeck_box .container .checkmark:after, #project_overview .ckeck_box .container .checkmark:after, #project_details .ckeck_box .container .checkmark:after, #news_details .ckeck_box .container .checkmark:after, #current_details .ckeck_box .container .checkmark:after, #meister_leistungen .ckeck_box .container .checkmark:after, .body--services .ckeck_box .container .checkmark:after, #next_services .ckeck_box .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg) } #contact .content.contact_form, #project_overview .content.contact_form, #project_details .content.contact_form, #news_details .content.contact_form, #current_details .content.contact_form, #meister_leistungen .content.contact_form, .body--services .content.contact_form, #next_services .content.contact_form { display: flex; flex-flow: column; min-height: 30vh; background-color: #000; position: relative; margin: 0 } #contact .content.contact_form h2 span#headline, #project_overview .content.contact_form h2 span#headline, #project_details .content.contact_form h2 span#headline, #news_details .content.contact_form h2 span#headline, #current_details .content.contact_form h2 span#headline, #meister_leistungen .content.contact_form h2 span#headline, .body--services .content.contact_form h2 span#headline, #next_services .content.contact_form h2 span#headline { font-size: 40px; font-weight: 600; text-transform: uppercase; color: #ffe300 } #contact .content.contact_form div.contact_bg, #project_overview .content.contact_form div.contact_bg, #project_details .content.contact_form div.contact_bg, #news_details .content.contact_form div.contact_bg, #current_details .content.contact_form div.contact_bg, #meister_leistungen .content.contact_form div.contact_bg, .body--services .content.contact_form div.contact_bg, #next_services .content.contact_form div.contact_bg { background: url(../../assets/img/171017_rk_bros-2017_schwarz.png) top center no-repeat; background-size: auto auto; background-size: 100% auto; display: flex; flex-flow: column; position: absolute; top: 0; left: 0; right: 0; max-height: 1240px; height: 100%; z-index: 1 } #contact .content.contact_form .yellow_overlay, #project_overview .content.contact_form .yellow_overlay, #project_details .content.contact_form .yellow_overlay, #news_details .content.contact_form .yellow_overlay, #current_details .content.contact_form .yellow_overlay, #meister_leistungen .content.contact_form .yellow_overlay, .body--services .content.contact_form .yellow_overlay, #next_services .content.contact_form .yellow_overlay { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #ffe300; mix-blend-mode: multiply } #contact .content.contact_form form, #project_overview .content.contact_form form, #project_details .content.contact_form form, #news_details .content.contact_form form, #current_details .content.contact_form form, #meister_leistungen .content.contact_form form, .body--services .content.contact_form form, #next_services .content.contact_form form { color: #ffe300; width: 100%; z-index: 10 } #contact .content.contact_form form label, #contact .content.contact_form form input, #project_overview .content.contact_form form label, #project_overview .content.contact_form form input, #project_details .content.contact_form form label, #project_details .content.contact_form form input, #news_details .content.contact_form form label, #news_details .content.contact_form form input, #current_details .content.contact_form form label, #current_details .content.contact_form form input, #meister_leistungen .content.contact_form form label, #meister_leistungen .content.contact_form form input, .body--services .content.contact_form form label, .body--services .content.contact_form form input, #next_services .content.contact_form form label, #next_services .content.contact_form form input { font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 16px } #contact .content.contact_form form textarea, #contact .content.contact_form form label, #contact .content.contact_form form input[type=email], #contact .content.contact_form form input[type=text], #project_overview .content.contact_form form textarea, #project_overview .content.contact_form form label, #project_overview .content.contact_form form input[type=email], #project_overview .content.contact_form form input[type=text], #project_details .content.contact_form form textarea, #project_details .content.contact_form form label, #project_details .content.contact_form form input[type=email], #project_details .content.contact_form form input[type=text], #news_details .content.contact_form form textarea, #news_details .content.contact_form form label, #news_details .content.contact_form form input[type=email], #news_details .content.contact_form form input[type=text], #current_details .content.contact_form form textarea, #current_details .content.contact_form form label, #current_details .content.contact_form form input[type=email], #current_details .content.contact_form form input[type=text], #meister_leistungen .content.contact_form form textarea, #meister_leistungen .content.contact_form form label, #meister_leistungen .content.contact_form form input[type=email], #meister_leistungen .content.contact_form form input[type=text], .body--services .content.contact_form form textarea, .body--services .content.contact_form form label, .body--services .content.contact_form form input[type=email], .body--services .content.contact_form form input[type=text], #next_services .content.contact_form form textarea, #next_services .content.contact_form form label, #next_services .content.contact_form form input[type=email], #next_services .content.contact_form form input[type=text] { background: transparent; border: none; color: #ffe300; font-size: 24px; font-weight: 600; text-transform: uppercase; display: inline } #contact .content.contact_form form input[type=submit], #project_overview .content.contact_form form input[type=submit], #project_details .content.contact_form form input[type=submit], #news_details .content.contact_form form input[type=submit], #current_details .content.contact_form form input[type=submit], #meister_leistungen .content.contact_form form input[type=submit], .body--services .content.contact_form form input[type=submit], #next_services .content.contact_form form input[type=submit] { background-color: #ffe300; border: 3px solid #ffe300; color: #000; padding: 10px 25px; font-size: 16px; width: 178.45px; height: 50px; font-weight: 600; margin: 0!important } #contact .content.contact_form form input[type=submit].hover, #contact .content.contact_form form input[type=submit]:hover, #contact .content.contact_form form input[type=submit].active, #contact .content.contact_form form input[type=submit]:active, #project_overview .content.contact_form form input[type=submit].hover, #project_overview .content.contact_form form input[type=submit]:hover, #project_overview .content.contact_form form input[type=submit].active, #project_overview .content.contact_form form input[type=submit]:active, #project_details .content.contact_form form input[type=submit].hover, #project_details .content.contact_form form input[type=submit]:hover, #project_details .content.contact_form form input[type=submit].active, #project_details .content.contact_form form input[type=submit]:active, #news_details .content.contact_form form input[type=submit].hover, #news_details .content.contact_form form input[type=submit]:hover, #news_details .content.contact_form form input[type=submit].active, #news_details .content.contact_form form input[type=submit]:active, #current_details .content.contact_form form input[type=submit].hover, #current_details .content.contact_form form input[type=submit]:hover, #current_details .content.contact_form form input[type=submit].active, #current_details .content.contact_form form input[type=submit]:active, #meister_leistungen .content.contact_form form input[type=submit].hover, #meister_leistungen .content.contact_form form input[type=submit]:hover, #meister_leistungen .content.contact_form form input[type=submit].active, #meister_leistungen .content.contact_form form input[type=submit]:active, .body--services .content.contact_form form input[type=submit].hover, .body--services .content.contact_form form input[type=submit]:hover, .body--services .content.contact_form form input[type=submit].active, .body--services .content.contact_form form input[type=submit]:active, #next_services .content.contact_form form input[type=submit].hover, #next_services .content.contact_form form input[type=submit]:hover, #next_services .content.contact_form form input[type=submit].active, #next_services .content.contact_form form input[type=submit]:active { opacity: .75; transition: duration .5s } #contact .content.contact_form form textarea, #project_overview .content.contact_form form textarea, #project_details .content.contact_form form textarea, #news_details .content.contact_form form textarea, #current_details .content.contact_form form textarea, #meister_leistungen .content.contact_form form textarea, .body--services .content.contact_form form textarea, #next_services .content.contact_form form textarea { font-size: 90px; font-weight: 900; width: 100%; color: #ffe300; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; box-sizing: padding-box; line-height: 83px; min-height: 180px; margin: 0; padding: 0; display: block } #contact .content.contact_form form input::-webkit-input-placeholder, #contact .content.contact_form form input:placeholder-shown, #contact .content.contact_form form textarea::-webkit-input-placeholder, #contact .content.contact_form form textarea:placeholder-shown, #project_overview .content.contact_form form input::-webkit-input-placeholder, #project_overview .content.contact_form form input:placeholder-shown, #project_overview .content.contact_form form textarea::-webkit-input-placeholder, #project_overview .content.contact_form form textarea:placeholder-shown, #project_details .content.contact_form form input::-webkit-input-placeholder, #project_details .content.contact_form form input:placeholder-shown, #project_details .content.contact_form form textarea::-webkit-input-placeholder, #project_details .content.contact_form form textarea:placeholder-shown, #news_details .content.contact_form form input::-webkit-input-placeholder, #news_details .content.contact_form form input:placeholder-shown, #news_details .content.contact_form form textarea::-webkit-input-placeholder, #news_details .content.contact_form form textarea:placeholder-shown, #current_details .content.contact_form form input::-webkit-input-placeholder, #current_details .content.contact_form form input:placeholder-shown, #current_details .content.contact_form form textarea::-webkit-input-placeholder, #current_details .content.contact_form form textarea:placeholder-shown, #meister_leistungen .content.contact_form form input::-webkit-input-placeholder, #meister_leistungen .content.contact_form form input:placeholder-shown, #meister_leistungen .content.contact_form form textarea::-webkit-input-placeholder, #meister_leistungen .content.contact_form form textarea:placeholder-shown, .body--services .content.contact_form form input::-webkit-input-placeholder, .body--services .content.contact_form form input:placeholder-shown, .body--services .content.contact_form form textarea::-webkit-input-placeholder, .body--services .content.contact_form form textarea:placeholder-shown, #next_services .content.contact_form form input::-webkit-input-placeholder, #next_services .content.contact_form form input:placeholder-shown, #next_services .content.contact_form form textarea::-webkit-input-placeholder, #next_services .content.contact_form form textarea:placeholder-shown { color: #ffe300 } #contact .content.contact_form form input:placeholder-shown, #contact .content.contact_form form textarea:placeholder-shown, #project_overview .content.contact_form form input:placeholder-shown, #project_overview .content.contact_form form textarea:placeholder-shown, #project_details .content.contact_form form input:placeholder-shown, #project_details .content.contact_form form textarea:placeholder-shown, #news_details .content.contact_form form input:placeholder-shown, #news_details .content.contact_form form textarea:placeholder-shown, #current_details .content.contact_form form input:placeholder-shown, #current_details .content.contact_form form textarea:placeholder-shown, #meister_leistungen .content.contact_form form input:placeholder-shown, #meister_leistungen .content.contact_form form textarea:placeholder-shown, .body--services .content.contact_form form input:placeholder-shown, .body--services .content.contact_form form textarea:placeholder-shown, #next_services .content.contact_form form input:placeholder-shown, #next_services .content.contact_form form textarea:placeholder-shown { color: #ffe300 } #contact .content.contact_form form input::placeholder, #contact .content.contact_form form input:placeholder-shown, #contact .content.contact_form form textarea::placeholder, #contact .content.contact_form form textarea:placeholder-shown, #project_overview .content.contact_form form input::placeholder, #project_overview .content.contact_form form input:placeholder-shown, #project_overview .content.contact_form form textarea::placeholder, #project_overview .content.contact_form form textarea:placeholder-shown, #project_details .content.contact_form form input::placeholder, #project_details .content.contact_form form input:placeholder-shown, #project_details .content.contact_form form textarea::placeholder, #project_details .content.contact_form form textarea:placeholder-shown, #news_details .content.contact_form form input::placeholder, #news_details .content.contact_form form input:placeholder-shown, #news_details .content.contact_form form textarea::placeholder, #news_details .content.contact_form form textarea:placeholder-shown, #current_details .content.contact_form form input::placeholder, #current_details .content.contact_form form input:placeholder-shown, #current_details .content.contact_form form textarea::placeholder, #current_details .content.contact_form form textarea:placeholder-shown, #meister_leistungen .content.contact_form form input::placeholder, #meister_leistungen .content.contact_form form input:placeholder-shown, #meister_leistungen .content.contact_form form textarea::placeholder, #meister_leistungen .content.contact_form form textarea:placeholder-shown, .body--services .content.contact_form form input::placeholder, .body--services .content.contact_form form input:placeholder-shown, .body--services .content.contact_form form textarea::placeholder, .body--services .content.contact_form form textarea:placeholder-shown, #next_services .content.contact_form form input::placeholder, #next_services .content.contact_form form input:placeholder-shown, #next_services .content.contact_form form textarea::placeholder, #next_services .content.contact_form form textarea:placeholder-shown { color: #ffe300 } #contact .content.contact_form form textarea::-webkit-input-placeholder, #contact .content.contact_form form textarea:placeholder-shown, #project_overview .content.contact_form form textarea::-webkit-input-placeholder, #project_overview .content.contact_form form textarea:placeholder-shown, #project_details .content.contact_form form textarea::-webkit-input-placeholder, #project_details .content.contact_form form textarea:placeholder-shown, #news_details .content.contact_form form textarea::-webkit-input-placeholder, #news_details .content.contact_form form textarea:placeholder-shown, #current_details .content.contact_form form textarea::-webkit-input-placeholder, #current_details .content.contact_form form textarea:placeholder-shown, #meister_leistungen .content.contact_form form textarea::-webkit-input-placeholder, #meister_leistungen .content.contact_form form textarea:placeholder-shown, .body--services .content.contact_form form textarea::-webkit-input-placeholder, .body--services .content.contact_form form textarea:placeholder-shown, #next_services .content.contact_form form textarea::-webkit-input-placeholder, #next_services .content.contact_form form textarea:placeholder-shown { font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 90px; font-weight: 600; animation: blink 1s infinite; caret-color: transparent } #contact .content.contact_form form textarea:placeholder-shown, #project_overview .content.contact_form form textarea:placeholder-shown, #project_details .content.contact_form form textarea:placeholder-shown, #news_details .content.contact_form form textarea:placeholder-shown, #current_details .content.contact_form form textarea:placeholder-shown, #meister_leistungen .content.contact_form form textarea:placeholder-shown, .body--services .content.contact_form form textarea:placeholder-shown, #next_services .content.contact_form form textarea:placeholder-shown { font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 90px; font-weight: 600; animation: blink 1s infinite; caret-color: transparent } #contact .content.contact_form form textarea::placeholder, #contact .content.contact_form form textarea:placeholder-shown, #project_overview .content.contact_form form textarea::placeholder, #project_overview .content.contact_form form textarea:placeholder-shown, #project_details .content.contact_form form textarea::placeholder, #project_details .content.contact_form form textarea:placeholder-shown, #news_details .content.contact_form form textarea::placeholder, #news_details .content.contact_form form textarea:placeholder-shown, #current_details .content.contact_form form textarea::placeholder, #current_details .content.contact_form form textarea:placeholder-shown, #meister_leistungen .content.contact_form form textarea::placeholder, #meister_leistungen .content.contact_form form textarea:placeholder-shown, .body--services .content.contact_form form textarea::placeholder, .body--services .content.contact_form form textarea:placeholder-shown, #next_services .content.contact_form form textarea::placeholder, #next_services .content.contact_form form textarea:placeholder-shown { font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 90px; font-weight: 600; animation: blink 1s infinite; caret-color: transparent } #contact .content.contact_form form div#doku fieldset label, #contact .content.contact_form form div#doku fieldset input, #project_overview .content.contact_form form div#doku fieldset label, #project_overview .content.contact_form form div#doku fieldset input, #project_details .content.contact_form form div#doku fieldset label, #project_details .content.contact_form form div#doku fieldset input, #news_details .content.contact_form form div#doku fieldset label, #news_details .content.contact_form form div#doku fieldset input, #current_details .content.contact_form form div#doku fieldset label, #current_details .content.contact_form form div#doku fieldset input, #meister_leistungen .content.contact_form form div#doku fieldset label, #meister_leistungen .content.contact_form form div#doku fieldset input, .body--services .content.contact_form form div#doku fieldset label, .body--services .content.contact_form form div#doku fieldset input, #next_services .content.contact_form form div#doku fieldset label, #next_services .content.contact_form form div#doku fieldset input { display: block } #contact .icon, #project_overview .icon, #project_details .icon, #news_details .icon, #current_details .icon, #meister_leistungen .icon, .body--services .icon, #next_services .icon { display: inline-block; position: relative; cursor: pointer; padding: 19.2px; padding: 1.2rem; margin: 0 0 0 10px; transition: 300ms; z-index: 1 } #contact .icon.icon_close, #project_overview .icon.icon_close, #project_details .icon.icon_close, #news_details .icon.icon_close, #current_details .icon.icon_close, #meister_leistungen .icon.icon_close, .body--services .icon.icon_close, #next_services .icon.icon_close { transform: rotateZ(0deg) } #contact .icon.icon_close:before, #project_overview .icon.icon_close:before, #project_details .icon.icon_close:before, #news_details .icon.icon_close:before, #current_details .icon.icon_close:before, #meister_leistungen .icon.icon_close:before, .body--services .icon.icon_close:before, #next_services .icon.icon_close:before { position: absolute; content: ''; width: 4px; width: .25rem; height: 28.8px; height: 1.8rem; background: #ffe300; display: inline-block; transition: 500ms; top: 11%; left: 45% } #contact .icon.icon_close:after, #project_overview .icon.icon_close:after, #project_details .icon.icon_close:after, #news_details .icon.icon_close:after, #current_details .icon.icon_close:after, #meister_leistungen .icon.icon_close:after, .body--services .icon.icon_close:after, #next_services .icon.icon_close:after { position: absolute; top: 11%; left: 45%; content: ''; width: 4px; width: .25rem; height: 28.8px; height: 1.8rem; background: #ffe300; display: inline-block; transform: rotateZ(90deg) } #contact .icon.icon_close.toggle_open, #project_overview .icon.icon_close.toggle_open, #project_details .icon.icon_close.toggle_open, #news_details .icon.icon_close.toggle_open, #current_details .icon.icon_close.toggle_open, #meister_leistungen .icon.icon_close.toggle_open, .body--services .icon.icon_close.toggle_open, #next_services .icon.icon_close.toggle_open { transform: rotateZ(45deg) } #contact form>div#doku, #project_overview form>div#doku, #project_details form>div#doku, #news_details form>div#doku, #current_details form>div#doku, #meister_leistungen form>div#doku, .body--services form>div#doku, #next_services form>div#doku { color: #ffe300; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; display: block } #contact form>div#doku h3, #project_overview form>div#doku h3, #project_details form>div#doku h3, #news_details form>div#doku h3, #current_details form>div#doku h3, #meister_leistungen form>div#doku h3, .body--services form>div#doku h3, #next_services form>div#doku h3 { float: left; text-transform: uppercase; font-weight: 600; color: #ffe300; font-size: 16px; font-size: 1rem; margin: 50px 0 0; width: 100% } #contact form>div#doku fieldset, #project_overview form>div#doku fieldset, #project_details form>div#doku fieldset, #news_details form>div#doku fieldset, #current_details form>div#doku fieldset, #meister_leistungen form>div#doku fieldset, .body--services form>div#doku fieldset, #next_services form>div#doku fieldset { border: none } #contact form>div#doku div, #project_overview form>div#doku div, #project_details form>div#doku div, #news_details form>div#doku div, #current_details form>div#doku div, #meister_leistungen form>div#doku div, .body--services form>div#doku div, #next_services form>div#doku div { position: relative; margin-bottom: 25px } #contact form>div#doku .content.toggle-content, #project_overview form>div#doku .content.toggle-content, #project_details form>div#doku .content.toggle-content, #news_details form>div#doku .content.toggle-content, #current_details form>div#doku .content.toggle-content, #meister_leistungen form>div#doku .content.toggle-content, .body--services form>div#doku .content.toggle-content, #next_services form>div#doku .content.toggle-content { clear: both } #contact form>div#doku .content.toggle-content.showing, #project_overview form>div#doku .content.toggle-content.showing, #project_details form>div#doku .content.toggle-content.showing, #news_details form>div#doku .content.toggle-content.showing, #current_details form>div#doku .content.toggle-content.showing, #meister_leistungen form>div#doku .content.toggle-content.showing, .body--services form>div#doku .content.toggle-content.showing, #next_services form>div#doku .content.toggle-content.showing { clear: both } #contact form>div#doku input, #project_overview form>div#doku input, #project_details form>div#doku input, #news_details form>div#doku input, #current_details form>div#doku input, #meister_leistungen form>div#doku input, .body--services form>div#doku input, #next_services form>div#doku input { position: absolute; width: 500px; height: 40px; padding: 0 .7em; background: transparent; border: none; font-size: 100%; transition: all .5s } #contact form>div#doku input:focus, #project_overview form>div#doku input:focus, #project_details form>div#doku input:focus, #news_details form>div#doku input:focus, #current_details form>div#doku input:focus, #meister_leistungen form>div#doku input:focus, .body--services form>div#doku input:focus, #next_services form>div#doku input:focus { outline: 0 } #contact form>div#doku input:valid, #project_overview form>div#doku input:valid, #project_details form>div#doku input:valid, #news_details form>div#doku input:valid, #current_details form>div#doku input:valid, #meister_leistungen form>div#doku input:valid, .body--services form>div#doku input:valid, #next_services form>div#doku input:valid { background: transparent; color: #fff } #contact form>div#doku input[type=submit], #project_overview form>div#doku input[type=submit], #project_details form>div#doku input[type=submit], #news_details form>div#doku input[type=submit], #current_details form>div#doku input[type=submit], #meister_leistungen form>div#doku input[type=submit], .body--services form>div#doku input[type=submit], #next_services form>div#doku input[type=submit] { width: auto; position: relative } #contact form>div#doku label, #project_overview form>div#doku label, #project_details form>div#doku label, #news_details form>div#doku label, #current_details form>div#doku label, #meister_leistungen form>div#doku label, .body--services form>div#doku label, #next_services form>div#doku label { display: block; -webkit-user-select: none; cursor: pointer; font-size: 90%; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-weight: 600; line-height: 3em } #contact form>div#doku label+label, #project_overview form>div#doku label+label, #project_details form>div#doku label+label, #news_details form>div#doku label+label, #current_details form>div#doku label+label, #meister_leistungen form>div#doku label+label, .body--services form>div#doku label+label, #next_services form>div#doku label+label { position: relative; padding: 0 .5em; cursor: text } #contact form>div#doku input+label, #project_overview form>div#doku input+label, #project_details form>div#doku input+label, #news_details form>div#doku input+label, #current_details form>div#doku input+label, #meister_leistungen form>div#doku input+label, .body--services form>div#doku input+label, #next_services form>div#doku input+label { color: #ffe300; opacity: 1; transform-origin: center left; transition: color .3s, transform .3s; text-transform: uppercase } #contact form>div#doku input:focus+label, #project_overview form>div#doku input:focus+label, #project_details form>div#doku input:focus+label, #news_details form>div#doku input:focus+label, #current_details form>div#doku input:focus+label, #meister_leistungen form>div#doku input:focus+label, .body--services form>div#doku input:focus+label, #next_services form>div#doku input:focus+label { color: #fff; opacity: 1; transform: scale(.8) translateY(-40px) } #contact form>div#doku .label-move+label, #project_overview form>div#doku .label-move+label, #project_details form>div#doku .label-move+label, #news_details form>div#doku .label-move+label, #current_details form>div#doku .label-move+label, #meister_leistungen form>div#doku .label-move+label, .body--services form>div#doku .label-move+label, #next_services form>div#doku .label-move+label { opacity: 1; transform: scale(.8) translateY(-40px) } #contact form>div#doku input[type=submit], #project_overview form>div#doku input[type=submit], #project_details form>div#doku input[type=submit], #news_details form>div#doku input[type=submit], #current_details form>div#doku input[type=submit], #meister_leistungen form>div#doku input[type=submit], .body--services form>div#doku input[type=submit], #next_services form>div#doku input[type=submit] { background-color: #ffe300; color: #000; border: 3px solid #ffe300; padding: 10px 25px; font-weight: 600; font-size: 16px; width: 178.45px; height: 50px } #contact form>div#doku input[type=submit].hover, #contact form>div#doku input[type=submit]:hover, #contact form>div#doku input[type=submit].active, #contact form>div#doku input[type=submit]:active, #project_overview form>div#doku input[type=submit].hover, #project_overview form>div#doku input[type=submit]:hover, #project_overview form>div#doku input[type=submit].active, #project_overview form>div#doku input[type=submit]:active, #project_details form>div#doku input[type=submit].hover, #project_details form>div#doku input[type=submit]:hover, #project_details form>div#doku input[type=submit].active, #project_details form>div#doku input[type=submit]:active, #news_details form>div#doku input[type=submit].hover, #news_details form>div#doku input[type=submit]:hover, #news_details form>div#doku input[type=submit].active, #news_details form>div#doku input[type=submit]:active, #current_details form>div#doku input[type=submit].hover, #current_details form>div#doku input[type=submit]:hover, #current_details form>div#doku input[type=submit].active, #current_details form>div#doku input[type=submit]:active, #meister_leistungen form>div#doku input[type=submit].hover, #meister_leistungen form>div#doku input[type=submit]:hover, #meister_leistungen form>div#doku input[type=submit].active, #meister_leistungen form>div#doku input[type=submit]:active, .body--services form>div#doku input[type=submit].hover, .body--services form>div#doku input[type=submit]:hover, .body--services form>div#doku input[type=submit].active, .body--services form>div#doku input[type=submit]:active, #next_services form>div#doku input[type=submit].hover, #next_services form>div#doku input[type=submit]:hover, #next_services form>div#doku input[type=submit].active, #next_services form>div#doku input[type=submit]:active { opacity: .75; transition: duration .5s } @keyframes type { from { width: 0 } } @keyframes blink { to { opacity: .025 } } #project_overview .content.contact_form, #project_details .content.contact_form, #current_details .content.contact_form, .body--services .content.contact_form, #next_services .content.contact_form, #meister_leistungen .content.contact_form, #contact .content.contact_form { padding: 2% 10% } #project_overview .content.contact_form div.contact_bg, #project_details .content.contact_form div.contact_bg, #current_details .content.contact_form div.contact_bg, .body--services .content.contact_form div.contact_bg, #next_services .content.contact_form div.contact_bg, #meister_leistungen .content.contact_form div.contact_bg, #contact .content.contact_form div.contact_bg { background: url(../../assets/img/171017_rk_bros-2017_schwarz.png) top center no-repeat; background-size: 100% auto; display: flex; flex-flow: column; position: absolute; top: 0; left: 0; right: 0; max-height: 1240px; height: 100%; z-index: 1 } #project_overview .content.contact_form div.gradient, #project_details .content.contact_form div.gradient, #current_details .content.contact_form div.gradient, .body--services .content.contact_form div.gradient, #next_services .content.contact_form div.gradient, #meister_leistungen .content.contact_form div.gradient, #contact .content.contact_form div.gradient { background: #000!important; background-color: #000!important; width: 100vw; height: 100%; position: absolute; display: block; bottom: 0; left: 0 } @media(min-width:48em) { #project_overview .content.contact_form, #project_details .content.contact_form, #current_details .content.contact_form, .body--services .content.contact_form, #next_services .content.contact_form, #meister_leistungen .content.contact_form { padding: 2% 10% } #project_overview .content.contact_form div.contact_bg, #project_details .content.contact_form div.contact_bg, #current_details .content.contact_form div.contact_bg, .body--services .content.contact_form div.contact_bg, #next_services .content.contact_form div.contact_bg, #meister_leistungen .content.contact_form div.contact_bg { background: url(../../assets/img/171017_rk_bros-2017_schwarz.png) top center no-repeat; background-size: 100% auto; display: flex; flex-flow: column; position: absolute; top: 0; left: 0; right: 0; max-height: 640px; height: 100%; z-index: 1 } #project_overview .content.contact_form div.gradient, #project_details .content.contact_form div.gradient, #current_details .content.contact_form div.gradient, .body--services .content.contact_form div.gradient, #next_services .content.contact_form div.gradient, #meister_leistungen .content.contact_form div.gradient { background: linear-gradient(to bottom, rgba(229, 229, 229, 0) 0, rgba(0, 0, 0, .99) 97%, black 98%); width: 100vw; height: 100%; position: absolute; display: block; bottom: 0; left: 0 } label { display: block; -webkit-user-select: none; cursor: pointer; font-size: 14px; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-weight: 300; line-height: 1.5em } label+label { position: relative; padding: 0 .5em; cursor: text } input+label { color: #ffe300; opacity: 1; transform-origin: center left; transition: color .3s, transform .3s; text-transform: uppercase } input:focus+label { color: #fff; opacity: 1; transform: scale(.8) translateY(-40px) } } @media(min-width:86.25em) { #project_overview .content.contact_form, #project_details .content.contact_form, #current_details .content.contact_form, #meister_leistungen .content.contact_form, .body--services .content.contact_form, #next_services .content.contact_form, #contact .content.contact_form { background-color: #282828; min-height: 550px; height: auto; max-height: 100%; position: relative } #project_overview .content.contact_form h2, #project_details .content.contact_form h2, #current_details .content.contact_form h2, #meister_leistungen .content.contact_form h2, .body--services .content.contact_form h2, #next_services .content.contact_form h2, #contact .content.contact_form h2 { font-size: 145px; font-weight: 900; text-transform: uppercase; width: auto; margin: 0; padding: 0; display: block; min-height: 100px; color: #ffe300; z-index: 1 } #project_overview .content.contact_form p, #project_details .content.contact_form p, #current_details .content.contact_form p, #meister_leistungen .content.contact_form p, .body--services .content.contact_form p, #next_services .content.contact_form p, #contact .content.contact_form p { z-index: 1; font-weight: 900; text-transform: uppercase; color: #ffe300; font-size: 24px } #project_overview .content.contact_form h2 span#headline, #project_details .content.contact_form h2 span#headline, #current_details .content.contact_form h2 span#headline, #meister_leistungen .content.contact_form h2 span#headline, .body--services .content.contact_form h2 span#headline, #next_services .content.contact_form h2 span#headline, #contact .content.contact_form h2 span#headline { font-size: 90px; font-weight: 600; text-transform: uppercase; width: auto; margin: 0; padding: 0; display: block; min-height: 100px; color: #ffe300 } #project_overview form, #project_details form, #current_details form, #meister_leistungen form, .body--services form, #next_services form, #contact form { color: #ffe300; width: 100% } #project_overview form label, #project_overview form input, #project_details form label, #project_details form input, #current_details form label, #current_details form input, #meister_leistungen form label, #meister_leistungen form input, .body--services form label, .body--services form input, #next_services form label, #next_services form input, #contact form label, #contact form input { font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 16px } #project_overview form textarea, #project_overview form label, #project_overview form input[type=email], #project_overview form input[type=text], #project_details form textarea, #project_details form label, #project_details form input[type=email], #project_details form input[type=text], #current_details form textarea, #current_details form label, #current_details form input[type=email], #current_details form input[type=text], #meister_leistungen form textarea, #meister_leistungen form label, #meister_leistungen form input[type=email], #meister_leistungen form input[type=text], .body--services form textarea, .body--services form label, .body--services form input[type=email], .body--services form input[type=text], #next_services form textarea, #next_services form label, #next_services form input[type=email], #next_services form input[type=text], #contact form textarea, #contact form label, #contact form input[type=email], #contact form input[type=text] { background: transparent; border: none; color: #ffe300 } #project_overview form input[type=submit], #project_details form input[type=submit], #current_details form input[type=submit], #meister_leistungen form input[type=submit], .body--services form input[type=submit], #next_services form input[type=submit], #contact form input[type=submit] { background-color: #ffe300; border: 3px solid #ffe300; color: #000; padding: 10px 25px; font-weight: 600; font-size: 16px; width: 178.45px; height: 50px; margin: 0 0 0 30% } #project_overview form input[type=submit].hover, #project_overview form input[type=submit]:hover, #project_overview form input[type=submit].active, #project_overview form input[type=submit]:active, #project_details form input[type=submit].hover, #project_details form input[type=submit]:hover, #project_details form input[type=submit].active, #project_details form input[type=submit]:active, #current_details form input[type=submit].hover, #current_details form input[type=submit]:hover, #current_details form input[type=submit].active, #current_details form input[type=submit]:active, #meister_leistungen form input[type=submit].hover, #meister_leistungen form input[type=submit]:hover, #meister_leistungen form input[type=submit].active, #meister_leistungen form input[type=submit]:active, .body--services form input[type=submit].hover, .body--services form input[type=submit]:hover, .body--services form input[type=submit].active, .body--services form input[type=submit]:active, #next_services form input[type=submit].hover, #next_services form input[type=submit]:hover, #next_services form input[type=submit].active, #next_services form input[type=submit]:active, #contact form input[type=submit].hover, #contact form input[type=submit]:hover, #contact form input[type=submit].active, #contact form input[type=submit]:active { opacity: .75; transition: duration .5s } #project_overview form textarea, #project_details form textarea, #current_details form textarea, #meister_leistungen form textarea, .body--services form textarea, #next_services form textarea, #contact form textarea { font-size: 80px; color: #ffe300; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; overflow: hidden } #project_overview form input::-webkit-input-placeholder, #project_overview form input:placeholder-shown, #project_overview form textarea::-webkit-input-placeholder, #project_overview form textarea:placeholder-shown, #project_details form input::-webkit-input-placeholder, #project_details form input:placeholder-shown, #project_details form textarea::-webkit-input-placeholder, #project_details form textarea:placeholder-shown, #current_details form input::-webkit-input-placeholder, #current_details form input:placeholder-shown, #current_details form textarea::-webkit-input-placeholder, #current_details form textarea:placeholder-shown, #meister_leistungen form input::-webkit-input-placeholder, #meister_leistungen form input:placeholder-shown, #meister_leistungen form textarea::-webkit-input-placeholder, #meister_leistungen form textarea:placeholder-shown, .body--services form input::-webkit-input-placeholder, .body--services form input:placeholder-shown, .body--services form textarea::-webkit-input-placeholder, .body--services form textarea:placeholder-shown, #next_services form input::-webkit-input-placeholder, #next_services form input:placeholder-shown, #next_services form textarea::-webkit-input-placeholder, #next_services form textarea:placeholder-shown, #contact form input::-webkit-input-placeholder, #contact form input:placeholder-shown, #contact form textarea::-webkit-input-placeholder, #contact form textarea:placeholder-shown { color: #ffe300 } #project_overview form input:placeholder-shown, #project_overview form textarea:placeholder-shown, #project_details form input:placeholder-shown, #project_details form textarea:placeholder-shown, #current_details form input:placeholder-shown, #current_details form textarea:placeholder-shown, #meister_leistungen form input:placeholder-shown, #meister_leistungen form textarea:placeholder-shown, .body--services form input:placeholder-shown, .body--services form textarea:placeholder-shown, #next_services form input:placeholder-shown, #next_services form textarea:placeholder-shown, #contact form input:placeholder-shown, #contact form textarea:placeholder-shown { color: #ffe300 } #project_overview form input::placeholder, #project_overview form input:placeholder-shown, #project_overview form textarea::placeholder, #project_overview form textarea:placeholder-shown, #project_details form input::placeholder, #project_details form input:placeholder-shown, #project_details form textarea::placeholder, #project_details form textarea:placeholder-shown, #current_details form input::placeholder, #current_details form input:placeholder-shown, #current_details form textarea::placeholder, #current_details form textarea:placeholder-shown, #meister_leistungen form input::placeholder, #meister_leistungen form input:placeholder-shown, #meister_leistungen form textarea::placeholder, #meister_leistungen form textarea:placeholder-shown, .body--services form input::placeholder, .body--services form input:placeholder-shown, .body--services form textarea::placeholder, .body--services form textarea:placeholder-shown, #next_services form input::placeholder, #next_services form input:placeholder-shown, #next_services form textarea::placeholder, #next_services form textarea:placeholder-shown, #contact form input::placeholder, #contact form input:placeholder-shown, #contact form textarea::placeholder, #contact form textarea:placeholder-shown { color: #ffe300 } #project_overview form textarea::-webkit-input-placeholder, #project_overview form textarea:placeholder-shown, #project_details form textarea::-webkit-input-placeholder, #project_details form textarea:placeholder-shown, #current_details form textarea::-webkit-input-placeholder, #current_details form textarea:placeholder-shown, #meister_leistungen form textarea::-webkit-input-placeholder, #meister_leistungen form textarea:placeholder-shown, .body--services form textarea::-webkit-input-placeholder, .body--services form textarea:placeholder-shown, #next_services form textarea::-webkit-input-placeholder, #next_services form textarea:placeholder-shown, #contact form textarea::-webkit-input-placeholder, #contact form textarea:placeholder-shown { font-size: 80px; animation: blink 1s infinite } #project_overview form textarea:placeholder-shown, #project_details form textarea:placeholder-shown, #current_details form textarea:placeholder-shown, #meister_leistungen form textarea:placeholder-shown, .body--services form textarea:placeholder-shown, #next_services form textarea:placeholder-shown, #contact form textarea:placeholder-shown { font-size: 80px; animation: blink 1s infinite } #project_overview form textarea::placeholder, #project_overview form textarea:placeholder-shown, #project_details form textarea::placeholder, #project_details form textarea:placeholder-shown, #current_details form textarea::placeholder, #current_details form textarea:placeholder-shown, #meister_leistungen form textarea::placeholder, #meister_leistungen form textarea:placeholder-shown, .body--services form textarea::placeholder, .body--services form textarea:placeholder-shown, #next_services form textarea::placeholder, #next_services form textarea:placeholder-shown, #contact form textarea::placeholder, #contact form textarea:placeholder-shown { font-size: 80px; animation: blink 1s infinite } #project_overview form div#doku fieldset label, #project_overview form div#doku fieldset input, #project_details form div#doku fieldset label, #project_details form div#doku fieldset input, #current_details form div#doku fieldset label, #current_details form div#doku fieldset input, #meister_leistungen form div#doku fieldset label, #meister_leistungen form div#doku fieldset input, .body--services form div#doku fieldset label, .body--services form div#doku fieldset input, #next_services form div#doku fieldset label, #next_services form div#doku fieldset input, #contact form div#doku fieldset label, #contact form div#doku fieldset input { display: block } #project_overview div.contact_bg, #project_details div.contact_bg, #current_details div.contact_bg, #meister_leistungen div.contact_bg, .body--services div.contact_bg, #next_services div.contact_bg, #contact div.contact_bg { background: url(../../assets/img/171017_rk_bros-2017_schwarz.png) top center no-repeat; background-size: 100% auto; display: flex; align-content: center; padding: 30px } #project_overview .icon, #project_details .icon, #current_details .icon, #meister_leistungen .icon, .body--services .icon, #next_services .icon, #contact .icon { display: inline-block; position: relative; cursor: pointer; padding: 1.2rem; margin: 0 0 0 10px; transition: 300ms; z-index: 1 } #project_overview .icon.icon_close, #project_details .icon.icon_close, #current_details .icon.icon_close, #meister_leistungen .icon.icon_close, .body--services .icon.icon_close, #next_services .icon.icon_close, #contact .icon.icon_close { transform: rotateZ(0deg) } #project_overview .icon.icon_close:before, #project_details .icon.icon_close:before, #current_details .icon.icon_close:before, #meister_leistungen .icon.icon_close:before, .body--services .icon.icon_close:before, #next_services .icon.icon_close:before, #contact .icon.icon_close:before { position: absolute; content: ''; width: .25rem; height: 1.8rem; background: #ffe300; display: inline-block; transition: 500ms; top: 11%; left: 45% } #project_overview .icon.icon_close:after, #project_details .icon.icon_close:after, #current_details .icon.icon_close:after, #meister_leistungen .icon.icon_close:after, .body--services .icon.icon_close:after, #next_services .icon.icon_close:after, #contact .icon.icon_close:after { position: absolute; top: 11%; left: 45%; content: ''; width: .25rem; height: 1.8rem; background: #ffe300; display: inline-block; transform: rotateZ(90deg) } #project_overview .icon.icon_close.toggle_open, #project_details .icon.icon_close.toggle_open, #current_details .icon.icon_close.toggle_open, #meister_leistungen .icon.icon_close.toggle_open, .body--services .icon.icon_close.toggle_open, #next_services .icon.icon_close.toggle_open, #contact .icon.icon_close.toggle_open { transform: rotateZ(45deg) } #project_overview form div#doku, #project_details form div#doku, #current_details form div#doku, #meister_leistungen form div#doku, .body--services form div#doku, #next_services form div#doku, #contact form div#doku { color: #ffe300; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif } #project_overview form div#doku h3, #project_details form div#doku h3, #current_details form div#doku h3, #meister_leistungen form div#doku h3, .body--services form div#doku h3, #next_services form div#doku h3, #contact form div#doku h3 { float: left; text-transform: uppercase; font-weight: 600; font-size: 24px; color: #ffe300 } #project_overview form div#doku fieldset, #project_details form div#doku fieldset, #current_details form div#doku fieldset, #meister_leistungen form div#doku fieldset, .body--services form div#doku fieldset, #next_services form div#doku fieldset, #contact form div#doku fieldset { border: none } #project_overview form div#doku div, #project_details form div#doku div, #current_details form div#doku div, #meister_leistungen form div#doku div, .body--services form div#doku div, #next_services form div#doku div, #contact form div#doku div { position: relative; margin-bottom: 25px; display: none; } #project_overview form div#doku .content.toggle-content.showing, #project_details form div#doku .content.toggle-content.showing, #current_details form div#doku .content.toggle-content.showing, #meister_leistungen form div#doku .content.toggle-content.showing, .body--services form div#doku .content.toggle-content.showing, #next_services form div#doku .content.toggle-content.showing, #contact form div#doku .content.toggle-content.showing { clear: both } #project_overview form div#doku input, #project_details form div#doku input, #current_details form div#doku input, #meister_leistungen form div#doku input, .body--services form div#doku input, #next_services form div#doku input, #contact form div#doku input { position: absolute; width: 500px; height: 40px; padding: 0 .7em; background: transparent; border: none; font-size: 100%; transition: all .5s } #project_overview form div#doku input:focus, #project_details form div#doku input:focus, #current_details form div#doku input:focus, #meister_leistungen form div#doku input:focus, .body--services form div#doku input:focus, #next_services form div#doku input:focus, #contact form div#doku input:focus { outline: 0 } #project_overview form div#doku input:valid, #project_details form div#doku input:valid, #current_details form div#doku input:valid, #meister_leistungen form div#doku input:valid, .body--services form div#doku input:valid, #next_services form div#doku input:valid, #contact form div#doku input:valid { background: transparent; color: #fff } #project_overview form div#doku input[type=submit], #project_details form div#doku input[type=submit], #current_details form div#doku input[type=submit], #meister_leistungen form div#doku input[type=submit], .body--services form div#doku input[type=submit], #next_services form div#doku input[type=submit], #contact form div#doku input[type=submit] { width: auto; position: relative } #project_overview form div#doku label, #project_details form div#doku label, #current_details form div#doku label, #meister_leistungen form div#doku label, .body--services form div#doku label, #next_services form div#doku label, #contact form div#doku label { display: block; -webkit-user-select: none; cursor: pointer; font-size: 24px; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-weight: 300; line-height: 1.5em } #project_overview form div#doku label+label, #project_details form div#doku label+label, #current_details form div#doku label+label, #meister_leistungen form div#doku label+label, .body--services form div#doku label+label, #next_services form div#doku label+label, #contact form div#doku label+label { position: relative; padding: 0 .5em; cursor: text } #project_overview form div#doku input+label, #project_details form div#doku input+label, #current_details form div#doku input+label, #meister_leistungen form div#doku input+label, .body--services form div#doku input+label, #next_services form div#doku input+label, #contact form div#doku input+label { color: #ffe300; opacity: 1; transform-origin: center left; transition: color .3s, transform .3s; text-transform: uppercase } #project_overview form div#doku input:focus+label, #project_details form div#doku input:focus+label, #current_details form div#doku input:focus+label, #meister_leistungen form div#doku input:focus+label, .body--services form div#doku input:focus+label, #next_services form div#doku input:focus+label, #contact form div#doku input:focus+label { color: #fff; opacity: 1; transform: scale(.8) translateY(-40px) } #project_overview form div#doku input[type=submit], #project_details form div#doku input[type=submit], #current_details form div#doku input[type=submit], #meister_leistungen form div#doku input[type=submit], .body--services form div#doku input[type=submit], #next_services form div#doku input[type=submit], #contact form div#doku input[type=submit] { background-color: #ffe300; color: #000; border: 3px solid #ffe300; padding: 10px 25px; font-weight: 600; font-size: 16px; width: 178.45px; height: 50px } #project_overview form div#doku input[type=submit].hover, #project_overview form div#doku input[type=submit]:hover, #project_overview form div#doku input[type=submit].active, #project_overview form div#doku input[type=submit]:active, #project_details form div#doku input[type=submit].hover, #project_details form div#doku input[type=submit]:hover, #project_details form div#doku input[type=submit].active, #project_details form div#doku input[type=submit]:active, #current_details form div#doku input[type=submit].hover, #current_details form div#doku input[type=submit]:hover, #current_details form div#doku input[type=submit].active, #current_details form div#doku input[type=submit]:active, #meister_leistungen form div#doku input[type=submit].hover, #meister_leistungen form div#doku input[type=submit]:hover, #meister_leistungen form div#doku input[type=submit].active, #meister_leistungen form div#doku input[type=submit]:active, .body--services form div#doku input[type=submit].hover, .body--services form div#doku input[type=submit]:hover, .body--services form div#doku input[type=submit].active, .body--services form div#doku input[type=submit]:active, #next_services form div#doku input[type=submit].hover, #next_services form div#doku input[type=submit]:hover, #next_services form div#doku input[type=submit].active, #next_services form div#doku input[type=submit]:active, #contact form div#doku input[type=submit].hover, #contact form div#doku input[type=submit]:hover, #contact form div#doku input[type=submit].active, #contact form div#doku input[type=submit]:active { opacity: .75; transition: duration .5s } @keyframes type { from { width: 0 } } @keyframes blink { to { opacity: .025 } } #contact .content.contact_form { padding: 2% 10% } #contact .content.contact_form div.contact_bg { background: url(/media/rk_panorama_nacht_contact.png) top center no-repeat; background-size: 100% auto; display: flex; flex-flow: column; position: absolute; top: 0; left: 0; right: 0; max-height: 1240px; height: 100%; z-index: 1 } #contact .content.contact_form div.gradient { background-color: #000; width: 100vw; height: 100%; position: absolute; display: block; bottom: 0; left: 0 } #project_overview .content.contact_form, #project_details .content.contact_form, #news_details .content.contact_form, #current_details .content.contact_form, .body--services .content.contact_form, #next_services .content.contact_form, #meister_leistungen .content.contact_form { padding: 2% 10% } #project_overview .content.contact_form div.contact_bg, #project_details .content.contact_form div.contact_bg, #news_details .content.contact_form div.contact_bg, #current_details .content.contact_form div.contact_bg, .body--services .content.contact_form div.contact_bg, #next_services .content.contact_form div.contact_bg, #meister_leistungen .content.contact_form div.contact_bg { background: url(../../assets/img/171017_rk_bros-2017_schwarz.png) top center no-repeat; background-size: 100% auto; display: flex; flex-flow: column; position: absolute; top: 0; left: 0; right: 0; max-height: 1240px; height: 100%; z-index: 1 } #project_overview .content.contact_form div.gradient, #project_details .content.contact_form div.gradient, #news_details .content.contact_form div.gradient, #current_details .content.contact_form div.gradient, .body--services .content.contact_form div.gradient, #next_services .content.contact_form div.gradient, #meister_leistungen .content.contact_form div.gradient { background: linear-gradient(to bottom, rgba(229, 229, 229, 0) 30%, rgba(0, 0, 0, .99) 97%, black 98%); width: 100vw; height: 100%; position: absolute; display: block; bottom: 0; left: 0 } } .contact-checkbox { margin-top: 25px } #privacy-check { display: none } .check-box { cursor: pointer; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif!important; position: relative; padding-left: 40px; padding-top: 5px; font-weight: 800; text-transform: uppercase; font-size: 20px } .check-box:before { position: absolute; content: ''; width: 30px; height: 30px; background: transparent; text-align: center; left: 0; top: 2px; border: 4px solid #ffe300; transition: all .3s ease } .check-box:after { position: absolute; content: '\f00c'; font-family: FontAwesome; font-size: 20px; font-weight: 400; line-height: 20px; text-align: center; fill: #ffe300!important; color: #ffe300!important; left: 7px; top: 7px; transform: scale(0); transition: all .3s ease } #privacy-check:checked+.check-box:after { transform: scale(1) } .check-box a { font-size: 22px; font-weight: 700; font-family: neuzeit-grotesk, Century Gothic, CenturyGothic, AppleGothic, sans-serif!important; color: #fff; transition: all .5s ease } .check-box a:hover { color: #aeaeae } input::-webkit-input-placeholder, input:placeholder-shown { animation: blink 1s infinite; caret-color: transparent } input:placeholder-shown { animation: blink 1s infinite; caret-color: transparent } input::placeholder, input:placeholder-shown { animation: blink 1s infinite; caret-color: transparent } .color-yellow { background-color: #ffe300 } body#imprint { transition: background-color 1s ease } #imprint #wrapper { padding: 0 20px; width: 100% } #imprint section.content { display: flex; width: 100%; margin: 0 auto; flex-flow: column; align-items: center } #imprint section.content h2 { font-weight: 600; text-transform: uppercase; margin: -5px 0 30px } #imprint section.content div { display: flex; flex-flow: column; width: 100% } #imprint section.content div p { width: 100% } #imprint section.content div.one, #imprint section.content div.two { margin: 0 0 30px; display: flex; padding: 0 } #imprint section.content div.one p, #imprint section.content div.one a, #imprint section.content div.two p, #imprint section.content div.two a { margin: 0; padding: 0; } @media(min-width:48em) { #imprint #wrapper { padding: 0 20px } #imprint section.content { display: flex; margin: 0 0 80px; flex-flow: column; align-items: center; width: 100% } #imprint section.content div { width: 100%; display: flex; flex-flow: column } #imprint section.content div.one, #imprint section.content div.two { margin: 0 0 30px } #imprint section.content h2 { font-weight: 600; text-transform: uppercase; margin: -5px 0 80px } #imprint section.content div.one { padding-right: 0; width: 100% } #imprint section.content div.two { width: 100%; padding-left: 0 } #imprint section.content div.one, #imprint section.content div.two { display: flex } #imprint section.content div.one p, #imprint section.content div.one a, #imprint section.content div.two p, #imprint section.content div.two a { margin: 0; padding: 0 } } @media(min-width:86.25em) { #imprint #wrapper { width: 100%; height: auto; display: flex } #imprint section.content { display: flex; flex-flow: column; max-width: 1280px; min-width: 80%; margin: 0 auto; align-items: unset } #imprint section.content h2 { font-weight: 600; font-size: 30px; line-height: 30px; text-transform: uppercase; display: flex; align-self: flex-start; margin: -5px 0 80px } #imprint section.content div { display: flex; flex-flow: column } #imprint section.content div.one, #imprint section.content div.two { display: flex } #imprint section.content div.one p, #imprint section.content div.one a, #imprint section.content div.two p, #imprint section.content div.two a { margin: 0; padding: 0 } #imprint section.content div.one a, #imprint section.content div.two a { display: flex; font-size: 1em; flex-flow: column } #imprint section.content div.one { padding-right: 15px; width: 100% } #imprint section.content div.two { width: 100%; } #imprint .bg { position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -1 } #imprint .main_content { width: 100% } #imprint .panel:first-child div { flex-flow: row } } #jobssingle .job_filter { display: none } #jobs .wrapper { min-height: 100vh; min-width: 100vw; overflow: hidden } #jobs div.panel .skills_00 a { font-size: 16px; font-size: 1rem } #jobs video { width: 100vw } #jobs .video { position: relative } #jobs p.jobs { position: absolute; bottom: 13px; text-align: center; margin: auto; text-transform: uppercase; color: #fff; width: 100% } #jobs strong { font-size: 1.11rem; font-weight: 600; display: flex } #jobs h5 { font-weight: 600; font-size: 16px; font-size: 1.11rem; margin-bottom: 1.11rem; } #jobs nav.share { display: flex; justify-content: space-evenly } #jobs .shariff { display: flex; margin: 0 auto } #jobs .shariff ul { display: block } #jobs .shariff li { height: auto!important; margin: 0; padding: 0; display: inline-block } #jobs .shariff li a { height: auto!important; width: auto!important } #jobs .shariff li .fa { line-height: 1em; width: auto!important } #jobs .shariff .orientation-horizontal li { min-width: 50px; max-width: 50px } #jobs .shariff .facebook a, #jobs .shariff .pinterest a, #jobs .shariff .twitter a, #jobs .shariff .xing a, #jobs .shariff .linkedin a { background-color: rgba(255, 255, 255, 0) } #jobs .shariff .facebook a:hover, #jobs .shariff .pinterest a:hover, #jobs .shariff .twitter a:hover, #jobs .shariff .xing a:hover, #jobs .shariff .linkedin a:hover { background-color: rgba(255, 255, 255, 0) } #jobs span.share_text { display: none!important; visibility: hidden } #jobs .shariff .facebook .fa-facebook, #jobs .shariff .pinterest .fa-pinterest-p, #jobs .shariff .twitter .fa-twitter, #jobs .shariff .xing .fa-xing, #jobs .shariff .linkedin .fa-linkedin { font-size: 24px; display: block; text-align: center } #jobs .shariff .facebook .fa-facebook span, #jobs .shariff .pinterest .fa-pinterest-p span, #jobs .shariff .twitter .fa-twitter span, #jobs .shariff .xing .fa-xing span, #jobs .shariff .linkedin .fa-linkedin span { display: block; text-align: center } #jobs section.black { background-color: #000; display: flex; flex-flow: column; color: #ffe300; padding: 20px!important } #jobs section.black div { display: flex; width: auto!important; flex-flow: column; margin: 0 auto; max-width: 1200px } #jobs section.black h2 { display: flex; text-transform: uppercase; font-weight: 600; margin: 0 0 60px; padding: 0; color: #ffe300; width: auto!important } #jobs section.black .black_content { width: auto!important } #jobs section.black .black_content strong { text-transform: uppercase } #jobs section.black .black_content p { color: #ffe300 } #jobs .overview { text-align: center; margin: 30px 0; width: 100vw; font-weight: 600 } #jobs .overview ul { display: block; margin: 0 auto; width: 100vw } #jobs .overview ul li { display: inline-block; width: 100%; transition: transform .2 ease-in; transition-duration: 400ms; text-transform: uppercase } #jobs .overview ul li.hover, #jobs .overview ul li:hover { transform: scale(1.2, 1.2); font-weight: 600 } #jobs .main_content { margin: 0 auto; display: flex; flex-flow: column } #jobs .main_content article { padding: 60px 20px 0!important; width: 100%!important; margin: 0 auto; max-width: 1200px } #jobs .main_content article p, #jobs .main_content article h2 { display: flex } #jobs .main_content article p:first-child { padding: 0 0 30px } #jobs section h2, #jobs section h3 { font-weight: 600; font-size: 30px } #jobs section h2 { width: 80vw; margin: 0 auto; overflow: hidden; transition: height .3s ease } #jobs section button { overflow: hidden; transition: all .3s ease .4s } #jobs section button h3 { margin-bottom: 0 } #jobs .social_share { display: flex; margin-top: 30px; flex-flow: column } #jobs .social_share p { text-transform: uppercase; font-weight: 600; margin-bottom: 15px; text-align: center; width: 100% } #jobs .social_share .share { text-align: start } #jobs .social_share nav.share ul { display: block } #jobs .social_share nav.share ul li { display: inline-block } #jobs .social_share nav.share ul li { width: 45px } #jobs .social_share nav.share ul li a { font-size: 25px; text-align: start; color: #000 } #jobs button.accordion { background-color: #fff; cursor: pointer; width: 100%; text-align: left; border: none; outline: none; transition: .4s; margin: 0; margin: 0 auto!important; padding: 0!important; max-height: 0; min-height: 0 } #jobs button.accordion .pos_acc { max-width: 1200px; padding: 0 20px } #jobs button.show-jobs { max-height: 200px; padding: 18px 0 40px!important } #jobs button.accordion.pulse.active { background-color: #ffe300 } #jobs div.panel { background-color: #fff; display: flex; height: 100%; max-height: 0; width: 100vw; transition: all .4s ease; overflow: hidden; margin: 0 auto } #jobs div.panel .pos { max-width: 1200px; padding: 0 20px } #jobs div.panel .skills_00 { padding: 0 0 30px } #jobs div.panel:last-of-type { margin-bottom: 0!important } #jobs button.accordion.pulse .pos_acc:before { content: '\002B'; color: #ffe300; font-weight: 900; float: left; font-size: 4em; transition: 300ms; line-height: 40px; font-family: Arial , 'Helvetica Neue', Helvetica, sans-serif; animation: pulse 1.25s infinite } #jobs button.accordion.pulse.active .pos_acc:before { content: "\002B"; color: #fff; transform: rotateZ(45deg); animation: none } #jobs .panel .pos { margin: 0 auto } #jobs .panel.show { width: 100vw; max-height: 2500px; background-color: #ffe300; padding-bottom: 30px } #jobs .panel.show .pos { margin: 0 auto } .show-jobs-title { height: 34px!important; display: none } .pos_acc { width: 100%!important; margin: 0 auto; padding: 0 } .skill_area { width: 100%; padding: 0 20px; margin: 0 auto } #filters li { min-height: 40px } @media(min-width:30em) { #jobs .main_content article { width: 80vw; margin: 0 auto } #jobs strong { font-weight: 600; display: flex } #jobs h5 { font-weight: 600; font-size: 1.11rem; margin-bottom: 1.11rem; } #jobs .skill_area { width: 100%; padding: 0 20px; margin: 0 auto } #jobs .skill_area .skills_00 { padding: 0 0 30px } #jobs .skill_area .skills_01 { padding: 0 } #jobs section.black .black_content { flex-flow: column } #jobs section.black div:first-child { padding: 0 0 30px } #jobs section.black div { display: flex; width: 80vw; margin: 0 auto; flex-flow: column } } @media(min-width:48em) { #jobs p.jobs { position: absolute; text-align: center; margin: auto; text-transform: uppercase; color: #fff; width: 100% } #jobs .skills_00 { padding-right: 15px } #jobs .skills_01 { padding-left: 15px } #jobs .button.accordion.pulse:before { float: left; margin-left: none } #jobs section.black .black_content { flex-flow: column } #jobs section.black div { display: flex; width: 80vw; margin: 0 auto; flex-flow: column } #jobs section.black div:first-child { padding: 0 0 30px } } @media(min-width:86.25em) { .show-jobs-title { display: block } #jobs p.jobs { position: absolute; bottom: 13px; top: unset; text-align: center; margin: auto; text-transform: uppercase; color: #fff; width: 100% } #jobs strong { font-weight: 600; display: flex } #jobs h5 { font-weight: 600; font-size: 1.11rem; margin-bottom: 1.11rem; } #jobs button.accordion { background-color: #fff; cursor: pointer; padding: 18px 20px 60px; width: 100%; text-align: left; border: none; outline: none; transition: .4s; margin: 0 } #jobs button.accordion .pos_acc { width: 1280px; margin: 0 auto } #jobs button.accordion.pulse.active { background-color: #ffe300 } #jobs div.panel { background-color: #fff; display: flex; height: 100%; max-height: 0; transition: all .4s ease; overflow: hidden } #jobs div.panel .pos { display: flex; margin: 0 auto } #jobs div.panel .skill_area { display: flex; flex-flow: row; margin: 0 auto } #jobs div.panel .skills_00 { padding-right: 15px } #jobs div.panel .skills_01 { padding-left: 15px } #jobs div.panel .skills_00, #jobs div.panel .skills_01 { display: flex; flex-flow: column; width: 50% } #jobs div.panel .skills_00 a, #jobs div.panel .skills_01 a { font-size: 1rem } #jobs div.panel .skills_00 ul, #jobs div.panel .skills_01 ul { margin: 0 0 0 15px } #jobs button.accordion.pulse.active .pos_acc:before { content: "\002B"; color: #fff; transform: rotateZ(45deg); animation: none } @keyframes pulse { 0% { transform: scale(.9); opacity: .5 } 50% { transform: scale(1); opacity: 1 } 100% { transform: scale(.9); opacity: .5 } } #jobs .panel.show { width: 100vw; max-height: 2500px; background-color: #ffe300; padding-bottom: 30px } #jobs .main_content { margin: 0 auto; display: flex; flex-flow: column } #jobs .main_content article { display: flex; width: 1280px; margin: 0 auto } #jobs .main_content article p:last-child { padding-left: 15px } #jobs .main_content article p:first-child { padding-right: 15px } #jobs .main_content article p, #jobs .main_content article h2 { display: flex; width: 50% } #jobs .overview { display: flex; margin: 30px 0 } #jobs .overview ul#filters li { width: 150px!important } #jobs .overview .arrow_left:before { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(225deg) } #jobs .overview .arrow_right:after { content: ''; display: inline-block; margin-bottom: -2px; margin-bottom: -.125rem; width: 14px; height: 14px; border: 1px solid #000; border-left-width: 0; border-bottom-width: 0; position: relative; transform: rotate(45deg) } #jobs section h2, #jobs section h3 { font-weight: 600; font-size: 30px; margin-bottom: 30px; width: 1280px; margin: 0 auto } #jobs section h3 { font-size: 20px; margin-bottom: 0; padding: 0 } #jobs .social_share { display: flex; margin-top: 30px; flex-flow: row } #jobs .social_share p { text-transform: uppercase; font-weight: 600; margin-bottom: 15px; width: unset } #jobs .social_share .share { text-align: start } #jobs .social_share nav.share ul li { width: 45px } #jobs .social_share nav.share ul li a { font-size: 25px; text-align: start } #jobs .content.contact_form { background-color: #282828; padding: 20px } #jobs .content.contact_form h2 span#headline { font-size: 80px; text-transform: uppercase; width: 800px; margin: 0 20px; display: block; min-height: 100px } #jobs section.black { background-color: #000; color: #ffe300; display: flex; flex-flow: column; padding: 2% 10% } #jobs section.black>div { padding: 0 20px 30px!important } #jobs section.black div { display: flex; width: 1280px; flex-flow: column; margin: 0 auto } #jobs section.black h2 { display: flex; text-transform: uppercase; font-weight: 600; margin: 0 0 60px; padding: 0; color: #ffe300 } #jobs section.black .black_content { display: flex; flex-flow: row } #jobs section.black .black_content div:first-child { padding-right: 15px } #jobs section.black .black_content div:last-child { padding-left: 15px } #jobs section.black .black_content strong { text-transform: uppercase } #jobs section.black .black_content p { color: #ffe300 } #jobs .show { display: none; width: 100%; background: #ffe300 } } #banner-load video, #banner-load img { position: relative } #banner-load img { min-height: 50vh; min-width: 100vw } #banner-load div { height: 100% } .teaser { position: absolute; top: 60vh; z-index: 1000; right: 0; left: 0; width: 90vw; margin: 0 auto; font-size: 32px } .teaser p { color: #fff; font-size: .55em; line-height: 120%; font-weight: 600; text-transform: uppercase; word-wrap: break-word; margin: 0 auto; text-align: center } .random-header .arrow-down2 { display: none } .random-header .arrow-down2 a { display: block; z-index: 0; width: 100%; height: 100% } .random-header .arrow-down2 a:active, .random-header .arrow-down2 a:focus { outline: none } .random-header .animated2.bounce2 { -webkit-animation-name: bouncing; -webkit-animation-duration: 6s; -webkit-animation-iteration-count: infinite; animation-name: bouncing; animation-duration: 6s; animation-iteration-count: infinite } .random-header #anchor { position: relative; top: -70px } @media(min-width:48em) { .scrollmagic-pin-spacer { width: 100%!important; display: block!important } #banner-load { display: block!important; position: relative!important; top: 0!important } p.aktuelles { position: absolute; bottom: 3px; text-align: center; margin: auto; text-transform: uppercase; color: #fff; width: 100vw } #banner-load video { position: relative; min-height: 100vh; min-width: 100vw } #banner-load img { position: relative; min-height: 100vh; min-width: 100vw } .teaser { position: absolute; z-index: 1; top: 60vh; right: 0; left: 0; width: 100vw } .teaser p { color: #fff; font-size: 1.1em; font-weight: 600; text-transform: uppercase; width: auto!important; margin: 0 auto; text-align: center } .random-header { height: 100vh; overflow: hidden } .fixed { height: unset!important } .fixed img, .fixed video { position: fixed!important } .l-margin { top: 100vh!important; width: 100vw; margin-top: 0!important } .top-pos { top: -250px!important; width: 100vw; margin-top: 0!important } #h-spacer { height: 0 } .set-height { height: 250px!important } .arrow-down2 { width: 56px; height: 56px; border: 6px solid #fff; border-top-width: 0; border-right-width: 0; position: absolute; z-index: 99; bottom: 75px; left: 50%; transform: translateX(-50%) rotate(-45deg); cursor: pointer; margin-top: -100px } .arrow-down2 a { display: block; z-index: 0; width: 100%; height: 100% } .arrow-down2 a:active, .arrow-down2 a:focus { outline: none } .animated2.bounce2 { -webkit-animation-name: bouncing; -webkit-animation-duration: 6s; -webkit-animation-iteration-count: infinite; animation-name: bouncing; animation-duration: 6s; animation-iteration-count: infinite } #anchor { position: relative; top: -70px } } @media(min-width:86.25em) { .scrollmagic-pin-spacer { width: 100%!important; display: block!important } #banner-load { display: block!important; position: relative!important; top: 0!important } p.aktuelles { position: absolute; bottom: 3px; text-align: center; margin: auto; text-transform: uppercase; color: #fff } #banner-load video { position: relative; min-height: 100vh; min-width: 100vw } #banner-load img { position: relative; min-height: 100vh; min-width: 100vw } .teaser { position: absolute; z-index: 1; top: 60vh; right: 0; left: 0 } .teaser p { color: #fff; font-size: 1.5em; font-weight: 600; text-transform: uppercase; width: auto!important; margin: 0 auto; text-align: center } .random-header { height: 100vh; overflow: hidden } .fixed { height: unset!important } .fixed img, .fixed video { position: fixed!important } .l-margin { top: 100vh!important; width: 100vw; margin-top: 0!important } .top-pos { top: -250px!important; width: 100vw; margin-top: 0!important } #h-spacer { height: 0 } .set-height { height: 250px!important } .arrow-down2 { width: 56px; height: 56px; border: 6px solid #fff; border-top-width: 0; border-right-width: 0; position: absolute; z-index: 99; bottom: 75px; left: 50%; transform: translateX(-50%) rotate(-45deg); cursor: pointer; margin-top: -100px } .arrow-down2 a { display: block; z-index: 0; width: 100%; height: 100% } .arrow-down2 a:active, .arrow-down2 a:focus { outline: none } .animated2.bounce2 { -webkit-animation-name: bouncing; -webkit-animation-duration: 6s; -webkit-animation-iteration-count: infinite; animation-name: bouncing; animation-duration: 6s; animation-iteration-count: infinite } #anchor { position: relative; top: -70px } } @keyframes bouncing { 0% { top: 0 } 10% { top: 15px } 20% { top: 0 } 100% { top: 0 } } .slider_wrapper_project { max-width: 1380px; height: 690px; margin: 6px auto; position: relative } .slider_wrapper_project .slider_slide { height: 100%; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: visible } .slider_wrapper_project .slider_slide:before { content: ""; background-position: center; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .5s ease; opacity: 0 } .slider_wrapper_project .active:before { opacity: 1 } .slider_wrapper_project .slider_arrow { z-index: 1; position: absolute; bottom: 0; right:0; width: 100px; height: 50px; display:block; } .slider_wrapper_project .slider_arrow_left { width: 50px; height: 50px; opacity:1; transition: opacity .5s ease; background: rgba(0, 0, 0, .25); float:left; } .slider_wrapper_project .slider_arrow_left:hover { opacity:0.7 } .slider_wrapper_project .slider_arrow_left i { position: absolute; top: 50%; left: 17px; transform: translate(0, -50%); cursor: pointer; font-size: 36px; color: #fff } .slider_wrapper_project .slider_arrow_right { width: 50px; height: 50px; opacity:1; transition: opacity .5s ease; background: rgba(0, 0, 0, .25); float:right; } .slider_wrapper_project .slider_arrow_right:hover { opacity:0.7 } .slider_wrapper_project .slider_arrow_right i { position: absolute; top: 50%; right: 17px; transform: translate(0, -50%); cursor: pointer; font-size: 36px; color: #fff } @media(max-width:767px) { .slider_wrapper_project { margin: 0 auto!important } .slider_wrapper_project .slider_arrow_left, .slider_wrapper_project .slider_arrow_right { background-image: none; opacity: 1 } .oneaward img, .threeaward img, .twoaward img { width: 95px!important; top: 35px!important; } } @media(max-width: 700px) { .oneaward img, .threeaward img, .twoaward img { width: 130px!important; top: 20px!important; } #project_details article div.services { width: 100%; } } @media(max-width: 442px) { .oneaward img, .threeaward img, .twoaward img { width: 90px!important; top: 40px!important; } .projetawards { margin-left: 0px; } } @media(max-width: 370px) { .projetawards img { max-width: 80px; } } .project-modul { margin-bottom: 70px; } .project-modul.padding-3img { padding: 0px 20px; } .project-modul article{ max-width: unset !important; } .project-modul .splide { max-width: 100vw; } .project-modul .splide__arrows.hidden { display: none; } .project-modul.video_slider .slider_wrapper_project, .img_slider .slider_wrapper_project { margin: 0; transform: translateY(-100%); position: absolute; width: 100%; } .project-modul.video_slider .splide__arrow--prev, .img_slider .splide__arrow--prev { left: 0px; } .project-modul .splide__slide img { min-height: 300px; } .project-modul .slider_wrapper_project { max-height: 100%; } .project-modul.projekt_details .grid-default { --gap-y: 30px; --gap-y-md: 10px; --gap-x-md: 10px; } .project-modul .heading-container { --col-span: 12; } .project-modul .heading-container h1.h2 { font-size: 32.4px; font-size: 2.025rem; line-height: 1.11; } .projekt_details h1.h2 { font-size: 32.4px; font-size: 2.025rem; line-height: 1.11; } .project-modul .heading-container h1, .project-modul .heading-container p{ margin-bottom: 0px; } .project-modul .heading-container p{ text-transform: uppercase; } .project-modul .projekttext { --col-span-md: 7; --col-span: 12; width: 85%; --row-span-md: 2; } .project-modul .info-container { --col-span-lg: 2; --col-span-md: 5; --col-span-sm: 6; --col-span: 12; } .project-modul .info-container > :last-child { margin-bottom: 0px; } .project-modul .kunden_logo { --col-span-md: 3; --col-span: 6; width: 100%; height: 100%; max-width: 250px; max-height: 200px; justify-self: end; } .project-modul .kunden_logo img{ max-width: 100%; height: auto; } .project-modul .award-container img { max-width: 100px; height: fit-content; } .project-modul .img3 { --gap-y: clamp(1.875rem, -0.556rem + 7.778vw, 6.25rem); } .project-modul .img3 > div , .img3 img { max-width: 100%; } .project-modul .img3 .img_left{ --col-start-md: 1; --col-span-md: 6; --row-start-md: 1; --row-span-md: 2; --col-span: 10; } .project-modul .img3 .img_right_top{ --col-start-md: 8; --col-span-md: 4; --row-start-md: 1; --col-span: 9; --col-start: 4; } .project-modul .img3 .img_right_bot{ --col-start-md: 8; --col-span-md: 5; --row-start-md: 2; --col-span: 10; --col-start: 2; } .project-modul .img3 .img_left_top{ --col-start-md: 1; --col-span-md: 4; --row-start-md: 1; --col-span: 9; } .project-modul .img3 .img_left_bot{ --col-start-md: 1; --col-span-md: 5; --row-start-md: 2; --col-span: 10; --col-start: 2; } .project-modul .img3 .img_right{ --col-start-md: 7; --col-span-md: 6; --row-start-md: 1; --row-span-md: 2; --col-span: 10; --col-start: 3; } .project-modul .projekttext p:last-child { margin-bottom: 0px; } .project-modul article{ grid-row-gap: 0px !important; margin: 0px !important; } .project-modul article div.services div { margin: 0px !important; margin-bottom: 20px !important; } .project-modul .more_proj_details h2 { margin-top: 0px !important; } @media(max-width: 768px) { .project-modul .projekttext { width: 100%; } } @media(min-width: 768px) { .project-modul .txt-container { max-width: 50% !important; } } .filter-white { filter: brightness(0) invert(); } .filter-black { filter: brightness(0); } html.alex, body.alex { scrollbar-color: #111 #ddd !important; } body.alex ::-webkit-scrollbar { background-color: #ddd; } body.alex ::-webkit-scrollbar-thumb { background-color: #111; } .alex { max-width: 1380px; margin: 0 auto; margin-top: 70px; } .alex h1.h2 { font-size: 1.5rem !important; line-height: 1,11 !important; font-weight: 600; } .alex .yform { margin-bottom: 70px; } .alex .input-container { max-width: 800px; gap: 20px; margin-bottom: 20px; } .alex label { pointer-events: none; } .alex .control-label, .alex .form-control, .alex .yform button { color: black !important; font-size: 16px !important; } .alex .form-control{ width: 100% !important; } .alex .control-label { position: absolute; opacity: 80%; transition: opacity 0.25s ease; } .alex .control-label.active{ opacity: 0%; } .alex #yform-formular-firstname, .alex #yform-formular-lastname { --col-span: 12; --col-span-md: 6; } .alex #yform-formular-personNr, .alex #yform-formular-message { --col-span: 12; } .alex .textarea { width: 100%; } .alex .form-group { border: 2px solid black; border-radius: 5px; padding: 10px 10px; } .alex .yform button { border: 2px solid black; border-radius: 5px; padding: 5px 10px; } .alex #cc-main{ display: none; } .alex #yform-formular-field-17-abschicken { display: none; } .alex .back-to-top { display: none !important; } .alex .input-container, .alex p { max-width: 800px; } @media(max-width: 1380px) { .alex #contact_form, .alex h3, .alex section { padding: 0px 20px; } } @media only screen and (min-width: 48rem) { .alex h1.h2 { font-size: 2.25rem !important; } } .black .fa-facebook, .black .fa-instagram, .black .fa-youtube, .black .fa-linkedin, .black .fa-xing { background-color: white; } .fa-facebook, .fa-instagram, .fa-youtube, .fa-linkedin, .fa-xing { display: block; width: 40px; height: 40px; mask-size: contain; mask-repeat: no-repeat; background-color: black; } .fa-facebook { mask-image: url("/media/facebook-f-brands-solid.svg"); position: relative; left: 20px; } .fa-instagram { mask-image: url("/media/instagram-brands-solid.svg"); } .fa-youtube { mask-image: url("/media/youtube-brands-solid.svg"); position: relative; top: 3px; } .fa-linkedin { mask-image: url("/media/linkedin-in-brands-solid.svg"); } .fa-xing { mask-image: url("/media/xing-brands-solid-full.svg"); } @font-face{ font-family:'Font Awesome 5 Brands'; font-style:normal; font-weight:400; font-display:block; font-display: swap; src: url('../webfonts/fa-brands-400.woff2') format('woff2'), url('../webfonts/fa-brands-400.woff') format('woff'), url('../webfonts/fa-brands-400.ttf') format('truetype'), url('../webfonts/fa-brands-400.svg#fontawesome') format('svg') } .fab{font-family:'Font Awesome 5 Brands';font-weight:400}#cc-main{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;background:transparent;color:var(--cc-primary-color);font-family:var(--cc-font-family);font-size:16px;font-weight:400;line-height:1.15;position:relative;position:fixed;text-rendering:optimizeLegibility;z-index:var(--cc-z-index)}#cc-main :after,#cc-main :before,#cc-main a,#cc-main button,#cc-main div,#cc-main h2,#cc-main input,#cc-main p,#cc-main span{all:unset;box-sizing:border-box}#cc-main .pm__badge,#cc-main button{all:initial;box-sizing:border-box;color:unset;visibility:unset}#cc-main .pm__badge,#cc-main a,#cc-main button,#cc-main input{-webkit-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}#cc-main table,#cc-main tbody,#cc-main td,#cc-main th,#cc-main thead,#cc-main tr{all:revert;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit}:root{--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--cc-modal-border-radius:.5rem;--cc-btn-border-radius:.4rem;--cc-modal-transition-duration:.25s;--cc-link-color:var(--cc-btn-primary-bg);--cc-modal-margin:1rem;--cc-z-index:2147483647;--cc-bg:#fff;--cc-primary-color:#2c2f31;--cc-secondary-color:#5e6266;--cc-btn-primary-bg:#30363c;--cc-btn-primary-color:#fff;--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#000;--cc-btn-primary-hover-color:#fff;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#eaeff2;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#d4dae0;--cc-btn-secondary-hover-color:#000;--cc-btn-secondary-hover-border-color:#d4dae0;--cc-separator-border-color:#f0f4f7;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#667481;--cc-toggle-on-knob-bg:#fff;--cc-toggle-off-knob-bg:var(--cc-toggle-on-knob-bg);--cc-toggle-enabled-icon-color:var(--cc-bg);--cc-toggle-disabled-icon-color:var(--cc-bg);--cc-toggle-readonly-bg:#d5dee2;--cc-toggle-readonly-knob-bg:#fff;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:var(--cc-cookie-category-block-bg);--cc-cookie-category-block-bg:#f0f4f7;--cc-cookie-category-block-border:#f0f4f7;--cc-cookie-category-block-hover-bg:#e9eff4;--cc-cookie-category-block-hover-border:#e9eff4;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:#dee4e9;--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:var(--cc-btn-secondary-bg);--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#e4eaed;--cc-pm-toggle-border-radius:4em}#cc-main.cc--rtl{direction:rtl}#cc-main .cm__title,#cc-main a,#cc-main b,#cc-main em,#cc-main strong{font-weight:600}#cc-main button>span{pointer-events:none}#cc-main .cc__link,#cc-main a{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;font-weight:600;position:relative;transition:background-size .25s,color .25s ease}#cc-main .cc__link:hover,#cc-main a:hover{background-size:100% 1px;color:var(--cc-primary-color)}#cc-main .cc__link{color:var(--cc-link-color)}#cc-main .cm__desc,#cc-main .pm__body{overscroll-behavior:auto contain;scrollbar-width:thin}@media screen and (min-width:640px){#cc-main ::-webkit-scrollbar,#cc-main ::-webkit-scrollbar-thumb,#cc-main ::-webkit-scrollbar-track{all:revert}#cc-main ::-webkit-scrollbar-thumb{-webkit-background-clip:padding-box;background-clip:padding-box;background:var(--cc-toggle-readonly-bg);border:.25rem solid var(--cc-bg);border-radius:1rem}#cc-main ::-webkit-scrollbar-thumb:hover{background:var(--cc-toggle-off-bg)}#cc-main ::-webkit-scrollbar{background:transparent;width:12px}}html.disable--interaction.show--consent,html.disable--interaction.show--consent body{height:auto!important;overflow:hidden!important}@media (prefers-reduced-motion){#cc-main{--cc-modal-transition-duration:0s}}.cc--darkmode{--cc-bg:#161a1c;--cc-primary-color:#ebf3f6;--cc-secondary-color:#aebbc5;--cc-btn-primary-bg:#c2d0e0;--cc-btn-primary-color:var(--cc-bg);--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#98a7b6;--cc-btn-primary-hover-color:#000;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#242c31;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#353d43;--cc-btn-secondary-hover-color:#fff;--cc-btn-secondary-hover-border-color:var(--cc-btn-secondary-hover-bg);--cc-separator-border-color:#222a30;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#525f6b;--cc-toggle-on-knob-bg:var(--cc-btn-primary-color);--cc-toggle-off-knob-bg:var(--cc-btn-primary-color);--cc-toggle-enabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-disabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-readonly-bg:#343e45;--cc-toggle-readonly-knob-bg:#5f6b72;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:#1e2428;--cc-cookie-category-block-bg:#1e2428;--cc-cookie-category-block-border:var(--cc-section-category-border);--cc-cookie-category-block-hover-bg:#242c31;--cc-cookie-category-block-hover-border:#232a2f;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:var(--cc-toggle-readonly-bg);--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:#0c0e0f;--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#060809}.cc--darkmode #cc-main{color-scheme:dark}#cc-main .cm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;max-width:24em;opacity:0;overflow:hidden;position:fixed;transform:translateY(1.6em);visibility:hidden;z-index:1}#cc-main .cm--top{top:var(--cc-modal-margin)}#cc-main .cm--middle{top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .cm--bottom{bottom:var(--cc-modal-margin)}#cc-main .cm--center{left:var(--cc-modal-margin);margin:0 auto;right:var(--cc-modal-margin);width:unset}#cc-main .cm--left{left:var(--cc-modal-margin);margin-right:var(--cc-modal-margin)}#cc-main .cm--right{margin-left:var(--cc-modal-margin);right:var(--cc-modal-margin)}#cc-main .cm__body{display:flex;flex-direction:column;justify-content:space-between;position:relative}#cc-main .cm__btns,#cc-main .cm__links{padding:1em 1.3em;width:unset}#cc-main .cm__texts{display:flex;flex:1;flex-direction:column;justify-content:center;padding:1em 0 0}#cc-main .cm__desc,#cc-main .cm__title{padding:0 1.3em}#cc-main .cm__title{font-size:1.05em}#cc-main .cm__title+.cm__desc{margin-top:1.1em}#cc-main .cm__desc{color:var(--cc-secondary-color);font-size:.9em;line-height:1.5;max-height:40vh;overflow-x:visible;overflow-y:auto;padding-bottom:1em}#cc-main .cm__btns{border-top:1px solid var(--cc-separator-border-color);display:flex;flex-direction:column;justify-content:center}#cc-main .cm__btn-group{display:grid;grid-auto-columns:minmax(0,1fr)}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin-top:.375rem}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .cm--inline .cm__btn+.cm__btn{margin-left:.375rem;margin-top:0}#cc-main .cm--inline.cm--flip .cm__btn+.cm__btn{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--inline.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-right:0}#cc-main .cm--wide .cm__btn+.cm__btn,#cc-main .cm--wide .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--wide.cm--flip .cm__btn+.cm__btn,#cc-main .cm--wide.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-right:.375rem}#cc-main .cm--bar:not(.cm--inline) .cm__btn-group--uneven,#cc-main .cm--wide .cm__btn-group--uneven{display:flex;flex:1;justify-content:space-between}#cc-main .cm--bar:not(.cm--inline).cm--flip .cm__btn-group--uneven,#cc-main .cm--wide.cm--flip .cm__btn-group--uneven{flex-direction:row-reverse}#cc-main .cm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);font-size:.82em;font-weight:600;min-height:42px;padding:.5em 1em;text-align:center}#cc-main .cm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .cm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close{border-radius:0;border-bottom-left-radius:var(--cc-btn-border-radius);border-right:none;border-top:none;display:none;font-size:1em;height:42px;min-width:auto!important;overflow:hidden;padding:0!important;position:absolute;right:0;top:0;width:42px}#cc-main .cm__btn--close svg{stroke:var(--cc-btn-primary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .cm__btn--close:hover svg{stroke:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--close.cm__btn--secondary svg{stroke:var(--cc-btn-secondary-color)}#cc-main .cm__btn--close.cm__btn--secondary:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close+.cm__texts .cm__title{padding-right:2em}#cc-main .cm--inline .cm__btn-group{grid-auto-flow:column}#cc-main .cm__footer{background:var(--cc-footer-bg);border-top:1px solid var(--cc-footer-border-color);color:var(--cc-footer-color);padding:.4em 0 .5em}#cc-main .cm__links{display:flex;flex-direction:row;padding-bottom:0;padding-top:0}#cc-main .cm__link-group{display:flex;flex-direction:row;font-size:.8em;width:100%}#cc-main .cm__link-group>*+*{margin-left:1.3em}#cc-main .cm--flip .cm__btn:last-child{grid-row:1}#cc-main .cm--inline.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--box .cm__btn--close{display:block}#cc-main .cm--box.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--box.cm--wide{max-width:36em}#cc-main .cm--box.cm--wide .cm__btns{flex-direction:row;justify-content:space-between}#cc-main .cm--box.cm--wide .cm__btn-group{grid-auto-flow:column}#cc-main .cm--box.cm--wide .cm__btn{min-width:120px;padding-left:1.8em;padding-right:1.8em}#cc-main .cm--box.cm--wide.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--box.cm--wide.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--cloud{max-width:54em;width:unset}#cc-main .cm--cloud .cm__body{flex-direction:row}#cc-main .cm--cloud .cm__texts{flex:1}#cc-main .cm--cloud .cm__desc{max-height:9.4em}#cc-main .cm--cloud .cm__btns{border-left:1px solid var(--cc-separator-border-color);border-top:none;max-width:23em}#cc-main .cm--cloud .cm__btn-group{flex-direction:column}#cc-main .cm--cloud .cm__btn{min-width:19em}#cc-main .cm--cloud.cm--flip .cm__btn-group,#cc-main .cm--cloud.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--cloud.cm--inline .cm__btn-group{flex-direction:row}#cc-main .cm--cloud.cm--inline .cm__btn{min-width:10em}#cc-main .cm--cloud.cm--inline.cm--flip .cm__btn-group{flex-direction:row-reverse}#cc-main .cm--bar{--cc-modal-transition-duration:.35s;border-radius:0;left:0;margin:0;max-width:unset;opacity:1;right:0;transform:translateY(0);width:100vw}#cc-main .cm--bar.cm--top{top:0;transform:translateY(-100%)}#cc-main .cm--bar.cm--bottom{bottom:0;transform:translateY(100%)}#cc-main .cm--bar .cm__body,#cc-main .cm--bar .cm__links{margin:0 auto;max-width:55em;width:100%}#cc-main .cm--bar .cm__body{padding:.5em 0 .9em}#cc-main .cm--bar .cm__btns{border-top:none;flex-direction:row;justify-content:space-between}#cc-main .cm--bar .cm__btn-group{grid-auto-flow:column}#cc-main .cm--bar:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--bar .cm__btn{min-width:120px;padding-left:2em;padding-right:2em}#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--bar.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--bar.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--bar.cm--inline .cm__body,#cc-main .cm--bar.cm--inline .cm__links{max-width:74em}#cc-main .cm--bar.cm--inline .cm__body{flex-direction:row;padding:0}#cc-main .cm--bar.cm--inline .cm__btns{flex-direction:column;justify-content:center;max-width:23em}#cc-main .cm--bar.cm--inline.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cc--anim .cm,#cc-main .cc--anim.cm-wrapper:before{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}#cc-main .cc--anim .cm__btn,#cc-main .cc--anim .cm__close{transition:background-color .15s ease,border-color .15s ease,color .15s ease}.disable--interaction #cc-main .cm-wrapper:before{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:0}.show--consent #cc-main .cc--anim .cm{opacity:1;transform:translateY(0);visibility:visible!important}.show--consent #cc-main .cc--anim .cm--middle{transform:translateY(-50%)}.show--consent #cc-main .cc--anim .cm--bar{transform:translateY(0)}.show--consent #cc-main .cc--anim.cm-wrapper:before{opacity:1;visibility:visible}#cc-main.cc--rtl .cm__btn--close{border-bottom-left-radius:unset;border-bottom-right-radius:var(--cc-btn-border-radius);left:0;right:unset}#cc-main.cc--rtl .cm__btn--close+.cm__texts .cm__title{padding-left:2em;padding-right:unset}#cc-main.cc--rtl .cm--inline .cm__btn+.cm__btn{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm--inline.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn-group+.cm__btn-group,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn-group+.cm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar.cm--flip .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm__link-group>*+*{margin-left:0;margin-right:1.3em}@media screen and (max-width:640px){#cc-main{--cc-modal-margin:.5em}#cc-main .cm{max-width:none!important;width:auto!important}#cc-main .cm__body{flex-direction:column!important;padding:0!important}#cc-main .cm__btns,#cc-main .cm__desc,#cc-main .cm__links,#cc-main .cm__title{padding-left:1.1em!important;padding-right:1.1em!important}#cc-main .cm__btns{border-left:none!important;border-top:1px solid var(--cc-separator-border-color)!important;flex-direction:column!important;max-width:none!important;min-width:auto!important}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin:.375rem 0 0!important}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .cm__btn-group{display:flex!important;flex-direction:column!important;min-width:auto!important}#cc-main .cm__btn{flex:auto!important}#cc-main .cm__link-group{justify-content:center!important}#cc-main .cm--flip .cm__btn-group,#cc-main .cm--flip .cm__btns{flex-direction:column-reverse!important}}#cc-main .pm-wrapper{position:relative;z-index:2}#cc-main .pm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;opacity:0;overflow:hidden;position:fixed;visibility:hidden;width:100%;width:unset;z-index:1}#cc-main svg{fill:none;width:100%}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:1em 1.4em}#cc-main .pm__header{align-items:center;border-bottom:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__title{align-items:center;display:flex;flex:1;font-weight:600;margin-right:2em}#cc-main .pm__close-btn{background:var(--cc-btn-secondary-bg);border:1px solid var(--cc-btn-secondary-border-color);border-radius:var(--cc-btn-border-radius);height:40px;position:relative;transition:all .15s ease;width:40px}#cc-main .pm__close-btn span{display:flex;height:100%;width:100%}#cc-main .pm__close-btn svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .pm__close-btn:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color)}#cc-main .pm__close-btn:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .pm__body{flex:1;overflow-y:auto;overflow-y:overlay}#cc-main .pm__section,#cc-main .pm__section--toggle{border-radius:var(--cc-btn-border-radius);display:flex;flex-direction:column;margin-bottom:.5em}#cc-main .pm__section--toggle .pm__section-desc-wrapper{border:1px solid var(--cc-cookie-category-block-border);border-radius:var(--cc-btn-border-radius);border-top:none;border-top-left-radius:0;border-top-right-radius:0;display:none;margin-top:0!important;overflow:hidden}#cc-main .pm__section{border:1px solid var(--cc-separator-border-color);padding:1em;transition:background-color .25s ease,border-color .25s ease}#cc-main .pm__section:first-child{border:none;margin-bottom:2em;margin-top:0;padding:0;transition:none}#cc-main .pm__section:not(:first-child):hover{background:var(--cc-cookie-category-block-bg);border-color:var(--cc-cookie-category-block-border)}#cc-main .pm__section-toggles+.pm__section{margin-top:2em}#cc-main .pm__section--toggle{background:var(--cc-cookie-category-block-bg);border-top:none;margin-bottom:.375rem}#cc-main .pm__section--toggle .pm__section-title{align-items:center;background:var(--cc-cookie-category-block-bg);border:1px solid var(--cc-cookie-category-block-border);display:flex;justify-content:space-between;min-height:58px;padding:1.1em 5.4em 1.1em 1.2em;position:relative;transition:background-color .25s ease,border-color .25s ease;width:100%}#cc-main .pm__section--toggle .pm__section-title:hover{background:var(--cc-cookie-category-block-hover-bg);border-color:var(--cc-cookie-category-block-hover-border)}#cc-main .pm__section--toggle .pm__section-desc{margin-top:0;padding:1em}#cc-main .pm__section--toggle.is-expanded{--cc-cookie-category-block-bg:var(--cc-cookie-category-expanded-block-bg);--cc-cookie-category-block-border:var(--cc-cookie-category-expanded-block-hover-bg)}#cc-main .pm__section--toggle.is-expanded .pm__section-title{border-bottom-left-radius:0;border-bottom-right-radius:0}#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg{transform:scale(.5) rotate(180deg)}#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper{display:flex}#cc-main .pm__section--expandable .pm__section-title{cursor:pointer;padding-left:3.4em}#cc-main .pm__section--expandable .pm__section-arrow{background:var(--cc-toggle-readonly-bg);border-radius:100%;display:flex;height:20px;justify-content:center;left:18px;pointer-events:none;position:absolute;width:20px}#cc-main .pm__section--expandable .pm__section-arrow svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5)}#cc-main .pm__section-title-wrapper{align-items:center;display:flex;position:relative}#cc-main .pm__section-title-wrapper+.pm__section-desc-wrapper{margin-top:.85em}#cc-main .pm__section-title{border-radius:var(--cc-btn-border-radius);font-size:.95em;font-weight:600}#cc-main .pm__badge{align-items:center;background:var(--cc-btn-secondary-bg);border-radius:5em;color:var(--cc-secondary-color);display:flex;flex:none;font-size:.8em;font-weight:600;height:23px;justify-content:center;margin-left:1em;min-width:23px;overflow:hidden;padding:0 .6em 1px;position:relative;text-align:center;white-space:nowrap;width:auto}#cc-main .pm__service-counter{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);padding:0;width:23px}#cc-main .pm__service-counter[data-counterlabel]{padding:0 .6em 1px;width:auto}#cc-main .section__toggle,#cc-main .section__toggle-wrapper,#cc-main .toggle__icon,#cc-main .toggle__label{border-radius:var(--cc-pm-toggle-border-radius);height:23px;transform:translateZ(0);width:50px}#cc-main .section__toggle-wrapper{cursor:pointer;position:absolute;right:18px;z-index:1}#cc-main .toggle-service{height:19px;position:relative;right:0;width:42px}#cc-main .toggle-service .section__toggle,#cc-main .toggle-service .toggle__icon,#cc-main .toggle-service .toggle__label{height:19px;width:42px}#cc-main .toggle-service .toggle__icon{position:relative}#cc-main .toggle-service .toggle__icon-circle{height:19px;width:19px}#cc-main .toggle-service .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(23px)}#cc-main .pm__section--toggle:nth-child(2) .section__toggle-wrapper:after{display:none!important}#cc-main .section__toggle{border:0;cursor:pointer;display:block;left:0;margin:0;position:absolute;top:0}#cc-main .section__toggle:disabled{cursor:not-allowed}#cc-main .toggle__icon{background:var(--cc-toggle-off-bg);box-shadow:0 0 0 1px var(--cc-toggle-off-bg);display:flex;flex-direction:row;pointer-events:none;position:absolute;transition:all .25s ease}#cc-main .toggle__icon-circle{background:var(--cc-toggle-off-knob-bg);border:none;border-radius:var(--cc-pm-toggle-border-radius);box-shadow:0 1px 2px rgba(24,32,3,.36);display:block;height:23px;left:0;position:absolute;top:0;transition:transform .25s ease,background-color .25s ease;width:23px}#cc-main .toggle__icon-off,#cc-main .toggle__icon-on{height:100%;position:absolute;transition:opacity .15s ease;width:100%}#cc-main .toggle__icon-on{opacity:0;transform:rotate(45deg)}#cc-main .toggle__icon-on svg{stroke:var(--cc-toggle-on-bg);transform:scale(.55) rotate(-45deg)}#cc-main .toggle__icon-off{opacity:1}#cc-main .toggle__icon-off svg{stroke:var(--cc-toggle-off-bg);transform:scale(.55)}#cc-main .section__toggle:checked~.toggle__icon{background:var(--cc-toggle-on-bg);box-shadow:0 0 0 1px var(--cc-toggle-on-bg)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-circle{background-color:var(--cc-toggle-on-knob-bg);transform:translateX(27px)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-on{opacity:1}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-off{opacity:0}#cc-main .section__toggle:checked:disabled~.toggle__icon{background:var(--cc-toggle-readonly-bg);box-shadow:0 0 0 1px var(--cc-toggle-readonly-bg)}#cc-main .section__toggle:checked:disabled~.toggle__icon .toggle__icon-circle{background:var(--cc-toggle-readonly-knob-bg);box-shadow:none}#cc-main .section__toggle:checked:disabled~.toggle__icon svg{stroke:var(--cc-toggle-readonly-knob-icon-color)}#cc-main .toggle__label{opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:0;z-index:-1}#cc-main .pm__section-desc-wrapper{color:var(--cc-secondary-color);display:flex;flex-direction:column;font-size:.9em}#cc-main .pm__section-desc-wrapper>:not(:last-child){border-bottom:1px solid var(--cc-cookie-category-block-border)}#cc-main .pm__section-services{display:flex;flex-direction:column}#cc-main .pm__service{align-items:center;display:flex;justify-content:space-between;padding:.4em 1.2em;position:relative;transition:background-color .15s ease}#cc-main .pm__service:hover{background-color:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__service-header{align-items:center;display:flex;margin-right:1em;width:100%}#cc-main .pm__service-icon{border:2px solid;border-radius:100%;height:8px;margin-left:6px;margin-right:20px;margin-top:1px;min-width:8px}#cc-main .pm__service-title{font-size:.95em;width:100%;word-break:break-word}#cc-main .pm__section-desc{line-height:1.5em}#cc-main .pm__section-table{border-collapse:collapse;font-size:.9em;margin:0;overflow:hidden;padding:0;text-align:left;width:100%}#cc-main .pm__table-caption{text-align:left}#cc-main .pm__table-caption,#cc-main .pm__table-head>tr{border-bottom:1px dashed var(--cc-separator-border-color);color:var(--cc-primary-color);font-weight:600}#cc-main .pm__table-tr{transition:background-color .15s ease}#cc-main .pm__table-tr:hover{background:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th{padding:.625em .625em .625em 1.2em;vertical-align:top}#cc-main .pm__footer{border-top:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__btn-group{display:flex}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin-left:.375rem}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main .pm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);flex:auto;font-size:.82em;font-weight:600;min-height:42px;min-width:110px;padding:.5em 1.5em;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}#cc-main .pm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .pm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .pm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .pm--box{height:calc(100% - 2em);left:var(--cc-modal-margin);margin:0 auto;max-height:37.5em;max-width:43em;right:var(--cc-modal-margin);top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .pm--box.pm--flip .pm__btn-group,#cc-main .pm--box.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm--bar{--cc-modal-transition-duration:.35s;border-radius:0;bottom:0;height:100%;margin:0;max-height:none;max-width:29em;opacity:1;top:0;width:100%}#cc-main .pm--bar .pm__section-table,#cc-main .pm--bar .pm__table-body,#cc-main .pm--bar .pm__table-td,#cc-main .pm--bar .pm__table-th,#cc-main .pm--bar .pm__table-tr{display:block}#cc-main .pm--bar .pm__table-head{display:none}#cc-main .pm--bar .pm__table-caption{display:block}#cc-main .pm--bar .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm--bar .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm--bar .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm--bar .pm__table-td>div{flex:3}#cc-main .pm--bar:not(.pm--wide) .pm__body,#cc-main .pm--bar:not(.pm--wide) .pm__footer,#cc-main .pm--bar:not(.pm--wide) .pm__header{padding:1em 1.3em}#cc-main .pm--bar:not(.pm--wide) .pm__btn-group,#cc-main .pm--bar:not(.pm--wide) .pm__footer{flex-direction:column}#cc-main .pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin:.375rem 0 0}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__footer{flex-direction:column-reverse}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .pm--bar:not(.pm--wide) .pm__badge{display:none}#cc-main .pm--bar.pm--left{left:0;transform:translateX(-100%)}#cc-main .pm--bar.pm--right{right:0;transform:translateX(100%)}#cc-main .pm--bar.pm--wide{max-width:35em}#cc-main .pm--bar.pm--wide .pm__body,#cc-main .pm--bar.pm--wide .pm__footer,#cc-main .pm--bar.pm--wide .pm__header{padding:1em 1.4em}#cc-main .pm--bar.pm--wide.pm--flip .pm__btn-group,#cc-main .pm--bar.pm--wide.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm-overlay{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:1}#cc-main .cc--anim .pm,#cc-main .cc--anim .pm-overlay{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}.show--preferences #cc-main .cc--anim .pm{opacity:1;visibility:visible!important}.show--preferences #cc-main .cc--anim .pm--box{transform:translateY(-50%)}.show--preferences #cc-main .cc--anim .pm--bar{transform:translateX(0)}.show--preferences #cc-main .cc--anim .pm-overlay{opacity:1;visibility:visible}#cc-main.cc--rtl .pm__service-header{margin-left:1em;margin-right:0}#cc-main.cc--rtl .pm__section-arrow{left:unset;right:18px}#cc-main.cc--rtl .section__toggle-wrapper{left:18px;right:unset;transform-origin:left}#cc-main.cc--rtl .toggle-service{left:0}#cc-main.cc--rtl .pm__service-icon{margin-left:20px;margin-right:5px}#cc-main.cc--rtl .pm__section--toggle .pm__section-title{padding-left:5.4em;padding-right:1.2em}#cc-main.cc--rtl .pm__section--expandable .pm__section-title{padding-right:3.4em}#cc-main.cc--rtl .pm__badge{margin-left:unset;margin-right:1em}#cc-main.cc--rtl .toggle__icon-circle{transform:translateX(27px)}#cc-main.cc--rtl .toggle-service .toggle__icon-circle{transform:translateX(23px)}#cc-main.cc--rtl .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(0)}#cc-main.cc--rtl .pm__table-td,#cc-main.cc--rtl .pm__table-th{padding-left:unset;padding-right:1.2em;text-align:right}#cc-main.cc--rtl .pm__table-td{padding-left:unset;padding-right:1.2em}#cc-main.cc--rtl .pm__table-td:before{padding-left:2em;padding-right:unset}#cc-main.cc--rtl .pm__btn+.pm__btn,#cc-main.cc--rtl .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .pm--flip .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip .pm__btn-group+.pm__btn-group{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin-left:0}@media screen and (max-width:640px){#cc-main .pm{border-radius:0;bottom:0;height:auto;left:0;max-height:100%;max-width:none!important;right:0;top:0;transform:translateY(1.6em)}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:.9em!important}#cc-main .pm__badge{display:none}#cc-main .pm__section-table,#cc-main .pm__table-body,#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th,#cc-main .pm__table-tr{display:block}#cc-main .pm__table-head{display:none}#cc-main .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm__table-td>div{flex:3}#cc-main .pm__btn-group,#cc-main .pm__footer{flex-direction:column!important}#cc-main .pm__btn-group{display:flex!important}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin:.375rem 0 0!important}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .pm--flip .pm__btn-group,#cc-main .pm--flip .pm__footer{flex-direction:column-reverse!important}.show--preferences #cc-main .cc--anim .pm{transform:translateY(0)!important}}