@charset "UTF-8";
/*!
Theme Name: Streitwerke
Theme URI: http://underscores.me/
Author: alphanauten
Author URI: http://alphanauten.de
Description: custom theme vor streitwerke
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: streitwerke
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Streitwerke is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Fonts
# Forms
# Navigation
## Links
## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
## Posts and pages
## Comments
# Infinite scroll
# Media
## Captions
## Galleries
--------------------------------------------------------------*/
.background--primary {
background: #e8473f; }
.background--secondary {
background: #3b44ac; }
.background--gray {
background: #ededed; }
.background--white {
background: #FFF; }
.text--primary {
color: #e8473f; }
.text--secondary {
color: #3b44ac; }
.text--gray {
color: #ededed; }
.text--white {
color: #FFF; }
button.text--primary {
color: #e8473f; }
button.text--secondary {
color: #3b44ac; }
button.text--gray {
color: #ededed; }
button.text--white {
color: #FFF; }
.link--primary a, .link--primary a:visited {
color: #e8473f; }
.link--secondary a, .link--secondary a:visited {
color: #3b44ac; }
.link--gray a, .link--gray a:visited {
color: #ededed; }
.link--white a, .link--white a:visited {
color: #FFF; }
.container {
margin: 0 auto;
max-width: 1280px;
width: 90%; }
@media only screen and (min-width: 601px) {
.container {
width: 85%; } }
@media only screen and (min-width: 993px) {
.container {
width: 70%; } }
.col .row {
margin-left: -0.75rem;
margin-right: -0.75rem; }
.section {
padding-top: 1rem;
padding-bottom: 1rem; }
.section.no-pad {
padding: 0; }
.section.no-pad-bot {
padding-bottom: 0; }
.section.no-pad-top {
padding-top: 0; }
.row {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px; }
.row:after {
content: "";
display: table;
clear: both; }
.row .col {
float: left;
box-sizing: border-box;
padding: 0 0.75rem;
min-height: 1px; }
.row .col[class*="push-"], .row .col[class*="pull-"] {
position: relative; }
.row .col.s1 {
width: 8.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s2 {
width: 16.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s3 {
width: 25%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s4 {
width: 33.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s5 {
width: 41.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s6 {
width: 50%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s7 {
width: 58.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s8 {
width: 66.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s9 {
width: 75%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s10 {
width: 83.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s11 {
width: 91.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.s12 {
width: 100%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.offset-s1 {
margin-left: 8.3333333333%; }
.row .col.pull-s1 {
right: 8.3333333333%; }
.row .col.push-s1 {
left: 8.3333333333%; }
.row .col.offset-s2 {
margin-left: 16.6666666667%; }
.row .col.pull-s2 {
right: 16.6666666667%; }
.row .col.push-s2 {
left: 16.6666666667%; }
.row .col.offset-s3 {
margin-left: 25%; }
.row .col.pull-s3 {
right: 25%; }
.row .col.push-s3 {
left: 25%; }
.row .col.offset-s4 {
margin-left: 33.3333333333%; }
.row .col.pull-s4 {
right: 33.3333333333%; }
.row .col.push-s4 {
left: 33.3333333333%; }
.row .col.offset-s5 {
margin-left: 41.6666666667%; }
.row .col.pull-s5 {
right: 41.6666666667%; }
.row .col.push-s5 {
left: 41.6666666667%; }
.row .col.offset-s6 {
margin-left: 50%; }
.row .col.pull-s6 {
right: 50%; }
.row .col.push-s6 {
left: 50%; }
.row .col.offset-s7 {
margin-left: 58.3333333333%; }
.row .col.pull-s7 {
right: 58.3333333333%; }
.row .col.push-s7 {
left: 58.3333333333%; }
.row .col.offset-s8 {
margin-left: 66.6666666667%; }
.row .col.pull-s8 {
right: 66.6666666667%; }
.row .col.push-s8 {
left: 66.6666666667%; }
.row .col.offset-s9 {
margin-left: 75%; }
.row .col.pull-s9 {
right: 75%; }
.row .col.push-s9 {
left: 75%; }
.row .col.offset-s10 {
margin-left: 83.3333333333%; }
.row .col.pull-s10 {
right: 83.3333333333%; }
.row .col.push-s10 {
left: 83.3333333333%; }
.row .col.offset-s11 {
margin-left: 91.6666666667%; }
.row .col.pull-s11 {
right: 91.6666666667%; }
.row .col.push-s11 {
left: 91.6666666667%; }
.row .col.offset-s12 {
margin-left: 100%; }
.row .col.pull-s12 {
right: 100%; }
.row .col.push-s12 {
left: 100%; }
@media only screen and (min-width: 601px) {
.row .col.m1 {
width: 8.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m2 {
width: 16.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m3 {
width: 25%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m4 {
width: 33.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m5 {
width: 41.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m6 {
width: 50%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m7 {
width: 58.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m8 {
width: 66.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m9 {
width: 75%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m10 {
width: 83.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m11 {
width: 91.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.m12 {
width: 100%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.offset-m1 {
margin-left: 8.3333333333%; }
.row .col.pull-m1 {
right: 8.3333333333%; }
.row .col.push-m1 {
left: 8.3333333333%; }
.row .col.offset-m2 {
margin-left: 16.6666666667%; }
.row .col.pull-m2 {
right: 16.6666666667%; }
.row .col.push-m2 {
left: 16.6666666667%; }
.row .col.offset-m3 {
margin-left: 25%; }
.row .col.pull-m3 {
right: 25%; }
.row .col.push-m3 {
left: 25%; }
.row .col.offset-m4 {
margin-left: 33.3333333333%; }
.row .col.pull-m4 {
right: 33.3333333333%; }
.row .col.push-m4 {
left: 33.3333333333%; }
.row .col.offset-m5 {
margin-left: 41.6666666667%; }
.row .col.pull-m5 {
right: 41.6666666667%; }
.row .col.push-m5 {
left: 41.6666666667%; }
.row .col.offset-m6 {
margin-left: 50%; }
.row .col.pull-m6 {
right: 50%; }
.row .col.push-m6 {
left: 50%; }
.row .col.offset-m7 {
margin-left: 58.3333333333%; }
.row .col.pull-m7 {
right: 58.3333333333%; }
.row .col.push-m7 {
left: 58.3333333333%; }
.row .col.offset-m8 {
margin-left: 66.6666666667%; }
.row .col.pull-m8 {
right: 66.6666666667%; }
.row .col.push-m8 {
left: 66.6666666667%; }
.row .col.offset-m9 {
margin-left: 75%; }
.row .col.pull-m9 {
right: 75%; }
.row .col.push-m9 {
left: 75%; }
.row .col.offset-m10 {
margin-left: 83.3333333333%; }
.row .col.pull-m10 {
right: 83.3333333333%; }
.row .col.push-m10 {
left: 83.3333333333%; }
.row .col.offset-m11 {
margin-left: 91.6666666667%; }
.row .col.pull-m11 {
right: 91.6666666667%; }
.row .col.push-m11 {
left: 91.6666666667%; }
.row .col.offset-m12 {
margin-left: 100%; }
.row .col.pull-m12 {
right: 100%; }
.row .col.push-m12 {
left: 100%; } }
@media only screen and (min-width: 993px) {
.row .col.l1 {
width: 8.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l2 {
width: 16.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l3 {
width: 25%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l4 {
width: 33.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l5 {
width: 41.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l6 {
width: 50%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l7 {
width: 58.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l8 {
width: 66.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l9 {
width: 75%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l10 {
width: 83.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l11 {
width: 91.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.l12 {
width: 100%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.offset-l1 {
margin-left: 8.3333333333%; }
.row .col.pull-l1 {
right: 8.3333333333%; }
.row .col.push-l1 {
left: 8.3333333333%; }
.row .col.offset-l2 {
margin-left: 16.6666666667%; }
.row .col.pull-l2 {
right: 16.6666666667%; }
.row .col.push-l2 {
left: 16.6666666667%; }
.row .col.offset-l3 {
margin-left: 25%; }
.row .col.pull-l3 {
right: 25%; }
.row .col.push-l3 {
left: 25%; }
.row .col.offset-l4 {
margin-left: 33.3333333333%; }
.row .col.pull-l4 {
right: 33.3333333333%; }
.row .col.push-l4 {
left: 33.3333333333%; }
.row .col.offset-l5 {
margin-left: 41.6666666667%; }
.row .col.pull-l5 {
right: 41.6666666667%; }
.row .col.push-l5 {
left: 41.6666666667%; }
.row .col.offset-l6 {
margin-left: 50%; }
.row .col.pull-l6 {
right: 50%; }
.row .col.push-l6 {
left: 50%; }
.row .col.offset-l7 {
margin-left: 58.3333333333%; }
.row .col.pull-l7 {
right: 58.3333333333%; }
.row .col.push-l7 {
left: 58.3333333333%; }
.row .col.offset-l8 {
margin-left: 66.6666666667%; }
.row .col.pull-l8 {
right: 66.6666666667%; }
.row .col.push-l8 {
left: 66.6666666667%; }
.row .col.offset-l9 {
margin-left: 75%; }
.row .col.pull-l9 {
right: 75%; }
.row .col.push-l9 {
left: 75%; }
.row .col.offset-l10 {
margin-left: 83.3333333333%; }
.row .col.pull-l10 {
right: 83.3333333333%; }
.row .col.push-l10 {
left: 83.3333333333%; }
.row .col.offset-l11 {
margin-left: 91.6666666667%; }
.row .col.pull-l11 {
right: 91.6666666667%; }
.row .col.push-l11 {
left: 91.6666666667%; }
.row .col.offset-l12 {
margin-left: 100%; }
.row .col.pull-l12 {
right: 100%; }
.row .col.push-l12 {
left: 100%; } }
@media only screen and (min-width: 1201px) {
.row .col.xl1 {
width: 8.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl2 {
width: 16.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl3 {
width: 25%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl4 {
width: 33.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl5 {
width: 41.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl6 {
width: 50%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl7 {
width: 58.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl8 {
width: 66.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl9 {
width: 75%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl10 {
width: 83.3333333333%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl11 {
width: 91.6666666667%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.xl12 {
width: 100%;
margin-left: auto;
left: auto;
right: auto; }
.row .col.offset-xl1 {
margin-left: 8.3333333333%; }
.row .col.pull-xl1 {
right: 8.3333333333%; }
.row .col.push-xl1 {
left: 8.3333333333%; }
.row .col.offset-xl2 {
margin-left: 16.6666666667%; }
.row .col.pull-xl2 {
right: 16.6666666667%; }
.row .col.push-xl2 {
left: 16.6666666667%; }
.row .col.offset-xl3 {
margin-left: 25%; }
.row .col.pull-xl3 {
right: 25%; }
.row .col.push-xl3 {
left: 25%; }
.row .col.offset-xl4 {
margin-left: 33.3333333333%; }
.row .col.pull-xl4 {
right: 33.3333333333%; }
.row .col.push-xl4 {
left: 33.3333333333%; }
.row .col.offset-xl5 {
margin-left: 41.6666666667%; }
.row .col.pull-xl5 {
right: 41.6666666667%; }
.row .col.push-xl5 {
left: 41.6666666667%; }
.row .col.offset-xl6 {
margin-left: 50%; }
.row .col.pull-xl6 {
right: 50%; }
.row .col.push-xl6 {
left: 50%; }
.row .col.offset-xl7 {
margin-left: 58.3333333333%; }
.row .col.pull-xl7 {
right: 58.3333333333%; }
.row .col.push-xl7 {
left: 58.3333333333%; }
.row .col.offset-xl8 {
margin-left: 66.6666666667%; }
.row .col.pull-xl8 {
right: 66.6666666667%; }
.row .col.push-xl8 {
left: 66.6666666667%; }
.row .col.offset-xl9 {
margin-left: 75%; }
.row .col.pull-xl9 {
right: 75%; }
.row .col.push-xl9 {
left: 75%; }
.row .col.offset-xl10 {
margin-left: 83.3333333333%; }
.row .col.pull-xl10 {
right: 83.3333333333%; }
.row .col.push-xl10 {
left: 83.3333333333%; }
.row .col.offset-xl11 {
margin-left: 91.6666666667%; }
.row .col.pull-xl11 {
right: 91.6666666667%; }
.row .col.push-xl11 {
left: 91.6666666667%; }
.row .col.offset-xl12 {
margin-left: 100%; }
.row .col.pull-xl12 {
right: 100%; }
.row .col.push-xl12 {
left: 100%; } }
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
font-family: Calps, sans-serif;
font-size: 20px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #000000; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent; }
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */ }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none; }
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline; }
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */ }
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none; }
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none; }
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
html {
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden; }
html {
font-size: 14px; }
@media screen and (min-width: 320px) {
html {
font-size: calc(14px + 6 * ((100vw - 320px) / 1080)); } }
@media screen and (min-width: 1400px) {
html {
font-size: 20px; } }
body,
button,
input,
select,
optgroup,
textarea {
color: #000000;
font-family: Calps, sans-serif;
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
body,
button,
input,
select,
optgroup,
textarea {
font-size: 14px; }
@media screen and (min-width: 320px) {
body,
button,
input,
select,
optgroup,
textarea {
font-size: calc(14px + 6 * ((100vw - 320px) / 1080)); } }
@media screen and (min-width: 1400px) {
body,
button,
input,
select,
optgroup,
textarea {
font-size: 20px; } }
h1, h2, h3, h4, h5, h6 {
clear: both;
line-height: 1.2;
margin: .4em 0 .6em; }
h1, .entry-content > h2, section > h2 {
font-weight: 300;
font-style: italic;
text-align: center;
font-size: 40px;
color: #3b44ac; }
h1, .entry-content > h2, section > h2 {
font-size: 30px; }
@media screen and (min-width: 320px) {
h1, .entry-content > h2, section > h2 {
font-size: calc(30px + 50 * ((100vw - 320px) / 1080)); } }
@media screen and (min-width: 1400px) {
h1, .entry-content > h2, section > h2 {
font-size: 80px; } }
h2 {
font-weight: 900;
font-style: italic;
color: #e8473f;
font-size: 25px; }
h2 {
font-size: 18px; }
@media screen and (min-width: 320px) {
h2 {
font-size: calc(18px + 32 * ((100vw - 320px) / 1080)); } }
@media screen and (min-width: 1400px) {
h2 {
font-size: 50px; } }
h3 {
font-weight: 300;
font-style: italic;
color: #e8473f;
font-size: 35px; }
h3 {
font-size: 18px; }
@media screen and (min-width: 320px) {
h3 {
font-size: calc(18px + 17 * ((100vw - 320px) / 1080)); } }
@media screen and (min-width: 1400px) {
h3 {
font-size: 35px; } }
h4 {
margin-bottom: 0;
line-height: 1;
font-style: italic; }
h4 {
font-size: 25px; }
@media screen and (min-width: 320px) {
h4 {
font-size: calc(25px + 10 * ((100vw - 320px) / 1080)); } }
@media screen and (min-width: 1400px) {
h4 {
font-size: 35px; } }
h5 {
line-height: 1;
color: #3b44ac;
font-weight: bold;
font-size: 25px;
margin: 0; }
h5 {
font-size: 20px; }
@media screen and (min-width: 768px) {
h5 {
font-size: calc(20px + 5 * ((100vw - 768px) / 632)); } }
@media screen and (min-width: 1400px) {
h5 {
font-size: 25px; } }
.intro__title {
position: relative;
font-weight: 100;
font-style: italic;
font-size: 35px; }
.intro__title {
font-size: 18px; }
@media screen and (min-width: 320px) {
.intro__title {
font-size: calc(18px + 17 * ((100vw - 320px) / 1080)); } }
@media screen and (min-width: 1400px) {
.intro__title {
font-size: 35px; } }
.intro__title:before {
position: absolute;
content: " - ";
top: 0;
left: -1rem; }
p {
margin-top: 0;
margin-bottom: 1.5em; }
dfn, cite, em, i {
font-style: italic; }
blockquote {
margin: 0 1.5em; }
address {
margin: 0 0 1.5em; }
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em; }
code, kbd, tt, var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem; }
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help; }
mark, ins {
background: #fff9c0;
text-decoration: none; }
big {
font-size: 125%; }
svg .fill--primary {
fill: #e8473f; }
svg .stroke--secondary {
stroke: #3b44ac; }
svg .fill--secondary {
fill: #3b44ac; }
.arrow__prev, .arrow__next {
width: 40px;
margin-left: 0px; }
.disabled .arrow__prev .fill--secondary, .disabled .arrow__next .fill--secondary {
fill: #ededed; }
.arrow__prev:hover, .arrow__next:hover {
opacity: .9; }
.arrow__prev {
transform: rotate(180deg); }
.wpcf7-submit.button__animated-line {
color: #000000;
font-weight: normal;
font-style: italic;
text-transform: uppercase; }
.wpcf7-submit.button__animated-line:visited, .wpcf7-submit.button__animated-line:active, .wpcf7-submit.button__animated-line:hover, .wpcf7-submit.button__animated-line:focus {
color: #000000; }
/** Animated Line Style */
/** @see https://codepen.io/lukemeyrick/pen/apZOWm */
/*
<a class="button__animated-line">
<span class="text">Hover me</span>
<span class="line -right"></span>
<span class="line -top"></span>
<span class="line -left"></span>
<span class="line -bottom"></span>
</a>
*/
.button__animated-line {
color: #ededed;
padding: 0.3em calc(0.3em * 1.2);
display: inline-block;
border: 3px solid transparent;
background: transparent;
position: relative;
cursor: pointer;
line-height: 1;
letter-spacing: 0.07em; }
.button__animated-line:visited, .button__animated-line:active, .button__animated-line:hover, .button__animated-line:focus {
border: 3px solid transparent;
color: #ededed;
outline: none; }
.button__animated-line .text {
transform: translate3d(0, 0.3em, 0);
display: block;
transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1) 0.4s; }
.button__animated-line:after {
position: absolute;
content: '';
bottom: -3px;
left: calc(0.3em * 1.2);
right: calc(0.3em * 1.2);
height: 3px;
background: #3b44ac;
transition: transform 0.8s cubic-bezier(1, 0, 0.37, 1) 0.2s, right 0.2s cubic-bezier(0.04, 0.48, 0, 1) 0.6s, left 0.4s cubic-bezier(0.04, 0.48, 0, 1) 0.6s;
transform-origin: left; }
.button__animated-line .line {
position: absolute;
background: #3b44ac; }
.button__animated-line .line.-right, .button__animated-line .line.-left {
width: 3px;
bottom: -3px;
top: -3px;
transform: scale3d(1, 0, 1); }
.button__animated-line .line.-top, .button__animated-line .line.-bottom {
height: 3px;
left: -3px;
right: -3px;
transform: scale3d(0, 1, 1); }
.button__animated-line .line.-right {
right: -3px;
transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.23s;
transform-origin: top; }
.button__animated-line .line.-top {
top: -3px;
transition: transform 0.08s linear 0.43s;
transform-origin: left; }
.button__animated-line .line.-left {
left: -3px;
transition: transform 0.08s linear 0.51s;
transform-origin: bottom; }
.button__animated-line .line.-bottom {
bottom: -3px;
transition: transform 0.3s cubic-bezier(1, 0, 0.65, 1.01);
transform-origin: right; }
.button__animated-line:hover .text, .button__animated-line:active .text {
transform: translate3d(0, 0.075em, 0);
transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.4s; }
.button__animated-line:hover:after, .button__animated-line:active:after {
transform: scale3d(0, 1, 1);
right: -3px;
left: -3px;
transform-origin: right;
transition: transform 0.2s cubic-bezier(1, 0, 0.65, 1.01) 0.17s, right 0.2s cubic-bezier(1, 0, 0.65, 1.01), left 0s 0.3s; }
.button__animated-line:hover .line, .button__animated-line:active .line {
transform: scale3d(1, 1, 1); }
.button__animated-line:hover .line.-right, .button__animated-line:active .line.-right {
transition: transform 0.1s cubic-bezier(1, 0, 0.65, 1.01) 0.2s;
transform-origin: bottom; }
.button__animated-line:hover .line.-top, .button__animated-line:active .line.-top {
transition: transform 0.08s linear 0.4s;
transform-origin: right; }
.button__animated-line:hover .line.-left, .button__animated-line:active .line.-left {
transition: transform 0.08s linear 0.48s;
transform-origin: top; }
.button__animated-line:hover .line.-bottom, .button__animated-line:active .line.-bottom {
transition: transform 0.5s cubic-bezier(0, 0.53, 0.29, 1) 0.56s;
transform-origin: left; }
/** Animated Circles Style */
/** @see https://codepen.io/dan10gc/pen/JOomvd */
.button__animated-circles {
cursor: pointer;
text-decoration: none;
position: relative;
letter-spacing: 0.15em;
margin: 0 auto;
padding: .8rem 1rem .7rem;
line-height: 1;
background: transparent;
outline: none;
color: #000000 !important;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s;
font-weight: normal;
font-style: italic; }
.button__animated-circles[type=submit] {
-webkit-appearance: none;
border: none; }
@keyframes top {
from {
top: 80%; }
to {
top: 0%; } }
@keyframes bottom {
from {
left: 0%; }
to {
left: 80%; } }
.button__animated-circles::after, .button__animated-circles::before {
content: "";
position: absolute;
height: .7em;
width: .7em;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -2;
border-radius: 50%; }
.button__animated-circles::before {
background-color: #eb5d56;
bottom: 0;
left: 0;
animation: bottom 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate; }
.button__animated-circles::after {
background-color: #e8473f;
top: 80%;
left: .35em;
animation: top 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate; }
.button__animated-circles:hover {
color: white !important; }
.button__animated-circles:hover::before, .button__animated-circles:hover::after {
top: 0;
height: 100%;
width: 100%;
border-radius: 0;
animation: none; }
.button__animated-circles:hover::before {
top: .35em;
left: .35em; }
.button__animated-circles:hover::after {
left: 0; }
/** Animate Text Fill Style */
/** @see https://codepen.io/nailaahmad/pen/PzZowm */
/*
<a class="button__animated-fill" data-letters="Sample Text">
Sample Text
</a>
*/
.button__animated-fill {
color: rgba(237, 237, 237, 0.5);
display: block;
position: relative;
white-space: nowrap;
line-height: 1; }
.button__animated-fill:after {
content: attr(data-letters);
position: absolute;
left: 0;
top: 0;
display: block;
width: 0%;
color: #ededed;
overflow: hidden;
white-space: nowrap;
transition: width .4s; }
.button__animated-fill:hover {
color: rgba(237, 237, 237, 0.5); }
.button__animated-fill:hover:after {
width: 100%; }
.button__animated-fill:visited, .button__animated-fill:active, .button__animated-fill:focus {
color: rgba(237, 237, 237, 0.8); }
/** Animate Text Fill Style */
/** @see https://codepen.io/jwv/pen/adONxo */
.button__animate-line, p a:not([class]) {
display: inline-block;
text-decoration: none;
position: relative;
padding: 0 6px;
transition: color 0.2s cubic-bezier(0.11, 0.7, 0, 1); }
.button__animate-line:hover, p a:hover:not([class]) {
color: #e8473f; }
.button__animate-line:after, p a:not([class]):after {
position: absolute;
top: 100%;
left: 0;
display: block;
width: 100%;
height: 2px;
margin-top: -4px;
background-color: #e8473f;
content: "";
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
transform: scaleX(0);
transition: transform 0.2s cubic-bezier(0.11, 0.7, 0, 1);
transform-origin: left; }
.button__animate-line:hover:after, p a:not([class]):hover:after {
transform: scaleX(1); }
.entry-content a {
color: #3b44ac; }
body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
outline: none; }
.wp-block-streitwerke-subheadline + h3, .wp-block-streitwerke-subheadline + h4, .wp-block-streitwerke-subheadline + h5 {
margin-top: 0; }
/*** INIT SHAPES WITH CSS ***/
.shape__square, .shape__circle, .shape__line, .shape__oval {
position: relative;
display: block;
}
.shape__square:after, .shape__circle:after, .shape__line:after, .shape__oval:after {
display: block;
content: " ";
width: 100%;
padding-bottom: 100%;
}
.shape__square:before, .shape__circle:before, .shape__line:before, .shape__oval:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
border-color: inherit;
border-width: 3px;
}
.shape__square:before, .shape__circle:before, .shape__line:before, .shape__oval:before {
border-width: 2px; }
@media screen and (min-width: 320px) {
.shape__square:before, .shape__circle:before, .shape__line:before, .shape__oval:before {
border-width: calc(2px + 1 * ((100vw - 320px) / 1080)); }
}
@media screen and (min-width: 1400px) {
.shape__square:before, .shape__circle:before, .shape__line:before, .shape__oval:before {
border-width: 3px; }
}
/* planwerk */
.shape__square:before {
top: 0;
left: 0;
border-style: solid; }
/* feinwerk */
.shape__circle:before {
top: 0;
left: 0;
border-style: solid;
border-radius: 50%; }
/* raumwerk */
.shape__line:before {
top: calc(50% - 3px);
height: 0px;
border-top-style: solid;
transform-origin: center center;
transform: rotate(-45deg); }
/* wohnwerk NEU */
.shape__oval:before {
top: 0;
left: 12px;
width: 50%;
border-radius: 70% / 35%;
border-style: solid;
transform: rotate(45deg);
}
/**** werke--navigation ***/
.werke--navigation {
display: flex;
flex-wrap: wrap; }
@media screen and (min-width: 1260px) {
.werke--navigation {
padding-left: 120px; } }
@supports (grid-auto-rows: auto) {
.werke--navigation {
display: grid;
grid-template-columns: repeat(3, 180px);
grid-template-rows: min-content min-content; }
.werke--navigation.werke--navigation__columns-2 {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-2 {
grid-template-columns: repeat(2, 180px); } }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-2 .werke--navigation__link:nth-of-type(1n+3) {
transform: translateX(30px); } }
@media screen and (min-width: 1260px) {
.werke--navigation.werke--navigation__columns-2 .werke--navigation__link:nth-of-type(1n+3) {
transform: translateX(80px); } }
.werke--navigation.werke--navigation__columns-3 {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-3 {
grid-template-columns: repeat(3, 180px); } }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-3 .werke--navigation__link:nth-of-type(1n+4) {
transform: translateX(30px); } }
@media screen and (min-width: 1260px) {
.werke--navigation.werke--navigation__columns-3 .werke--navigation__link:nth-of-type(1n+4) {
transform: translateX(80px); } }
.werke--navigation.werke--navigation__columns-4 {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-4 {
grid-template-columns: repeat(4, 180px); } }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-4 .werke--navigation__link:nth-of-type(1n+5) {
transform: translateX(30px); } }
@media screen and (min-width: 1260px) {
.werke--navigation.werke--navigation__columns-4 .werke--navigation__link:nth-of-type(1n+5) {
transform: translateX(80px); } }
.werke--navigation.werke--navigation__columns-5 {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-5 {
grid-template-columns: repeat(5, 180px); } }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-5 .werke--navigation__link:nth-of-type(1n+6) {
transform: translateX(30px); } }
@media screen and (min-width: 1260px) {
.werke--navigation.werke--navigation__columns-5 .werke--navigation__link:nth-of-type(1n+6) {
transform: translateX(80px); } }
.werke--navigation.werke--navigation__columns-6 {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-6 {
grid-template-columns: repeat(6, 180px); } }
@media screen and (min-width: 768px) {
.werke--navigation.werke--navigation__columns-6 .werke--navigation__link:nth-of-type(1n+7) {
transform: translateX(30px); } }
@media screen and (min-width: 1260px) {
.werke--navigation.werke--navigation__columns-6 .werke--navigation__link:nth-of-type(1n+7) {
transform: translateX(80px); } } }
.werke--navigation .werke--navigation__link {
display: flex;
font-style: italic;
font-weight: bold;
color: #e8473f; }
.werke--navigation .werke--navigation__link .werke--navigation__counter {
display: inline-block;
margin-right: -1rem;
color: #ededed;
font-size: 4rem; }
.werke--navigation .werke--navigation__link .werke--navigation__desc {
font-size: 1rem;
line-height: 1rem;
padding: 3rem .5rem .5rem 0;
word-break: break-word;
hyphens: auto;
width: 180px; }
.werke--navigation .werke--navigation__link.active .werke--navigation__counter {
color: #3b44ac; }
.owl-nav {
margin-top: 1rem; }
.werke--content__wrap {
padding-bottom: 4rem; }
.werke--content {
position: relative;
box-sizing: content-box;
padding-bottom: 180px; }
.werke--content .werke--content__title {
padding: 1rem; }
@media screen and (min-width: 768px) {
.werke--content .werke--content__title {
padding: 1rem 0 1rem 415px; } }
.werke--content .owl-stage {
display: flex; }
.werke--content .owl-item {
height: 577px;
max-height: 70vh; }
.werke--content .owl-carousel .owl-stage-outer .werke--content__image {
display: block;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%; }
.werke--projects__slider .owl-stage-outer {
padding-top: 20px; }
.intro-shape {
position: absolute;
left: 0;
top: 0;
width: 120px;
color: #3b44ac;
transform: translate(-40%, 40%); }
.slider-shape {
position: absolute;
right: 0;
top: 0;
width: 120px;
color: #3b44ac;
z-index: 3; }
.meta-shape-wrap {
position: relative;
height: 0; }
.meta-shape-wrap .meta-shape {
position: absolute;
right: 0;
width: 200px;
color: #3b44ac;
transform: translate(40%, -40%); }
.werke--content__meta {
position: absolute;
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
top: 0;
padding-top: 6rem;
min-height: 100%;
z-index: 3; }
@media screen and (min-width: 768px) {
.werke--content__meta {
width: auto;
padding-top: 0; } }
.werke--content__meta .werke--content__contact {
align-self: center;
margin-top: auto; }
.werke--content__meta .werke--content__image {
width: 375px; }
.werke--content__products {
display: flex;
width: 375px;
padding: 1rem;
background: #e8473f;
color: white;
margin-bottom: 40px;
z-index: 1;
align-self: flex-end; }
@media screen and (min-width: 768px) {
.werke--content__products {
align-self: flex-start; } }
.werke--content__products .werke--content__products-title {
font-style: italic;
font-weight: bold;
text-transform: uppercase;
text-align: right;
padding-right: .5rem; }
.werke--content__products ul li {
line-height: 1.2;
margin-bottom: .3rem;
color: rgba(255, 255, 255, 0.4); }
.werke--content__products ul li span {
color: white; }
.planwerk--content__wrap .werke--content__meta {
width: 100%; }
@media screen and (min-width: 768px) {
.planwerk--content__wrap .werke--content__meta {
width: 375px; } }
.planwerk--content__wrap .section-narrow {
max-width: unset; }
@media screen and (min-width: 768px) {
.planwerk--content__wrap .section-narrow {
padding-left: 240px; } }
.planwerk--content__wrap .section-busts-out__right {
background: #ededed; }
.planwerk--content__wrap .werke--content__image {
position: relative;
display: none;
z-index: 3;
margin-bottom: 40px; }
@media screen and (min-width: 768px) {
.planwerk--content__wrap .werke--content__image {
display: block;
max-width: 40vw; } }
.planwerk--content__wrap .werke--content__image img {
vertical-align: top; }
.planwerk--content__wrap .werke--content__products {
position: relative;
width: 910px;
max-width: 100%;
background: none;
color: #000000; }
@media screen and (min-width: 768px) {
.planwerk--content__wrap .werke--content__products {
padding-left: 150px; } }
.planwerk--content__wrap .werke--content__products ul {
margin: 0; }
.planwerk--content__wrap .werke--content__products ul li {
color: #000000; }
.planwerk--content__wrap .werke--content__products ul li span {
color: #000000; }
.planwerk--content__wrap .meta-shape-wrap .meta-shape {
transform: translate(10%, -80%); }
.planwerk--content__wrap .content-shape {
position: absolute;
right: 0;
bottom: 0;
width: 120px;
color: #3b44ac;
transform: translate(-40%, 40%); }
.bring-to-front {
position: relative;
z-index: 5; }
.wp-block-streitwerke-subheadline {
line-height: 1.1; }
.wp-block-streitwerke-subheadline h2, .wp-block-streitwerke-subheadline h3 {
margin: 0; }
.wp-block-streitwerke-subheadline h2 {
color: #e8473f;
display: block;
font-family: Calps, sans-serif;
font-weight: 900;
font-style: italic;
font-size: 25px; }
.wp-block-streitwerke-subheadline h2 {
font-size: 25px; }
@media screen and (min-width: 768px) {
.wp-block-streitwerke-subheadline h2 {
font-size: calc(25px + 25 * ((100vw - 768px) / 632)); } }
@media screen and (min-width: 1400px) {
.wp-block-streitwerke-subheadline h2 {
font-size: 50px; } }
.wp-block-streitwerke-subheadline h3 {
color: #e8473f;
display: block;
font-family: Calps, sans-serif;
font-weight: 300;
font-style: italic;
font-size: 25px; }
.wp-block-streitwerke-subheadline h3 {
font-size: 25px; }
@media screen and (min-width: 768px) {
.wp-block-streitwerke-subheadline h3 {
font-size: calc(25px + 10 * ((100vw - 768px) / 632)); } }
@media screen and (min-width: 1400px) {
.wp-block-streitwerke-subheadline h3 {
font-size: 35px; } }
@media screen and (min-width: 1260px) {
.wp-block-streitwerke-subheadline {
position: absolute;
text-align: right;
transform: rotate(-90deg) translate3d(-100%, -100%, 0);
transform-origin: 0 0;
padding-bottom: 2rem; }
.wp-block-streitwerke-subheadline h2 {
margin-right: 3rem; }
.wp-block-streitwerke-subheadline.wide {
left: -15%; } }
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
box-sizing: border-box; }
*,
*:before,
*:after {
/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit; }
body {
background: #fff;
/* Fallback for when there is no custom background color defined. */ }
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em; }
ul, ol {
margin: 0 0 1.5em 3em; }
ul.no-marg, ol.no-marg {
margin: 0; }
ul {
list-style: disc; }
ol {
list-style: decimal; }
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em; }
dl {
display: flex;
flex-wrap: wrap; }
dt {
width: 25%;
font-weight: bold;
font-style: italic;
text-align: right; }
dd {
padding-left: calc(25% + 20px);
flex: 100%;
margin: 0 0 0 -25%; }
img {
height: auto;
/* Make sure images are scaled correctly. */
max-width: 100%;
/* Adhere to container width. */ }
figure {
margin: 1em 0;
/* Extra wide images within figure tags don't overflow the content area. */ }
table {
margin: 0 0 1.5em;
width: 100%; }
/**
* Tab content
*/
.js-tabby [data-tabs-pane] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.js-tabby [data-tabs-pane].active {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
.js-tabby [data-tabs-pane]:focus {
outline: none; }
/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsExtraLightItalic.ttf") format("truetype");
font-style: italic;
font-weight: 100; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsExtraLight.ttf") format("truetype");
font-weight: 100; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsSemiLightItalic.ttf") format("truetype");
font-style: italic;
font-weight: 300; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsSemiLight.ttf") format("truetype");
font-weight: 300; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsMedium.ttf") format("truetype");
font-weight: normal; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsMediumItalic.ttf") format("truetype");
font-weight: normal;
font-style: italic; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsBold.ttf") format("truetype");
font-weight: bold; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsBoldItalic.ttf") format("truetype");
font-style: italic;
font-weight: bold; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsBlackItalic.ttf") format("truetype");
font-weight: 900;
font-style: italic; }
@font-face {
font-family: 'Calps';
src: url("sass/fonts/Calps/Typesketchbook-CalpsBlack.ttf") format("truetype");
font-weight: 900; }
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
line-height: 1;
padding: .6em 1em .4em; }
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #ccc #bbb #aaa; }
button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
border-color: #aaa #bbb #bbb; }
/* Text Inputs + Textarea
========================================================================== */
/* Style Placeholders */
::placeholder {
color: #666; }
/* Text inputs */
input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
background-color: transparent;
border: none;
border-bottom: 1px solid #3b44ac;
border-radius: 0;
outline: none;
height: 2.2rem;
width: 100%;
font-size: 1rem;
margin: 0 0 8px 0;
padding: 4px 1rem 0;
box-shadow: none;
box-sizing: border-box;
transition: box-shadow .3s, border .3s; }
input:not([type]):disabled, input:not([type])[readonly="readonly"],
input[type=text]:not(.browser-default):disabled,
input[type=text]:not(.browser-default)[readonly="readonly"],
input[type=password]:not(.browser-default):disabled,
input[type=password]:not(.browser-default)[readonly="readonly"],
input[type=email]:not(.browser-default):disabled,
input[type=email]:not(.browser-default)[readonly="readonly"],
input[type=url]:not(.browser-default):disabled,
input[type=url]:not(.browser-default)[readonly="readonly"],
input[type=time]:not(.browser-default):disabled,
input[type=time]:not(.browser-default)[readonly="readonly"],
input[type=date]:not(.browser-default):disabled,
input[type=date]:not(.browser-default)[readonly="readonly"],
input[type=datetime]:not(.browser-default):disabled,
input[type=datetime]:not(.browser-default)[readonly="readonly"],
input[type=datetime-local]:not(.browser-default):disabled,
input[type=datetime-local]:not(.browser-default)[readonly="readonly"],
input[type=tel]:not(.browser-default):disabled,
input[type=tel]:not(.browser-default)[readonly="readonly"],
input[type=number]:not(.browser-default):disabled,
input[type=number]:not(.browser-default)[readonly="readonly"],
input[type=search]:not(.browser-default):disabled,
input[type=search]:not(.browser-default)[readonly="readonly"],
textarea.materialize-textarea:disabled,
textarea.materialize-textarea[readonly="readonly"] {
color: rgba(0, 0, 0, 0.42);
border-bottom: 1px dotted rgba(0, 0, 0, 0.42); }
input:not([type]):disabled + label, input:not([type])[readonly="readonly"] + label,
input[type=text]:not(.browser-default):disabled + label,
input[type=text]:not(.browser-default)[readonly="readonly"] + label,
input[type=password]:not(.browser-default):disabled + label,
input[type=password]:not(.browser-default)[readonly="readonly"] + label,
input[type=email]:not(.browser-default):disabled + label,
input[type=email]:not(.browser-default)[readonly="readonly"] + label,
input[type=url]:not(.browser-default):disabled + label,
input[type=url]:not(.browser-default)[readonly="readonly"] + label,
input[type=time]:not(.browser-default):disabled + label,
input[type=time]:not(.browser-default)[readonly="readonly"] + label,
input[type=date]:not(.browser-default):disabled + label,
input[type=date]:not(.browser-default)[readonly="readonly"] + label,
input[type=datetime]:not(.browser-default):disabled + label,
input[type=datetime]:not(.browser-default)[readonly="readonly"] + label,
input[type=datetime-local]:not(.browser-default):disabled + label,
input[type=datetime-local]:not(.browser-default)[readonly="readonly"] + label,
input[type=tel]:not(.browser-default):disabled + label,
input[type=tel]:not(.browser-default)[readonly="readonly"] + label,
input[type=number]:not(.browser-default):disabled + label,
input[type=number]:not(.browser-default)[readonly="readonly"] + label,
input[type=search]:not(.browser-default):disabled + label,
input[type=search]:not(.browser-default)[readonly="readonly"] + label,
textarea.materialize-textarea:disabled + label,
textarea.materialize-textarea[readonly="readonly"] + label {
color: rgba(0, 0, 0, 0.42); }
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #3b44ac;
box-shadow: 0 1px 0 0 #3b44ac; }
input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
color: #3b44ac; }
input:not([type]):focus.valid ~ label,
input[type=text]:not(.browser-default):focus.valid ~ label,
input[type=password]:not(.browser-default):focus.valid ~ label,
input[type=email]:not(.browser-default):focus.valid ~ label,
input[type=url]:not(.browser-default):focus.valid ~ label,
input[type=time]:not(.browser-default):focus.valid ~ label,
input[type=date]:not(.browser-default):focus.valid ~ label,
input[type=datetime]:not(.browser-default):focus.valid ~ label,
input[type=datetime-local]:not(.browser-default):focus.valid ~ label,
input[type=tel]:not(.browser-default):focus.valid ~ label,
input[type=number]:not(.browser-default):focus.valid ~ label,
input[type=search]:not(.browser-default):focus.valid ~ label,
textarea.materialize-textarea:focus.valid ~ label {
color: #3b44ac; }
input:not([type]):focus.invalid ~ label,
input[type=text]:not(.browser-default):focus.invalid ~ label,
input[type=password]:not(.browser-default):focus.invalid ~ label,
input[type=email]:not(.browser-default):focus.invalid ~ label,
input[type=url]:not(.browser-default):focus.invalid ~ label,
input[type=time]:not(.browser-default):focus.invalid ~ label,
input[type=date]:not(.browser-default):focus.invalid ~ label,
input[type=datetime]:not(.browser-default):focus.invalid ~ label,
input[type=datetime-local]:not(.browser-default):focus.invalid ~ label,
input[type=tel]:not(.browser-default):focus.invalid ~ label,
input[type=number]:not(.browser-default):focus.invalid ~ label,
input[type=search]:not(.browser-default):focus.invalid ~ label,
textarea.materialize-textarea:focus.invalid ~ label {
color: red; }
input:not([type]).validate + label,
input[type=text]:not(.browser-default).validate + label,
input[type=password]:not(.browser-default).validate + label,
input[type=email]:not(.browser-default).validate + label,
input[type=url]:not(.browser-default).validate + label,
input[type=time]:not(.browser-default).validate + label,
input[type=date]:not(.browser-default).validate + label,
input[type=datetime]:not(.browser-default).validate + label,
input[type=datetime-local]:not(.browser-default).validate + label,
input[type=tel]:not(.browser-default).validate + label,
input[type=number]:not(.browser-default).validate + label,
input[type=search]:not(.browser-default).validate + label,
textarea.materialize-textarea.validate + label {
width: 100%; }
/* Validation Sass Placeholders */
input.valid:not([type]), input.valid:not([type]):focus,
input[type=text].valid:not(.browser-default),
input[type=text].valid:not(.browser-default):focus,
input[type=password].valid:not(.browser-default),
input[type=password].valid:not(.browser-default):focus,
input[type=email].valid:not(.browser-default),
input[type=email].valid:not(.browser-default):focus,
input[type=url].valid:not(.browser-default),
input[type=url].valid:not(.browser-default):focus,
input[type=time].valid:not(.browser-default),
input[type=time].valid:not(.browser-default):focus,
input[type=date].valid:not(.browser-default),
input[type=date].valid:not(.browser-default):focus,
input[type=datetime].valid:not(.browser-default),
input[type=datetime].valid:not(.browser-default):focus,
input[type=datetime-local].valid:not(.browser-default),
input[type=datetime-local].valid:not(.browser-default):focus,
input[type=tel].valid:not(.browser-default),
input[type=tel].valid:not(.browser-default):focus,
input[type=number].valid:not(.browser-default),
input[type=number].valid:not(.browser-default):focus,
input[type=search].valid:not(.browser-default),
input[type=search].valid:not(.browser-default):focus,
textarea.materialize-textarea.valid,
textarea.materialize-textarea.valid:focus {
border-bottom: 1px solid #3b44ac;
box-shadow: 0 1px 0 0 #3b44ac; }
input.invalid:not([type]), input.invalid:not([type]):focus,
input[type=text].invalid:not(.browser-default),
input[type=text].invalid:not(.browser-default):focus,
input[type=password].invalid:not(.browser-default),
input[type=password].invalid:not(.browser-default):focus,
input[type=email].invalid:not(.browser-default),
input[type=email].invalid:not(.browser-default):focus,
input[type=url].invalid:not(.browser-default),
input[type=url].invalid:not(.browser-default):focus,
input[type=time].invalid:not(.browser-default),
input[type=time].invalid:not(.browser-default):focus,
input[type=date].invalid:not(.browser-default),
input[type=date].invalid:not(.browser-default):focus,
input[type=datetime].invalid:not(.browser-default),
input[type=datetime].invalid:not(.browser-default):focus,
input[type=datetime-local].invalid:not(.browser-default),
input[type=datetime-local].invalid:not(.browser-default):focus,
input[type=tel].invalid:not(.browser-default),
input[type=tel].invalid:not(.browser-default):focus,
input[type=number].invalid:not(.browser-default),
input[type=number].invalid:not(.browser-default):focus,
input[type=search].invalid:not(.browser-default),
input[type=search].invalid:not(.browser-default):focus,
textarea.materialize-textarea.invalid,
textarea.materialize-textarea.invalid:focus {
border-bottom: 1px solid red;
box-shadow: 0 1px 0 0 red; }
input:not([type]).valid ~ .helper-text[data-success], input:not([type]):focus.valid ~ .helper-text[data-success], input:not([type]).invalid ~ .helper-text[data-error], input:not([type]):focus.invalid ~ .helper-text[data-error],
input[type=text]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=text]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=text]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=text]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=password]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=password]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=password]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=password]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=email]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=email]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=email]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=email]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=url]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=url]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=url]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=url]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=time]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=time]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=time]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=time]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=date]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=date]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=date]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=date]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=datetime]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=datetime]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=datetime]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=datetime]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=datetime-local]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=datetime-local]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=datetime-local]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=datetime-local]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=tel]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=tel]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=tel]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=tel]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=number]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=number]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=number]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=number]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
input[type=search]:not(.browser-default).valid ~ .helper-text[data-success],
input[type=search]:not(.browser-default):focus.valid ~ .helper-text[data-success],
input[type=search]:not(.browser-default).invalid ~ .helper-text[data-error],
input[type=search]:not(.browser-default):focus.invalid ~ .helper-text[data-error],
textarea.materialize-textarea.valid ~ .helper-text[data-success],
textarea.materialize-textarea:focus.valid ~ .helper-text[data-success],
textarea.materialize-textarea.invalid ~ .helper-text[data-error],
textarea.materialize-textarea:focus.invalid ~ .helper-text[data-error] {
color: transparent;
user-select: none;
pointer-events: none; }
input:not([type]).valid ~ .helper-text:after, input:not([type]):focus.valid ~ .helper-text:after,
input[type=text]:not(.browser-default).valid ~ .helper-text:after,
input[type=text]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=password]:not(.browser-default).valid ~ .helper-text:after,
input[type=password]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=email]:not(.browser-default).valid ~ .helper-text:after,
input[type=email]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=url]:not(.browser-default).valid ~ .helper-text:after,
input[type=url]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=time]:not(.browser-default).valid ~ .helper-text:after,
input[type=time]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=date]:not(.browser-default).valid ~ .helper-text:after,
input[type=date]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=datetime]:not(.browser-default).valid ~ .helper-text:after,
input[type=datetime]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=datetime-local]:not(.browser-default).valid ~ .helper-text:after,
input[type=datetime-local]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=tel]:not(.browser-default).valid ~ .helper-text:after,
input[type=tel]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=number]:not(.browser-default).valid ~ .helper-text:after,
input[type=number]:not(.browser-default):focus.valid ~ .helper-text:after,
input[type=search]:not(.browser-default).valid ~ .helper-text:after,
input[type=search]:not(.browser-default):focus.valid ~ .helper-text:after,
textarea.materialize-textarea.valid ~ .helper-text:after,
textarea.materialize-textarea:focus.valid ~ .helper-text:after {
content: attr(data-success);
color: #3b44ac; }
input:not([type]).invalid ~ .helper-text:after, input:not([type]):focus.invalid ~ .helper-text:after,
input[type=text]:not(.browser-default).invalid ~ .helper-text:after,
input[type=text]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=password]:not(.browser-default).invalid ~ .helper-text:after,
input[type=password]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=email]:not(.browser-default).invalid ~ .helper-text:after,
input[type=email]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=url]:not(.browser-default).invalid ~ .helper-text:after,
input[type=url]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=time]:not(.browser-default).invalid ~ .helper-text:after,
input[type=time]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=date]:not(.browser-default).invalid ~ .helper-text:after,
input[type=date]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=datetime]:not(.browser-default).invalid ~ .helper-text:after,
input[type=datetime]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=datetime-local]:not(.browser-default).invalid ~ .helper-text:after,
input[type=datetime-local]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=tel]:not(.browser-default).invalid ~ .helper-text:after,
input[type=tel]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=number]:not(.browser-default).invalid ~ .helper-text:after,
input[type=number]:not(.browser-default):focus.invalid ~ .helper-text:after,
input[type=search]:not(.browser-default).invalid ~ .helper-text:after,
input[type=search]:not(.browser-default):focus.invalid ~ .helper-text:after,
textarea.materialize-textarea.invalid ~ .helper-text:after,
textarea.materialize-textarea:focus.invalid ~ .helper-text:after {
content: attr(data-error);
color: red; }
input:not([type]) + label:after,
input[type=text]:not(.browser-default) + label:after,
input[type=password]:not(.browser-default) + label:after,
input[type=email]:not(.browser-default) + label:after,
input[type=url]:not(.browser-default) + label:after,
input[type=time]:not(.browser-default) + label:after,
input[type=date]:not(.browser-default) + label:after,
input[type=datetime]:not(.browser-default) + label:after,
input[type=datetime-local]:not(.browser-default) + label:after,
input[type=tel]:not(.browser-default) + label:after,
input[type=number]:not(.browser-default) + label:after,
input[type=search]:not(.browser-default) + label:after,
textarea.materialize-textarea + label:after {
display: block;
content: "";
position: absolute;
top: 100%;
left: 0;
opacity: 0;
transition: .2s opacity ease-out, .2s color ease-out; }
.input-field {
position: relative;
margin-top: 1rem;
margin-bottom: 1rem; }
.input-field.inline {
display: inline-block;
vertical-align: middle;
margin-left: 5px; }
.input-field.inline input,
.input-field.inline .select-dropdown {
margin-bottom: 1rem; }
.input-field > label {
color: #000000;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
font-size: 1rem;
padding: 0 1rem;
font-style: italic;
cursor: text;
transition: transform .2s ease-out, color .2s ease-out;
transform-origin: 0% 100%;
text-align: initial;
transform: translateY(12px); }
.input-field > label:not(.label-icon).active {
transform: translateY(-14px) scale(0.8);
transform-origin: 0 0; }
.input-field > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label, .input-field > input[type=date]:not(.browser-default) + label, .input-field > input[type=time]:not(.browser-default) + label {
transform: translateY(-14px) scale(0.8);
transform-origin: 0 0; }
.input-field .helper-text {
position: relative;
min-height: 18px;
display: block;
font-size: 12px;
color: rgba(0, 0, 0, 0.54); }
.input-field .helper-text::after {
opacity: 1;
position: absolute;
top: 0;
left: 0; }
/* Search Field */
.input-field input[type=search] {
display: block;
line-height: inherit;
transition: .3s background-color; }
.nav-wrapper .input-field input[type=search] {
height: inherit;
padding-left: 4rem;
width: calc(100% - 4rem);
border: 0;
box-shadow: none; }
.input-field input[type=search]:focus:not(.browser-default) {
background-color: #fff;
border: 0;
box-shadow: none;
color: #444; }
.input-field input[type=search]:focus:not(.browser-default) + label i, .input-field input[type=search]:focus:not(.browser-default) ~ .mdi-navigation-close, .input-field input[type=search]:focus:not(.browser-default) ~ .material-icons {
color: #444; }
.input-field input[type=search] + .label-icon {
transform: none;
left: 1rem; }
.input-field input[type=search] ~ .mdi-navigation-close, .input-field input[type=search] ~ .material-icons {
position: absolute;
top: 0;
right: 1rem;
color: transparent;
cursor: pointer;
font-size: 2rem;
transition: .3s color; }
/* Textarea */
textarea {
width: 100%;
height: 2.2rem;
background-color: transparent; }
textarea.materialize-textarea {
line-height: normal;
overflow-y: hidden;
/* prevents scroll bar flash */
padding-top: .8rem;
/* prevents text jump on Enter keypress */
padding-bottom: .8rem;
/* prevents text jump on Enter keypress */
resize: none;
min-height: 2.2rem;
box-sizing: border-box; }
.hiddendiv {
visibility: hidden;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
/* future version of deprecated 'word-wrap' */
padding-top: 1.2rem;
/* prevents text jump on Enter keypress */
position: absolute;
top: 0;
z-index: -1; }
/* Character Counter */
.character-counter {
min-height: 18px; }
/* Radio Buttons
========================================================================== */
.wpcf7-radio .wpcf7-list-item {
margin-left: 2rem; }
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
opacity: 0;
pointer-events: none; }
[type="radio"]:not(:checked) + span,
[type="radio"]:checked + span {
position: relative;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 1rem;
transition: .28s ease;
user-select: none; }
[type="radio"] + span:before,
[type="radio"] + span:after {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 1px;
width: 16px;
height: 16px;
z-index: 0;
transition: .28s ease; }
/* Unchecked styles */
[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after,
[type="radio"]:checked + span:before,
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
border-radius: 50%; }
[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after {
border: 2px solid #5a5a5a; }
[type="radio"]:not(:checked) + span:after {
transform: scale(0); }
/* Checked styles */
[type="radio"]:checked + span:before {
border: 2px solid transparent; }
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
border: 2px solid #3b44ac; }
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
background-color: #3b44ac; }
[type="radio"]:checked + span:after {
transform: scale(1.02); }
/* Radio With gap */
[type="radio"].with-gap:checked + span:after {
transform: scale(0.5); }
/* Focused styles */
[type="radio"].tabbed:focus + span:before {
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); }
/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + span:before {
border: 2px solid rgba(0, 0, 0, 0.42); }
[type="radio"].with-gap:disabled:checked + span:after {
border: none;
background-color: rgba(0, 0, 0, 0.42); }
/* Disabled style */
[type="radio"]:disabled:not(:checked) + span:before,
[type="radio"]:disabled:checked + span:before {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.42); }
[type="radio"]:disabled + span {
color: rgba(0, 0, 0, 0.42); }
[type="radio"]:disabled:not(:checked) + span:before {
border-color: rgba(0, 0, 0, 0.42); }
[type="radio"]:disabled:checked + span:after {
background-color: rgba(0, 0, 0, 0.42);
border-color: #949494; }
/* Checkboxes
========================================================================== */
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
opacity: 0;
pointer-events: none; }
[type="checkbox"] {
/* checkbox aspect */ }
[type="checkbox"] + span:not(.lever) {
position: relative;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 1rem;
user-select: none; }
[type="checkbox"] + span:not(.lever):before, [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
z-index: 0;
border: 2px solid #5a5a5a;
border-radius: 1px;
margin-top: 3px;
transition: .2s; }
[type="checkbox"]:not(.filled-in) + span:not(.lever):after {
border: 0;
transform: scale(0); }
[type="checkbox"]:not(:checked):disabled + span:not(.lever):before {
border: none;
background-color: rgba(0, 0, 0, 0.42); }
[type="checkbox"].tabbed:focus + span:not(.lever):after {
transform: scale(1);
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1); }
[type="checkbox"]:checked + span:not(.lever):before {
top: -4px;
left: -5px;
width: 12px;
height: 22px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #3b44ac;
border-bottom: 2px solid #3b44ac;
transform: rotate(40deg);
backface-visibility: hidden;
transform-origin: 100% 100%; }
[type="checkbox"]:checked:disabled + span:before {
border-right: 2px solid rgba(0, 0, 0, 0.42);
border-bottom: 2px solid rgba(0, 0, 0, 0.42); }
/* Indeterminate checkbox */
[type="checkbox"]:indeterminate + span:not(.lever):before {
top: -11px;
left: -12px;
width: 10px;
height: 22px;
border-top: none;
border-left: none;
border-right: 2px solid #3b44ac;
border-bottom: none;
transform: rotate(90deg);
backface-visibility: hidden;
transform-origin: 100% 100%; }
[type="checkbox"]:indeterminate:disabled + span:not(.lever):before {
border-right: 2px solid rgba(0, 0, 0, 0.42);
background-color: transparent; }
[type="checkbox"].filled-in + span:not(.lever):after {
border-radius: 2px; }
[type="checkbox"].filled-in + span:not(.lever):before,
[type="checkbox"].filled-in + span:not(.lever):after {
content: '';
left: 0;
position: absolute;
/* .1s delay is for check animation */
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
z-index: 1; }
[type="checkbox"].filled-in:not(:checked) + span:not(.lever):before {
width: 0;
height: 0;
border: 3px solid transparent;
left: 6px;
top: 10px;
transform: rotateZ(37deg);
transform-origin: 100% 100%; }
[type="checkbox"].filled-in:not(:checked) + span:not(.lever):after {
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid #5a5a5a;
top: 0px;
z-index: 0; }
[type="checkbox"].filled-in:checked + span:not(.lever):before {
top: 0;
left: 1px;
width: 8px;
height: 13px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotateZ(37deg);
transform-origin: 100% 100%; }
[type="checkbox"].filled-in:checked + span:not(.lever):after {
top: 0;
width: 20px;
height: 20px;
border: 2px solid #3b44ac;
background-color: #3b44ac;
z-index: 0; }
[type="checkbox"].filled-in.tabbed:focus + span:not(.lever):after {
border-radius: 2px;
border-color: #5a5a5a;
background-color: rgba(0, 0, 0, 0.1); }
[type="checkbox"].filled-in.tabbed:checked:focus + span:not(.lever):after {
border-radius: 2px;
background-color: #3b44ac;
border-color: #3b44ac; }
[type="checkbox"].filled-in:disabled:not(:checked) + span:not(.lever):before {
background-color: transparent;
border: 2px solid transparent; }
[type="checkbox"].filled-in:disabled:not(:checked) + span:not(.lever):after {
border-color: transparent;
background-color: #949494; }
[type="checkbox"].filled-in:disabled:checked + span:not(.lever):before {
background-color: transparent; }
[type="checkbox"].filled-in:disabled:checked + span:not(.lever):after {
background-color: #949494;
border-color: #949494; }
.wpcf7-form .row {
margin: 0 -.75rem 0; }
.screen-reader-response, .wpcf7-display-none {
display: none; }
.wpcf7-response-output {
min-height: 500px; }
.wpcf7 form div.visible-only-if-sent {
display: none; }
.wpcf7 form.sent div.visible-only-if-sent {
display: block; }
.wpcf7 form div.visible-only-until-sent {
display: block; }
.wpcf7 form.sent div.visible-only-until-sent {
display: none; }
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
color: #e8473f;
text-decoration: none; }
a:visited {
color: #da231a; }
a:hover, a:focus, a:active {
color: #da231a; }
a:focus {
outline: none; }
a:hover, a:active {
outline: 0; }
body.user-is-tabbing a:focus {
outline: thin dotted; }
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.site-branding {
position: absolute;
top: 15px;
left: 15px; }
.site-branding svg {
width: 85px;
height: 40px; }
@media screen and (min-width: 768px) {
.site-branding {
top: 30px;
left: 30px; }
.site-branding svg {
width: 123px;
height: 60px; } }
@media screen and (min-width: 1260px) {
.site-branding {
top: 45px;
left: 45px; }
.site-branding svg {
width: 170px;
height: 80px; } }
.button-menu-trigger {
position: absolute;
top: 15px;
right: 30px;
transform: scale(0.7); }
@media screen and (min-width: 768px) {
.button-menu-trigger {
top: 30px;
right: 45px;
transform: scale(0.8); } }
@media screen and (min-width: 1260px) {
.button-menu-trigger {
top: 60px;
right: 60px;
transform: scale(1); } }
.site-navigation- {
display: flex; }
.main-navigation {
clear: both;
width: auto;
display: none;
padding-top: 120px;
font-style: italic; }
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0; }
.main-navigation li {
position: relative;
margin-top: .5rem; }
.main-navigation a {
text-decoration: none; }
.main-navigation #primary-menu {
font-size: calc(8px + 3vh);
font-weight: normal;
padding: 0 2rem;
border-left: 2px solid rgba(237, 237, 237, 0.5); }
.main-navigation #primary-menu a {
text-transform: lowercase; }
@media screen and (max-width: 479px) {
.main-navigation #primary-menu {
padding: 0 1rem; } }
.main-navigation #secondary-menu {
font-weight: normal;
text-align: right;
padding: 0 1.6rem; }
@media screen and (max-width: 479px) {
.main-navigation #secondary-menu {
padding: 0 1rem; } }
.main-navigation .main-navigation__social-icons {
text-align: right;
padding: 0 1.6rem; }
.main-navigation .main-navigation__social-icons a {
display: inline-block;
margin: 1rem 7px 0;
color: #ededed; }
.main-navigation .main-navigation__social-icons a:hover {
color: white; }
/* Small menu. */
.menu-toggle {
display: block; }
.button-menu-trigger {
display: block;
width: 36px;
height: 40px;
border: none;
background: none;
padding: 0;
cursor: pointer;
color: #e8473f; }
.button-menu-trigger:focus, .button-menu-trigger:active {
outline: none; }
.button-menu-trigger .hamburger {
position: absolute;
top: 19px;
height: 3px;
width: 100%; }
.button-menu-trigger .hamburger::after, .button-menu-trigger .hamburger::before {
content: " ";
background: inherit;
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 100%;
transition: .1s ease-in-out; }
.button-menu-trigger .hamburger::before {
transform: translateY(-10px); }
.button-menu-trigger .hamburger::after {
transform: translateY(10px); }
.button-menu-trigger:hover .hamburger::before {
transform: translateY(-11px); }
.button-menu-trigger:hover .hamburger::after {
transform: translateY(11px); }
.hamburger {
background: #3b44ac; }
.hamburger--primary .hamburger {
background: #e8473f; }
.hamburger--secondary .hamburger {
background: #3b44ac; }
.hamburger--white .hamburger {
background: white; }
body:not(.intro--visible) .button-menu-trigger {
color: #e8473f; }
body:not(.intro--visible) .button-menu-trigger .hamburger {
background: #3b44ac; }
.word-split-open, .word-split-close {
position: absolute;
pointer-events: none;
left: 50%;
top: 50%;
transform: translate3d(-50%, -42%, 0);
font-size: 40px;
font-style: italic;
line-height: 1;
white-space: nowrap;
color: inherit;
backface-visibility: hidden; }
.word-split-open .word-split-first, .word-split-close .word-split-first {
opacity: 1;
transform: scale(1, 1) translate3d(5px, -12px, 0);
backface-visibility: hidden; }
.word-split-open .word-split-second, .word-split-close .word-split-second {
opacity: 1;
transform: scale(1, 1) translate3d(-5px, 12px, 0);
backface-visibility: hidden; }
.word-split-close {
color: #3b44ac; }
.word-split-close .word-split-second {
transform: translate3d(-14px, 12px, 0); }
.word-split-first,
.word-split-second {
display: inline-block;
transition: .1s ease-in; }
.button-menu-trigger:hover .word-split-open .word-split-first {
transform: translate3d(2px, -12px, 0); }
.button-menu-trigger:hover .word-split-open .word-split-second {
transform: translate3d(-2px, 12px, 0); }
.button-menu-trigger:hover .word-split-close .word-split-first {
transform: translate3d(2px, -12px, 0); }
.button-menu-trigger:hover .word-split-close .word-split-second {
transform: translate3d(-10px, 12px, 0); }
/*
*/
body.menu--open {
overflow: hidden !important; }
body.menu--open .site-header {
z-index: 1000;
height: 100vh;
background: #e8473f;
position: fixed;
display: flex;
align-items: center;
justify-content: center; }
body.menu--open .main-navigation {
display: block; }
body.menu--open .button-menu-trigger {
/* TRICK TO FLAWLESSY REMOVE SCROLLBAR */
margin-right: calc(100vw - 100%); }
body.menu--open .button-menu-trigger:hover .hamburger::before {
transform: translateY(0px); }
body.menu--open .button-menu-trigger:hover .hamburger::after {
transform: translateY(0px); }
body.menu--open .hamburger {
background: #ededed; }
body.menu--open .hamburger::after, body.menu--open .hamburger::before {
transform: translateX(0); }
body.menu--open .word-split-open {
color: #3b44ac; }
body.menu--open .word-split-open .word-split-first,
body.menu--open .word-split-open .word-split-second {
opacity: 0;
transform: translateY(0px); }
body:not(.menu--open) .button-menu-trigger .word-split-close .word-split-first,
body:not(.menu--open) .button-menu-trigger .word-split-close .word-split-second {
opacity: 0;
transform: translateY(0px); }
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden; }
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous {
float: left;
width: 50%; }
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next {
float: right;
text-align: right;
width: 50%; }
/*--------------------------------------------------------------
## Sidenav
--------------------------------------------------------------*/
.float-menu-segment {
display: none;
margin: 0;
padding-top: 5px;
padding-bottom: 10px;
position: fixed;
height: auto;
width: 50px;
background: #ededed;
right: 0;
top: 50%;
transform: translate(0, -50%);
transition: opacity .2s; }
.float-menu-segment .float-menu-segment__station {
position: relative;
height: 80px;
transition: 0.2s; }
.float-menu-segment .float-menu-segment__station .float-menu-segment__menu-text {
position: absolute;
text-align: right;
font-weight: 100;
line-height: 1.2;
right: 20px;
top: 50%;
transform: translate(0, -50%);
color: #e8473f; }
.float-menu-segment .float-menu-segment__station.back-to-frontpage .float-menu-segment__menu-text {
font-size: 15px;
font-style: italic;
color: #3b44ac;
font-weight: bold;
white-space: pre; }
.float-menu-segment .float-menu-segment__container {
height: 50px;
width: 115px; }
.float-menu-segment .float-menu-segment__container .float-menu-segment__container__text,
.float-menu-segment .float-menu-segment__container .float-menu-segment__container__form {
transition: transform .1s; }
.float-menu-segment .float-menu-segment__container:hover .float-menu-segment__container__text {
transform: translateX(2px); }
.float-menu-segment .float-menu-segment__container:hover .float-menu-segment__container__form {
transform: translateX(-2px); }
@media screen and (min-width: 768px) {
.float-menu-segment {
display: block; } }
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
/* Many screen reader and browser combinations announce broken words as they would appear visually. */ }
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */ }
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0; }
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
display: inline;
float: left;
margin-right: 1.5em; }
.alignright {
display: inline;
float: right;
margin-left: 1.5em; }
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto; }
.is--align-right {
text-align: right; }
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
table-layout: fixed; }
.clear:after,
.entry-content:after,
.comment-content:after,
.site-content:after,
.site-footer:after {
clear: both; }
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.single-reference__more-projects {
padding-top: 4rem; }
.single-reference__content .wp-block-image:nth-of-type(1), .single-reference__content .wp-block-streitwerke-comparison:nth-of-type(1) {
position: relative; }
.single-reference__content .wp-block-image:nth-of-type(1):before, .single-reference__content .wp-block-streitwerke-comparison:nth-of-type(1):before {
top: 20px;
left: 0;
content: " ";
position: absolute;
display: block;
width: 200px;
height: 200px;
border: 3px solid #3b44ac;
z-index: -1;
transform: translateX(-20%); }
@media screen and (min-width: 1260px) {
.single-reference__content .wp-block-image:nth-of-type(1), .single-reference__content .twentytwenty-wrapper:nth-of-type(1) {
position: relative; }
.single-reference__content .wp-block-image:nth-of-type(1):before, .single-reference__content .twentytwenty-wrapper:nth-of-type(1):before {
top: 100%;
transform: translate(-100%, -50%); }
.single-reference__content .wp-block-image:nth-of-type(1), .single-reference__content .twentytwenty-wrapper:nth-of-type(1) {
padding-left: 100px; } }
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
margin: 0 0 1.5em;
/* Make sure select elements fit in widgets. */ }
.widget select {
max-width: 100%; }
.widget .textwidget :first-child {
margin-top: 0; }
.widget .textwidget :last-child {
margin-bottom: 0; }
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.site {
overflow: hidden; }
.site-content {
position: relative; }
.content-area {
position: relative;
width: 88%;
max-width: 910px;
float: none;
margin-left: auto;
margin-right: auto;
padding-bottom: 6rem; }
.site-header {
position: static;
width: 100%;
height: 160px;
z-index: 100; }
@media screen and (max-width: 767px) {
.site-header {
position: fixed;
background: white;
height: 70px; }
.site {
padding-top: 70px; } }
.home .site {
padding-top: 6rem; }
.home .site-header {
position: fixed;
height: 0;
transition: height 0.1s cubic-bezier(0.41, 0.03, 0, 1); }
@media screen and (max-width: 767px) {
.home:not(.intro--visible):not(.menu--open) .site-header {
background: white;
height: 70px;
transition: height 0.1s cubic-bezier(0.41, 0.03, 0, 1) 0.3s; } }
.site-main {
margin-right: 0; }
.site-footer .container {
display: flex; }
@media screen and (max-width: 767px) {
.wp-block-columns {
flex-wrap: wrap; }
.wp-block-column {
flex: 100%; } }
.section-wide {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
max-width: 1400px; }
@media screen and (min-width: 1260px) {
.section-wide {
width: calc(100vw - 240px); }
.section-busts-out__right {
margin-right: calc((100% - 100vw) / 2); }
p.wide {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 1200px;
max-width: 90vw;
padding-right: 30%; }
.section-narrow-left {
padding-left: 200px; }
.section-narrow-right {
padding-right: 200px; } }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.section-landscape-wide {
margin: 0 -245px; }
.section-landscape-wide-right {
margin: 0 -245px 0 0; } }
.busts-out {
margin: 0 calc(50% - 50vw) !important;
width: 100vw; }
@media screen and (max-width: 767px) {
.mobile-busts-out {
margin: 0 calc(50% - 50vw);
width: 100vw; } }
.container {
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto; }
.section-narrow {
width: 100%;
max-width: 910px;
margin-left: auto;
margin-right: auto; }
.site-footer__logo svg {
margin-left: 1rem; }
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
display: block; }
.hentry {
margin: 0 0 1.5em; }
.updated:not(.published) {
display: none; }
.page-content,
.entry-content,
.entry-summary {
margin: 0; }
.page-links {
clear: both;
margin: 0 0 1.5em; }
.contact--info {
width: 50%;
margin: 10px; }
.contact--info .wp-block-streitwerke-info-box dt {
width: 55px; }
.contact--info:after {
content: "";
position: absolute;
background: url("assets/img/logo-streit.svg");
background-repeat: no-repeat;
background-size: 140px;
width: 140px;
height: 70px;
left: 110%;
top: 50%;
transform: translateY(-50%); }
@media screen and (min-width: 768px) {
.contact--info {
margin-top: 7rem; }
.contact--info:after {
background-size: 180px;
width: 180px;
height: 100px;
left: 50%;
top: 110%;
transform: translateX(-50%); } }
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
word-wrap: break-word; }
.bypostauthor {
display: block; }
.site {
position: relative;
min-height: calc(100vh + 1px); }
.site[data-scroll] {
background: #FFF;
overflow: hidden;
transition: transform cubic-bezier(0.66, 0.01, 0.28, 1);
transition-duration: 1s;
will-change: transform; }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.site[data-scroll] {
transition-duration: .5s; } }
.site[data-scroll="out"] {
transform: translate3d(0, 100vh, 0); }
.site[data-scroll="in"] {
transform: translate3d(0, 0vh, 0); }
.intro--visible .site-branding svg .fill--primary, .menu--open .site-branding svg .fill--primary {
fill: white; }
.front-page__intro {
position: fixed;
top: 0;
display: grid;
width: 100%;
height: 100vh;
overflow: hidden;
grid-template-columns: 4fr minmax(100px, 1fr);
grid-template-rows: 8fr 3fr 2fr;
grid-template-areas: ". menu" "description description" "news news"; }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.front-page__intro {
grid-template-columns: 10fr minmax(250px, 2fr) minmax(500px, 4fr);
grid-template-rows: 2fr 1fr 80px;
grid-template-areas: "....... ....... menu" "....... news description" "navigation news description"; } }
.front-page__intro a:focus {
outline: none; }
.front-page__intro .intro-menu {
position: relative;
grid-area: menu;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%; }
.front-page__intro .intro-headline {
position: absolute;
bottom: 0;
right: 0;
height: auto;
width: 100vw;
padding: 0 140px 0 30px;
z-index: 1; }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.front-page__intro .intro-headline {
display: block;
position: relative;
height: 20vh;
width: 100%;
padding: 0;
z-index: 0; } }
.front-page__intro .intro-navigation {
display: none; }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.front-page__intro .intro-navigation {
display: block;
position: relative;
grid-area: navigation; } }
.front-page__intro .intro-image {
position: relative;
grid-column: 1 / 2;
grid-row: 1 / 2; }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.front-page__intro .intro-image {
grid-column: 1 / 3;
grid-row: 1 / 4; } }
.front-page__intro .intro-news {
grid-area: news; }
.front-page__intro .intro-description {
grid-area: description; }
/** INTRO MENU **/
.intro-menu {
padding: 60px 20px 0; }
@media screen and (min-width: 768px) {
.intro-menu {
padding: 80px 20px 60px; } }
@media screen and (min-width: 1260px) {
.intro-menu {
padding: 120px 20px 100px; } }
.intro-menu .intro-indicator {
display: none;
--indicator-size: 50px;
position: absolute;
bottom: 0;
left: 0;
line-height: var(--indicator-size);
width: var(--indicator-size);
height: var(--indicator-size);
text-align: center; }
@media screen and (min-width: 768px) {
.intro-menu .intro-indicator {
display: block;
--indicator-size: 70px; } }
@media screen and (min-width: 1260px) {
.intro-menu .intro-indicator {
--indicator-size: 80px; } }
.intro-menu .intro-menu-icon {
padding: 30px;
align-self: flex-end; }
.intro-menu nav {
flex: 1; }
.intro-menu nav.hamburger--primary a {
color: #e8473f; }
.intro-menu nav.hamburger--secondary a {
color: #3b44ac; }
.intro-menu nav.hamburger--white a {
color: white; }
.intro-menu nav.text--primary li.active .intro__shape {
color: #e8473f; }
.intro-menu nav.text--secondary li.active .intro__shape {
color: #3b44ac; }
.intro-menu nav.text--white li.active .intro__shape {
color: white; }
.intro-menu nav ul {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
list-style: none;
padding: 0;
margin: 0;
font-style: italic; }
.intro-menu nav ul li.active {
font-weight: bold; }
.intro-menu nav ul a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
padding: 10px 0; }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.intro-menu {
padding: 160px 60px 80px; }
.intro-menu nav ul {
flex-direction: row; }
.intro-menu nav ul li {
flex: 1; } }
.intro-menu .intro__shape {
margin-bottom: 1rem;
width: 50px; }
.intro-menu .intro__shape {
width: 30px; }
@media screen and (min-width: 320px) {
.intro-menu .intro__shape {
width: calc(30px + 20 * ((100vw - 320px) / 1080)); } }
@media screen and (min-width: 1400px) {
.intro-menu .intro__shape {
width: 50px; } }
/** INTRO IMAGE **/
.intro-image figure {
margin: 0; }
.intro-image figure > img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
object-position: center center; }
.intro-news, .intro-description {
color: #000000;
font-weight: 300; }
.intro-news a, .intro-description a {
font-style: italic; }
[data-intro] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translate3d(100%, 0, 0);
transition: transform 1s cubic-bezier(0.41, 0.03, 0, 1); }
.intro-news,
.intro-description,
.intro-indicator {
position: relative;
overflow: hidden;
line-height: 1.2; }
.intro-indicator [data-intro] {
transition: color 0.1s, transform 1s cubic-bezier(0.41, 0.03, 0, 1); }
.intro-indicator [data-intro].active {
transition: 0.3s color 0.2s, transform 1s cubic-bezier(0.41, 0.03, 0, 1); }
.intro-news [data-intro] {
padding: 10px 10px 10px 40px;
transform: translate3d(100%, 0, 0); }
.intro-description [data-intro] {
padding: 10px 10px 10px 40px;
transform: translate3d(-100%, 0, 0); }
.intro-description [data-intro] p {
display: inline; }
@media screen and (min-width: 768px) {
.intro-news [data-intro] {
padding: 20px 10px 20px 40px;
line-height: 1.4; }
.intro-description [data-intro] {
padding: 20px 10px 20px 40px;
line-height: 1.4; }
.intro-description [data-intro] p {
display: block; } }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.intro-news [data-intro] {
padding: 2rem; }
.intro-description [data-intro] {
padding: 2rem 2rem 2rem 4rem; } }
[data-intro].active {
transform: translate3d(0%, 0, 0); }
/*******************************************/
.intro-headline {
transform: none; }
.intro-headline .intro-headline__shape {
display: block;
position: absolute;
right: 100%;
color: #3b44ac;
opacity: 0;
transition: opacity 1s cubic-bezier(0.41, 0.03, 0, 1);
top: auto;
bottom: -30px;
width: 180px;
transform: translate3d(80%, 0%, 0);
clip: rect(0px, 180px, 150px, 0px); }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.intro-headline {
transform: translate3d(-100%, 0, 0); }
.intro-headline .intro-headline__shape {
top: 100%;
bottom: auto;
width: 250px;
transform: translate3d(80%, -40%, 0);
clip: unset; } }
.intro-headline .intro-headline__shape.active {
opacity: 1; }
.intro-headline .svg-intro-headline {
position: relative;
max-width: 220px;
vertical-align: text-top; }
@media screen and (min-width: 1024px) and (orientation: landscape) {
.intro-headline .svg-intro-headline {
max-width: none; } }
.intro-headline .svg-intro-headline [data-intro-stack] {
fill: white;
opacity: 0;
transform: translateY(50px);
transition: all 1s cubic-bezier(0.41, 0.03, 0, 1); }
.intro-headline .svg-intro-headline [data-intro-stack].active {
opacity: 1;
transform: translateY(0px); }
.intro-headline .svg-intro-headline [data-intro-stack].active[data-intro-stack='2'], .intro-headline .svg-intro-headline [data-intro-stack].active[data-intro-stack='3'] {
transform: translateY(4px); }
/*****/
.intro-bullet-point-nav {
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
margin: 0;
padding: 1rem .5rem;
list-style: none; }
.intro-bullet-point-nav li {
display: block;
padding: 4px; }
.intro-bullet-point-nav li:before {
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #3b44ac;
opacity: .7; }
.intro-bullet-point-nav li.active:before {
opacity: 1; }
@media screen and (min-width: 768px) {
.intro-bullet-point-nav {
padding: 2rem 1rem; } }
/*******************************************/
ul.horizontal-nav {
display: flex;
justify-content: space-around;
list-style: none;
padding: 0; }
ul.horizontal-nav a {
color: #ededed;
font-weight: normal;
font-style: italic;
text-decoration: none; }
ul.horizontal-nav .button__animated-line .line {
background: #e8473f; }
ul.horizontal-nav .button__animated-line:after {
background: #e8473f; }
.site-footer {
position: relative;
background: #e8473f;
color: #ededed;
padding: 3rem 0;
font-weight: 500; }
.site-footer .widget {
padding-left: 4rem;
margin: 0; }
.site-footer .footer-title {
position: relative;
font-size: 2rem;
font-weight: 100;
letter-spacing: 5px;
font-style: italic;
text-rendering: optimizeLegibility; }
.site-footer .footer-title:before {
position: absolute;
content: " - ";
top: 0;
left: -1rem; }
.site-footer a {
font-style: italic;
text-decoration: none;
color: #ededed; }
.site-footer a:hover {
color: #ededed; }
.site-footer ul {
padding: 0;
margin: 0;
list-style: none; }
.back-to-top-container {
display: none;
position: absolute;
bottom: 20px;
right: 30px;
z-index: 99; }
.back-to-top-container .back-to-top-btn {
display: block;
height: auto;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
transition: transform 0.1s ease; }
.back-to-top-container .back-to-top-btn:hover .arrow {
animation-delay: 0s;
animation-duration: 1s; }
.back-to-top-container .arrow {
animation: popup 2s ease infinite;
animation-delay: 7s; }
@media screen and (min-width: 768px) {
.back-to-top-container {
display: block; } }
@keyframes popup {
0% {
transform: translateY(0px); }
40% {
transform: translateY(-10px); }
100% {
transform: translateY(0px); } }
.pageloader {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #e8473f;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
.pageloader .pageloader__logo {
margin-bottom: 2rem;
max-width: 50%; }
.pageloader .pageloader__logo svg {
max-width: 100%;
width: 420px;
height: auto; }
@media screen and (min-width: 768px) {
.pageloader .pageloader__logo svg {
height: 200px; } }
.pageloader .pageloader__intro {
text-align: center;
color: white;
width: 600px;
max-width: 90%; }
.pageloader .pageloader__notice {
color: white;
margin-top: 2rem;
width: 400px;
max-width: 90%;
font-size: 0.6rem; }
.pageloader .pageloader__progress {
margin-top: 20px;
position: relative;
height: 60px;
width: 400px;
max-width: 90%;
border: 6px solid white; }
.pageloader .hide-pageloader {
margin: 5px 0px 5px 20px;
color: #3b44ac;
text-align: right;
font-weight: bold;
width: 260px;
line-height: 1.1; }
.pageloader .hide-pageloader:hover {
color: #555ec5; }
.pace {
position: relative;
height: 100%;
width: 100%;
transform: translate(-15px, -15px);
overflow: hidden; }
.pace .pace-progress {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 400px;
z-index: 2000;
display: block;
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: white; }
.pace.pace-inactive {
display: none; }
/**
Animations
*/
.is--fade-out {
opacity: 0; }
.is--fade-in {
opacity: 1;
transition: opacity .2s; }
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
/* Theme Footer (when set to scrolling) */
display: none; }
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
display: block; }
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0; }
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%; }
/* Make sure logo link wraps around logo image. */
.custom-logo-link {
display: inline-block; }
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%; }
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto; }
.wp-caption .wp-caption-text {
margin: 0.8075em 0; }
.wp-caption-text {
text-align: center; }
/**
* Featherlight – ultra slim jQuery lightbox
* Version 1.7.13 - http://noelboss.github.io/featherlight/
*
* Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
* MIT Licensed.
**/
html.with-featherlight {
/* disable global scrolling when featherlights are visible */
overflow: hidden; }
.featherlight {
display: none;
/* dimensions: spanning the background from edge to edge */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483647;
/* z-index needs to be >= elements on the site. */
/* position: centering content */
text-align: center;
/* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
white-space: nowrap;
/* styling */
cursor: pointer;
background: rgba(255, 255, 255, 0.75);
/* IE8 "hack" for nested featherlights */
background: rgba(0, 0, 0, 0); }
/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
.featherlight:last-of-type {
background: rgba(255, 255, 255, 0.75); }
.featherlight:before {
/* position: trick to center content vertically */
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.featherlight .featherlight-content {
/* make content container for positioned elements (close button) */
position: relative;
/* position: centering vertical and horizontal */
text-align: left;
vertical-align: middle;
display: inline-block;
/* dimensions: cut off images */
overflow: auto;
padding-top: 35px;
/* dimensions: handling large content */
margin-left: 5%;
margin-right: 5%;
max-height: 95%;
/* styling */
background: transparent;
cursor: auto;
/* reset white-space wrapping */
white-space: normal; }
/* contains the content */
.featherlight .featherlight-inner {
/* make sure its visible */
display: block; }
/* don't show these though */
.featherlight script.featherlight-inner,
.featherlight link.featherlight-inner,
.featherlight style.featherlight-inner {
display: none; }
.featherlight .featherlight-close-icon {
/* position: centering vertical and horizontal */
position: absolute;
z-index: 9999;
top: 0;
right: 0;
/* dimensions: 25px x 25px */
line-height: 35px;
width: 35px;
font-size: 35px;
/* styling */
cursor: pointer;
text-align: center;
font-family: Arial, sans-serif;
color: #3b44ac;
background: transparent;
border: none;
padding: 0; }
/* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */
.featherlight .featherlight-close-icon::-moz-focus-inner {
border: 0;
padding: 0; }
.featherlight .featherlight-image {
/* styling */
width: 100%; }
.featherlight-iframe .featherlight-content {
/* removed the border for image croping since iframe is edge to edge */
border-bottom: 0;
padding: 0;
-webkit-overflow-scrolling: touch; }
.featherlight iframe {
/* styling */
border: none; }
.featherlight * {
/* See https://github.com/noelboss/featherlight/issues/42 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
.featherlight .featherlight-content {
/* dimensions: maximize lightbox with for small screens */
margin-left: 0;
margin-right: 0;
max-height: 98%;
padding-top: 25px; }
.featherlight .featherlight-close-icon {
/* dimensions: 25px x 25px */
line-height: 25px;
width: 25px;
font-size: 25px; } }
/* hide non featherlight items when printing */
@media print {
html.with-featherlight > * > :not(.featherlight) {
display: none; } }
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em; }
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%; }
.gallery-columns-2 .gallery-item {
max-width: 50%; }
.gallery-columns-3 .gallery-item {
max-width: 33.33%; }
.gallery-columns-4 .gallery-item {
max-width: 25%; }
.gallery-columns-5 .gallery-item {
max-width: 20%; }
.gallery-columns-6 .gallery-item {
max-width: 16.66%; }
.gallery-columns-7 .gallery-item {
max-width: 14.28%; }
.gallery-columns-8 .gallery-item {
max-width: 12.5%; }
.gallery-columns-9 .gallery-item {
max-width: 11.11%; }
.gallery-caption {
display: block; }
/**
* Featherlight Gallery – an extension for the ultra slim jQuery lightbox
* Version 1.7.13 - http://noelboss.github.io/featherlight/
*
* Copyright 2018, Noël Raoul Bossart (http://www.noelboss.com)
* MIT Licensed.
**/
.featherlight-next,
.featherlight-previous {
display: block;
position: absolute;
top: 35px;
right: 15px;
bottom: 0;
left: 80%;
cursor: pointer;
/* preventing text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* IE9 hack, otherwise navigation doesn't appear */
background: rgba(0, 0, 0, 0); }
.featherlight-previous {
left: 15px;
right: 80%; }
.featherlight-next span,
.featherlight-previous span {
position: absolute;
top: 50%;
left: 5%;
width: 82%;
/* center horizontally */
text-align: center;
font-size: 80px;
line-height: 80px;
/* center vertically */
margin-top: -40px;
font-style: normal;
font-weight: normal; }
.featherlight-next span {
right: 5%;
left: auto; }
.featherlight-next:hover span,
.featherlight-previous:hover span {
color: black; }
.featherlight-swipe-aware .featherlight-next,
.featherlight-swipe-aware .featherlight-previous {
display: none; }
/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
display: none; }
/* Hide navigation in case of single image */
.featherlight-first-slide.featherlight-last-slide .featherlight-previous,
.featherlight-first-slide.featherlight-last-slide .featherlight-next {
display: none; }
/* Always display arrows on touch devices */
@media only screen and (max-device-width: 1024px) {
.featherlight-next:hover,
.featherlight-previous:hover {
background: none; }
.featherlight-next span,
.featherlight-previous span {
display: block; } }
/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
.featherlight-next,
.featherlight-previous {
top: 10px;
right: 10px;
left: 85%; }
.featherlight-previous {
left: 10px;
right: 85%; }
.featherlight-next span,
.featherlight-previous span {
margin-top: -30px;
font-size: 40px; } }
.image-hover-effect {
position: relative;
z-index: 1;
text-align: center; }
.image-hover-effect .hover-effect__container {
position: relative;
background: white; }
.image-hover-effect figure {
position: relative;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
overflow: hidden;
background: inherit; }
.image-hover-effect figure img {
vertical-align: top; }
.image-hover-effect figure .hover-effect__link {
visibility: hidden;
position: absolute;
bottom: 20%;
left: 50%;
opacity: 0;
transform: translate3d(-50%, 10px, 0);
transition: 0.1s cubic-bezier(0.42, 0, 0.58, 1);
backface-visibility: hidden;
display: block;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
color: white;
line-height: 1;
font-size: 1.6rem;
font-weight: normal;
font-style: italic;
padding: 5px 0 0;
border-bottom: 3px solid #3b44ac; }
.image-hover-effect .hover-effect__title {
display: flex;
align-items: center;
justify-content: center;
height: 5rem;
padding: 10px;
transition: color 0.1s cubic-bezier(0.42, 0, 0.58, 1); }
.image-hover-effect > div {
position: relative;
z-index: 1; }
.image-hover-effect:hover .hover-effect__container {
background: #F3A39E; }
.image-hover-effect:hover .hover-effect__container img {
filter: contrast(60%) grayscale(40%);
opacity: 0.4;
/* styles for browsers that support CSS Filters */
transition: 0.1s cubic-bezier(0.42, 0, 0.58, 1); }
@supports (mix-blend-mode: luminosity) {
.image-hover-effect:hover .hover-effect__container img {
mix-blend-mode: luminosity;
opacity: 1; } }
.image-hover-effect:hover .hover-effect__container .title {
color: white; }
.image-hover-effect:hover .hover-effect__container figure .hover-effect__link {
visibility: visible;
opacity: 1;
transform: translate3d(-50%, 0%, 0); }
.image-hover-effect::after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3b44ac;
transform: translate3d(0, 0, 0);
transition: 0.1s cubic-bezier(0.42, 0, 0.58, 1);
opacity: 0;
backface-visibility: hidden; }
.image-hover-effect:hover::after {
opacity: 1;
transform: translate3d(8px, 8px, 0); }
/*# sourceMappingURL=style.noprefixes.css.map */
/* Referenzen drucken - Button ausblenden */
.section__print-reference {
display: none;
}