/*###########################################################################*/
/*################################### 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;
}

/*###########################################################################*/
/*################################## Fonts ##################################*/
/*###########################################################################*/

@font-face {
  font-family: 'Open';
  src:  url('assets/fonts/opensans-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src:  url('assets/fonts/CircularStd-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src:  url('assets/fonts/CircularStd-Black.woff2') format('woff2');
  font-weight:bold;
  font-display: swap;
}

/*###########################################################################*/
/*################################# Sprites #################################*/
/*###########################################################################*/

.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;
}*/

/*###########################################################################*/
/*################################# Browser #################################*/
/*###########################################################################*/

::-moz-selection { /* Code for Firefox */
	color: white;
	background: #8e7039;
}

::selection {
	color: white;
	background: #8e7039;
}

/*###########################################################################*/
/*################################ Preloader ################################*/
/*###########################################################################*/
#preloader{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
}
#preloader::before{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:0;
	transition: opacity 0.4s ease;
	background-color:#cae1ee8a;
}
html[nav-loading] #preloader::before,
html[nav-loading] #preloader,
html[data-loading] #preloader{
	opacity: 1;
}
#preloader > div svg{ /* Best to have a simple animation lasting less than 0.4s */
	display:block;
	width:100%;
	height:auto;
	fill:#3e6eab;
	
}
#preloader > div svg circle{ /* jump.svg */
	stroke:#3e6eab;
}
#preloader > div{ 
	width: 100px;
	/*aspect-ratio:1;
	border-radius:50%;
	background-color:white;
	animation: bounce 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;*/
}
/*###########################################################################*/
/*############################# Lightbox spinner ############################*/
/*###########################################################################*/

.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);}
}
@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;
}

footer{
	content-visibility:auto;
	contain-intrinsic-size: auto 600px; /* Width and height placeholder*/
}

/* 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: <br class="mobOnly" > */
	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: <br class="noTab" > */
	display:none;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.mobOnly{
	display:inline-block;
}
.noMob{ /* usage: <br class="noMob" > */
	display:none;
}
}


/*###########################################################################*/
/*################################## Icons ##################################*/
/*###########################################################################*/

/*
<span class="inlineIcon a1"></span>
<span class="biggerIcon b1"></span>
*/

.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;}



/* ----------------- Pure SVG Icons ------------- */
/* Make sure it's compressed */

:root {
/* svg shapes */
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 720 300 175'%3E%3Cpath d='M387.081 766.459c-10.189 10.439-117.389 112.543-117.389 112.543-5.439 5.575-12.563 8.36-19.693 8.36s-14.265-2.785-19.694-8.36c0 0-107.199-102.104-117.388-112.543-10.19-10.45-10.885-29.239 0-40.398 10.869-11.144 26.048-12.029 39.387 0l97.7 93.665 97.694-93.665c13.344-12.039 28.519-11.149 39.393 0 10.874 11.164 10.179 29.948 0 40.398z'/%3E%3C/svg%3E");

}


/* ----------------- Pure CSS Icons ------------- */

/* Arrow */
span.arrow{
	display: inline-block;
	width: 1rem;
    height: 1rem;
	vertical-align:middle;
	background-color: #ff852b;
	mask-image: var(--icon-chevron);
	mask-repeat: no-repeat;
	mask-position: center;
	transform: rotate(-90deg);
	transition:transform 0.4s ease;
}
/*span.arrow:hover{
	transform: rotate(0deg);
}*/

/* Cross */
span.cross {
	display:inline-blocK;
	background: #000000;
	height: 18px;
	position: relative;
	width: 4px;
	border-radius: 4px;
	transition:transform 0.4s ease;
	transform: rotate3d(0,0,1,45deg);
}
span.cross::after {
	display:block;
	background: #000000;
	content: "";
	height: 4px;
	left: -7px;
	position: absolute;
	top: 7px;
	width: 18px;
	border-radius: 4px;
}
/*span.cross:hover{
	cursor:pointer;
	transform: rotate3d(0,0,1,90deg);
}*/

/* Search */
.search {
	display:inline-block;
	position: relative;
	width: 15px;
	height: 15px;
	border: 4px solid #000000;
	border-radius: 50%;
	transform: rotate3d(0,0,1,90deg);
}
.search::before {
	content: "";
	display: block;
	position: absolute;
	right: -9px;
	bottom: -5px;
	background: #000000;
	width: 12px;
	height: 5px;
	transform: rotate(45deg);
	border-radius:4px;
}
.searchsmall {
	display:inline-block;
	position: relative;
	width: 8px;
	height: 8px;
	border: 3px solid #000000;
	border-radius: 50%;
	/*transform: rotate3d(0,0,1,90deg);*/
}
.searchsmall::before {
	content: "";
	display: block;
	position: absolute;
	right: -5px;
	bottom: -4px;
	background: #000000;
	width: 7px;
	height: 4px;
	transform: rotate(45deg);
	border-radius:4px;
}



/*###########################################################################*/
/*################################ Buttons ##################################*/
/*###########################################################################*/

/*<a href="#" class="inPageButtonsB">About</a>*/

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 ################################*/
/*###########################################################################*/

.logoContainer{
    position: absolute;
    top: 0;
}
.logoContainer > div{
	height:10px;
}

.logo{
	width: 180px;
	display:block;
	line-height:0;
	will-change: transform; /*Fix rough scroll in Edge*/
}
.logo svg{
	width: 100%;
	height:auto;
	fill:#616161;
	transition: all 1s ease;
	transform: scale(1);
}

[data-homePageLanding] #mainLogo{}

#mainLogo.inViewport svg{
	animation: 1.5s 0.4s ease forwards animLogo;
}

#mainLogo:hover svg{
	fill:#E91E63;
}

@keyframes animLogo{
	0%{ transform: scale(1);}
	50%{transform: scale(1.5);}
	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%;
	right:300px;
	transform:translate3d(0,20px,0);
	background-color:#96bfe6;
	transition:transform 0.4s ease;
}
body[data-scrolled] .headingMenu{
	transform:translate3d(0,-120px,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); 
}

/* Account Menu*/
.accountMenu { 
	display: none;
	position:absolute;
	top:50%;
	right:200px;
	transform:translate3d(0,50%,0);
	background-color:#96e6ac;
	transition:transform 0.4s ease;
}
.accountMenu.visible { 
	display: block; 
}

@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;
}


/*###########################################################################*/
/*############################### Mega Menu #################################*/
/*###########################################################################*/

.headingMenu a.active{
	background-color:aqua;
}
.headingMenu a span{
	transform:rotate(0deg);
}
.headingMenu a.active span{
	transform:rotate(90deg);
}

/* Containers */
.menuTabContainer{
	position:absolute;
	right:0;
	width:900px; /* Determines the width of the menu */
}
.menuTabs{
	position:absolute;
	box-sizing: border-box;
	transform:translate3d(0,20px,0); /* Anim effect */
	visibility:collapse;
	box-shadow:5px 5px 5px 0px #5353537d;
	right:0;

	width:100%;
	background:bisque;
	padding:10px 20px;
	display:flex;
}
.menuTabs > div{
	width:50%;
}
.menuTabs.displaying{
	animation: 0.2s linear menuTabAppear forwards;
}
#megaMenuMask{
	display:block;
	position:fixed;
	width:100%;
	height:100vh;
	background-color: rgb(255 255 255 / 40%); /* Transparent BG */
    /*backdrop-filter: blur(5px);*/
	visibility:collapse;
}
#megaMenuMask.enabled{
	animation: 0.2s linear menuMaskAppear forwards;
}
@keyframes menuMaskAppear{
    0%{opacity:0; visibility:visible;}
    100%{opacity:1; visibility:visible;}
}
@keyframes menuTabAppear{
    0%{opacity:0; visibility:visible;}
    100%{opacity:1; transform:translate3d(0,0,0); visibility:visible;}
}


/*###########################################################################*/
/*################################# 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:4px;
	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:9997;
	overflow: hidden;
	overflow-y: auto;
	/*animation:closeMenu 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;*/
}


/* 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:fixed;
	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:9990;
	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[data-open-delay]{
	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:fixed;
	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:fixed;
	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[data-open]{
	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:#faf4d782;
	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: fixed;
	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;
	flex-direction: row-reverse;
	width:100%;
}
article{
	background-color:rgb(185 156 156 / 25%);
	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 */

}

/*###########################################################################*/
/*#################### (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;
}

/*###########################################################################*/
/*####################### 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;
}
}


/*###########################################################################*/
/*############################## 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 ###############################*/
/*###########################################################################*/


details{
	overflow:hidden;
	margin:1rem 0;
}
summary,
details > p{
	margin:0;
	padding:0.5rem 1rem 1rem 2.3rem;
}
summary{
	list-style-position: outside;
	position:relative;
	/*padding:0 0 0 1.3rem;*/
	cursor:pointer;
	
	background-color:antiquewhite;
	border-radius:10px;
	padding:0.5rem 1rem 0.5rem 2.3rem;
}

@supports (interpolate-size: allow-keywords) { /* Chrome based */
details::details-content {
	interpolate-size: allow-keywords;
	block-size: 0;
	transition: block-size 0.3s ease, content-visibility 0.3s ease;
	transition-behavior: allow-discrete;
}
details[open]::details-content {
	block-size: auto;
}
}

@supports not (interpolate-size: allow-keywords) { /* Fallback animation for Firefox + Safari */
details::details-content {
	display:block !important;
	content-visibility:visible !important;
	overflow: hidden;
	max-height: 0px;
	transition: max-height 0.4s ease; /* Adjust timing depending on "max-height" */
}
details[open]::details-content {
	max-height: 500px; /* Arbitrary large value, should be larger than content -> but it causes a delay if too big */
	transition: max-height 1s ease; /* Adjust timing depending on "max-height" */
}
}

/* Chevron icon */

summary::marker{
	content: ""; /* cancels default shape */
}
summary::before{
    /* custom marker*/
    content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: #ff852b;
	mask-image: var(--icon-chevron);
	mask-size: contain;
	mask-repeat: no-repeat;
	background-size: contain;
	transform: rotate(-90deg);
	position:absolute;
	top:0.8rem; /* Change to compensate line-height + potential paddings */
	left:0.8rem;
	mask-position: left center;
	transition:transform 0.4s ease;
}
details[open] summary::before {
	transform: rotate(0deg);
}


/*###########################################################################*/
/*############################ Viewport Effects #############################*/
/*###########################################################################*/

[data-viewportevent="zoomOut"]{
	transform:scale(0.8);
	transition: all 0.4s ease;
}
[data-viewportevent="zoomOut"].inViewport{
	transform:scale(1);
}


/*###########################################################################*/
/*################################ CSS Slider ###############################*/
/*###########################################################################*/

[data-slider]{
	padding:40px 0 40px 0;
	/*left: calc((100vw - 1200px) / 2); /* 1200 = limited.*/
}
[data-slider-wrapper]{
	--gap: 2rem;
	--items: 4;
	display:flex;
	flex-wrap: nowrap;
	gap: var(--gap);
	justify-content: space-between;
	overflow-x:auto;
	scroll-snap-type: x proximity;
	padding: calc(var(--gap) * 0.6);
	margin: calc(var(--gap) * -0.6);
	scroll-padding-inline: calc(var(--gap) * 0.6);
}
[data-slider-wrapper] a.cardItem{
	display:block;
	background-color:#ffffff;
	min-width: calc((100% - (var(--items) - 1) * var(--gap)) / var(--items));
	position:relative;
	scroll-snap-align:start;
	margin:20px 0 20px 0;
	box-shadow: -2px 2px 10px rgb(202 202 202 / 0.6);
	border-radius:10px;
}
[data-slider-wrapper] a.cardItem .cover{
	border-radius:10px 10px 0 0;
	overflow:hidden;
}
[data-slider-wrapper] a.cardItem .cover img{
	display:block;
	width:100%;
	height:auto;
	transform:scale3d(1,1,1);
	transition:transform 0.8s ease;
}
[data-slider-wrapper] a.cardItem:hover .cover img{
	transform:scale3d(1.1,1.1,1);
}

[data-slider-wrapper] a.cardItem:hover{
	text-decoration:none;
}
[data-slider-wrapper] a.cardItem .cardContent{
	box-sizing:border-box;
	padding:6px 20px 20px 20px;
}
[data-slider-wrapper] a.cardItem h2{
	color:#7f7f7f;
	font-size: 2rem;
}
[data-slider-prev] svg,
[data-slider-next] svg{
	display:block;
	width:100%;
	height:auto;
	fill:#ffffff;
	aspect-ratio:1;
	translate:7% 0 ;
}
[data-slider-prev],
[data-slider-next]{
	background:#1b3970;
	border:none;
	border-radius:50%;
	box-sizing:border-box;
	margin:0;
	padding:0;
	width:40px;
	position:absolute;
	right:0;
	top:50%;
	padding:10px;
	z-index:1;
	transform:translate3d(140%, -50%, 0);
	cursor: pointer;
	opacity:0.5;
}
[data-slider-prev]:hover,
[data-slider-next]:hover{
	opacity:1;
}
[data-slider-prev]{
	right:auto;
	left:0;
	top:50%;
	transform:translate3d(-140%, -50%, 0);
}
[data-slider-prev] svg{
	rotate:-180deg;
	translate:-7% 0 ;
}



@media (min-width: 979px) and (pointer: fine) {
[data-slider-wrapper] {
	overflow: hidden;
}
}
@media only screen and (min-width: 1191px) and (max-width: 1400px) { /* Medium Screens */
[data-slider-next]{
	transform:translate3d(40%, -50%, 0);
	opacity:0.8;
}
[data-slider-prev]{
	transform:translate3d(-40%, -50%, 0);
	opacity:0.8;
}
[data-slider-prev]:hover,
[data-slider-next]:hover{
	opacity:1;
}
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
[data-slider-next]{
	transform:translate3d(50%, -50%, 0);
	opacity:0.8;
}
[data-slider-prev]{
	transform:translate3d(-50%, -50%, 0);
	opacity:0.8;
}
[data-slider-prev]:hover,
[data-slider-next]:hover{
	opacity:1;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
[data-slider-prev],
[data-slider-next]{
	display:none;
}
[data-slider-wrapper]{
	--gap: 1.5rem;
	--items: 3;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
[data-slider-prev],
[data-slider-next]{
	display:none;
}
[data-slider-wrapper]{
	--items: 1.2;
	--gap: 1rem;
	justify-content: flex-start;
	flex-wrap: nowrap;
	overflow-x:auto;
	scroll-snap-type: x proximity;
	padding:0 0 40px 0;
	margin:0;
	scroll-padding-inline: 0;
}
[data-slider-wrapper] a.cardItem{
	scroll-snap-align:center;
}
[data-slider] {
    padding: 30px 0 0 0;
	margin:0;
	width:100%;
}
}



/*###########################################################################*/
/*################################## 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 ********************************************/