/* Einbindung Schrift: "Berlow" SIL OPEN FONT LICENSE: https://www.daton.de/css/SIL Open Font License.txt */ @font-face { font-family: 'Barlow'; src: url('/css/webfonts/barlow-regular-webfont.eot'); src: url('/css/webfonts/barlow-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/css/webfonts/barlow-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Barlow'; src: url('/css/webfonts/barlow-semibold-webfont.eot'); src: url('/css/webfonts/barlow-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('/css/webfonts/barlow-semibold-webfont.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Barlow'; src: url('/css/webfonts/barlow-bold-webfont.eot'); src: url('/css/webfonts/barlow-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/css/webfonts/barlow-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; } /*************************************************************************** * Allgemeine Definitionen ****************************************************************************/ /* STANDARDS */ strong {font-weight: 600; font-family: inherit;} b {font-weight: 600; font-family: inherit;} em, i {} sup, sub {line-height: 0 !important; font-size: 50%;} img {overflow: hidden;} a, input, textarea, select {border: 0;} p a {word-wrap: break-word;} button {text-decoration: none !important;} button:focus, button:active, button:active:focus{box-shadow:none !important; text-decoration: none;} /* PROJECT */ ::-moz-selection {background: var(--blue-01); color: var(--white);} ::selection {background: var(--blue-01); color: var(--white);} html {overflow-y: scroll; scroll-behavior: smooth;} body {font-family: 'Barlow', sans-serif; font-weight: 400; line-height: 1; color: var(--black); background: var(--white); font-size: 100%;} p, ul {line-height: 1.5; margin-bottom: 1.4em;} li, label {line-height: 1.5;} figcaption {color: var(--grey);} /* ----------------------------------------------------------------------------------------------------------------------------- * COLORS ----------------------------------------------------------------------------------------------------------------------------- */ :root { --black: rgba(0,0,0,1); --white: rgba(255,255,255,1); --grey: rgba(107,111,117,1); --grey-01: rgba(244,245,247,1); --grey-02: rgba(213,218,223,.8); --blue: rgba(40,78,168,1); --blue-01: rgba(45,92,200,1); --blue-02: rgba(64,115,208,1); --pink: rgba(255, 129, 239, 1); --cyan: rgba(40, 217, 233, 1); --orange: rgba(254, 154, 130, 1); --green: rgba(130, 255, 106, 1); --yellow: rgba(233, 227, 29, 1); --pink-text: rgba(223, 115, 209, 1); --cyan-text: rgba(40, 217, 233, 1); --orange-text: rgba(254, 154, 130, 1); --green-text: rgba(175, 247, 161, 1); --yellow-text: rgba(233, 227, 29, 1); --pink-light: rgba(255, 129, 239, .275); --cyan-light: rgba(40, 217, 233, .275); --orange-light: rgba(254, 154, 130, .275); --green-light: rgba(175, 247, 161, 0.45); --yellow-light: rgba(233, 227, 29, .275); --pink-lighter: rgba(255, 129, 239, .2); --cyan-lighter: rgba(40, 217, 233, .2); --orange-lighter: rgba(254, 154, 130, .2); --green-lighter: rgba(175, 247, 161, 0.35); --yellow-lighter: rgba(233, 227, 29, .2); --pink-lighter: rgba(255, 230, 252, 1); --cyan-lighter: rgba(212, 247, 251, 1); --green-lighter: rgba(227, 252, 222, 1); --success: rgba(0,0,0,1); --error: rgba(242,0,91,1); } .custom-text-blue {color: var(--blue);} .custom-text-grey {color: var(--grey);} .custom-text-pink {color: var(--pink-text);} .custom-text-green {color: var(--green-text);} .custom-text-cyan {color: var(--cyan-text);} .custom-text-pink-light {color: var(--pink-light) !important;} .custom-text-green-light {color: var(--green-light) !important;} .custom-text-cyan-light {color: var(--cyan-light) !important;} .custom-text-pink-lighter {color: var(--pink-lighter) !important;} .custom-text-green-lighter {color: var(--green-lighter) !important;} .custom-text-cyan-lighter {color: var(--cyan-lighter) !important;} .custom-bg-white {background-color: var(--white) !important;} .custom-bg-blue {color: var(--white) !important; background-color: var(--blue-01);} .custom-bg-grey {color: var(--white) !important; background-color: var(--grey);} .custom-bg-pink-light {background-color: var(--pink-light) !important;} .custom-bg-green-light{background-color: var(--green-light) !important;} .custom-bg-cyan-light {background-color: var(--cyan-light) !important;} .custom-bg-pink-lighter {background-color: var(--pink-lighter) !important;} .custom-bg-green-lighter{background-color: var(--green-lighter) !important;} .custom-bg-cyan-lighter {background-color: var(--cyan-lighter) !important;} .custom-bg-blue a, .custom-bg-blue a.custom-link-tel, .custom-bg-blue a.custom-link-mail {color: var(--white) !important; border-color: var(--white) !important;} @media screen and (max-width: 767px) { :root { --grey-01: rgba(237,238,242,1); } } /* ----------------------------------------------------------------------------------------------------------------------------- * GUTTERS ----------------------------------------------------------------------------------------------------------------------------- */ .custom-g-xl {--bs-gutter-x: 6.5rem;} .custom-g-lg {--bs-gutter-x: 2.5rem;} /* ----------------------------------------------------------------------------------------------------------------------------- * LINKS + BUTTONS + LISTS ----------------------------------------------------------------------------------------------------------------------------- */ a {color: var(--black); transition: all 0.20s ease-in-out; text-decoration: none;} a:hover {color: inherit;} p a, label a {border-bottom: .115em dotted var(--grey);} p a:hover, label a:hover, h1 a:hover {opacity: .65;} a:focus:not(:focus-visible), iframe::focus:not(:focus-visible) {outline: none} a:focus-visible {outline: solid; outline-color: var(--black); outline-width: 4px; outline-offset: 2px;} iframe:focus-visible {outline: solid; outline-color: var(--black); outline-width: 5px; outline-offset: 2px;} a.custom-disabled {text-decoration: none; border-bottom: none !important; pointer-events: none; cursor: default; color: var(--grey);} a.custom-disabled:hover {opacity: 1;} .custom-nolink {color: inherit; pointer-events: none; cursor: default;} .custom-link-extern p {border-bottom: .115em dotted var(--black);} .custom-btn {width: auto; padding: .75em 1em .65em 1em; border: 2px solid; border-color: inherit; border-radius: 60px; font-weight: 600; box-shadow: none !important; letter-spacing: 0; font-size: 1em; transition: all .25s ease-in-out !important;} .custom-btn:hover {transition: all .25s ease-in-out !important; transform: scale(1.1);} .custom-btn-outline {background-color: transparent !important; border: 2px solid var(--blue-01) !important; color: var(--blue-01) !important; font-weight: 600;} .custom-btn-outline-white {background-color: transparent !important; border: 3px solid var(--white) !important; color: var(--white) !important; font-weight: 600;} .custom-btn-outline:hover {transform: scale(1.1) !important;} .custom-btn-outline:focus {color: var(--black); border-color: var(--black);} .custom-btn-outline:focus:not(:focus-visible) {outline: none} .custom-btn-outline:focus-visible {outline: solid; outline-color: var(--black); outline-width: 5px; outline-offset: 2px;} .custom-btn-close {width: 1.5em; height: 1.5em; border-radius: 0; min-width: auto; background-color: transparent !important; background-image: url(/img/icons/x-lg-blue.svg); background-size: auto 25px; opacity: 1; transform: none !important;} .custom-btn-close:hover {opacity: .35;} .custom-anchor-aim {position: relative;} .custom-anchor-aim a {top: -2em;} .custom-anchor-aim-02 a {position: absolute; top: -10em;} .custom-wrap-contact-form .custom-btn:active {cursor: wait; opacity: .25;} /* Link Arrow */ .custom-wrap-link {height: auto; text-align: center; transform: translateX(-4em); transition: all 1.25s ease-in-out;} .custom-wrap-link.custom-anim {transform: translateX(0);} .custom-link-arrow {display: inline-block; height: 4em; padding-left: 11em; background: url(/img/icon-arrow-blue.svg) no-repeat; background-size: auto 100%; transform: translateY(.5em); transition: all .25s ease-in-out;} .custom-link-arrow:hover {background-position: .75em top;} .custom-link-arrow span {opacity: 0; display: inline-block; font-weight: 600; line-height: 4; transition: all 1s ease-in-out; color: var(--blue-01);} .custom-link-arrow:hover span {opacity: 1;} .custom-link-arrow.custom-white {background-image: url(/img/icon-arrow-white.svg); color: var(--white);} .custom-link-arrow.custom-white span {color: var(--white);} .custom-link-arrow-down {display: inline-block; height: 2.75em; width: 7em; background: url(/img/icon-arrow-blue.svg) no-repeat; background-size: auto 100%; transform: translateY(.5em) rotate(90deg); transition: all .25s ease-in-out;} .custom-link-arrow-down:hover {background-position: .75em top;} .custom-link-arrow-down span {opacity: 0; display: inline-block; font-weight: 600; line-height: 3; transition: all 1s ease-in-out; color: var(--blue-01); transform: translateY(-5.5em) rotate(270deg);} .custom-link-arrow-down:hover span {opacity: 1;} .custom-wrap-link-extern {padding: 2em 0 2em 0;} .custom-wrap-link-extern .custom-link-extern {display: inline-block; line-height: 1.3; transition: all .20s ease-in-out; border-bottom: .115em dotted var(--black);} .custom-anim .custom-wrap-link-extern .custom-link-extern {animation: ScaleLink 1s ease-out; animation-fill-mode: both;} @keyframes ScaleLink { 0% {transform: scale(1);} 100%{transform: scale(1.8);} } .custom-anim .custom-wrap-link-extern .custom-link-extern:hover {opacity: .65;} /* Contact Icon Nav */ .custom-wrap-link-icons .custom-link-icon {display: inline-block; width: 2em; height: 2em; margin-left: .7rem; margin-right: .7rem; background-size: 89%; background-repeat: no-repeat; background-position: center center;} .custom-wrap-link-icons span a {transition: .25s ease-in-out;} .custom-wrap-link-icons span a:hover {opacity: 1; transform: scale(1.15);} .custom-wrap-buttons-contact span {transition: all .25s ease-in-out !important; display: inline-block;} .custom-wrap-buttons-contact button {transition: none !important; transform: none !important;} .custom-wrap-buttons-contact span:hover {opacity: 1 !important; transition: all .25s ease-in-out !important; transform: scale(1.05);} .custom-wrap-buttons-contact button:hover {opacity: 1 !important; transition: none !important;} /* Contact Icon Nav: Contact Row */ .custom-wrap-link-icons .custom-icon-map {background-image: url(/img/geo-alt-blue.svg);} .custom-wrap-link-icons .custom-icon-phone {background-image: url(/img/telephone-blue.svg);} .custom-wrap-link-icons .custom-icon-mail {background-image: url(/img/envelope-blue.svg);} /* Contact Icon Nav: Mobile Nav */ .custom-mobile .custom-icon-map {background-image: url(/img/geo-alt-blue.svg);} .custom-mobile .custom-icon-phone {background-image: url(/img/telephone-blue.svg);} .custom-mobile .custom-icon-mail {background-image: url(/img/envelope-blue.svg);} /* Lists */ .custom-list {list-style: none; margin-left: .125em; padding-left: 0;} .custom-list li {position: relative; margin-left: 0; padding-left: 1em;} .custom-list li::before {content: ' '; display: block; width: .275em; height: .25em; position: absolute; left: .175em; top: .5em; background-color: var(--blue); border-radius: 0;} .custom-list-plus {list-style: none; margin-left: 0; padding-left: 0; margin-left: .125em;} .custom-list-plus li {position: relative; margin-left: 0; padding-left: 1.25em;} .custom-list-plus li::before {content: '+ '; display: block; position: absolute; left: .175em; top: 0; font-weight: 600; transform: scale(1.15); color: var(--blue-01);} .custom-project-text ul {list-style: none; margin-left: 0; padding-left: 0;} .custom-project-text ul li {position: relative; margin-left: 0; padding-left: .85em;} .custom-project-text ul li::before {content: ' '; display: block; width: 4px; height: 4px; position: absolute; left: .175em; top: .6em; background-color: var(--black); border-radius: 4px;} @media screen and (max-width: 1199px) { .custom-link-arrow { padding: 0; background-position: center;} .custom-link-arrow span {display: none;} } @media screen and (max-width: 767px) { .custom-anchor-aim-02 a {position: absolute; top: -10em;} .custom-wrap-link-icons .custom-link-icon {width: 1.5em; height: 1.5em;} .custom-link-arrow {width: 9em; height: 3em; padding: 0; background-position: center;} .custom-link-arrow span {display: none;} .custom-wrap-link-extern .custom-link-extern {font-size: .6rem; font-weight: 600; padding-bottom: 0;} } @media screen and (min-width: 576px) and (max-width: 767px) { } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-link-arrow {height: 4rem; padding-left: 9rem;} .custom-link-arrow:hover {background-position: 0 top;} .custom-link-arrow span {line-height: 3;} .custom-anim .custom-wrap-link-extern .custom-link-extern {font-size: .75em;} } /* ----------------------------------------------------------------------------------------------------------------------------- * WRAPS + CONTAINER ----------------------------------------------------------------------------------------------------------------------------- */ .custom-wrap-max {width: 100%; max-width: 100%; padding-left: 2rem; padding-right: 2rem; text-align: center; margin-left: auto; margin-right: auto;} .custom-wrap-max .custom-wrap-max {padding-right: 0; padding-left: 0;} .custom-wrap-large {max-width: 75em; margin-left: auto; margin-right: auto;} .custom-wrap-medium {max-width: 44em; margin-left: auto; margin-right: auto;} .custom-wrap-small {max-width: 35em; margin-left: auto; margin-right: auto;} @media screen and (max-width: 1199px) { .custom-wrap-max {padding-left: 1.5rem; padding-right: 1.5rem;} } @media screen and (max-width: 767px) { .custom-wrap-max {padding-left: 15px; padding-right: 15px;} } @media screen and (min-width: 576px) and (max-width: 767px) { } @media screen and (min-width: 1200px) and (max-width: 1899px) { } /* ----------------------------------------------------------------------------------------------------------------------------- * SPACER ----------------------------------------------------------------------------------------------------------------------------- */ .custom-spacer-top {height: 7.5em;} @media screen and (max-width: 767px) { .custom-spacer-top {display: none;} } /* ----------------------------------------------------------------------------------------------------------------------------- * FONTS + SIZES + MARGINS ----------------------------------------------------------------------------------------------------------------------------- */ /* HTML FONT SIZES */ h1, .h1 {font-size: 330%; font-weight: 400; line-height: 1.111;} h2, .h2 {font-size: 150%; font-weight: 600; line-height: 1.4; margin-top: 2.5rem; margin-bottom: 2rem; letter-spacing: -.035em;} h3, .h3 {font-size: 100%; font-weight: 600; line-height: 1.5; margin-bottom: 1.5rem; letter-spacing: -.035em;} h4, .h4 {font-size: 100%; font-weight: 600; line-height: 1.5;} h5, .h5 {font-size: 110%; font-weight: 400; line-height: 1.5; letter-spacing: -.035em;} .custom-wrap-intro .custom-text-01, .custom-wrap-intro .custom-text-02 {font-size: 5.75em; font-weight: 600; letter-spacing: -.055em;} .custom-claim-title {font-size: 1.6em; letter-spacing: -.0125em; margin-bottom: 3rem; line-height: 1.5; font-weight: 300; padding-right: .5em;} .custom-wrap-title {font-size: 3.5em; letter-spacing: -.045em; margin-bottom: 3.25rem; line-height: 1.2; font-weight: 600;} .custom-project-title {font-size: .75em; letter-spacing: 0; margin-top: 0; margin-bottom: 1.125rem; font-weight: 400;} .custom-text-project-title {font-size: 1.575em; letter-spacing: -.035em; margin-top: 0; margin-bottom: 1.125rem; font-weight: 600;} .custom-contact-title {font-size: 3.5em; letter-spacing: -.03em; margin-top: 0; margin-bottom: 1.5rem; line-height: 1.2;} .custom-contact-title .custom-text-grey {font-size: 70%;} .custom-news-title {font-size: 1.625em; letter-spacing: -.015em; margin-top: 0; margin-bottom: 1.125rem; font-weight: 600;} .custom-modal-title {font-size: 2.75em; letter-spacing: -.04em; margin-top: -.5rem; margin-bottom: .25rem; padding-right: 4rem; font-weight: 600; line-height: 1.1;} .custom-page-title {font-size: 4.825em; letter-spacing: -.04em; margin-top: 0; margin-bottom: 0; margin-left: -.25rem; font-weight: 600; line-height: 1;} .custom-page-teaser h1, .custom-page-teaser .h1, .custom-page-teaser h2, .custom-page-teaser .h2 {font-size: 1.5em; letter-spacing: -.0125em; line-height: 1.5; font-weight: 300; margin-top: 0; margin-bottom: 0;} article {padding-top: 1em; padding-bottom: 2em;} article .custom-overline {font-size: 1.5em; font-weight: 400; line-height: 1.5; color: var(--grey); margin-bottom: .375rem; letter-spacing: -.045em;} article .custom-title {font-size: 2.75em; letter-spacing: -.035em; margin-top: 0; margin-bottom: 1.5rem; line-height: 1.2; font-weight: 600;} .custom-text {font-size: 1em; font-weight: 400; letter-spacing: 0; margin-bottom: 0; line-height: 1.5;} .custom-text-sm {font-size: .75em;} .custom-text-light {font-weight: 300; letter-spacing: -0.06em;} .custom-letter-spacing {letter-spacing: -.035em;} .custom-header .custom-navbar .nav-link {font-weight: 600; font-size: 1em; letter-spacing: -.01em; box-shadow: none; line-height: 1.5;} .custom-header .custom-navbar .nav-link:hover {color: var(--black) !important;} .custom-header .custom-navbar .nav-link {font-weight: 600; font-size: 1em; letter-spacing: -.01em; box-shadow: none; line-height: 1.5;} .custom-header .custom-navbar .nav-link:focus:not(:focus-visible) {outline: none} .custom-header .custom-navbar .nav-link:focus-visible {outline: solid; outline-color: var(--black); outline-width: 6px; outline-offset: 0px;} .custom-header .custom-navbar .custom-active .nav-link {color: var(--black) !important;} .custom-header .custom-navbar .custom-active .nav-link:hover {color: var(--grey) !important;} /* .custom-anchor-nav a {display: block; font-size: 1.25em; font-weight: 600; transform-origin: top right; letter-spacing: -.035em; transition: font-size 0ms ease-in-out;} .custom-anchor-nav a:hover {color: var(--grey); transform: translateY(-.125rem) scale(1.175); font-weight: 400;} .custom-anchor-nav a.custom-active {font-size: 4.825em; font-weight: 300; letter-spacing: -.06em; margin-top: -.2em; margin-bottom: -.2em; transform: translateY(-.025em); color: var(--grey); opacity: .8;} .custom-anchor-nav a.custom-active:hover {color: var(--grey); transform: scale(1); transform: translateY(-.025em)} */ .custom-anchor-nav a {display: inline-block; font-size: 1.25em; transform-origin: top right; letter-spacing: -.035em; position: relative; z-index: 1; transition: none !important; max-width: calc(100vw - 1.75rem);} .custom-anchor-nav a:hover {transition: none !important;} .custom-anchor-nav a span {display: block; white-space: nowrap; transform-origin: center right; transition: color 50ms ease-in-out; font-weight: 600;} .custom-anchor-nav a:hover span {color: var(--grey); transform: translateY(0) scale(1.175); font-weight: 400;} .custom-anchor-nav a.custom-active {font-size: 13.135em; font-weight: 600; letter-spacing: -.06em; margin-left: -1.15rem; margin-top: -.4em; margin-bottom: -.4em; transform: translateY(-.025em); color: var(--grey-01); z-index: 0; animation-name: FadeIn; animation-duration: .75s; animation-delay: .05s; animation-iteration-count: 1; animation-fill-mode: both; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} .custom-anchor-nav a.custom-active .custom-display {display: none !important;} .custom-anchor-nav a.custom-active {pointer-events: none; cursor: default; overflow: hidden;} .custom-anchor-nav a.custom-activ span {transition: none;} .custom-anchor-nav a.custom-active:hover span {transition: none;} .custom-body-project .custom-page-title {font-size: 3.825em;} .custom-body-contact .custom-text-01 {font-size: 4.825em; font-weight: 600; letter-spacing: -.045em;} @media screen and (max-width: 767px){ html {font-size: 18px;} h2, .h2 {font-size: 1.5rem; line-height: 1.2;} h3, .h3 {line-height: 1.2;} .custom-wrap-intro .custom-text-01, .custom-wrap-intro .custom-text-02 {font-size: 10.25vw;} .custom-wrap-intro .custom-text-02 {margin-top: 2.5rem !important;} .custom-wrap-title {font-size: 2.05em;} .custom-claim-title {font-size: 1.22em; line-height: 1.4; padding-right: 0;} .custom-project-title {font-size: 1rem; padding-top: .5em;} .custom-contact-title {} .custom-news-title {} .custom-modal-title {font-size: 1.75em; line-height: 1.15; padding-right: 2em; margin-top: -.025rem;} .custom-page-title {font-size: 2.05em; line-height: 1.1; margin-bottom: .5rem; margin-left: 0;} .custom-page-teaser h1, .custom-page-teaser .h1, .custom-page-teaser h2, .custom-page-teaser .h2 {font-size: 1.25em;} .custom-contact-title {font-size: 2.05em;} article {padding-top: 2em;} article .custom-overline {margin-bottom: .125rem; font-size: 1.25rem;} article .custom-title {font-size: 1.5em; margin-bottom: 1.15rem;} .custom-header .custom-navbar .nav-link {padding-top: 0; padding-bottom: 0; margin-top: -.275rem; margin-bottom: -.15rem; font-size: 2.05em; font-weight: 600; letter-spacing: -.04em;} .custom-header .custom-navbar .custom-active .nav-link {color: var(--black) !important;} .custom-anchor-nav a {font-size: 1.25em !important;} .custom-anchor-nav a:hover {transform: none !important; font-size: inherit; color: var(--blue-01); font-weight: 600;} .custom-anchor-nav a.custom-active {transform: none !important; font-size: inherit; color: var(--blue-01); font-weight: 600;} .custom-anchor-nav a:hover span {transform: none !important; font-size: inherit; color: var(--blue-01); font-weight: 600;} .custom-body-project .custom-page-title {font-size: 2.05em;} .custom-body-contact .custom-wrap-intro .custom-text-01, .custom-body-contact .custom-wrap-intro .custom-text-02 {font-size: 2.125em; margin-bottom: .5rem;} } @media screen and (min-width: 576px) and (max-width: 767px){ .custom-wrap-intro .custom-text-01, .custom-wrap-intro .custom-text-02 {font-size: 6.65vw;} .custom-wrap-intro .custom-text-02 {margin-top: 1rem !important;} .custom-claim-title {font-size: 1.25em;} } @media screen and (min-width: 768px) and (max-width: 1199px) { html {font-size: 17px;} body {} .custom-header, .custom-spacer-top {font-size: 1rem;} .custom-wrap-intro {font-size: .95vw;} .custom-wrap-claim {font-size: .7rem;} .custom-wrap-facts {font-size: .7rem;} .custom-wrap-KISS-animation {font-size: 53%;} .custom-header .custom-navbar .nav-link {font-size: 1.125rem} .custom-wrap-contact .custom-contact-title {font-size: 2.5rem;} .custom-header .custom-navbar .nav-link {} .custom-wrap-intro .custom-text-01, .custom-wrap-intro .custom-text-02 {font-size: 7.75em;} .custom-claim-title {font-size: 1.75em;} .custom-wrap-title {font-size: 2.5em;} .custom-project-title {} .custom-contact-title {} .custom-news-title {} .custom-modal-title {font-size: 1.75rem;} .custom-page-title {font-size: 2.75em;} .custom-page-teaser h1, .custom-page-teaser .h1 {font-size: 1.25em;} .custom-body-project .custom-page-title {font-size: 2.5rem;} article {} article .custom-overline {font-size: 1.2em;} article .custom-title {font-size: 1.4em; margin-bottom: 1.15rem;} .custom-anchor-nav a {font-size: 1.125em;} .custom-anchor-nav a.custom-active {font-size: 15vw; margin-left: -.675rem;} .custom-anchor-nav a:hover {transform: none !important; font-size: 1.125em; color: var(--blue-01); font-weight: 600;} .custom-anchor-nav a:hover span {transform: none !important; font-size: inherit; color: var(--blue-01); font-weight: 600;} } @media screen and (min-width: 1200px) and (max-width: 1899px) { html {font-size: 18px;} body {} .custom-header, .custom-spacer-top {font-size: 1rem;} .custom-wrap-intro {font-size: .95vw;} .custom-wrap-claim {font-size: .7rem;} .custom-wrap-facts {font-size: .7rem;} .custom-wrap-KISS-animation {font-size: 1vw;} .custom-header .custom-navbar .nav-link {font-size: 1.225rem} .custom-wrap-contact .custom-contact-title {font-size: 2.75rem;} .custom-wrap-news .custom-wrap-title {font-size: 2.75rem; margin-bottom: 4rem;} .custom-header .custom-navbar .nav-link {} .custom-wrap-intro .custom-text-01, .custom-wrap-intro .custom-text-02 {font-size: 7em;} .custom-claim-title {font-size: 1.95vw;} .custom-body-contact .custom-text-01 {font-size: 6em;} .custom-anchor-nav a.custom-active {font-size: 15vw; margin-left: -1.15rem;} } @media screen and (min-width: 1200px) and (max-width: 1900px) { .custom-wrap-page-intro .custom-page-title {font-size: 4.5vw;} article .custom-title {font-size: 2.75vw;} } @media screen and (min-width: 1900px) { html {font-size: 1.15vw;} body {} .custom-header, .custom-spacer-top, .custom-wrap-intro, .custom-wrap-claim, .custom-wrap-facts, .custom-wrap-KISS-animation {} } @media screen and (min-width: 768px) and (orientation: portrait) { .custom-wrap-intro .custom-text-01, .custom-wrap-intro .custom-text-02 {font-size: 9em;} .custom-claim-title {font-size: 2.25em;} } /* ----------------------------------------------------------------------------------------------------------------------------- * HEADER + LOGO + BODY TOP PADDING ----------------------------------------------------------------------------------------------------------------------------- */ body {} .custom-header {z-index: 10; position: absolute; padding-top: 1.5em; top: 0; left: 0; width: 100%;} .custom-header.custom-minified {position: fixed !important; display: block !important; width: 100% !important; padding-top: .4em; margin-top: -5em; opacity: 1; height: 3em; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 4; box-shadow: 0px 0px 17px -7px rgba(0,0,0,0.15); animation-name: SlideIn; animation-duration: .85s; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} .custom-header.custom-minified-visible {margin-top: 0; opacity: 1;} /* Logo --------------------------------------------------------------------------------------------------------------------- */ header .custom-logo {display: inline-block; width: auto; height: 4em; margin-right: 0; -webkit-transition:none !important; -moz-transition:none !important; -o-transition:none !important; transition:none !important;} header .custom-logo img:hover {transform: scale(1.125);} header .custom-logo img {height: 100%; width: auto; animation-fill-mode: forwards; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;} /* Header minified----------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { .custom-header.custom-minified .custom-logo {height: 2.125em; margin-right: 0; transform: translateY(0);} .custom-header.custom-minified .custom-navbar-expand {height: 100%; margin-top: 0; padding-top: 0;} } @media screen and (max-width: 1199px) { body {} .custom-header {padding-top: 1.5em; top: 0; width: 100%;} .custom-header .custom-logo {height: 65px; transform: translateY(0);} } @media screen and (max-width: 767px) { body {padding-top: 80px;} .custom-header {height: 80px; top: 0; padding-top: 0; width: 100%;} .custom-header.custom-minified {height: 80px; margin-top: 0; padding-top: 0; background: rgba(255,255,255,.92);} .custom-header.custom-position-fixed-mobile {position: fixed; opacity: 1; margin-top: 0; animation: none;} .custom-header .custom-logo {height: 60px; margin-top: 10px; margin-right: 0; margin-left: 0; transform: translateY(0);} } @media screen and (min-width: 576px) and (max-width: 767px) { } /* ----------------------------------------------------------------------------------------------------------------------------- * NAV ----------------------------------------------------------------------------------------------------------------------------- */ nav ul {margin: 0; padding: 0;} nav ul li {margin: 0; padding: 0; list-style: none;} nav ul li a {display: inline-block; width: auto;} nav ul li a {display: inline-block; width: auto;} nav a {color: var(--blue-01) !important;} nav a:hover {} nav .container-fluid {padding-right: 0; padding-left: 0;} /* Main Nav ------------------------------------------------------------------------------------------------------------------ */ .custom-wrap-navbar-expand {flex: 1;} .custom-navbar {flex: 1; padding-top: 0; margin-top: -.795rem;} .custom-navbar ul {margin: 0; padding: 0;} .custom-navbar ul li {margin: 0; padding: 0; list-style: none;} .custom-navbar ul li a {display: inline-block; width: auto; padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x);} .custom-navbar a:focus, .custom-navbar a:active {color: var(--blue-01) !important; background-color: transparent !important;} .custom-navbar a.active {color: var(--blue-01) !important; background-color: transparent !important;} .custom-navbar .display-mobile {display: none;} /* Main Nav (Header only) ----------------------------------------------------------------------------------------------------------------- */ .custom-header .custom-mobile {display: none;} .custom-header .custom-navbar .nav-item {margin-right: 1em;} .custom-header .custom-wrap-link-icons {margin-top: 40px !important; margin-left: -10px;} /* Legal Nav ------------------------------------------------------------------------------------------------------ */ .custom-header .custom-navbar-legal {margin-top: 1.5rem; display: flex; justify-content: flex-end !important; font-size: 95%;} .custom-header .custom-navbar-legal ul {width: auto;} .custom-header .custom-navbar-legal ul li {display: inline;} .custom-header .custom-navbar-legal a {text-transform: none !important;} .custom-header .custom-navbar-legal a:hover {color: var(--black) !important;} .custom-header .custom-navbar-legal li.custom-05, .custom-header .custom-navbar-legal li.custom-06 {display: none;} .custom-header .custom-mobile .custom-navbar-legal {font-size: 100%;} .custom-header .custom-mobile .custom-navbar-legal li {display: block; text-align: left; font-size: 1rem; padding-left: 0;} .custom-header .custom-mobile .custom-navbar-legal li a {text-transform: none; font-size: 1rem;} /* Main Nav: Toggler (mobile) ------------------------------------------------------------------------------------------------------ */ .custom-navbar .navbar-toggler {border: none; border-radius: 0;} .custom-navbar .custom-toggler-icon {display: inline-block; width: 30px; height: 30px; background: url(/img/list-blue.svg) center center no-repeat; background-size: 100% 28px;} .custom-navbar .navbar-toggler[aria-expanded="true"] .custom-toggler-icon {background-image: url(/img/x-lg-blue.svg); background-size: 100% 24px;} @media screen and (min-width: 768px) { .custom-navbar.custom-navbar-expand {flex-wrap: nowrap; justify-content: flex-start;} .custom-navbar.custom-navbar-expand .navbar-collapse {display: flex !important; flex-basis: auto;} .custom-navbar.custom-navbar-expand .navbar-nav {flex-direction: row; width: 100%;} .custom-navbar.custom-navbar-expand .navbar-nav .nav-link {padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x);} .custom-navbar.custom-navbar-expand .navbar-toggler {display: none;} .custom-navbar.custom-navbar-expand {animation: NavMoveDown 1s ease-out; transform: translateY(-3em); opacity: 0; animation-delay: 1s; animation-fill-mode: forwards;} @-webkit-keyframes NavMoveDown { 0% {transform: translateY(-3em); opacity: 0;} 100%{transform: translateY(0); opacity: 1;} } } @media screen and (max-width: 991px) { } @media screen and (max-width: 767px) { .custom-header .custom-navbar .collapsing {transition: none !important;} .custom-wrap-navbar-expand {height: 100%; position: relative;} .custom-header .custom-wrap-navbar-expand .custom-wrap-link-icons {justify-content: left !important;} .custom-navbar-expand {position: absolute !important; left: 0; top: 0; z-index: 100; width: 100%;} .custom-navbar-expand .custom-navbar-nav-main {margin-top: 32px; width: 100%; height: calc(100vh - 25px); padding-left: 15px; padding-bottom: 50px; overflow-y: auto;} .custom-navbar-expand .navbar-collapse {position: fixed; left: 0; top: 0; background: var(--white); width: 360px; max-width: 100%; z-index: 0; box-shadow: 0px 0px 50px -7px rgba(0,0,0,0.15);} .custom-navbar-expand .navbar-collapse.show::after {content:' '; display: block; width: calc(100vw - 360px); height: 100vh; top: 0; left: 360px; position: absolute; z-index: 0; background-color: rgba(225,225,225,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} .close-navbar-toggler {display: block; position: absolute; top: 1.75rem; right: 0; z-index: 100;} .close-navbar-toggler.collapsed {} .close-navbar-toggler .custom-icon-close-container {width: 2.5em; height: 2.5em; cursor: pointer;} .close-navbar-toggler .custom-icon-close-container .top {height: 2px; width: 36px; position: absolute; margin-top: 20px; margin-left: 3px; background-color: var(--blue-01); transform: translate(0, -5px); transition: all .3s ease-in;} .custom-icon-close-container .bottom {height: 2px; width: 36px; position: absolute; margin-top: 20px; margin-left: 3px; background-color: var(--blue-01); transform: translate(0, 5px); transition: all .3s ease-in;} .close-navbar-toggler[aria-expanded="true"] {right: calc(100% - 265px);} .close-navbar-toggler[aria-expanded="true"] .custom-icon-close-container .top {transform: rotate(30deg);} .close-navbar-toggler[aria-expanded="true"] .custom-icon-close-container .bottom {transform: rotate(-30deg);} .close-navbar-toggler[aria-expanded="true"]:focus .custom-icon-close-container .top, .close-navbar-toggler[aria-expanded="true"]:active .custom-icon-close-container .top {transform: rotate(30deg);} .close-navbar-toggler[aria-expanded="true"]:focus .custom-icon-close-container .bottom, .close-navbar-toggler[aria-expanded="true"]:active .custom-icon-close-container .bottom {transform: rotate(-30deg);} .close-navbar-toggler[aria-expanded="true"]:hover .top {transform: rotate(0deg) !important;} .close-navbar-toggler[aria-expanded="true"]:hover .bottom {transform: rotate(-0deg) !important;} .custom-navbar-expand .nav-item {margin-right: 0; padding-left: 0; display: inline-block; text-align: left;} .custom-navbar-expand .nav-link {display: inline-block; font-size: 1rem; padding: 12px 0; font-size: 1.625em;} .custom-navbar-expand .custom-mobile {display: block !important; text-align: left;} .custom-navbar-expand .custom-mobile .custom-nav-link-home {display: inline-block; margin-bottom: 2.06rem;} .custom-navbar-expand .custom-mobile .custom-contact-data, .custom-navbar-expand .custom-mobile .custom-opening-hours {display: block;} .custom-navbar-expand .custom-mobile .custom-navbar-legal {margin-top: 22px;} .custom-navbar-expand .custom-mobile .custom-navbar-legal ul {width: 100%;} .custom-navbar-expand .custom-mobile .custom-navbar-legal ul li a {padding-left: 0; padding-right: 0; line-height: 1.5;} .custom-navbar-expand .custom-mobile .custom-navbar-legal .nav-link {padding: 5px 0; color: var(--black) !important;} .custom-navbar-expand .custom-mobile .custom-contact-data {text-align: left; font-size: 18px; line-height: 1.5; margin-top: 25px; color: var(--black);} .custom-navbar-expand .custom-mobile .custom-contact-data a {color: var(--black) !important;} .custom-navbar-expand .custom-mobile .custom-contact-data span {display: block !important;} .custom-navbar-expand .custom-mobile .custom-contact-data .custom-margin{margin-top: 20px;} } @media screen and (min-width: 576px) and (max-width: 767px) { } @media screen and (min-width: 1200px) and (max-width: 1899px) { } /* ----------------------------------------------------------------------------------------------------------------------------- * CONTENT ROWS ----------------------------------------------------------------------------------------------------------------------------- */ .custom-anim-container.custom-anim-move-up {transform: translateY(4em); -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease;} .custom-anim-container.custom-anim {transform: translateY(0); opacity: 1;} .custom-wrap-max > .container {max-width: none; padding: 4.5em 0 5.5em 0;} @media screen and (max-width: 767px) { .custom-wrap-max > .container {padding: 1em 0 3.5em 0;} .custom-anim-container.custom-anim-move-up {transform: translateY(2em); -webkit-transition: all 800ms ease; -moz-transition: all 800ms ease; -o-transition: all 800ms ease; transition: all 800ms ease;} .custom-anim-container.custom-anim {transform: translateY(0); opacity: 1;} } @media screen and (min-width: 576px) and (max-width: 767px) { } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-max > .container {padding: 1em 0 1.5em 0;} } /* ----------------------------------------------------------------------------------------------------------------------------- * INTRO ----------------------------------------------------------------------------------------------------------------------------- */ .custom-wrap-intro {height: 100vh; min-height: 40em; max-height: 55em; /* min-height: 45vw; max-height: 60vw; */ overflow: hidden; position: relative;} .custom-wrap-intro .container {padding: 8em 0 0 0;} .custom-wrap-intro .container .custom-text-01 {margin-left: -.06em;} .custom-wrap-intro .container .custom-text-01 span {white-space: nowrap; line-height: 1.5; margin-top: -.345em;} .custom-wrap-intro .container .custom-text-01 span.custom-line-02 {display: inline-block; font-size: 68%; font-weight: 300; letter-spacing: -.06em; line-height: 1.5; margin-top: -.625em;} .custom-wrap-intro .container .custom-text-02 {padding-top: .7em;} .custom-wrap-intro .container .custom-text-02 span {white-space: nowrap; line-height: 1.5; margin-top: -.65em;} .custom-wrap-intro .container .custom-text-02 span.custom-line-01 {} .custom-wrap-intro .container .custom-text-01 span.custom-line-01 {animation: TextLeftToRight01 1.5s ease-out;} .custom-wrap-intro .container .custom-text-01 span.custom-line-02 {animation: TextLeftToRight01 1.5s ease-out; animation-delay: .25s; animation-fill-mode: both;} @-webkit-keyframes TextLeftToRight01 { 0% {transform: translateX(-4em); opacity: 0;} 50%{transform: translateX(-3em); opacity: 0;} 100%{transform: translateX(0); opacity: 1;} } .custom-wrap-intro .container .custom-text-02 span.custom-line-01 {animation: TextRightToLeft01 1.5s ease-out; animation-delay: .5s; animation-fill-mode: both;} .custom-wrap-intro .container .custom-text-02 span.custom-line-02 {animation: TextRightToLeft01 1.5s ease-out; animation-delay: .75s; animation-fill-mode: both;} .custom-wrap-intro .container .custom-text-02 span.custom-line-03 {animation: TextRightToLeft01 1.5s ease-out; animation-delay: 1s; animation-fill-mode: both;} .custom-wrap-intro .container .custom-text-02 span.custom-line-04 {animation: TextRightToLeft01 1.5s ease-out; animation-delay: 1.25s; animation-fill-mode: both;} @-webkit-keyframes TextRightToLeft01 { 0% {transform: translateX(4em); opacity: 0;} 50%{transform: translateX(3em); opacity: 0;} 100%{transform: translateX(0); opacity: 1;} } @media screen and (max-width: 1920px) { .custom-wrap-intro .container .custom-text-02 {padding-top: .5em;} } @media screen and (max-width: 767px) { .custom-wrap-intro {height: auto; min-height: auto; max-height: none; padding-bottom: 0;} .custom-wrap-intro .container {padding-top: .825em; padding-bottom: 2em;} .custom-body-home .custom-wrap-intro .container {min-height: 104vw;} } @media screen and (max-width: 575px) { .custom-body-home .custom-wrap-intro .container {min-height: auto; padding-bottom: 18vw;} } @media screen and (min-width: 576px) and (max-width: 767px) { .custom-wrap-intro {height: auto; min-height: auto; padding-bottom: 0em;} .custom-wrap-intro .container {padding-bottom: 1rem;} .custom-body-home .custom-wrap-intro .container {min-height: auto;} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-intro {min-height: calc(45em + 125px); max-height: calc(52em + 125px);} .custom-wrap-intro .container {padding: 125px 0 2.5em 0;} } @media screen and (min-width: 768px) and (orientation: portrait) { .custom-wrap-intro {min-height: 70vw !important; max-height: auto;} } @media screen and (min-width: 1200px) and (max-width: 1899px) { .custom-wrap-intro {min-height: 54em; max-height: 54em;} .custom-wrap-intro .container {padding: 8.5rem 0 1rem 0;} } @media screen and (min-width: 768px) and (max-width: 1899px) and (max-height: 49vw) { /* .custom-wrap-intro {height: 55em;} */ } /* ----------------------------------------------------------------------------------------------------------------------------- * Claim ----------------------------------------------------------------------------------------------------------------------------- */ .custom-wrap-claim {color: #fff; text-align: left; position: relative; z-index: 1;} .custom-wrap-claim .container {padding: 3.5em 0 4em 0;} .custom-wrap-claim.custom-anim-color {background-color: #1e41b4;} .custom-wrap-claim.custom-anim {animation: BgColorChange01 2s ease-out; animation-fill-mode: both;} @keyframes BgColorChange01 { 0% {background-color: #1e41b4;} 100%{background-color: var(--blue-01);} } .custom-wrap-claim .custom-anim-move-up02 {-webkit-transition: all 1200ms ease; -moz-transition: all 1200ms ease; -o-transition: all 1200ms ease; transition: all 1200ms ease;} /* VAR 01 - mit Moving up nach Scrolling */ /* .custom-wrap-claim .custom-anim-move-up02.custom-anim {transform: translateY(-8.75em);} */ /* VAR 02: */ .custom-wrap-claim .custom-anim-move-up02.custom-anim {transform: translateY(0);} .custom-wrap-claim .custom-wrap-img {width: 100%; height: 0; position: relative; padding-bottom: 100%; overflow: hidden; margin-bottom: -12em; animation: MoveUpClaimPic 1.5s ease-out; animation-delay: 1s; animation-fill-mode: both;} @keyframes MoveUpClaimPic { 0% {transform: translateY(0);} /* VAR 01: 100% {transform: translateY(-10em);} */ /* VAR 02: */ 100% {transform: translateY(-18.7105em);} } .custom-wrap-claim .custom-wrap-claim-inner {padding: 0 2.5em;} .custom-wrap-claim .custom-wrap-claim-inner .custom-link-arrow {} /* JS Animation Bildwechsel */ .custom-slideset {background: var(--white); height: 100%; width: 100%; overflow: hidden; position: absolute;} .custom-slideset img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} /* CSS Animation Bildwechsel: Special Time Units*/ .custom-slideset-css-animation {background: transparent; height: 100%; width: 100%; overflow: hidden; position: absolute;} .custom-slideset-css-animation img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} .custom-slideset-css-animation > * {opacity: 0;} .custom-slideset-css-animation > *:nth-child(1) {animation: 6s AutoplaySpecialTimeUnit ease-in-out; animation-delay: 0s;} .custom-slideset-css-animation > *:nth-child(2) {animation: 12s Autoplay infinite ease-in-out; animation-delay: 6s} .custom-slideset-css-animation > *:nth-child(3) {animation: 12s Autoplay infinite ease-in-out; animation-delay: 8s} .custom-slideset-css-animation > *:nth-child(4) {animation: 12s Autoplay infinite ease-in-out; animation-delay: 10s} .custom-slideset-css-animation > *:nth-child(5) {animation: 12s Autoplay infinite ease-in-out; animation-delay: 12s} .custom-slideset-css-animation > *:nth-child(6) {animation: 12s Autoplay infinite ease-in-out; animation-delay: 14s} .custom-slideset-css-animation > *:nth-child(7) {animation: 12s Autoplay infinite ease-in-out; animation-delay: 16s} @keyframes AutoplaySpecialTimeUnit { 0% {opacity: 0;} 20% {opacity: 0;} 25% {opacity: 1;} 99.8% {opacity: 1;} 100% {opacity: 0;} } @media screen and (max-width: 575px) { @keyframes AutoplaySpecialTimeUnit { 0% {opacity: 0;} 5% {opacity: 0;} 20% {opacity: 1;} 99.8% {opacity: 1;} 100% {opacity: 0;} } } @keyframes Autoplay { 0% {opacity: 0;} 0.05% {opacity: 1;} 16.1% {opacity: 1;} /* (6 Slides = 16.6% - 0.5% Fading-Karenz */ 17.6% {opacity: 0;} /* (6 Slides = 16.6% + 1% Fading-Karenz */ 100% {opacity: 0;} } /* CSS Animation Bildwechsel: 8 Slides = 12.5 % -0.5%/+1.5% Fading-Karenz */ /* .custom-slideset-css-animation > * {opacity: 0; animation: 16s Autoplay infinite ease-in-out;} @keyframes Autoplay { 0% {opacity: 01;} 0.05% {opacity: 1;} 12% {opacity: 1;} 14% {opacity: 0;} 100% {opacity: 0;} } .custom-slideset-css-animation > *:nth-child(1) {animation-delay: 0s} .custom-slideset-css-animation > *:nth-child(2) {animation-delay: 2s} .custom-slideset-css-animation > *:nth-child(3) {animation-delay: 4s} .custom-slideset-css-animation > *:nth-child(4) {animation-delay: 6s} .custom-slideset-css-animation > *:nth-child(5) {animation-delay: 8s} .custom-slideset-css-animation > *:nth-child(6) {animation-delay: 10s} .custom-slideset-css-animation > *:nth-child(7) {animation-delay: 12s} .custom-slideset-css-animation > *:nth-child(8) {animation-delay: 14s} */ /* BS Animation Bildwechsel */ .custom-carousel-images {background: transparent; height: 100%; width: 100%; overflow: hidden; position: absolute;} .custom-carousel-images .carousel-inner {height: 100%;} .custom-carousel-images .carousel-item {height: 100%; transition: transform .2s ease-in-out;} .custom-carousel-images .carousel-item img {height: 100%; width: 100%; opject-fit: cover;} @media screen and (max-width: 1199px) { .custom-wrap-claim {background-color: var(--blue-01) !important;} .custom-wrap-claim.custom-anim {animation: none; background-color: var(--blue-01);} } @media screen and (min-width: 768px) { .custom-wrap-claim .custom-wrap-claim-inner .custom-link-arrow {margin-left: -4rem;} } @media screen and (min-width: 1200px) and (max-width: 1899px) { .custom-wrap-claim .custom-wrap-img {/* VAR 02: */ margin-top: calc(-20.45vw + 13.25rem);} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-claim .custom-wrap-claim-inner .custom-wrap-link {margin-top: 2rem;} .custom-wrap-claim .custom-wrap-img {/* VAR 02: */ margin-top: calc(-11.4vw + 10.5rem);} } @media screen and (max-width: 767px) { .custom-wrap-claim .container {padding-top: 2.5em; padding-bottom: 3.5em;} .custom-wrap-claim .custom-wrap-claim-inner {padding: 0 1.5rem;} .custom-wrap-claim .custom-wrap-claim-inner .custom-wrap-link {margin-top: 2rem;} .custom-wrap-claim .custom-col-01 {margin-bottom: -6rem;} .custom-wrap-claim .custom-wrap-img {animation-delay: 1s;} .custom-wrap-claim .custom-anim-move-up02 {transform: translateY(0) !important;} .custom-wrap-claim .custom-anim-move-up02.custom-anim {transform: translateY(0) !important;} .custom-wrap-claim .custom-wrap-img {animation: MoveUpClaimPic 1s ease-out; animation-delay: .25s; animation-fill-mode: both; /* VAR 02: */ margin-top: calc(-10.15vw + 17rem);} } @media screen and (max-width: 575px) { .custom-wrap-claim .custom-wrap-claim-inner {} .custom-wrap-claim .custom-wrap-img {margin-top: calc(-19vw + 14.5em);} .custom-wrap-claim .custom-wrap-img > div {transform: scale(.75);} } @media screen and (min-width: 576px) and (max-width: 767px) { .custom-wrap-claim .container {padding-top: 2em; padding-bottom: 4em;} .custom-wrap-claim .custom-wrap-claim-inner {padding: 0 .5em 0 0;} .custom-wrap-claim .custom-anim-move-up02 {height: auto;} .custom-wrap-claim .custom-wrap-claim-inner .custom-link-arrow {margin-left: -12rem;} } @media screen and (min-width: 768px) and (orientation: portrait) { .custom-wrap-claim {background-color: var(--blue-01) !important;} .custom-wrap-claim.custom-anim {animation: none} @keyframes BgColorChange01 { 0% {background-color: #3439CF;} 100%{background-color: var(--blue-01);} } .custom-wrap-claim .custom-anim-container.custom-anim-move-up {transform: translateY(0) !important;} .custom-wrap-claim .container {padding: 5em 0 6em 0;} } /* ----------------------------------------------------------------------------------------------------------------------------- * FACTS ----------------------------------------------------------------------------------------------------------------------------- */ .custom-wrap-facts {background-color: #fff; z-index: 0;} .custom-wrap-facts .container {padding: 5em 0 0 0;} .custom-wrap-facts .custom-wrap-counter {margin-top: .25em; margin-bottom: 3.25em;} .custom-wrap-facts .custom-wrap-counter .custom-number {font-size: 8.45em; font-weight: 600; letter-spacing: -.045em;} .custom-wrap-facts .custom-col-02 {padding-left: 2.25em;} .custom-wrap-facts ul {min-height: 35em; font-size: .8975em; font-weight: 500; margin-bottom: 1.5rem; margin-top: 1.25rem;} .custom-wrap-facts ul li {font-size: 1.465em; font-weight: 600; letter-spacing: -.04em; min-height: 1em; padding-left: .25em; margin-left: 0; margin-bottom: .7em;} .custom-wrap-facts ul li a {display: inline-block;} .custom-wrap-facts ul li a span {display: inline-block; position: relative; transition: margin .25s ease;} .custom-wrap-facts ul li a:hover {opacity: .55 !important;} .custom-wrap-facts ul li a:hover > span {margin-left: 0;} .custom-wrap-facts ul li a:hover > span:after {content: ' '; display: block; height: .35em; width: 100%; position: absolute; left: 0; bottom: 0; overflow: hidden; border-top: 1px dotted var(--black);} .custom-wrap-facts ul.custom-anim li {animation: FadeIn .35s ease-out; animation-duration: .5s; animation-iteration-count: 1; animation-fill-mode: both; animation-delay: 0;} .custom-wrap-facts ul li.custom-anim span {display: inline-block; transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -moz-transform-origin: 0 50%; animation: ScaleList .75s ease-out; animation-iteration-count: 1; animation-fill-mode: both; animation-delay: 0;} @keyframes ScaleList { 0% {transform: scale(1); color: var(--grey);} 100% {transform: scale(2.3); color: var(--black);} } .custom-wrap-facts .custom-title {font-size: 3.25em; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; margin-bottom: 2rem;} .custom-wrap-facts .custom-subtitle {font-size: 1.5em; font-weight: 600; line-height: 1.4; margin-bottom: .75rem;} .custom-wrap-facts .custom-text {font-size: 1em; font-weight: 400; line-height: 1.4; margin-top: -.25em !important; margin-bottom: 1.4rem; margin-top: 0;} .custom-wrap-facts .custom-wrap-link {margin-top: 3rem; padding-left: .75em;} @media screen and (max-width: 767px) { .custom-wrap-facts .container {padding-top: 3em;} .custom-wrap-facts .custom-wrap-counter {margin-top: 0; margin-bottom: 2.25em} .custom-wrap-facts .custom-wrap-counter .custom-number {font-size: 6.825em;} .custom-wrap-facts ul {min-height: 39em; font-size: 2.2vw; margin-bottom: 0;} .custom-wrap-facts ul li {font-size: 1.695em; padding-left: 0; line-height: 1.5;} .custom-wrap-facts .custom-col-02 {padding-left: 1rem;} .custom-wrap-facts .custom-wrap-link {padding-left: 0; margin-top: 1.5rem;} .custom-wrap-facts .custom-link-arrow {margin-left: auto; margin-right: auto;} .custom-wrap-facts .custom-link-arrow span {display: none;} .custom-wrap-facts .custom-text {margin-bottom: .75rem;} } @media screen and (min-width: 576px) and (max-width: 767px) { .custom-wrap-counter {width: 33.333%;} .custom-wrap-facts .custom-wrap-counter .custom-number {font-size: 14vw;} .custom-wrap-facts ul {font-size: .7em;} .custom-wrap-facts .custom-wrap-link {text-align: center !important; padding-left: 2em;} } @media screen and (min-width: 768px) and (max-width: 1199px) { } /* ----------------------------------------------------------------------------------------------------------------------------- * PROJECTS ----------------------------------------------------------------------------------------------------------------------------- */ /* Project (images) */ .custom-wrap-projects .container {padding-bottom: 1em; overflow: hidden;} .custom-wrap-projects .custom-wrap-items {margin-top: 0rem; padding-left: 3rem; padding-right: 3rem;} .custom-wrap-projects .custom-wrap-title {margin-top: 0rem; margin-bottom: 2rem; font-size: 1em; font-weight: 400; letter-spacing: 0;} .custom-wrap-projects .custom-inner-wrap-items {} .custom-wrap-projects .custom-item {position: relative; margin-bottom: 8px;} .custom-wrap-projects .custom-item a {position: relative;} .custom-wrap-projects .custom-item.custom-anim {animation-name: FadeIn; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 1) {animation-delay: .2s;} .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 2) {animation-delay: .4s;} .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 3) {animation-delay: .6s;} .custom-wrap-projects .custom-wrap-img {display: block; width: 100%; height: 0; position: relative; padding-bottom: 95%; overflow: hidden; text-align: center;} .custom-wrap-projects .custom-wrap-img picture {width: 100%;} .custom-wrap-projects .custom-wrap-img .custom-bg-img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: 1s ease;} .custom-wrap-projects .custom-wrap-img .custom-img {position: absolute; height: 100%; width: 100%; margin-top: 2em; z-index: 2; display: flex; justify-content: center; transition: .5s ease; transform: translateY(28em);} .custom-wrap-projects .custom-item.custom-anim .custom-img {animation: MoveUpRefPic01 1.5s ease-out; animation-fill-mode: both;} @keyframes MoveUpRefPic01 { 0% {transform: translateY(28em);} 100%{transform: translateY(0);} } .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 1) .custom-img {animation-delay: .5s;} .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 2) .custom-img {animation-delay: 1s;} .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 3) .custom-img {animation-delay: 1.5s;} .custom-wrap-projects .custom-item .custom-wrap-img .custom-img img {width: 78%; /* box-shadow: 0px 0px 50px rgba(135,135,135,.25); */ transition: .5s ease;} .custom-wrap-projects .custom-anim .custom-item a:hover .custom-wrap-img .custom-bg-img img {transform: scale(1.1); filter: blur(10px); -webkit-filter: blur(10px);} .custom-wrap-projects .custom-anim .custom-item a:hover .custom-wrap-img .custom-img img {transform: translateY(-.75em) scale(1.075); transition: .5s ease;} .custom-wrap-projects .custom-gradient {position: absolute; z-index: 3; width: 100%; height: 1em; background: rgba(0,0,0,.02); background: linear-gradient(0deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,0) 100%);} .custom-wrap-projects .custom-gradient.custom-bottom {bottom: 0;} .custom-wrap-projects .custom-gradient.custom-top {top: 0; transform: rotate(180deg);} .custom-wrap-projects .custom-project-title {margin-top: .5rem; margin-bottom: 0; min-height: 5.5rem;} .custom-wrap-projects .custom-project-title a {color: var(--black);} .custom-wrap-projects .custom-project-title span {border-bottom: .115em dotted transparent;} .custom-wrap-projects .custom-item a:hover .custom-project-title {opacity: .65;} .custom-wrap-projects .custom-item a:hover .custom-project-title span {border-color: var(--black);} .custom-wrap-projects .custom-link-arrow {margin-left: 11em;} /* Project (text) */ .custom-wrap-text-projects .custom-wrap-title {margin-bottom: 3rem; font-size: 1em; font-weight: 400; letter-spacing: 0;} .custom-wrap-text-projects .custom-wrap-items {margin-top: 0rem; padding-left: 3rem; padding-right: 3rem;} .custom-wrap-text-projects .custom-item {padding: 1rem 0 3em 0; border-top: 1px solid var(--grey);} .custom-wrap-text-projects .custom-item:last-of-type {border-bottom: 1px solid var(--grey);} .custom-wrap-text-projects .custom-item .custom-logo {width: 12em; height: 6em; margin-right: 5rem;} .custom-wrap-text-projects .custom-item .custom-logo img {width: 100%; height: 100%; object-fit: contain; object-position: center top;} .custom-wrap-text-projects .custom-item .custom-text {font-size: 85%; margin-top: 1em;} .custom-wrap-text-projects .custom-item .custom-collapse-link h2 {transition: all .25s ease;} .custom-wrap-text-projects .custom-item .custom-collapse-link:hover h2 {opacity: .5;} .custom-wrap-text-projects .custom-item .custom-wrap-link {font-size: 80%; height: 3em; transition: .25s ease;} .custom-wrap-text-projects .custom-item .custom-wrap-link[aria-expanded="true"] {transform: translateY(2em) rotate(90deg);} .custom-wrap-text-projects .custom-item .custom-wrap-link[aria-expanded="true"] .custom-link-arrow span {display: none;} .custom-wrap-text-projects .custom-item .custom-wrap-link[aria-expanded="true"]:hover {transform: translateY(0) rotate(90deg);} .custom-wrap-text-projects .custom-item .custom-wrap-link[aria-expanded="true"]:hover .custom-link-arrowv {transform: none !important} @media screen and (max-width: 767px) { .custom-wrap-projects {margin-top: 2.5rem; padding-left: 1rem; padding-right: 1rem;} .custom-wrap-projects .custom-wrap-title {font-size: 1.25em;} .custom-wrap-projects .custom-wrap-items {padding-left: 0; padding-right: 0;} .custom-wrap-projects .custom-wrap-img .custom-img {margin-top: 2em;} .custom-wrap-projects .custom-item.custom-anim {animation-delay: .2s !important;} .custom-wrap-projects .custom-item.custom-anim .custom-img {animation-delay: .5s !important;} .custom-wrap-text-projects .custom-item .custom-wrap-link {font-size: .675em; margin-top: .5rem !important;} .custom-wrap-text-projects .custom-item .custom-wrap-link[aria-expanded="true"] {display: none !important;} .custom-wrap-text-projects .custom-item .custom-wrap-link[aria-expanded="true"] span {display: none;} .custom-wrap-text-projects .custom-item .custom-wrap-link[aria-expanded="true"]:hover {transform: translateY(1em) rotate(90deg);} .custom-wrap-projects .custom-wrap-link {padding-left: 0;} .custom-wrap-projects .custom-item.custom-anim .custom-img {animation: MoveUpRefPic01 1s ease-out; animation-fill-mode: both;} .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 1) .custom-img, .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 2) .custom-img, .custom-wrap-projects .custom-item.custom-anim:nth-child(3n + 3) .custom-img {animation-delay: 0s;} .custom-wrap-projects .custom-link-arrow {margin-left: 0;} } @media screen and (min-width: 576px) and (max-width: 767px) { .custom-wrap-projects .custom-g-xl {--bs-gutter-x: 2.5rem;} .custom-wrap-projects .custom-item.custom-anim:nth-child(2n + 1) {animation-delay: .2s !important;} .custom-wrap-projects .custom-item.custom-anim:nth-child(2n + 2) {animation-delay: .4s !important;} .custom-wrap-projects .custom-item.custom-anim:nth-child(2n + 1) .custom-img {animation-delay: .1s !important;} .custom-wrap-projects .custom-item.custom-anim:nth-child(2n + 2) .custom-img {animation-delay: .5s !important;} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-projects {padding-bottom: 1.5rem;} .custom-wrap-projects .custom-g-xl {--bs-gutter-x: 2.5rem;} .custom-wrap-projects .custom-wrap-items {margin-top: 4.5rem; padding-left: .75rem; padding-right: .75rem;} } @media screen and (min-width: 768px) and (max-width: 992px) { .custom-wrap-text-projects .custom-item .custom-wrap-link {transform: translateY(-2em);} } @media screen and (max-width: 1199px) { .custom-wrap-text-projects .custom-wrap-items {padding-left: .75em; padding-right: .75em;} .custom-wrap-text-projects .custom-item .custom-logo {height: auto; margin-bottom: 2em; } } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-projects .custom-link-arrow {margin-left: 0;} } /* ----------------------------------------------------------------------------------------------------------------------------- * TEASER ROW: SERVICES ----------------------------------------------------------------------------------------------------------------------------- */ .custom-wrap-teaser-services {padding: 0 .75em 3em .75em; max-width: 100%;} .custom-wrap-teaser-services .custom-col {transition: all .5s ease-in-out; text-decoration: none; margin-top: 5em; border-right: 4px solid var(--white); border-bottom: 4px solid var(--white);} .custom-wrap-teaser-services .custom-col:nth-child(3) {border-right: none;} .custom-wrap-teaser-services .custom-col > div {transition: all .5s ease-in-out; } .custom-wrap-teaser-services .custom-col > div > div {transition: all .5s ease-in-out; padding: 2em 2em 1em 2em; } .custom-wrap-teaser-services.custom-anim .custom-col {margin-top: 0;} .custom-wrap-teaser-services .custom-col h3 {font-size: 1.575em; margin-bottom: 1rem;} .custom-wrap-teaser-services .custom-wrap-link {margin-top: 3rem; padding: 0 0 0 12em;} .custom-wrap-teaser-services a:hover {opacity: .6;} .custom-wrap-teaser-services a.custom-btn:hover {opacity: 1;} .custom-wrap-teaser-services.custom-anim .custom-col:nth-child(1) {background-color: var(--pink-lighter); animation: MoveIn-01 .8s ease-out; animation-delay: .2s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-wrap-teaser-services.custom-anim .custom-col:nth-child(2) {background-color: var(--green-lighter); animation: MoveIn-02 .6s ease-out; animation-delay: .4s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-wrap-teaser-services.custom-anim .custom-col:nth-child(3) {background-color: var(--cyan-lighter); animation: MoveIn-03 .65s ease-out; animation-delay: .5s; animation-iteration-count: 1; animation-fill-mode: both;} @-webkit-keyframes MoveIn-01 { 0% {transform: translateY(.5em); opacity: 0;} 100%{transform: translateY(0); opacity: 1;} } @-webkit-keyframes MoveIn-02 { 0% {transform: translateY(5em); opacity: 0;} 100%{transform: translateY(0); opacity: 1;} } @-webkit-keyframes MoveIn-03 { 0% {transform: translateY(-3em); opacity: 0;} 100%{transform: translateY(0); opacity: 1;} } .custom-wrap-teaser-services .custom-col:nth-child(1) .custom-anim-color.custom-anim {animation: BgColorBlink01 2s ease-out; animation-fill-mode: both;} @keyframes BgColorBlink01 { 0% {background-color: var(--pink-lighter);} 70% {background-color: var(--pink-lighter);} 100% {background-color: var(--grey-01);} } .custom-wrap-teaser-services .custom-col:nth-child(2) .custom-anim-color.custom-anim {animation: BgColorBlink02 2s ease-out; animation-fill-mode: both;} @keyframes BgColorBlink02 { 0% {background-color: var(--green-lighter);} 70% {background-color: var(--green-lighter);} 100% {background-color: var(--grey-01);} } .custom-wrap-teaser-services .custom-col:nth-child(3) .custom-anim-color.custom-anim {animation: BgColorBlink03 2s ease-out; animation-fill-mode: both;} @keyframes BgColorBlink03 { 0% {background-color: var(--cyan-lighter);} 70% {background-color: var(--cyan-lighter);} 100% {background-color: var(--grey-01);} } .custom-wrap-teaser-services .custom-col:nth-child(1) .custom-anim-color > div:hover {background-color: var(--pink-lighter);} .custom-wrap-teaser-services .custom-col:nth-child(2) .custom-anim-color > div:hover {background-color: var(--green-lighter);} .custom-wrap-teaser-services .custom-col:nth-child(3) .custom-anim-color > div:hover {background-color: var(--cyan-lighter);} .custom-home .custom-wrap-hero-img .custom-anim-01 {animation: MoveIn-01 1s ease-out; animation-delay: .5s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-home .custom-wrap-hero-img .custom-anim-02 {animation: MoveIn-02 .875s ease-out; animation-delay: .75s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-home .custom-wrap-hero-img .custom-anim-03 {animation: MoveIn-03 .875s ease-out; animation-delay: .85s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-home .custom-wrap-hero-img .custom-anim-04 {animation: MoveIn-04 .875s ease-out; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: both;} @media screen and (min-width: 768px) and (max-width: 991px) { .custom-wrap-teaser-services .custom-col:nth-child(2) {border-right: none;} .custom-wrap-teaser-services .custom-col:nth-child(3) {border-right: 4px solid var(--white);} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-teaser-services .custom-wrap-link {padding-left: 2rem;} } @media screen and (max-width: 767px) { .custom-wrap-teaser-services .custom-col {border-right: none;} .custom-wrap-teaser-services .custom-col > div > div {padding: 2em 1em .5em 1em;} .custom-wrap-teaser-services .custom-wrap-link {padding: 0; margin-top: 2rem;} } /* ----------------------------------------------------------------------------------------------------------------------------- * ANIMATION: KISS ----------------------------------------------------------------------------------------------------------------------------- */ .custom-wrap-KISS-animation {font-size: 100%; height: 22em; margin-top: 2em; position: relative; overflow: hidden; background-color: var(--white); position:relative;} .custom-wrap-KISS-animation .custom-anim-row {position: absolute; white-space: nowrap;} .custom-wrap-KISS-animation .custom-anim-row-01 {top: 10.75rem; z-index: 2;} .custom-wrap-KISS-animation .custom-anim-row-01 span {display: block; position: absolute; width: 90vw; color: var(--black); font-size: 8.75em; font-weight: 600; letter-spacing: -.0425em; opacity: 1; line-height: 1;} .custom-wrap-KISS-animation .custom-anim-row-01 span:nth-child(1) {animation: Loop01-01 20s infinite linear; animation-direction: reverse;} .custom-wrap-KISS-animation .custom-anim-row-01 span:nth-child(2) {animation: Loop01-02 20s infinite linear; animation-direction: reverse;} @keyframes Loop01-01 { from { transform: translateX(-90vw); } to { transform: translateX(0); } } @keyframes Loop01-02 { from { transform: translateX(0); } to { transform: translateX(90vw); } } .custom-wrap-KISS-animation .custom-anim-row-02 {top: 0em; z-index: 1;} .custom-wrap-KISS-animation .custom-anim-row-02 span {display: block; position: absolute; width: 113vw; color: #f7f8f9; font-size: 22em; font-weight: 700; letter-spacing: -.04em; opacity: 1; line-height: 1;} .custom-wrap-KISS-animation .custom-anim-row-02 span:nth-child(1) {animation: Loop02-01 60s infinite linear; animation-direction: reverse;} .custom-wrap-KISS-animation .custom-anim-row-02 span:nth-child(2) {animation: Loop02-02 60s infinite linear; animation-direction: reverse;} @keyframes Loop02-01 { from { transform: translateX(-113vw); } to { transform: translateX(0); } } @keyframes Loop02-02 { from { transform: translateX(0); } to { transform: translateX(113vw); } } .custom-wrap-KISS-animation .custom-wrap {height: 100%;} @media screen and (max-width: 1899px) { .custom-wrap-KISS-animation .custom-anim-row-01 {top: 11.125rem;} .custom-wrap-KISS-animation .custom-anim-row-01 span {font-size: 6em; width: 9em;} .custom-wrap-KISS-animation .custom-anim-row-01 span:nth-child(1) {animation: Loop01a-01 7s infinite linear; animation-direction: reverse;} .custom-wrap-KISS-animation .custom-anim-row-01 span:nth-child(2) {animation: Loop01a-02 7s infinite linear; animation-direction: reverse;} @keyframes Loop01a-01 { from { transform: translateX(-9em); } to { transform: translateX(0); } } @keyframes Loop01a-02 { from { transform: translateX(0); } to { transform: translateX(9em); } } .custom-wrap-KISS-animation .custom-anim-row-02 span {font-size: 20em; width: 4.5em;} .custom-wrap-KISS-animation .custom-anim-row-02 span:nth-child(1) {animation: Loop02a-01 30s infinite linear; animation-direction: reverse;} .custom-wrap-KISS-animation .custom-anim-row-02 span:nth-child(2) {animation: Loop02a-02 30s infinite linear; animation-direction: reverse;} @keyframes Loop02a-01 { from { transform: translateX(-4.5em); } to { transform: translateX(0); } } @keyframes Loop02a-02 { from { transform: translateX(0); } to { transform: translateX(4.5em); } } } @media screen and (min-width: 576px) and (max-width: 767px) { } /* ----------------------------------------------------------------------------------------------------------------------------- * ANIMATION: BG DATON ----------------------------------------------------------------------------------------------------------------------------- */ .custom-bg-daton {width: 100%; position: absolute; top: 0; left: 0; height: 62vw; overflow: hidden; z-index: -1; animation: FadeIn; animation-duration: 6s; animation-iteration-count: 1; animation-fill-mode: both; animation-delay: 0;} .custom-bg-daton span {display: block; left: 0; top: 0; position: absolute; width: 150vw; height: 100%;} .custom-bg-daton span:nth-child(1) {animation: LoopDATON01 100s infinite linear; animation-direction: reverse;} .custom-bg-daton span:nth-child(2) {animation: LoopDATON02 100s infinite linear; animation-direction: reverse;} @keyframes LoopDATON01 { from { transform: translateX(-150vw); } to { transform: translateX(0); } } @keyframes LoopDATON02 { from { transform: translateX(0); } to { transform: translateX(150vw); } } .custom-bg-daton img {width: 100%; height: 100%; object-fit: contain; object-position: left top;} .custom-wrap-contact-footer .custom-bg-daton span:nth-child(1) {animation: none;} .custom-wrap-contact-footer .custom-bg-daton span:nth-child(2) {animation: none;} .custom-wrap-contact-footer.custom-anim .custom-bg-daton span:nth-child(1) {animation: LoopDATON01 100s infinite linear; animation-direction: reverse;} .custom-wrap-contact-footer.custom-anim .custom-bg-daton span:nth-child(2) {animation: LoopDATON02 100s infinite linear; animation-direction: reverse;} @media screen and (max-width: 767px) { .custom-bg-daton {height: 400px} .custom-bg-daton span {width: 1150px; height: 400px;} .custom-bg-daton span:nth-child(1) {animation: LoopDATON01a 30s infinite linear; animation-direction: reverse;} .custom-bg-daton span:nth-child(2) {animation: LoopDATON02a 30s infinite linear; animation-direction: reverse;} @keyframes LoopDATON01a { from { transform: translateX(-1150px); } to { transform: translateX(0); } } @keyframes LoopDATON02a { from { transform: translateX(0); } to { transform: translateX(1150px); } } .custom-wrap-contact-footer.custom-anim.custom-bg-daton {height: 400px} .custom-wrap-contact-footer.custom-anim.custom-bg-daton span {width: 1150px; height: 400px;} .custom-wrap-contact-footer.custom-anim .custom-bg-daton span:nth-child(1) {animation: LoopDATON01a 30s infinite linear; animation-direction: reverse;} .custom-wrap-contact-footer.custom-anim .custom-bg-daton span:nth-child(2) {animation: LoopDATON02a 30s infinite linear; animation-direction: reverse;} } @media screen and (min-width: 576px) and (max-width: 767px) { } /* ----------------------------------------------------------------------------------------------------------------------------- * NEWS ----------------------------------------------------------------------------------------------------------------------------- */ .custom-wrap-news {margin-top: 2em;} .custom-wrap-news.custom-anim {animation: BgColorChange02 2s ease-out; animation-fill-mode: both;} @keyframes BgColorChange02 { 0% {background-color: var(--white);} 100% {background-color: var(--grey-01);} } .custom-wrap-news.custom-anim-bottom {animation: BgColorChange03 1.5s ease-out; animation-fill-mode: both;} @keyframes BgColorChange03 { 0% {background-color: var(--grey-01);} 100% {background-color: var(--white);} } .custom-wrap-news .container {padding-top: .025em; padding-bottom: 3em;} .custom-wrap-news .custom-wrap-items {margin-top: 0; padding: 0 1rem;} .custom-wrap-news .custom-wrap-title {margin-bottom: 5rem;} .custom-wrap-news .custom-news {text-align: left; padding: 1.125em 0 3em 0; border-top: 1px solid var(--grey);} .custom-wrap-news .custom-news::last-of-type {border-bottom: 1px solid var(--grey);} .custom-wrap-news .custom-news > div {padding-left: 0;} .custom-wrap-news .custom-news .custom-date {font-size: 1.5em; font-weight: 400; line-height: 1.4; letter-spacing: -.045em; color: var(--grey);} .custom-wrap-news .custom-news .custom-title {font-size: 1.575em; font-weight: 600; line-height: 1.4; letter-spacing: -.035em; margin-bottom: 1rem;} .custom-wrap-news .custom-news .custom-text {margin-top: .125rem;} .custom-wrap-news .custom-wrap-link {padding: 0 0 0 4.5em;} @media screen and (max-width: 767px) { .custom-wrap-news {margin-top: 0;} .custom-wrap-news .custom-news {padding-bottom: .5em;} .custom-wrap-news .custom-wrap-title {margin-bottom: 3rem; margin-top: 1.75rem;} .custom-wrap-news .custom-wrap-link {padding: 0;} .custom-wrap-news .custom-news .custom-date {font-size: 1.25rem; line-height: 1.5; transform: translateY(0) !important;} .custom-wrap-news .custom-news .custom-title {line-height: 1.2;} } @media screen and (min-width: 768px) { /* .custom-wrap-news .custom-news .custom-title, .custom-wrap-news .custom-news .custom-text, .custom-wrap-news .custom-news .custom-date {transform: translateY(0) !important;} */ } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-news .custom-news {padding-bottom: 1.75em;} .custom-wrap-news .custom-news .custom-date {font-size: 1.35em;} .custom-wrap-news .custom-news .custom-title {font-size: 1.35em;} .custom-wrap-news .custom-wrap-title {margin-bottom: 3.5rem; margin-top: 1.75rem;} .custom-wrap-news .custom-wrap-link {padding-left: 2rem;} } /* ----------------------------------------------------------------------------------------------------------------------------- * CONTACT ----------------------------------------------------------------------------------------------------------------------------- */ .custom-wrap-contact {margin-top: 2rem; min-height: 26em; position: relative;} .custom-wrap-contact.custom-wrap-contact-footer {overflow: hidden; min-height: 43vw;} .custom-wrap-contact footer > .custom-wrap-max {padding-left: 0; padding-right: 0;} .custom-wrap-contact a.custom-link-tel, .custom-wrap-contact a.custom-link-mail {color: var(--black) !important; border-color: var(--black) !important;} .custom-wrap-contact .custom-container {padding-top: 5rem; padding-bottom: 0; max-width: 71.5vw;} .custom-wrap-contact .custom-col-01 {} .custom-wrap-contact .custom-col-02 {} .custom-wrap-contact .custom-address {font-weight: 400;} .custom-wrap-contact .custom-wrap-pics {max-width: 20vw; transform: translateX(2em) scale(1.3);} .custom-wrap-contact .custom-wrap-pics .custom-item {display: inline-block; float: left; width: 50%; overflow: hidden; transition: all 0.40s ease-in-out; } .custom-wrap-contact .custom-wrap-pics .custom-img-cover {display: block; position: relative; height: 0; padding-bottom: 98%; overflow: hidden;} .custom-wrap-contact .custom-wrap-pics .custom-img-cover img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;} .custom-wrap-contact .anim-fade-in {opacity: 0;} .custom-wrap-contact.custom-anim .anim-fade-in {animation-name: FadeIn; animation-duration: 2s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-wrap-contact.custom-anim .anim-fade-in:nth-child(1) {animation-delay: .8s;} .custom-wrap-contact.custom-anim .anim-fade-in:nth-child(2) {animation-delay: 1s;} .custom-wrap-contact.custom-anim .anim-fade-in:nth-child(3) {animation-delay: 1.2s;} .custom-wrap-contact.custom-anim .anim-fade-in:nth-child(4) {animation-delay: 1.4s;} .custom-wrap-contact .custom-wrap-buttons span {opacity: 0;} .custom-wrap-contact .custom-anim .custom-wrap-buttons span:nth-child(1) {animation: FadeIn 2s ease-out; animation-fill-mode: both;} .custom-wrap-contact .custom-anim .custom-wrap-buttons span:nth-child(2) {animation: FadeIn 2s ease-out; animation-fill-mode: both; animation-delay: .3s;} .custom-wrap-contact .custom-wrap-link-icons span {opacity: 0;} .custom-wrap-contact .custom-anim .custom-wrap-link-icons span:nth-child(1) {animation: FadeIn 2s ease-out; animation-fill-mode: both; animation-delay: .4s;} .custom-wrap-contact .custom-anim .custom-wrap-link-icons span:nth-child(2) {animation: FadeIn 2s ease-out; animation-fill-mode: both; animation-delay: .7s;} .custom-wrap-contact .custom-anim .custom-wrap-link-icons span:nth-child(3) {animation: FadeIn 2s ease-out; animation-fill-mode: both; animation-delay: 1s;} @media screen and (max-width: 767px) { .custom-wrap-contact .custom-container {padding-top: 2.5rem; max-width: none;} .custom-wrap-contact .custom-links {text-align: center;} .custom-wrap-link-icons .custom-link-icon {font-size: 130%;} .custom-wrap-contact .custom-anim.anim-fade-in:nth-child(1) {animation-delay: none;} .custom-wrap-contact .custom-anim.anim-fade-in:nth-child(2) {animation-delay: .4s;} .custom-wrap-contact .custom-anim.anim-fade-in:nth-child(3) {animation-delay: .7s;} .custom-wrap-contact .custom-anim.anim-fade-in:nth-child(4) {animation-delay: .9s;} .custom-wrap-contact .custom-container {} .custom-wrap-contact .custom-wrap-pics {overflow: hidden; max-width: none; margin: 1rem auto .5rem auto; transform: translateX(0) scale(1.0875);} .custom-wrap-contact.custom-wrap-contact-footer {margin-top: .5em;} } @media screen and (min-width: 576px) and (max-width: 767px) { .custom-wrap-contact .custom-wrap-pics {width: 14em; margin: 1.5rem auto 1.5rem auto;} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-contact .custom-container {padding-top: 4rem; max-width: none;} .custom-wrap-contact .custom-wrap-pics {transform: translate(-3em, 0) scale(1.5);} } @media screen and (min-width: 1200px) and (max-width: 1899px) { .custom-wrap-contact .custom-wrap-pics {max-width: 15em;transform: translateX(1em) scale(1.5);} } /* ----------------------------------------------------------------------------------------------------------------------------- * PAGE CONTENTS ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-content-page .custom-logo {} .custom-wrap-page-intro {background-color: var(--grey-01);} .custom-wrap-page-intro-01 {background-color: var(--pink-light);} .custom-wrap-page-intro-02 {background-color: var(--green-light);} .custom-wrap-page-intro-03 {background-color: var(--cyan-light);} .custom-wrap-page-intro > .container {padding: 7.5em 0 1em 0;} .custom-wrap-page-intro .custom-page-title {animation: TextLeftToRight01 1.5s ease-out;} .custom-wrap-page-intro .custom-page-teaser {margin-top: 1em; margin-bottom: 1em; animation-name: FadeIn; animation-duration: 5s; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-wrap-page-intro .custom-page-subtitle {animation: TextLeftToRight03 2s ease-out; animation-delay: .25s; animation-fill-mode: both;} .custom-wrap-page-intro .custom-page-facts {animation: TextLeftToRight03 2s ease-out; animation-delay: .25s; animation-fill-mode: both;} @-webkit-keyframes TextLeftToRight03 { 0% {transform: translateX(-15em); opacity: 0;} 50% {transform: translateX(-7em); opacity: 0;} 100%{transform: translateX(0); opacity: 1;} } .custom-wrap-page-content {background-color: var(--white); min-height: 50vH;} .custom-wrap-page-content.custom-padding {padding-top: 7.5em; padding-bottom: 4em;} .custom-wrap-page-content > .row {/* animation-name: FadeIn; animation-duration: 3s; animation-delay: 2s; animation-iteration-count: 1; animation-fill-mode: both; */} .custom-wrap-page-content .custom-content article {} .custom-wrap-page-content .custom-content article:nth-child(1) { /* animation-name: MoveUpText; animation-duration: 1.25s; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; */ animation: none;} @-webkit-keyframes MoveUpText { 0% {transform: translate(0, 7em); opacity: 1;} 100%{transform: translate(0, 0); opacity: 1;} } .custom-wrap-page-content .custom-content article.custom-anim {animation-name: MoveUpText; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards;} .custom-wrap-page-content .custom-content article .custom-title {transform-origin: top left; transform: scale(.5)} .custom-wrap-page-content .custom-content article.custom-anim .custom-title { animation: ScaleTitle .75s ease-out; animation-iteration-count: 1; animation-fill-mode: forwards;} @keyframes ScaleTitle { 0%{transform: scale(.5);} 100%{transform: scale(1);} } .custom-wrap-page-content .custom-wrap-clients {font-size: .675em; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; width: 100%;} .custom-wrap-page-content .custom-wrap-clients span {display: block; page-break-inside: avoid; break-inside: avoid-column; -webkit-column-break-inside: avoid; overflow: hidden;} /* Images */ .custom-wrap-page-intro .custom-col {max-width: 17.5em;} .custom-wrap-page-intro .custom-wrap-img {margin-top: 2.5em; margin-bottom: -9em; width: 100%; height: 0; position: relative; padding-bottom: 100%; overflow: hidden; animation: MoveUpPagePic 1s ease-out; animation-delay: 1.5s; animation-fill-mode: both;} @keyframes MoveUpPagePic { 0% {transform: translateY(5em); opacity: 0;} 100%{transform: translateY(0); opacity: 1;} } /* Content Anchor Nav */ .custom-wrap-anchor-nav {text-align: right; max-width: 40em; padding-right: 6em; margin-top: -5em; margin-left: auto; line-height: 1.5; position: sticky; position: -webkit-sticky; top: 3.5rem; animation: MoveDownText 1s ease-out; animation-delay: 2s; animation-fill-mode: both;} @keyframes MoveDownText { 0% {transform: translateY(-10em); opacity: 0;} 100%{transform: translateY(0); opacity: 1;} } .custom-wrap-anchor-nav a {color: var(--blue-01);} @media screen and (max-width: 767px) { .custom-wrap-page-intro .custom-page-teaser {margin-top: .825em;} .custom-wrap-anchor-nav {position: static; min-height: 6em; text-align: left; padding-right: 0; padding-left: 4.25em; margin-top: 0; margin-left: 0; background: url(/img/icon-arrow-down-blue.svg) 5px top no-repeat; background-size: 2.625em auto;} .custom-anchor-nav a.custom-active {margin-left: 0;} .custom-wrap-page-content.custom-padding {padding-top: 8.5em;} .custom-wrap-page-intro {min-height: auto;} .custom-wrap-page-intro > .container {padding-top: .5em; padding-bottom: 3em;} .custom-wrap-page-intro .custom-page-teaser {margin-bottom: 1rem;} .custom-wrap-page-content .custom-content article {padding-bottom: 0 !important; margin-bottom: -2em;} .custom-wrap-page-intro .custom-page-title {animation-duration: 1.2s;} .custom-wrap-page-content .custom-content article.custom-anim .custom-title {animation-duration: .5s;} .custom-wrap-page-content .custom-content article.custom-anim {animation: none;} .custom-wrap-page-content .custom-wrap-clients {font-size: .75em; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem;} } @media screen and (max-width: 575px) { .custom-wrap-page-intro .custom-col {margin-left: auto; margin-right: auto; max-width: 14em;} .custom-wrap-page-intro .custom-wrap-img {margin-top: 1.5rem;} .custom-wrap-anchor-nav {width: 12em; margin-left: auto; margin-right: auto;} .custom-wrap-page-content .custom-wrap-clients {font-size: .75em; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;} } @media screen and (min-width: 576px) and (max-width: 767px) { .custom-wrap-page-intro > .container {padding-bottom: 1.25em;} .custom-wrap-page-content.custom-padding {padding-top: 11em;} } @media screen and (min-width: 768px) { .custom-wrap-page-content .custom-content article:nth-child(1) .custom-title {animation: none; transform: scale(1);} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-wrap-page-intro .custom-page-teaser {margin-top: .5rem;} .custom-wrap-page-intro .custom-wrap-img {margin-bottom: -6.25em;} .custom-wrap-page-intro > .container {padding-top: 7em;} .custom-wrap-page-intro .custom-col {max-width: 12em;} .custom-wrap-page-content .custom-wrap-clients {font-size: .75em; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;} .custom-wrap-page-content.custom-padding {padding-top: 7em; padding-bottom: 2.5em;} .custom-wrap-anchor-nav {padding-right: 5em;} } @media screen and (min-width: 1200px) and (max-width: 1900px) { .custom-wrap-page-content .custom-wrap-clients {font-size: .7em; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem;} } /* ----------------------------------------------------------------------------------------------------------------------------- * PAGE CONTENT: SERVICES ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-services article.anchor-aim {padding-top: 4em; padding-bottom: 0;} .custom-body-services-subpage-01 .custom-wrap-page-intro {animation: BgColorChange04 2s ease-out; animation-delay: 2s; animation-fill-mode: both;} @-webkit-keyframes BgColorChange04 { 0% {background-color: var(--pink-light);} 50% {background-color: var(--pink-light);} 100% {background-color: var(--grey-01);} } .custom-body-services-subpage-02 .custom-wrap-page-intro {animation: BgColorChange05 2s ease-out; animation-delay: 2s; animation-fill-mode: both;} @-webkit-keyframes BgColorChange05 { 0% {background-color: var(--green-light);} 50% {background-color: var(--green-light);} 100% {background-color: var(--grey-01);} } .custom-body-services-subpage-03 .custom-wrap-page-intro {animation: BgColorChange06 2s ease-out; animation-delay: 2s; animation-fill-mode: both;} @-webkit-keyframes BgColorChange06 { 0% {background-color: var(--cyan-light);} 50% {background-color: var(--cyan-light);} 100% {background-color: var(--grey-01);} } .custom-body-services-subpage .custom-wrap-page-intro .custom-page-subtitle-xxl {margin-top: 0; margin-bottom: -5rem; font-size: 12em; font-weight: 600; line-height: 1; letter-spacing: -.04em; opacity: .8;} .custom-body-services-subpage-01 .custom-wrap-page-intro .custom-page-subtitle-xxl {animation: TextLeftToRight04 4s ease-out; animation-delay: 0s; animation-fill-mode: both;} @-webkit-keyframes TextLeftToRight04 { 0% {transform: translateX(-6em); color: var(--pink-light);} 50%{transform: translateX(0); color: var(--pink-light);} 83%{color: var(--pink-lighter);} 100%{color: var(--grey-01);} } .custom-body-services-subpage-02 .custom-wrap-page-intro .custom-page-subtitle-xxl {animation: TextLeftToRight05 4s ease-out; animation-delay: 0s; animation-fill-mode: both;} @-webkit-keyframes TextLeftToRight05 { 0% {transform: translateX(-6em); color: var(--green-light);} 50%{transform: translateX(0); color: var(--green-light);} 83%{color: var(--green-lighter);} 100%{color: var(--grey-01);} } .custom-body-services-subpage-03 .custom-wrap-page-intro .custom-page-subtitle-xxl {animation: TextLeftToRight06 4s ease-out; animation-delay: 0s; animation-fill-mode: both;} @-webkit-keyframes TextLeftToRight06 { 0% {transform: translateX(-6em); color: var(--cyan-light);} 50%{transform: translateX(0); color: var(--cyan-light);} 83%{color: var(--cyan-lighter);} 100%{color: var(--grey-01);} } .custom-body-services-subpage .custom-wrap-page-intro > .container {padding-top: 6.75em;} .custom-body-services-subpage .custom-wrap-page-content {min-height: auto;} .custom-body-services-subpage .custom-wrap-page-content.custom-padding {padding-top: 0em;} .custom-body-services-subpage .custom-wrap-page-content .custom-content article {animation-name: MoveUpText; animation-duration: 1.75s; animation-iteration-count: 1; animation-fill-mode: forwards;} .custom-body-services-subpage .custom-page-title {font-size: 200%;} .custom-body-services-subpage .custom-page-title a {border: none;} .custom-body-services-subpage .custom-page-title a .custom-link-arrow {height: 1.15rem; padding-left: 1.75em; margin-left: -.5rem; margin-right: .5rem; transform: rotate(180deg);} .custom-body-services-subpage .custom-page-title a .custom-link-arrow:hover {background-position: inherit;} .custom-body-services-subpage .custom-page-title a:hover .custom-link-arrow {background-position: .5rem 0;} .custom-body-services-subpage .custom-container-images {width: calc(100% - 2rem); padding: .5em 0; margin-left: auto; overflow: hidden; -webkit-transition: all .35s ease-in-out; animation-name: MoveUpText; animation-duration: 2.25s; animation-iteration-count: 1; animation-fill-mode: forwards;} .custom-body-services-subpage .custom-container-images-02 {width: calc(100% + 18rem); margin-left: -17rem;} .custom-body-services-subpage .custom-container-images-02.custom-anim {animation-name: RightToLeft; animation-duration: 2.25s; animation-iteration-count: 1; animation-fill-mode: forwards;} .custom-body-services-subpage .custom-container-images-link {animation-name: MoveUpText; animation-duration: 2.25s; animation-iteration-count: 1; animation-fill-mode: forwards;} .custom-body-services-subpage .custom-container-images .custom-inner-wrap {width: 112%; animation-name: RightToLeft; animation-duration: 2.25s; animation-iteration-count: 1; animation-fill-mode: forwards;} @-webkit-keyframes RightToLeft { 0% {transform: translateX(14em); opacity: 0;} 100%{transform: translateX(0); opacity: 1;} } .custom-body-services-subpage .custom-container-images .custom-inner-wrap:hover {transform: scale(1.03);} .custom-body-services-subpage .custom-container-images .custom-inner-wrap img {border: 1px solid var(--grey-02);} @media screen and (max-width: 1899px) { .custom-body-services-subpage .custom-wrap-page-intro .custom-page-subtitle-xxl {font-size: 14vw; margin-top: .025em; margin-bottom: -.45em;} } @media screen and (max-width: 1199px) { .custom-body-services-subpage {overflow: hidden;} .custom-body-services-subpage .custom-container-images {width: 100%;} .custom-body-services-subpage .custom-container-images .custom-inner-wrap {width: 100%; padding-left: 7vw;} } @media screen and (max-width: 767px) { .custom-body-services header {background-color: var(--grey-01);} .custom-body-services article.anchor-aim {padding-top: 4em;} .custom-body-services .custom-content-articles {padding-bottom: 0;} .custom-body-services-subpage .custom-wrap-page-content.custom-padding {padding-bottom: 4em !important;} .custom-body-services-subpage .custom-wrap-page-content .custom-content article h1.custom-title {transform: scale(1); font-size: 200%;} .custom-body-services-subpage .custom-wrap-page-intro > .container {padding-top: 1rem; padding-bottom: .75rem;} .custom-body-services-subpage .custom-wrap-page-intro .custom-page-subtitle-xxl {margin-top: 1rem; margin-bottom: -13vw; font-size: 24.5vw;} .custom-body-services-subpage .custom-page-title {font-size: 125%;} .custom-body-services-subpage .custom-page-title a .custom-link-arrow {height: 1rem; width: 2.5em; margin-right: 0;} .custom-body-services-subpage .custom-page-title a:hover .custom-link-arrow {} .custom-body-services-subpage article {padding-top: 5vw;} .custom-body-services-subpage .custom-container-images-02 {width: 90%; max-width: 24rem; margin-left: auto; margin-right: auto; margin-bottom: 2rem;} .custom-body-services-subpage .custom-container-buttons {margin-top: 2rem;} .custom-body-services-subpage .custom-container-buttons .custom-btn {min-width: 9.5em;} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-body-services article.anchor-aim {padding-top: 2em; padding-bottom: 0;} } /* CTA */ .custom-body-services-subpage .custom-container-cta {padding-left: 4.5%;} .custom-body-services-subpage .custom-cta {width: 55%; max-width: 17.5rem; padding: 0 .5rem;} .custom-body-services-subpage-01 .custom-cta {margin-top: -25vw;} .custom-body-services-subpage-02 .custom-container-cta, .custom-body-services-subpage-03 .custom-container-cta {margin-top: 29em; animation: MoveUpCta 1s ease-out; animation-fill-mode: none; animation-delay: 2.5s; animation-fill-mode: both; } .custom-body-services-subpage .custom-cta .custom-contact-title {font-size: 150%;} .custom-body-services-subpage .custom-cta .custom-contact-title .custom-text-grey {letter-spacing: -0.02em;} .custom-body-services-subpage .custom-cta.custom-anim {animation-name: MoveUpCta; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards;} @-webkit-keyframes MoveUpCta { 0% {transform: translateY(0);} 100%{transform: translateY(-9em);} } @media screen and (max-width: 1199px) { .custom-body-services-subpage .custom-container-cta {padding-left: 0} .custom-body-services-subpage .custom-cta {width: 100%;} } @media screen and (max-width: 767px) { .custom-body-services-subpage-01 .custom-header {animation: BgColorChange04 2s ease-out; animation-delay: 2s; animation-fill-mode: both;} .custom-body-services-subpage-02 .custom-header {animation: BgColorChange05 2s ease-out; animation-delay: 2s; animation-fill-mode: both;} .custom-body-services-subpage-03 .custom-header {animation: BgColorChange06 2s ease-out; animation-delay: 2s; animation-fill-mode: both;} .custom-body-services-subpage .custom-container-cta {margin-top: 0;} .custom-body-services-subpage .custom-cta {max-width: 13.5rem;} .custom-body-services-subpage .custom-cta .custom-contact-title {font-size: 130%;} } @media screen and (orientation: portrait) { .custom-body-services-subpage-02 .custom-container-cta, .custom-body-services-subpage-03 .custom-container-cta {animation-delay: 1s}; } /* ----------------------------------------------------------------------------------------------------------------------------- * PAGE CONTENT: AGENCY ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-agency article.anchor-aim {padding-top: 5em; padding-bottom: 0;} .custom-body-agency .custom-content-articles {} @media screen and (max-width: 767px) { .custom-body-agency header {background-color: var(--grey-01);} .custom-body-agency article.anchor-aim {padding-top: 4em;} .custom-body-services .custom-content-articles {padding-bottom: 0;} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-body-agency article.anchor-aim {padding-top: 2em;} } /* ----------------------------------------------------------------------------------------------------------------------------- * PAGE CONTENT: NEWS ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-news .custom-wrap-page-intro.custom-anim-bottom{animation: BgColorChange03 1.5s ease-out; animation-fill-mode: both;} .custom-body-news .custom-page-title {position: sticky; position: -webkit-sticky; top: 4.5rem; padding-bottom: 2.6em;} .custom-body-news .custom-wrap-news {margin-top: 0;} .custom-body-news .custom-content {margin-top: 1.25rem; animation-name: MoveUpText; animation-duration: 2.25s; animation-iteration-count: 1; animation-fill-mode: forwards;} .custom-body-news article:nth-child(1), .custom-body-news article:nth-child(2), .custom-body-news article:nth-child(1) .custom-text, .custom-body-news article:nth-child(2) .custom-text, .custom-body-news article:nth-child(1) .custom-title, .custom-body-news article:nth-child(2) .custom-title {transform: translateY(0);} .custom-body-news .custom-wrap-news .custom-wrap-buttons {padding-top: 2em; margin-bottom: 0; border-top: 1px solid var(--grey);} @media screen and (max-width: 767px) { .custom-body-news header {background-color: var(--grey-01);} .custom-body-news .custom-content {margin-top: 2rem;} .custom-body-news .custom-page-title {padding-bottom: .5rem;} .custom-body-news .custom-wrap-page-intro > .container {padding-bottom: 0;} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-body-news .custom-content {margin-top: -.35rem;} .custom-body-news .custom-wrap-page-intro > .container {padding-bottom: 0;} } @media screen and (min-width: 1200px) and (max-width: 1900px) { .custom-body-news .custom-content {margin-top: .25vw;} } /* ----------------------------------------------------------------------------------------------------------------------------- * PAGE CONTENT: PROJECTS OVERVIEW ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-projects-overview .custom-wrap-page-intro {background-color: var(--white); min-height: auto; padding-bottom: 4em;} .custom-body-projects-overview .custom-wrap-projects {margin-bottom: 2rem; animation-name: MoveUpText; animation-duration: 1.25s; animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: both;} .custom-body-projects-overview .custom-wrap-projects .container {padding-top: 0;} .custom-body-projects-overview .custom-wrap-projects .custom-wrap-img .custom-img {} .custom-body-projects-overview .custom-wrap-projects h2 {font-size: 1rem; margin-bottom: 3rem; margin-top: 0;} @media screen and (max-width: 767px) { .custom-body-projects-overview .custom-wrap-page-intro {padding-bottom: 0;} .custom-body-projects-overview .custom-wrap-page-intro > .container {padding-bottom: 1.5em;} .custom-body-projects-overview .custom-wrap-projects {margin-top: .75rem; margin-bottom: -2em;} .custom-body-projects-overview .custom-wrap-projects h2 {font-size: 1.25rem;} .custom-body-projects-overview .custom-wrap-projects .custom-item:nth-child(1) {transform: translate(0) !important; animation: FadeIn 1.5s; animation-fill-mode: forwards;} .custom-body-projects-overview .custom-wrap-projects .custom-item.custom-anim:nth-child(1) {animation-duration: 0; animation-delay: none;} .custom-body-project .custom-wrap-projects .custom-wrap-img .custom-img {margin-top: 3em;} .custom-body-projects-overview .custom-item:nth-child(1) .custom-img {animation: MoveUpRefPic01 1.5s ease-out; animation-fill-mode: forwards;} .custom-body-projects-overview .custom-item.custom-anim:nth-child(1) .custom-img {animation-duration: 0; animation-delay: none;} } @media screen and (max-width: 575px) { .custom-body-projects-overview .custom-wrap-projects {margin-bottom: -2rem;} .custom-wrap-projects .custom-project-title {min-height: auto; margin-bottom: 2rem;} } @media screen and (min-width: 768px) { .custom-body-projects-overview .custom-wrap-projects .custom-item:nth-child(1), .custom-body-projects-overview .custom-wrap-projects .custom-item:nth-child(2), .custom-body-projects-overview .custom-wrap-projects .custom-item:nth-child(3) {transform: translate(0) !important; animation: FadeIn 1.5s; animation-fill-mode: forwards;} .custom-body-projects-overview .custom-wrap-projects .custom-item.custom-anim:nth-child(1), .custom-body-projects-overview .custom-wrap-projects .custom-item.custom-anim:nth-child(2), .custom-body-projects-overview .custom-wrap-projects .custom-item.custom-anim:nth-child(3) {animation-duration: 0; animation-delay: none;} .custom-body-projects-overview .custom-item:nth-child(1) .custom-img, .custom-body-projects-overview .custom-item:nth-child(2) .custom-img, .custom-body-projects-overview .custom-item:nth-child(3) .custom-img {animation: MoveUpRefPic01 1.5s ease-out; animation-fill-mode: forwards;} .custom-body-projects-overview .custom-item.custom-anim:nth-child(1) .custom-img, .custom-body-projects-overview .custom-item.custom-anim:nth-child(2) .custom-img, .custom-body-projects-overview .custom-item.custom-anim:nth-child(3) .custom-img {animation-duration: 0; animation-delay: none;} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-body-projects-overview .custom-wrap-page-intro {padding-bottom: 2em;} .custom-wrap-projects .custom-wrap-items {margin-top: 1rem;} } @media screen and (min-width: 768px) and (orientation: portrait) { .custom-body-projects-overview .custom-wrap-projects .custom-item:nth-child(4), .custom-body-projects-overview .custom-wrap-projects .custom-item:nth-child(5), .custom-body-projects-overview .custom-wrap-projects .custom-item:nth-child(6) {transform: translate(0) !important; animation: FadeIn 1.5s; animation-fill-mode: forwards;} .custom-body-projects-overview .custom-wrap-projects .custom-item.custom-anim:nth-child(4), .custom-body-projects-overview .custom-wrap-projects .custom-item.custom-anim:nth-child(5), .custom-body-projects-overview .custom-wrap-projects .custom-item.custom-anim:nth-child(6) {animation-duration: 0; animation-delay: none;} .custom-body-projects-overview .custom-item:nth-child(4) .custom-img, .custom-body-projects-overview .custom-item:nth-child(5) .custom-img, .custom-body-projects-overview .custom-item:nth-child(6) .custom-img {animation: MoveUpRefPic01 1.5s ease-out; animation-fill-mode: forwards;} .custom-body-projects-overview .custom-item.custom-anim:nth-child(4) .custom-img, .custom-body-projects-overview .custom-item.custom-anim:nth-child(5) .custom-img, .custom-body-projects-overview .custom-item.custom-anim:nth-child(6) .custom-img {animation-duration: 0; animation-delay: none;} } /* ----------------------------------------------------------------------------------------------------------------------------- * PAGE CONTENT: PROJECT ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-project .custom-wrap-page-intro {background-color: var(--white); min-height: 21em; padding-bottom: 1em;} .custom-body-project .custom-wrap-project .custom-page-subtitle {font-size: 1rem; font-weight: 600; line-height: 1.5; margin-bottom: 0; margin-top: 1rem;} .custom-body-project > .custom-wrap-large img {} .custom-body-project .custom-wrap-projects .custom-wrap-img {position: relative; padding-bottom: 0; height: 42vw; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; overflow: -moz-scrollbars-none;} .custom-body-project .custom-wrap-projects .custom-wrap-img::-webkit-scrollbar {display: none;} .custom-body-project .custom-wrap-projects .custom-wrap-img .custom-img {margin-top: 3em; animation: none; transform: translateY(0); cursor: s-resize;} .custom-body-project .custom-wrap-projects .custom-wrap-img .custom-img picture {width: 70%; max-width: 1903px; margin-left: auto; margin-right: auto; animation: MoveUpRefPic02 2s ease-out; -webkit-animation: MoveUpRefPic02 2s ease-out both; -moz-animation: MoveUpRefPic02 2s ease-out both;} @keyframes MoveUpRefPic02 { 0% {transform: translateY(20em);} 100%{transform: translateY(0);} } .custom-body-project .custom-wrap-projects .custom-wrap-img .custom-img picture img {width: 100%;} .custom-body-project .custom-wrap-projects .custom-scrollarea {position: absolute; top: 0; width: 15%; height: 100%; z-index: 3; background: transparent;} .custom-body-project .custom-wrap-projects .custom-scrollarea.custom-left {left: 0;} .custom-body-project .custom-wrap-projects .custom-scrollarea.custom-right {right: 0;} .custom-body-project .custom-wrap-img .custom-bg {position: sticky; top: 0; height: 100%; width: 100%; overflow: hidden; z-index: 1; transform: scale(1.015); -webkit-transition: filter 2s ease-in-out; transition: filter 1s ease-in-out; animation: OnFocus 2s ease-out both; -webkit-animation: OnFocus 2s ease-out both; -moz-animation: OnFocus 2s ease-out both;} @keyframes OnFocus { 0% {filter: blur(30px);} 100%{filter: blur(0px);} } .custom-body-project .custom-wrap-img .custom-bg img {position: absolute; top: 0; object-fit: cover; object-position: center top; display: block; width: 100%; height: 100%; z-index: 2; -webkit-transition: filter 1.5s ease-in-out; transition: filter 1.5s ease-in-out;} .custom-body-project .custom-wrap-img:hover .custom-bg img {filter: blur(20px); -webkit-filter: blur(10px);} .custom-body-project .custom-wrap-large {max-width: 72%;} .custom-body-project .custom-wrap-large h2 {margin-top: 0; margin-bottom: 1.4em; font-size: 100%; font-weight: 600;} .custom-body-project .custom-col-img .custom-wrap-img .custom-img img {width: 100%; height: auto;} .custom-body-project .custom-page-nav .custom-link-arrow {padding-left: 0; height: 3.5rem; width: 8.75em;} .custom-body-project .custom-page-nav .custom-link-arrow:nth-child(1) {transform: translate(0, -4.5em) rotate(180deg);} .custom-body-project .custom-page-nav .custom-link-arrow:nth-child(2) {transform: translate(0, -4.5em);} .custom-body-project .custom-page-nav .custom-link-arrow.custom-disabled {pointer-events: none; cursor: default; opacity: .15;} @media screen and (max-width: 767px) { .custom-body-project .custom-wrap-page-intro {min-height: auto;} .custom-body-project .custom-wrap-page-intro > .container {padding-bottom: 0;} .custom-body-project .custom-wrap-projects {margin-top: 0;} .custom-body-project .custom-wrap-large {max-width: 100%; padding-left: 15px; padding-right: 15px;} .custom-body-project .custom-project-text {padding-left: 3em; padding-right: 3em;} .custom-body-project .custom-wrap-projects .custom-wrap-img {height: 22em;} .custom-body-project .custom-wrap-projects .custom-wrap-img .custom-img {margin-top: 3em;} .custom-body-project .custom-col-img .custom-mobile:nth-child(1) {margin-top: 1em !important;} .custom-body-project .custom-page-nav {overflow: hidden; margin-bottom: 4em;} .custom-body-project .custom-page-nav .custom-link-arrow {width: 7em; height: 2em;} .custom-body-project .custom-page-nav .custom-link-arrow:hover {background-position: center;} .custom-body-project .custom-page-nav .custom-link-arrow:nth-child(1) {transform: translate(0, 0) rotate(180deg);} .custom-body-project .custom-page-nav .custom-link-arrow:nth-child(2) {transform: translate(0, 0);} } @media screen and (max-width: 575px) { .custom-body-project .custom-wrap-projects .custom-wrap-img .custom-img picture {width: 80%} .custom-body-project .custom-wrap-img .custom-bg img {object-position: 30% 100%;} .custom-body-project .custom-project-text {padding-left: 2.5em; padding-right: 2.5em;} .custom-body-project .custom-wrap-projects .custom-scrollarea {width: 10%;} } @media screen and (min-width: 576px) and (max-width: 767px) { .custom-body-project .custom-wrap-projects .custom-wrap-img {height: 14em;} } @media screen and (min-width: 767px) and (max-width: 1199px) { .custom-body-project .custom-page-nav .custom-link-arrow {width: 6.5em; height: 2em;} .custom-body-project .custom-page-nav .custom-link-arrow:hover {background-position: center;} .custom-body-project .custom-page-nav .custom-link-arrow:nth-child(1) {transform: translate(0, -3.5em) rotate(180deg);} .custom-body-project .custom-page-nav .custom-link-arrow:nth-child(2) {transform: translate(0, -3.5em);} .custom-body-project .custom-wrap-page-intro {min-height: auto;} .custom-body-project .custom-wrap-large {max-width: 95%;} } /* ----------------------------------------------------------------------------------------------------------------------------- * PAGE CONTENT: CONTACT ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-contact .custom-bg-daton {top: 0; position: absolute; transform: translateY(-.5rem);} .custom-body-contact .custom-wrap-intro {max-height: none; height: auto; overflow: visible;} .custom-body-contact .custom-wrap-intro .container .custom-text-01 .custom-line-02 {margin-top: -.5em;} .custom-body-contact .custom-wrap-intro .custom-wrap-img {width: 100%; height: 0; padding-bottom: 100%; position: relative; transform: translateX(-3em);} .custom-body-contact .custom-wrap-intro .custom-wrap-img .custom-slideset, .custom-body-contact .custom-wrap-intro .custom-wrap-img .custom-slideset-css-animtaion {animation: MoveUpPagePic 1.5s ease-out; animation-delay: 0s; animation-fill-mode: none; animation-delay: 1.5s; animation-fill-mode: both;} .custom-body-contact .custom-wrap-intro .custom-wrap-img-02 {width: 8em; height: 8em; margin-bottom: 3em; overflow: hidden; position: relative;} .custom-body-contact .custom-row-address {padding-top: 4em; font-size: 1rem;} .custom-body-contact .custom-address {font-size: 1.125em; letter-spacing: -.02em;} .custom-body-contact .custom-wrap-medium {margin-left: 0; max-width: 44em; animation: FadeIn 4s ease-out; animation-fill-mode: both; animation-delay: 1.8s;} .custom-body-contact .custom-wrap-contact {font-size: 1.125rem;} .custom-body-contact .custom-wrap-contact .custom-wrap-medium {margin-left: 6vw;} .custom-body-contact .custom-wrap-anchor-nav {margin-top: -1.5em; margin-right: -1.5em; padding-right: 0;} .custom-body-contact .custom-wrap-contact {margin-top: 0;} .custom-body-contact .custom-wrap-contact .custom-col-01, .custom-body-contact .custom-wrap-contact .custom-col-02 {height: 30vw} .custom-body-contact .custom-wrap-contact .custom-wrap-contact-form {animation: MoveUpText 1.25s ease-out; animation-fill-mode: both; animation-delay: 1.8s;} .custom-body-contact .custom-wrap-contact .custom-container-maps {height: 26vw; overflow: hidden;} .custom-body-contact .custom-wrap-contact .custom-container-maps iframe {height: 100%; width: 100%;} .custom-body-contact .custom-wrap-link-icons {font-size: 130%; justify-content: end !important;} .custom-body-contact .custom-wrap-link-icons span {opacity: 0;} .custom-body-contact .custom-wrap-link-icons span:nth-child(1) {animation: FadeIn 2s ease-out; animation-fill-mode: both; animation-delay: 1.8s;} .custom-body-contact .custom-wrap-link-icons span:nth-child(2) {animation: FadeIn 2s ease-out; animation-fill-mode: both; animation-delay: 2.1s;} .custom-body-contact .custom-wrap-link-icons span:nth-child(3) {animation: FadeIn 2s ease-out; animation-fill-mode: both; animation-delay: 2.3s;} .custom-body-contact .custom-wrap-link-icons .custom-link-icon {margin-left: .7em; margin-right: .7em; margin-top: 0;} .custom-body-contact .custom-container-directions {padding-bottom: 6em;} @media screen and (max-width: 767px) { .custom-body-contact .custom-wrap-intro {padding-bottom: 0;} .custom-body-contact .custom-wrap-anchor-nav {margin-bottom: 2.5rem; padding-right: 0; margin-top: 0; width: 12em; margin-left: auto; margin-right: auto;} .custom-body-contact .custom-wrap-medium {margin-left: 0;} .custom-body-contact .custom-wrap-contact {margin-top: 0;} .custom-body-contact .custom-wrap-contact .custom-wrap-medium {margin-left: 0;} .custom-body-contact .custom-row-address {padding-top: 1.5em;} .custom-body-contact .custom-address {font-size: 1.125em; letter-spacing: -.02em;} .custom-body-contact .custom-wrap-intro .custom-wrap-img-02 {display: none !important;} .custom-body-contact .custom-wrap-link-icons {font-size: 100%; margin-left: -8px; justify-content: start !important; margin-top: 0 !Important;} .custom-body-contact .custom-wrap-contact .custom-container-maps {height: 90vw;} .custom-body-contact .custom-container-directions {padding-bottom: 0em;} } @media screen and (min-width: 576px) and (max-width: 767px) { .custom-body-contact .custom-row-address {padding-bottom: 2em;} .custom-body-contact .custom-wrap-contact .custom-container-maps {height: 46vw;} } @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-body-contact .custom-wrap-intro {font-size: 17px;} .custom-body-contact .custom-wrap-intro .custom-text-01, .custom-body-contact .custom-wrap-intro .custom-text-02 {font-size: 2.5em;} .custom-body-contact .custom-wrap-intro .custom-wrap-img {transform: translateX(-.5em);} .custom-body-contact .custom-wrap-contact {margin-top: .5rem;} .custom-body-contact .custom-wrap-contact .custom-wrap-medium {max-width: 38em;} .custom-body-contact .custom-row-address {padding-top: 4.5vw !important;} .custom-body-contact .custom-address {font-size: 1em;} .custom-body-contact .custom-wrap-link-icons {font-size: 100%; margin-right: 0;} .custom-body-contact .custom-wrap-anchor-nav {padding-right: 0;} } @media screen and (min-width: 768px) and (max-width: 991px) { .custom-body-contact .custom-wrap-intro .custom-wrap-img-02 {width: 15em; height: 15em;} .custom-body-contact .custom-wrap-contact .custom-wrap-medium {margin-right: .5rem; margin-left: 8vw; flex-wrap: wrap; } .custom-body-contact .custom-row-address {padding-top: 3em !important;} .custom-body-contact .custom-address {width: 50%; float: left;} .custom-body-contact .custom-wrap-contact .custom-container-icon-links {clear: both; width: 100%; margin-bottom: 4rem !important;} } @media screen and (min-width: 768px) and (orientation: portrait) { .custom-body-contact .custom-container-directions {padding-bottom: 10em;} } @media screen and (min-width: 1200px) and (max-width: 1400px) { .custom-body-contact .custom-wrap-intro .custom-wrap-img {transform: translateX(-.5em);} .custom-body-contact .custom-wrap-contact .custom-wrap-medium {margin-left: 8vw;} } @media screen and (min-width: 1200px) and (max-width: 1899px) { .custom-body-contact .custom-wrap-anchor-nav {padding-right: 0;} .custom-body-contact .custom-wrap-link-icons {margin-right: 0;} .custom-body-contact .custom-row-address {padding-top: 4.5vw !important;} } /* ----------------------------------------------------------------------------------------------------------------------------- * PAGE CONTENT: 404 ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-404 {overflow: hidden; min-height: 100vH;} .custom-body-404 .custom-bg-daton {top: 0; position: absolute; transform: translateY(-.5rem);} .custom-body-404 .custom-wrap-intro {min-height: 30em; height: 87vH; overflow: visible;} .custom-body-404 .custom-text-01 {transform: scale(1);} .custom-body-404 .custom-text-01 span.custom-line-01 {animation: none !important;} .custom-body-404 .custom-text-01 span.custom-line-01 span {display: inline-block; animation-name: MoveDown404; animation-timing-function: ease-out; animation-fill-mode: both;} .custom-body-404 .custom-text-01 span.custom-line-01 span:nth-child(1n) {animation-delay: 0; animation-duration: .85s;} .custom-body-404 .custom-text-01 span.custom-line-01 span:nth-child(2n) {animation-delay: .5s; animation-duration: .6s;} .custom-body-404 .custom-text-01 span.custom-line-01 span:nth-child(3n) {animation-delay: .65s; animation-duration: .5s;} @-webkit-keyframes MoveDown404 { 0% {transform: translateY(-3em); opacity: 0;} 100%{transform: translateY(0); opacity: 1;} } .custom-body-404 .custom-text-01 span.custom-line-01 {font-size: 180% !important;} .custom-body-404 .custom-text-01 span.custom-line-02 {font-size: 60% !important; margin-top: -3rem !important;} .custom-body-404 .custom-wrap-message {margin-top: -1.5rem !important;} .custom-body-404 footer .container {padding-top: 3em;} @media screen and (min-width: 768px) and (max-width: 1199px) { .custom-body-404 .custom-wrap-intro {font-size: 17px;} .custom-body-404 .custom-text-01 span.custom-line-01 {font-size: 20vw !important; margin-top: 2rem !important;} .custom-body-404 .custom-text-02 {font-size: 2.5em;} .custom-body-404 .custom-text-01 span.custom-line-02 {font-size: 5vw !important; margin-top: -.5rem !important; } .custom-body-404 .custom-wrap-message {margin-top: -.75rem !important;} } @media screen and (max-width: 767px) { .custom-body-404 .custom-wrap-intro {padding-bottom: 0; height: auto; min-height: 16em;} .custom-body-404 .custom-wrap-message .custom-error {max-width: 70%;} .custom-body-404 .custom-text-01 span.custom-line-02 {margin-top: -.5rem !important;} .custom-body-404 .custom-wrap-message {margin-top: -.75rem !important;} } @media screen and (max-width: 420px) { .custom-body-404 .custom-text-01 span.custom-line-01 {font-size: 250% !important; margin-top: 2rem !important;} } /* ----------------------------------------------------------------------------------------------------------------------------- * LEGAL PAGES ----------------------------------------------------------------------------------------------------------------------------- */ .custom-body-legal {background-color: var(--grey-01);} .custom-wrap-page-legal.custom-wrap-max > .container {padding: 0;} .custom-wrap-page-legal h3, .custom-wrap-page-legal .h3 {font-size: 120%; margin-bottom: 1.5rem;} .custom-wrap-page-legal article {animation-name: MoveUpText; animation-duration: 1.25s; animation-iteration-count: 1; animation-fill-mode: forwards;} @media screen and (max-width: 767px) { .custom-body-legal header {background-color: var(--grey-01);} .custom-wrap-page-legal h2 {font-size: 120%; margin-top: 2rem; margin-bottom: 1.5rem;} .custom-wrap-page-legal h3, .custom-wrap-page-legal .h3 {font-size: 110%;} } /* ----------------------------------------------------------------------------------------------------------------------------- * FOOTER ----------------------------------------------------------------------------------------------------------------------------- */ footer .container {margin-top: 0; padding-top: 3em; padding-bottom: .5em;} footer .container p {font-size: .75rem;} footer .container p a {display: inline-block; padding: 0 .645rem; margin-left: .2rem; color: var(--black); border-bottom: none;} footer .container p .custom-copyright {display: inline-block; margin-left: .25rem;} @media screen and (max-width: 991px) { footer .container p a {padding: 0 .375rem; margin-left: 0;} } @media screen and (max-width: 767px) { footer .container {padding-top: 2.5em !important;} footer .container p {font-size: .85rem;} footer .container p a {padding: 0 .45rem .5em .45rem;} footer .container p .custom-copyright {margin-left: auto; margin-top: 1.25em; margin-bottom: 1.5em; color: var(--grey);} } @media screen and (min-width: 576px) and (max-width: 767px) { footer .container p .custom-copyright {margin-right: .5rem;} } @media screen and (min-width: 768px) and (max-width: 1199px) { footer .container {padding-top: 2em;} } @media screen and (min-width: 1200px) { footer .container {padding-top: 6em;} } /* ----------------------------------------------------------------------------------------------------------------------------- * MODALS ----------------------------------------------------------------------------------------------------------------------------- */ .modal-backdrop {opacity: 1 !important; background-color: rgba(225,225,225,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} .modal-header, .modal-content, .modal-footer {border-radius: 0 !important; border: none !important;} .modal-header {padding-bottom: 0;} .modal-dialog {border: none !important; margin-top: 0;} .modal-content {min-height: 100vH; padding: 1.15em;} .modal.show .modal-dialog {min-height: 100%; width: 50%; max-width: none; margin-left: 0; margin-bottom: 0;} .modal-header .btn-close {background: url(/img/x-lg-blue.svg); opacity: 1; background-repeat: no-repeat; background-size: 70% auto; transform: translate(.75em, -.75em);} .custom-modal-close-container {position: absolute; right: .75rem; top: .925rem; transform: scale(1.2); width: 2.5em; height: 2.5em; cursor: pointer;} .custom-modal-close-container .close-modal-toggler {display: block; height: 100%;} .custom-modal-close-container .top {height: .075em; width: 1.5em; position: absolute; margin-top: 1.25em; margin-left: .375em; background-color: var(--blue-01); transform: rotate(30deg); transition: all .3s ease-in;} .custom-modal-close-container .bottom {height: .075em; width: 1.5em; position: absolute; margin-top: 1.25em; margin-left: .375em; background-color: var(--blue-01); transform: rotate(-30deg); transition: all .3s ease-in;} .custom-modal-close-container:hover .top {transform: rotate(0deg);} .custom-modal-close-container:hover .bottom {transform: rotate(-0deg);} .modal-title {animation: TextLeftToRight02 1s ease-out;} @-webkit-keyframes TextLeftToRight02 { 0% {transform: translateX(-3em); opacity: 0;} 100%{transform: translateX(0); opacity: 1;} } /* Modal: Anfahrt */ .custom-modal-directions .custom-container-maps, .custom-modal-directions .consent-placeholder-container {height: 15vw;} .custom-modal-directions .custom-container-maps iframe {width: 100%; height: 100%; border: none; margin: 0;} /* Modal: Kontaktformular */ .custom-modal-contact .modal-dialog {width: 78%; max-width: 1860px;} /* Formular */ .custom-form-contact .custom-wrap {overflow: hidden !important;} .custom-form-contact .custom-col-01 {padding-right: 1.825em; overflow: hidden;} .custom-form-contact .custom-col-02 {padding-left: 1.825em; overflow: hidden;} .custom-form-contact .custom-border {border-bottom: 1px solid var(--black);} .custom-form-contact .custom-form-row {margin-top: .5rem; margin-top: .5em; position: relative;} .custom-form-contact label {font-size: .75em;} .custom-form-contact label:hover {cursor: pointer;} .custom-form-contact label span {color: var(--blue); font-weight: 600;} .custom-form-contact label.custom-label-textarea {padding-top: .5em; padding-bottom: .25em; left: 0;} .custom-form-contact input {box-shadow: none !important;} .custom-form-contact input[type="text"], .custom-form-contact input[type="email"] {width: 100%; height: 1.5em; border-radius: 0 !important; color: var(--blue-01); background-color: transparent;} .custom-form-contact input[type="checkbox"]:hover {cursor: pointer;} .custom-form-contact input[type="checkboxt"]:focus:not(:focus-visible) {outline: none;} .custom-form-contact input[type="checkbox"]:focus-visible {outline: solid; outline-color: var(--black); outline-width: 4px;} .custom-form-contact textarea {width: 100%; height: 7em; padding-bottom: .525em; border-bottom: 1px solid var(--black); border-radius: 0 !important; color: var(--blue-01); background-color: transparent;} .custom-form-contact input[type="text"]:focus, .custom-form-contact input[type="email"]:focus, .custom-form-contact textarea:focus, .custom-form-contact input[type="text"]:active, .custom-form-contact input[type="email"]:sctive, .custom-form-contact textarea:active {outline: none;} .custom-form-contact input[type="text"]:focus:not(:focus-visible), .custom-form-contact input[type="email"]:focus:not(:focus-visible), .custom-form-contact textarea:focus:not(:focus-visible) {} .custom-form-contact input[type="text"]:focus-visible, .custom-form-contact input[type="email"]:focus-visible, .custom-form-contact textarea:focus-visible {outline: none;} .custom-form-contact input.birthday_chk {height: 1px;} .custom-form-contact .birthday_chk {visibility: hidden; height: 1px;} .custom-form-contact .custom-btn-row {padding-top: 0; padding-bottom: 2.5em;} .custom-form-contact .invalid-feedback {margin-top: -2px !important; margin-bottom: -1px; font-size: 80%; color: var(--black); margin-top: 0; padding: 8px 4px 6px 1.25em; background-color: #fabfff;} .custom-form-contact .form-check-input, .custom-form-contact .form-check-input[type="checkbox"] {border-radius: 0 !important; border: 1px solid var(--black);} .custom-form-contact .form-check-input:checked, .custom-form-contact .form-check-input.is-valid:checked, .custom-form-contact .was-validated .form-check-input:valid:checked {background-color: var(--black); border-color: var(--black);} .form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label {color: var(--black);} .form-check .invalid-feedback {margin-left: -2em; width: calc(100% + 4em);} .custom-wrap-message .custom-success {margin-top: 1.5em; color: var(--black); padding: 10px 4px 8px 4px; background-color: #95ff81; text-align: center;} .custom-wrap-message .custom-error {margin-top: 1.5em; color: var(--black); padding: 10px 4px 8px 4px; background-color: #fabfff; text-align: center;} .was-validated .form-check-input:valid ~ .form-check-label {color: var(--black);} .was-validated .form-check-input:valid:checked {background-color: var(--black);} @media screen and (min-width: 768px) and (max-width: 1200px) { .modal {padding-right: 0 !important;} .modal-dialog {max-width: 96% !important;} .modal-content {padding: .75em .25em;} .custom-modal-directions .custom-container-maps, .custom-modal-directions .consent-placeholder-container {height: 30vw;} } @media screen and (max-width: 767px){ /* .modal-content {padding: 2.25em .25em;} */ .modal-content {padding: .25em 0 2.25em 0;} .custom-modal-close-container {transform: scale(1.4);} .custom-form-contact label {font-size: .85rem;} .custom-form-contact .custom-btn-row {padding-top: 1em;} .modal.show .modal-dialog {width: 90%;} .custom-modal-directions .custom-container-maps, .custom-modal-directions .consent-placeholder-container {height: 40vw;} } @media screen and (max-width: 575px){ .custom-modal-close-container {transform: scale(1.4);} .custom-modal-directions .custom-container-maps, .custom-modal-directions .consent-placeholder-container {height: 78vw;} } /* ----------------------------------------------------------------------------------------------------------------------------- * KEYFRAMES ANIMATIONS - MULTIPLE USE ----------------------------------------------------------------------------------------------------------------------------- */ @keyframes FadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes SlideIn { from {transform: translateY(-4em);} to {transform: translateY(0);} }