/*###########################################################################*/
/*################################### Reset #################################*/
/*###########################################################################*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
html{ /* Remove 300 ms delay on touchscreens - IE */
-ms-touch-action: manipulation;
touch-action: manipulation;
/*scroll-behavior: smooth;*/
/*scrollbar-width: thin;*/
}
address{
font-style: normal;
}
body {
line-height: 1;
-webkit-text-size-adjust: none; /* avoid automatic text adjustement in safari on mobiles */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* remove clicked menu hightlight in iphone */
-webkit-font-smoothing: antialiased; /* Fix Font Flickering With Slideshow, CSS and JS Animations */
}
ul{
padding:0px;
}
ul li{
list-style-type: none;
}
a:link, a:visited{
text-decoration:none;
}
a img{
border:none;
}
a{
outline-color: transparent;
/*outline: 0;*/
}
table {
border-collapse: collapse;
border-spacing: 0;
}
iframe{
display:block;
}
/* unify scroll width and appearance on all devices - except firefox on OSX */
/*::-webkit-scrollbar{
-webkit-appearance: none;
width: 17px;
}
::-webkit-scrollbar-thumb{
border-radius: 0px;
background-color: #d8d8d8;
}*/
::-moz-selection { /* Code for Firefox */
color: white;
background: #8e7039;
}
::selection {
color: white;
background: #8e7039;
}
/*###########################################################################*/
/*##################### Variables + Manual Parallax #########################*/
/*###########################################################################*/
/* See "Update css variables" in app.js */
:root {
--mouse-x: 0px;
--mouse-y: 0px;
--scroll: 0px;
}
.scrollMovements,
.mouseMovements{
left: 0px;
top: 100px;
width: 50px;
height: 50px;
background: red;
transform:translate(calc(var(--mouse-x) / 10), calc(var(--mouse-y) / 10));
position: fixed;
z-index:999;
}
.mouseMovements{
background: #673AB7;
}
.scrollMovements{
left:0px;
top: 200px;
transform:translate(var(--scroll), 0);
}
.jsPlayground{
min-height:200vh;
position:relative;
background-color:#c17a62;
transition:background 0.8s ease-out;
overflow:hidden;
}
.jsPlayground.passed50{
background-color:#63382a;
}
#manualParallaxBox,
#manualParallaxBox1,
#manualParallaxBox2,
#manualParallaxBox3,
#manualParallaxBox4,
#manualParallaxBox5,
#manualParallaxBox6,
#manualParallaxBox7{
position:absolute;
top:-100px;
left:-100px;
width:20px;
height:20px;
background:#ffffff;
}
#manualParallaxBox1{
top:-100px;
left:-100px;
background:#FFEB3B;
}
#manualParallaxBox2{
top:200px;
left:-100px;
width:80px;
height:80px;
background:#009688;
}
#manualParallaxBox3{
top:-100px;
left:auto;
right:-100px;
background:#9C27B0;
}
#manualParallaxBox4{
background:#795548;
}
#manualParallaxBox5{
width:auto;
aspect-ratio:1.5;
margin-top:-50%;
height:10vh;
background:#8BC34A;
left:50%;
/*transition:transform 0.5s ease-out;*/
}
#manualParallaxBox6{
width:200px;
height:200px;
background:#E91E63;
left:200px;
transition:transform 0.5s ease-out;
}
#manualParallaxBox6 svg{
fill:#ffe189;
display:block;
width:100%;
height:auto;
}
#manualParallaxBox7{
width:80px;
height:80px;
background:#20c9e5;
left:100px;
top:auto;
bottom:0;
}
/* Heading Parallax */
#headingParallax{
transition: transform 2s cubic-bezier(0, 0, 0, 1) 0s, opacity 0.5s ease-out;
will-change: transform;
opacity:0;
}
#headingParallax.appear{
opacity:1;
}
/*###########################################################################*/
/*################################## Fonts ##################################*/
/*###########################################################################*/
@font-face {
font-family: 'Open';
src: url('assets/fonts/opensans-regular.woff2') format('woff2'),
url('assets/fonts/opensans-regular.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'Circular';
src: url('assets/fonts/CircularStd-Medium.woff2') format('woff2'),
url('assets/fonts/CircularStd-Medium.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'Circular';
src: url('assets/fonts/CircularStd-Black.woff2') format('woff2'),
url('assets/fonts/CircularStd-Black.woff') format('woff');
font-weight:bold;
font-display: swap;
}
/*###########################################################################*/
/*################################# Sprites #################################*/
/*###########################################################################*/
/*.collapsible div,*/
.inputWrap .label div,
.labelRadio div,
.labelCheck div,
.selectListWrap > a::after,
.spriteIcon,
.inlineIcon,
.biggerIcon{
background: url('assets/sprite.png');
background-size:800px 800px;
background-repeat: no-repeat;
}
/*.spriteIcon{
width: 25px; height: 25px;
background-position: -75px -25px;
}*/
/*###########################################################################*/
/*################################ Preloader ################################*/
/*###########################################################################*/
#preloadingPage,
#contentPreloader{
width: 80px;
height: 80px;
margin-top:-40px;
margin-right:-40px;
position: fixed;
right: 50%;
top: 50%;
animation:loadDisapear 0.4s ease forwards;
z-index:9999;
transform:scale3d(0,0,0);
}
#preloadingPage svg,
#contentPreloader svg{
width:100%;
height:auto;
display:block;
fill:white;
}
[data-preloader] #preloadingPage{
visibility:visible;
animation:loadAppear 0.4s ease forwards;
}
[data-preloader] #preloadingPage > div{
animation:bounce 0.6s ease infinite;
}
/* Special cases */
[data-landing] #preloadingPage,
[data-landing] #preloadingMask{
visibility:collapse;
}
#contentPreloader{
visibility:visible;
z-index: 0;
position: absolute;
}
.sl-spinner{ /* lightbox images opening spinner */
width: 60px;
height: 60px;
margin-top:-30px;
margin-right:-30px;
position: fixed;
z-index: 999;
right: 50%;
top: 50%;
animation: bounce 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
}
.sl-spinner div{
width:100%;
height:100%;
background-color:white;
border-radius:50%;
}
@keyframes spin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes bounce {
0% {transform:scale(1);}
50% {transform:scale(0.5);}
}
@keyframes loadAppear {
0% { transform:scale3d(0,0,0); }
100% { transform:scale3d(1,1,1);}
}
@keyframes loadDisapear {
0% { transform:scale3d(1,1,1); }
100% { transform:scale3d(0,0,0); }
}
/* Preloader Mask (Transition) */
#preloadingMask{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background: radial-gradient(#97c0e6 50%, #79a5ce 100%);
z-index:999;
animation:hideTransition 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
[data-mainmenu] #preloadingMask,
[data-landing] #preloadingMask{
animation:hideTransition 0s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; /* 0s is important !*/
}
[data-transition] #preloadingMask{
animation:showTransition 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
/*@keyframes showTransition{
0% {transform:translate(0,-100vh);}
100% {transform:translate(0,0);}
}
@keyframes hideTransition{
0% {transform:translate(0,0);}
99% {transform:translate(0,100vh);}
100% {transform:translate(0,100vh); visibility:collapse;}
}*/
@keyframes showTransition{
0% {transform:translate(0,-100vh); opacity:0;}
1% {transform:translate(0,0); opacity:0;}
100% {transform:translate(0,0); opacity:1;}
}
@keyframes hideTransition{
0% {transform:translate(0,0); opacity:1;}
99% {transform:translate(0,0); opacity:0;}
100% {transform:translate(0,100vh); opacity:0; visibility:collapse;}
}
/* Content effects */
[data-landing] #contentWrapper{
animation:none;
}
#contentWrapper{
animation:showContent 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
[data-mainmenu] #contentWrapper,
[data-transition] #contentWrapper{
animation:hideContent 0.5s ease-in forwards;
}
/*@keyframes hideContent{
0% {transform:translate(0,0);}
100% {transform:translate(0,10vh);}
}
@keyframes showContent{
0% {transform:translate(0,-10vh);}
98% {transform:translate(0,0);}
99% {transform:none;}
}*/
@keyframes hideContent{
0% {transform:translate3d(0,0,0);}
100% {transform:translate3d(0,0,-1px);}
}
@keyframes showContent{
0% {transform:translate3d(0,0,-1px);}
98% {transform:translate3d(0,0,0);}
99% {transform:none;} /* Bug = ignored if 100%? */
}
html {
/*overflow: clip;*/
}
body[data-noscroll]{
}
footer,
main{
transform-style: preserve-3d; /* Transmit the 3d environment generated from scrollWrapper !!! overflow:hidden will cancel the effect. */
}
#perspectiveCt{
perspective: 6px;
perspective-origin: top;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*########################### Slices + Grid System ##########################*/
/*###########################################################################*/
body{
display:flex;
flex-wrap: wrap;
/* perspective: 6px; */ /* needs bigger number to take steps back - allows objects with translateZ > 0 (faster) */
}
body > header,
body main,
body > section,
body > footer,
body > aside{
width:100%;
}
#contentStartAnchor{
display:block;
position:absolute;
width:10px;
height:0px;
}
#perspectiveCt,
.slice,
header,
aside,
article,
main,
section,
footer{
width: 100%;
box-sizing: border-box;
position: relative;
}
section{
overflow-x:clip;
}
/* Grid & Templates*/
:root {
--gu: clamp(12px, calc(100vw / 26 ), 60px); /* --gu = 4.16 rem 80px = 1920 width*/
font-size: clamp(18px, 1.1vw, 21px); /* defines rem */
}
.frame{
width:100%;
max-width: calc(var(--gu) * 26);
margin:0 auto;
}
.limited{ /* Defines content width restrictions when screens get larger */
width:100%;
max-width: calc(var(--gu) * 24);
margin:0 auto;
}
/* tool (can be removed) */
.gridTemplate{
display: grid;
height:100vh;
grid-template-columns: repeat(26, var(--gu));
flex-wrap: nowrap;
position: fixed;
left:50%;
transform: translate3d(-50%,0,0);
/* display:none; */
}
.gridTemplate > div{
box-sizing:border-box;
border-right:solid 1px #ff6600;
text-align:right;
color:#656565;
text-align:center;
font-size:0.6rem;
}
.gridTemplate > div:first-child{
border-left:solid 1px #ff6600;
}
@media only screen and (min-width: 1191px) and (max-width: 1740px) { /* Large Screens */
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.gridTemplate{
left:50%; /* Ignore scroll bar */
}
:root{
/*--gu: calc(((100vw / 100) * 95) / 26); /* 95% of the width to add padding on the sides */
}
}
@media (hover: none) { /* Any Touch Screen */
}
/*###########################################################################*/
/*################################### Dough #################################*/
/*###########################################################################*/
.doubleDough,
.doubleDoughH1,
.doubleDoughH2,
.singleDough,
.singleDoughBottom,
.singleDoughH2,
.singleDoughH1{
padding:5rem 0;
}
/*.singleDoughH2,
.doubleDoughH2{
padding-top:4.5rem;
}
.singleDoughH1,
.doubleDoughH1{
padding-top:4rem;
}*/
.singleDoughH2,
.singleDoughH1,
.singleDough{
padding-bottom:0;
}
.singleDoughBottom{
padding-top:0;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*################################ Global Styles ############################*/
/*###########################################################################*/
html{
min-height:100%;
font-family: 'Open', sans-serif;
}
body{
color: #333;
background-color: #e1e1e1;
/* overflow-x:hidden; /* Fix bug in IE */
position:relative;
line-height: 1.6;
}
/* --------------------------- typo + paragraphs */
a{
color: #2a76bf;
}
a:hover{
text-decoration:underline;
text-decoration-color:#FF5722;
text-decoration-thickness: 3px;
/*text-decoration-style: wavy;*/
text-underline-position: under;
}
p{
margin-bottom:1rem;
}
h1, h2, h3, h4{
font-family: 'Circular', sans-serif;
font-size:3rem;
font-weight:bold;
line-height:1.1;
text-wrap: balance;
}
h2{
font-size:2rem;
}
h3{
font-size:1.8rem;
}
h4{
font-size:1.6rem;
}
small{
font-size:0.7rem;
display:inline-block;
line-height:1.6;
}
small.italic{
font-size:0.7rem;
font-style:italic;
}
sup{
font-size: 0.7rem;
vertical-align: super;
}
sub{
font-size: 0.7rem;
vertical-align: sub;
}
span.indent{
display:inline-block;
box-sizing:border-box;
padding:0 0 0 20px;
border-left:solid 10px #cdcdcd;
}
.inlineImg{
position:relative;
left:50%;
width: clamp(100%, calc( var(--gu) * 14), 900px); /* to customize */
transform:translate(-50%,0);
height:auto;
}
.inlineImg img{
display:block;
width:100%;
height:auto;
}
article .inlineImg{
position:static;
left:0;
width:100%;
transform:none;
height:auto;
}
picture ~ .imgCaption,
picture .imgCaption{
position:absolute;
width:100%;
bottom:0;
padding:5px 0;
box-sizing:border-box;
font-size:0.65rem;
font-style:italic;
text-align:center;
color:#ffffff;
background-color:#363636;
}
/* ------ special mobile */
.mobOnly{ /* usage:
*/
display:none;
}
/* ------ skip link */
.skip-link{
left: 50%;
position: absolute;
transform: translate3d(-50%,-200%,0);
background: #ececec;
z-index:9999;
transition: transform 0.3s ease;
padding:1rem 2rem 0.7rem 2rem;
vertical-align:middle;
}
.skip-link:focus-within {
transform: translate3d(-50%,0,0);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.noTab{ /* usage:
*/
display:none;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.mobOnly{
display:inline-block;
}
.noMob{ /* usage:
*/
display:none;
}
}
/*###########################################################################*/
/*################################## Icons ##################################*/
/*###########################################################################*/
/*
*/
.inlineIcon{
display: inline-block;
vertical-align:middle;
margin: 0 0 0 0;
width: 26px;
height: 26px;
background-position: -3px -621px;
}
.inlineIcon.b1{ background-position: -35px -621px;}
.inlineIcon.c1{ background-position: -66px -621px;}
.inlineIcon.d1{ background-position: -97px -621px;}
.inlineIcon.e1{ background-position: -128px -621px;}
.inlineIcon.f1{ background-position: -159px -621px;}
.inlineIcon.g1{ background-position: -190px -621px;}
.inlineIcon.h1{ background-position: -221px -621px;}
.inlineIcon.i1{ background-position: -252px -621px;}
.inlineIcon.j1{ background-position: -284px -621px;}
.inlineIcon.k1{ background-position: -315px -621px;}
.inlineIcon.l1{ background-position: -346px -621px;}
.inlineIcon.a2{ background-position: -3px -651px;}
.inlineIcon.b2{ background-position: -34px -651px;}
.inlineIcon.c2{ background-position: -65px -650px;}
.inlineIcon.d2{ background-position: -96px -650px;}
.inlineIcon.e2{ background-position: -128px -650px;}
.inlineIcon.f2{ background-position: -159px -650px;}
.inlineIcon.g2{ background-position: -190px -650px;}
.inlineIcon.h2{ background-position: -221px -650px;}
.inlineIcon.i2{ background-position: -252px -650px;}
.inlineIcon.j2{ background-position: -283px -650px;}
.inlineIcon.k2{ background-position: -314px -650px;}
.inlineIcon.l2{ background-position: -346px -650px;}
.inlineIcon.a3{ background-position: -3px -680px;}
.inlineIcon.b3{ background-position: -34px -680px;}
.inlineIcon.c3{ background-position: -65px -680px;}
.inlineIcon.d3{ background-position: -96px -680px;}
.inlineIcon.e3{ background-position: -128px -680px;}
.inlineIcon.f3{ background-position: -159px -680px;}
.inlineIcon.g3{ background-position: -190px -680px;}
.inlineIcon.h3{ background-position: -221px -680px;}
.inlineIcon.i3{ background-position: -252px -680px;}
.inlineIcon.j3{ background-position: -283px -680px;}
.inlineIcon.k3{ background-position: -314px -680px;}
.inlineIcon.l3{ background-position: -346px -680px;}
.inlineIcon.a4{ background-position: -3px -710px;}
.inlineIcon.b4{ background-position: -35px -710px;}
.inlineIcon.c4{ background-position: -65px -710px;}
.inlineIcon.d4{ background-position: -97px -710px;}
.inlineIcon.e4{ background-position: -128px -710px;}
.inlineIcon.f4{ background-position: -159px -710px;}
.inlineIcon.g4{ background-position: -191px -710px;}
.inlineIcon.h4{ background-position: -222px -710px;}
.inlineIcon.i4{ background-position: -253px -710px;}
.inlineIcon.j4{ background-position: -284px -710px;}
.inlineIcon.k4{ background-position: -315px -710px;}
.inlineIcon.l4{ background-position: -347px -710px;}
.inlineIcon.a5{ background-position: -3px -740px;}
.inlineIcon.b5{ background-position: -35px -740px;}
.inlineIcon.c5{ background-position: -66px -740px;}
.inlineIcon.d5{ background-position: -97px -740px;}
.inlineIcon.e5{ background-position: -128px -740px;}
.inlineIcon.f5{ background-position: -159px -740px;}
.inlineIcon.g5{ background-position: -191px -740px;}
.inlineIcon.h5{ background-position: -222px -740px;}
.inlineIcon.i5{ background-position: -253px -740px;}
.inlineIcon.j5{ background-position: -284px -740px;}
.inlineIcon.k5{ background-position: -315px -740px;}
.inlineIcon.l5{ background-position: -347px -740px;}
.inlineIcon.a6{ background-position: -3px -771px;}
.inlineIcon.b6{ background-position: -35px -771px;}
.inlineIcon.c6{ background-position: -66px -771px;}
.inlineIcon.d6{ background-position: -97px -771px;}
.inlineIcon.e6{ background-position: -128px -771px;}
.inlineIcon.f6{ background-position: -159px -771px;}
.inlineIcon.g6{ background-position: -190px -771px;}
.inlineIcon.h6{ background-position: -222px -771px;}
.inlineIcon.i6{ background-position: -253px -771px;}
.inlineIcon.j6{ background-position: -284px -771px;}
.inlineIcon.k6{ background-position: -315px -771px;}
.inlineIcon.l6{ background-position: -346px -771px;}
.biggerIcon{
display:inline-block;
vertical-align:middle;
margin:0 0 0 0;
width: 36px; height: 36px;
background-position: -425px -603px;
}
.biggerIcon.b1{ background-position: -467px -603px;}
.biggerIcon.c1{ background-position: -509px -603px;}
.biggerIcon.d1{ background-position: -550px -603px;}
.biggerIcon.a2{ background-position: -425px -643px;}
.biggerIcon.a2{ background-position: -425px -643px;}
.biggerIcon.b2{ background-position: -467px -643px;}
.biggerIcon.c2{ background-position: -509px -643px;}
.biggerIcon.d2{ background-position: -550px -643px;}
.biggerIcon.a3{ background-position: -425px -682px;}
.biggerIcon.b3{ background-position: -467px -682px;}
.biggerIcon.c3{ background-position: -509px -682px;}
.biggerIcon.d3{ background-position: -550px -682px;}
.biggerIcon.a4{ background-position: -425px -722px;}
.biggerIcon.b4{ background-position: -467px -722px;}
.biggerIcon.c4{ background-position: -509px -722px;}
.biggerIcon.d4{ background-position: -550px -722px;}
.biggerIcon.a5{ background-position: -425px -761px;}
.biggerIcon.b5{ background-position: -467px -761px;}
.biggerIcon.c5{ background-position: -509px -761px;}
.biggerIcon.d5{ background-position: -550px -761px;}
/*###########################################################################*/
/*################################ Buttons ##################################*/
/*###########################################################################*/
/*About*/
a.inPageButtons,
a.inPageButtonsB{
display:inline-block;
padding: 8px 16px;
border-radius: 4px;
background-color: #f6f6f6;
color: #333333;
margin:20px 20px 0 0;
}
a.inPageButtons:hover,
a.inPageButtonsB:hover{
text-decoration: none;
background-color: #ededed;
}
a.inPageButtonsB{
background-color: #8a8a8a;
color: #FFFFFF;
}
a.inPageButtonsB:hover{
background-color: #808080;
}
a.inPageButtons.active,
a.inPageButtonsB.active{
background-color: #de5959;
color: #FFFFFF;
}
/*##############################################################################*/
/*################################ File Links ##################################*/
/*##############################################################################*/
.fileBlock{
display:inline-block;
}
.fileBlock .inlineIcon{
margin-top:1rem;
}
.fileBlock .fileItem{
/*background-color:cadetblue;*/
display:inline-block;
vertical-align:top;
margin-top:1rem;
}
.fileBlock .fileItem span.docSize,
.fileBlock .fileItem span.modified{
font-size:0.7rem;
font-style:italic;
display:block;
line-height:1.2;
}
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*####################################################### Frame + Persistent Elements ########################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*###########################################################################*/
/*##################################### Logo ################################*/
/*###########################################################################*/
.logo{
width: 180px;
display:block;
line-height:0;
transition: all 200ms ease;
will-change: transform; /*Fix rough scroll in Edge*/
}
.logo svg{
width: 100%;
height:auto;
fill:#616161;
transition: all 1s ease;
}
[data-homePageLanding] #mainLogo{
animation: 1.5s 0.4s ease forwards animLogo;
}
[data-transition] #mainLogo{ /* rewind logo animation to run it after transition */
transform: translate(0, 0);
}
#mainLogo.inViewport svg{
fill:#ffffff;
}
#mainLogo:hover svg{
fill:#8BC34A;
}
.logoContainer{
position: absolute;
top: 0;
}
.logoContainer > div{
height:10px;
}
@keyframes animLogo{
0%{ transform: scale(0.5);}
50%{transform: scale(2);}
100%{transform: scale(1);}
}
/* special page */
/*.homepage .logo{
transform: translate(-50%, 0) scale(1.2);
}*/
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*################################### Header ################################*/
/*###########################################################################*/
nav.appHeading{
width:100%;
position: fixed;
z-index: 999; /* need a high Z-index to avoid repaint on page change */
max-width:inherit;
transition: transform 0.4s ease;
overflow:visible;
height: 4px; /* keep it thin to avoid overlaping with logo underneath */
transform: translate3d(0, 0, 0);
background-color:aqua;
}
nav.appHeading .headerBg{
transition: transform 0.4s ease;
height:64px;
width:100%;
background-color: #004C9D;
position:absolute;
top:0;
left:0;
transform: scale3d(1, 0, 1);
transform-origin:top;
}
/* Scroll states: body[scrollingDown], body[scrollingUp], body[scrolled] */
body[data-scrollingUp] nav.appHeading .headerBg{
transform: scale3d(1, 1, 1);
}
.headingMenu{
position:absolute;
top:50%;
left:50%;
transform:translate3d(0,50%,0);
background-color:#e5dc20;
transition:transform 0.4s ease;
}
body[data-scrolled] .headingMenu{
transform:translate3d(0,-100%,0);
}
body[data-scrollingUp] .headingMenu{
transform:translate3d(0,0,0);
}
.headingMenu a{
display:inline-block;
}
.menuContainer{
position:relative;
height:100%;
}
.smalllogo{
display:block;
width:150px;
position:absolute;
top:50%;
transform:translate3d(0,-200%,0);
transition:transform 0.4s ease;
}
/*body[scrolled] .smalllogo{
transform:translate3d(0,-100%,0);
}*/
body[data-scrollingUp] .smalllogo{
transform:translate3d(0,0,0);
}
.smalllogo svg{
width:100%;
height:auto;
display:block;
overflow:visible;
}
body[data-scrolled] .hamburger{
transform:translate3d(0,-50%,0);
}
/* hamburger menu */
.hamburger{
width:41px;
height:41px;
position:absolute;
top:50%;
right:0;
transform:translate3d(0,50%,0);
transition:transform 0.4s ease;
}
body[data-scrolled] .hamburger{
transform:translate3d(0,-100%,0);
}
body[data-scrollingUp] .hamburger{
transform:translate3d(0,0,0);
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #fff;
}
.hamburger-box {
width: 100%;
height: 24px;
display: block;
margin-top:8px;
position: relative;
}
.hamburger-inner {
top:50%;
transform:translate(0,-50%);
}
.hamburger-inner,
.hamburger-inner:before,
.hamburger-inner:after {
display: block;
width: 41px;
height: 5px;
background-color: #484848;
position: absolute;
transition: transform 0.2s linear;
border-radius: 2px;
}
.hamburger-inner:before,
.hamburger-inner:after {
content: "";
}
.hamburger-inner:before {
top: -14px;
}
.hamburger-inner:after {
bottom: -14px;
}
/*arrow effect*/
.hamburger:hover .hamburger-inner {
transform: translateY(-2px) rotate(90deg) scale(0.9);
}
.hamburger:hover .hamburger-inner:before {
transform: translateY(14px) rotate(90deg);
}
.hamburger:hover .hamburger-inner:after {
transform: translateY(-14px) rotate(-90deg);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
nav.appHeading{
width:100%;
}
}
/*###########################################################################*/
/*################################### Footer ################################*/
/*###########################################################################*/
footer{
background-color:#a9a9e0;
}
.footerMenu{
}
.realFooter{
}
.realFooter a{
}
.realFooter a:hover{
}
/* Logo Litemoon */
a.litemoon{
position:absolute;
bottom:0px;
right:0px;
display:block;
width:130px;
height:80px;
overflow:hidden;
}
a.litemoon > div{
position:absolute;
bottom:30px;
right:30px;
width:90px;
height:auto;
}
a.litemoon svg{
width:100%;
height:auto;
display:block;
transition:transform 0.4s ease;
transform:translate(65px,0);
}
a.litemoon:hover svg{
transform:translate(0,0);
}
a.litemoon .litemoonLogo{
transition:fill 0.4s ease;
fill:#d6d6d6;
}
a.litemoon .litemoonText{
transition:fill 0.4s ease;
fill:transparent;
}
a.litemoon:hover .litemoonText{
fill:#58595b;
}
a.litemoon:hover .litemoonLogo{
fill:#f15a29;
}
/*###########################################################################*/
/*################################# Overlays ################################*/
/*###########################################################################*/
.overlayPage{
position:fixed;
height:100%;
width:100%;
background-color:#f1edea;
transform: translate3d(0,0,-1px);
z-index:999;
overflow: hidden;
overflow-y: auto; /*scroll */
opacity:0;
animation:closeOverlay 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
/*perspective: 2px;*/
}
[data-landing] .overlayPage{
animation:closeOverlay 0s linear forwards;
}
.overlayPage.open{
animation:openOverlay 0.5s cubic-bezier(0.98, 0.39, 0.36, 1) forwards;
}
@keyframes openOverlay{
0% {transform:translate3d(0,-120vh,0); opacity:0; }
1% {transform:translate3d(0,0,0); opacity:0; }
100% {transform:translate3d(0,0,0); opacity:1;}
}
@keyframes closeOverlay{
0% {transform:translate3d(0,0,0); opacity:1; }
99% {transform:translate3d(0,0,0); opacity:0; }
100% {transform:translate3d(0,-120vh,0); opacity:0; visibility:collapse;} /* hack ios */
}
.overlayPage .fg{
min-width:100%;
min-height:100%;
background: radial-gradient(ellipse at center, rgba(86, 12, 105, 0.48) 0%,rgb(74, 10, 90) 80%);
}
.overlayClose{
position:absolute;
top:40px;
right:40px;
z-index:1;
}
button.sl-close:hover .closingCross,
.overlayClose:hover .closingCross{
transform:rotate(225deg);
}
.touchScreen .overlayPage{
right:0;
}
.closingCross{
display:block;
width: 25px;
height: 25px;
position:relative;
transition:transform 0.5s ease;
transform:rotate(45deg);
transform-origin:center;
}
.closingCross:after,
.closingCross:before{
content:'';
top:50%;
left:0;
position:absolute;
width:100%;
height:3px;
border-radius:2px;
margin-top:-2px;/*To adjust depending on parent size*/
background-color:#676156;
}
.closingCross.clear:after,
.closingCross.clear:before{
background-color:#ffffff;
}
.simple-lightbox .closingCross:after,
.simple-lightbox .closingCross:before{
background-color:#ffffff;
}
.closingCross:after{
transform:rotate(-90deg);
}
/* ------------------------------- Cookie banner */
/*.cookieRecall{
position:fixed;
top:auto;
bottom:0;
z-index:99;
background-color:antiquewhite;
}
#cookieConsent{
position:fixed;
top:auto;
bottom:0px;
right: auto;
left:0;
height:auto;
width:600px;
max-width:100%;
min-height:auto;
background-color:#326d36;
border-radius:0px;
padding:24px 30px 20px 30px;
box-sizing:border-box;
font-size:0.85rem;
transform: translate(-110%, 110%);
overflow-y: hidden;
color:#ffffff;
font-weight:normal;
transition:transform 0.4s ease;
animation:none;
opacity:1;
font-size:0.8rem;
z-index:999;
}
#cookieConsent.open{
transform: translate(0, 0);
transition:transform 0.4s ease;
}
a[data-cookies]{
display:inline-block;
padding: 6px 12px;
border-radius: 4px;
background-color: #245627;
color: #ffffff;
margin:15px 10px 0 0;
text-decoration: none;
}
a[data-cookies].selected{
border:3px solid #000000;
}
#cookieConsent:has(a[data-cookies].selected):hover{
transform: translate(0, 0);
}
a[data-cookies]:hover{
background-color: #1c461f;
color: #ffffff;
}
a[data-cookies].emphasis{
background-color: #f2f2f2;
color: #333333;
}
a[data-cookies].emphasis:hover{
background-color: #ffffff;
color: #333333;
}
#cookieConsent .biggerIcon{
float:left;
}*/
/* ------------------------------- Main Menu */
#mainmenu{
position:fixed;
top:0;
right:auto;
left:0;
height:100vh;
width:100vw;
max-width:100%;
/*transform: translate3d(0,-120vh,0);*/
z-index:999;
overflow: hidden;
overflow-y: auto;
/*animation:closeMenu 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;*/
}
/*[data-landing] #mainMenu{
animation:closeMenu 0s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
#mainMenu.open{
animation:openMenu 0.5s cubic-bezier(0.98, 0.39, 0.36, 1) forwards;
}
@keyframes openMenu{
0% {transform:translate3d(0,-120vh,0); }
100% {transform:translate3d(0,0,0); }
}
@keyframes closeMenu{
0% {transform:translate3d(0,0,0); }
99% {transform:translate3d(0,120vh,0); }
100% {transform:translate3d(0,-120vh,0); visibility:collapse;}
}*/
/* nav */
#mainmenu > nav{
width:100%;
/*transform:translate3d(200px,0,0);*/
transform:scale3d(0.8, 0.8, 1);
transition:all 0.6s ease-out;
transition-delay:0.4s;
padding:40px;
box-sizing:border-box;
transition:transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#mainmenu.open > nav{
/*transform:translate3d(0px,0,0);*/
transform:scale3d(1, 1, 1);
/*transition:transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);*/
}
/* ------------------------------- Notifications */
#notification{
position:absolute;
left:1.5rem;
top:calc(100vh - 1.5rem);
transform:translate3d(0,0,0); /* override */
opacity:1; /* override */
translate:0 -100%;
height:auto;
width:auto;
padding:1rem 3rem 1rem 1rem;
box-sizing:border-box;
background-color:#f6f6f6;
color:inherit;
transform-origin:bottom left;
z-index:9999;
animation:closeNotification 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards;
border-radius:20px;
box-shadow:2px 2px 10px 0px #0000006b;
}
#notification.open{
animation:openNotification 0.3s cubic-bezier(0.18, 0.89, 0.44, 0.96) 0s 1 normal forwards;
}
[data-landing] #notification.openDelay,
[data-landing] #notification.openOnce{
animation-duration:0s;
}
a.notificationMain{
display:block;
width:calc(var(--gu) * 7);
max-width:100%;
text-decoration:none;
display:grid;
grid-template-columns: 1fr 2fr;
}
.notificationCover{
align-self: start;
}
.notificationCover img{
display:block;
width:100%;
height:auto;
}
.notificationText{
box-sizing:border-box;
padding: 0 0 0 1rem;
align-self: center;
font-size:0.8rem;
}
.notificationText h2{
font-size:1.3rem;
line-height:1.2;
}
.notificationText .notificationTeaser{
font-size:0.8rem;
line-height:1.6;
display:block;
color:#525252;
}
#notification .overlayClose{
top:20px;
right:20px;
transform: none;
}
/* recall button */
.popupRecall,
.notificationRecall{ /* left and top to adjust with #notification */
position:absolute;
left:0;
top:100vh;
translate:0 -100%;
margin:0;
z-index:99;
}
.popupRecall .inlineIcon,
.notificationRecall .inlineIcon{
display:block;
position:relative;
}
.popupRecall .inlineIcon:after,
.notificationRecall .inlineIcon:after{
content: "";
display:block;
left:0;
top:0;
position: absolute;
height: 100%;
width: 100%;
z-index:-2;
background-color:#252525;
border-radius:0 4px 4px 0;
}
.popupRecall .inlineIcon:after{
border-radius:0 0 0 4px;
}
.popupRecall span.verticalText,
.notificationRecall span.verticalText{
font-size:0.7rem;
padding:1rem 0 0 0.1rem;
color:#ffffff;
writing-mode: vertical-rl;
opacity:0;
transform:translate3d(0,-10px,0);
transition:transform 0.4s ease, opacity 0.4s ease;
}
.notificationRecall span.verticalText{
padding:0 0 0px 3px;
transform:translate3d(0,10px,0);
}
.popupRecall:hover span.verticalText,
.notificationRecall:hover span.verticalText{
opacity:1;
transform:translate3d(0,0,0);
}
.popupRecall:hover .inlineIcon:after,
.notificationRecall:hover .inlineIcon:after{
background-color:#000000;
}
@keyframes openNotification{
0%{transform: scale3d(0,0,1);}
100%{transform: scale3d(1,1,1);}
}
@keyframes closeNotification{
0%{transform: scale3d(1,1,1);}
100%{transform: scale3d(0,0,1);}
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
a.notificationMain{
width:calc(var(--gu) * 9);
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
a.notificationMain{
width:calc(var(--gu) * 13);
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
a.notificationMain {
width: calc(var(--gu)* 20);
grid-template-columns: 1fr;
}
.notificationText {
padding: 0;
}
.notificationCover{
max-width:120px;
}
.notificationText h2 {
margin:1rem 0 0.5rem 0;
}
}
/* ------------------------------- Popup */
#popup{
position:absolute;
right:0;
top:0;
transform:translate3d(0,0,0); /* override */
opacity:1; /* override */
display:block;
width:auto;
height:auto;
max-width:90%;
padding:0;
box-sizing:border-box;
background-color:transparent;
transform-origin:top right;
z-index:9999;
animation:closePopup 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards;
}
[data-landing] #popup.openDelay,
[data-landing] #popup.openOnce{
animation-duration:0s;
}
#popup.open{
animation:openPopup 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards;
}
.popupMask{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:antiquewhite;
z-index: 9998;
}
#popup a{
text-decoration:none;
}
#popup a.overlayClose{
top: 30px;
right: 40px;
}
a.popupMain{
display:block;
}
.popupCover img{
display:block;
width:100%;
height:auto;
}
@keyframes openPopup{
0%{transform: scale3d(0,0,1);}
100%{transform: scale3d(1,1,1);}
}
@keyframes closePopup{
0%{transform: scale3d(1,1,1);}
100%{transform: scale3d(0,0,1);}
}
.popupRecall {
position: absolute;
left:auto;
right: 0;
top: 0;
translate: 0;
margin: 0;
}
/* --- overlay mask */
.overlayMask{
top:0;
left:0;
position:fixed;
height:100%;
width:100vw;
background-color:#4c4c4cd6;
z-index:9999;
transform-origin:left;
animation:overlayClose 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
display:none;
}
.overlayMask.open{
display:block;
animation:overlayOpen 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
/* Might need to hide some elements */
body[data-overlayMask] .logoContainer{
opacity:0.5;
}
@keyframes overlayOpen{
0%{transform:scale3d(0,0,0);}
1%{transform:scale3d(0,0,0);}
100%{transform:scale3d(1,1,1);}
}
@keyframes overlayClose{
0%{transform:scale3d(1,1,1);display:block;}
99%{transform:scale3d(0,0,0);display:block;}
100%{transform:scale3d(0,0,0);display:none;}
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################# Pages Styles #################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*###########################################################################*/
/*############################## Page Template ##############################*/
/*###########################################################################*/
.page{
}
.page > header{
/*background:#90818f;*/
}
.page > div.coreContainer{
/*background:#796577;*/
}
.page .core{
/*background:#a97ec2;*/
}
/* ------------------ header */
.page header > div{
display:grid;
grid-template-columns: repeat(24, minmax(0, 1fr));
/*overflow:visible;
z-index:1;*/
}
.page header > div .introContainer{
grid-column: 2 / span 8;
grid-row: 1 / span 1;
align-self: center;
}
.page header > div .coverImage{
grid-column: 13 / span 12;
grid-row: 1 / span 1;
}
/* header left cover */
.page header > div.cover-left .introContainer{
grid-column: 15 / span 8;
}
.page header > div.cover-left .coverImage{
grid-column: 1 / span 12;
}
/* header wide cover + no-cover*/
.page header > div.cover-widetop,
.page header > div.cover-wide{
grid-template-rows: repeat(2, auto);
}
.page .mainCell,
.page header > div.cover-widetop .introContainer,
.page header > div.cover-wide .introContainer,
.page header > div.no-cover .introContainer{
grid-column: 8 / span 10;
grid-row: 1 / span 1;
padding:2rem 0 6rem 0;
}
.page .mainCell{
padding:0;
}
.page header > div.cover-widetop .introContainer{
padding:5rem 0 0 0;
}
.page header > div.no-cover .introContainer{
padding:2rem 0 0 0;
}
.page header > div.cover-widetop .coverImage,
.page header > div.cover-wide .coverImage{
grid-column: 2 / span 22;
grid-row: 2 / span 1;
}
.page header > div.cover-widetop .introContainer{
grid-row: 2 / span 1;
}
.page header > div.cover-widetop .coverImage{
grid-row: 1 / span 1;
}
/* header overlap cover */
.page header > div.cover-overlap{
grid-template-rows: repeat(1, auto);
}
.page header > div.cover-overlap .introContainer{
grid-column: 4 / span 9;
grid-row: 1 / span 1;
z-index:1;
background-color:rgb(51 51 51 / 75%);
padding:2rem 3rem;
border-radius:20px;
box-sizing:border-box;
position:absolute;
top:9rem;
}
.page header > div.cover-overlap .coverImage{
grid-column: 2 / span 22;
grid-row: 1 / span 1;
}
/* ------------------ core */
.page .coreContainer{
padding-top:6rem;
}
.page .coreContainer > div{
display:grid;
grid-template-columns: repeat(24, minmax(0, 1fr));
}
.page .sideCell{
grid-column: 2 / span 8;
grid-row: 1 / span 1;
background-color:#ff7fd2;
align-self: start;
position: sticky;
top:6rem;
}
.page .hasSide .mainCell{
min-height:2000px;
background-color:aquamarine;
grid-column: 11 / span 11;
grid-row: 1 / span 1;
}
.page .mainCell{
background-color:aquamarine;
padding:0;
}
/*.page .coreContainer:not(.hasSide):not(.hasMain),
.page .coreContainer.header-cover-widetop:not(.hasSide),*/
.page .coreContainer.header-no-cover:not(.hasSide){
padding:0; /* for continuous text */
}
.page .coreContainer.hasSide{
}
.page .coreContainer.hasMain{
}
/* images and video management for sideCells */
.page .hasSide .slice.limited .flickity.gallery,
.page .hasSide .inlineImg{
position:static;
width: 100%;
transform:translate(0,0);
height:auto;
}
.page .hasSide .slice.limited .flickity.gallery.filmstrip {
width: 100%;
}
.page .hasSide .filmstrip .flickity-slider>a, .filmstrip .flickity-slider>div {
width: 50%;
}
.page .hasSide .masonry {
position: relative;
width: 100%;
left: 0;
transform: translate(0,0);
}
.page .hasSide lite-youtube{
width: 100%;
left: 0;
transform: translate(0,0);
}
.page .hasSide lite-vimeo{
width: 100%;
left: 0;
transform: translate(0,0);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.page header > div .introContainer{
grid-column: 2 / span 9;
}
.page header > div.cover-left .introContainer{
grid-column: 15 / span 10;
}
.page .mainCell,
.page header > div.cover-widetop .introContainer,
.page header > div.cover-wide .introContainer,
.page header > div.no-cover .introContainer{
grid-column: 6 / span 14;
}
.page header > div.cover-overlap .introContainer{
grid-column: 4 / span 10;
top:4rem;
}
.page .sideCell{
grid-column: 2 / span 10;
}
.page .hasSide .mainCell{
grid-column: 13 / span 12;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.page header > div .introContainer{
grid-column: 1 / span 10;
}
.page header > div.cover-left .introContainer{
grid-column: 15 / span 10;
}
.page .mainCell,
.page header > div.cover-widetop .introContainer,
.page header > div.cover-wide .introContainer,
.page header > div.no-cover .introContainer{
grid-column: 4 / span 18;
padding: 2rem 0 2rem 0;
}
.page .mainCell{
padding:0;
}
.page header > div.cover-wide .introContainer{
padding: 0 0 4rem 0;
}
.page header > div.cover-overlap .introContainer{
grid-column: 2 / span 12;
top:1.5rem;
padding: 1.5rem 2.5rem;
}
.page .sideCell{
grid-column: 1 / span 9;
}
.page .hasSide .mainCell{
grid-column: 11 / span 14;
}
.page header > div.cover-overlap .coverImage,
.page header > div.cover-widetop .coverImage,
.page header > div.cover-wide .coverImage{
grid-column: 1 / span 24;
}
.page .coreContainer {
padding-top: 4rem;
}
.page header > div.cover-widetop .introContainer{
padding:4rem 0 0 0;
}
.page header > div.no-cover .introContainer{
padding:2rem 0 0 0;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.page header > div.cover-overlap .introContainer,
.page header > div.cover-widetop .introContainer,
.page header > div.no-cover .introContainer,
.page header > div.cover-wide .introContainer,
.page header > div.cover-left .introContainer,
.page header > div .introContainer{
grid-column: 2 / span 22;
grid-row: 2 / span 1;
padding: 2rem 0;
}
.page header > div.cover-overlap .introContainer {
background-color: transparent;
border-radius: 0;
box-sizing: border-box;
position: static;
top: 0;
}
.page header > div.cover-overlap .coverImage,
.page header > div.cover-widetop .coverImage,
.page header > div.cover-wide .coverImage,
.page header > div.cover-left .coverImage,
.page header > div .coverImage {
grid-column: 1 / span 24;
grid-row: 1 / span 1;
}
.page .mainCell{
grid-column: 2 / span 22;
}
.page .sideCell{
grid-column: 2 / span 22;
grid-row: 2 / span 1;
}
.page .hasSide .mainCell{
grid-column: 2 / span 22;
grid-row: 1 / span 1;
}
.page .coreContainer {
padding-top: 0;
}
.page header > div.no-cover .introContainer{
padding:1rem 0 0 0;
}
.page .slice.limited .flickity.gallery,
.page .slice.limited .flickity.gallery.filmstrip,
.page .hasSide .slice.limited .flickity.gallery,
.page .hasSide .slice.limited .flickity.gallery.filmstrip,
.page .hasSide lite-vimeo,
.page .hasSide lite-youtube{
position:relative;
width: 100vw;
left:50%;
transform:translate3d(-50%,0,0);
}
}
/* ------------------------------------------------------------------------------ General Template */
header{
padding-top:8rem; /* Space for the top area */
}
.slimHeadMargin header{
padding-top:5rem;
}
/* ------------------------------------------------------------------------------- Images Effect */
.loadEf{
display:block;
clip-path: circle(50px at 50% 50%); /* If the effect is set at 100% hidden, lazy loading won't work !*/
transition: clip-path 1.6s cubic-bezier(0.22, 0.61, 0.36, 1), scale 1s ease;
scale:0.8 0.8 0.8;
width:100%; /* without 100% sometimes better for vertical images */
}
.loadEf.hasLoaded{
clip-path: circle(100% at 50% 50%);
scale:1 1 1;
}
/* Hover effect */
.hoverEffect{
overflow:hidden;
border-radius:15px;
}
.hoverEffect img{
scale:1 1 1;
transition:scale 1s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.hoverEffect:hover img{
scale:1.1 1.1 1.1;
}
.borderRadius{
display:inline-block;
border-radius:15px;
overflow:hidden;
}
.borderRadius img{
display:block;
width:100%;
height:auto;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* ------------------------------------------------------------------------------ Home Page */
#homeLanding{
min-height:600px;
height:100vh;
max-height:800px;
box-sizing:border-box;
padding-top:300px;
overflow:visible;
}
.homeImage{
position:absolute;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
.homeImage:after{
content:'';
display:block;
width:100%;
height:100vh;
background-color:#d0d0d0;
transform:scaleX(1);
transform-origin:right;
}
.homeImage.hasLoaded:after{
transition:transform 0.5s ease-in-out;
transform:scaleX(0);
}
.homeImage img{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1.1);
object-fit: cover;
object-position: center;
transition: transform .5s cubic-bezier(0.25,.46,.45,.94);
}
.homeImage.hasLoaded img{
/*transform: translate(-50%, -50%) scale(1);*/
animation: breathingImg 20s infinite ease-in-out;
}
/* articles */
.articles{
background-color:rgb(212 175 175 / 54%);
display:flex;
flex-wrap: wrap;
width:100%;
}
article{
background-color:rgb(185 156 156 / 20%);
width:25%;
box-sizing:border-box;
}
article .teaser{
padding:var(--gu);
}
/* newsTicker */
.newsTicker{
display:block;
position:absolute;
background-color:#fefefe;
left:70px;
transform:translate(0,0);
bottom:70px;
font-size:1rem;
width:420px;
padding:2px 10px;
box-sizing: content-box;
overflow:hidden;
transition:all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
border-radius:3px;
white-space: nowrap;
letter-spacing:0.1rem;
}
.newsTicker:hover{
text-decoration:none;
}
.newsTicker::after{
content:"news";
background-color:#96bfe6;
padding:2px 10px;
position:absolute;
right:0;
top:0;
color:#ffffff;
}
.newsTicker:hover::after{
background-color:#96bfe6;
}
.newsTicker .ticker{
will-change: transform;
display: inline-block;
/*white-space: nowrap;*/
animation:25s linear 0s infinite forwards ticker;
transform-origin:center;
/*padding-left:320px; /*size of the ticker*/
}
@keyframes ticker {
0% {
transform: translate3D(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3D(-100%, 0, 0);
}
}
@keyframes breathingImg {
0% {transform:scale(1)}
50% {transform:scale(1.1)}
100% {transform:scale(1)}
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* ------------------------------------------------------------------------------ Directory style page (pages with modules) */
.page.hasModule header > div.no-cover .introContainer{
margin:0 0 3.5rem 0;
grid-column: 10 / span 10;
}
/* ------------------------------------------------------------------------------ Specific Page */
/* ------------------------------------------------------------------------------ Specific Page */
/* ------------------------------------------------------------------------------ Article Template */
.slice.limited .flickity.gallery{
position:relative;
left:50%;
transform:translate(-50%,0);
width:clamp(100%, calc( var(--gu) * 12), 100vw);
}
.slice.limited .flickity.gallery.filmstrip{
width:clamp(100%, 100vw, 100vw);
}
.galleryContainer{
max-width: 800px;
margin: 0 auto;
}
.filmstripContainer{
}
.thumbnailsContainer{
max-width: 1200px;
margin: 0 auto;
}
/* ------------------------------------------------------------------------------ Video Page */
.videoContainer{
position:relative;
overflow:hidden;
min-height:600px;
max-height:900px;
height:100vh;
}
.videoContainer video{
min-height:100%;
min-width:100%;
width:auto;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.videoContainer .altImg{
position:absolute;
width:auto;
height:100%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*######################## Listings Customization ###########################*/
/*###########################################################################*/
.listingsContainer{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: flex-start;
}
.listingItem{
width: 25%;
box-sizing: border-box;
position:relative;
overflow:hidden;
background-color:rgba(164, 176, 213, 0.4);
}
/* item content */
.listingItem .subContainer{
box-sizing: border-box;
padding:30px;
background-color:rgba(126, 199, 126, 0.66);
width:100%;
}
.listingItem .illustration img{
width:100%;
display:block;
height:auto;
}
.listingItem h2{
font-size:2em;
line-height:1.2;
}
.listingItem .date{
font-size:0.8em;
}
.listingItem .shortDescription{
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.listingItem{
width: 33.3%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.listingItem{
width: 50%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.listingItem{
width: 100%;
}
}
/*###########################################################################*/
/*#################### (Infinite) Flex Item Directory #######################*/
/*###########################################################################*/
.flexItems{
width: 100%;
margin: 0;
box-sizing:border-box;
background-color:#f642b5;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* -------- Elements */
.flexItems .flexItem{
width: calc(var(--gu) * 7.33);
margin: 0 0 var(--gu) 0;
box-sizing: border-box;
background-color: rgb(255 255 255);
/* keep footer down */
display:flex;
flex-direction: column;
justify-content: space-between;
/* cosmetics animation */
opacity:0;
transform: translate3d(0, 100px, 0);
}
.flexItems .flexItem img{
width:100%;
display:block;
height:auto;
}
/* Infinite Items Cosmetics */
.flexItems .flexItem.showItem{
animation: appear 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
.flexItems .flexItem.showItem:nth-child(even){
animation: appear 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.3s forwards;
}
@keyframes appear{
from { opacity:0; transform: translate3d(0,100px, 0);}
to { opacity:1; transform: translate3d(0,0, 0);}
}
.itemImage{
}
.itemMain{
}
.itemBody{
padding:0 2rem;
}
.itemFooter{
/*background-color:#dddddd;*/
padding:2rem;
display:flex;
justify-content: space-between;
align-items: flex-end;
}
.itemFooter .itemInfos{
font-size:0.8rem;
box-sizing:border-box;
padding:0 2rem 0 0;
}
.itemFooter .itemReadon{
text-align:right;
min-width:100px;
}
.itemFooter .itemReadon a.inPageButtons{
margin:0;
}
.itemBody h2{
padding:1rem 0;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.flexItems .flexItem{
width: calc(var(--gu) * 11.5);
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.flexItems .flexItem{
width: calc(var(--gu) * 11.5);
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.flexItems .flexItem{
width: 100%;
}
}
/*###########################################################################*/
/*########################### Masonry Directory #############################*/
/*###########################################################################*/
.masonry {
columns: 3 auto;
column-gap: 1rem;
background-color:#000000;
position:relative;
width: clamp(100%, calc(var(--gu) * 12), 100vw);
left:50%;
transform:translate(-50%,0);
}
.masonry > a,
.masonry > div{
padding: 0 0 0.6rem 0;
display: inline-block;
box-sizing:border-box;
width: 100%;
text-decoration:none;
}
.masonry .tbCaption,
.masonry .refCaption{
box-sizing:border-box;
padding:0 8px;
display:block;
line-height:1.3;
}
.masonry .tbCaption:first-of-type,
.masonry .refCaption:first-of-type{
padding-top:4px;
}
.masonry .refCaption{
display:flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.masonry .tbCaption,
.masonry .refC,
.masonry .copyR{
font-size:0.65rem;
color:#ffffff;
}
.masonry .refC,
.masonry .copyR{
display:inline-block;
}
.masonry img{
display:block;
width:100%;
height:auto;
border-radius:8px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* ------------------------------------------------------------------------------ Specific Directory Page */
/*###########################################################################*/
/*############################### Search Form ##############################*/
/*###########################################################################*/
.searchform input[type=text]{
line-height: 1.5;
padding: 9px 14px;
font-family: inherit;
font-size: inherit;
-webkit-appearance: none;
margin: 0;
box-sizing: border-box;
border-radius: 5px;
border: solid 2px #9c9c9c;
color: #333;
max-width:250px;
border-radius: 5px;
}
.searchform input:focus{
/*outline: none;*/
outline: transparent;
}
.searchform input[type=text]::-ms-input-placeholder{ /* Microsoft Edge */
color: #cccccc;
}
.searchform input[type=text]::placeholder {
color: #cccccc;
opacity: 1; /* Firefox */
}
.searchform input[type=submit] {
cursor: pointer;
padding: 11px 14px;
background-color: #008400;
border: none;
color: #FFF;
margin: 0 20px 20px 0;
border-radius: 5px;
line-height: 1.5;
font-family: inherit;
font-size: inherit;
}
.searchform input[type=submit]:hover {
background-color: #00A600;
}
/*###########################################################################*/
/*################################# Ken Burns ##############################*/
/*###########################################################################*/
.kbContainer{
/*position:absolute;*/
position:relative;
min-height:650px;
max-height:800px;
overflow:hidden;
height:100vh;
width:100%;
}
.kbContainer > div{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
min-height:100%;
min-width:100%;
height:auto;
width:auto;
opacity:0;
transform-origin: center;
}
.kbContainer.kbActivated > div{
transition-property: opacity, transform;
transition-duration: 5s, 10s;
}
.kbContainer > div img{
width:100%; /* set to fit width on large screens - because of gap created by ken burns */
display:block;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
min-height:100%;
min-width:100%;
height:auto;
width:auto;
}
.kbContainer > div:nth-child(1){
/*transform-origin: top right;*/
}
.kbContainer > div:nth-child(2){
/*transform-origin: bottom left;*/
}
.kbContainer > div:nth-child(3){
/*transform-origin: bottom right;*/
}
.kbContainer > div.fx{
opacity:1;
transform: translate(-50%,-50%) scale(1.1);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*####################### Youtube Video Embedding ###########################*/
/*###########################################################################*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*###########################################################################*/
/*############################### CSS3 Column System ########################*/
/*###########################################################################*/
#cssColumnLayout{
text-align:left;
}
.cssCol{
column-gap: 60px;
column-rule: 1px solid lightblue;
text-align:left;
}
.cssCol.twoCol{
column-count: 2;
}
.cssCol.threeCol{
column-count: 3;
}
.cssCol > h2 { /* Not supported in Firefox */
column-span: all;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.cssCol.twoCol,
.cssCol.threeCol{
column-count: 2;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.cssCol.twoCol,
.cssCol.threeCol{
column-count: 1;
}
}
/*###########################################################################*/
/*################################## Tables #################################*/
/*###########################################################################*/
.horizontalScrollContainer{
width:100%;
}
table{
width:100%;
border-left-style:solid;
border-left-color: #CDCFD6;
border-left-width: 1px;
border-top-style:solid;
border-top-color: #CDCFD6;
border-top-width: 1px;
font-size:0.9em;
}
table td{
text-align:left;
padding:30px;
border-right-style:solid;
border-right-color: #CDCFD6;
border-right-width: 1px;
border-bottom-style:solid;
border-bottom-color: #CDCFD6;
border-bottom-width: 1px;
text-align:center;
}
table tr:first-child td{
background-color: #c6c6c6;
font-size: 1.2em;
text-align: center;
}
table tr td:first-child{
background-color: #b4b4b4;
}
table tr td:nth-child(2) {
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.horizontalScrollContainer{
overflow-x: scroll;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.horizontalScrollContainer{
overflow-x: scroll;
}
}
/*###########################################################################*/
/*################################## Tabs ###################################*/
/*###########################################################################*/
.tabContainer{
float:left;
position:relative;
width:100%;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
overflow:hidden;
height:0;
margin:0;
}
.menuTabs, .ctTabs{
position:absolute;
/*top:100px;*/
left:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity:0;
/*transition: all 0.4s ease;*/
width:100%;
z-index:-1;
}
.displaying{
opacity:1;
top:0px;
z-index:1;
}
/*###########################################################################*/
/*############################## Google Maps ################################*/
/*###########################################################################*/
/* --------------- Map General -------------- */
.google-map{
width:100%;
height:500px;
}
.mapControls{ /* Controls Positioning */
display:block;
position:absolute;
right:0px;
}
/* -------------- Info Windows ------------- */
.google-map .gm-style,
.google-map .gm-style .gm-style-iw,
.google-map .gm-style .gm-style-iw a,
.google-map .gm-style .gm-style-iw span,
.google-map .gm-style .gm-style-iw label,
.google-map .gm-style .gm-style-iw div{ /* Prevent "Roboto" font default loading + Reset from Google Maps default settings */
font-family:inherit;
font-weight:normal;
color:inherit;
/* font-size:inherit; */
}
.google-map .gm-style .gm-style-iw div > button{
position:absolute !important;
top:0px;
right:0px;
}
.gm-style-iw-ch {
padding-top: 0px;
}
.google-map .gm-style .gm-style-iw div.infoWindow{
font-size:1rem;
}
/*.google-map .gm-style .gm-style-iw div.infoWindow:focus-visible {
outline: none;
}*/
.google-map .gm-style .gm-style-iw div > button:focus-visible{
outline: none;
}
.google-map .gm-style .gm-style-iw div > button span{
background-color:#303030;
}
.gm-style .gm-style-iw-c {
background-color: white;
border-radius: 0px;
padding: 0px;
}
.google-map .infoWindow{
box-sizing:border-box;
padding: 20px; /* px fix scroll bar in IE */
min-width: 260px; /* px fix width in IOS */
max-width: 260px;
}
/* ------- Title & Paragraph */
.google-map .infoWindow h1{
font-size:1.2rem;
margin:0;
box-sizing:border-box;
padding:0 1.5rem 0 0;
}
.google-map .infoWindow p{
margin:0.4rem 0 0 0;
display:block;
font-size:0.8rem;
}
/* ----------- Zoom Buttons */
.google-map .gm-style .gm-style-iw div.zoomButton{
display:inline-block;
padding: 8px 12px;
border-radius: 0px;
background-color: #34709A;
color: #FFFFFF;
margin:0.8rem 0.8rem 0 0;
cursor:pointer;
font-size:0.8rem;
}
.google-map .gm-style .gm-style-iw div.zoomButton:hover{
text-decoration: none;
background-color: #002D4A;
}
/*###########################################################################*/
/*########################## Collapsible Elements ###########################*/
/*###########################################################################*/
/* replace type="radio" by type="checkbox" for independent behavior */
.collapsible input {
display: none;
}
.collapsible label{
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
}
.collapsible label:hover{
}
.collapsible input:checked + label,
.collapsible input:checked + label:hover{
}
.collapsible .reply{
overflow: hidden;
height: auto;
max-height: 0px;
position: relative;
z-index: 10;
transition: max-height 0.3s ease-in-out;
}
.collapsible .reply div{
margin:10px;
}
.collapsible input:checked + label + .reply{
transition: max-height 0.5s ease-in-out;
}
.collapsible input:checked + label + .reply{
max-height: 600px; /* any value larger to the highest content */
}
/* FAQ */
.faqArrow{
vertical-align:middle;
margin:0 0.5em 0 0;
transition:transform 0.5s ease;
transform:rotate(0deg);
transform-origin:center;
}
.collapsible input:checked + label .faqArrow{
transform:rotate(90deg);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#services{
text-align:left;
}
.tree > div:nth-child(1),
.tree > div:nth-child(2){
padding: 10px 0 0 30px;
border-right:none;
border-left:solid 10px #FFFFFF;
text-align:left;
}
.tree > div:nth-child(2){
padding: 0px 0 10px 30px;
}
.tree > div:nth-child(1) label,
.tree > div:nth-child(1) article{
text-align:left;
}
}
/*###########################################################################*/
/*####################### Letter by Letter Animations #######################*/
/*###########################################################################*/
/* Default Animation*/
[data-letterAnim]{
}
[data-letterAnim] > span{
opacity:0;
transform:scale(2);
transition: opacity 0.3s ease, transform 0.5s ease-out;
display:inline-block;
}
[data-letterAnim] > span.animLetter{
opacity:1;
transform:scale(1);
}
/* Custom Animations*/
[data-letterAnim].lettersAppear > span.animLetter{
}
/*###########################################################################*/
/*############################ Viewport Effects #############################*/
/*###########################################################################*/
[data-viewportevent="zoomOut"]{
transform:scale(0.8);
transition: all 0.4s ease;
}
[data-viewportevent="zoomOut"].inViewport{
transform:scale(1);
}
/*###########################################################################*/
/*#################################### Swiffy ###############################*/
/*###########################################################################*/
.swiffy-slider {
position: relative;
display: block;
width: 100%;
--swiffy-slider-snap-align: center;
--swiffy-slider-item-width: 100%;
--swiffy-slider-item-gap: 1rem;
--swiffy-slider-item-reveal: 0rem;
--swiffy-slider-item-ratio: 2/1;
--swiffy-slider-item-count: 1;
--swiffy-slider-nav-light: #fff;
--swiffy-slider-nav-dark: #333;
--swiffy-slider-nav-zoom: 1;
--swiffy-slider-track-opacity: 0.1;
--swiffy-slider-track-height: 0;
--swiffy-slider-nav-outside-size: 3.5rem;
--swiffy-slider-indicator-outside-size: 1.5rem;
--swiffy-slider-animation-duration: .75s;
--swiffy-slider-animation-delay: 0s;
--swiffy-slider-animation-timing: ease-in-out;
}
.swiffy-slider,
.swiffy-slider::after,
.swiffy-slider::before {
box-sizing: border-box;
}
.swiffy-slider ::-webkit-scrollbar {
height: var(--swiffy-slider-track-height);
}
.swiffy-slider ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, var(--swiffy-slider-track-opacity));
}
.swiffy-slider ::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.4);
border-radius: 1rem;
}
.swiffy-slider ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.6);
}
.slider-container {
--swiffy-slider-item-gap-totalwidth: calc(var(--swiffy-slider-item-gap) * (var(--swiffy-slider-item-count) - 1));
--swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count));
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
display: grid;
align-items: center;
height: 100%;
grid: auto / auto-flow max-content;
grid-auto-rows: 100%;
grid-auto-columns: var(--swiffy-slider-item-width);
grid-auto-flow: column;
grid-gap: var(--swiffy-slider-item-gap);
list-style: none;
margin: 0;
padding: 0;
scrollbar-width: none;
scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, var(--swiffy-slider-track-opacity));
background-clip: padding-box;
}
.slider-container>* {
/*The slides*/
scroll-snap-align: var(--swiffy-slider-snap-align);
position: relative;
width: 100%;
height: 100%;
}
.slider-item-helper .slider-container>* {
background-size: cover;
background-color: #e1e1e1;
background-position: 50% 50%;
display: flex;
justify-content: center;
align-items: center;
}
.slider-container img{
display:block;
width:100%;
height:auto;
}
.slider-item-helper:not(.slider-item-ratio) .slider-container>* {
min-height: 20rem;
}
.slider-item-ratio .slider-container>*>* {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-item-ratio-contain .slider-container>*>* {
object-fit: contain;
}
.slider-item-ratio .slider-container>*::after {
display: block;
padding-top: calc( 100% / (var(--swiffy-slider-item-ratio)));
content: "";
}
.slider-item-ratio-32x9 {
--swiffy-slider-item-ratio: 32/9;
}
.slider-item-ratio-21x9 {
--swiffy-slider-item-ratio: 21/9;
}
.slider-item-ratio-16x9 {
--swiffy-slider-item-ratio: 16/9;
}
.slider-item-ratio-4x3 {
--swiffy-slider-item-ratio: 4/3;
}
.slider-item-ratio-2x1 {
--swiffy-slider-item-ratio: 2/1;
}
.slider-item-ratio-1x1 {
--swiffy-slider-item-ratio: 1/1;
}
.slider-item-ratio-3x4 {
--swiffy-slider-item-ratio: 3/4;
}
.slider-nav-scrollbar {
--swiffy-slider-track-height: 0.5rem;
}
.slider-nav-scrollbar .slider-container {
scrollbar-width: thin;
}
.slider-nav-nodelay .slider-container {
scroll-behavior: auto;
}
.slider-indicators {
position: absolute;
right: 2rem;
bottom: 0;
left: 2rem;
display: flex;
justify-content: center;
padding: 0;
margin-bottom: 1rem;
list-style: none;
}
.slider-nav-scrollbar .slider-indicators {
margin-bottom: calc(1rem + var(--swiffy-slider-track-height));
}
.slider-indicators>*.active {
opacity: 1;
}
.swiffy-slider.slider-indicators-outside .slider-nav {
margin-bottom: var(--swiffy-slider-indicator-outside-size);
}
.swiffy-slider.slider-indicators-outside {
padding-bottom: var(--swiffy-slider-indicator-outside-size);
}
.swiffy-slider.slider-indicators-outside.slider-indicators,
.swiffy-slider.slider-indicators-outside .slider-indicators {
margin-bottom: 0;
}
.slider-indicators> button{
box-sizing: content-box;
flex: 0 1 auto;
padding: 0;
border: .4rem solid transparent;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
opacity: .5;
transition: opacity .4s ease;
width: .5rem;
height: .5rem;
border: .4rem solid transparent;
border-radius: 50%;
}
.slider-nav {
position: absolute;
top: 50%;
left: 0;
bottom: 0;
border: 0;
width:6rem;
background-color: #fdfdfd;
cursor: pointer;
padding: 0;
visibility: hidden;
opacity: 0.8;
transition: visibility 0.1s, opacity 0.2s linear;
margin-bottom: var(--swiffy-slider-track-height);
display: flex;
align-items: center;
padding: 0 .5rem;
filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
transform: translate3d(0,-50%,0);
}
.slider-nav svg{
display:block;
width:100%;
height:auto;
}
.swiffy-slider:hover .slider-nav {
visibility: visible;
}
.swiffy-slider.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next) {
visibility: hidden;
}
.swiffy-slider.slider-nav-autohide.slider-item-last-visible .slider-nav.slider-nav-next {
visibility: hidden;
}
.slider-nav-outside .slider-container {
margin: 0 var(--swiffy-slider-nav-outside-size);
}
.slider-nav-outside .slider-nav {
padding: 0;
}
.swiffy-slider .slider-nav:hover {
opacity: 1;
}
.slider-nav-square .slider-nav {
padding: 0;
}
.slider-nav-round .slider-nav::before,
.slider-nav-square .slider-nav::before {
background-color: var(--swiffy-slider-nav-light);
}
.slider-nav-round .slider-nav::after,
.slider-nav-square .slider-nav::after {
background-color: var(--swiffy-slider-nav-dark);
width: 2rem;
height: 2rem;
margin: .5rem;
}
.slider-nav-round .slider-nav::before {
border-radius: 50%;
}
.slider-nav-dark .slider-nav::after {
background-color: var(--swiffy-slider-nav-dark);
}
.slider-nav-dark.slider-nav-round .slider-nav::before,
.slider-nav-dark.slider-nav-square .slider-nav::before {
background-color: var(--swiffy-slider-nav-dark);
}
.slider-nav-dark.slider-nav-round .slider-nav::after,
.slider-nav-dark.slider-nav-square .slider-nav::after {
background-color: var(--swiffy-slider-nav-light);
}
.slider-nav-sm {
--swiffy-slider-nav-zoom: .75;
--swiffy-slider-nav-outside-size: 2.5rem;
}
.slider-nav.slider-nav-next::after {
transform: rotate(180deg);
}
.slider-nav.slider-nav-next {
right: 0;
left: unset;
}
.slider-nav-visible .slider-nav {
visibility: visible;
}
.slider-nav-dark .slider-nav {
opacity: 0.6;
}
.slider-indicators-dark.slider-indicators>*,
.slider-indicators-dark .slider-indicators>* {
filter: invert(1);
}
.slider-item-snapstart {
--swiffy-slider-snap-align: start;
}
.slider-item-nosnap {
--swiffy-slider-snap-align: unset;
}
.slider-item-nogap {
--swiffy-slider-item-gap: 0rem;
}
.slider-item-reveal {
--swiffy-slider-item-reveal: 8rem;
}
.slider-item-snapstart.slider-item-reveal {
--swiffy-slider-item-reveal: 4rem;
}
.slider-item-show2 {
--swiffy-slider-item-count: 2;
}
.slider-item-show3 {
--swiffy-slider-item-count: 3;
}
.slider-item-show4 {
--swiffy-slider-item-count: 4;
}
.slider-item-show5 {
--swiffy-slider-item-count: 5;
}
.slider-item-show6 {
--swiffy-slider-item-count: 6;
}
.slider-nav-mousedrag .slider-container {
cursor: grab;
}
.slider-nav-mousedrag.dragging .slider-container {
scroll-snap-type: unset;
scroll-behavior: unset;
user-select: none;
}
.slider-nav-mousedrag.dragging .slider-nav {
visibility: hidden;
}
@media (hover: hover) {
.slider-nav-mousedrag .slider-container::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
}
}
@media (min-width: 62rem) {
.slider-item-show6:not(.slider-item-snapstart) .slider-container>*,
.slider-item-show4:not(.slider-item-snapstart) .slider-container>*,
.slider-item-show2:not(.slider-item-snapstart) .slider-container>* {
scroll-snap-align: unset;
}
.slider-item-show6:not(.slider-item-snapstart) .slider-container>*::before,
.slider-item-show4:not(.slider-item-snapstart) .slider-container>*::before,
.slider-item-show2:not(.slider-item-snapstart) .slider-container>*::before {
content: " ";
display: block;
position: absolute;
left: calc((var(--swiffy-slider-item-gap)/2)*-1);
top: 0;
/*FF fix setting w+h to 1 px - otherwise snap will not occur*/
width: 1px;
height: 1px;
scroll-snap-align: var(--swiffy-slider-snap-align);
}
.slider-nav-outside-expand .slider-nav {
margin-left: -4rem;
}
.slider-nav-outside-expand .slider-nav.slider-nav-next {
margin-right: -4rem;
}
.slider-nav-sm.slider-nav-outside-expand .slider-nav {
margin-left: -3.5rem;
}
.slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next {
margin-right: -3.5rem;
}
.slider-indicators-sm.slider-indicators {
display: none;
}
}
@media (max-width: 62rem) {
.swiffy-slider {
--swiffy-slider-track-height: 0rem;
--swiffy-slider-item-reveal: 0rem;
--swiffy-slider-item-count: 1;
--swiffy-slider-nav-zoom: .875;
}
.swiffy-slider .slider-item-show2-sm {
--swiffy-slider-item-count: 2;
}
.slider-item-reveal {
--swiffy-slider-item-reveal: 4rem;
}
.slider-item-snapstart.slider-item-reveal {
--swiffy-slider-item-reveal: 2rem;
}
.slider-item-show6 .slider-container {
grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/4*3));
}
.slider-item-show6.slider-item-reveal .slider-container {
grid-auto-columns: calc(25% - (var(--swiffy-slider-item-gap)/4*3) - .5rem);
}
.slider-item-show6.slider-item-reveal .slider-container>* {
scroll-snap-align: unset;
}
.slider-item-show6.slider-item-reveal .slider-container>*::before {
content: " ";
display: block;
position: absolute;
left: calc((var(--swiffy-slider-item-gap)/2)*-1);
top: 0;
/*FF fix setting w+h to 1 px - otherwise snap will not occur*/
width: 1px;
height: 1px;
scroll-snap-align: center;
}
.slider-nav::before,
.slider-nav::after {
width: 2rem;
height: 2rem;
padding: 0.3rem;
}
.slider-nav-round .slider-nav::after,
.slider-nav-square .slider-nav::after {
width: 1.75rem;
height: 1.75rem;
margin: 0.125rem;
}
.slider-nav-outside-expand .slider-container,
.slider-nav-outside .slider-container {
margin: 0 2rem;
}
.slider-nav-outside-expand .slider-container {
margin: 0 var(--swiffy-slider-nav-outside-size);
}
.slider-nav-outside-expand .slider-nav {
padding: 0;
}
.slider-indicators-square.slider-indicators>*,
.slider-indicators-square .slider-indicators>*,
.slider-indicators-round.slider-indicators>*,
.slider-indicators-round .slider-indicators>* {
width: .3rem;
height: .3rem;
}
.slider-indicators {
margin-bottom: .5rem;
display: none;
}
.slider-nav-scrollbar .slider-indicators {
margin-bottom: 0rem;
}
.slider-indicators>* {
width: 1rem;
height: 0.125rem;
border-width: .25rem;
}
.slider-indicators-sm .slider-indicators,
.slider-indicators-sm.slider-indicators {
display: flex;
}
}
@media (max-width: 48rem) {
.slider-item-show6 .slider-container {
grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/2));
}
.slider-item-show6.slider-item-reveal .slider-container {
grid-auto-columns: calc(50% - (var(--swiffy-slider-item-gap)/2) - 1.5rem);
}
}
@media (hover: none) {
.swiffy-slider.slider-nav-touch .slider-nav {
visibility: visible;
}
.swiffy-slider:not(.slider-nav-touch).slider-nav-outside-expand .slider-container,
.swiffy-slider:not(.slider-nav-touch).slider-nav-outside .slider-container {
margin: 0 0rem;
}
.slider-item-nosnap-touch {
--swiffy-slider-snap-align: unset;
}
}
/*###########################################################################*/
/*################################## Timeline ###############################*/
/*###########################################################################*/
.timeline{
border-left:10px solid #d1d1d1;
}
.eventDate{
text-align:right;
position:absolute;
display:inline-block;
box-sizing:border-box;
padding:10px 50px 10px 0;
transform:translate(-100%,0);
background-color:transparent;
}
.timeEvent{
position:relative;
}
.timeEvent:after{
content:'';
position:absolute;
top:0;
left:0;
width:30px;
height:30px;
box-sizing:border-box;
transform:translate(-20px,10px);
background-color:white;
border:5px solid #d1d1d1;
border-radius:50%;
}
.eventInfo{
box-sizing:border-box;
padding:0px 0 0 50px;
position:relative;
background:transparent;
}
.eventInfo > div{
background-color:transparent;
}
.timeEvent .eventInfo:after{
content:'';
position:absolute;
top:12px;
left:30px;
border-top: 15px solid transparent;
border-right: 20px solid #d1d1d1;
border-bottom: 15px solid transparent;
}
.eventInfo img{
max-width:100%;
display:block;
}
.timeSeparator{
position:relative;
}
.timeSeparator .eventDate{
position:relative;
font-size:2rem;
margin:0 0 0px 0;
}
.timeSeparator .eventInfo{
display:none;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/******************************************* End Of CSS ********************************************/