/*****************************************************************************/
/** Spherworks styling																											**/
/** Version 1.8 - Maevanin																									**/
/** Gijs Rosengarten, 2026																									**/
/** http://www.sphereworks.nl																								**/
/*****************************************************************************/

:root {
	--white: #FFFFFF;
	--black: #000000;
	--grey-extra-dark: #333333;
	--grey-dark: #666666;
	--grey-mid: #CCCCCC;
	--grey-light: #E8E8E8;
	--grey-extra-light: #F8F8F8;
	/* Blue */
	--color-primary-dark: #203A59;
	--color-primary-mid: #B5C2D1;
	--color-primary-light: #EDF1F6;
	/* Yellow */
	--color-secondary-dark: #AC6600;
	--color-secondary-mid: #FFAB00;
	--color-secondary-light: #FFE0A1;
	/* Beige */
	--color-tertiary-extra-dark: #7A4900;
	--color-tertiary-dark: #A09881;
	--color-tertiary-mid: #b9b098;
	--color-tertiary-light: #F6F2E7;
	/* Text color */
	--text-header: #000000;
	--text-primary: #666666;
	--cta-primary: #7A4900;
	--cta-primary-active: #FFAB00;	
	--cta-primary-light: #FFFFFF;
	--cta-secondary: #E6ECF1;
	--cta-secondary-active: #FFFFFF;
	--cta-primary-exception: #FFCB30;
	--cta-primary-exception-active: #FFE28B;	
	/* Font */
  --font-primary:'Roboto',sans-serif;
  --font-secondary:'Outfit',serif;	
	--font-line-height-default: 2.7rem;
	--font-line-height-heading: 110%;
  --font-weight-normal:400;
  --font-weight-medium:500;
  --font-weight-bold:700;
/*	--font-letter-spacing: -0.1rem;*/
	--font-letter-spacing: normal;
	--font-size-small:clamp(1.2rem, 8.457px + 0.462vw, 1.4rem);
	--spacer-size-gap: 2rem;
	--spacer-size-025: 0.25rem;
	--spacer-size-05: 0.5rem;
	--spacer-size-075: 0.75rem;
	--spacer-size-1: 1rem;
	--spacer-size-15: 1.5rem;
	--spacer-size-2: 2rem;
	--spacer-size-25: 2.5rem;
	--spacer-size-3: 3rem;
	--spacer-size-35: 3.5rem;
	--spacer-size-4: 4rem;
	--spacer-size-45: 4.5rem;
	--spacer-size-5: 5rem;
	--anim-very-fast: all .15s ease-in-out;
	--anim-fast: all .25s ease-in-out;
	--anim-med: all .5s ease-in-out;
	--anim-slow: all .75s ease-in-out;
	--anim-very-slow: all 1.25s ease-in-out;
	--container-width: 130rem;
	--container-width-small: 80rem;
	--sticky-offset: 3rem;
	--shadow-small:	0 0 0.5rem rgba(123,138,154,.2);
	--shadow: 0 0.5rem 1.5rem rgba(123,138,154,.2);
}


/** deafult tags and font setup **/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-family: var(--font-primary); font-size: 62.5%; line-height:var(--font-line-height-default); }
body, .mainMenu ul ul li { margin: 0; padding: 0; overflow-x: hidden; font-size: clamp(1.6rem, 12.457px + 0.462vw, 1.8rem); line-height: var(--font-line-height-default); color: var(--text-primary); }
.h0, .factTextXL { font-family: var(--font-secondary); font-size: clamp(40px, -66.282px + 13.857vw, 100px); font-family: var(--font-primary); margin: 1rem 0 2rem 0; font-weight: var(--font-weight-normal); line-height:var(--font-line-height-heading); letter-spacing: var(--font-letter-spacing); color: var(--text-header); text-wrap: balance; display:block; }
h1, .h1, .factTextLarge  { font-family: var(--font-secondary); font-size: clamp(3.2rem, 8.902px + 3.008vw, 4.8rem); margin: 1rem 0 2rem 0; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-heading); letter-spacing: var(--font-letter-spacing); color: var(--text-header); text-wrap: balance; display:block; }	
h2, .h2, .factTextMedium { font-family: var(--font-secondary); font-size: clamp(2.8rem, 7.789px + 2.632vw, 4.2rem); margin: 1rem 0 2rem 0; font-weight: var(--font-weight-medium); line-height: var(--font-line-height-heading); letter-spacing: var(--font-letter-spacing); color: var(--text-header); text-wrap: balance; display:block; }
h3, .h3, .factTextSmall, .article h2, .price { font-family: var(--font-secondary); font-size: clamp(2.4rem, 6.677px + 2.256vw, 3.6rem); margin: 1rem 0 1.5rem 0; font-weight:var(--font-weight-medium); line-height:var(--font-line-height-heading); letter-spacing: var(--font-letter-spacing); color: var(--text-header); text-wrap: balance; display:block;}
h4, .h4, .pricingTable h3, .quote, .articleList a h3 { font-family: var(--font-secondary); font-size: clamp(2rem, 5.564px + 1.88vw, 3rem); margin: 1rem 0 1.5rem 0; font-weight:var(--font-weight-medium); line-height:var(--font-line-height-heading); letter-spacing: var(--font-letter-spacing); color:var(--black); display:block;}
.mainMenu > ul > li, .intro { font-family: var(--font-secondary); font-size: clamp(1.8rem, 0.286px + 2.309vw, 2.4rem); margin: 1rem 0 1.5rem 0; font-weight:var(--font-weight-normal); line-height:var(--font-line-height-heading); letter-spacing: var(--font-letter-spacing); color: var(--text-header); display:block;}
h5, .h5, .pricingTable h4, .selector .filter { font-family: var(--font-secondary); font-size: clamp(1.6rem, 12.457px + 0.462vw, 1.8rem); margin: 1rem 0; font-weight:var(--font-weight-medium); line-height: 140%; text-wrap: balance; color: var(--text-header); letter-spacing: normal; display:block; }
p { margin-block: var(--spacer-size-1); }
p + h2, p + h3, p + h4, p + h5 { margin-top: 5rem!important; }
.small, code { font-size: var(--font-size-small); line-height: normal; }
th, td { padding: 0; }
ul, ol, dl  { padding-left: var(--spacer-size-15); margin-block: var(--spacer-size-2); }
a h1, a h2, a h3, a h4 { color: var(--cta-primary); }
a { color: var(--cta-primary); text-decoration: none; font-weight: var(--font-weight-bold); letter-spacing: 0.05rem;}
a:hover, a:hover h1, a:hover h2, a:hover h3, a:hover h4 { color: var(--cta-primary-active); text-decoration: underline; }
hr { border: none; position: relative; margin-block: var(--spacer-size-3); }
hr:after, .seperator:after { background: linear-gradient(90deg, rgba(213, 200, 165, 0) 5%, rgb(213, 200, 165) 50%, rgba(213, 200, 165, 0) 95%); content: ""; height: 1px; width: 100%; display: block; }
fieldset { margin: 0; }
picture { display: block; }
img.bw { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
picture img, picture source { aspect-ratio: 1; }


/** Block grid layout and basic functionality **/
.container { margin: 0; width: 100%; display: -webkit-flex; display: flex; gap: var(--spacer-size-gap); flex-wrap: wrap; }
.block { display: -webkit-flex; display: flex; position: relative; }
.box { border: none; margin: 0; padding: 0; width: 100%; position: relative; }
.box > h1:first-child, .box > h2:first-child, .box > h3:first-child, .box > h4:first-child, .box > h5:first-child { margin-top: 0; }
.box img { max-width: 100%; }
.fixedWidth { width: var(--container-width); margin: 0 auto; }
.anchor { scroll-margin-top: calc(var(--headerHeight) + var(--sticky-offset)); }
.anchor.ipmTrigger { margin-bottom: var(--spacer-size-3); }
.mobile, .tablet { display: none; }
.fixBlock { position: relative; }
.fixBlock.inView { position: fixed; }
.sticky, .stickyBox { position: -webkit-sticky; position: sticky; align-self: flex-start; }
.center { text-align: center; justify-content: center; }
.hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.bg { height: auto; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 0; }
.fullHeight { overflow-y: hidden; min-height: 100vh; padding-top: var(--headerHeight); }
.verticalCenter { display: flex; align-items: center; }
.tag { background: var(--color-primary-dark); padding: var(--spacer-size-1); display: inline-block; transform: scale3d(1, 1, 1); transform-origin: center; font-size: var(--font-size-small);  line-height: normal; color: var(--white); border-radius: var(--spacer-size-1); -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
a.tag:hover { color: var(--white); text-decoration: none; transform: scale3d(1.138, 1.11, 1.11); transform-origin: center; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.parallax { transition: 0s linear; transition-property: background-position;  background-repeat: no-repeat; background-size: auto; }
.simpleTable { display: flex; flex-direction: column; row-gap: var(--spacer-size-1); column-gap: var(--spacer-size-2);}
.simpleTable.row { flex-direction: row; justify-content: space-between; }
.simpleTable div { display: flex; flex-direction: row; }
.simpleTable.row div { flex-direction: column; }
.simpleTable div span { white-space: nowrap; }
.simpleBlock { width: var(--spacer-size-5); height: var(--spacer-size-5); margin: 0 var(--spacer-size-1) var(--spacer-size-05) 0; display: inline-block; }
.listCheck { list-style-type: none; padding: 0; }
.listCheck li { position: relative; padding-left: var(--spacer-size-2); margin: 0; }
.listCheck li::before { left: 0; position: absolute; font-weight: 500; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFAB00' d='M20.285 2 9 13.567 3.714 8.556 0 12.272 9 21 24 5.715z'/%3E%3C/svg%3E"); }
.button, button { background: var(--grey-light); text-decoration: none; font-weight: var(--font-weight-medium); font-family: var(--font-primary); font-size: clamp(1.6rem, 12.457px + 0.462vw, 1.8rem); margin-top: var(--spacer-size-1); color: var(--black); border: 1px solid transparent; border-radius: var(--spacer-size-1); min-width: 4rem; text-align: center; padding: var(--spacer-size-075) var(--spacer-size-2); display: inline-block; box-shadow: 0 1px 3px 0 rgba(32,55,70,0.35); -webkit-transition: var(--anim-very-fast); -moz-transition: var(--anim-very-fast); -o-transition: var(--anim-very-fast); transition: var(--anim-very-fast); }
.button:hover, button:hover { background: var(--grey-mid); box-shadow: none; text-decoration: none; color: var(--black); cursor: pointer; cursor: hand; -webkit-transition: var(--anim-very-fast); -moz-transition: var(--anim-very-fast); -o-transition: var(--anim-very-fast); transition: var(--anim-very-fast); }
.button.primary, button.primary, .buttonGroup.primary .button, .buttonGroup.primary button { background: var(--color-primary-dark); color: var(--white); }
.button.primary:hover, button.primary:hover, .buttonGroup.primary .button:hover, .buttonGroup.primary button:hover { background: var(--cta-primary-active); }
.button.secondary, button.secondary, .buttonGroup.secondary .button, .buttonGroup.secondary button { background: var(--color-secondary-light); border: 1px solid var(--color-secondary-light);}
.button.secondary:hover, button.secondary:hover, .buttonGroup.secondary .button:hover, .buttonGroup.secondary button:hover { background: var(--color-secondary-mid); color: var(--white); }
.button.txtLink, button.txtLink { background: none; color: var(--cta-primary); box-shadow: none; padding: var(--spacer-size-075) 0; font-weight: var(--font-weight-bold); }
.button + .button, button + .button, .button + button, button + button { margin-left: var(--spacer-size-2); }
.buttonGroup .button + .button, button + .button, .button + button, button + button { margin-left: 0; }
.button.txtLink:hover, button.txtLink:hover { color: var(--cta-primary-active); }
.buttonGroup { text-decoration: none; display: -webkit-flex; display: flex; flex-wrap: wrap; margin: 0; }
.buttonGroup .button { border-radius: 0; box-shadow: none; border-right: 1px solid var(--white); }
.buttonGroup .button:first-child { border-radius: var(--spacer-size-1) 0 0 var(--spacer-size-1); }
.buttonGroup .button:last-child { border-radius: 0 var(--spacer-size-1) var(--spacer-size-1) 0; border-right: none; }
.buttonGroup .button.active, .buttonGroup button.active { background: var(--grey-mid); }
.buttonGroup.secondary .button.active, .buttonGroup.secondary button.active { background: var(--color-secondary-mid); }


/** Block and Box modifiers (also applicable to html block elements) **/
.spacer2 { height: var(--spacer-size-2); width: 100%; }
.spacer3 { height: var(--spacer-size-3); width: 100%; }
.spacer5 { height: var(--spacer-size-5); width: 100%; }
.spacer10 { height: 10rem; width: 100%; }
.spacer15 { height: 15rem; width: 100%; }
.spacer20 { height: 20rem; width: 100%; }
.spacer25 { height: 25rem; width: 100%; }
.spacer50 { height: 50rem; width: 100%; }
.border { border: 1px solid var(--color-primary-mid); }
.border0 { border: 0px solid transparent; }
.rounded { border-radius: var(--spacer-size-1); }
.rounded2 { border-radius: var(--spacer-size-2); }
.rounded3 { border-radius: var(--spacer-size-3); }
.margin0 { margin: 0; }
.marginInline1 { margin-inline: var(--spacer-size-1); }
.marginBlock1 { margin-block: var(--spacer-size-1); }
.marginInline2 { margin-inline: var(--spacer-size-3); }
.marginBlock2 { margin-block: var(--spacer-size-3); }
.marginInline3 { margin-inline: var(--spacer-size-3); }
.marginBlock3 { margin-block: var(--spacer-size-3); }
.marginInline4 { margin-inline: var(--spacer-size-4); }
.marginBlock4 { margin-block: var(--spacer-size-4); }
.marginInline5 { margin-inline: var(--spacer-size-5); }
.marginBlock5 { margin-block: var(--spacer-size-5); }
.padding0 { padding: 0; }
.paddingInline1 { padding-inline: var(--spacer-size-1); }
.paddingBlock1 { padding-block: var(--spacer-size-1); }
.paddingInline2 { padding-inline: var(--spacer-size-3); }
.paddingBlock2 { padding-block: var(--spacer-size-3); }
.paddingInline3 { padding-inline: var(--spacer-size-3); }
.paddingBlock3 { padding-block: var(--spacer-size-3); }
.paddingInline4 { padding-inline: var(--spacer-size-4); }
.paddingBlock4 { padding-block: var(--spacer-size-4); }
.paddingInline5 { padding-inline: var(--spacer-size-5); }
.paddingBlock5 { padding-block: var(--spacer-size-5); }
.fgPrimaryDark { color: var(--color-primary-dark); fill: var(--color-primary-dark); }
.fgPrimaryMid { color: var(--color-primary-mid); fill: var(--color-primary-mid); }
.fgPrimaryLight { color: var(--color-primary-light); fill: var(--color-primary-light); }
.fgSecondaryDark { color: var(--color-secondary-dark); fill: var(--color-secondary-dark); }
.fgSecondaryMid { color: var(--color-secondary-mid); fill: var(--color-secondary-mid); }
.fgSecondaryLight { color: var(--color-secondary-light); fill: var(--color-secondary-light); }
.fgTertiaryDark { color: var(--color-tertiary-dark); fill: var(--color-tertiary-dark); }
.fgTertiaryMid { color: var(--color-tertiary-mid); fill: var(--color-tertiary-mid); }
.fgTertiaryLight { color: var(--color-tertiary-light); fill: var(--color-tertiary-light); }
.fgDark, .fgBlack { color: var(--black); fill: var(--black); }
.fgLight, .fgWhite { color: var(--white); fill: var(--white); }
.bgPrimaryDark { background-color: var(--color-primary-dark); color: var(--white); }
.bgPrimaryMid { background-color: var(--color-primary-mid); }
.bgPrimaryLight { background-color: var(--color-primary-light); }
.bgSecondaryDark { background-color: var(--color-secondary-dark); }
.bgSecondaryMid { background-color: var(--color-secondary-mid); }
.bgSecondaryLight { background-color: var(--color-secondary-light); }
.bgTertiaryDark { background-color: var(--color-tertiary-dark); }
.bgTertiaryMid { background-color: var(--color-tertiary-mid); }
.bgTertiaryLight { background-color: var(--color-tertiary-light); }
.bgDark, .bgBlack, .card.bgDark, .card.bgBlack { background-color: var(--black); color: var(--white); }
.bgDark a, .bgPrimaryDark a { color: var(--cta-primary-exception); }
:is(.bgDark, .bgPrimaryDark) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { color: var(--white); }
.bgLight, .bgWhite, .card.bgLight, .card.bgWhite { background-color: var(--white); }
.bgGreyDark, .card.bgGreyDark { background-color: var(--grey-mid); }
.bgGreyMid , .card.bgGreyMid { background-color: var(--grey-light); }
.bgGreyLight, .card.bgGreyLight { background-color: var(--grey-extra-light); }
.bgGradientIn { background-image: linear-gradient(180deg, #fff, var(--grey-extra-light) 50%); }
.bgGradientOut { background-image: linear-gradient(180deg, var(--grey-extra-light), var(--white) 50%); }
.dropShadow { box-shadow: var(--shadow); }
.iconStroke { fill: none; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 0.8rem; }
.logoStroke { fill: none; stroke: var(--white); stroke-miterlimit: 10; stroke-width: 2px; }
.extendLeft5 { width: calc(100% + 5rem); max-width: initial; margin-left: -5rem; }
.canvas .extendLeft5 { max-width: 50%; width: fit-content; }
.extendLeft10 { width: calc(100% + 10rem); max-width: initial; margin-left: -10rem; }
.extendLeft20 { width: calc(100% + 20rem); max-width: initial; margin-left: -20rem; }
.extendLeft30 { width: calc(100% + 30rem); max-width: initial; margin-left: -30rem; }
.extendRight10 { width: calc(100% + 10rem); max-width: initial; margin-right: -10rem; }
.extendRight20 { width: calc(100% + 20rem); max-width: initial; margin-right: -20rem; }
.extendRight30 { width: calc(100% + 30rem); max-width: initial; margin-right: -30rem; }
.extendTop10 { margin-top: -10rem; }
.extendTop20 { margin-top: -20rem; }
.extendTop30 { margin-top: -30rem; }
.extendTop40 { margin-top: -40rem; }
.extendTop50 { margin-top: -50rem; }
.extendBottom10 { margin-bottom: -10rem; }
.extendBottom20 { margin-bottom: -20rem; }
.extendBottom30 { margin-bottom: -30rem; }
.extendBottom40 { margin-bottom: -40rem; }
.extendBottom50 { margin-bottom: -50rem; }
.extend10 { width: calc(100% + 20rem); max-width: initial; margin-left: -10rem; margin-right: -10rem; }
.extend20 { width: calc(100% + 40rem); max-width: initial; margin-left: -20rem; margin-right: -20rem; }
.extend30 { width: calc(100% + 60rem); max-width: initial; margin-left: -30rem; margin-right: -30rem; }


 /** Toggle button (Thanks W3schools) / Nav arrows default **/
.switcher { position: absolute!important; top: 4rem; left: iniitial; right: 0;  height: 2.2rem; width: 3.4rem; }
.mainMenu .switcher:hover { background: none; }
.switcher input { opacity: 0; width: 0; height: 0; }
.switcher .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--grey-mid); background-color: var(--grey-mid); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.switcher .slider:before { position: absolute; content: ""; height: 1.6rem; width: 1.6rem; left: 0.2rem; bottom: 0.2rem; background: var(--white); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.switcher .slider:hover { background: var(--color-secondary-mid); border: 1px solid var(--color-secondary-mid); }
.switcher .slider:hover:before { background: var(--white); }
input:checked + .slider:before { -webkit-transform: translateX(1.2rem); -ms-transform: translateX(1.2rem); transform: translateX(1.2rem); }
.switcher .slider.round { border-radius: 1.2rem; }
.switcher .slider.round:before { border-radius: 50%; } 
.navLeft, .navRight { position: absolute; top: 0; height: 4rem; width: 4rem; z-index: 10; background: transparent; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.navRight:after { content: ""; background-color: var(--color-primary-dark); display: block; position: absolute; margin-top: 0.2rem; top: 50%; left: 1.2rem;  width: 2rem; height: 0.7rem; -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.navRight:before { content: ""; background-color: var(--color-primary-dark); display: block; position: absolute; margin-top: -0.8rem; top: 50%; left: 1.2rem;  width: 2rem; height: 0.7rem; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.navLeft:after { content: ""; background-color: var(--color-primary-dark); display: block; position: absolute; margin-top: -0.8rem; top: 50%; left: 0.8rem;  width: 2rem; height: 0.7rem; -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.navLeft:before { content: ""; background-color: var(--color-primary-dark); display: block; position: absolute; margin-top: 0.2rem; top: 50%; left: 0.8rem;  width: 2rem; height: 0.7rem; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.navLeft:hover, .navRight:hover  { cursor: pointer; cursor: hand; background: transparent; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.navLeft:hover:before, .navLeft:hover:after, .navRight:hover:before, .navRight:hover:after { background-color: var(--color-secondary-mid); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.navLeft.bgGreyLight:before, .navLeft.bgGreyLight:after, .navRight.bgGreyLight:before, .navRight.bgGreyLight:after { background-color: var(--grey-light); }


/** Header/menus**/
.header { width: 100%; z-index: 1000; position: relative; background: var(--color-primary-dark); }
.header > .block { display: flex; gap: 0 var(--spacer-size-5); padding-block: var(--spacer-size-2); }
.header.overlay { position: fixed; background: transparent; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.fixHeader .header.fixed { position: fixed; top: 0px; }
.fixHeader .header.overlay { background-color: rgba(255, 255, 255, 1); border-bottom: 1px solid var(--color-secondary-dark); -ms-transition: var(--anim-med); -webkit-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.fixHeader .header.overlay .logo, .fixHeader .header.overlay .mainMenu a { color: var(--color-primary-dark); }
.fixHeader .header.overlay .mainMenu a:hover, .fixHeader .header.overlay .logo:hover { color: var(--color-secondary-mid); }
.pageLengthBar { position: absolute; bottom: -1px; height: 5px; width: 0%; background: var(--color-secondary-mid); opacity: 0;  -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.pageLengthBar.inView { opacity: 1; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.logo { margin: 0; font-size: 5rem; padding-top: 2.5rem; color: var(--white); font-weight: var(--font-weight-bold); letter-spacing: -0.35rem; font-family: var(--font-secondary); display: block; line-height: 0; align-self: flex-start; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.logo:hover { text-decoration: none; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.mainMenu { margin: 0; padding: 0; }
.mainMenu > ul { display: flex; gap: 2rem; margin: 0; padding: 0; }
.mainMenu > ul > li { list-style-type: none; position: relative; background: transparent; color: var(--white); margin: 0; padding: 0; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.mainMenu ul > li > a { color: var(--white); font-weight: normal; padding: 1.8rem 2rem 2.2rem 2rem; display: block; white-space: nowrap; }
.mainMenu li:hover { background-color: var(--white); }
.mainMenu li:hover a { color: var(--color-primary-dark); text-decoration: none; }
.mainMenu ul > li:hover ul { visibility: visible; opacity: 1; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.mainMenu ul > li ul { z-index: 100; position: absolute; left: 0; margin: 0; padding: 2rem 0 0 0; z-index: 10; box-shadow: var(--shadow); visibility: hidden; opacity: 0; background: var(--white); border-bottom: var(--spacer-size-05) solid var(--color-secondary-mid); -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.fixHeader .mainMenu ul > li ul:before { content: ""; width: calc(100% + 2rem); height: 3rem; background: linear-gradient(180deg,rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%); position: absolute; top: -1.5rem; left: -1rem; }
.mainMenu ul > li li { font-family: var(--font-primary); list-style-type: none; white-space: nowrap; margin: 0; display: inline-block; width: 100%; }
.mainMenu ul > li li a { padding: var(--spacer-size-1) var(--spacer-size-2);; letter-spacing: 0; }
.mainMenu ul > li li:hover a { color: var(--color-secondary-mid); text-decoration: none; }
.mainMenuIcon { display: none; z-index: 100; }
.inPageMenu { margin-top: -6rem; border-radius: var(--spacer-size-3); padding: var(--spacer-size-3); background: var(--white); box-shadow: var(--shadow-small);  -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.inPageMenu.active {  box-shadow: var(--shadow); margin-bottom: -6rem; -ms-transition: var(--anim-fast); -webkit-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.inPageMenu ul { list-style-type: none; margin: 0; padding: 0; }
.inPageMenu li { margin-bottom: var(--spacer-size-2); }
.inPageMenu li a { font-family: var(--font-secondary); font-weight: normal; margin-right: 0; line-height: 130%; color: var(--text-primary); position: relative; display: block; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.inPageMenu li a::before { content: ""; position: absolute; top: 50%; left: 0; height: 0; width: 0.5rem; opacity: 0; background: var(--color-secondary-mid); -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.inPageMenu li a.active { padding: 0 0 0 2rem; margin-right: -2rem; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.inPageMenu li a.active::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0.5rem; opacity: 1; background: var(--color-secondary-mid);  -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.inPageMenu li a:hover { text-decoration: none; color: var(--cta-primary-active); }


/** Blog articles **/
.article main .fixedWidth { margin: 0 auto; }
.article .info.fixedWidth { margin: 0 auto 5rem auto; }
.article .summary { font-style: italic; color: var(--text-primary); margin-bottom: 3rem; }
.article .info.fixedWidth.parallax { width: calc(var(--container-width) + 20rem); background-size: cover; border-radius: 3rem; }
.article .info .box { height: 40rem; }
.article .info .box::after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: var(--spacer-size-3); background: var(--black); background: linear-gradient(0deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 95%); }
.article .info img { height: 100%; width: 100%; object-fit: cover; object-position: 0 50%; border-radius: var(--spacer-size-3); }
.article .info .metaInfo { width: var(--container-width-small); left: calc(50% - 40rem); position: absolute; bottom: 0; padding-block: var(--spacer-size-3); color: var(--white); z-index: 10; }
.article .articleList .block  { flex-basis: 25%; flex-grow: 0; }
.metaInfo .author, .metaInfo .date, .metaInfo .time { display: inline-block; }
.metaInfo .author { padding-right: var(--spacer-size-2); }
.metaInfo .date { padding-right: var(--spacer-size-2); }
.metaInfo .author + .date { border-left: 0.3rem solid var(--red-100); padding-left: var(--spacer-size-2); }
.metaInfo .date + .time { border-left: 0.3rem solid var(--red-100); padding-left: var(--spacer-size-2); }
.articleList { margin-top: 3rem; gap: 2rem; justify-content: center; }
.articleList .block { flex-basis: 30%; flex-grow: 1; }
.articleList img{ display: block; object-fit: cover; aspect-ratio: 3 / 4; width: 100%; height: auto; transform: scale3d(1, 1, 1); transform-origin: bottom; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.articleList a { position: relative; display: block; overflow: clip;  border-radius: var(--spacer-size-3); }
.articleList a:hover * { text-decoration: none; }
.articleList a:hover img { transform: scale3d(1.138, 1.11, 1.11); transform-origin: bottom;  -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.articleList a div { position: absolute; bottom: 3.5rem; width: calc(100% - 6rem); left: 3rem; max-height: 45%; aspect-ratio: 1 / 1; background: var(--white); padding: var(--spacer-size-3); border-radius: var(--spacer-size-2); display: flex; flex-direction: column; justify-content: space-between; }
.articleList a h3 { color: var(--black); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0!important; }
.articleList a p { margin: 0; padding-top: 1rem; }
.articleList a .tag { position: absolute; top: -2rem; }


/** Slideshow & Slideshow menu) **/
.slideshow { position: relative; width: 100%; }
.slideshow .slideContainer { position: relative; display: flex; flex-direction: row; height: 100%; }
.slideshow.ratio100 { height: 100%!important; }
.slideshow.ratio100 .item { height: 100%; aspect-ratio: auto; min-height: 50rem; }
.slideshow.ratio1-1 .item { aspect-ratio: 1 / 1; height: initial; }
.slideshow.ratio2-1 .item { aspect-ratio: 2 / 1; height: initial; }
.slideshow.ratio3-1 .item { aspect-ratio: 3 / 1; height: initial; }
.slideshow.ratio3-2 .item { aspect-ratio: 3 / 2; height: initial; }
.slideshow.ratio1-2 .item { aspect-ratio: 1 / 2; height: initial; }
.slideshow .item { position: absolute; top: 0; left: 0; opacity: 0; height: 100%; width: 100%; padding: var(--spacer-size-2); border-radius: var(--spacer-size-3); display: block; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.slideshow .item.active { position: relative; opacity: 1; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.slideshow .item img, .slideshow .item picture { height: 100%; object-fit: cover; }
.static .ssMenu span.active { width: 2.2rem; }
.slideshow.pages { overflow: clip; white-space: nowrap; }
.slideshow.pages .slideContainer { width: 100%; flex-wrap: nowrap; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.slideshow.pages .item { white-space: initial; position: relative; flex: 0 0 calc(100% - 16rem); opacity: 0.15; display: inline-block; border-radius: 0; }
.slideshow.pages .item.active { opacity: 1; }
.slideshow.pages .item:first-child { margin-left: 8rem; }
.slideshow.cards { padding: 7rem 0 10rem; margin: 0; overflow: visible; height: 100%; }
.slideshow.cards .slideContainer { margin-left: calc(50% - (0.5 * var(--container-width))); -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.slideshow.cards .slideContainer:has(> :last-child:nth-child(-n+3)) { justify-content: center; }
.slideshow.cards .slideContainer:has(> :last-child:nth-child(-n+4)) { justify-content: center; }
.slideshow.cards .slideContainer:has(> :last-child:nth-child(-n+4)) .item:first-child { margin-left: 0; }
.slideshow.cards .item { position: relative; flex: 0 0 34rem; opacity: 1; background: var(--white); overflow: clip; margin: 0 var(--spacer-size-gap) 0 0; padding: var(--spacer-size-3); border-radius: var(--spacer-size-3); box-shadow: var(--shadow-small); }
.slideshow.cards .item::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: 1px solid transparent; border-radius: var(--spacer-size-3); -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med);}
.slideshow.cards .item:last-child { margin-right: 0; }
.slideshow.cards a.item { color: var(--text-primary); overflow: clip; display: flex; flex-direction: column; justify-content: space-between; font-weight: normal; }
.slideshow.cards a.item h3, .slideshow.cards a.item h4 { color: var(--black); }
.slideshow.cards a.item:hover { text-decoration: none; box-shadow: var(--shadow); text-decoration: none; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.slideshow.cards a.item:hover h3, .slideshow.cards a.item:hover h4 { text-decoration: none; }
.slideshow.cards a.item:hover img { transform: scale3d(1.138, 1.11, 1.11); transform-origin: bottom;  border-radius: var(--spacer-size-3) var(--spacer-size-3) 0 0; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.slideshow.cards img{ transform: scale3d(1, 1, 1); transform-origin: bottom; margin: -1rem -1rem 1rem -1rem; height: 20rem; width: calc(100% + 2rem); object-fit: cover; border-radius: 2rem; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med);  }
.slideshow.cards .item.active { z-index: 10; box-shadow: 0 0 1rem var(--color-primary-mid); -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.slideshow.cards .item.active::before { z-index: -1; border: 1px solid var(--color-primary-mid); border-radius: var(--spacer-size-3); -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med);}
.slideshow.cards .navLeft { top: 0; left: calc(50% + 57rem); background: none; }
.slideshow.cards .navRight { top: 0; left: calc(50% + 61rem); background: none; }
.slideshow.cards .navRight:after, .slideshow.cards .navRight:before, .slideshow.cards .navLeft:after, .slideshow.cards .navLeft:before { background-color: var(--grey-mid); }
.slideshow.cards .navRight:hover:after, .slideshow.cards .navRight:hover:before, .slideshow.cards .navLeft:hover:after, .slideshow.cards .navLeft:hover:before { background-color: var(--color-secondary-mid); }
.slideshow.cards .inactive { cursor: initial; }
.slideshow.cards .inactive:before, .slideshow.cards .inactive:hover:before, .slideshow.cards .inactive:after, .slideshow.cards .inactive:hover:after { background-color: var(--grey-light) }
.slideshow.cards .ssMenuContainer { bottom: var(--spacer-size-3); }
.slideshow.cards .ssMenu { padding: 0; background: transparent; }
.slideshow.cards .ssMenu span { background: var(--grey-mid); }
.slideshow.cards .ssMenu span:hover { background: var(--color-secondary-mid); }
.slideshow .navLeft { bottom: 1.5rem; top: initial; left: 1.5rem; background: rgba(255, 255, 255, 0.8); border-radius: 50%; }
.slideshow .navRight { bottom: 1.5rem; top: initial; right: 1.5rem; background: rgba(255, 255, 255, 0.8);  border-radius: 50%; }
.ssMenuContainer { position: absolute; bottom: 1.2rem; width: 100%; display: flex; justify-content: center; line-height: 100%; }
.ssMenu { padding: 1.2rem 1rem 1rem 1rem; background: rgba(255, 255, 255, 0.8); border-radius: var(--spacer-size-2); }
.ssMenu span { display: inline-block; width: 2.2rem; height: 2.2rem; background: var(--color-primary-dark); border-radius: 50%; margin: 0 0.35rem; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.ssMenu span:hover, .static .ssMenu span:hover { background: var(--color-secondary-mid); cursor: pointer; cursor: hand; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.ssMenu span.active { position: relative; width: 6rem; border-radius: 2.2rem;}
.ssMenu span.active:after { width: 1.6rem; height: 1.6rem; position: absolute; top:0.3rem; left: 0.3rem; border-radius: 1.6rem; background: var(--white); content: "";  animation: progress var(--animationDuration) linear; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.ssMenu span.active:hover:after { background: var(--color-secondary-light); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }

/*
.slideshow.shuffle { overflow: initial; }
.slideshow.shuffle .slideContainer { position: relative; height: 50rem;  transform-style: preserve-3d; width: 30%; margin: 0 auto; }
.slideshow.shuffle .slideContainer:after { content: ""; transform: translateZ(-2px); rotate: 5deg; position: absolute; width: 100%; height: calc(100% - 6rem); top: 3rem; left: 0.5rem; box-shadow: var(--shadow-small); background: var(--grey-extra-light); border: 1px solid var(--grey-light); border-radius: var(--spacer-size-3); }
.slideshow.shuffle .slideContainer .item { display: flex; flex-direction: column; justify-content: center; text-align: center;position: absolute; width: 100%; height: calc(100% - 6rem); top: 3rem; left: 0; box-shadow: var(--shadow); background: var(--grey-extra-light); border-radius: var(--spacer-size-3); padding: var(--spacer-size-3); opacity: 1; rotate: -1deg;  animation: rotateCardOut 1s ease-out; animation-fill-mode: forwards;} 
.slideshow.shuffle .slideContainer .item.active { rotate: 0deg; animation: rotateCardIn 1s ease-out; animation-fill-mode: forwards; transform: translateZ(0px); }
.slideshow.shuffle .slideContainer .item:hover { text-decoration: none; }
.slideshow.shuffle .slideContainer .item img{ border-radius: 50%; height: 12rem; width: 12rem; margin: 0 auto 1rem auto; transform: scale3d(1, 1, 1); -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.slideshow.shuffle .slideContainer .item:hover img { border-radius: 50%; height: 12rem; width: 12rem; margin: 0 auto 1rem auto; transform: scale3d(1.138, 1.11, 1.11); -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.slideshow.shuffle .navLeft { top: 50%; left: 5%; background: none;}
.slideshow.shuffle .navRight { top: 50%; right: 5%; background: none; }
*/
@keyframes slide {
	0% { width: 0; opacity: 0; }
	5% { width: 0; opacity: 1; }
	98% { width: calc(100% - 3rem); opacity: 1; }
	100% { width: calc(100% - 3rem); opacity: 0; }
}
@keyframes progress {
	0% { width: 2rem; }
	100% { width: calc(100% - 0.6rem); }
}
@keyframes rotateCardIn {
  0% { transform: translateZ(-1px); left: 0%; rotate: 0deg; }
  50% { transform: translateZ(1px); left: 75%; rotate: 5deg; }
  100% { transform: translateZ(1px); left: 0%; rotate: 0; }
}
@keyframes rotateCardOut {
  0% { transform: translateZ(1px); left: 0%; rotate: -1deg; }
  50% { transform: translateZ(1px); left: -30%; rotate: -5deg;}
  51% { transform: translateZ(0px); left: -30%; rotate: -5deg; }
  100% { transform: translateZ(-1px); left: 0%; rotate: -5deg; }
}


/** Content structures **/
.csContainer { position: relative; }
.csContainer .item { width: 100%; }
.csContainer .title { display: inline-block;  -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast);  }
.csContainer .title:hover { cursor: pointer; cursor: hand; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer .item .content  { display: grid; grid-template-rows: 0fr;-webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.csContainer .item.active .content { grid-template-rows: 1fr; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.csContainer .item .contentContainer { overflow: hidden; grid-row: 1/span 2; }
.csContainer.slider .item .title { position: relative; color: var(--black); width: 100%; background: var(--grey-light); padding: var(--spacer-size-1) var(--spacer-size-2); margin: 0 0 1rem 0; border-radius: var(--spacer-size-1); }
.csContainer.slider .item .title:before { content: ""; background-color: var(--grey-mid); display: block; position: absolute; bottom: 2rem; right: 3rem; width: 2rem; height: 0.7rem; z-index: 1; pointer-events: none; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer.slider .item .title:after { content: ""; background-color: var(--grey-mid); display: block; position: absolute; bottom: 2rem; right: 2rem; width: 2rem; height: 0.7rem; pointer-events: none; -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer.slider .item .title:hover { background: var(--color-secondary-mid); color: var(--white); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer.slider .item .title:hover:before, .csContainer.slider .item .title:hover:after { background-color: var(--white); webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer.slider .item .content { opacity: 0; margin: 0 var(--spacer-size-2); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer.slider .item.active .title { -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast);  }
.csContainer.slider .item.active .title:before { -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer.slider .item.active .title:after { -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer.slider .item.active .title:hover:before, .csContainer.slider .item.active .title:hover:after { background-color: var(--white); webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.csContainer.slider .item.active .content { opacity: 1; }
.csContainer:is(.tab, .pill) .item { position: absolute; top: 0; }
.csContainer:is(.tab, .pill) .item:last-child .title { margin: 0; }
.csContainer:is(.tab, .pill) .title { position: relative; z-index: 10; font-size: 110%; margin: 0 var(--spacer-size-1) 0 0!important; padding: var(--spacer-size-1) var(--spacer-size-2); color: var(--black); background: var(--grey-light); border: 1px solid var(--grey-mid); border-bottom: 1px solid var(--grey-mid); border-radius: var(--spacer-size-1) var(--spacer-size-1) 0 0; }
.csContainer:is(.tab, .pill) .item .title:hover { background: var(--color-secondary-mid); color: var(--white); border: 1px solid var(--color-secondary-mid); }
.csContainer:is(.tab, .pill) .item .content { opacity: 0; padding: 2rem; border: 1px solid var(--grey-mid); background: var(--white); -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.csContainer:is(.tab, .pill) .item.active { position: relative; width: 100%; }
.csContainer:is(.tab, .pill) .item.active .title { position: relative; z-index: 12; border-bottom: 1px solid var(--white); color: var(--black); background: var(--white); }
.csContainer:is(.tab, .pill) .item.active .title:hover { border: 1px solid var(--grey-mid); border-bottom: 1px solid var(--white); color: var(--color-secondary-mid); background: var(--white); }
.csContainer:is(.tab, .pill) .item.active .content { opacity: 1; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.csContainer.pill .title { border-radius: var(--spacer-size-1); border: 1px solid transparent!important; }
.csContainer.pill .item .content { background: transparent; border: 1px solid transparent; }


/** Styled boxes **/
.videoContainer  { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%;}		/* HD 16:9 */
.videoContainer.cinematic { padding-bottom: 42.6%; padding-top: 0; }																				/* Cinemascope 2.35:1*/
.videoContainer.widescreen { padding-bottom: 41.67%; padding-top: 0; }									    								/* 21:9 or 2.37:1 */
.videoContainer iframe, .videoContainer object, .videoContainer embed, .videoContainer video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.videoBox { position: relative; display: block; }
.videoBox::before { position: absolute; top: calc(50% - 3rem); left: calc(50% - 3rem); padding: 1rem 1.5rem; width: 6rem; height: 6rem; background: var(--white); border-radius: 50%; z-index: 10; content: ''; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); } 
.videoBox:hover:before { box-shadow: 0 0 30px rgba(255,255,255,.9); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.videoBox::after { position: absolute; top: calc(50% - 2.5rem); left: calc(50% - 2.5rem); padding: 1rem 1.3rem 1rem 1.7rem; width: 5rem; height: 5rem; background: var(--red-100); border-radius: 50%; z-index: 11; content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' width='40' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23FFFFFF' points='0 0 57.3 35.2 0 70.4 0 0'/%3E%3C/svg%3E"); } 
.videoBox img{ transform: scale3d(1, 1, 1); transform-origin: center; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med);  }
.videoBox:hover img { transform: scale3d(1.02, 1.02, 1.02); transform-origin: center; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.inlineHero { position: relative; z-index: -1; }
.inlineHero .box::after { content: ""; width: 2600px; height: 100%; position: absolute; left: calc(50% - 1300px); bottom: 0; border-radius: var(--spacer-size-3); background: var(--black); background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 95%); }
.inlineHero img { height: 75rem; width: 200%; left: calc(50% - 1300px); border-radius: var(--spacer-size-3); max-width: 2600px!important; object-fit: cover; position: relative; }
.quoteBox { display: flex; flex-direction: column; justify-content: center; text-align: center; width: 100%; height: auto; border-radius: var(--spacer-size-3); padding: var(--spacer-size-3); } 
.quoteBox:hover { text-decoration: none; }
.quoteBox img{ border-radius: 50%; height: 12rem; width: 12rem; margin: 0 auto 1rem auto; transform: scale3d(1, 1, 1); -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.quoteBox:hover img { border-radius: 50%; height: 12rem; width: 12rem; margin: 0 auto 1rem auto; transform: scale3d(1.138, 1.11, 1.11); -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.card { position: relative; opacity: 1; overflow: clip; background: var(--white); padding: var(--spacer-size-3); border-radius: var(--spacer-size-3); box-shadow: var(--shadow-small); -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.card.image { padding: 0; }
.card img, .card picture { transform: scale3d(1, 1, 1); transform-origin: bottom; margin: -1rem -1rem 1rem -1rem; height: 20rem; width: calc(100% + 2rem); max-width: none; object-fit: cover; border-radius: 2rem; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med);  }
.card.image img, .card.image picture {width: 100%; height: 100%; margin: 0; }
.card img.icon { margin: 0; height: auto; width: 8rem; max-width: 8rem; object-fit: initial; border-radius: 0; -webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med);  }
.card a, a.card { color: var(--text-primary); font-weight: var(--font-weight-normal); font-size: 1.6rem; text-decoration: none; }
.card a h2, .card a h3, .card a h4, a.card h2, a.card h3, a.card h4 { color: var(--black); margin-top: 0; }
.card a:hover h2, .card a:hover h3, .card a:hover h4, a.card:hover h2, a.card:hover h3, a.card:hover h4 { text-decoration: none; }
.card a:hover * { text-decoration: none; }
.card a:hover img { transform: scale3d(1.138, 1.11, 1.11); transform-origin: bottom;  border-radius: var(--spacer-size-3) var(--spacer-size-3) 0 0; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.card a:hover img.icon { border-radius: 0}
.card a .button { position: absolute; bottom: -5rem; left: 0; height: 5rem; background: var(--white);  color: var(--cta-primary); width: 100%; border-radius: 0; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
.card a:hover .button { position: absolute; bottom: 0; left: 0; height: 15rem; padding-top: 10rem; background: linear-gradient(0deg,rgb(256, 256, 256) 30%, rgba(256, 256, 256, 0) 95%); color: var(--cta-primary); webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
a.card:hover { box-shadow: var(--shadow); }


/** galleries & lightbox **/
.gallery { width: 100%; position: relative; }
.gallery img { float: left; margin: var(--spacer-size-05); border: 0px solid var(--white); width: auto; max-width: 100%; display: block; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.gallery img:hover { opacity: 0.7; cursor: pointer; cursor: hand; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.gallery a { position: relative; display: block; }
.gallery a:before { content: ""; background: rgba(0, 0, 0, 0); position: absolute; margin: 0; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.gallery a:after { opacity: 0; content: "";  width: calc(100% - 2rem); height: calc(100% - 2rem); position: absolute; top: 1rem; left: 1rem; border: 2px solid #FFFFFF; box-sizing: box-border; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.gallery a:hover:before { content: "+"; display: flex; justify-content: center; align-items: center; font-size: 6rem; color: #FFFFFF; font-weight: bold; background: rgba(0, 0, 0, 0.3);  width: 100%; height: 100%; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.gallery a:hover:after { opacity: 1; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.gallery.row { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.gallery.square { display: grid; grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); grid-auto-flow: dense; }
.gallery.square a { aspect-ratio: 1; }
.gallery.square a img, .gallery.square a picture { object-fit: cover; width: 100%; height: 100%; margin: 0; aspect-ratio: 1;}
.gallery.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(20% - 1rem), 1fr)); gap: 1rem; grid-auto-flow: dense; }
.gallery.grid a:nth-child(6n+1) { grid-row: span 2; grid-column: span 2; }
.gallery.grid a { aspect-ratio: 1; }
.gallery.grid a img, .gallery.grid a picture { object-fit: cover; width: 100%; height: 100%; margin: 0; aspect-ratio: 1; border-radius: var(--spacer-size-2); }
.gallery.grid a:before, .gallery.grid a:after {  border-radius: var(--spacer-size-2); }
.lightboxBG { pointer-events: none; opacity: 0; width: 100%; position: fixed; top: 0; z-index: 2000; display: block; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.lightboxBG.lightboxShow { pointer-events: auto; background: var(--black); opacity: 0.7; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.lightboxContainer { pointer-events: none; display: block; opacity: 0; margin: 0; position: fixed; height: 100%; width: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; z-index: 2000; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.lightboxContainer.lightboxShow { pointer-events: auto; opacity: 1; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.lightboxContent { max-width: var(--container-width); width: 100%; height: auto; max-height: 100%; position: fixed; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.lightboxContent .container { background: var(--white); overflow: scroll; max-height: calc(100vh - 14rem); }
.lightboxContainer .lightboxContent img { opacity: 1; width: unset; max-width: 100%; height: auto; max-height: calc(100vh - 14rem); margin: 0 auto; display: flex; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.lightboxContainer .lightboxContent img.out { opacity: 0; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.lightboxContainer.slide, .lightboxContainer.slide .lightboxContent { left: 200%; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.lightboxContainer.slide.lightboxShow { left: 0; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.lightboxContainer.slide.lightboxShow .lightboxContent { max-width: unset; width: 100%; height: 100vh; max-height: unset; left: calc(50% - 40rem); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast);}
.lightboxContainer.slide .lightboxContent .container { max-height: unset; height: 100vh; }
.lightboxContainer.slide .lightboxClose { position: absolute; top: 1.5em; left: -7rem; }
.lightboxClose { position: absolute; top: -5.5rem; right: 0; width: 4rem; height: 4rem; z-index: 100; -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); cursor: pointer; cursor: hand; }
.lightboxClose span { display: block; position: absolute; left: 0.25rem; top: 1.65rem; height: 0.7rem; width: 3.5rem; background: var(--white); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); } 
.lightboxClose span:nth-child(1) { -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.lightboxClose span:nth-child(2) { -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.lightboxClose:hover span { background: var(--color-secondary-mid); }
.popupContent { display: none; width: 300px; height: 300px; }
.galleryCounter { color: var(--white); position: absolute; width: auto; z-index: 301; top: -4.8rem; left: calc(50% - 3rem); width: 6rem; text-align: center; font-family: var(--font-secondary); }
.contentDescription { margin-top: var(--spacer-size-1); color: var(--color-tertiary-light); font-family: var(--font-secondary); text-align: center; position: absolute; width: 100%; z-index: 301;}
.lightboxContainer .navLeft { top: -5.5rem; left: calc(50% - 7rem); }
.lightboxContainer .navRight { top: -5.5rem; left: calc(50% + 3rem); }
.lightboxContainer .navLeft:before, .lightboxContainer .navLeft:after, .lightboxContainer .navRight:before, .lightboxContainer .navRight:after { background: var(--white); }
.lightboxContainer .navLeft:hover:before, .lightboxContainer .navLeft:hover:after, .lightboxContainer .navRight:hover:before, .lightboxContainer .navRight:hover:after { background: var(--color-secondary-mid); }


/** Filter list **/
.selector { display: flex; width: 100%; gap: 2rem; }
.selector label { position: relative; padding-left: 2rem; font-weight: var(--font-weight-bold); }
.selector label:before{ content: ""; background-color: var(--grey-mid); display: block; position: absolute; bottom: 3.5rem; right: 2.5rem; width: 2rem; height: 0.7rem; z-index: 1; pointer-events: none; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.selector label:after{ content: ""; background-color: var(--grey-mid); display: block; position: absolute; bottom: 3.5rem; right: 1.5rem; width: 2rem; height: 0.7rem; pointer-events: none; -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.selector label:hover:before, .selector label:hover:after{ background-color: var(--color-secondary-mid); webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.selector .filter { display: block; position: relative; margin-left: -2rem; margin-top: 0.5rem; padding: var(--spacer-size-15) 6rem var(--spacer-size-15) var(--spacer-size-2); background: var(--white); color:var(--grey-extra-dark); border: 1px solid var(--grey-light); outline: none; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.selector .filter:hover { color: var(--color-secondary-mid); }
.selector .filter:hover option { color: var(--black); font-family: var(--font-primary); }
.filterBlock { opacity: 1; webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.filterBlock .filterTags { position: relative; margin-bottom: 30px; }
.filterBlock .filterTags strong { display: inline-block; background: var(--color-tertiary-light); padding: 3px 8px; margin: 0 5px 10px 0; font-size: 80%; webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.filterBlock .filterTags strong.hidden { display: none; webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.filterBlock .filterTags strong.moreTags:hover { cursor: pointer; cursor: hand; background: var(--beige-60); }
.filterBlock .filterTags:after { content: ""; position: absolute; left: -10px; bottom: -10px; width: calc(100% + 20px); border-top: 1px solid color:var(--blue-60); }
.filterContainer { display: grid; gap: var(--spacer-size-gap); grid-template-columns: repeat(auto-fill, minmax(calc(25% - var(--spacer-size-gap)), 1fr)); width: 100%; }
.filterContainer .col12 { grid-column: 1 / span 4; }
.filterContainer.fixed .filterContent { height: 350px; }
.filterContent { display: none; }
.filterBlock:not(:has(.showInList)) { display: none; }
/*.filterBlock:not(:has(.showInList)) { opacity: 0; grid-row: -1; height: 0;  webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }*/
.filterContent.showInList { display: block!important; }
.filterContent { position: relative; overflow: hidden; opacity: 1;  webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.filterContent.card { margin: 0; box-shadow: var(--shadow-small); border-radius: var(--spacer-size-3); border: 1px solid var(--color-primary-mid); }
.filterContent.card:has(img) h4 { position: absolute; top: 1rem; left: 2rem; color: var(--white); width: calc(100% - 4rem); padding: var(--spacer-size-2); border-radius: var(--spacer-size-2) var(--spacer-size-2) 0 0; background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 60%); }
.filterContent.card:has(img) .filterTags { position: absolute; top: 15rem; left: 4rem; }
.filterContent.card:has(img) .filterTags strong { background: var(--white); color; var(--black); }
.filterContainer.fixed .filterContent .toggleContent { position: absolute; bottom: 0; width: 100%; text-align: center; height: 150px; left: 0px; font-size: 200%; line-height: 200px; margin: 0 auto; font-weight: bold; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.filterContainer.fixed .filterContent .toggleContent:hover { cursor: pointer; cursor: hand; font-size: 300%;  webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.filterContainer.fixed .filterContent.active  { height: auto; padding-bottom: 50px; webkit-transition: var(--anim-med); -moz-transition: var(--anim-med); -o-transition: var(--anim-med); transition: var(--anim-med); }
.filterContainer.fixed .filterContent.active .toggleContent { height: 50px; background: transparent; line-height: 50px; }
.resetFilter { width: auto; position: absolute; bottom: 1.5rem; right: 0; }


/** Animations **/
.loadBlocks.fadeIn .animate { position: relative; opacity: 0; }
.loadBlocks.fadeIn .animate.finish { opacity: 1; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.loadBlocks.slideInBottom .animate { position: relative; opacity: 0; top: 100px; }
.loadBlocks.slideInBottom .animate.finish { opacity: 1; top: 0; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.loadBlocks.slideInTop .animate { position: relative; opacity: 0; top: -100px; }
.loadBlocks.slideInTop .animate.finish { opacity: 1; top: 0; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.loadBlocks.slideInRight .animate { position: relative; opacity: 0; left: 100px; }
.loadBlocks.slideInRight .animate.finish { opacity: 1; left: 0; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.loadBlocks.slideInLeft .animate { position: relative; opacity: 0; left: -100px; }
.loadBlocks.slideInLeft .animate.finish { opacity: 1; left: 0; -webkit-transition: var(--anim-slow); -moz-transition: var(--anim-slow); -o-transition: var(--anim-slow); transition: var(--anim-slow); }
.canvas { position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.canvas .canvasBg { height: 100%; width: 100%; position: absolute; }
.canvas .canvasBg img { object-fit: cover; height: 100%; width: 100%; }
.canvas.ratio50 .canvasBg { height: 50%; top: 25%; }
.canvas.ratio75 .canvasBg { height: 75%; top: 12.5%; }
.canvas.ratio100 { height: 100%; padding-bottom: 0; }
.canvas.ratio100 .canvasBg { height: 100%; top: 0; }
.canvas .canvasElements { position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; }
.canvas .canvasElements .fixed { position: absolute; width: 100%; height: 100%; }
.canvas .canvasElements > div { position: relative; }
.canvas .canvasElements .item { border-radius: var(--spacer-size-1); padding: var(--spacer-size-2); background: var(--color-tertiary-light); box-shadow: var(--shadow); }
.canvas.laptopScreen { padding-bottom: 0; }
.canvas.laptopScreen .canvasBg { width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; }
.canvas.laptopScreen .canvasElements { position: absolute; width: 75%; height: 85%; top: 5%; left: 12.5%; }
.canvas.laptopScreen .dropShadow { position: absolute; top: 0; left: 10%; width: 80%; height: 95%; z-index: -1; background: #FFFFFF; -webkit-box-shadow: 0px 60px 50px -40px rgba(0,0,0,0.5); -moz-box-shadow: 0px 60px 50px -40px rgba(0,0,0,0.5); box-shadow: 0px 60px 50px -40px rgba(0,0,0,0.5); }
.canvas.laptopScreen .dropShadow:before { position: absolute; content: ""; background: #FFFFFF; z-index: 0; width: 10%; height: 100%; left: -10%; top: 0; }
.canvas.laptopScreen .dropShadow:after { position: absolute; content: ""; background: #FFFFFF; z-index: 0; width: 10%; height: 100%; left: 100%; top: 0; }
.canvas.mobileScreen .canvasBg { width: 100%; height: 100%; position: absolute; top: 0; z-index: 1; }
.canvas.mobileScreen .canvasElements { position: absolute; width: 35%; height: 93.33%; top: 3.33%; left: 32.5%; overflow: hidden; }
.canvas.mobileScreen .dropShadow { position: absolute; top: 1%; left: 30%; width: 40%; height: 98%; border-radius: 7%; -webkit-box-shadow: 10px 15px 10px 1px rgba(0,0,0,0.2); -moz-box-shadow: 10px 15px 10px 1px rgba(0,0,0,0.2); box-shadow: 10px 15px 10px 1px rgba(0,0,0,0.2); }
.canvas .headerBar { fill: #E6ECF1; background: #E6ECF1; }
.canvas .screenBox { stroke:#787a7a;stroke-width:0.1; fill:#FFFFFF; background: #FFFFFF; border: 1px solid #DADEDE; }
.canvas .graph { fill: var(--color-tertiary-mid); background: var(--color-tertiary-mid); }
.canvas .graph.primary { fill: var(--color-primary-dark); background: var(--color-primary-dark); }
.canvas .graph.secondary { fill: var(--color-secondary-mid); background: var(--color-secondary-mid);}
.canvas .canvasButton { width: 13%; height: 8%; fill: var(--grey-mid); background: var(--grey-mid); }
.canvas .arrow { width: 5%; height: 10%; fill: var(--grey-extra-dark); }
.canvas .click { width: 10%; height: 10%; fill: #FFFFFF; }
.gridLine { stroke:#DDDDDD; stroke-width:0.1; stroke-miterlimit:1; }
.device { fill:#F8F8F8; }
.deviceScreen { fill:#FFFFFF; stroke:#C9CACA; stroke-miterlimit: 10; }
.deviceGradient { fill:url(#SVGID_1_); }
.notch { fill:#E0E0E0; }
.animText { font-family: apax; font-size: 12px; }
.animText.medium { font-family: apax; font-size: 9px; }
.animText.small { font-size: 6px; }
.resetAnimation { width: 30px; height: 30px; margin: 30px auto 0; cursor: pointer; }
.resetAnimation path { fill: #0650D0; opacity: 0.25; -webkit-transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%;  }
.resetAnimation:hover path { opacity: 1; -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.circleAnim { transform: scale(0); clip-path: circle(50%);}
.animationInView .circleAnim.bounce1 { animation-name: circleBounce1; animation-duration: 1s; animation-delay: 0s; animation-fill-mode: forwards; }
@keyframes circleBounce1 {
	0% { transform: scale(0); }
	12% { transform: scale(0.11); }
	24% { transform: scale(0.46); }
	36% { transform: scale(0.98); }
	54% { transform: scale(0.75); }
	74% { transform: scale(0.98); }
	82% { transform: scale(0.94); }
	92% { transform: scale(0.99); }
	96% { transform: scale(0.98); }
	100% { transform: scale(1); }
}
.photoWipe { position: relative; width: 100%; max-height: 400px; }
.photoWipe img { object-fit: cover; height: 400px; width: 100%; object-position: top;}
.photoWipe .show { z-index: 1; transition: clip-path 0.5s ease-in-out; }
.photoWipe .hidden { z-index: 0; position: absolute; top: 0; width: 100%; height: auto; transition: clip-path 0.5s ease-in-out; }
.photoWipe:hover .show { transition: clip-path 0.5s ease-in-out; }
.photoWipe:hover .hidden { transition: clip-path 0.5s ease-in-out; }
.photoWipe.rtol .show { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); }
.photoWipe.rtol .hidden { clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); }
.photoWipe.rtol:hover .show { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); }
.photoWipe.rtol:hover .hidden { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); }
.photoWipe.ltor .show { clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); }
.photoWipe.ltor .hidden { clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); }
.photoWipe.ltor:hover .show { clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); }
.photoWipe.ltor:hover .hidden { clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); }
.photoWipe.circle .show { clip-path: circle(100% at 50% 50%); }
.photoWipe.circle .hidden { clip-path: circle(0% at 50% 50%); }
.photoWipe.circle .hidden::before { background: none; }
.photoWipe.circle:hover .show { clip-path: circle(50% at 50% 50%); }
.photoWipe.circle:hover .hidden { clip-path: circle(100% at 50% 50%); }
.logoSlider { display: flex; justify-content: center; width: 100%; margin: 0 auto; }
.logoSlider .logoFrame { overflow:hidden; position:relative; }
.logoSlider .logoFrame::before, .logoSlider .logoFrame::after { content: " "; position:absolute; z-index:9; width: 20rem; height:100%;	 }
.logoSlider .logoFrame::before { top:0; left:0; background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
.logoSlider .logoFrame::after { top:0; right:0; background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
.logoSlider .logoContainer { display: flex; margin: 0; padding: 0; }
.logoSlider .logoFrame ul.logoContainer { width: 4400px;}
.logoSlider .logoItem { flex: 1; display: flex; justify-content: center; align-items: center; margin: 0 var(--spacer-size-2) 0 0; padding: var(--spacer-size-2); width: 200px; animation:translateinfinite 40s linear infinite; filter: grayscale(100%); opacity: 0.6; }
.logoSlider .logoItem img { aspect-ratio: 1; }
@keyframes translateinfinite {
	100% { transform:translateX(-2200px); }
}


/** Tooltip **/
.tooltip { display: inline-flex; position: relative; }
.tooltip:before { opacity: 0; content: ""; background: var(--color-tertiary-light); border: 1px solid var(--color-tertiary-dark); transform: rotate(45deg); position: absolute; z-index: 101; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.tooltipContent { position: absolute; background: var(--color-tertiary-light); font-weight: normal; color: var(--font-primary); box-shadow: var(--shadow); border: 1px solid var(--color-tertiary-dark); border-radius: var(--spacer-size-1); padding: var(--spacer-size-2); margin: var(--spacer-size-2); z-index: 100; opacity: 1; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.tooltipHide { opacity: 0; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.tooltip.tooltipTop:before { opacity: 1; width: var(--spacer-size-2); height: var(--spacer-size-2); left: calc(50% - var(--spacer-size-1)); top: -3rem; border-left: none; border-top: none; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.tooltip.tooltipRight:before { opacity: 1; width: var(--spacer-size-2); height: var(--spacer-size-2); left: calc(100% + var(--spacer-size-1)); top: calc(50% - var(--spacer-size-1)); border-right: none; border-top: none; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.tooltip.tooltipBottom:before { opacity: 1; width: var(--spacer-size-2); height: var(--spacer-size-2); left: calc(50% - var(--spacer-size-1)); top: calc(100% + var(--spacer-size-1)); border-bottom: none;  border-right: none; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
.tooltip.tooltipLeft:before { opacity: 1; width: var(--spacer-size-2); height: var(--spacer-size-2); left: -3rem; top: calc(50% - 1rem); border-left: none; border-bottom: none; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }


/** Footer **/
footer.container { background: var(--color-tertiary-light); border-top: 1px solid var(--color-tertiary-dark); }
footer.footerContent { gap: 0 8rem; }
footer.footerContent .col4 { flex: 1 0 calc(33.3333333% - 8rem); }
footer a, footer h2 { color: var(--color-tertiary-extra-dark); }
footer svg { fill: var(--color-tertiary-mid); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast);}
footer svg:hover { fill: var(--color-tertiary-dark); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast);}

/***************************************/
/********** Responsive styles **********/
@media (min-width: 2200px) {
	.logoSlider { width: 2200px; }
}

@media (max-width: calc(1300px + 40rem)) {
	.fixedWidth .extendLeft30 { width: calc(100% + 20rem); margin-left: -20rem; }
	.fixedWidth .extendRight30 { width: calc(100% + 20rem); margin-right: -20rem; }
}

@media (max-width: calc(1300px + 25rem)) {
	.fixedWidth .extendLeft30, .fixedWidth .extendLeft20 { width: calc(100% + 10rem); margin-left: -10rem; }
	.fixedWidth .extendRight30, .fixedWidth .extendRight20 { width: calc(100% + 10rem); margin-right: -10rem; }
}

@media (min-width: calc(1300px + 6rem)) {
	.container:not(.fixedWidth) .gallery.grid { grid-template-columns: repeat(auto-fill, minmax(calc(20rem - 1rem), 1fr)); }
	.container:not(.fixedWidth) .gallery.square { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
	.article main .fixedWidth, .smallContainer.fixedWidth { width: var(--container-width-small); }
	.article .info.fixedWidth { width: var(--container-width);  }
	.article .row12 > .col9, .smallContainer.fixedWidth.row12 > .col9 { margin-right: -25%; width: 100%; }
	.article .col3 .sticky, .smallContainer.fixedWidth .col3 .sticky { margin: -9.5rem -40rem 0 calc(100% + 6rem); width: calc(100% + 40rem); }
	.article .articleList h3 { font-family: var(--font-secondary); font-size: clamp(1.8rem, 0.286px + 2.309vw, 2.4rem); margin: 1rem 0 1.5rem 0; font-weight:var(--font-weight-normal); line-height:var(--font-line-height-heading); letter-spacing:  var(--font-letter-spacing); color:var(--black); display:block;}
	.article .articleList p { font-size: var(--font-size-small); line-height: normal; }
}

@media (max-width: calc(1300px + 6rem)) {
	.container.fixedWidth { padding: 0 var(--spacer-size-5); }
	.header > .block { padding: var(--spacer-size-2) var(--spacer-size-5); }
	.switcher { right: 5rem; }
  .fixedWidth, .article .fixedWidth, .article .info.fixedWidth, .smallContainer.fixedWidth { width: 100%; }
	.fixedWidth .extendLeft30, .fixedWidth .extendLeft20, .fixedWidth .extendLeft10 { width: calc(100% + 2.5rem); margin-left: -2.5rem; }
	.fixedWidth .extendRight30, .fixedWidth .extendRight20, .fixedWidth .extendRight10 { width: calc(100% + 2.5rem); margin-right: -2.5rem; }
	.article .info .metaInfo { left: 15rem; width: auto;}
	.header .fixedWidth, .article .header .fixedWidth { width: 100%; }
	.parallax { background-size: inherit; }
	.slideshow.cards { width: calc(var(--slide-show-container) - 10rem); }
	.slideshow.cards .slideContainer { margin-left: 0; }
	.slideshow.cards .navLeft { left: calc(100% - 7rem); }
	.slideshow.cards .navRight { left: calc(100% - 3rem); }
	.logoSlider { width: calc(100% + 10rem); margin: 0 -5rem; }
	.logoSlider .logoFrame::before, .logoSlider .logoFrame::after { content: none; }
	.lightboxContent { max-width: calc(100% - 10rem); }
	.lightboxContainer .lightboxContent .container { padding: 0; }
	.lightboxContainer.slide.lightboxShow .lightboxContent { width: calc(50% + 40rem); }
	}


/* Portrait tablet to landscape and desktop */
@media (min-width: 960px) and (max-width: calc(1300px + 6rem)) {
	.row12 .colLarge0 { display: none; }
	.row10 .colLarge1 { flex: 1 0 calc(10% - var(--spacer-size-gap))!important; }
	.row10 .colLarge2 { flex: 1 0 calc(20% - var(--spacer-size-gap))!important; }
	.row10 .colLarge3 { flex: 1 0 calc(30% - var(--spacer-size-gap))!important; }
	.row10 .colLarge4 { flex: 1 0 calc(40% - var(--spacer-size-gap))!important; }
	.row10 .colLarge5 { flex: 1 0 calc(50% - var(--spacer-size-gap))!important; }
	.row10 .colLarge6 { flex: 1 0 calc(60% - var(--spacer-size-gap))!important; }
	.row10 .colLarge7 { flex: 1 0 calc(70% - var(--spacer-size-gap))!important; }
	.row10 .colLarge8 { flex: 1 0 calc(80% - var(--spacer-size-gap))!important; }
	.row10 .colLarge9 { flex: 1 0 calc(90% - var(--spacer-size-gap))!important; }
	.row10 .colLarge10 { flex: 1 0 calc(100% - var(--spacer-size-gap))!important; }
	.row12 .colLarge0 { display: none; }
	.row12 .colLarge1 { flex: 1 0 calc(8.3333333% - var(--spacer-size-gap))!important; }
	.row12 .colLarge2 { flex: 1 0 calc(16.6666667% - var(--spacer-size-gap))!important; }
	.row12 .colLarge3 { flex: 1 0 calc(25% - var(--spacer-size-gap))!important; }
	.row12 .colLarge4 { flex: 1 0 calc(33.3333333% - var(--spacer-size-gap))!important; }
	.row12 .colLarge5 { flex: 1 0 calc(41.6666667% - var(--spacer-size-gap))!important; }
	.row12 .colLarge6 { flex: 1 0 calc(50% - var(--spacer-size-gap))!important; }
	.row12 .colLarge7 { flex: 1 0 calc(58.3333333% - var(--spacer-size-gap))!important; }
	.row12 .colLarge8 { flex: 1 0 calc(66.6666667% - var(--spacer-size-gap))!important; }
	.row12 .colLarge9 { flex: 1 0 calc(75% - var(--spacer-size-gap))!important; }
	.row12 .colLarge10 { flex: 1 0 calc(83.3333333% - var(--spacer-size-gap))!important; }
	.row12 .colLarge11 { flex: 1 0 calc(91.6666667% - var(--spacer-size-gap))!important; }
	.row12 .colLarge12 { flex: 1 0 calc(100% - var(--spacer-size-gap))!important; }
	.marginLarge0 { margin: 0; }
	.paddingLarge0 { padding: 0; }
}


/* Large desktop and up */
@media (min-width: 960px) {
	.row10 .block { flex: 1 0 calc(10% - var(--spacer-size-gap)); }
	.row10 .col2 { flex: 1 0 calc(20% - var(--spacer-size-gap)); }
	.row10 .col3 { flex: 1 0 calc(30% - var(--spacer-size-gap)); }
	.row10 .col4 { flex: 1 0 calc(40% - var(--spacer-size-gap)); }
	.row10 .col5 { flex: 1 0 calc(50% - var(--spacer-size-gap)); }
	.row10 .col6 { flex: 1 0 calc(60% - var(--spacer-size-gap)); }
	.row10 .col7 { flex: 1 0 calc(70% - var(--spacer-size-gap)); }
	.row10 .col8 { flex: 1 0 calc(80% - var(--spacer-size-gap)); }
	.row10 .col9 { flex: 1 0 calc(90% - var(--spacer-size-gap)); }
	.row10 .col10 { flex: 1 0 calc(100% - var(--spacer-size-gap)); }
	.row12 .block { flex: 1 0 calc(8.3333333% - var(--spacer-size-gap)); }
	.row12 .col2 { flex: 1 0 calc(16.6666667% - var(--spacer-size-gap)); }
	.row12 .col3 { flex: 1 0 calc(25% - var(--spacer-size-gap)); }
	.row12 .col4 { flex: 1 0 calc(33.3333333% - var(--spacer-size-gap)); }
	.row12 .col5 { flex: 1 0 calc(41.6666667% - var(--spacer-size-gap)); }
	.row12 .col6 { flex: 1 0 calc(50% - var(--spacer-size-gap)); }
	.row12 .col7 { flex: 1 0 calc(58.3333333% - var(--spacer-size-gap)); }
	.row12 .col8 { flex: 1 0 calc(66.6666667% - var(--spacer-size-gap)); }
	.row12 .col9 { flex: 1 0 calc(75% - var(--spacer-size-gap)); }
	.row12 .col10 { flex: 1 0 calc(83.3333333% - var(--spacer-size-gap)); }
	.row12 .col11 { flex: 1 0 calc(91.6666667% - var(--spacer-size-gap)); }
	.row12 .col12 { flex: 1 0 calc(100% - var(--spacer-size-gap)); }
}


/* Tablet and down */
@media (max-width: 959px) {
	:root {
		--font-line-height-default: 2.5rem;
	}
	h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { letter-spacing: 0; }
	.desktop { display: none; }
	.tablet { display: block; }
	.marginMed0 { margin: 0; }
	.marginMedInline1 { margin-inline: var(--spacer-size-1); }
	.marginMedBlock1 { margin-block: var(--spacer-size-1); }
	.marginMedInline2 { margin-inline: var(--spacer-size-3); }
	.marginMedBlock2 { margin-block: var(--spacer-size-3); }
	.marginMedInline3 { margin-inline: var(--spacer-size-3); }
	.marginMedBlock3 { margin-block: var(--spacer-size-3); }
	.marginMedInline4 { margin-inline: var(--spacer-size-4); }
	.marginMedBlock4 { margin-block: var(--spacer-size-4); }
	.marginMedInline5 { margin-inline: var(--spacer-size-5); }
	.marginMedBlock5 { margin-block: var(--spacer-size-5); }
	.paddingMed0 { padding: 0; }
	.paddingMedInline1 { padding-inline: var(--spacer-size-1); }
	.paddingMedBlock1 { padding-block: var(--spacer-size-1); }
	.paddingMedInline2 { padding-inline: var(--spacer-size-3); }
	.paddingMedBlock2 { padding-block: var(--spacer-size-3); }
	.paddingMedInline3 { padding-inline: var(--spacer-size-3); }
	.paddingMedBlock3 { padding-block: var(--spacer-size-3); }
	.paddingMedInline4 { padding-inline: var(--spacer-size-4); }
	.paddingMedBlock4 { padding-block: var(--spacer-size-4); }
	.paddingMedInline5 { padding-inline: var(--spacer-size-5); }
	.paddingMedBlock5 { padding-block: var(--spacer-size-5); }
	.header .block { justify-content: space-between; padding: var(--spacer-size-2) var(--spacer-size-5) }
	.fixHeader .mainMenuIcon span { background-color: var(--color-primary-dark); }
	.fixHeader .mainMenu ul > li ul:before { content: none; }
	.mainMenu { display: block; width: auto; height: 6rem; padding: 1rem 0; }
	.mainMenu > ul {  margin: -7rem -2rem 0 0; padding-top: 8rem; position: absolute; min-width: calc(50% + 2rem); background: var(--white); border-left: 1px solid var(--color-primary-dark); opacity: 0; display: block; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
	.mainMenu > ul > li { white-space: nowrap; color: var(--color-primary-dark); padding: 0 var(--spacer-size-2);  }
	.mainMenu > ul > li > a { display: block; color: var(--color-primary-dark); padding: var(--spacer-size-1) 0; }
	.mainMenu > ul > li li { display: block; }
	.mainMenu ul > li ul { visibility: visible; background: transparent; border: none; margin: 0; position: relative; margin-bottom: var(--spacer-size-2); padding: 0; box-shadow: none; }
	.mainMenu ul > li ul a {  color: var(--color-primary-dark); padding:  var(--spacer-size-05) 0; }
	.mainMenuIcon { display: block; position: relative; width: 4rem; height: 4rem; -webkit-transform: rotate(0deg); transform: rotate(0deg); cursor: pointer; cursor: hand; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
	.mainMenuIcon span { position: absolute; height: 0.7rem; width: 4rem; background: var(--white); opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
	.mainMenuIcon:hover span { background: var(--color-secondary-mid); }
	.mainMenuIcon span:nth-child(1) { top: 0.5rem; }
	.mainMenuIcon span:nth-child(2),.mainMenuIcon span:nth-child(3) { top: 1.75rem; }
	.mainMenuIcon span:nth-child(4) { top: 3rem; }
	.mainMenu.expand ul { display: block; z-index: 1; opacity: 1; height: auto; -webkit-transition: var(--anim-fast); -moz-transition: var(--anim-fast); -o-transition: var(--anim-fast); transition: var(--anim-fast); }
	.mainMenu.expand .mainMenuIcon span { background: var(--color-primary-dark); }
	.mainMenu.expand .mainMenuIcon:hover span { background: var(--color-secondary-mid); }
	.mainMenu.expand .mainMenuIcon span:nth-child(1) { width: 0%; left: 50%; }
	.mainMenu.expand .mainMenuIcon span:nth-child(2) { -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 1.75rem; width: 3.5rem; }
	.mainMenu.expand .mainMenuIcon span:nth-child(3) { -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 1.75rem; width: 3.5rem; }
	.mainMenu.expand .mainMenuIcon span:nth-child(4) { width: 0%; left: 50%; }
	.switcher { left: 2rem; right: iniitial; }
	.canvas .extendLeft5 { margin-left: -3rem; max-width: 50%; }
	.fixedWidth .extendLeft30, .fixedWidth .extendLeft20, .fixedWidth .extendLeft10 { width: 100%; margin-left: 0; }
	.fixedWidth .extendRight30, .fixedWidth .extendRight20, .fixedWidth .extendRight10 { width: 100%; margin-right: 0; }
	.slideshow:not(.pages, .cards) { margin-bottom: 6rem; height: unset!important; }
	.slideshow:not(.pages, .cards) .ssMenuContainer { bottom: -5rem; }
	.slideshow:not(.pages, .cards) .navLeft { bottom: -4.9rem; left: 0; }
	.slideshow:not(.pages, .cards) .navRight { bottom: -4.9rem; right: 0; }
	.slideshow:not(.pages, .cards).shuffle .slideContainer { width: 40%; }
	.slideshow.cards { padding: 0 0 10rem 0; width: calc(var(--slide-show-container) - 4rem); }
	.slideshow.cards .navLeft { left: 0; top: initial;}
	.slideshow.cards .navRight { left: initial; top: initial; right: 0; }

	@keyframes rotateCardIns {
		0% { transform: translateZ(-1px); left: 25%; rotate: 0deg; }
		50% { transform: translateZ(1px); left: 50%; rotate: 5deg; }
		100% { transform: translateZ(1px); left: 25%; rotate: 0; }
	}
	@keyframes rotateCardOuts {
		0% { transform: translateZ(1px); left: 25%; rotate: -1deg; }
		50% { transform: translateZ(1px); left: 10%; rotate: -5deg;}
		51% { transform: translateZ(0px); left: 10%; rotate: -5deg; }
		100% { transform: translateZ(-1px); left: 25%; rotate: -5deg; }
	}
	.csContainer.slider .item .title:after, .csContainer.slider .item .title:before { height: 0.35rem; width: 1.5rem; }
	.csContainer.slider .item .title.featureSection::after { right: 0; }
	.csContainer.slider .item .title:before, .csContainer.slider .item .title.featureSection::before { right: 0.9rem; }
	.article .info .metaInfo { left: 14rem; }
	.articleList .block, .article .articleList .block { flex-basis: initial; flex-grow: initial; }
	.articleList img, .article .articleList img{ aspect-ratio: 2 / 1; min-height: 30rem; }
	.articleList a div, .article .articleList a div { padding: var(--spacer-size-2); aspect-ratio: auto; max-height: calc(100% - 6rem);}
	.inPageMenu { border-radius: var(--spacer-size-2); padding: var(--spacer-size-2); margin: -6rem -1rem 0 -1rem; width: calc(100% + 2rem); z-index: 100; }
	.inPageMenu li { margin-bottom: var(--spacer-size-1); }
	.inPageMenu li a { padding: 0 0 0 0; margin-right: 0; }	
	.ipmTrigger.anchor { scroll-margin-top: calc(var(--headerHeight) + 10rem + var(--inPageMenuHeight)); }
	.lightboxContainer.slide.lightboxShow .lightboxContent { width: calc(100% - 6rem); left: 6rem; }
	.lightboxContainer.slide .lightboxClose { left: -5rem }
	.filterContainer { grid-template-columns: repeat(auto-fill, minmax(calc(50% - var(--spacer-size-gap)), 1fr)); width: 100%; }
	.filterContainer .col12 { grid-column: 1 / span 2; }
}

/* Small screens column setup */
@media (min-width: 768px) and (max-width: 959px) {
	.block { width: 100%; }
	.colMed0 { display: none; }
	.row10 .colMed1 { flex: 1 0 calc(10% - var(--spacer-size-gap)); }
	.row10 .colMed2 { flex: 1 0 calc(20% - var(--spacer-size-gap)); }
	.row10 .colMed3 { flex: 1 0 calc(30% - var(--spacer-size-gap)); }
	.row10 .colMed4 { flex: 1 0 calc(40% - var(--spacer-size-gap)); }
	.row10 .colMed5 { flex: 1 0 calc(50% - var(--spacer-size-gap)); }
	.row10 .colMed6 { flex: 1 0 calc(60% - var(--spacer-size-gap)); }
	.row10 .colMed7 { flex: 1 0 calc(70% - var(--spacer-size-gap)); }
	.row10 .colMed8 { flex: 1 0 calc(80% - var(--spacer-size-gap)); }
	.row10 .colMed9 { flex: 1 0 calc(90% - var(--spacer-size-gap)); }
	.row10 .colMed10 { flex: 1 0 calc(100% - var(--spacer-size-gap)); }
	.row12 .colMed1 { flex: 1 0 calc(8.3333333% - var(--spacer-size-gap)); }
	.row12 .colMed2 { flex: 1 0 calc(16.6666667% - var(--spacer-size-gap)); }
	.row12 .colMed3 { flex: 1 0 calc(25% - var(--spacer-size-gap)); }
	.row12 .colMed4 { flex: 1 0 calc(33.3333333% - var(--spacer-size-gap)); }
	.row12 .colMed5 { flex: 1 0 calc(41.6666667% - var(--spacer-size-gap)); }
	.row12 .colMed6 { flex: 1 0 calc(50% - var(--spacer-size-gap)); }
	.row12 .colMed7 { flex: 1 0 calc(58.3333333% - var(--spacer-size-gap)); }
	.row12 .colMed8 { flex: 1 0 calc(66.6666667% - var(--spacer-size-gap)); }
	.row12 .colMed9 { flex: 1 0 calc(75% - var(--spacer-size-gap)); }
	.row12 .colMed10 { flex: 1 0 calc(83.3333333% - var(--spacer-size-gap)); }
	.row12 .colMed11 { flex: 1 0 calc(91.6666667% - var(--spacer-size-gap)); }
	.row12 .colMed12 { flex: 1 0 calc(100% - var(--spacer-size-gap)); }
}


/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.container.fixedWidth { padding: 0 var(--spacer-size-3); }
	.header > .block { padding: var(--spacer-size-2) var(--spacer-size-3); }
	.block { width: 100%; }
	.tablet { display: none; }
	.mobile { display: block; }
	.logo { left: 0; }
	.marginMed0 { margin: 0; }
	.marginSmallInline1 { margin-inline: var(--spacer-size-1); }
	.marginSmallBlock1 { margin-block: var(--spacer-size-1); }
	.marginSmallInline2 { margin-inline: var(--spacer-size-3); }
	.marginSmallBlock2 { margin-block: var(--spacer-size-3); }
	.marginSmallInline3 { margin-inline: var(--spacer-size-3); }
	.marginSmallBlock3 { margin-block: var(--spacer-size-3); }
	.marginSmallInline4 { margin-inline: var(--spacer-size-4); }
	.marginSmallBlock4 { margin-block: var(--spacer-size-4); }
	.marginSmallInline5 { margin-inline: var(--spacer-size-5); }
	.marginSmallBlock5 { margin-block: var(--spacer-size-5); }
	.paddingSmall0 { padding: 0; }
	.paddingSmallInline1 { padding-inline: var(--spacer-size-1); }
	.paddingSmallBlock1 { padding-block: var(--spacer-size-1); }
	.paddingSmallInline2 { padding-inline: var(--spacer-size-3); }
	.paddingSmallBlock2 { padding-block: var(--spacer-size-3); }
	.paddingSmallInline3 { padding-inline: var(--spacer-size-3); }
	.paddingSmallBlock3 { padding-block: var(--spacer-size-3); }
	.paddingSmallInline4 { padding-inline: var(--spacer-size-4); }
	.paddingSmallBlock4 { padding-block: var(--spacer-size-4); }
	.paddingSmallInline5 { padding-inline: var(--spacer-size-5); }
	.paddingSmallBlock5 { padding-block: var(--spacer-size-5); }
	.colSmall0 { display: none; }
	.row10 .colSmall1 { flex: 1 0 calc(10% - var(--spacer-size-gap)); }
	.row10 .colSmall2 { flex: 1 0 calc(20% - var(--spacer-size-gap)); }
	.row10 .colSmall3 { flex: 1 0 calc(30% - var(--spacer-size-gap)); }
	.row10 .colSmall4 { flex: 1 0 calc(40% - var(--spacer-size-gap)); }
	.row10 .colSmall5 { flex: 1 0 calc(50% - var(--spacer-size-gap)); }
	.row10 .colSmall6 { flex: 1 0 calc(60% - var(--spacer-size-gap)); }
	.row10 .colSmall7 { flex: 1 0 calc(70% - var(--spacer-size-gap)); }
	.row10 .colSmall8 { flex: 1 0 calc(80% - var(--spacer-size-gap)); }
	.row10 .colSmall9 { flex: 1 0 calc(90% - var(--spacer-size-gap)); }
	.row10 .colSmall10 { flex: 1 0 calc(100% - var(--spacer-size-gap)); }
	.row12 .colSmall1 { flex: 1 0 calc(8.3333333% - var(--spacer-size-gap)); }
	.row12 .colSmall2 { flex: 1 0 calc(16.6666667% - var(--spacer-size-gap)); }
	.row12 .colSmall3 { flex: 1 0 calc(25% - var(--spacer-size-gap)); }
	.row12 .colSmall4 { flex: 1 0 calc(33.3333333% - var(--spacer-size-gap)); }
	.row12 .colSmall5 { flex: 1 0 calc(41.6666667% - var(--spacer-size-gap)); }
	.row12 .colSmall6 { flex: 1 0 calc(50% - var(--spacer-size-gap)); }
	.row12 .colSmall7 { flex: 1 0 calc(58.3333333% - var(--spacer-size-gap)); }
	.row12 .colSmall8 { flex: 1 0 calc(66.6666667% - var(--spacer-size-gap)); }
	.row12 .colSmall9 { flex: 1 0 calc(75% - var(--spacer-size-gap)); }
	.row12 .colSmall10 { flex: 1 0 calc(83.3333333% - var(--spacer-size-gap)); }
	.row12 .colSmall11 { flex: 1 0 calc(91.6666667% - var(--spacer-size-gap)); }
	.row12 .colSmall12 { flex: 1 0 calc(100% - var(--spacer-size-gap)); }
	.box .extendLeft10, .box .extendLeft20, .box .extendLeft30 { width: 100%; margin-left: 0; }
	.box .extendRight10, .box .extendRight20, .box .extendRight30 {  width: 100%; margin-right: 0; }
	.canvas { margin-bottom: 5rem; }
	.canvas .extendLeft5 { margin-left: 2rem; max-width: calc(100% - 4rem); }
	.bg.parallax { background-size: auto; background-repeat: no-repeat; }
	.selector { justify-content: flex-start; flex-wrap: wrap; flex-direction: column}
	.selector label { width: 70%; }
	.selector .filter { width: calc(100% + 2rem); }
	.resetFilter { bottom: 2rem; }
	.filterContainer { grid-template-columns: repeat(auto-fill, minmax(calc(100% - var(--spacer-size-gap)), 1fr)); width: 100%; }
	.filterContainer .col12 { grid-column: 1 / span 1; }
	.card { border-radius: var(--spacer-size-2); }
	.slideshow.cards .item { flex: 0 0 calc(var(--slide-show-container) - 6rem); border-radius: var(--spacer-size-2); }
	.slideshow.cards .item.active::before { border: 2px solid transparent; }
	.slideshow.pages .item { flex: 0 0 calc(100% - 10rem); }
	.slideshow.pages .item:first-child { margin-left: 5rem; }
	.slideshow.pages .navLeft { left: 0.5rem; }
	.slideshow.pages .navRight { right: 0.5rem; }
	.slideshow.shuffle .slideContainer { width: 80%; }
	.slideshow.shuffle .navLeft { left: -2rem; }
	.slideshow.shuffle .navRight { right: -2rem; }
	@keyframes rotateCardIns {
		0% { transform: translateZ(-1px); left: 20%; rotate: 0deg; }
		50% { transform: translateZ(1px); left: 45%; rotate: 5deg; }
		100% { transform: translateZ(1px); left: 20%; rotate: 0; }
	}
	@keyframes rotateCardOuts {
		0% { transform: translateZ(1px); left: 20%; rotate: -1deg; }
		50% { transform: translateZ(1px); left: 5%; rotate: -5deg;}
		51% { transform: translateZ(0px); left: 5%; rotate: -5deg; }
		100% { transform: translateZ(-1px); left: 20%; rotate: -5deg; }
	}
	.logoSlider { width: calc(100% + 4rem); margin: 0 -3rem; }
	.gallery.grid, .gallery.square { grid-template-columns: repeat(auto-fill, minmax(calc(50% - 1rem), 1fr)); }
	.gallery.grid a:nth-child(6n+1), .gallary.grid a.halfGrid { grid-row: span 1; grid-column: span 1; }
}


/** animation 1**/
#animation1 .canvas { height: 0px; padding-top: 50%; } /** Canvas = 1000 * 500 -> 50% **/
#animation1 .element1 { position: absolute; bottom: 35%; left: 7.5%; height: 20%; width: 4%; opacity: 0; }
#animation1 .element2 { position: absolute; bottom: 35%; left: 12.5%; height: 10%; width: 4%; opacity: 0; }
#animation1 .element3 { position: absolute; bottom: 35%; left: 17.5%; height: 20%; width: 4%; opacity: 0; }
#animation1 .element4 { position: absolute; bottom: 35%; left: 22.5%; height: 25%; width: 4%; opacity: 0; }
#animation1 .element5, #animation1 .element6, #animation1 .element7 { position: absolute; bottom: 35%; left: 58.75%; width: 30%; height: 26.5%; overflow: hidden; }
#animation1 .element5 svg, #animation1 .element6 svg, #animation1 .element7 svg { position: absolute; bottom: 0%; transform: rotate(180deg); opacity: 0; }
.animationInView#animation1 .element1 { animation-name: animation1el1; animation-duration: 0.5s; animation-delay: 0.5s; animation-fill-mode: forwards; }
@keyframes animation1el1 {
	0%   { opacity: 0; height: 0; width: 4%; }
	100% { opacity: 1; height: 20%; width: 4%; }
}
.animationInView#animation1 .element2 { animation-name: animation1el2; animation-duration: 0.5s; animation-delay: 0.75s; animation-fill-mode: forwards; }
@keyframes animation1el2 {
	0%   { opacity: 0; height: 0; width: 4%; }
	100% { opacity: 1; height: 10%;  width: 4%;}
}
.animationInView#animation1 .element3 { animation-name: animation1el3; animation-duration: 0.5s; animation-delay: 1s; animation-fill-mode: forwards; }
@keyframes animation1el3 {
	0%   { opacity: 0; height: 0; width: 4%; }
	100% { opacity: 1; height: 20%; width: 4%; }
}
.animationInView#animation1 .element4 { animation-name: animation1el4; animation-duration: 0.5s; animation-delay: 1.25s; animation-fill-mode: forwards; }
@keyframes animation1el4 {
	0%   { opacity: 0; height: 0; width: 4%; }
	100% { opacity: 1; height: 25%; width: 4%; }
}
.animationInView#animation1 .element5 svg { animation-name: animation1el5; animation-duration: 0.75s; animation-delay: 0.5s; animation-timing-function: linear; transform-origin: 50% 100%; animation-fill-mode: forwards; }
@keyframes animation1el5 {
	0%   { transform: rotate(180deg); opacity: 0; }
	50%   { transform: rotate(90deg); opacity: 1; }
	100% { transform: rotate(0deg); opacity: 1; }
}
.animationInView#animation1 .element6 svg { animation-name: animation1el6; animation-duration: 0.75s; animation-delay: 0.7s; animation-timing-function: linear; transform-origin: 50% 100%; animation-fill-mode: forwards; }
@keyframes animation1el6 {
	0%   { transform: rotate(180deg); opacity: 1; }
	100% { transform: rotate(25deg); opacity: 1; }
}
.animationInView#animation1 .element7 svg { animation-name: animation1el7; animation-duration: 0.75s; animation-delay: 0.9s; animation-timing-function: linear; transform-origin: 50% 100%; animation-fill-mode: forwards; }
@keyframes animation1el7 {
	0%   { transform: rotate(180deg); opacity: 1; }
	100% { transform: rotate(60deg); opacity: 1; }
}