html, body {
}
img{
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges!important;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("../fonts/Inter-Thin.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-Thin.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("../fonts/Inter-ThinItalic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-ThinItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("../fonts/Inter-ExtraLight.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-ExtraLight.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("../fonts/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/Inter-Light.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-Light.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("../fonts/Inter-LightItalic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-LightItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/Inter-Regular.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-Regular.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/Inter-Italic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-Italic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/Inter-Medium.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-Medium.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-MediumItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-SemiBold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("../fonts/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/Inter-Bold.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-Bold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("../fonts/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-BoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/Inter-ExtraBold.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-ExtraBold.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("../fonts/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("../fonts/Inter-Black.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-Black.woff?v=3.19") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("../fonts/Inter-BlackItalic.woff2?v=3.19") format("woff2"),
url("../fonts/Inter-BlackItalic.woff?v=3.19") format("woff");
}
/* -------------------------------------------------------
Variable font.
Usage:
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
*/
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("../fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url("../fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
}
#work, #about, #contact {
scroll-margin-top: 90px;
}
/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.
Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.
When using this, you will probably need to set font-variation-settings
explicitly, e.g.
* { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg }
*/
@font-face {
font-family: 'Inter var experimental';
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url("../fonts/Inter.var.woff2?v=3.19") format("woff2");
}
body {
font-family: 'Inter';
background-color: #1b222d;
}
.fullpagewrapper{
background-color: #1b222d;
transition: background-color 0.8s linear;
display: block;
position: relative;
width: 100%;
min-height: 100vh;
z-index: 9;
box-sizing: border-box;
box-shadow: 0px 6px 18px 2px #000000;
}
#cookieNotice{
border-top: 3px solid #fff;
animation-delay: 10s!important;
opacity: 0;
animation: slideInFromBottom 0.6s linear normal;
animation-fill-mode: forwards;
}
@keyframes slideInFromBottom {
0% { transform: translateY(40px); opacity: 0; }
100% { transform: translateY(0px); opacity: 1;}
}
#sound {
/* background-color: #ffffff!important;*/
font-size: small;
cursor: pointer;
width: 30px;
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
text-align: center;
display: inline-block;
}
#sound.mute{/*
background-color: #ffffff!important;*/
}
.mutebutton.mute #x1, .mutebutton.mute #x2 {
fill:none;
stroke:white;
pointer-events: none;
transition: ease 2s;
stroke-width:6.25px;
}
.mutebutton.mute #_1,.mutebutton.mute #_2, .mutebutton.mute #_3, .mutebutton.mute #_4, .mutebutton.mute #_5 {
fill:none;
stroke: #ff232300;
stroke-width:1px;
}
.mutebutton #x1, .mutebutton #x2 {
fill:none;
pointer-events: none;
transition: ease 2s;
stroke: #ff232300;
stroke-width:1px;
}
/*.mutebutton SVG #_1 {
fill:none;
stroke:white;
transition: ease 0.2s;
animation: fadeInandOut 1.1s forwards;
animation-delay: 1s;
}*/
/*cursor*/
.nicecontent {
top: 0;
left: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
z-index: 99;
mix-blend-mode: screen;
}
.nicecontent h1 {
font-size: 100px;
font-weight: 700;
color: #000;
margin: 0;
}
@media (min-width: 419px) {
.nicecontent h1 {
font-size: 60px;
font-size: calc((0.0989119683 * 7vw + (58.5558852621px)));
}
}
@media (min-width: 1430px) {
.nicecontent h1 {
font-size: 120px;
}
}
/* mousecursor followerbee */
.hidecursor, .color-red .cursorwrapper, .color-yellow .cursorwrapper, .color-darkblue .cursorwrapper {
visibility: hidden;
opacity: 0!important;
transition: visibility 0s 9999s, opacity 0.3s linear;
transform: scale3d(0.4, 0.4, 0.4);
}
.showcursor {
visibility: visible!important;
opacity: 1!important;
transition: 0.5s linear;
transform: scale3d(1,1,1)!important;
}
.left {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
transition: transform .3s
}
.right {
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
filter: FlipH;
-ms-filter: "FlipH";
transition: transform .3s
}
#bee {
transition: transform .3s;
pointer-events:none;
z-index: 999999;
}
/*#bee img{
position: absolute;
left: -72px;
top: -30px;
height: 70px;
}*/
.ufo{
transition: transform .2s;
font-size: 200px;
color: orange;
}
.hue p{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
/* mousercursorfoller bee ende */
/*cursorende*/
.mutebutton #_2 {
fill:none;
stroke:white;
transition: ease 0.4s;
stroke-width:6.25px;
}
.mutebutton #_3{
fill:none;
stroke:white;
transition: ease 0.8s;
stroke-width:6.25px;
}
.mutebutton #_4 {
fill:none;
stroke:white;
transition: ease 1s;
stroke-width:6.25px;
}
/*.mutebutton SVG #_5 {
fill:none;
stroke:white;
}
*/
/*#sound .mute::after{
content:'asd';
position: absolute;
background-color: #f7f7f7;
}*/
.px-3half{
padding-left: 1.25rem!important;
padding-right: 1.25rem!important;
}
.learn-more, .learn-more:active, .learn-more:hover{
color: #fff!important;
text-decoration: underline!important;
font-size: 12px;
}
.confirm, .confirm a{
border-radius:3px;
font-size: 12px;
}
a.confirm:active, a.confirm:hover{
color: #fff!important;
border-radius:3px;
}
/* colours */
.color-violet {
background-color: #7A4EAB!important;
}
.color-indigo {
background-color: #4332CF!important;
}
.color-orange {
background-color: #8f3f03!important;
}
.color-white {
background-color: #fff!important;
}
/* unsere farben aktive */
.color-blue, .color-blue .blurblur, .color-blue .staticblur, .color-blue .plyr__control--overlaid{
background-color: #000118!important;
}
.color-blue .navbar-dark .navbar-nav .nav-link.active {
color:#000118!important;
}
.color-green, .color-green .blurblur, .color-green .staticblur, .color-green .plyr__control--overlaid{
background-color: #389c30!important;
}
.color-green .navbar-dark .navbar-nav .nav-link.active {
color:#389c30!important;
}
.color-yellow, .color-yellow .blurblur, .color-yellow .staticblur, .color-yellow .staticblur{
background-color: #261b2d!important;
}
.color-yellow .navbar-dark .navbar-nav .nav-link.active {
color:#261b2d!important;
}
.color-red, .color-red .blurblur, .color-red .staticblur, .color-red .plyr__control--overlaid{
background-color: #2d1b22!important;/*
background-color: #85121d!important*/
}
.color-red .navbar-dark .navbar-nav .nav-link.active {
color:#2d1b22!important;/*
color:#85121d!important;*/
}
/* unsere farben passive */
.color-bluegrey, .color-bluegrey .blurblur, .color-bluegrey .staticblur, .color-bluegrey .swiper-scrollbar-drag {
background-color: #27272d!important;
}
.color-bluegrey .navbar-dark .navbar-nav .nav-link.active {
color:#27272d!important;
}
.color-cool, .color-cool .blurblur, .color-cool .staticblur, .color-cool .swiper-scrollbar-drag {
background-color: #507462!important;
}
.color-cool .navbar-dark .navbar-nav .nav-link.active {
color:#507462!important;
}
.color-red .bande .ml16{
-webkit-text-stroke-color: #bb404b!important;
-webkit-text-stroke-width: 2px!important;
}
.color-undefined .bande .ml16, .color-darkblue .bande .ml16{
-webkit-text-stroke-color: #1b222d!important;
-webkit-text-stroke-width: 2px!important;
}
.color-darkblue, .color-darkblue .blurblur, .color-darkblue .plyr__control--overlaid{
background-color: #1b222d!important;
}
.color-darkgreen, .color-darkgreen .blurblur, .color-darkgreen .plyr__control--overlaid{
background-color: #0E1211!important;
}
.color-darkpurple, .color-darkpurple .blurblur, .color-darkpurple .plyr__control--overlaid{
background-color: #4B4261!important;
}
.color-darkblue .navbar-dark .navbar-nav .nav-link.active {
color:#1b222d!important;
}
.color-lightblue, .color-lightblue .blurblur, .color-lightblue .plyr__control--overlaid{
background-color: #395c7e!important;
}
.color-lightblue .navbar-dark .navbar-nav .nav-link.active {
color:#395c7e!important;
}
.color-white h1, .color-white h3, .color-white h2, .color-white p, .color-white a, #projectpage.color-white p, .color-white .nav-item a {
color: #000!important;
}
.color-white .logowhite_v2_small{
filter: invert(1);
}
.color-white .blurblur{
border-bottom: 3px solid #000000!important;
background-color: #fff!important;
}
.color-steulared, .color-steulared .blurblur{
background-color: #DB5663!important;
}
.color-steulagreen{
background-color: #5AA985!important;
}
.color-gradient{
background-color: #f3f39be0;
position: absolute;
background: rgb(141,137,182);
background: -moz-radial-gradient(circle, rgba(141,137,182,0.4) 0%, rgba(23,18,88,0.8183648459383753) 100%);
background: -webkit-radial-gradient(circle, rgba(141,137,182,0.4) 0%, rgba(23,18,88,0.8183648459383753) 100%);
background: radial-gradient(circle, rgba(141,137,182,0.4) 0%, rgba(23,18,88,0.8183648459383753) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8d89b6",endColorstr="#171258",GradientType=1);
}
.blurblur, .staticblur{
border-bottom: 3px solid white!important;
background-color: #1b222d!important;
transition: background-color 0.8s ease-in-out;
}
/*
#footer {
border-top: 3px solid #fff;
}
*/
.positioning-e2 {
position: relative;
width: 100%;
height: 10rem;
text-align: center;
color: #fff;
}
.positioning-e3 {
display: inline-block;
font-size: 10rem;
white-space: nowrap;
}
@media (max-width:737px) {
.positioning-e2 {
height: 5rem;
}
.positioning-e3 {
font-size: 5rem;
}
}
.mainnav_v2 .navibar a h1{
color: #000!important;
}
.blurblur.mainnav_v2 .navibar a h1{
color: #fbfbfb!important;
}
::selection {
background: #ccc; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ccc; /* Gecko Browsers */
}
.blacktext{
color: #000!important;
}
a, p, b, dd, dt, ul, ol, li, tr, td, th{
margin-top: 0;
font-weight: 400;
color: #fbfbfb!important;/*
margin-bottom: .5rem;*/
}
a, a:hover, a:active, p, b, dd, dt, ul, ol, li, tr, td, th, #about a, #work a, .project-headline, .subbutton{
color: #fff!important;
font-family: 'Inter', serif!important;
font-weight: 500;
line-height: 1.4;
text-decoration: none!important;
font-size: clamp(1rem,calc(1.1rem + ((1vw - 14.4px) * .8333333333)),2.8rem);
}
b, strong {
font-weight: bolder!important;
letter-spacing: 0.05rem;
}
.h2, h2, .h3, h3 {
text-decoration: none;
font-family: 'Inter';
color: #fff;
font-weight: normal;
font-weight: 500;
}
.card-body, #projectpage .card-body p, .card-header, #projectpage p small, small, .previewtext p, .previewtext a{
font-size: 0.85rem!important;
line-height: inherit;
}
.superbiglogo{
transform: scale(0.2);
transform-origin:bottom;
transition: ease 0.95s;
}
.makesomething {
transition: ease 0.95s;
transform: scale(1);
}
.content a, #footer .footerlink {
text-decoration: underline!important;
text-underline-offset: 0.05em!important;
}
.link-underline-primary{
text-decoration: underline!important;
}
a:hover, a:active, h1 a:hover, h1 a:active, {
text-decoration: none!important;
color: #a91321;
}
.aboutcontent .arrow-links a{
text-decoration: none!important;
}
a.nav-link, .work-preview-wrapper h2{
transition: .25s ease;
position: relative;
display: block;
margin-bottom: 0!important;
margin-top: 0.25rem;
}
a.nav-link .active, .work-preview-wrapper:hover h2 {
position: relative;
display: block;
transition: .25s ease;
}
.bg-primary {
background-color: #374452!important;
}
.project-headline {
text-transform: uppercase;
}
.previewtext p{
line-height: 1.5!important;
}
.projecttext {
column-count: 2;
column-gap: 2rem;
/* column-rule-style: solid;
column-rule-color: white;*/
column-fill: balance;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
page-break-inside: avoid;
}
.projecttext p{
}
/*.projecttext p:first-child, .projecttext .paragraph {
margin-bottom: 0;
text-indent: 0rem;
}.projecttext p {
margin-bottom: 0;
text-indent: 2rem;
}
*/
.work-preview .embed-responsive, .work-preview-big .embed-responsive{
/* border: 3px solid #fff;*/
transform: scale3d(1, 1, 1);
}
.work-preview-big:hover .readmore:before, .item:hover .work-preview .readmore span:before{
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.2s;
width: 16px;
opacity: 1;
margin-top: 0px;
}
.work-preview-big .readmore:before, .item .work-preview .readmore span:before{
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.2s;
width: 0px;
opacity: 0;
}
.work-preview-big:hover .readmore:before {
width: 22px!important;
}
.work-preview-inner{
background-position: center center;
transform: scale3d(1, 1, 1);
transition: 400ms cubic-bezier(0.42, 0.15, 0.61, 0.87)!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
filter: grayscale(1) opacity(0.95);
}
.item:hover .work-preview-inner, .work-preview-big:hover .work-preview-inner, .teamfoto:hover .work-preview-inner{
transform: scale3d(1.005, 1.005, 1.005);
transition: 400ms cubic-bezier(0.42, 0.15, 0.61, 0.87)!important;
filter: grayscale(0) opacity(1);
}
.teamfoto img{
transition: 400ms cubic-bezier(0.42, 0.15, 0.61, 0.87)!important;
filter: grayscale(1) opacity(1);
}
.teamfoto:hover.teamfoto img {
transition: 400ms cubic-bezier(0.42, 0.15, 0.61, 0.87)!important;
filter: grayscale(0) opacity(1);
}
.teamfotosingle:last-child, .teamfotosingle:last-child .previewtext{
padding-bottom: 0!important;
}
.nograyscale {
filter: grayscale(0) opacity(1)!important;
}
.item {
min-height: 334px;
cursor: pointer;
}
#projectpage .item{
padding-bottom: 1.75rem!important;
}
#projectpage #what p a{
text-decoration: underline!important;
}
/*
.work-preview-wrapper p {
max-width: 72%;
}*/
.work-preview-wrapper .year{
line-height:1.65em
}
p.year{
margin-bottom: 0;
}
#navidesktop, .mobilebackbutton, #mainnavigation .nav-item a, #mainnavigation .navbar-toggler p, #projectpage .nav-back a, .introtext p, #projectpage .introtext a{
color: #fff;
font-family: 'Inter';
text-decoration: none;
font-size: 1.75rem;
}
#navidesktop, #mainnavigation .nav-item a, #mainnavigation .navbar-toggler p, #projectpage .nav-back a, #about .nav-link, .button, #projectpage .introtext p, #projectpage .introtext a{
text-transform: uppercase;
}
.introtext p{
text-transform: none!important;
}
.navbar-toggler p{
position: relative;
}
.navbar-toggler p:after{
transition: 200ms ease-in-out;
display: inline-block;
content: 'MENU';
transform: translate(0px, 0px);
transform-origin: left;
position: absolute;
left: 0;
top: 2px;
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: none;
}
.filtergroupmobile .filters-button-group:first-child{
border-top: 0px solid #fff!important;
}
.filter-toggler.navbar-toggler p:after{
content: 'FILTER'!important;
}
.filterCollape {
background-color: #395c7e;
border: 2px solid #fff;
border-radius: 0;
border-bottom: 0;
}
.filter-body {
margin: 0!important;
padding: 0!important;
}
.filters-button-group:first-child{
border-top: 3px solid #fff;
}
.color-lightblue .filter-menu-mobile{
top: 30px;
transition: 500ms ease-in-out;
opacity: 1;
}
.filter-menu-mobile{
transition: 500ms ease-in-out;
position: fixed;
top: -60px;
padding-top: 30px;
opacity: 0;
left: 0;
/* padding: 20px 0; */
z-index: 16;
background-color: #395c7e;
border-bottom: 2px solid #fff;
}
.filter-menu-mobile .card:last-child {
border-bottom: 0px solid rgb(255, 255, 255);
}
.filter-menu-mobile .card-body {
border-left: 0px solid white;
border-right: 0px solid white;
}
.filter-menu-mobile button {
width: auto!important
font-size: 14px!important;
}
.navbar-toggler p:before{
transition: 300ms ease-in-out;
display: inline-block;
content: 'X';
transform-origin: left;
position: absolute;
transform: scale3d(1, 1, 1);
opacity: 0;
transform: scale3d(0.0, 0.0, 0.0);
transform-origin: center center;
left: 0;
top: 2px;
}
.menuon.navbar-toggler p:before{
transition: 300ms ease-in-out;
display: inline-block;
opacity: 1;
transform: scale3d(1, 1, 1);
transform-origin: center center;
}
.navbar-toggler p:after{
transition: 250ms ease-in-out;
display: inline-block;
transform: translate(0, 0px);
transform-origin: left;
}
.menuon.navbar-toggler p:after{
transition: 250ms ease-in-out;
display: inline-block;
transform: translate(-133px, 0px)!important;
transform-origin: left;
}
.work-preview .mt-auto {
line-height: 1;
}
.credits{
text-align: right;
margin-top: -3px;
}
.swiper-credits{
position: absolute;
bottom: 4px;
right: 10px;
}
/*
.card-body, #projectpage .card-body p, .card-header, #projectpage p small, #footer a, #footer p, small{
font-size: 0.9rem!important;
line-height: 1.5!important;
}
*/
/* arrow bounce */
.arrow-wrapper{
opacity: 0;
animation: fadeIn 1.1s forwards;
animation-delay: 12s;
}
.arrow {
text-align: center;
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
}
.arrow p b{ font-size: 50px!important; }
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/*arrow bounce*/
h2 span {
text-transform: initial!important;
}
/*h2 i{
font-family: 'happy-times-italic';
}*/
.navbar {
padding: 0rem 1rem;
padding-top: 0.75rem;
transition: .25s ease;transition: .25s ease;
}
.navbar.blurblur {
padding-top: 0rem!important;
animation-delay: 0s!important;
}
.navbar-dark .navbar-nav .nav-link{
transition: .25s ease;
position: relative;/*
transform: skew(0deg, 0deg);*/
display: block;
}
.navbar-dark .navbar-nav .nav-link.active {
position: relative;
display: block;
transition: .25s ease;
color: #1b222d!important;
}
.navbar-dark .navbar-nav .nav-link:after{
content: ' ';
display: inline-block;
opacity: 1;
left: 0;
z-index: -1;
height: 0%;
position: absolute;
bottom: 0;
width: 100%;
background-color: #ffffff;
transition: .5s ease;
}
.navbar-dark .navbar-nav .nav-link.active:after{
content: ' ';
display: inline-block;
opacity: 1;
left: 0;
z-index: -1;
height: 108%;
position: absolute;
bottom: 0;
width: 100%;
background-color: #ffffff;
transition: .5s ease;
}
#mainnavigation .navbar-toggler {
padding: 0;
line-height: 1;
background-color: transparent;
border: 0px solid transparent;
border-radius: 0;
}
#mainnavigation .navbar-toggler p {
margin-bottom: 0;
}
#mainnavigation .nav-item{
line-height: inherit;
margin-bottom: 0;
padding-left: 0;
padding-right: 0;/*
margin-right: 0.55rem;*/
}
#mainnavigation .nav-item a{
line-height: inherit;
/* padding-bottom: 0!important;
padding-top: 0px;*/
margin-bottom: 0;
padding-left: 10px;
padding-right: 10px;/*
padding: 0.9rem 0.75rem 0.5em 0.75rem!important;*/
}
#mainnavigation .nav-item .desktopbackbutton {
padding-left: 5px!important;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(255 255 255);
}
.linear-wipe {
text-align: center;
background: linear-gradient(to right, #fff 20%, #ff0 40%, #ff0 60%, #fff 80%);
background-size: 200% auto;
color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: shine 1s linear infinite;
animation: shine 1s linear infinite;
}
@keyframes shine {
to {
background-position: 200% center;
}
}
.reel_box h3{
transform: scale3d(0.8,0.8,1);
transition: all 0.3s ease;
z-index: 9;
font-size: 90px!important;
}
.reel_box:hover h3{
transform: scale3d(1,1,1);
transition: all 0.3s ease;
}
.reel_box{
border: 3px solid white;
cursor: pointer!important;
}
.reel_box iframe{
filter: grayscale(1);
opacity: 0.6;
transition: all 0.8s ease;
}
.reel_box:hover iframe{
filter: grayscale(0.2);
transition: all 0.8s ease;
transform: scale(1.1);
}
.vertical-align-center{
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.hideme{
opacity: 0!important;
}
#follower{
position: absolute;
float: left;
height: 40px;
width: 40px;
background-color: orange;
}
.container-fluid, .container {
font-family: 'Inter'!important;
}
.font-color-white{
-webkit-text-stroke-color: #fff!important;
color: #0000!important;
}
/*header svg {
width: 100vw;
height: 100vh;
}
*/
/*footer*/
.footer-sticky {
display: block;
width: 100%;
position: sticky;
bottom: 0;
left: 0;
color: #000;
z-index: 1;
background-color: #7c5392;
}
@media screen and (max-width: 800px) {
.footer-sticky {
padding: 100px 0;
min-height: 80vh;
}
}
@media screen and (max-width: 50px) {
.footer-sticky {
padding: 32px 0;
min-height: 100vh;
}
}
.circle-outer {
position: absolute;
overflow: hidden;
height: 500px;
width: 500px;
right: 0;
}
.circle-wrapper{
bottom: 250px;
right: 250px;
position: absolute;
}
.circle{
border:3px solid #fff;
border-radius:50%;
margin:auto;
position:absolute;
}
.one{
height:500px;
width:500px;
animation: 2s a infinite linear;
}
.two{
height: 375px;
width: 375px;
left: 65px;
top: 65px;
animation: 1.8s a infinite linear;
}
.three{
height: 235px;
width: 235px;
left: 135px;
top: 135px;
animation: 1.5s a infinite linear;
}
.four{
height: 95px;
width: 95px;
left: 205px;
top: 205px;
}
/*.inside{
height:8px;
width:8px;
position:absolute;
}
.one .inside{
top:144px;
}
.two .inside{
top:122px;
}
.three .inside{
top:33px;
}
@keyframes a {
0%{}
100%{
transform:rotate(360deg)
}
}
*/
/* footer ende */
.videoloading{
box-shadow: inset 0px 0px 0 3px #fff;
}
/*
.videoloading:before {
padding: 0 5px 0 0;
content: 'test';
vertical-align: -50%;
}
*/
@keyframes moveOutHeaderLeft {
0% {
transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transition: all 0.2s ease 0s;
transform: translate(0, 0);
}
100% { opacity: 1;
transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transition: all 0.1s ease 0s;
transform: translate(-100%, 0px);
}
}
@keyframes moveOutHeaderRight {
0% {
transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transition: all 0.2s ease 0s;
transform: translate(0, 0);
}
100% { opacity: 1;
transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transition: all 0.1s ease 0s;
transform: translate(+100%, 0px);
}
}
.bigheaderline {
font-family: 'Inter'!important;
font-weight: 700;
position: relative;
font-size: calc(11pt + 2.2vw)!important;
/*
text-transform: uppercase;*/
line-height: 1;
padding-bottom: 0;/*
color: #0000!important;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: #fff;*/
color: #fff;
}
.ml16, .ml19, #home .ml17, .ml3, .ml4, .ml5, .marquee{
font-family: 'Inter'!important;
font-weight: 700;
position: relative;
font-size: calc(11pt + 2.2vw)!important;
overflow: hidden;
text-transform: uppercase;
line-height: 1;
padding-bottom: 0;/*
color: #0000!important;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: #fff;*/
color: #fff;
}
.demo p {
font-size: calc(11pt + 2.2vw)!important;
overflow: unset;
text-transform: none;
}
.camera_ani{
width: 30vh;
top: 10%;
position: absolute;
left: 10%;
}
.iphone_ani{
width: 20vh;
bottom: 10%;
position: absolute;
right: 20%;
}
.documen_ani{
width: 26vh;
top: 12%;
position: absolute;
left: 27%;
}
#home .ml17{
/*
color: #fff!important;*/
-webkit-text-stroke-color: #000!important;
}
.ml5{ top:42%;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: #000;
animation: fadeIn 1.1s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.6s!important;
opacity:0;
}
.ml4{
/* -webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: #000;*/
top:42%;
animation: fadeIn 1.1s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.6s!important;
opacity:0;
}
.marquee{
width:100%;
overflow: initial!important;
z-index: 999;
}
.marquee a, .marquee a:hover{
}
#home .ml16 .letter, .ml19 .letter, #home .ml17 .letter, .ml3 .letter2, .ml4 .letter3, .ml5 .letter4, .projectpagehead .letter2{
display: inline-block;
opacity: 0;
}
.ml16, .ml17, .ml19 {
overflow: inherit;
}
.ml16 .letter, .ml17 .letter, .ml19 .letter {
display: inline-block;
line-height: 1em;
opacity: 0;
}
#projectpage .hideonproject {
display: none!important;
}
.sony .aboutbutton {
display: none!important;
}
#home .hideonhome {
display: none!important;
}
a.mobilebackbutton{
position: absolute;
left: 0;
/* top: 4px;*/
padding: 0.5rem 1rem;
margin: 0;
text-decoration: none;
display: none;
}
#wrapper{
}
.yearnumber{
float: left;
}
#projectpage .yearnumber{
float: right;
}
/* -- about section --*/
.kundenlogos{
max-width: 19.4%;
transition: all 0.5s;
}
.kundenlogos:hover{ /*
filter: drop-shadow(0px 0px 8px #555);*/
transform: scale(1.03);
transition: all 0.5s;
}
.aboutnav {
opacity: 1;
pointer: cursor;
}
.underline {
display: block;
border-bottom: 3px solid white;
margin-top: 0;/*
padding: 0.55rem 0 0.4rem 0.75rem;*/
}
#about .nav-link, .upperline {
display: block;
border-top: 3px solid white;
margin-top: 0;
padding: 0.6rem 0.75rem 0.55rem 0.75rem;
}
#about .nav-link h3{
margin-bottom: 0;
}
#about .nav-link:last-child {
border-bottom: 3px solid white;
}
#about .nav-link :before{
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.5s;
width: 0px;
opacity: 0;
}
#about .nav-link.active :before {
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.3s;
width: 33px;
opacity: 1;
margin-top: 0;
}
#about .rowpaddesktop{
padding-top:90px;
}
#projectpage .nav-link.active :before {
width: 23px!important;
}
.dropdown-toggle::after {
display: none;
}
.dropdown-toggle::before {
display: inline-block;
content: "↓";
border: none!important;
transition: all 0.3s;
}
.show.dropdown-toggle::before {
-webkit-transform: rotate-180deg)!important;
-moz-transform: rotate(-180deg)!important;
transform: rotate(-180deg)!important;
}
/* isotope */
/* ---- button ---- */
.button {
padding: 0.5rem 0.75rem 0.65rem 0.75rem;
background: none;
line-height: inherit;
/* border: 3px solid white; */
display: inline-block;
border: none;
text-align: left;
border-radius: 7px;
background-image: none;
/* font-family: sans-serif; */
text-transform: uppercase;
text-shadow: none!important;
cursor: pointer!important;
box-shadow: inset 0px -3px 0 0 #fff;
color: #fff;
transition: 0.4s ease-in-out;
}
.button.is-checked, .button-group-collapse .filterbutton {
color: #1b222d!important;
box-shadow: inset 0px -200px 0 0 #fff!important;
}
/*.button:hover {
background-color: #8CF;
color: #222;
}*/
./*button:active,
.button.is-checked {
background-color: inherit;
}
.button:active {
/* box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);*/
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
/* float: left;*/
border-radius: 0;
margin-left: 0;
margin-right: .75rem;
position: relative;
}
.subbutton {
background-color: rgb(255 255 255);
color: #1b222d!important;
box-shadow: inset 0px -3px 0 0 #ffffff;
/* padding-left: 45px; */
padding-top: 0.25rem;
padding-bottom: 0.25rem;
/* box-shadow: none!important; */
/* font-size: 26px!important; */
box-shadow: inset 0px 300px 0 0 #fff!important;
}
/*.filters-button-group .button[aria-expanded="true"]:before{
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.3s;
width: 33px!important;
opacity: 1!important;
margin-top: 0;
}*/
/*.button:before{
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.5s;
width: 0px;
opacity: 0;
}
.is-checked.button:before {
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.3s;
width: 33px!important;
opacity: 1!important;
margin-top: 0;
}*/
.subbutton::before {
font-family: 'Inter';
content: "→"!important;
float: left;
transition: all 0.3s;
width: 0px;
opacity: 0;
}
.is-checked.subbutton::before {
font-family: 'Inter';
content: "→"!important;
float: left;
transition: all 0.3s;
width: 23px!important;
opacity: 1!important;
margin-top: 0;
}
.filters-button-group .button .collapsed, .button-group-collapse .filterbutton .collapsed{
color: #1b222d!important;
box-shadow: inset 0px -200px 0 0 #fff;
transition: all 0.3s;
}
.filters-button-group .button .collapsed h3, .button.is-checked h3{
color: #1b222d!important;
transition: all 0.3s;
}
.filters-button-group h3{
margin-bottom: 0;
}
.filters-button-group button{
margin-bottom: none;}
.button-group-collapse .button-collapse h3::after {
font-family: 'Inter';
content: "+"!important;
float: right;
transition: all 0.3s;
width: auto!important;
opacity: 1!important;
line-height: 0.9;
transform-origin: center center;
}
.button-group-collapse .filterbutton h3{
color: #fff;
}
.button-group-collapse .filterbutton.collapsed {
box-shadow: inset 0px -3px 0 0 #fff!important;
}
.button-group-collapse .filterbutton h3, .button-group-collapse .filterbutton.collapsed.is-checked h3{
color: #1b222d!important;
}
.button-group-collapse .filterbutton.collapsed h3{
color: #fff!important;
}
.button-group-collapse .button-collapse h3::after {
transform: rotate(45deg)!important;
}
.button-group-collapse .button-collapse.collapsed h3::after {
transform: rotate(0deg)!important;
}
.button-group-collapse .filterbutton.collapsed.is-checked{
box-shadow: inset 0px -200px 0 0 #fff!important;
}
/*.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }*/
/* ---- isotope ---- */
.grid {
border: 1px solid #333;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .element-item ---- */
.element-item {
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 5px;
padding: 10px;
background: #888;
color: #262524;
}
.element-item > * {
margin: 0;
padding: 0;
}
.element-item .name {
position: absolute;
left: 10px;
top: 60px;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
font-weight: normal;
}
.element-item .symbol {
position: absolute;
left: 10px;
top: 0px;
font-size: 42px;
font-weight: bold;
color: white;
}
.element-item .number {
position: absolute;
right: 8px;
top: 5px;
}
.element-item .weight {
position: absolute;
left: 10px;
top: 76px;
font-size: 12px;
}
.element-item.alkali { background: #F00; background: hsl( 0, 100%, 50%); }
.element-item.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); }
.element-item.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); }
.element-item.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }
#line1 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash2 3s linear infinite;
}
#line2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation-delay: 0.1s;
animation: dash2 3s linear infinite;
}
#line3 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash2 3s linear infinite;
}
#line4 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation-delay: 0.3s;
animation: dash2 3s linear infinite;
}
#line5 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash2 3s linear infinite;
}
#line6 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash2 3s linear infinite;
}
#line7 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation-delay: 0.1s;
animation: dash2 3s linear infinite;
}
#line8 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation-delay: 0.2s;
animation: dash2 3s linear infinite;
}
.anomalie-skillz-svg #line1, .anomalie-skillz-svg #line2, .anomalie-skillz-svg #line3, .anomalie-skillz-svg #line4, .anomalie-skillz-svg #line5, .anomalie-skillz-svg #line6, .anomalie-skillz-svg #line7, .anomalie-skillz-svg #line8{
stroke-dasharray: 1410;
stroke-dashoffset: 1410;
}
.anomalie-skillz-svg.visible #line1, .anomalie-skillz-svg.visible #line2, .anomalie-skillz-svg.visible #line3, .anomalie-skillz-svg.visible #line4, .anomalie-skillz-svg.visible #line5, .anomalie-skillz-svg.visible #line6, .anomalie-skillz-svg.visible #line7, .anomalie-skillz-svg.visible #line8{
animation: dash2 ease-in-out 1.2s 1 normal forwards;
}
@keyframes dash2 {
to {
stroke-dasharray: 1410;
stroke-dashoffset: 900;}
}
.texturwerk-ci {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.texturwerk-ci.visible {
animation: fadeIn ease-in-out 1.5s 1 normal forwards;
animation-delay: 3s;
}
dt {
font-variant: slashed-zero;
text-transform: lowercase;
}
#work h1, #work h3, .work-preview h1, .work-preview h3 {
text-decoration: none!important;
}
.work-preview-headline{
border-bottom: 3px solid #fff;
width: 100%;
padding-top: 1px;
line-height: 1.05em;
}
.work-preview-headline-top{
border-top: 3px solid #fff;
width: 100%;
}
.mt-auto{
color:#fff;
}
.work-preview .mt-auto{
/* border-bottom: 2pt solid #fff;
width: 100%;
*/
}
.work-preview p, .work-preview:hover{
text-decoration: none!important;
}
/*.aboutcontent .row{
margin-bottom: 140px;
}
.aboutcontent #contact {
margin-bottom: 200px
}
*/
.table td, .table th {
padding: 0px 15px 12px 0;
vertical-align: top;
border-top: none;
font-variant: slashed-zero;
}
#lichtaus{
pointer-events: none;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
position: fixed!important;
background-color: #fff0;
background-color: rgba(0,0,0,0);
-webkit-transition: background-color 2000ms cubic-bezier(0, 0, 0.2, 1);
-ms-transition: background-color 2000ms cubic-bezier(0, 0, 0.2, 1);
transition: background-color 2000ms cubic-bezier(0, 0, 0.2, 1);
}
.invert{
filter: grayscale(1);
width: 100%;
height: 100%;
position: fixed!important;
background-color: black!important;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: background-color 2000ms cubic-bezier(0, 0, 0.2, 1);
-ms-transition: background-color 2000ms cubic-bezier(0, 0, 0.2, 1);
transition: background-color 2000ms cubic-bezier(0, 0, 0.2, 1);
}
model-viewer {
--poster-color: black;
--progress-bar-color: #fff;
--progress-bar-height: 0px;
--outline: 0!important;
}
model-viewer:focus {
--poster-color: black;
--progress-bar-color: #fff;
--progress-bar-height: 0px;
--outline: 0!important;
}
/* bars */
/* SWIPR ANFANG*/
.swiper-container-small {
border-radius: 4px;
width: 100%;
height: 100%;
overflow: hidden;
}
.swiper-container-small .swiper-slide{
/*height: 800px;*//*
background-color: orange;*/
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
right: 30px;
left: auto;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
left: 30px;
right: auto;
}
.swiper-container-small .swiper-button-prev:after, .swiper-container-small .swiper-button-next:after {
opacity: 0;
transition: .3s opacity;
}
.swiper-container-small:hover .swiper-button-prev:after, .swiper-container-small:hover .swiper-button-next:after {
opacity: 1;
transition: .3s opacity;
}
.swiper-button-prev:after {
font-size: var(--swiper-navigation-size);
text-transform: none!important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1;
font-size: 25px;
font-family: 'Inter';
content: "←";
color: #fff;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
opacity: 0;
}
.swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none!important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
font-size: 25px;
line-height: 1;
font-family: 'Inter';
content: "→";
color: #fff;
}
.swiper-container-small .swiper-pagination {
position: absolute;
text-align: left;
transition: .3s opacity;
padding-left: 27px!important;
transform: translate3d(0,0,0);
z-index: 10;
left: 0;
color: #fff;
}
.swiper-container {
width: 100%;
max-height: 100vh;
}
.swiper-sideways {
overflow: hidden;
}
.swiper-pagination-bullet{
background-color: #9ca2a9!important;
opacity: 0.6!important;
}
.swiper-pagination-bullet-active{
background-color: #f8f9fa!important;
opacity: 1!important;
}
.freeswipe .swiper-slide{
width: 24%;
}
.swiper-sideways .swiper-slide{
width: 50%;
}
.swiper-container-horizontal>.swiper-scrollbar {
margin-top: 2px;
position: relative;
height: 8px;/*
bottom: 17px;*/
border-radius:0;
}
.swiper-scrollbar-drag {
background: #fff;
border-radius: 0px!important;
}
.swiper-scrollbar {
background: #0000;
border-radius: 0px!important;
}
/* SWIPR ENDE*/
.vimeo-wrapper {
position: initial;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.date-box{
display: inline-block;
}
.date-box p{
margin-bottom: 0;
}
#tunmediafilm{
z-index: 3;
}
header {
position: relative;
height: 100vh;
min-height: 25rem;
width: 100%;
z-index: 0;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container-fluid {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.color-darkblue .overlaynew {
opacity: 0!important;
}
.visible{
opacity: 1!important;
}
.overlaynew {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 4;
opacity: 0;
pointer-events: none!important;
}
.overlaynew .brightside{
z-index: 9999999;
animation: moveOutHeaderLeft 0.6s forwards;
overflow: visible;
animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
animation-delay: 4.6s!important;
background-color: #1b222d;
}
.overlaynew .darkside{
z-index: 9999999;
animation: moveOutHeaderRight 0.6s forwards;
animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
animation-delay: 4.6s!important;
background-color: #1b222d;
}
.color-red .overlaynew{
opacity: 0;
}
header .afullday{
width: 100%;
height: 100%;
background-color:black;
position: absolute;
overflow: hidden;
}
#projectpage header {
position: relative;
height: 85vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
#projectpage hr{
margin-top: 0rem;
margin-bottom: 1rem;
border: 0;
border-top: 3px solid rgb(255 255 255);
}
header .projektoverlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}
/*@media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}*/
#onoff{
display: inline-block;
cursor: pointer;
z-index: 9999;
}
.lal{
font-variant-numeric: oldstyle-nums;
}
.vh-90vh {
min-height: 90vh;
}
.h-100vh {
min-height: 100vh;
}
.ringZ{
position: absolute;
bottom: 0;
right: 0;
max-width: 80%;
}
.backgroundgradient{
position: fixed;
top: 0;
z-index: 0;
height: 100vh;
width: 100vw;
background: transparent radial-gradient(at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%), rgba(220,53,69,0.8), #ffffff, #ffffff, #ffffff) no-repeat 0 0;
}
.list-group {/*
max-height: 300px;*/
overflow: auto;
position: relative;
}
.list-group .special {
background-color: lightgray;
padding: 3px 15px;
}
.list-group .special:focus, .list-group .special:hover {
background-color: gray;
}
.list-group .sticky-top, .list-group sticky-bottom {
position: relative;
}
.list-group .sticked-top, .list-group .sticked-bottom {
position: fixed;
box-sizing: border-box;
width: 100%;
z-index: 1;
}
html, body{ height: 100%;
}
.full-page{ height: 100vh; width: 100vw; }
/*.container-fluid{
overflow-x: hidden;
}*/
/*@font-face {
font-family : 'Inter';
font-style : normal;
font-weight : 400;
font-stretch : normal;
src : url('../fonts/MutoDPY-Regular.eot');
src : url('../fonts/MutoDPY-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/MutoDPY-Regular.woff2') format('woff2'),
url('../fonts/MutoDPY-Regular.woff') format('woff');
}
*/
/*
@font-face {
font-family: 'happy-times';
src: url('../fonts/happy-times-NG_regular_master_web.woff2') format('woff2'),
url('../fonts/happy-times-NG_regular_master_web.woff') format('woff'),
url('../fonts/happy-times-NG_regular_master_web.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'happy-times-italic';
src: url('../fonts/happy-times-NG_italic_master_web.woff2') format('woff2'),
url('../fonts/happy-times-NG_italic_master_web.woff') format('woff'),
url('../fonts/happy-times-NG_regular_master_web.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'happy-times-bold';
src: url('../fonts/happy-times-NG_bold_master_web.woff2') format('woff2'),
url('../fonts/happy-times-NG_bold_master_web.woff') format('woff'),
url('../fonts/happy-times-NG_bold_master_web.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
*/
.Muto{
font-family: 'Inter'!important;
}
#navigation a{
font-size: 50px;
margin-top: 0;
color: orange!important;
z-index: 999999;
mix-blend-mode: multiply;
}
.article-collapse p, .article-collapse ul, .article-collapse a, .article-collapse li{
color:#fff!important;
}
.article-collapse p{
padding-bottom: 0;
}
.article-collapse{
background-color: rgba(0,0,0,.9)!important;
}
.article-outer{
border-right: 1px solid rgba(0, 0, 0, 1);
}
.article-head, .article-bottom{
display:flex;
flex-direction:row;
align-items: center;
padding-bottom: 0px;
font-size: 11pt;
font-weight: 400;
line-height: 1;
color: #000000;
}
.article-date{
flex-grow:0;
width: 100%;
font-size: 11pt;
font-weight: 400;
line-height: 1.35;
}
.article-date .card-body {
padding: 0;
}
.article-date .card {
border:0;
}
.navibar {
margin-top: 8px;
}
.navibar a h1{
}
/* horizontal accordion start */
.accordion.width {
display: flex;
}
.accordion.width .card:last-child {
border-bottom: 0;
}
.accordion.width .card {
flex-direction: row;
flex-grow: 0;
flex-shrink: 1;
min-width: min-content;
}
.accordion.width .card-header h1:before{
}
.accordion.width .card-header[aria-expanded="true"] h1:before{
-webkit-transform: rotate-180deg)!important;
-moz-transform: rotate(-180deg)!important;
transform: rotate(-180deg)!important;
}
.accordion.width .card {
flex-direction: row;
flex-grow: 0;
flex-shrink: 1;
min-width: min-content;
}
.accordion.width .card .card-header {
cursor: pointer;
transform: rotate(180deg);
writing-mode: vertical-rl;
}
.accordion.width .card-header h1{
padding: 0px;
margin: 0 10px 0 4px;
}
.accordion.width .card-header {
border-left: 3px solid white;
}
.accordion.width .card-body {
border-left:0;
height: 100%;
border-right: 3px solid white;
border-bottom: 3px solid white;
}
.accordion.width .card .card.body:last-child {
border-right:0px solid white;
}
.accordion.width .card .card-header:not(.collapsed) {
pointer-events: none;
}
.collapsing.width {
transition: width 0.35s ease;
height: auto;
width: 0;
}
/* vimeo button markdown */
/* body {
background: linear-gradient(to right, #8e44ad, #c0392b);
}
*/
/* horizontal accordion end */
.card {
border: 0;
border-radius: 0;
background-color: inherit;
color: #fff;
}
.informationbutton{
cursor:pointer;
}
.informationbutton[aria-expanded=false] .text-expanded {
display: none;
}
.informationbutton[aria-expanded=true] .text-collapsed {
display: none;
}
/*countdown*/
ul#countdown {
border-width: 1px 0;
overflow: hidden;
font-family: Iosevka Sparkle, monospace;
margin-bottom: 0;
padding-left: 0;
}
ul#countdown li {
display: inline-flex;
text-align: right;
}
ul#countdown li:last-child {
padding-right: 0;
}
ul#countdown li .label {
font-size: 11pt;
font-weight: 400;
line-height: 1.35;
text-align: right;
}
.navi-bottom{
background-color: #fff0;
transition: 1.4s;
}
.blurmenu{
/* background-color: #0002;
transition: 1.4s;
backdrop-filter: blur(10px);
*/
}
.logocontainer{
z-index: 99999;
pointer-events:none;
}
.logoani2{
transform: translateY(-120vh);
opacity: 0;
transition: 0.6s;
}
.logowhite_v2{
z-index: 99999;
pointer-events: all;
width: 340px!important;
height: 250px!important;
transition: 0.6s;
position: absolute;
bottom: calc(50% - 120px);
left: calc(50% - 170px);
pointer-events: none;
animation: zoomOut 2.4s forwards;
animation-delay: 3.0s!important;
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.logowhite_v2_small{
pointer-events: all;
transition: 0.6s;
position: absolute;
opacity: 0;
margin: 0;
transform: translateY(-270px);
width: 201px;
height: 176px;
right: 35px;
animation-delay: 5.3s!important;
animation: slideInFromTop 1.2s forwards;
animation-timing-function: cubic-bezier(0.72, 0.01, 0.55, 1.1);
}
.navbar{
transform: translateY(-70px);
animation: slideInFromTopNav 1.2s forwards;
animation-delay: 5.9s!important;
animation-timing-function: cubic-bezier(0.72, 0.01, 0.55, 1.1);
margin-top: 0rem;
}
#projectpage .navbar{
transform: translateY(0px)!important;
animation: none!important;
opacity: 1!important;
}
#projectpage .logowhite_v2_small{
animation: none!important;
opacity: 1;
transform: translateY(0px)!important;
}
#projectpage .logowhite_v2{
animation: none!important;
opacity: 0!important;
}
.logoani3{
right: 15px!important;
}
@keyframes noAni {
0% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeInandOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes zoomOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes slideInFromTop {
0% { transform: translateY(-270px); opacity: 0; }
100% { transform: translateY(0px); opacity: 1;}
}
@keyframes slideInFromTopNav {
0% { transform: translateY(-70px);
}
100% {
transform: translateY(0); }
}
.logowhite_v2_small svg #_1, .logowhite_v2_small svg #_2, .logowhite_v2_small svg #_3, .logowhite_v2_small svg #_4 {
opacity: 0!important;
animation: fadeOut 1.5s forwards;
}
.showrings.logowhite_v2_small svg #_1, .showrings.logowhite_v2_small svg #_2, .showrings.logowhite_v2_small svg #_3, .showrings.logowhite_v2_small svg #_4 {
opacity: 1!important;
animation: fadeIn 1.5s forwards;
}
.showrings{
transition: 0.7s ease!important;
width: 161px!important;
height: 112px!important;
}
/*.logowhite_v2_small {
pointer-events: all;
transition: 0.6s;
right: -120%;
position: absolute;
top: 0;
animation: 1.6s forwards;
animation-delay: 2.8s!important;
animation-timing-function: ease;
width: 263px;
height: 56px;
padding: 15px 15px 10px 15px;
}*/
.logowhite_v2 svg #name {
animation: fadeIn 1.3s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.2s!important;
opacity:0;
}
.logowhite_v2 svg #_1 {
animation: moveIn 1.9s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.5s!important;
opacity:0;
}
.logowhite_v2 svg #_2 {
animation: moveIn 1.9s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.7s!important;
opacity:0;
}
.logowhite_v2 svg #_3 {
animation: moveIn 2s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.8s!important;
opacity:0;
}
.logowhite_v2 svg #_4 {
animation: moveIn 2s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 1.1s!important;
opacity:0;
}
#home .logowhite{
pointer-events:all;
width:300px;
height:188px;
transition: 0.5s;
position: absolute;
bottom: calc(50% - 94px);
left: calc(50% - 150px);
animation: logowhitehome 0.6s forwards;
animation-delay: 0.8s!important;
animation-timing-function: ease;
pointer-events: none;
}
#projectpage .logowhite{
animation: none!important;
opacity: 1;
width: 200px;
height: 167px;
position: absolute;
left: calc(0% + 15px);
bottom: calc(100% - 112px);
}
#projectpage .logowhite svg #name, #projectpage #mainnav{
opacity: 1!important;
}
#projectpage .logowhite svg #_1, #projectpage .logowhite svg #_2, #projectpage .logowhite svg #_3, #projectpage .logowhite svg #_4 {
opacity: 0!important;
animation: none!important;
}
#projectpage .logowhite_v2_small svg #_1, #projectpage .logowhite_v2_small svg #_2, #projectpage .logowhite_v2_small svg #_3, #projectpage .logowhite_v2_small svg #_4 {
opacity: 0!important;
animation: none!important;
}
.laurel {
max-width: 18.9%;
}
#mainnav.moveup{
top: -200px!important;
transition: all 0.75s!important;
}
#mainnavigation{
border-bottom: 3px solid #ffffff00;
transition: all 0.8s!important;
overflow: hidden;
}
#projectpage #mainnav{
overflow: hidden;
animation: noAni 0s!important;
animation-timing-function: ease;
opacity: 1;
}
.logowhite svg #name {
animation: fadeIn 1.5s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.2s!important;
opacity:0;
}
.logowhite svg #_1 {
animation: fadeIn 2s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.5s!important;
opacity:0;
}
.logowhite svg #_2 {
animation: fadeIn 2s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.7s!important;
opacity:0;
}
.logowhite svg #_3 {
animation: fadeIn 2s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 0.8s!important;
opacity:0;
}
.logowhite svg #_4 {
animation: fadeIn 2s forwards;
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
animation-delay: 1.1s!important;
opacity:0;
}
/*#home .logowhite svg #_1 {
animation: fadeIn 5s forwards;
animation-delay: 0.4s!important;
opacity:0;
}
#home .logowhite svg #_2 {
animation: fadeIn 5s forwards;
animation-delay: 0.6s!important;
opacity:0;
}
#home .logowhite svg #_3 {
animation: fadeIn 5s forwards;
animation-delay: 0.8s!important;
opacity:0;
}
#home .logowhite svg #_4 {
animation: fadeIn 5s forwards;
animation-delay: 0.9s!important;
opacity:0;
}
*/
.anomalie_poster{
max-width: 60%;
box-shadow: 0px 0px 20px 1px #1f3252;
}
.logoani{
width: 200px!important;
height: 167px!important;
transition: 1s;
position: absolute;
left: calc(0% + 15px)!important;
bottom: calc(100% - 112px)!important;
animation: noAni!important;
animation-timing-function: ease;
}
.logoani svg #_1 {
animation: fadeOut 1s forwards!important;
animation-delay: 1.2s!important;
opacity:0!important;
}
.logoani svg #_2 {
animation: fadeOut 1s forwards!important;
animation-delay: 1.3s!important;
opacity:0!important;
}
.logoani svg #_3 {
animation: fadeOut 1s forwards!important;
animation-delay: 1.4s!important;
opacity:0!important;
}
.logoani svg #_4 {
animation: fadeOut 1s forwards!important;
animation-delay: 1.5s!important;
opacity:0!important;
}
@keyframes moveIn {
0% {
transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transition: all 0.2s ease 0s;
transform: scaleX(1) scaleY(1.013) scaleZ(1);
-webkit-transform: scaleX(1) scaleY(1.013) scaleZ(1);
opacity: 0; }
100% { opacity: 1;
transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transition: all 0.1s ease 0s;
transform: scaleX(1) scaleY(1) scaleZ(1);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
}
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeInOut {
0% { opacity: 0; }
25% { opacity: 1; }
35% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes logowhite {
0% {
bottom: calc(50% - 144px);
left: calc(50% - 200px);
}
100% {
width: 200px;
height: 167px;
transition: 1s;
position: absolute;
left: calc(0% + 15px);
bottom: calc(100% - 112px);
}
}
/*#Fertigkeiten .card-body, #Datenblatt .card-body, #Auszeichnungen .card-body{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}*/
.card-header h1:before {
font-family: 'Inter';
content: "↓";
float: left;
transition: all 0.5s;
}
.card-header p {
margin-bottom: 0;
}
.card-header p:before {
font-family: 'Inter';
content: "↓";
float: left;
transition: all 0.5s;
}
.card-header h1[aria-expanded="true"]:before{
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.card-header p[aria-expanded="true"]:before{
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.card-header {
padding: 0;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0);
border-radius: 0!important;
border-bottom: none;
cursor:pointer;
}
.card{
/* border-bottom: 2px solid rgb(255, 255, 255);*/
}
.card:last-child{
/* border-bottom: 2px solid rgb(255, 255, 255);*/
}
.card-body {
padding: 1rem 1rem;
margin-top: 2px;
margin-bottom: 4px;
border-bottom: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
}
.card-body p {
}
.card-header h1 {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
.card:first-child .card-header h1 {
margin-top: 0px;
}
/*.archivrow{
overflow-x: hidden;
}
*/
.archivrow h1{
text-decoration: none!important;
}
#archiv .archivrow {
border-top: 3px solid rgb(255, 255, 255);
padding-top: 8px;
transition: 0.3s;
}
#archiv .archivrow:hover h3 {
color:#000;
transition: 0.3s;
}
#archiv .archivrow:hover{
background-color: white;
color:#000;
cursor: pointer;
transition: 0.3s;
}
#archiv .archivrow:last-child{
border-bottom: 3px solid rgb(255, 255, 255);
}
.marqueebox {
padding: 200px 0 220px!important;
}
#footerteaser {
margin: 200px 0 220px!important;
background-color: #fff;
}
.studiopic{
}
.coverbox{
height: 100%;
width: 100%;/*
padding: 5px 8px;*/
display: block;
margin-bottom: 3px;
color: #000000;
overflow: hidden;
}
.coverbox.box1{
height: 100%;
width: 100%;
background: url(../img/08.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
/*.work-preview-small{
opacity: 0;
}
*/
.mitarbeiter {
border: 3px solid #fff;
filter: grayscale(1);
}
.mitarbeiter-felix{
background: url(../img/mitarbeiter/felix.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.mitarbeiter-stephan{
background: url(../img/mitarbeiter/stephan.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.mitarbeiter-pi{
background: url(../img/mitarbeiter/pi.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.mitarbeiter-thomas{
background: url(../img/mitarbeiter/thomas.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.mitarbeiter-nils{
background: url(../img/mitarbeiter/nils.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.mitarbeiter-philipp{
background: url(../img/mitarbeiter/philipp.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.mitarbeiter-marc{
background: url(../img/mitarbeiter/marc.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.mitarbeiter-jannic{
background: url(../img/mitarbeiter/jannic.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.work-preview h3
margin-bottom: 0!important;
}
.work-hda{
background: url(../img/hda.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.work-lufthansa{
background: url(../img/lh.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.work-rea{
background: url(../img/rea.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.work-senator{
background: url(../img/senator.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.work-texturwerk{
background: url(../img/texturwerk.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.work-steula{
background: url(../img/steula_2.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.work-darmstadt{
background: url(../img/darmstadt.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.work-anomalie{
background: url(../img/anomalie.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.box1{
height: 100%;
width: 100%;
background: url(../img/08.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.coverbox.box2{
height: 100%;
width: 100%;
background: url(../img/15.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: red;
}
.coverbox.box3{
height: 100%;
width: 100%;
background: url(../img/cover/katharina.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: green;
}
.coverbox.box4{
height: 100%;
width: 100%; background: url(../img/tonstudio.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: green;
}
.coverbox.box5{
height: 100%;
width: 100%; background: url(../img/cover/janina.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.coverbox.box6{
height: 100%;
width: 100%; background: url(../img/cover/svenja.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: red;
}
.coverbox.box7{
height: 100%;
width: 100%; background: url(../img/cover/sarah.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: red;
background-color: red;
}
.coverbox.box8{
height: 100%;
width: 100%; background: url(../img/cover/mira.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: green;
}
.coverbox.box9{
height: 100%;
width: 100%; background: url(../img/bilbao.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: blue;
}
.coverbox:hover{
}
.coverbox:hover .marquee{
opacity: 1;
transition: opacity 0.5s;
}
.article-content{
color: #000000;
line-height: 17px;/*
/: ;
word-wrap: break-word;
overflow-wrap: break-word;
/*
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
*/
}
.article-image {
max-width: 25%;
float: left;
padding-right: 10px;
padding-top: 10px;
}
.article-image img{
margin-bottom: 5px;
}
.lightense-open{
}
/**
* Initialiazing a `footnotes` counter on the wrapper
*/
article {
counter-reset: footnotes;
}
/**
* Inline footnotes references
* 1. Increment the counter at each new reference
* 2. Reset link styles to make it appear like regular text
*/
[aria-describedby="footnote-label"] {
counter-increment: footnotes; /* 1 */
text-decoration: none!important; /* 2 */
color: inherit; /* 2 */
cursor: pointer; /* 2 */
outline: none; /* 2 */
}
[aria-describedby="footnote-label"]:hover {
text-decoration: underline!important; /* 2 */
}
/**
* Actual numbered references
* 1. Display the current state of the counter (e.g. `[1]`)
* 2. Align text as superscript
* 3. Make the number smaller (since it's superscript)
* 4. Slightly offset the number from the text
* 5. Reset link styles on the number to show it's usable
*/
[aria-describedby="footnote-label"]::after {
/* content: '[' counter(footnotes) ']'; 1 */
content: counter(footnotes); /* 1 */
/* vertical-align: super; */ /* 2 */
/*font-size: 10px;*/ /* 3 */
align-content: flex-end;
content: counter(footnotes);
margin-left: 5px;
color: hsl(0, 100%, 44%);
text-decoration: none;
cursor: pointer;
font-variant: diagonal-fractions;
background: #ff090900;
border: 1px solid #dc3545;
border-radius: 100%;
color: #dc3545;
padding: 0px 4px 0px 4px;
display: inline-block;
font-size: 75%;
}
.fotorama:hover + .fotorama-caption, .fotorama:hover + .fotorama__caption{
opacity: 1;
}
.logoimg_linie{
opacity: 0;
transition: opacity 0.5s;
}
.logoimg:hover .logoimg_linie{
opacity: 1;
transition: opacity 0.5s;
}
.abouttoggleimg{
max-width: 218px;
}
.nopointerevent{
pointer-events: none;
}
.fotorama__stage:hover .fotorama__caption, .fotorama__stage:hover .fotorama__arr {
opacity: 1;
transition-property: transform,opacity;
transition-duration: .3s;
}
.fotorama__arr {
opacity: 0;
}
/*.fotorama{
margin-top: 20px;
margin-bottom: 20px;
}
*/
.fotorama__wrap--fade .fotorama__fade-front, .fotorama__wrap--fade .fotorama__fade-rear, .fotorama__wrap--fade .fotorama__stage__frame.fotorama__active {
display: inline-flex;
}
/*
.fotorama__caption {
z-index: 12;
position: relative;
right: 0;
font-family: 'IBM Plex Sans', sans-serif;
font-size: calc(20px + 1.5vw) !important;
width: 100%;
text-align: center;
font-size: 12px;
line-height: 1.5;
color: #9c6161;
mix-blend-mode: difference;
transition-property: transform,opacity;
transition-duration: .3s;
opacity: 0;
display: flex;
align-items: center;
position: relative;
}
.fotorama__caption__wrap {
background-color: #fff;
background-color: rgba(255, 255, 255, 0);
padding: 5px 10px;
width: 100%;
font-family: 'IBM Plex Sans', sans-serif;
}*/
/* plyr */
.plyr--video .plyr__controls {
background: linear-gradient(transparent,#404952);
}
.plyr__control--overlaid {
background: #000!important;
border: 3px solid white!important;
opacity: 1;
padding: 20px;
top: 45%;
}
.plyr__control svg {
fill: white;
}
.plyr--full-ui input[type=range] {
color: #ffffff!important;
}
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
background: #000!important;
color: #ffffff!important;
}
.plyr__controls .plyr__controls__item.plyr__time {
padding: 3px 15px 0px 15px;
font-weight: 400;
font-size: 0.85rem!important;
color: #fff!important;
font-variant-numeric: slashed-zero;
}
/* modal */
.modal{
background-color: #0e1216;
}
.modal-content {
background-color: #1b222d00;
box-shadow: none;
border: 0;
}
.modal-header{
border-bottom: 0;
}
.btn-close {
padding: 0.25em 0.25em;
border: 0;
border-radius: 0.375rem;
opacity: 1;
filter: invert(1);
}
/*
.modal.fade .modal-dialog {
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out,-webkit-transform .3s ease-out;
-webkit-transform: translate(0,0px);
transform: translate(0,0px);
}
.vertical_align_middle{
display: flex;
align-items: center;
}
.vertical_align_bottom{
display: flex;
align-items: flex-end;
}
.vertical_align_content{
text-align: center;
overflow: hidden;
width: 100%;
}
.modal .embed-responsive {
position: inherit!important;
}
.btn-play{
background: #FFFFFF59 0% 0% no-repeat padding-box;
height:96px;
width:96px;
background-image: url(SVG/btn-Play.svg);
border-radius: 8px;
background-size: 100%;
left: 0;
position: absolute;
left: 50%;
bottom: 55%;
transform: translateX(-50%);
}
.btn-secondary {
color: #fff;
background-color: #1b222d;
border-color: #1b222d;
}
.btn-secondary.focus, .btn-secondary:focus {
color: #fff;
background-color: #1b222d;
border-color: #1b222d;
box-shadow: none;
}
.close{
position: absolute;
padding: 10px!important;
color: #fff;
text-shadow: none!important;
opacity: 1;
z-index: 999999;
font-family: 'Inter'!important;
transform: rotate(
45deg);
font-weight: normal;
font-size: 60px;
right: 0;
transition: all 0.2s;
}
.close:hover {
color: #507462;
transform: rotate(
45deg)scale(1.1);
text-decoration: none;
transition: all 0.2s;
opacity: 1!important;
}
.modal-body {
padding:0;
}
.modal-open .logowhite_v2 {
opacity: 0!important;
}
.modal .plyr__controls{
position: fixed!important;
bottom: 0!important;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 99998;
}
.modal-dialog {
position: fixed;
margin: 0;
width: 100%;
height: 100%;
padding: 0;
max-width: 100%!important;
background-color: #212529!important;
}
.modal-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #212529!important;
border: none;
border-radius: 0;
box-shadow: none;
}
.modal-close-x {
right: 0;
position: absolute;
margin: 13px;
padding: 10px 15px!important;
color: #fff;
color: #fff;
pointer-events: all;
border: 3px solid #fff!important;
cursor: pointer;
text-shadow: none;
opacity: 1;
z-index: 99999;
}
.modal-close-x:hover {
color: #fff;
opacity: 1!important;
}
*/
/* modal */
.showonmobile {
display: none;
}
.showondesktop {
display: block;
}
.sticky {
display: block;
position: -webkit-sticky;
position: sticky;
z-index: 992;
top: 90px;
}
/*
##Device = PHONE TABLET
##Screen = B/w 481px to 767px
*/
@media (min-width: 768px) {
.collapse.dont-collapse-sm {
display: block;
height: auto !important;
visibility: visible;
}
}
@media (min-width:320px) and (max-width:767px) {
.kundenlogos {
max-width: 31.955555%;
}
#work, #about, #contact {
scroll-margin-top: 50px;
}
.item {
min-height: auto;
}
.h3, h3 {
font-size: 1.65rem!important;
}
.project-headline {
font-size: 1.25rem!important;
}
.bigheaderline {
font-size: calc(14pt + 4.5vw)!important;
-webkit-text-stroke-width: 1px;
}
.ml16, .ml19, #home .ml17, .ml3, .ml4, .ml5, .marquee {
-webkit-text-stroke-width: 1px!important;
font-size: calc(14pt + 4.5vw)!important;
padding-bottom: 10px;
}
.plyr__control--overlaid {
border: 2px solid white!important;
}
/*#footer {
border-top: 2px solid #fff;
}*/
.card {
border-bottom: 2px solid #fff;
}
.card:last-child {
border-bottom: 2px solid #fff;
}
.card-body {
border-left: 2px solid ;#fff;
border-right: 2px solid #fff;
}
.work-preview .embed-responsive {
border-radius: 2px;
}
.navbar-collapse .nav-link:before {
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.2s;
width: 0px;
opacity: 0;
}
.navbar-collapse .nav-link.active:before {
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.2s;
width: 25px;
opacity: 1;
margin-top: 0px;
}
.projektoverlay .ml19{
margin-bottom: 10px;
}
.button{
box-shadow: inset 0px -2px 0 0 #fff;
}
#mainnavigation, #about .nav-link, .work-preview-headline, .reel_box {
border-width: 3px!important;
}
#mainnavigation button:focus {outline:0;}
.yearnumber{
float: none!important;
}
.showonmobile {
display: block;
}
.showondesktop {
display: none;
}
.marquee {
opacity: 1;
margin-top: 0px;
}
.laurel {
max-width: 24.2%;
}
#navbarCollapse .navbar-nav .nav-link.active {
color: #fff!important;
}
.button {
padding: 0.3rem 0.35rem 0.15em 0.35rem;
}
.button-group .button {
margin-right: 0.15rem;
position: relative;
}
.work-preview .embed-responsive, .work-preview-big .embed-responsive {
border-radius: 1px;
/* border: 2px solid #fff;*/
}
.arrow p b{ font-size: 35px!important; }
.logowhite_v2_small {
width: 141px;
height: 123px;
right: 15px;
}
.navbar.blurblur {
padding:0.5rem 1rem 0.6rem 1rem!important
}
.navbar {
padding: 0.5rem 1rem 0.6rem 1rem!important
}
.navbar-dark .navbar-nav .nav-link:after {
background-color: #ffffff00!important;
}
.navbar-dark .navbar-nav .nav-link.active {
color: inherit!important;
}
.navbar-dark .navbar-nav .nav-link.active {
color: inherit!important;
}
#mainnavigation .nav-item a {
margin-bottom: 0!important;
padding-left: inherit!important;
padding-right: inherit!important;
}
.logowhite_v2 {
width: 220px!important;
height: 160px!important;
bottom: calc(50% - 80px);
left: calc(50% - 110px);
}
.logowhite_v2 {
width: 220px!important;
height: 160px!important;
bottom: calc(50% - 80px);
left: calc(50% - 110px);
}
#projectpage #mainnavigation .navbar-toggler {
opacity: 0;
pointer-events: none;
}
a.mobilebackbutton{
display: block!important;
}
#projectpage .logowhite_v2_small {
width: 141px;
height: 102px;
}
.logowhite_v2_small {
width: 141px;
height: 102px;
}
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width:481px) and (max-width:767px) {
.marqueebox {
padding: 65px 0!important;
}
.projecttext {
column-count: 1;
column-rule-style: none;
column-gap: 2.5rem;
column-rule-color: white;
}
#projectpage .item{
padding-bottom: 1rem!important;
}
.h2, h2, #navidesktop, .mobilebackbutton, .mobilebackbutton:hover, #mainnavigation .nav-item a, #mainnavigation .navbar-toggler p, #projectpage .nav-back a, .introtext p, #projectpage .introtext a{
font-size: 1.5rem!important;
}
#mainnavigation .nav-item a {
padding: 0.5rem 0!important;
}
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width:320px) and (max-width:480px) {
.projecttext {
column-count: 1;
column-rule-style: none;
column-gap: 2.5rem;
column-rule-color: white;
}
.marqueebox {
padding: 65px 0!important;
}
#projectpage .item{
padding-bottom: 1rem!important;
}
#mainnavigation .nav-item a {
padding: 0.5rem 0!important;
}
.h2, h2, #navidesktop, .mobilebackbutton, .mobilebackbutton:hover, #mainnavigation .nav-item a, #mainnavigation .navbar-toggler p, #projectpage .nav-back a, .introtext p, #projectpage .introtext a{
font-size: 1.5rem!important;
}
.work-preview-small {
height: 160px!important;
}
.navbar-dark .navbar-nav .nav-link.active{
transform: skew(0deg, 0deg)!important;
}
.navbar-collapse .nav-link:before {
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.2s;
width: 0px;
opacity: 0;
}
.navbar-collapse .nav-link.active:before {
font-family: 'Inter';
content: "→";
float: left;
transition: all 0.2s;
width: 25px;
opacity: 1;
margin-top: 0px;
}
#mainnavigation, #about .nav-link, .work-preview-headline, .reel_box {
border-width: 2px!important;
}
.underline {
border-width: 2px!important;
}
#mainnavigation .nav-item a {
padding-bottom: 8px!important;
padding-top: 8px!important;
}
.yearnumber{
float: none;
}
/* a, a:hover, a:active, p, b, dd, dt, ul, ol, li, tr, td, th, #about a, #work a, .button, #projectpage{
font-size: 1.05rem!important;
line-height: auto!important;
}
#navidesktop, .mobilebackbutton, #mainnavigation .nav-item a, #mainnavigation .navbar-toggler p, #projectpage .nav-back a, .introtext p, #projectpage .introtext a{
font-size: 1.4rem!important;
letter-spacing: 0;
}*/
.button{
box-shadow: inset 0px -2px 0 0 #fff;
}
.laurel {
max-width: 24.4%;
}
#about #whom .clients, #Fertigkeiten .card-body{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.marquee, #typewriter {
font-size: 50px!important;
color:#fff;
width:100%;
overflow: hidden;
z-index: 999;
transition: opacity 0.5s;
}
}
@media (min-width:1800px) {
.article-content{
padding-top: 4px;
color: #000000;
line-height: 17px;
}
}