html {
font-family: sans-serif;
font-size: 62.5%;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
footer,
header,
nav,
section,
main,
figcaption,
figure {
display: block;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bold;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
select[multiple] {
vertical-align: top;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
vertical-align: top;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
div,
article,
section,
header,
footer,
nav,
ul,
li {
position: relative;
}
ul,
ol,
li {
margin: 0;
padding: 0;
}
figure {
margin: 0;
}
.edit-link {
position: absolute;
top: 0px;
right: 0px;
z-index: 999999;
}
.edit-link .post-edit-link {
padding: 4px 8px;
background: red;
color: black;
}
.says,
.screen-reader-text {
clip: rect(1px,1px,1px,1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
.site .skip-link {
background-color: #f1f1f1;
display: block;
left: -9999em;
outline: none;
padding: 15px 23px 14px;
text-decoration: none;
text-transform: none;
top: -9999em;
}
.site .skip-link:focus {
clip: auto;
height: auto;
left: 6px;
top: 7px;
width: auto;
z-index: 100000;
}
#wpadminbar {
opacity: 0.5;
width: auto;
min-width: auto;
}
#wpadminbar #wp-admin-bar-wp-logo,
#wpadminbar #wp-admin-bar-customize,
#wpadminbar #wp-admin-bar-updates,
#wpadminbar #wp-admin-bar-comments,
#wpadminbar #wp-admin-bar-new-content {
display: none;
}
#wpadminbar #wp-admin-bar-top-secondary,
#wpadminbar .ab-sub-wrapper {
display: none !important;
}
body.dev #wpadminbar {
display: none;
}
.alignnone {
margin: 0.25em 1em 1em 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 0.25em auto 0.25em auto;
}
.alignright {
float: right;
margin: 0.25em 0 1em 1em;
}
.alignleft {
float: left;
margin: 0.25em 1em 1em 0;
}
.wp-caption {
padding: 0.25em 0.25em 0.5em;
text-align: left;
}
.wp-caption.alignnone {
margin: 0.25em 1em 1em 0;
}
.wp-caption.alignleft {
margin: 0.25em 1em 1em 0;
}
.wp-caption.alignright {
margin: 0.25em 0 1em 1em;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
margin: 0;
padding: 0 0.25em 0.25em;
}
.gallery:before,
.gallery:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.gallery:before,
.gallery:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.gallery .gallery-item {
float: left;
width: 33.3333%;
}
.gallery.gallery-columns-2 .gallery-item {
width: 50%;
}
.gallery.gallery-columns-4 .gallery-item {
width: 25%;
}
::-webkit-input-placeholder {
color: white;
opacity: 1;
}
:-ms-input-placeholder {
color: white;
opacity: 1;
}
::placeholder {
color: white;
opacity: 1;
}
label,
input,
textarea,
button {
vertical-align: top;
white-space: normal;
background: none;
border: none;
}
fieldset,
.fieldset {
margin-bottom: 1em;
}
fieldset.hidden,
.fieldset.hidden {
display: none;
}
label,
fieldset legend {
display: block;
margin-bottom: 0.2em;
}
button,
.button,
input[type=submit],
input[type=reset] {
display: inline-block;
width: 100%;
max-width: 10em;
padding: 0.4em;
line-height: 1;
border: 1px solid black;
background-color: black;
color: white;
cursor: pointer;
-webkit-appearance: none;
border-radius: 0;
}
button:hover,
button:active,
button:focus,
.button:hover,
.button:active,
.button:focus,
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus {
background-color: white;
color: black;
}
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search] input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
width: 100%;
max-width: 20em;
padding: 0.4em;
border: 1px solid black;
}
textarea {
width: 100%;
max-width: 20em;
padding: 0.4em;
border: 1px solid black;
}
input[type=checkbox],
input[type=radio] {
width: 1em;
height: 1em;
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
margin: 0;
position: relative;
top: 0.35em;
width: 0.5em;
height: 0.5em;
background-color: black;
border: 0.06em solid white;
border-radius: 50%;
}
input[type="checkbox"]:before {
content: " ";
position: absolute;
top: -0.06em;
left: -0.06em;
width: 0.5em;
height: 0.5em;
border: 0.06em solid white;
border-radius: 50%;
transform: scale(0);
background-color: white;
transition: transform 0.2s ease-out;
}
input[type="checkbox"]:hover:before,
input[type="checkbox"]:checked:before {
transform: scale(1);
}
label input[type=checkbox],
label input[type=radio],
label .icheckbox_hue,
label .iradio_hue {
margin-right: 0.4em;
}
select {
border: 1px solid black;
}
input[disabled][disabled],
textarea[disabled][disabled],
select[disabled][disabled],
option[disabled][disabled],
button[disabled][disabled] {
cursor: not-allowed;
}
.searchform {
position: relative;
display: inline-block;
}
.searchform .search-form-container {
width: 2em;
overflow: hidden;
transition: width 0.2s ease-out;
}
.searchform .search-form-container:before,
.searchform .search-form-container:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.searchform .search-form-container:before,
.searchform .search-form-container:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.searchform .search-form-container .search-form-content {
float: right;
width: 11.3em;
white-space: nowrap;
}
.searchform .search-form-container .search-form-content input[type=text],
.searchform .search-form-container .search-form-content input[type=submit] {
display: inline-block;
margin: 0;
border: none;
}
.searchform .search-form-container .search-form-content input[type=text] {
max-width: 9em;
margin-right: 0.3em;
}
.searchform .search-form-container .search-form-content input[type=submit] {
width: 2em;
height: 2em;
color: transparent;
background-color: transparent;
border: none;
}
.searchform .search-form-container .search-form-content input[type=submit]:hover,
.searchform .search-form-container .search-form-content input[type=submit]:active,
.searchform .search-form-container .search-form-content input[type=submit]:focus {
color: transparent;
background-color: transparent;
}
.searchform .search-form-button {
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 2em;
z-index: 5;
cursor: pointer;
}
.searchform .search-form-button svg path {
fill: black;
}
.searchform .search-form-button:hover svg path,
.searchform .search-form-button:active svg path,
.searchform .search-form-button:focus svg path {
fill: black;
}
.searchform.active .search-form-container {
width: 11.3em;
}
.searchform.active .search-form-button {
pointer-events: none;
}
.searchform.active .search-form-button svg path {
fill: black;
}
#content #searchform .search-form-button {
display: none;
}
.error-404 .searchform {
margin-bottom: 1em;
}
#mc_embed_signup form .mc-field-group {
margin-bottom: 1em;
}
#mc_embed_signup form .mc-field-group input {
margin-bottom: 0;
}
#mc_embed_signup form input.mce_inline_error {
border-color: black;
}
#mc_embed_signup form div.mce_inline_error {
max-width: 20em;
margin: 0 0 1em;
padding: 0.4em;
background-color: black;
}
#mc_embed_signup form #mce-responses .response {
margin: 1em 0;
}
#mc_embed_signup form ul {
list-style-type: none;
padding-left: 0;
margin-top: 0.5em;
}
#mc_embed_signup form ul .icheckbox_hue {
margin-right: 0.5em;
}
#mc_embed_signup form ul label {
display: inline-block;
}
.srt {
clip: rect(1px,1px,1px,1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
.cf:before,
.cf:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
@font-face {
font-family: 'Neue Haas Grotesk';
src: url(https://modul5.com/101/wp-content/themes/hue/style/fonts/825424/75e1af8f-1a4c-475a-8b53-f27e52822b6b.woff2) format("woff2"), url(https://modul5.com/101/wp-content/themes/hue/style/fonts/825424/2ba6fbd5-9c17-4733-af15-f49fbecc5c15.woff) format("woff");
font-weight: bold;
}
@font-face {
font-family: 'Neue Haas Grotesk';
src: url(https://modul5.com/101/wp-content/themes/hue/style/fonts/5549029/6e329389-9c44-48b0-8291-f918840fe862.woff2) format("woff2"), url(https://modul5.com/101/wp-content/themes/hue/style/fonts/5549029/dc6a6646-e0ac-4deb-b3c0-19e5dc30bf6a.woff) format("woff");
}
body {
font-family: 'Neue Haas Grotesk', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 20px;
font-size: 2rem;
font-size: 1.57vw;
line-height: 1.25;
color: black;
}
a {
color: black;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Neue Haas Grotesk', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 20px;
font-size: 2rem;
letter-spacing: normal;
text-transform: none;
font-weight: 400;
line-height: 1em;
}
h2 {
font-size: 70px;
font-size: 7rem;
font-size: 5.47vw;
}
body.error404 h2 {
font-size: 140px;
font-size: 14rem;
font-size: 10.94vw;
}
h3 {
font-size: 140px;
font-size: 14rem;
font-size: 10.94vw;
}
body.home h3 {
font-size: 160px;
font-size: 16rem;
font-size: 12.5vw;
line-height: 0.8;
}
body.services h3,
body.leistungen h3,
.nav-links,
body.request h3,
body.anfrage h3,
.send-email,
.wpcf7-response-output {
font-size: 70px;
font-size: 7rem;
font-size: 5.47vw;
}
body.projects h3,
body.projekte h3 {
font-size: 40px;
font-size: 4rem;
font-size: 3.13vw;
}
.lang-menu span,
.category-nav .title,
.single-category-list,
.single-extra,
.topics,
input[name=dsgvo],
label[for=dsgvo] {
font-size: 50px;
font-size: 5rem;
font-size: 3.91vw;
}
.category-nav li,
.wpcf7-not-valid-tip,
.fieldset.message .note {
font-size: 35px;
font-size: 3.5rem;
font-size: 2.74vw;
line-height: 1.14;
}
.image-wrapper .image-caption {
font-size: 0.8em;
}
.text.small {
font-size: 30px;
font-size: 3rem;
font-size: 2.05vw;
line-height: 1.33;
}
.text.medium {
font-size: 35px;
font-size: 3.5rem;
font-size: 2.74vw;
line-height: 1.14;
}
.text.large {
font-size: 40px;
font-size: 4rem;
font-size: 3.13vw;
}
.text.extra {
font-size: 50px;
font-size: 5rem;
font-size: 3.91vw;
}
.text.huge {
font-size: 70px;
font-size: 7rem;
font-size: 5.47vw;
line-height: 1.14;
}
.contact-person h3 {
font-size: 40px;
font-size: 4rem;
font-size: 3.13vw;
}
.member h4 {
font-size: 50px;
font-size: 5rem;
font-size: 3.91vw;
}
.member .role,
.member .email,
.member .phone {
font-size: 35px;
font-size: 3.5rem;
font-size: 2.74vw;
}
article.post .date,
article.post .read-more {
font-size: 35px;
font-size: 3.5rem;
font-size: 2.74vw;
}
label {
font-size: 70px;
font-size: 7rem;
font-size: 5.47vw;
}
input,
select,
button,
textarea {
font-size: 70px;
font-size: 7rem;
font-size: 5.47vw;
}
a.button {
font-size: 40px;
font-size: 4rem;
font-size: 3.13vw;
}
::-moz-selection {
color: #000;
background-color: rgba(221,221,221,0.996) !important;
}
::selection {
color: #000;
background-color: rgba(221,221,221,0.996) !important;
}
.site-header {
position: fixed;
top: 0;
left: auto;
right: 0;
width: 15em;
height: 10em;
z-index: 99998;
background: transparent;
transition: all 0.4s ease-out;
}
.site-header *,
.site-header *:before,
.site-header *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.site-header.fullscreen {
width: 100%;
height: 100%;
}
.site-header .lang-menu {
position: absolute;
top: 1em;
left: 1.5em;
opacity: 0;
transition: opacity 0.4s ease-out;
}
.site-header .cube-close {
position: absolute;
top: 1.4em;
right: 1.5em;
opacity: 0;
width: 2em;
height: 2em;
transition: opacity 0.4s ease-out;
}
.site-header .cube-close .line {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 2.3em;
height: 0.2em;
background-color: black;
transform-origin: center center;
}
.site-header .cube-close .line.line-0 {
transform: translate(0,1em) rotate(45deg);
}
.site-header .cube-close .line.line-1 {
transform: translate(0,1em) rotate(-45deg);
}
.site-header.menu-open {
background: #f0ff00;
}
.site-header.menu-open #hue-cube-wrapper {
top: 50%;
right: 50%;
}
.site-header.menu-open .hue-viewport {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
.site-header.menu-open .hue-cube > div > div.hue-cube-image:hover,
.site-header.menu-open .hue-cube > div > div.hue-cube-image.current {
color: #f0ff00;
}
.site-header.menu-open .hue-cube a {
pointer-events: auto;
}
.site-header.menu-open .lang-menu,
.site-header.menu-open .cube-close {
opacity: 1;
}
#hue-cube-wrapper {
position: absolute;
top: 5em;
right: 8em;
width: 10em;
height: 5em;
transform: translate(50%,-50%);
transition: all 0.4s ease-out;
}
.float-wrapper {
width: 100%;
height: 100%;
transform: translate(0);
animation: float 6s ease-in-out infinite;
}
body.loading .site-header {
pointer-events: none;
}
body.loading .hue-cube a {
pointer-events: none;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-0.5em);
}
100% {
transform: translateY(0px);
}
}
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-1em);
}
100% {
transform: translateY(0px);
}
}
@keyframes floatXYZ {
0% {
transform: translate3d(0,0,0);
}
20% {
transform: translate3d(0.15em,-0.12em,0);
}
50% {
transform: translate3d(0,-0.3em,0);
}
75% {
transform: translate3d(-0.15em,-0.15em,0);
}
100% {
transform: translate(0,0,0);
}
}
@keyframes floatx {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(-0.3em);
}
100% {
transform: translateX(0px);
}
}
@keyframes floatz {
0% {
transform: translateZ(0px);
}
50% {
transform: translateZ(-0.5em);
}
100% {
transform: translateZ(0px);
}
}
.hue-viewport {
width: 100%;
height: 100%;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
-webkit-perspective-origin: 50% 1000px;
-moz-perspective-origin: 50% 1000px;
-ms-perspective-origin: 50% 1000px;
-o-perspective-origin: 50% 1000px;
perspective-origin: 50% 1000px;
-webkit-transform: scale(0.3,0.3);
-moz-transform: scale(0.3,0.3);
-ms-transform: scale(0.3,0.3);
-o-transform: scale(0.3,0.3);
transform: scale(0.3,0.3);
transition: all 0.4s ease-out;
}
.hue-cube {
position: relative;
top: -68px;
left: -150px;
margin: 0 auto;
height: 270px;
width: 600px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(160deg) rotateY(200deg);
-moz-transform: rotateX(160deg) rotateY(200deg);
-ms-transform: rotateX(160deg) rotateY(200deg);
-o-transform: rotateX(160deg) rotateY(200deg);
transform: rotateX(160deg) rotateY(200deg);
}
.hue-cube.animate {
transition: transform 0.4s ease-out;
}
.hue-cube a {
display: block;
width: 100%;
height: 100%;
color: white;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
cursor: move;
}
.hue-cube a:hover,
.hue-cube a:active,
.hue-cube a.active {
color: #f0ff00;
text-decoration: none;
}
.hue-cube a:focus {
text-decoration: none;
}
.hue-cube > div {
position: absolute;
opacity: 1;
height: 270px;
width: 600px;
background: #000000;
-webkit-touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
-o-touch-callout: none;
touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
transform-style: preserve-3d;
}
.hue-cube > div.inner {
pointer-events: none;
}
.hue-cube > div > div.hue-cube-image {
width: 600px;
height: 270px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
line-height: 585px;
font-size: 150px;
text-align: left;
padding: 0 0.1em;
color: white;
-webkit-transition: color 600ms;
-moz-transition: color 600ms;
-ms-transition: color 600ms;
-o-transition: color 600ms;
transition: color 600ms;
}
html[lang="de-DE"] .hue-cube > div > div.hue-cube-image {
font-size: 120px;
}
html[lang="de-DE"] .hue-cube > div > div.hue-cube-image[data-id="1"] {
font-size: 150px;
}
html[lang="de-DE"] .hue-cube > div > div.hue-cube-image[data-id="2"] {
line-height: 395px;
}
html[lang="de-DE"] .hue-cube > div > div.hue-cube-image[data-id="3"] {
line-height: 395px;
}
html[lang="de-DE"] .hue-cube > div > div.hue-cube-image[data-id="4"] {
line-height: 395px;
}
html[lang="de-DE"] .hue-cube > div > div.hue-cube-image[data-id="5"] {
line-height: 995px;
}
html[lang="de-DE"] .hue-cube > div > div.hue-cube-image[data-id="6"] {
line-height: 995px;
}
.hue-cube > div:hover {
cursor: pointer;
}
.hue-cube > div:active {
cursor: pointer;
}
.hue-cube > div[data-id="1"] {
width: 600px;
height: 570px;
-webkit-transform: rotateX(90deg) translateZ(285px);
-moz-transform: rotateX(90deg) translateZ(285px);
-ms-transform: rotateX(90deg) translateZ(285px);
-o-transform: rotateX(90deg) translateZ(285px);
transform: rotateX(90deg) translateZ(285px);
}
.hue-cube > div[data-id="1"].inner {
-webkit-transform: rotateX(90deg) translateZ(284px);
-moz-transform: rotateX(90deg) translateZ(284px);
-ms-transform: rotateX(90deg) translateZ(284px);
-o-transform: rotateX(90deg) translateZ(284px);
transform: rotateX(90deg) translateZ(284px);
}
.hue-cube > div[data-id="1"] > div.hue-cube-image {
width: 600px;
height: 570px;
line-height: 975px;
}
.hue-cube > div[data-id="2"] {
width: 600px;
height: 270px;
-webkit-transform: translateZ(285px);
-moz-transform: translateZ(285px);
-ms-transform: translateZ(285px);
-o-transform: translateZ(285px);
transform: translateZ(285px);
}
.hue-cube > div[data-id="2"].inner {
-webkit-transform: translateZ(284px);
-moz-transform: translateZ(284px);
-ms-transform: translateZ(284px);
-o-transform: translateZ(284px);
transform: translateZ(284px);
}
.hue-cube > div[data-id="2"] > div.hue-cube-image {
width: 600px;
height: 270px;
line-height: 375px;
}
.hue-cube > div[data-id="3"] {
width: 570px;
height: 270px;
-webkit-transform: rotateY(90deg) translateZ(315px);
-moz-transform: rotateY(90deg) translateZ(315px);
-ms-transform: rotateY(90deg) translateZ(315px);
-o-transform: rotateY(90deg) translateZ(315px);
transform: rotateY(90deg) translateZ(315px);
}
.hue-cube > div[data-id="3"].inner {
-webkit-transform: rotateY(90deg) translateZ(314px);
-moz-transform: rotateY(90deg) translateZ(314px);
-ms-transform: rotateY(90deg) translateZ(314px);
-o-transform: rotateY(90deg) translateZ(314px);
transform: rotateY(90deg) translateZ(314px);
}
.hue-cube > div[data-id="3"] > div.hue-cube-image {
width: 570px;
height: 270px;
line-height: 375px;
}
.hue-cube > div[data-id="4"] {
width: 600px;
height: 270px;
-webkit-transform: rotateY(180deg) translateZ(285px);
-moz-transform: rotateY(180deg) translateZ(285px);
-ms-transform: rotateY(180deg) translateZ(285px);
-o-transform: rotateY(180deg) translateZ(285px);
transform: rotateY(180deg) translateZ(285px);
}
.hue-cube > div[data-id="4"].inner {
-webkit-transform: rotateY(180deg) translateZ(284px);
-moz-transform: rotateY(180deg) translateZ(284px);
-ms-transform: rotateY(180deg) translateZ(284px);
-o-transform: rotateY(180deg) translateZ(284px);
transform: rotateY(180deg) translateZ(284px);
}
.hue-cube > div[data-id="4"] > div.hue-cube-image {
width: 600px;
height: 270px;
line-height: 375px;
}
.hue-cube > div[data-id="5"] {
width: 570px;
height: 270px;
-webkit-transform: rotateY(-90deg) translateZ(285px);
-moz-transform: rotateY(-90deg) translateZ(285px);
-ms-transform: rotateY(-90deg) translateZ(285px);
-o-transform: rotateY(-90deg) translateZ(285px);
transform: rotateY(-90deg) translateZ(285px);
}
.hue-cube > div[data-id="5"].inner {
-webkit-transform: rotateY(-90deg) translateZ(284px);
-moz-transform: rotateY(-90deg) translateZ(284px);
-ms-transform: rotateY(-90deg) translateZ(284px);
-o-transform: rotateY(-90deg) translateZ(284px);
transform: rotateY(-90deg) translateZ(284px);
}
.hue-cube > div[data-id="5"] > div.hue-cube-image {
width: 570px;
height: 270px;
line-height: 375px;
}
.hue-cube > div[data-id="6"] {
width: 600px;
height: 570px;
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(-15px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(-15px);
-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(-15px);
-o-transform: rotateX(-90deg) rotate(180deg) translateZ(-15px);
transform: rotateX(-90deg) rotate(180deg) translateZ(-15px);
}
.hue-cube > div[data-id="6"].inner {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(-16px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(-16px);
-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(-16px);
-o-transform: rotateX(-90deg) rotate(180deg) translateZ(-16px);
transform: rotateX(-90deg) rotate(180deg) translateZ(-16px);
}
.hue-cube > div[data-id="6"] > div.hue-cube-image {
width: 600px;
height: 570px;
line-height: 975px;
}
object {
opacity: 0.5;
}
object:hover {
opacity: 1;
}
@media (max-width: 640px) {
.hue-viewport {
-webkit-transform: scale(0.6,0.6);
-moz-transform: scale(0.6,0.6);
-ms-transform: scale(0.6,0.6);
-o-transform: scale(0.6,0.6);
transform: scale(0.6,0.6);
}
}
.site-headerxx {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.site-branding {
display: inline-block;
height: 100%;
line-height: 1;
}
.site-branding a {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.site-branding a svg {
height: 2em;
width: auto;
}
.site-branding a svg path {
fill: white;
}
.site-branding a:hover svg path,
.site-branding a:active svg path,
.site-branding a:focus svg path {
fill: aquamarine;
}
.site-header .searchform {
position: absolute;
top: 50%;
right: 1em;
height: ;
transform: translateY(-50%);
}
.site-header .searchform .search-form-container .search-form-content input[type=text] {
background-color: #ffffff;
color: black;
}
.site-header .searchform .search-form-button svg path {
fill: white;
}
.site-header .searchform .search-form-button:hover svg path,
.site-header .searchform .search-form-button:active svg path,
.site-header .searchform .search-form-button:focus svg path {
fill: aquamarine;
}
.site-header .searchform.active .search-form-button svg path {
fill: aquamarine;
}
body.fixed-headerxx .site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99998;
}
body.fixed-headerxx .main-content {
padding-top: ;
}
ul.primary-menu li a,
ul.secondary-menu li a,
ul.footer-menu li a,
ul.mobile-menu li a {
color: white;
}
ul.primary-menu li a:hover,
ul.primary-menu li a:active,
ul.primary-menu li a:focus,
ul.secondary-menu li a:hover,
ul.secondary-menu li a:active,
ul.secondary-menu li a:focus,
ul.footer-menu li a:hover,
ul.footer-menu li a:active,
ul.footer-menu li a:focus,
ul.mobile-menu li a:hover,
ul.mobile-menu li a:active,
ul.mobile-menu li a:focus {
text-decoration: none;
}
ul.primary-menu li a:hover span,
ul.primary-menu li a:active span,
ul.primary-menu li a:focus span,
ul.secondary-menu li a:hover span,
ul.secondary-menu li a:active span,
ul.secondary-menu li a:focus span,
ul.footer-menu li a:hover span,
ul.footer-menu li a:active span,
ul.footer-menu li a:focus span,
ul.mobile-menu li a:hover span,
ul.mobile-menu li a:active span,
ul.mobile-menu li a:focus span {
color: aquamarine;
border-bottom: 1px solid aquamarine;
}
ul.primary-menu li.current-menu-item > a,
ul.primary-menu li.current-menu-ancestor > a,
ul.secondary-menu li.current-menu-item > a,
ul.secondary-menu li.current-menu-ancestor > a,
ul.footer-menu li.current-menu-item > a,
ul.footer-menu li.current-menu-ancestor > a,
ul.mobile-menu li.current-menu-item > a,
ul.mobile-menu li.current-menu-ancestor > a {
text-decoration: none;
}
ul.primary-menu li.current-menu-item > a span,
ul.primary-menu li.current-menu-ancestor > a span,
ul.secondary-menu li.current-menu-item > a span,
ul.secondary-menu li.current-menu-ancestor > a span,
ul.footer-menu li.current-menu-item > a span,
ul.footer-menu li.current-menu-ancestor > a span,
ul.mobile-menu li.current-menu-item > a span,
ul.mobile-menu li.current-menu-ancestor > a span {
color: aquamarine;
border-bottom: 1px solid aquamarine;
}
ul.primary-menu li.current-menu-item.onepager-link > a,
ul.primary-menu li.current-menu-ancestor.onepager-link > a,
ul.secondary-menu li.current-menu-item.onepager-link > a,
ul.secondary-menu li.current-menu-ancestor.onepager-link > a,
ul.footer-menu li.current-menu-item.onepager-link > a,
ul.footer-menu li.current-menu-ancestor.onepager-link > a,
ul.mobile-menu li.current-menu-item.onepager-link > a,
ul.mobile-menu li.current-menu-ancestor.onepager-link > a {
text-decoration: none;
}
ul.primary-menu li.current-menu-item.onepager-link > a span,
ul.primary-menu li.current-menu-ancestor.onepager-link > a span,
ul.secondary-menu li.current-menu-item.onepager-link > a span,
ul.secondary-menu li.current-menu-ancestor.onepager-link > a span,
ul.footer-menu li.current-menu-item.onepager-link > a span,
ul.footer-menu li.current-menu-ancestor.onepager-link > a span,
ul.mobile-menu li.current-menu-item.onepager-link > a span,
ul.mobile-menu li.current-menu-ancestor.onepager-link > a span {
border-bottom: none;
}
ul.primary-menu li.onepager-link.active > a,
ul.secondary-menu li.onepager-link.active > a,
ul.footer-menu li.onepager-link.active > a,
ul.mobile-menu li.onepager-link.active > a {
text-decoration: none;
}
ul.primary-menu li.onepager-link.active > a span,
ul.secondary-menu li.onepager-link.active > a span,
ul.footer-menu li.onepager-link.active > a span,
ul.mobile-menu li.onepager-link.active > a span {
color: aquamarine;
border-bottom: 1px solid aquamarine;
}
@media (min-width: 1025px) {
.site-menu {
display: inline-block;
height: 100%;
vertical-align: top;
}
.site-menu .menu-content {
height: 100%;
}
.primary-navigation {
height: 100%;
}
.primary-navigation > div {
top: 50%;
transform: translateY(-50%);
}
ul.primary-menu,
ul.secondary-menu,
ul.footer-menu {
z-index: 100;
}
ul.primary-menu li,
ul.secondary-menu li,
ul.footer-menu li {
display: inline-block;
z-index: 100;
}
ul.primary-menu li a,
ul.secondary-menu li a,
ul.footer-menu li a {
display: block;
white-space: nowrap;
}
ul.primary-menu li ul.sub-menu,
ul.secondary-menu li ul.sub-menu,
ul.footer-menu li ul.sub-menu {
position: absolute;
top: 100%;
left: 0;
display: none;
}
ul.primary-menu li ul.sub-menu li,
ul.secondary-menu li ul.sub-menu li,
ul.footer-menu li ul.sub-menu li {
width: 100%;
}
ul.primary-menu li ul.sub-menu ul.sub-menu,
ul.secondary-menu li ul.sub-menu ul.sub-menu,
ul.footer-menu li ul.sub-menu ul.sub-menu {
top: 0;
left: 100%;
}
ul.primary-menu li.menu-item-has-children:hover > ul.sub-menu,
ul.secondary-menu li.menu-item-has-children:hover > ul.sub-menu,
ul.footer-menu li.menu-item-has-children:hover > ul.sub-menu {
display: block;
}
ul.primary-menu,
ul.secondary-menu,
ul.footer-menu {
margin: 0 -1em;
}
ul.primary-menu li a,
ul.secondary-menu li a,
ul.footer-menu li a {
line-height: 2em;
padding: 5px 1em;
}
ul.primary-menu li a:hover,
ul.primary-menu li a:active,
ul.primary-menu li a:focus,
ul.secondary-menu li a:hover,
ul.secondary-menu li a:active,
ul.secondary-menu li a:focus,
ul.footer-menu li a:hover,
ul.footer-menu li a:active,
ul.footer-menu li a:focus {
text-decoration: none;
}
ul.primary-menu li a:hover span,
ul.primary-menu li a:active span,
ul.primary-menu li a:focus span,
ul.secondary-menu li a:hover span,
ul.secondary-menu li a:active span,
ul.secondary-menu li a:focus span,
ul.footer-menu li a:hover span,
ul.footer-menu li a:active span,
ul.footer-menu li a:focus span {
border-bottom: 1px solid ;
}
ul.primary-menu li.current-menu-item > a span,
ul.primary-menu li.current-menu-ancestor > a span,
ul.secondary-menu li.current-menu-item > a span,
ul.secondary-menu li.current-menu-ancestor > a span,
ul.footer-menu li.current-menu-item > a span,
ul.footer-menu li.current-menu-ancestor > a span {
border-bottom: 1px solid ;
}
ul.primary-menu li ul.sub-menu,
ul.secondary-menu li ul.sub-menu,
ul.footer-menu li ul.sub-menu {
background-color: black;
}
.menu-toggle,
ul.mobile-menu {
display: none !important;
}
}
@media (max-width: 1024px) {
.site-header #searchform {
display: none;
}
.menu-primary-container {
display: none;
}
.site-menu {
position: fixed;
top: ;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background-color: black;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-out;
}
.site-menu .menu-content {
height: 100%;
overflow-y: auto;
padding: 1em;
-webkit-overflow-scrolling: touch;
}
.site-menu .menu-content::-webkit-scrollbar {
width: 0.3em;
}
.site-menu .menu-content::-webkit-scrollbar-track {
background-color: grey;
}
.site-menu .menu-content::-webkit-scrollbar-thumb {
background-color: black;
}
body.menu-open .site-menu {
opacity: 1;
pointer-events: auto;
}
ul.mobile-menu {
display: block;
z-index: 100;
padding-bottom: 10px;
}
ul.mobile-menu li {
display: block;
padding: 0 10px;
}
ul.mobile-menu li a {
display: inline-block;
height: 2em;
line-height: 2em;
}
}
.menu-toggle {
position: absolute;
top: 50%;
right: 1em;
transform: translateY(-50%);
font-size: 1em;
}
.menu-toggle {
display: block;
height: 2em;
width: 2em;
padding: 0;
overflow: hidden;
text-align: center;
background-color: transparent;
border: none;
}
.menu-toggle .text {
font-size: 0;
}
.menu-toggle span {
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0.3em;
background-color: white;
transform: rotate(0deg);
transition-property: top, margin-top, transform;
transition-duration: 0.2s;
transition-timing-function: ease-out;
transition-delay: 0.2s, 0.2s, 0s;
}
.menu-toggle span.hbl1 {
top: 0;
}
.menu-toggle span.hbl2 {
top: 50%;
margin-top: -0.15em;
}
.menu-toggle span.hbl3 {
top: 100%;
margin-top: -0.3em;
}
.menu-toggle:hover,
.menu-toggle:active,
.menu-toggle:focus {
border: none;
outline: none;
background-color: transparent;
}
.menu-toggle:hover span,
.menu-toggle:active span,
.menu-toggle:focus span {
background-color: #f0ff00;
}
body.menu-open .menu-toggle span {
transition-property: top, margin-top, transform;
transition-timing-function: 0.2s;
transition-delay: 0s, 0s, 0.2s;
background-color: white;
}
body.menu-open .menu-toggle span.hbl1 {
top: 50%;
margin-top: -0.15em;
transform: rotate(45deg);
}
body.menu-open .menu-toggle span.hbl2 {
top: 50%;
margin-top: -0.15em;
transform: rotate(45deg);
}
body.menu-open .menu-toggle span.hbl3 {
top: 50%;
margin-top: -0.15em;
transform: rotate(-45deg);
}
.site-branding,
.primary-navigation {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
body {
position: relative;
width: 100%;
overflow-x: hidden;
background: #f0ff00;
-webkit-user-select: none;
user-select: none;
}
body input,
body textarea {
-webkit-user-select: auto;
user-select: auto;
}
body[data-color=yellow] {
background: #f0ff00;
}
body[data-color=yellow] .site-header.menu-open {
background: #f0ff00;
}
body[data-color=yellow] .hue-cube a:hover,
body[data-color=yellow] .hue-cube a:active,
body[data-color=yellow] .hue-cube a.active {
color: #f0ff00;
}
body[data-color=yellow] .post-nav {
background-color: #f0ff00;
}
body[data-color=green],
body.single-project {
background: #b4ff00;
}
body[data-color=green] .site-header.menu-open,
body.single-project .site-header.menu-open {
background: #b4ff00;
}
body[data-color=green] .hue-cube a:hover,
body[data-color=green] .hue-cube a:active,
body[data-color=green] .hue-cube a.active,
body.single-project .hue-cube a:hover,
body.single-project .hue-cube a:active,
body.single-project .hue-cube a.active {
color: #b4ff00;
}
body[data-color=green] .post-nav,
body.single-project .post-nav {
background-color: #b4ff00;
}
body[data-color=pink] {
background: #ff96ff;
}
body[data-color=pink] .site-header.menu-open {
background: #ff96ff;
}
body[data-color=pink] .hue-cube a:hover,
body[data-color=pink] .hue-cube a:active,
body[data-color=pink] .hue-cube a.active {
color: #ff96ff;
}
body[data-color=pink] .post-nav {
background-color: #ff96ff;
}
body[data-color=black] {
background: black;
color: white;
}
body[data-color=black] a {
color: white;
}
body[data-color=black] a:hover,
body[data-color=black] a:active,
body[data-color=black] a:focus {
color: white;
}
body[data-color=black] .site-header .lang-menu {
color: #b4ff00;
}
body[data-color=black] .site-header .cube-close .line {
background-color: white;
}
body[data-color=black] .site-header.menu-open {
background: black;
}
body[data-color=black] .hue-cube a {
color: black;
}
body[data-color=black] .hue-cube a:hover,
body[data-color=black] .hue-cube a:active,
body[data-color=black] .hue-cube a.active {
color: black;
}
body[data-color=black] .hue-cube > div {
background: #b4ff00;
}
body[data-color=black] .hue-cube > div:before {
background: #b4ff00;
}
body[data-color=black] .post-nav {
background-color: black;
}
#page {
overflow-x: hidden;
}
.print-header {
display: none;
}
#main {
overflow: visible;
opacity: 0;
transition: opacity 0.2s ease-out;
}
#main.loaded {
opacity: 1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0;
}
p {
margin-top: 0;
margin-bottom: 1em;
}
p.indent {
text-indent: 2em;
}
a {
text-decoration: none;
}
a:hover,
a:focus,
a:active,
a.active {
text-decoration: underline;
outline: none;
}
.entry-header a {
text-decoration: none;
}
.entry-header a:hover,
.entry-header a:focus,
.entry-header a:active,
.entry-header a.active {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
}
.text ul {
list-style-type: disc;
padding-left: 1.5em;
margin-bottom: 1em;
}
.text ol {
padding-left: 1.5em;
margin-bottom: 1em;
}
.text blockquote {
margin: 1em 1.5em;
}
.text .image-wrapper {
margin-bottom: 1em;
}
.text img {
width: 100%;
height: auto;
}
.text p img {
width: auto;
height: auto;
}
.text .video-wrapper,
.text .iframe-wrapper {
margin-bottom: 1em;
}
.text a {
text-decoration: underline;
}
.text.nopa p {
margin-bottom: 0;
}
hr {
border-top: 1px solid black;
}
h2.with-back-link {
padding-left: 0.9em;
}
h2.with-back-link a.back-link {
display: block;
position: absolute;
top: 0.23em;
left: 0;
width: 0.7em;
height: 0.6em;
background-image: url(https://modul5.com/101/wp-content/themes/hue/img/arrow.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transform: rotateZ(180deg) translateX(0);
transition: transform 0.2s ease-out;
}
h2.with-back-link a.back-link:hover,
h2.with-back-link a.back-link:active,
h2.with-back-link a.back-link:focus {
text-decoration: none;
transform: rotateZ(180deg) translateX(0.05em);
}
a.link-arrow {
position: relative;
white-space: nowrap;
}
a.link-arrow:after {
content: " ";
display: inline-block;
position: absolute;
top: 0.23em;
left: 100%;
width: 0.7em;
height: 0.6em;
margin-left: 0.2em;
background-image: url(https://modul5.com/101/wp-content/themes/hue/img/arrow.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transform: rotate(-45deg);
}
.text {
text-align: justify;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
a.arrow,
span.arrow {
display: block;
padding-left: 1em;
line-height: 1.2;
cursor: pointer;
}
a.arrow:before,
span.arrow:before {
content: " ";
display: block;
position: absolute;
top: 0.33em;
left: 0;
width: 0.7em;
height: 0.6em;
background-image: url(https://modul5.com/101/wp-content/themes/hue/img/arrow.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
a.arrow:hover,
a.arrow:focus,
a.arrow:active,
span.arrow:hover,
span.arrow:focus,
span.arrow:active {
text-decoration: none;
}
.part.center {
text-align: center;
}
.part.fullscreen {
height: 100vh;
height: calc(var(--vh,1vh) * 100);
}
.part.content {
margin: 2.8em 1.5em;
}
.part.content.smallm {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.part.content.smallm-top {
margin-top: 1.5em;
}
.part.content.smallm-bottom {
margin-bottom: 1.5em;
}
.part.slim {
margin: 0 1.5em;
}
.part.team {
margin-top: 0.5em;
}
.part.post-nav .top {
margin: 0.75em 1.5em;
}
.part.post-nav .bottom {
margin: 0 1.5em 1.5em;
}
.part .text:last-child > p:last-child {
margin-bottom: 0;
}
.part.shadow-left .shadow-content {
box-sizing: content-box;
width: 83.333%;
padding-left: 16.6666%;
}
.part.shadow-left .shadow-content .shadow-inner {
padding-left: 1.5em;
}
.part.shadow-left .shadow-content > * {
box-sizing: border-box;
}
.part.shadow-left .shadow {
position: absolute;
top: 0;
right: 83.333%;
height: 100%;
width: 33.3332%;
background-color: black;
}
.part.shadow-left.shadow-two .shadow-content {
width: 66.6664%;
padding-left: 33.3332%;
}
.part.shadow-left.shadow-two .shadow {
right: 66.6664%;
width: 49.9998%;
}
.part.shadow-left.shadow-three .shadow-content {
width: 49.9998%;
padding-left: 49.9998%;
}
.part.shadow-left.shadow-three .shadow {
right: 49.9998%;
width: 66.6664%;
}
.part.shadow-left.rounded-top .shadow {
border-radius: 0 9.4vw 0 0;
}
.part.shadow-left.rounded-bottom .shadow {
border-radius: 0 0 9.4vw 0;
}
.part.shadow-right .shadow-content {
box-sizing: content-box;
width: 83.333%;
padding-right: 16.6666%;
}
.part.shadow-right .shadow-content .shadow-inner {
padding-right: 1.5em;
}
.part.shadow-right .shadow-content > * {
box-sizing: border-box;
}
.part.shadow-right .shadow {
position: absolute;
top: 0;
left: 83.333%;
height: 100%;
width: 33.3332%;
background-color: black;
}
.part.shadow-right.shadow-two .shadow-content {
width: 66.6664%;
padding-right: 33.3332%;
}
.part.shadow-right.shadow-two .shadow {
left: 66.6664%;
width: 49.9998%;
}
.part.shadow-right.shadow-three .shadow-content {
width: 49.9998%;
padding-right: 49.9998%;
}
.part.shadow-right.shadow-three .shadow {
left: 49.9998%;
width: 66.6664%;
}
.part.shadow-right.rounded-top .shadow {
border-radius: 9.4vw 0 0 0;
}
.part.shadow-right.rounded-bottom .shadow {
border-radius: 0 0 0 9.4vw;
}
body.blog .site-main .part:first-child .shadow:before {
content: " ";
display: block;
position: absolute;
top: -16.6666%;
left: 0;
right: 0;
height: 33.3332%;
background-color: black;
}
.accordion .accordion-content {
height: 0;
overflow: hidden;
pointer-events: none;
}
.accordion.accordion-active {
pointer-events: auto;
}
.part.intro h3 {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.part .rect {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0%;
background-color: black;
overflow: hidden;
}
.service h3 {
padding-left: 0.75em;
padding-top: 0.1em;
padding-bottom: 0.1em;
cursor: pointer;
}
.service h3:before,
.service h3:after {
content: " ";
position: absolute;
top: 0.35em;
left: 0.5em;
width: 0.5em;
height: 0.5em;
border: 0.05em solid black;
border-radius: 50%;
}
.service h3:after {
background-color: black;
transform: scale(0);
transition: all 0.2s ease-out;
}
.service h3:hover:after,
.service h3.active:after {
transform: scale(1);
}
.post-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
.post-nav .top {
display: border-box;
}
.post-nav .top .title {
cursor: pointer;
}
.post-nav .top .reset {
position: absolute;
top: 0.8em;
line-height: 1.5em;
left: 33.3332%;
width: 7em;
}
.post-nav .bottom {
display: none;
margin: 0 1.5em 1.5em;
}
.post-nav .bottom .reset {
margin-top: 0.5em;
}
.post-nav .bottom ul {
width: 66.6666%;
}
.post-nav .bottom ul li {
padding-left: 0.85em;
padding-top: 0.1em;
padding-bottom: 0.1em;
cursor: pointer;
}
.post-nav .bottom ul li:before,
.post-nav .bottom ul li:after {
content: " ";
position: absolute;
top: 0.38em;
left: 0em;
width: 0.5em;
height: 0.5em;
border: 0.06em solid black;
border-radius: 50%;
}
.post-nav .bottom ul li:after {
background-color: black;
transform: scale(0);
transition: all 0.2s ease-out;
}
.post-nav .bottom ul li:hover:after,
.post-nav .bottom ul li.active:after {
transform: scale(1);
}
.post-nav .reset {
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
}
.post-nav:hover .bottom,
.post-nav.active .bottom {
display: block;
}
.post-nav.disable .bottom {
display: none !important;
}
.part.projects {
margin-top: 4.6em;
}
.part.projects:before,
.part.projects:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.part.projects:before,
.part.projects:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.part.projects .project {
float: left;
width: 33.33%;
}
.part.projects .project a {
display: block;
}
.part.projects .project .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 10;
background-color: #b4ff00;
transition: opacity 0.2s ease-out;
}
.part.projects .project .back .content {
display: table;
width: 100%;
height: 100%;
padding: 0.5em;
}
.part.projects .project .back .content h3 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.part.projects .project:hover .back {
opacity: 1;
}
article.request h3 {
text-align: center;
}
article.request .topics {
margin-left: 5vw;
margin-bottom: 0.8em;
}
article.request .wpcf7-form.sent .fieldset {
display: none;
}
article.request .hide-form-fields {
display: none;
}
article.request .fieldset {
margin-bottom: 2.4em;
}
article.request input[type=text],
article.request input[type=email],
article.request textarea {
line-height: 1.15;
padding: 0;
color: white;
height: 1.15em;
text-align: center;
overflow: hidden;
}
article.request input[type=text]:focus-visible,
article.request input[type=email]:focus-visible,
article.request textarea:focus-visible {
outline: none;
}
article.request .fieldset {
margin-bottom: 2em;
}
article.request .fieldset.message {
margin-bottom: 4em;
}
article.request .fieldset.message .note {
position: absolute;
top: 105%;
left: 0;
width: 100%;
text-align: center;
}
article.request .fieldset.message .wpcf7-form-control-wrap {
display: inline-block;
}
article.request .fieldset.message .wpcf7-form-control-wrap:after {
content: " ";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: white;
animation: blink 1s ease-in-out infinite;
}
article.request .fieldset.message.active {
margin-bottom: 2em;
}
article.request .fieldset.message.active .note {
display: none;
}
article.request .fieldset.message.active .wpcf7-form-control-wrap:after {
display: none;
}
article.request .fieldset.message.focus .wpcf7-form-control-wrap:after {
display: none;
}
article.request textarea {
min-height: 1.15em;
}
article.request .wpcf7-not-valid-tip {
text-align: center;
color: #b4ff00;
}
article.request .fieldset.dsgvo {
margin-bottom: 2em;
}
article.request .fieldset.dsgvo .wpcf7-form-control-wrap {
position: absolute;
}
article.request label[for=dsgvo] {
display: inline-block;
padding-left: 1.4em;
}
article.request .fieldset.submit {
text-align: center;
}
article.request input[type=submit] {
padding: 0;
line-height: 1.15;
}
article.request form .message label,
article.request form .fullname label,
article.request form .mail label {
display: none;
}
article.request .wpcf7-response-output {
border: none;
max-width: 100%;
text-align: center;
}
article.request .wpcf7-hide.hidden.title {
opacity: 0;
}
article.request .wpcf7-hide.hidden.topics {
display: none;
}
article.request .wpcf7-spinner {
display: none !important;
}
@keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.topics ul {
width: 100%;
}
.topics ul li {
padding-left: 0.85em;
padding-top: 0.1em;
padding-bottom: 0.1em;
cursor: pointer;
}
.topics ul li:before,
.topics ul li:after {
content: " ";
position: absolute;
top: 0.45em;
left: 0em;
width: 0.5em;
height: 0.5em;
border: 0.06em solid white;
border-radius: 50%;
}
.topics ul li:after {
background-color: white;
transform: scale(0);
transition: all 0.2s ease-out;
}
.topics ul li:hover:after,
.topics ul li.active:after {
transform: scale(1);
}
ul.single-category-list li {
display: block;
padding-left: 0.75em;
padding-top: 0.1em;
padding-bottom: 0.1em;
}
ul.single-category-list li:before,
ul.single-category-list li:after {
content: " ";
position: absolute;
top: 0.48em;
left: 0em;
width: 0.5em;
height: 0.5em;
border: 0.06em solid black;
border-radius: 50%;
background-color: black;
}
.contact-person h3 {
margin-bottom: 0;
}
article.post-list-entry h2 {
margin-bottom: 0.4em;
}
article .entry-content > .image-wrapper {
margin-bottom: 1em;
}
.part.team:before,
.part.team:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.part.team:before,
.part.team:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.part.team .member {
float: left;
width: 33.33%;
}
.part.team .member .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 10;
background-color: black;
color: white;
transition: opacity 0.2s ease-out;
}
.part.team .member .back .content {
display: grid;
grid-template-columns: auto;
grid-template-rows: max-content;
height: 100%;
}
.part.team .member .back .content .top {
padding: 1em 1em 0;
min-height: 10.5em;
overflow: hidden;
}
.part.team .member .back h4 {
margin-bottom: 0.1em;
}
.part.team .member .back a {
display: block;
color: white;
}
.part.team .member .back .email span {
display: inline-block;
}
.part.team .member:hover .back {
opacity: 1;
}
a.button {
max-width: 20em;
line-height: 2em;
text-align: center;
border: 1px solid black;
background-color: transparent;
color: black;
border-radius: 50%;
}
a.button:hover {
background-color: black;
color: white;
text-decoration: none;
}
.scroll-wrapper {
height: 100%;
overflow-y: auto;
padding: 1em;
-webkit-overflow-scrolling: touch;
}
.scroll-wrapper::-webkit-scrollbar {
width: 0.3em;
}
.scroll-wrapper::-webkit-scrollbar-track {
background-color: grey;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
background-color: black;
}
.row:before,
.row:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.row:before,
.row:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.row.mmar {
margin: 0 -0.5em;
}
.row.mmar .col {
padding: 0 0.5em;
}
.row .col {
float: left;
}
.row .col-25 {
width: 25%;
}
.row .col-33 {
width: 33.3333%;
}
.row .col-50 {
width: 50%;
}
.row .col-66 {
width: 66.6666%;
}
.row .col-75 {
width: 75%;
}
ul.category-list {
list-style: none;
}
ul.category-list li {
display: inline-block;
padding-right: 0.5em;
}
.image-wrapper img {
display: block;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.image-wrapper img.loaded {
opacity: 1;
}
.image-wrapper:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-wrapper .lightbox-image {
display: none;
}
.image-wrapper .image-caption {
position: absolute;
bottom: 0;
right: 0;
background-color: black;
color: white;
padding: 0.1em 0.3em;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.image-wrapper:hover .image-caption {
opacity: 1;
}
.background-image {
height: 0;
padding-bottom: 56.25%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.background-image.mobile {
display: none;
}
.video-wrapper video {
width: 100%;
height: auto;
}
.video-wrapper .video-curtain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 1;
transition: opacity 0.2s ease-out;
}
.video-wrapper .video-curtain.hidden {
opacity: 0;
pointer-events: none;
}
.video-wrapper.fullscreen {
width: 100%;
height: 100%;
overflow: hidden;
}
.video-wrapper.fullscreen video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%,-50%);
}
.audio-wrapper {
font-size: 0;
}
.audio-wrapper audio:focus {
outline: none;
}
.slideshow-wrapper {
width: 100%;
height: 0;
padding-bottom: 56%;
margin-bottom: 1em;
}
.hue-slideshow {
display: block;
width: 100%;
position: absolute !important;
top: 0;
left: 0;
height: 100%;
}
.hue-slideshow .slideshow-container {
width: 100%;
}
.hue-slideshow .slideshow-container .slide {
width: 100%;
display: none;
}
.hue-slideshow .slideshow-container .slide:first-child {
display: flex;
flex-shrink: 0;
}
.hue-slideshow .slideshow-container .slide img {
width: 100%;
height: auto;
}
.hue-slideshow .slideshow-container.flickity-enabled .slide,
.hue-slideshow .slideshow-container.slick-initialized .slide,
.hue-slideshow .slideshow-container.slideshow-initialized .slide {
display: flex;
flex-shrink: 0;
}
.hue-slideshow .slideshow-caption {
text-align: center;
margin-bottom: 1em;
}
.hue-slideshow.same-height .slideshow-container .slide {
width: auto;
height: 100%;
}
.hue-slideshow.same-height .slideshow-container .slide .image-wrapper {
height: 100%;
}
.hue-slideshow.same-height .slideshow-container .slide img {
width: auto;
height: 100%;
}
.hue-slideshow.with-mouseover {
cursor: none;
}
.hue-slideshow.with-mouseover .flickity-enabled.is-draggable .flickity-viewport {
cursor: none;
}
.hue-slideshow.with-mouseover .slideshow-display {
position: absolute;
transform: translate(-50%,-50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease-out;
white-space: nowrap;
}
.hue-slideshow.with-mouseover:hover .slideshow-display {
opacity: 1;
}
.hue-slideshow.with-mouseover .flickity-prev-next-button {
top: 0;
width: 50%;
height: 100%;
max-width: 100%;
border-radius: 0;
background-color: transparent;
-webkit-transform: none;
transform: none;
cursor: none !important;
}
.hue-slideshow.with-mouseover .flickity-prev-next-button.previous {
left: 0;
}
.hue-slideshow.with-mouseover .flickity-prev-next-button.next {
right: 0;
}
.hue-slideshow.with-mouseover .flickity-prev-next-button svg {
display: none;
}
.popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
pointer-events: none;
background-color: rgba(0,0,0,0.5);
transition: opacity 0.4s ease-out;
}
.popup-container .inner {
position: relative;
top: 50%;
left: auto;
width: 70vw;
height: 90vh;
margin: 0 auto;
transform: translateY(-50%);
background-color: white;
}
.popup-container .inner .scroll-wrapper {
padding: 0;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.popup-container .popup-content {
padding: 1em;
}
.popup-container article {
padding-top: 0;
margin-bottom: 0;
}
.popup-container.active {
opacity: 1;
pointer-events: auto;
}
.popup-container.loaded .scroll-wrapper {
opacity: 1;
}
.hue-gallery {
margin-bottom: 1em;
font-size: 0;
}
.hue-gallery ul {
width: 100%;
}
.hue-gallery ul li {
display: block;
float: left;
width: 33%;
}
.hue-gallery ul li img {
width: 100%;
height: auto;
}
.hue-gallery ul:before,
.hue-gallery ul:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.hue-gallery ul:before,
.hue-gallery ul:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.hue-map {
margin-bottom: 1em;
}
.iframe-wrapper {
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.grid-container {
margin: 0 -10px;
}
.grid-container:before,
.grid-container:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.grid-container:before,
.grid-container:after {
content: "\0020";
display: table;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
.grid-container .grid-element {
float: left;
width: 33.3333%;
padding: 10px;
}
.back-button {
position: absolute;
top: 1em;
right: 0;
z-index: 10;
display: none;
}
.navigation .nav-links {
text-align: center;
}
.navigation .nav-links .page-numbers {
display: inline-block;
padding: 0 0.1em;
}
.navigation .nav-links .page-numbers.current {
text-decoration: underline;
}
.navigation .nav-links .page-numbers.prev {
width: 0.7em;
height: 0.6em;
background-image: url(https://modul5.com/101/wp-content/themes/hue/img/arrow.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transform: rotate(180deg);
text-decoration: none !important;
}
.navigation .nav-links .page-numbers.next {
width: 0.7em;
height: 0.6em;
background-image: url(https://modul5.com/101/wp-content/themes/hue/img/arrow.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
text-decoration: none !important;
}
.system-message {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
pointer-events: none;
}
.system-message .message {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
transform: translate(-50%,-50%);
opacity: 0;
transition: opacity 0.2s ease-out;
padding: 20px 40px;
background-color: white;
}
.system-message .message.active {
opacity: 1;
}
.progressbar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 1px;
background-color: black;
z-index: 99999;
pointer-events: none;
opacity: 1;
transition: opacity 0.2s ease-out;
}
.progressbar.hidden {
opacity: 0;
}
body.loading .page-loader {
opacity: 1;
}
.page-loader {
opacity: 0;
pointer-events: none !important;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
transition: opacity 0.2s ease-out;
}
.page-loader .page-loader-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.page-loader .square {
display: inline-block;
margin: 2.3vw;
width: 10vw;
height: 4.74vw;
background-color: black;
animation: rotateRect 3s ease-in-out infinite;
}
.page-loader .square.two {
animation-delay: 1s;
}
.page-loader .square.three {
animation-delay: 2s;
}
@keyframes rotateRect {
0% {
transform: rotate(0);
}
33% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateCube {
0% {
transform: rotateX(160deg) rotateY(0deg);
}
100% {
transform: rotateX(160deg) rotateY(360deg);
}
}
.viewport-detector {
position: fixed;
z-index: 4;
bottom: 0;
left: 99999;
height: 0;
}
.viewport-detector .em-size {
line-height: 1;
}
@media screen and (max-width: 1200px) {
.viewport-detector {
z-index: 3;
}
}
@media screen and (max-width: 1024px) {
.viewport-detector {
z-index: 2;
}
}
@media screen and (max-width: 767px) {
.viewport-detector {
z-index: 1;
}
}
@media screen and (max-width: 511px) {
.viewport-detector {
z-index: 0;
}
}
@media screen and (min-width: 1700px) {
body {
font-size: 16px;
font-size: 1.6rem;
font-size: 1.256vw;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 16px;
font-size: 1.6rem;
}
h2 {
font-size: 56px;
font-size: 5.6rem;
font-size: 4.376vw;
}
body.error404 h2 {
font-size: 112px;
font-size: 11.2rem;
font-size: 8.752vw;
}
h3 {
font-size: 112px;
font-size: 11.2rem;
font-size: 8.752vw;
}
body.home h3 {
font-size: 128px;
font-size: 12.8rem;
font-size: 10vw;
}
body.services h3,
body.leistungen h3,
.nav-links,
body.request h3,
body.anfrage h3,
.send-email,
.wpcf7-response-output {
font-size: 56px;
font-size: 5.6rem;
font-size: 4.376vw;
}
body.projects h3,
body.projekte h3 {
font-size: 32px;
font-size: 3.2rem;
font-size: 2.504vw;
}
.lang-menu span,
.category-nav .title,
.single-category-list,
.single-extra,
.topics,
input[name=dsgvo],
label[for=dsgvo] {
font-size: 40px;
font-size: 4rem;
font-size: 3.128vw;
}
.category-nav li,
.wpcf7-not-valid-tip,
.fieldset.message .note {
font-size: 28px;
font-size: 2.8rem;
font-size: 2.192vw;
}
.image-wrapper .image-caption {
font-size: 0.64em;
}
.text.small {
font-size: 24px;
font-size: 2.4rem;
font-size: 1.64vw;
}
.text.medium {
font-size: 28px;
font-size: 2.8rem;
font-size: 2.192vw;
}
.text.large {
font-size: 32px;
font-size: 3.2rem;
font-size: 2.504vw;
}
.text.extra {
font-size: 40px;
font-size: 4rem;
font-size: 3.128vw;
}
.text.huge {
font-size: 56px;
font-size: 5.6rem;
font-size: 4.376vw;
}
.contact-person h3 {
font-size: 32px;
font-size: 3.2rem;
font-size: 2.504vw;
}
.member h4 {
font-size: 40px;
font-size: 4rem;
font-size: 3.128vw;
}
.member .role,
.member .email,
.member .phone {
font-size: 28px;
font-size: 2.8rem;
font-size: 2.192vw;
}
article.post .date,
article.post .read-more {
font-size: 28px;
font-size: 2.8rem;
font-size: 2.192vw;
}
label {
font-size: 56px;
font-size: 5.6rem;
font-size: 4.376vw;
}
input,
select,
button,
textarea {
font-size: 56px;
font-size: 5.6rem;
font-size: 4.376vw;
}
a.button {
font-size: 32px;
font-size: 3.2rem;
font-size: 2.504vw;
}
.site-header {
right: 10%;
}
.site-header.menu-open {
width: 80%;
}
#page {
padding: 0 10%;
}
#page:before,
#page:after {
content: " ";
display: block;
position: absolute;
top: -5%;
height: 110%;
width: 15%;
background-color: black;
}
#page:before {
left: -5%;
}
#page:after {
right: -5%;
}
.post-nav {
left: 10%;
width: 80%;
}
.part.slim.team {
margin: 0;
}
}
@media screen and (max-width: 1150px) {
body {
font-size: 18px;
}
}
@media screen and (max-width: 1024px) {
.site-header .lang-menu {
top: 1.3em;
}
.lang-menu span {
font-size: 2em;
}
.image-wrapper .image-caption {
opacity: 1;
}
.site-header {
width: 10em;
height: 6.66em;
}
#hue-cube-wrapper {
top: 2.5em;
right: 4.4em;
}
.hue-viewport {
-webkit-transform: scale(0.2,0.2);
-moz-transform: scale(0.2,0.2);
-ms-transform: scale(0.2,0.2);
-o-transform: scale(0.2,0.2);
transform: scale(0.2,0.2);
}
.site-header.menu-open .hue-viewport {
-webkit-transform: scale(0.7,0.7);
-moz-transform: scale(0.7,0.7);
-ms-transform: scale(0.7,0.7);
-o-transform: scale(0.7,0.7);
transform: scale(0.7,0.7);
}
.hue-cube {
top: -79px;
left: -200px;
}
.text.small {
font-size: 18px;
}
.post-nav {
height: 4em;
}
.post-nav:hover .bottom {
display: none;
}
.post-nav.active {
height: auto;
}
.post-nav.active .top:after {
content: " ";
display: block;
position: absolute;
top: -10vh;
left: -10vw;
width: 120%;
height: 120vh;
}
.post-nav.active .bottom {
display: block;
}
.part.projects {
margin-top: 4em;
}
.category-nav .title {
font-size: 2em;
}
.post-nav .top .reset {
top: 0.7em;
}
.part.projects .project .back {
position: absolute;
top: auto;
bottom: 0;
height: auto;
background-color: black;
color: white;
opacity: 1;
}
.part.team .member .back .content .top {
min-height: 9.5em;
}
.part.team .member .back:hover {
opacity: 0;
}
.part.team .member.active .back {
opacity: 1;
}
.member .scroll-wrapper {
padding: 0.5em 1em 1em;
}
.hue-slideshow {
margin-left: -1em;
margin-right: -1em;
}
.hue-slideshow .slideshow-display {
display: none;
}
.hue-slideshow .slick-arrow {
display: none !important;
}
.hue-slideshow .flickity-prev-next-button {
display: none !important;
}
}
@media screen and (max-width: 900px) {
.part.team .member {
width: 50%;
}
}
@media screen and (max-width: 767px) {
.text.medium,
article.post .date,
article.post .read-more {
font-size: 20px;
}
.category-nav li,
.wpcf7-not-valid-tip,
.fieldset.message .note {
font-size: 18px;
}
body.projects h3,
body.projekte h3 {
font-size: 1.6em;
}
.contact-person h3,
.contact-person p {
font-size: 20px;
}
.member .role,
.member .email,
.member .phone {
font-size: 20px;
}
.site-header.menu-open .hue-viewport {
-webkit-transform: scale(0.5,0.5);
-moz-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
}
.part.shadow-left .shadow-content {
width: 91.6663%;
padding-left: 8.3333%;
}
.part.shadow-left .shadow {
right: 91.6663%;
width: 16.6666%;
}
.part.shadow-left.shadow-two .shadow-content {
width: 83.333%;
padding-left: 16.6666%;
}
.part.shadow-left.shadow-two .shadow {
right: 83.333%;
width: 24.9999%;
}
.part.shadow-left.shadow-three .shadow-content {
width: 74.9997%;
padding-left: 24.9999%;
}
.part.shadow-left.shadow-three .shadow {
right: 74.9997%;
width: 33.3332%;
}
.part.shadow-left.rounded-top .shadow {
border-radius: 0 4.7vw 0 0;
}
.part.shadow-left.rounded-bottom .shadow {
border-radius: 0 0 4.7vw 0;
}
.part.shadow-right .shadow-content {
width: 91.6663%;
padding-right: 8.3333%;
}
.part.shadow-right .shadow {
left: 91.6663%;
width: 16.6666%;
}
.part.shadow-right.shadow-two .shadow-content {
width: 83.333%;
padding-right: 16.6666%;
}
.part.shadow-right.shadow-two .shadow {
left: 83.333%;
width: 24.9999%;
}
.part.shadow-right.shadow-three .shadow-content {
width: 74.9997%;
padding-right: 24.9999%;
}
.part.shadow-right.shadow-three .shadow {
left: 74.9997%;
width: 33.3332%;
}
.part.shadow-right.rounded-top .shadow {
border-radius: 4.7vw 0 0 0;
}
.part.shadow-right.rounded-bottom .shadow {
border-radius: 0 0 0 4.7vw;
}
body.blog .site-main .part:first-child .shadow:before {
top: -16.6666%;
height: 24.9999%;
}
.part.fullscreen {
height: 70vh;
height: calc(var(--vh,1vh) * 70);
}
.part.projects .project {
width: 50%;
}
.part.team .member .back .content .top {
min-height: 6.5em;
}
article.request label[for=dsgvo] {
padding-left: 1.8em;
}
}
@media screen and (max-width: 600px) {
h2 {
font-size: 28px;
}
.text.large,
a.button {
font-size: 18px;
}
.text.huge {
font-size: 25px;
}
.member h4 {
font-size: 25px;
}
.part.projects .project {
width: 100%;
}
.part.slim h3 {
margin-bottom: 0.2em;
}
.service .part.slim h3 {
margin-bottom: 0;
}
.part.team .member {
width: 100%;
}
}
@media screen and (max-width: 511px) {
article.request .entry-title {
text-align: left;
padding-left: 0.9em;
}
#post-18 .part.title h3,
#post-18 .part.slim h3 {
font-size: 26px;
}
.part.slim h3 {
font-size: 24px;
}
.part.title h3 {
font-size: 24px;
}
.text.extra {
font-size: 18px;
}
a.button {
font-size: 16px;
}
.category-nav .title,
.single-category-list,
.single-extra,
.topics,
input[name=dsgvo],
label[for=dsgvo] {
font-size: 20px;
}
body.projects h3,
body.projekte h3 {
font-size: 1.5em;
}
.site-header {
width: 9em;
height: 4.5em;
}
#hue-cube-wrapper {
top: 2em;
right: 3.7em;
width: 9em;
height: 4.5em;
}
.hue-viewport {
-webkit-transform: scale(0.15,0.15);
-moz-transform: scale(0.15,0.15);
-ms-transform: scale(0.15,0.15);
-o-transform: scale(0.15,0.15);
transform: scale(0.15,0.15);
}
.site-header.menu-open .hue-viewport {
-webkit-transform: scale(0.35,0.35);
-moz-transform: scale(0.35,0.35);
-ms-transform: scale(0.35,0.35);
-o-transform: scale(0.35,0.35);
transform: scale(0.35,0.35);
}
.hue-cube {
top: -79px;
left: -231px;
}
.part.content {
margin: 1.4em 0.75em;
}
.part.slim {
margin: 0 0.75em;
}
.part.shadow-left .shadow-content .shadow-inner {
padding-left: 0.75em;
}
.part.shadow-right .shadow-content .shadow-inner {
padding-right: 0.75em;
}
.part.shadow-left .shadow-content {
width: 95.8295%;
padding-left: 4.1665%;
}
.part.shadow-left .shadow {
right: 95.8295%;
width: 12.4995%;
}
.part.shadow-left.shadow-two .shadow-content {
width: 87.4965%;
padding-left: 12.4995%;
}
.part.shadow-left.shadow-two .shadow {
right: 87.4965%;
width: 20.8325%;
}
.part.shadow-left.shadow-three .shadow-content {
width: 83.33%;
padding-left: 16.666%;
}
.part.shadow-left.shadow-three .shadow {
right: 83.33%;
width: 24.999%;
}
.part.shadow-left.rounded-top .shadow {
border-radius: 0 4.7vw 0 0;
}
.part.shadow-left.rounded-bottom .shadow {
border-radius: 0 0 4.7vw 0;
}
.part.shadow-right .shadow-content {
width: 95.8295%;
padding-right: 4.1665%;
}
.part.shadow-right .shadow {
left: 95.8295%;
width: 12.4995%;
}
.part.shadow-right.shadow-two .shadow-content {
width: 87.4965%;
padding-right: 12.4995%;
}
.part.shadow-right.shadow-two .shadow {
left: 87.4965%;
width: 20.8325%;
}
.part.shadow-right.shadow-three .shadow-content {
width: 83.33%;
padding-right: 16.666%;
}
.part.shadow-right.shadow-three .shadow {
left: 83.33%;
width: 24.999%;
}
.part.shadow-right.rounded-top .shadow {
border-radius: 4.7vw 0 0 0;
}
.part.shadow-right.rounded-bottom .shadow {
border-radius: 0 0 0 4.7vw;
}
body.blog .site-main .part:first-child .shadow:before {
top: -16.6666%;
height: 24.9999%;
}
.entry-header {
padding-right: 8em;
}
.post-nav {
height: 2.9em;
}
.category-nav .top .reset {
display: none;
}
.part.post-nav .bottom {
margin: 0 1.5em 1em;
}
.part.projects {
margin-top: 2.9em;
}
.post-nav .top .reset {
top: 0;
}
.post-nav .bottom ul {
width: 100%;
}
.row .col-66 {
width: 100%;
margin-bottom: 1em;
}
.row .col-33 {
width: 100%;
}
}
div.wpcf7 span.wpcf7-not-valid-tip {
margin-top: 0.2em;
}
div.wpcf7 input[type=submit] {
display: inline-block;
}
div.wpcf7 .wpcf7-spinner {
display: inline-block;
top: 0.1em;
width: 1.8em;
height: 1.8em;
vertical-align: top;
background-color: transparent;
opacity: 1;
margin: 0 0 0 1em;
}
div.wpcf7 .wpcf7-spinner:before {
display: block;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
border: 2px solid #000;
border-color: #000 transparent #000 transparent;
animation: lds-dual-ring 1.2s linear infinite;
top: 0;
left: 0;
transform-origin: center center;
background-color: transparent;
}
div.wpcf7 div.wpcf7-response-output {
max-width: 20em;
margin: 1em 0;
padding: 0.4em;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.lang-menu .active {
display: none;
}
.lang-menu a:hover,
.lang-menu a:active,
.lang-menu a:focus {
text-decoration: none;
}
@font-face {
font-family: 'swiper-icons';
src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
font-weight: 400;
font-style: normal;
}
.hue-slideshow {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.hue-slideshow-vertical > .slideshow-container {
flex-direction: column;
}
.slideshow-container {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.hue-slideshow-android .swiper-slide,
.slideshow-container {
transform: translate3d(0px,0,0);
}
.hue-slideshow-multirow > .slideshow-container {
flex-wrap: wrap;
}
.hue-slideshow-multirow-column > .slideshow-container {
flex-wrap: wrap;
flex-direction: column;
}
.hue-slideshow-free-mode > .slideshow-container {
transition-timing-function: ease-out;
margin: 0 auto;
}
.hue-slideshow-pointer-events {
touch-action: pan-y;
}
.hue-slideshow-pointer-events.hue-slideshow-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
.hue-slideshow-autoheight,
.hue-slideshow-autoheight .swiper-slide {
height: auto;
}
.hue-slideshow-autoheight .slideshow-container {
align-items: flex-start;
transition-property: transform, height;
}
.hue-slideshow-3d {
perspective: 1200px;
}
.hue-slideshow-3d .slideshow-container,
.hue-slideshow-3d .swiper-slide,
.hue-slideshow-3d .swiper-slide-shadow-left,
.hue-slideshow-3d .swiper-slide-shadow-right,
.hue-slideshow-3d .swiper-slide-shadow-top,
.hue-slideshow-3d .swiper-slide-shadow-bottom,
.hue-slideshow-3d .swiper-cube-shadow {
transform-style: preserve-3d;
}
.hue-slideshow-3d .swiper-slide-shadow-left,
.hue-slideshow-3d .swiper-slide-shadow-right,
.hue-slideshow-3d .swiper-slide-shadow-top,
.hue-slideshow-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.hue-slideshow-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left,rgba(0,0,0,0.5),rgba(0,0,0,0));
}
.hue-slideshow-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0));
}
.hue-slideshow-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));
}
.hue-slideshow-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));
}
.hue-slideshow-css-mode > .slideshow-container {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hue-slideshow-css-mode > .slideshow-container::-webkit-scrollbar {
display: none;
}
.hue-slideshow-css-mode > .slideshow-container > .swiper-slide {
scroll-snap-align: start start;
}
.hue-slideshow-horizontal.hue-slideshow-css-mode > .slideshow-container {
scroll-snap-type: x mandatory;
}
.hue-slideshow-vertical.hue-slideshow-css-mode > .slideshow-container {
scroll-snap-type: y mandatory;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
font-size: 44px;
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev,
.hue-slideshow-rtl .swiper-button-next {
left: 10px;
right: auto;
}
.swiper-button-prev:after,
.hue-slideshow-rtl .swiper-button-next:after {
content: 'prev';
}
.swiper-button-next,
.hue-slideshow-rtl .swiper-button-prev {
right: 10px;
left: auto;
}
.swiper-button-next:after,
.hue-slideshow-rtl .swiper-button-prev:after {
content: 'next';
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
color: #000000;
}
.swiper-button-lock {
display: none;
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0,0,0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.hue-slideshow-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: white;
}
.hue-slideshow-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px,-50%,0);
}
.hue-slideshow-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.hue-slideshow-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.hue-slideshow-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
.hue-slideshow-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
.hue-slideshow-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.hue-slideshow-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
.hue-slideshow-horizontal.hue-slideshow-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
.swiper-pagination-progressbar {
background: rgba(0,0,0,0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: white;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.hue-slideshow-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.hue-slideshow-horizontal > .swiper-pagination-progressbar,
.hue-slideshow-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.hue-slideshow-vertical > .swiper-pagination-progressbar,
.hue-slideshow-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-white {
color: #ffffff;
}
.swiper-pagination-black {
color: #000000;
}
.swiper-pagination-lock {
display: none;
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0,0,0,0.1);
}
.hue-slideshow-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.hue-slideshow-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0,0,0,0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
animation: swiper-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid white;
border-radius: 50%;
border-top-color: transparent;
}
.swiper-lazy-preloader-white {
color: #fff;
}
.swiper-lazy-preloader-black {
color: #000;
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
.hue-slideshow .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.hue-slideshow-fade.hue-slideshow-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.hue-slideshow-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.hue-slideshow-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.hue-slideshow-fade .swiper-slide-active,
.hue-slideshow-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.hue-slideshow-flip {
overflow: visible;
}
.hue-slideshow-flip .swiper-slide {
pointer-events: none;
backface-visibility: hidden;
z-index: 1;
}
.hue-slideshow-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.hue-slideshow-flip .swiper-slide-active,
.hue-slideshow-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.hue-slideshow-flip .swiper-slide-shadow-top,
.hue-slideshow-flip .swiper-slide-shadow-bottom,
.hue-slideshow-flip .swiper-slide-shadow-left,
.hue-slideshow-flip .swiper-slide-shadow-right {
z-index: 0;
backface-visibility: hidden;
}
.hue-slideshow-cube {
overflow: visible;
}
.hue-slideshow-cube .swiper-slide {
pointer-events: none;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.hue-slideshow-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.hue-slideshow-cube.hue-slideshow-rtl .swiper-slide {
transform-origin: 100% 0;
}
.hue-slideshow-cube .swiper-slide-active,
.hue-slideshow-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.hue-slideshow-cube .swiper-slide-active,
.hue-slideshow-cube .swiper-slide-next,
.hue-slideshow-cube .swiper-slide-prev,
.hue-slideshow-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.hue-slideshow-cube .swiper-slide-shadow-top,
.hue-slideshow-cube .swiper-slide-shadow-bottom,
.hue-slideshow-cube .swiper-slide-shadow-left,
.hue-slideshow-cube .swiper-slide-shadow-right {
z-index: 0;
backface-visibility: hidden;
}
.hue-slideshow-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
z-index: 0;
}
.hue-slideshow-cube .swiper-cube-shadow:before {
content: '';
background: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
-webkit-filter: blur(50px);
filter: blur(50px);
}