/* ################################################### FONTS */ @font-face { font-family: 'helvetica-neue'; src: url('../fonts/HelveticaNeueLTStd-Md.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: 'norwester'; src: local('Norwester Pro'), local('NorwesterPro-Regular'), url(../fonts/NorwesterPro-Regular.woff2) format('woff2'); font-weight: bold; font-style: normal; font-display: block; } /* ################################################### GLOBAL */ body { margin: 0; font-family: 'helvetica-neue', helvetica, arial; color: rgb(0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.fixed { overflow: hidden; } body p { margin: 0; text-size-adjust: none; -webkit-text-size-adjust: none; } body ul, ul li { margin: 0; padding: 0; list-style: none; } body a, a:focus { outline: none; text-decoration: none; } body input:focus, textarea:focus { outline: none; } body p, a, div, input, textarea { box-sizing: border-box; -moz-box-sizing: border-box; } body b { font-weight: normal; } body .hidden { display: none; } body .break { float: none; clear: both; } body .shorten { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } :root { --blue: rgb(35,176,230); --blue-light: rgba(35,176,230,0.6); --margin: 32px; --border-radius: 3px; } @media screen and (max-width: 800px) { :root { --margin: 24px; } } /* ################################################### WIDTH */ .width { max-width: 1080px; margin: 0 auto; } @media screen and (max-width: 1144px) { .width { width: auto; max-width: initial; } } /* ################################################### BALK */ .balk:before { content: ''; width: 200px; height: 8px; position: absolute; z-index: 400; top: 0; left: calc( 50% - 540px ); background: rgb(255,255,255); } @media screen and (max-width: 1208px) { .balk:before { left: 32px; } } @media screen and (max-width: 800px) { .balk:before { left: 24px; } } /* ################################################### TEXTBOX */ .text { } .text p { margin: 0 0 16px 0; font-size: 15px; line-height: 24px; } .text p:nth-last-child(1) { margin-bottom: 0; } .text p.label { margin: 0; color: rgba(0,0,0,0.5); } .text p a { color: rgb(0,0,0); position: relative; } .text p a.link { color: var(--blue); display: block; float: left; } .text p a.link:before { content: ''; width: 5px; height: 5px; margin: 8px 10px 0 0; border: 2px solid var(--blue); border-bottom: none; border-left: none; transform: rotate(45deg); float: left; } .text p a.link:after { content: ''; width: 0; height: 1px; position: absolute; bottom: 0; left: 17px; background-color: var(--blue); } .text p a.link:after { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; } .text p a.link:hover:after { width: calc( 100% - 17px); } [data-color="neg"] .text p, [data-color="neg"] .text p a.link { color: rgb(255,255,255); } [data-color="neg"] .text p a.link:before { border-color: rgb(255,255,255); } [data-color="neg"] .text p a.link:after { background-color: rgb(255,255,255); } @media screen and (max-width: 800px) { .text p { line-height: 22px; } } .textbox { width: 62%; padding: 16px 0 0 0; } .textbox p:after { content: ''; float: none; clear: both; display: block; } .textbox .balk { width: 200px; height: 8px; margin: 22px 0 0 0; } .textbox .balk:before { display: none; } [data-color="neg"] .balk { background: rgb(255,255,255); } [data-color="blue"] .balk { background: var(--blue); } @media screen and (max-width: 1208px) { .textbox { width: 72%; } } @media screen and (max-width: 800px) { .textbox { width: auto; } } /* ################################################### HEADLINE */ .headline { } .headline p { font-family: 'norwester'; font-size: 40px; line-height: 50px; text-transform: uppercase; font-variant-ligatures: no-common-ligatures; } [data-color="blue"] .headline p:nth-child(1) { color: var(--blue); } [data-color="blue"] .headline p:nth-child(2) { color: var(--blue-light); } [data-color="neg"] .headline p:nth-child(1) { color: rgb(255,255,255); } [data-color="neg"] .headline p:nth-child(2) { color: rgba(255,255,255,0.6); } [data-color="grey"] .headline p:nth-child(1) { color: rgb(131,128,127); } [data-color="grey"] .headline p:nth-child(2) { color: rgba(131,128,127,0.6); } .headline[data-color="neg"] p:nth-child(1) { color: rgb(255,255,255); } .headline[data-color="neg"] p:nth-child(2) { color: rgba(255,255,255,0.6); } @media screen and (max-width: 800px) { .headline p { font-size: 30px; line-height: 36px; } } /* ################################################### SLIDESHOW */ .slideshow { position: relative; } .slideshow .image { position: absolute; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: 50%; } .slideshow .image.current { z-index: 200; } .slideshow .images { display: none; } .slideshow .preload { display: none; } /* ################################################### [AREA] WELCOME */ #area_welcome { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } body.mobile #area_welcome { position: absolute; } #area_welcome .wrapper { position: absolute; top: var(--margin); right: var(--margin); bottom: var(--margin); left: var(--margin); background: var(--blue); } #area_welcome .wrapper { transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; } #area_welcome .cover { position: absolute; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; background: rgb(0,0,0); opacity: 0; } #area_welcome .content { margin: 0 0 0 -540px; position: absolute; left: 50%; top: 50%; z-index: 200; } #area_welcome .content .logo { width: 90px; height: 110px; margin: 0 0 64px 4px; background: url(../graphics/logo.svg) 0 0 no-repeat; background-size: cover;} #area_welcome .content .headline { } #area_welcome .content .text { padding: 16px 0 0 0; } @media screen and (max-width: 1208px) { #area_welcome .content { margin: 0 var(--margin) 0 var(--margin); position: absolute; left: 0; } } @media screen and (max-width: 800px) { #area_welcome { top: 16px; bottom: 0; } #area_welcome .wrapper { top: 0; right: 0; bottom: 0; left: 0; } #area_welcome .content .logo { width: 72px; height: 88px; margin-bottom: 32px; } } @media screen and (max-height: 800px) { #area_welcome .content .logo { width: 72px; height: 88px; margin-bottom: 32px; } } /* ################################################### [AREA] PAGE */ #area_page { position: absolute; top: 0; right: 0; left: 0; display: none; _background: rgb(255,255,255); } #area_page .wrapper { margin: 8px 0 0 0; background: rgb(255,255,255); position: relative; } #area_page .wrapper:before, #area_page .wrapper:after { content: ''; height: 8px; margin: -8px 0 0 0; position: absolute; z-index: 200; top: 0; background: rgb(255,255,255); } #area_page .wrapper:before { width: calc( 50% - 540px ); left: 0; } #area_page .wrapper:after { width: calc( 50% + 340px ); right: 0; } body.mobile #area_page .wrapper { margin-top: 0; } body.mobile #area_page .wrapper:before, body.mobile #area_page .wrapper:after { display: none; } @media screen and (max-width: 1208px) { #area_page .wrapper:before { width: 64px; } #area_page .wrapper:after { width: calc( 100% - 200px - 64px ); } } @media screen and (max-width: 800px) { #area_page .wrapper:before { width: 24px; } #area_page .wrapper:after { width: calc( 100% - 200px - 24px ); } } /* --- section */ #area_page .section { padding: 128px var(--margin) 128px var(--margin); position: relative; } #area_page .section.fullscreen { box-shadow: inset 0 16px 64px rgba(0,0,0,0.4); } #area_page .section.margin { margin: 0 var(--margin); } #area_page .section .section-content { position: relative; } @media screen and (max-width: 800px) { #area_page .section { padding-top: 56px; padding-bottom: 56px; } #area_page .section.margin { margin: 0; } } /* --- section | about */ #area_page .section[data-section="about"] { } #area_page .section[data-section="about"] .images { margin: 0 0 64px 0; } #area_page .section[data-section="about"] .images .img-table { width: 100%; display: table; table-layout: fixed; } #area_page .section[data-section="about"] .images .img { display: table-cell; } #area_page .section[data-section="about"] .img .img-holder { padding: 0 0 130% 0; position: relative; } #area_page .section[data-section="about"] .img:nth-child(1) .img-holder { margin-right: 20px; } #area_page .section[data-section="about"] .img:nth-child(2) .img-holder { margin-right: 10px; margin-left: 10px; } #area_page .section[data-section="about"] .img:nth-child(3) .img-holder { margin-left: 20px; } #area_page .section[data-section="about"] .content .text { } @media screen and (max-width: 800px) { #area_page .section[data-section="about"] .images { margin-bottom: 48px; } #area_page .section[data-section="about"] .img .img-holder { padding-bottom: 160%; } #area_page .section[data-section="about"] .img:nth-child(1) .img-holder { margin-right: 6px; } #area_page .section[data-section="about"] .img:nth-child(2) .img-holder { margin-right: 3px; margin-left: 3px; } #area_page .section[data-section="about"] .img:nth-child(3) .img-holder { margin-left: 6px; } } /* --- section | services */ #area_page .section[data-section="services"] { background-attachment: fixed; background-size: cover; background-position: 50%; } #area_page .section[data-section="services"] .section-content { position: absolute; top: 50%; margin: -100px 0 0 -540px; left: 50%; } #area_page .section[data-section="services"] .section-content .notes { width: 100%; display: table; table-layout: fixed; } #area_page .section[data-section="services"] .section-content .notes .notes-note { display: table-cell; background: rgb(255,255,255); position: relative; vertical-align: middle; box-shadow: 0 16px 32px rgba(0,0,0,0.3); } #area_page .section[data-section="services"] .section-content .notes .notes-margin { width: 60px; display: table-cell; } #area_page .section[data-section="services"] .section-content .notes .notes-note-content { padding: 100px 32px; } #area_page .section[data-section="services"] .textbox { width: auto; } #area_page .section[data-section="services"] .section-content .notes .notes-note:before, #area_page .section[data-section="services"] .section-content .notes .notes-note:after { content: ''; height: 8px; margin: -8px 0 0 0; position: absolute; z-index: 200; top: 0; background: rgb(255,255,255); } #area_page .section[data-section="services"] .section-content .notes .notes-note:before { width: 32px; left: 0; } #area_page .section[data-section="services"] .section-content .notes .notes-note:after { width: calc( 100% - 232px ); right: 0; } @media screen and (max-width: 1144px) { #area_page .section[data-section="services"] .section-content { position: static; margin: 0 auto; } #area_page .section[data-section="services"] .section-content .notes .notes-margin { width: 32px; } } @media screen and (max-width: 920px) /* ?? */ { #area_page .section[data-section="services"] .section-content .notes { display: block; } #area_page .section[data-section="services"] .section-content .notes .notes-note { width: 100%; display: block; } #area_page .section[data-section="services"] .section-content .notes .notes-note:nth-last-child(1) { margin-top: 64px; } } @media screen and (max-width: 800px) { #area_page .section[data-section="services"] { padding-top: 40px; padding-bottom: 32px; } #area_page .section[data-section="services"] .section-content .notes .notes-note:nth-last-child(1) { margin-top: 40px; } #area_page .section[data-section="services"] .section-content .notes .notes-note-content { padding: 64px 32px; } } body.mobile #area_page .section[data-section="services"] { background-attachment: scroll; } @media (hover: none) and (pointer: coarse) { #area_page .section[data-section="services"] { background-attachment: scroll; } } /* --- section | staff */ #area_page .section[data-section="staff"] { } #area_page .section[data-section="staff"] .slideshow { margin: 64px 0 0 0; padding: 0 0 50% 0; } #area_page .section[data-section="staff"] .slideshow.balk:before { left: 32px; } @media screen and (max-width: 800px) { #area_page .section[data-section="staff"] .slideshow { margin: 32px 0 0 0; padding: 0 0 50% 0; } } /* --- section | contact */ #area_page .section[data-section="contact"] { background: var(--blue); } #area_page .section[data-section="contact"] .section-content { } #area_page .section[data-section="contact"] .form { margin: 32px 0 0 0; position: relative; } #area_page .section[data-section="contact"] .form:after { content: ''; float: none; clear: both; display: block; } #area_page .section[data-section="contact"] .form .field { width: 30%; margin: 0 5% 16px 0; float: left; } #area_page .section[data-section="contact"] .form .field[data-field="message"] { width: 30%; margin-right: 0; position: absolute; top: 0; right: 0; } #area_page .section[data-section="contact"] .form .field .label { height: 32px; } #area_page .section[data-section="contact"] .form .field .label p { padding: 10px 0 4px 0; font-size: 15px; line-height: 11px; color: rgb(255,255,255); } #area_page .section[data-section="contact"] .form .field .input { background: rgb(255,255,255); border-radius: var(--border-radius); position: relative; } #area_page .section[data-section="contact"] .form .field .input input, #area_page .section[data-section="contact"] .form .field .input textarea { width: 100%; height: 32px; margin: 0; padding: 0 0 0 10px; border: none; background: transparent; display: block; font-family: 'helvetica-neue', helvetica, arial; font-size: 15px; } #area_page .section[data-section="contact"] .form .field .input textarea { height: 112px; padding: 8px 8px 8px 12px; resize: none; } #area_page .section[data-section="contact"] .form .field .input input:focus #area_page .section[data-section="contact"] .form .field .input textarea:focus { outline: none; } #area_page .section[data-section="contact"] .form .field .input.validate input { padding-left: 32px; } #area_page .section[data-section="contact"] .form .field .input.validate:before { content: ''; width: 32px; height: 32px; position: absolute; top: 0; left: 0; background: url(../graphics/validate.svg); background-size: 64px auto; } #area_page .section[data-section="contact"] .form .field .input.validate[data-validate="true"]:before { background-positon: 0 0; } #area_page .section[data-section="contact"] .form .field .input.validate[data-validate="false"]:before { background-position: -32px 0; } @media screen and (max-width: 800px) { #area_page .section[data-section="contact"] { margin: 0; } #area_page .section[data-section="contact"] .form .field { width: 32%; margin-right: 2%; } #area_page .section[data-section="contact"] .form .field[data-field="message"] { width: 32%; } } @media screen and (max-width: 600px) { #area_page .section[data-section="contact"] .form { margin-top: 16px; } #area_page .section[data-section="contact"] .form .field { width: 100%; margin: 0 0 8px 0; float: none; } #area_page .section[data-section="contact"] .form .field[data-field="message"] { width: 100%; position: static; } } /* --- section | foot */ #area_page .section[data-section="foot"] { } #area_page .section[data-section="foot"] .section-content { } #area_page .section[data-section="foot"] .logo { width: 90px; height: 110px; margin: 0 auto; background: url(../graphics/logo.svg) 100% 0 no-repeat; background-size: cover; } #area_page .section[data-section="foot"] .contact-info { padding: 48px 0 0 0; } #area_page .section[data-section="foot"] .contact-info p { text-align: center; } #area_page .section[data-section="foot"] .contact-info p a:hover { text-decoration: underline; } #area_page .section[data-section="foot"] .contact-info .stamps { } #area_page .section[data-section="foot"] .contact-info .stamps .stamp { position: absolute; bottom: 0; } #area_page .section[data-section="foot"] .contact-info .stamps .stamp.aaa { width: 78px; height: 32px; background: url(../graphics/aaa.svg) 0 100% no-repeat; background-size: cover; left: 0; } #area_page .section[data-section="foot"] .contact-info .stamps .stamp.bf9k { width: 92px; height: 24px; background: url(../graphics/bf9k.svg) 50% 50% no-repeat; background-size: contain; right: 0; } @media screen and (max-width: 600px) { #area_page .section[data-section="foot"] .contact-info .stamps { padding: 8px 0 0 0; } #area_page .section[data-section="foot"] .contact-info .stamps .stamp { position: static; margin: 32px auto; } } /* ################################################### [AREA] CONFIRMATION */ #area_confirmation { display: none; } #area_confirmation .cover { position: fixed; z-index: 500; background: rgba(0,0,0,0.5); top: 0; right: 0; bottom: 0; left: 0; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: none; } #area_confirmation .area { width: 500px; margin: 0 0 0 -250px; padding: 8px 0 48px 0; position: fixed; z-index: 600; background: rgb(255,255,255); top: 50%; left: 50%; box-shadow: 0 16px 64px rgba(0,0,0,0.3); display: none; } #area_confirmation .area .icon { width: 128px; height: 128px; margin: 0 auto; background: url(../graphics/validate.svg); background-size: 256px auto; } #area_confirmation .area .confirmation { } #area_confirmation .area .confirmation p { padding: 4px 0 4px 0; color: var(--blue); font-family: 'norwester'; font-size: 32px; line-height: 26px; text-transform: uppercase; font-variant-ligatures: no-common-ligatures; text-align: center; } #area_confirmation .area .confirmation p span { padding-left: 16px; color: var(--blue-light); } #area_confirmation .area .close { padding: 24px 0 0 0; } #area_confirmation .area .close p { padding: 4px 0 4px 0; font-size: 15px; line-height: 11px; text-align: center; } @media screen and (max-width: 600px) { #area_confirmation .area { width: auto; margin: 0; left: 32px; right: 32px; } }