@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap');


/* Color definitions */
:root{
	--color-stone: #3B485E;
	--color-blackish: #1C1B1F;
	--color-sb-blu: #0070AF;
	--color-blu-medium: #13619D;
	--color-blu-dark: #035384;
	--color-bright-blu: #F4FAFF;
	--color-strokegray: #D9D9D9;
	--color-darkgrey: #70777A;
	--color-lightgrey: #C4C4C4;
	--color-errorred: #AC1619;
	--color-errorred-bg: #FFD6D6;	
	
	--font-garamond: 'EB Garamond';
	--font-red-hat: 'Red Hat Text';

	--text-blue: #006BAC;
	
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
header, footer,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
    }
	
html, body {
	height: 100%;
}

table, caption, tbody, tfoot, thead, tr, th, td     {
    vertical-align : top;
    }

:focus {
	outline: 0;
    }
    
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/**
 * For IE 6/7 (trigger hasLayout)
 */
.cf {
    *zoom:1;
}
body {
	line-height: 1;
	color: #000;
	overflow-y: scroll;
	background-color: white;
	font-family: var(--font-red-hat), Arial, verdana;
		
	color: var(--color-blackish);

	/* Body Medium */
	font-size: 27px;
	font-style: normal;
	font-weight: 400;
	line-height: 38px; 
	
}
body.hidden-scroll {
	overflow-y: hidden;
}
ol, ul {
	list-style: none;
    }

table {
	border-collapse: collapse;
	border-spacing: 0;
    }

td  {
    vertical-align : top;
    }

caption, th, td {
	text-align: left;
	font-weight: normal;
    }

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
    }

blockquote, q {
	quotes: "" "";
    }

strong {	
	font-weight:bold;
}
a{
    text-decoration: none;
	color: inherit;
}

a:hover{
    text-decoration: underline;
}


hr {
	width: 100%;
	height: 1px;
	background-color: #abb0bc;
	border: none;
	margin: 50px 0 30px;
}



h1,
.h1 {
	font-family: var(--font-red-hat);
	font-size: 23px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: normal;
	
	color: var(--text-blue);
	text-align: center;
	margin-bottom: 34px;
}

h2,
.h2 {
	font-family: var(--font-red-hat);
	font-size: 20px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;

	color: var(--text-blue);
	text-align: center;
	margin-bottom: 34px;
}

h3,
.h3 {
	font-family: var(--font-red-hat);
	font-size: 23px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 38px;
	letter-spacing: normal;

	color: var(--color-sb-blu);	
}
/* 
h4,
.h4 {
	font-family: var(--font-red-hat);
	font-size: 20px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;

	color: var(--text-blue);
	text-align: center;

	margin-bottom: 34px;
} */


.blue-button {
	border-radius: 4px;
	background-color: var(--text-blue);
	
	position: relative;
	display: flex;
	padding: 10px 32px 10px 38px;
	width: fit-content;	
	margin: 22px auto;

	color: #FFF;
	text-align: center;
	font-family: var(--font-red-hat);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; 
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;

	transition: opacity .3s ease;
}

.blue-button:hover {
	text-decoration: none;
	opacity: 0.8;
}
.blue-button::after {
	content: '';
	position: relative;
	background-image: url('/includes/mail-white.svg');
	background-position: center right;
	background-size: auto 24px;
	background-repeat: no-repeat;
	
	width: 30px;
	height: 20px;
}


div.wrapper{
	margin: 0 auto;
    position: relative;
	width: 100%;
	height: auto;
	padding-top: 100px;
}

div.wrapper div.container{
	height: auto !important;
    min-height: 100%;	
	width: 100%;

}

div.container header{	
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	
	background-color: rgba(255, 255, 255, 0.9);
	transition: all .1s ease;
	
	
}

div.container header.sticky {
	
}

div.container header .wrap {	
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	max-width: 1120px;
	height: auto;
	width: 100%;
	margin: auto;
	padding: 52px 20px 16px;
}

header a.mobileContact {
	display:none;
}

div.container header div.logo {	
	display: flex;
	align-content: center;
	opacity: 1;
	
}

/* body.home div.container header div.logo {	
	opacity: 0;
	transition: all .1s ease;
}
body.home div.container header.sticky div.logo {
	opacity: 1;
} */

div.container header div.logo a {		
	display: flex;
	align-content: center;
	
}

div.container header div.logo a img{
	width: 243px;
	height: auto;
	
}

header a.menuOpenFlyout {
	display: none;
}

header ul.nav-menu{
	display: flex;
	flex-direction: row;
	

	
}
header ul.nav-menu li{
	display: flex;	
	align-items: center;
	padding: 5px 15px;	
}
header ul.nav-menu li:last-child{
	margin-right: 0;
}
header ul.nav-menu li a{
	text-decoration: none;
	color: var(--color-darkgrey);

	text-align: center;	
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 1;

}

header ul.nav-menu li.active > a{
	color: #000;
	
	text-align: center;	
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 1; /* 285.714% */
}

header ul.nav-menu li:not(.active) > a:hover {
	text-decoration: underline;
	color: var(--color-sb-blu);
}

header ul.nav-menu > li ul {
	display: none;
	position: absolute;
	padding: 10px 0px;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: #000000;
	background-color:#ffffff;
	text-align: left;
	z-index:5;
	margin-top:15px;
} 

header ul.nav-menu > li ul li {
	display: block;
	color: black; 
	padding:2px 18px 2px 17px;
}

header ul.nav-menu > li ul li a {
	display: block;
	color: inherit;
	text-decoration: inherit;
	padding: 7px 0px;
}

header ul.nav-menu > li:hover ul {
    display: block; 
}


header ul.nav-menu #dd-links {	
	height: auto;
	position: relative;
	width: 58px;
	display: flex;
	align-items: center;
	padding: 5px;
	margin-left: 45px;
	cursor: pointer;
	justify-content: space-between;
	
}

header ul.nav-menu #dd-links::after {
	content: '';
	position: relative;
	background-image: url('/includes/arrow-down.svg');
	background-position: center right;
	background-size: auto 24px;
	background-repeat: no-repeat;
	
	width: 30px;
	height: 15px;
}


header ul.nav-menu #dd-links:hover::after {
	background-image: url('/includes/arrow-up.svg');
	background-position: center right;
	background-size: auto 24px;
	background-repeat: no-repeat;
}

header ul.nav-menu #dd-links ul#dd {
	width: 0;
	height: 0;
	display: flex;
	flex-direction: column;
	padding: 5px;
	margin: 0;
	color: black;
	text-align: right;
	box-sizing: border-box;
	border-radius: 4px;
	box-shadow: rgba(0,0,0,0.3) 0px 1px 2px 2px;
	background-color: var(--color-sb-blu);
	border-color: var(--color-sb-blu);
	position: absolute;
	right: 0;
	top: 28px;
	opacity: 0;
	z-index: -1;
	visibility: hidden;
		
	transition: opacity .3s ease;
}

header ul.nav-menu #dd-links ul#dd.shown {
	opacity: 1;
	z-index: 10;
	width: 215px;
	height: auto;
	visibility: visible;
}
	/* --color-sb-blu: #0070AF;
	--color-blu-medium: #13619D;
	--color-blu-dark: #035384; */


header ul.nav-menu #dd-links > span {
	font-size: 18px;
	line-height: 1;

	
}



header ul.nav-menu #dd-links ul#dd li {	
	display: flex;
	height: 36px;
	padding: 2px 10px;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	
	border-radius: 4px;
	
	background-color: var(--color-sb-blu);
	
	transition-property: background-color; 
	transition-duration: 0.4s; 
	transition-timing-function: ease;
}


header ul.nav-menu #dd-links ul#dd li:hover {
	background-color: var(--color-blu-medium);
}


header ul.nav-menu #dd-links ul#dd li a {	
	color: #FFF;
	text-align: right;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 25px; /* 166.667% */
	
	text-decoration: none;
}



.content_wrapper {    
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0px 50px;
	
	font-family: var(--font-garamond), Arial, verdana;
	
}
	
.base-content {
	width: 100%;
	max-width: 850px;
	margin: auto;
	padding: 0 68px;
	
	font-family: var(--font-garamond);
	font-size: 27px;
	font-style: normal;
	font-weight: 600;
	line-height: 38px; /* 140.741% */
}	

.content_wrapper b,
.content_wrapper strong {	
	font-family: var(--font-red-hat);
	font-size: 23px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.65;
	letter-spacing: normal;	

	display: inline-block;
}

.content_wrapper a {	
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-color: var(--color-sb-blu);
	text-decoration-thickness: 8%;
	text-underline-offset: 18%; 
}

.content_wrapper a:hover {	
	text-decoration: none;
}

.content_wrapper div.big-logo {	
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	
	margin-bottom: 50px;	
}
.content_wrapper div.big-logo .wrap {	
	display: flex;
	align-content: center;
	justify-content: center;
	width: 100%;
}

.content_wrapper div.big-logo .wrap a {	
	width: 100%;
	display: flex;
	justify-content: center;
}

.content_wrapper div.big-logo .wrap img {
	width: auto;
	max-width: 90%;
}

	
.content_wrapper div.big-logo .lead {		
	color: #000;
	text-align: center;

	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	
}	

.content_wrapper ul li {
	margin:0; 
	padding:0; 
	position: relative;
	padding-left: 28px;

}

.content_wrapper ul li:before { 
	content:""; 
	position: absolute;
	left: 0;
	top: 20px;
	color: #13619D; 
		
	width: 18px;
	height: 15px;
	display: block;

	background-image: url('/includes/Bullet_for_list.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;

}
.content_wrapper ol {
	margin:0; 
	padding:0; 
	position: relative;
	padding-left: 28px;
}

.content_wrapper ol li {
	list-style-type: decimal;
}
.content_wrapper ol li::marker {
	color: #13619D; 
}

	
div.footer{
	width: 100%;
	padding: 46px 0;
    display: flex;
	background-color: var(--color-blackish);
	
	color: #FFF;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 40px; /* 235.294% */
}
div.footer .wrap {
	max-width: 1000px;
	width: 100%;
	margin: auto;
	padding: 0 20px;
	text-align: left;
	display: flex;
	justify-content: space-between;
}

div.footer .wrap .col-1 {
	width: 75%;
	padding-right: 60px;
	max-width: 420px;
	line-height: 1.5;
	
	display: flex;
	flex-direction: column;	
	justify-content: space-between;	
}
div.footer .wrap .col-2 {
	width: auto;
	display: flex;
	flex-direction: column;	
	justify-content: space-between;	
}
div.footer .wrap .col-2 .link-list {
	display: flex;
	flex-direction: column;	
	align-items: flex-start;	
}
div.footer .wrap .col-2 .link-list a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
div.footer .wrap .col-2 .link-list a:hover {
	text-decoration: none;
}

div.footer div.h4 {
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 10px;
}

div.footer a {
	text-decoration: none;
	color: white;
	margin: 0;	
	line-height: 1.8;
}
div.footer a.blue-button {
	border-radius: 4px;
	background-color: var(--text-blue);
	position: relative;
	display: flex;
	justify-content: center;
	padding: 10px 32px 10px 38px;
	width: 100%;
	margin: 0;
	color: #FFF;
	text-align: center;
	font-family: var(--font-red-hat);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .3s ease;
}
div.footer a.blue-button::after {
	content: '';
	position: relative;
	background-image: none;	
}
	



div.image-element{
	padding:15px 15px 1px 15px;
	background-color:white;
	margin-bottom:15px;
}

div.download-link{
	padding:0px;
	margin-bottom:15px;
}

div.image-element h4{
	background-image: url("black_line.png");
    background-position: center center;
    background-repeat: repeat-x;
    margin-left: -15px;
    margin-right: -15px;
    text-align: center;
	font-weight:800;
	line-height:18px;
	font-size:14px;
}

div.image-element h4 span{
	background-color:white;
	padding-left:5px;
	padding-right:5px;
}

div.image-element img{
	width: 100%;
	height: auto;
	margin: 0px 0 10px 0;
}



.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 55px;
  height: 55px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  -ms-transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 30px;
  left: 5px;
  right: 5px;
  height: 7px;
  background: #a8cbb7;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: #a8cbb7;
  content: "";
}

.c-hamburger span::before {
  top: -15px;
}

.c-hamburger span::after {
  bottom: -15px;
}

.c-hamburger--htx {
  background-color: transparent;
}

.c-hamburger--htx span {
  transition: background 0s 0.3s;
  -webkit-transition: background 0s 0.3s;
  -moz-transition: background 0s 0.3s;
  -o-transition: background 0s 0.3s;
  -ms-transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  -webkit-transition-duration: 0.3s, 0.3s;
  -moz-transition-duration: 0.3s, 0.3s;
  -o-transition-duration: 0.3s, 0.3s;
  -ms-transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
  -webkit-transition-delay: 0.3s, 0s;
  -moz-transition-delay: 0.3s, 0s;
  -o-transition-delay: 0.3s, 0s;
  -ms-transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
  -webkit-transition-property: top, transform;
  -moz-transition-property: top, transform;
  -o-transition-property: top, transform;
  -ms-transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
  -webkit-transition-property: bottom, transform;
  -moz-transition-property: bottom, transform;
  -o-transition-property: bottom, transform;
  -ms-transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: transparent;
  
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
  -webkit-transition-delay: 0s, 0.3s;
  -moz-transition-delay: 0s, 0.3s;
  -o-transition-delay: 0s, 0.3s;
  -ms-transition-delay: 0s, 0.3s;
  background-color:#000000;
}
div.o-grid__item{
	display: none;
}
ul.nav-menu-mobile,
p.nav-menu-mobile-footer{
	display: none;
}







/* Module Contact form */

div.contact-form {
	width: 100%;
	max-width: 790px;
	height: auto;
	padding: 50px 20px;

	display: flex;
	justify-content: center;
	margin: auto;	
}

div.contact-form div.contactform_div {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

div.contact-form .frc-captcha{	
	margin: auto;
	width: 300px !important;
	height: 40px !important;
	overflow: visible !important;
}


div.contact-form div.contactform_div #form_content { font-size: 20px; line-height: 1.2;}

div.contact-form div.contactform_div #form_content h4 {
	margin-bottom: 90px;
}


div.contact-form div.contactform_div input[type=text],
div.contact-form div.contactform_div textarea {	
	display: flex;
	width: 100%;
	height: 50px;
	padding: 6px 5px;
	color: var(--color-stone);
	
	font-family: var(--font-red-hat);
	font-size: 20px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 22px;
	letter-spacing: normal;
	color: var(--text-blue);
	
	border: none;
	border-bottom: 1px solid #ABB0BC;
	background: rgba(255, 255, 255, 0.00);
	box-sizing: border-box;
	
	
	
}
div.contact-form div.contactform_div textarea {	
	padding-top: 14px;
}


div.contact-form div.contactform_div input[type=text]:focus,
div.contact-form div.contactform_div textarea:focus {
	outline: none;
	border-bottom: 2px solid var(--color-sb-blu);
}

div.contact-form div.contactform_div div.input {
	position: relative;
	height: auto;
	margin-top: 30px;
	min-height: 50px;
}


/* Hide Safari's autofill button */
div.contact-form div.contactform_div input[type=text]::-webkit-contacts-auto-fill-button,
div.contact-form div.contactform_div textarea::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
  }


div.contact-form div.contactform_div input[type=text].error,
div.contact-form div.contactform_div textarea.error {
	border-bottom: 2px solid var(--color-errorred);
	background: linear-gradient(0deg, #FFD6D6 0%, #FFD6D6 100%);
}

div.contact-form div.contactform_div input[type=text]::placeholder,
div.contact-form div.contactform_div textarea::placeholder {
	color: transparent;
	font-family: var(--font-red-hat);
	font-size: 19px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px; /* 115.789% */
	opacity: 1;

}

div.contact-form div.contactform_div .input label {
	position: absolute;
	top: 0;
	left: 5px;

	pointer-events: none;
	transform-origin: left center;
	transition: transform 250ms;

	font-family: var(--font-red-hat);
	color: #3B485E;
	font-size: 19px;
	font-style: normal;
	font-weight: 400;
	line-height: 50px; 
}

div.contact-form div.contactform_div input[type=text]:focus + label,
div.contact-form div.contactform_div input[type=text]:not(:placeholder-shown) + label,
div.contact-form div.contactform_div textarea:focus + label,
div.contact-form div.contactform_div textarea:not(:placeholder-shown) + label  {
	transform: translateY(-60%) scale(0.85);
	color: var(--color-darkgrey);	
}



div.contact-form div.contactform_div .submit {
	text-align: center;
	width: 100%;
	height: auto;
	display: block;
	margin: 36px auto 10px;
	
}

div.contact-form div.contactform_div .submit input[type=submit],
div.contact-form div.contactform_div .submit button {	
	height: 40px;	
	width: 300px;
	border: none;
	cursor: pointer;
	padding: 10px 66px 10px 34px;
	
	border-radius: 4px;
	background-color: var(--color-sb-blu);

	color: #FFF;
	text-align: center;
	font-family: var(--font-red-hat);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; 
	letter-spacing: 1px;
	text-transform: uppercase;	
	
	position: relative;
	transition: opacity .3s ease;
}

div.contact-form div.contactform_div .submit input[type=submit]:hover,
div.contact-form div.contactform_div .submit button:hover {
	text-decoration: none;
	opacity: 0.8;
}


div.contact-form div.contactform_div .submit button::after {
	content: '';
	position: absolute;
	padding: 0 0 0 10px;
	background-image: url('/includes/send.svg');
	background-position: center right;
	background-size: auto 20px;
	background-repeat: no-repeat;
	
	width: 22px;
	height: 22px;
	display: inline-block;
}

div.contact-form div.contactform_div  label.required-label { 
	font-family: var(--font-red-hat);
	font-size: 18px;
	font-style: normal;	
	line-height: 25px; 
	margin: 30px 0;
	display: block;
}




div.contact-form div.contactform_div  label.required-label b { 	
	font-size: 18px;
}



/* div.contact-form div.contactform_div input::-webkit-input-placeholder{color: #000000; opacity: 0.5;}
div.contact-form div.contactform_div input::-moz-placeholder{color: #000000; opacity: 0.5;}
div.contact-form div.contactform_div input:-ms-input-placeholder{color: #000000; opacity: 0.5;}
div.contact-form div.contactform_div input:-moz-placeholder{color: #000000; opacity: 0.5;}
div.contact-form div.contactform_div input::placeholder{color: #000000; opacity: 0.5;}


div.contact-form div.contactform_div input.error_input::-webkit-input-placeholder, div.contact-form div.contactform_div textarea.error_input::-webkit-input-placeholder{color: red;}
div.contact-form div.contactform_div input.error_input::-moz-placeholder, div.contact-form div.contactform_div textarea.error_input::-moz-placeholder {color: red;}
div.contact-form div.contactform_div input.error_input:-ms-input-placeholder, div.contact-form div.contactform_div textarea.error_input:-ms-input-placeholder {color: red;}
div.contact-form div.contactform_div input.error_input:-moz-placeholder, div.contact-form div.contactform_div textarea.error_input:-moz-placeholder{color: red;}
div.contact-form div.contactform_div input.error_input::placeholder, div.contact-form div.contactform_div textarea.error_input::placeholder{color: red;}

div.contact-form div.contactform_div div.input.error input::-webkit-input-placeholder{color: red;}
div.contact-form div.contactform_div div.input.error input::-moz-placeholder, div.contact-form div.contactform_div textarea.error_input::-moz-placeholder {color: red;}
div.contact-form div.contactform_div div.input.error input:-ms-input-placeholder, div.contact-form div.contactform_div textarea.error_input:-ms-input-placeholder {color: red;}
div.contact-form div.contactform_div div.input.error input:-moz-placeholder, div.contact-form div.contactform_div textarea.error_input:-moz-placeholder{color: red;}
div.contact-form div.contactform_div div.input.error input::placeholder, div.contact-form div.contactform_div textarea.error_input::placeholder{color: red;} */




div.contact-form .thankyou-message {
	display: none;	
}






/* Flip card */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card,
.columns-quotes .box {
	background-color: transparent;  
	max-width: 750px;
	width: 100%;
	height: auto;
	
	margin: 0 auto 30px;
	/* border: solid red 1px; */
  /* perspective: 1000px;  *//* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner,
.flip-quote-inner {
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 1.5s;
	transform-style: preserve-3d;
	display: grid;
	
}


/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner,
.flip-quote:hover .flip-quote-inner {
	transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back,
.flip-quote-front, .flip-quote-back {
	
	width: 100%;
	height: 100%;
	padding-bottom: 90px;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

grid-row: 1/2;
grid-column: 1/2;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing)*/
.flip-card-front,
.flip-quote-front {
	background-color: #ffffff;
	color: var(--color-sb-blu);

} 
.flip-card-back,
.flip-quote-back {
	background-color: #ffffff;
	color: var(--color-darkgrey);
	transform: rotateY(180deg);
} 


/* Style the back side */
.flip-card.content-mode .flip-card-front,
.flip-quote .flip-quote-front {
	color: var(--color-sb-blu);
	background-color: var(--color-bright-blu);
	
} 

.flip-card.content-mode .flip-card-front,
.flip-card.content-mode .flip-card-back {
	padding-top: 40px;
}

.flip-card.content-mode .flip-card-back,
.flip-quote .flip-quote-back {
	color: white;
	background-color: var(--color-sb-blu);
	transform: rotateY(180deg);
} 


.flip-card-front::after,
.flip-card-back::after,
.flip-quote-front::after,
.flip-quote-back::after {
	content: '';
	width: 40px;
	height: 40px;
	margin: 0 auto;
	position: absolute;
	bottom: 35px;
	left: 0;
	right: 0;
	display: block;
	
	background-image: url('/includes/rollover.png');
	background-position: center;
	background-size: 100% auto;
	background-repeat: no-repeat;

}

.longtext {
  vertical-align: middle;
}


.flip-card H2,
.flip-quote H2 {
	/* justify-self: center; */  
	font-family: var(--font-garamond), Arial, verdana;
	font-size: 33px;
	font-weight: 600;
	line-height: 43px;
	text-align: center; 
	margin-bottom: 15px;

}

.flip-card.header-mode H2 {
	animation-name: my-pumpen;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(linear(2, 0.75 25%, 1));
	animation-direction: alternate;

	

	font-size: 52px;
	font-style: normal;
	font-weight: 600;
	line-height: 66px; 

}


.flip-card H3,
.flip-quote H3 {
	/* justify-self: center; */
	font-optical-sizing: auto;
	font-weight: 500;

	text-align: center;
	animation: none;
	color: var(--color-blackish);


	text-align: center;
	font-family: var(--font-red-hat), Arial, verdana;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;

}
  
.flip-card.content-mode .flip-card-back h3,
.flip-quote .flip-quote-back h3 {
	color: white;
}


.flip-card .flip-card-back h2 {
	color: white;
}
.flip-card.header-mode .flip-card-back h2 {
	color: var(--color-darkgrey);
}


@keyframes my-pumpen {
  from { font-weight: 400; opacity: 100%;}
  to { font-weight: 600; opacity: 100%;}
  /*font-weight: <weight>*/
}


/* Pulse Header module */


.pulse-header {
	background-color: transparent;  
	max-width: 750px;
	width: 100%;
	height: auto;
	
	margin: 0 auto 30px;
	/* border: solid red 1px; */
  /* perspective: 1000px;  *//* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.pulse-header .wrap {
	width: 100%;
	height: 100%;
	text-align: center;	
	padding-bottom: 15px;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	background-color: #ffffff;
	color: var(--color-sb-blu);
}



.pulse-header.content-mode .wrap {
	padding-top: 40px;
}



.pulse-header H2 {
	/* justify-self: center; */  
	font-family: var(--font-garamond), Arial, verdana;
	font-size: 33px;
	font-weight: 600;
	line-height: 43px;
	text-align: center; 
	margin-bottom: 15px;

}

.pulse-header.header-mode H2 {
	animation-name: my-pumpen;
	animation-duration: 6s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(linear(2, 0.75 25%, 1));
	animation-direction: normal;
	animation-fill-mode:forwards;
	

	font-size: 52px;
	font-style: normal;
	font-weight: 600;
	line-height: 66px; 

}


.pulse-header H3 {
	/* justify-self: center; */
	font-optical-sizing: auto;
	font-weight: 500;

	text-align: center;
	animation: none;
	color: var(--color-blackish);


	text-align: center;
	font-family: var(--font-red-hat), Arial, verdana;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;

}
  





/*** Module Image ***/
.image {
	width: 100%;
	max-width: 980px;
	height: auto;
	margin: 0 auto 80px;
	display: flex;
	justify-content: center;
}
.image picture {
	width: 100%;	
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.image img {
	width: 90%;		
	height: auto;

	display: block;
	transition: all .7s ease; 
}

.image img:hover,
.image.zoom-in img {
	width: 100%;
}





/*** Module Textarea ***/
.textarea {
	width: 100%;
	max-width: 790px;
	height: auto;
	margin: 0 auto 20px;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
}

.textarea.wide {
	max-width: 1140px;
}
.textarea p {
	margin-bottom: 20px;
}
.textarea p + ul {
	margin-top: -20px;
}



/*** Module The 3 columns links ***/
.columns-links {
	width: 100%;
	max-width: 1140px;
	height: auto;
	padding: 50px 20px;

	display: flex;
	justify-content: center;
	margin: auto;
}

.columns-links .box {
	position: relative;
	cursor: pointer;

	width: 345px;
	height: auto;
	
	margin: 11px;
	padding: 23px 23px 90px 23px;

	border-radius: 7px;
	border-top: 1px solid #D8E4ED;
	border-right: 1px solid #D8E4ED;
	background: #FFF;
	text-decoration: none;

	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	
	transform: scale(1);

	transition: all .2s ease;

}

.columns-links .box:hover {
	background-color: var(--color-sb-blu);

	border-radius: 7px;
	border-top: 1px solid var(--color-sb-blu);
	border-right: 1px solid var(--color-sb-blu);

	transform: scale(1.03);

}
.columns-links .box:hover h3,
.columns-links .box:hover > p,
.columns-links .box:hover > a,
.columns-links .box:hover .box-link {
	color: #ffffff;
	
}


.columns-links .box h3 {
	margin-bottom: 12px;
}

.columns-links .box > p {
	font-family: var(--font-red-hat), Arial, verdana;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.columns-links .box .box-link {
	font-family: var(--font-red-hat), Arial, verdana;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-color: var(--text-blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	text-underline-position: from-font;

	position: absolute;
	bottom: 40px;
	
}

.columns-links .box:hover .box-link {
	text-decoration-color: #ffffff;
	text-decoration-thickness: 1px;
}




/*** Module The 3 columns quotes - based on flip card - content mode ***/
.columns-quotes {
	width: 100%;
	max-width: 1140px;
	height: auto;
	padding: 0 20px;

	display: flex;
	justify-content: center;
	margin: auto;
}

.columns-quotes .box {
	position: relative;
	cursor: pointer;

	width: 345px;
	height: auto;
	
	margin: 11px;
	
}

.columns-quotes .box h2 {
	font-size: 27px;
	font-style: normal;
	font-weight: 600;
	line-height: 35px; /* 129.63% */
	letter-spacing: 0.27px;
}
.columns-quotes .box .flip-quote-back h2 {
	color: white;
}

.columns-quotes .box .flip-quote-back h3 {
	color: black;
}


.columns-quotes .box .flip-quote-front,
.columns-quotes .box .flip-quote-back {
	padding: 50px 25px 90px;
}

.columns-quotes + div:not(.columns-quotes) {
	margin-top: 75px;
}


/*** Module Team ***/
.team {
	width: 100%;
	max-width: 750px;
	height: auto;
	margin: 30px auto;
	padding: 40px 20px 20px;

	display: flex;
	flex-direction: column;

	border-top: 1px solid #abb0bc;

}


.team .title {
	margin-bottom: 20px;
}

.team .image-wrap {
	width: 184px;
	height: 216px;
	display: flex;
		
	margin: 40px auto;
	padding: 12px;
	position: relative;
	cursor: pointer;

	border-radius: 2px;
	border: 2px solid #000;
	background: #FFF;
	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
	transform: rotate(4deg);
}
.team:nth-child(even) .image-wrap {
	transform: rotate(-4deg);
}

.team .image-wrap img,
.team .image-wrap .front {
	position: relative;
	width: 100%;
	z-index: 0; 

}
.team .image-wrap .back {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 12px;
	right: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	z-index: 1; 
	display: none;

}
.team .image-wrap:hover .front,
.team .image-wrap.active .front {	
	display: none;
}

.team .image-wrap:hover .back,
.team .image-wrap.active .back {	
	display: block;
}


.team .video-wrap {
	width: 184px;
	height: auto;
	display: flex;
		
	margin: 0 auto;	
	position: relative;
}
.team .video-wrap .vimeo {

	color: #000;
	text-align: center;

	/* Lable_Medium Links */
	font-family: var(--font-red-hat);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;

}
.team .video-wrap .vimeo .wrap::after {
	content: '';
	position: relative;
	background-image: url('/includes/video.svg');
	background-position: center;
	background-size: auto 25px;
	background-repeat: no-repeat;

	width: 100%;
	height: 25px;
	display: block;
	
	margin: 15px 0 0;

}


/*** Module Newsletter ***/
.newsletter-wrapper {
	width: 100%;
	max-width: 750px;
	height: auto;
	margin: 30px auto 80px;
	padding-top: 40px;

	display: flex;
	flex-direction: column;
}
.newsletter-wrapper form {
	max-width: 100%;
}
.newsletter-wrapper .frc-captcha{
	margin-right: 72px;
	margin-left: auto;
	margin-top: 15px;
	width: 280px !important;
	height: 40px !important;
	
	overflow: visible !important;
}

.frc-captcha .frc-banner {
	display: none;
}

#bird-wrap {
	width: 100%;
	height: 40px;
	display: flex;

	position: relative;
	margin-top: 30px; 
	margin-inline: auto;
}


#bird-wrap .input {
	display: flex;
	width: 358px;
	height: 40px;
	padding: 1px 30px 6px 5px;
	margin-right: 40px;

	color: var(--color-stone);
	font-family: var(--font-red-hat);
	font-size: 19px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px; 

	border: none;
	border-bottom: 1px solid #ABB0BC;
	background: rgba(255, 255, 255, 0.00);
	box-sizing: border-box;


}
#bird-wrap .input:focus {
	outline: none;
	border-bottom: 2px solid var(--color-sb-blu);
}




/* Hide Safari's autofill button */
#bird-wrap .input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
  }


#bird-wrap .input.error_input {
	border-bottom: 2px solid var(--color-errorred);
	background: linear-gradient(0deg, #FFD6D6 0%, #FFD6D6 100%);
}

#bird-wrap .input::placeholder {
	color: transparent;
	font-family: var(--font-red-hat);
	font-size: 19px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px; /* 115.789% */
	opacity: 1;

}

#bird-wrap .label {
	position: absolute;
	top: 0;
	left: 5px;

	pointer-events: none;
	transform-origin: left center;
	transition: transform 250ms;

	font-family: var(--font-red-hat);
	color: #3B485E;
	font-size: 19px;
	font-style: normal;
	font-weight: 400;
	line-height: 40px; 
}

#bird-wrap .input:focus + .label,
#bird-wrap .input:not(:placeholder-shown) + .label {
	transform: translateY(-80%) scale(0.85);
	color: var(--color-darkgrey);	
}




#bird-wrap input[type=submit]{	
	height: 40px;	
	border: none;
	cursor: pointer;
	padding: 10px 34px;
	
	border-radius: 4px;
	background-color: var(--color-sb-blu);

	color: #FFF;
	text-align: center;
	font-family: var(--font-red-hat);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; 
	letter-spacing: 1px;
	text-transform: uppercase;
	
	transition: opacity .1s ease;
}

#bird-wrap input[type=submit]:hover {	
	text-decoration: none;
	opacity: 0.8;
}



#bird-wrap .bird-state {
	content: '';
	position: absolute;
	z-index: 2;
	left: 300px;	
	top: -24px;
	/* bottom: -14px; */
	margin: auto 0;

	display: block;
	width: 80px;
	height: 80px;
	

	background-position: center;
	background-size: auto 60px;
	background-repeat: no-repeat;
	
}

/*
Backup 2025-08-29


#bird-wrap .input:focus ~ .bird-state {
	animation: 1s ease-in 0s 1 normal forwards birdy-off;
}

#bird-wrap .input:focus ~ #birdy1 {
	animation: 1s ease-in 0s 1 normal forwards birdy-off;
}

#bird-wrap .input:focus ~ #birdy2 {
	animation: 1s ease-in 0.5s 1 normal forwards birdy-on,
	1s ease-in 2.5s 1 normal forwards birdy-off;
}
#bird-wrap .input:focus ~ #birdy3 {
	animation: 1s ease-in 3s 1 normal forwards birdy-on;
}

#bird-wrap input[type=submit]:focus ~ #birdy4,
#bird-wrap #birdy4.active {
	animation:  1s ease-in 0s 1 normal forwards birdy-on;
} 

*/


#bird-wrap .input:focus ~ .bird-state {
	animation: .25s ease-in 0s 1 normal forwards birdy-off;
}

#bird-wrap .input:focus ~ #birdy1 {
	animation: .25s ease-in 0s 1 normal forwards birdy-off;
}

#bird-wrap .input:focus ~ #birdy2 {
	animation: .25s ease-in .25s 1 normal forwards birdy-on,
	.25s ease-in .5s 1 normal forwards birdy-off;
}
#bird-wrap .input:focus ~ #birdy3 {
	animation: .25s ease-in .5s 1 normal forwards birdy-on;
}

#bird-wrap input[type=submit]:focus ~ #birdy4,
#bird-wrap #birdy4.active {
	animation: .25s ease-in 0s 1 normal forwards birdy-on;
} 



#bird-wrap #birdy1 {
	background-image: url('/includes/Vogel01.svg');	
	z-index: 3;
}

#bird-wrap #birdy2 {
	opacity: 0;
	background-image: url('/includes/Vogel02.svg');	
	/* bottom: 0px; */
	top: -38px;
	z-index: 4;
}

#bird-wrap #birdy3 {
	opacity: 0;
	background-image: url('/includes/Vogel04.svg');	
	/* bottom: -15px; */
	top: -22px
	z-index: 5;
}
#bird-wrap #birdy4 {
	opacity: 0;
	background-image: url('/includes/Vogel05-new.svg');	
	/* bottom: -8px; */
	top: -30px;
	z-index: 6;
}



@keyframes birdy-off {	
	100% { opacity: 0; } 
}

@keyframes birdy-on {	
	100% { opacity: 1; } 
}






/*** Module Blog Teaser ***/
.blogTeaser {
	width: 100%;
	max-width: 750px;
	height: auto;
	margin: 20px auto 40px;
	
	display: flex;
	flex-direction: row;
	
	border-top: 1px solid #abb0bc;
	padding-top: 22px;
	
}

.blogTeaser .col.left {
	width: 330px;
	padding-right: 25px;
	
}


.blogTeaser .col.left img {
	max-width: 305px;
	height: auto;
	display: flex;
}



.blogTeaser .col.right {
	width: calc(100% - 330px);
	
	
}

.blogTeaser .col.right h2 {
	text-align: left;
	margin-bottom: 10px;
	
}

.blogTeaser .col.right .text {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* number of lines to show */
	line-clamp: 3;
	-webkit-box-orient: vertical;
	
}

.blogTeaser .col.right  .bottom-link {
	width: 100%;
	display: block;
	margin-top: 10px;	
	
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-color: var(--text-blue);
	text-underline-position: from-font;
	
}

.blogTeaser .col.right  .bottom-link:hover {
	text-decoration: none;
}


/*** Module Rss Blog feed (extending Blog Teasers) ***/

.blogTeaser.dbx-feed .col.left {
	width: 225px;
	padding-right: 25px;
	height: 225px;
}
.blogTeaser.dbx-feed .col.left img {	
	width: auto;
	height: auto;
	display: flex;
	max-width: 200px;
}

.blogTeaser.dbx-feed .col.right {
	width: calc(100% - 225px);
}




/*** Module Client teaser ***/
.client-teaser-wrapper {
	width: 100%;
	max-width: 1184px;
	height: auto;
	padding: 0 20px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: auto;
	box-sizing: border-box;
}

.client-item {
	width: calc(50% - 65px);
	height: auto;
	margin: 15px 32px 35px;
	border-radius: 2px;
	background: #FFF;
	box-shadow: -4px 4px 10px 2px rgba(0, 0, 0, 0.10);
	position: relative;
	transition: all .3s ease;
}

.client-item:hover {
	box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.30);
}

.client-item .wrap {
	width: 100%;
	height: 100%;
	
	border-radius: 2px;
	
	box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
	
	position: relative;
}


.client-item .title {
	display: flex;
	width: 100%;
	max-width: 325px;
	height: 80px;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto 16px;
	color: #ffffff;
	text-align: center;

	/* Lable_Large */
	font-family: var(--font-red-hat);
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	
	text-align: center;
}


.client-item .text {
	
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 9; /* number of lines to show */
	line-clamp: 9;
	-webkit-box-orient: vertical;
	
	height: 225px;
	margin-bottom: 30px;

	/* Lable small */
	font-family: var(--font-red-hat);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 25px; 
}
.client-item .text b,
.client-item .text strong {
	color: #ffffff;
	font-family: var(--font-red-hat);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 25px;
}


.client-item .subtitle {
	color: #ffffff;
	text-align: center;
	font-family: var(--font-red-hat);
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	
	margin-bottom: 10px;
	
}

.client-item .logo {
	display: flex;
	justify-content: center;	
}



.client-item .slide {
	padding: 35px 40px 65px 40px;		
	cursor: pointer;
}

.client-item .quote {
	color: var(--color-sb-blu);
	text-align: center;
	font-family: var(--font-garamond);
	font-size: 33px;
	font-style: normal;
	font-weight: 600;
	line-height: 43px; 
	
	height: 255px;
	max-width: 375px;
	margin: auto;
	padding: 20px 0;
}
.client-item .slide.back .quote {
	color: var(--color-sb-blu);
	font-weight: 500;
	display: flex;
	align-items: center;
}

.client-item .author {
	color: #000;
	text-align: center;
	font-family: var(--font-red-hat);
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;

	max-width: 305px;
	margin: auto;
	padding: 10px 0;
}

.client-item .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 155px;
	width: 100%;	
}

.client-item .icon img {
	height: 128px;
	width: auto;
}



.client-item .slide.cover .activator {
	width: 44px;
	height: 44px;
	display: block;

	background-image: url('/includes/ChangeToNext.svg');
	background-position: center;
	background-size: auto 100%;
	background-repeat: no-repeat;

	position: absolute;
	right: 16px;
	bottom: 16px;
}

.client-item.active .slide.cover .activator {
	display: none;
}

.client-item .slide.front .deactivator,
.client-item .slide.back .deactivator {
	width: 44px;
	height: 44px;
	display: block;

	background-image: url('/includes/Close_light.svg');
	background-position: center;
	background-size: auto 100%;
	background-repeat: no-repeat;

	position: absolute;
	right: 16px;
	bottom: 16px;
}
.client-item .slide.back .deactivator {
	background-image: url('/includes/Close_light_blue.svg');
}

.client-item .slide .nav-wrap {
	position: absolute;
	bottom: 24px;
	width: 40px;
	height: 15px;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;

}

.client-item .slide .nav-wrap .nav-dot-1 {
	width: 13px;
	height: 13px;
	border-radius: 10px;
	display: block;
	background-blend-mode: multiply;
	background: white;
}
.client-item .slide.back .nav-wrap .nav-dot-1 {
	background: rgb(142, 192, 221, 0.42);
}


.client-item .slide .nav-wrap .nav-dot-2 {
	width: 13px;
	height: 13px;
	border-radius: 10px;
	display: block;
	background-blend-mode: multiply;
	background: #005F95;
}


.client-item.active .overlay {	
	position: absolute;
	right: -120%;
	left: auto;
	top: -5%;
	bottom: -5%;
	z-index: -1;
	height: 112%;
	width: 120%;
	
	border-radius: 22px;
	background: linear-gradient(180deg, #FFF 0%, #ECEDF0 50%, #FFF 100%);
	filter: blur(11px);
	
	opacity: 0;
	z-index: -1;
	
	/* animation: overlay-fade-out 1s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	animation-iteration-count: 1;
	animation-fill-mode: forwards; */


}

.client-item.active:nth-child(even) .overlay {	
	right: auto;
	left: -120%;
}


.client-item.active.open .overlay {	
	animation: overlay-fade-in 1s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;


}

.client-item .slide.cover {
	position: relative;	
	background: #FFFFFF;
/* 	border: 2px solid #ffffff;	 */
	z-index: 0;
	height: 100%;
}


.client-item:not(.active):hover .slide.cover {
	border-radius: 2px;
	/* background: linear-gradient(231deg, #FFF 15.45%, #E9EEF4 48.62%, #FFF 84.55%);
	box-shadow: -4px 4px 12px 0px rgba(0, 0, 0, 0.10); */
}

.client-item.active .slide.cover {
	z-index: 5;	
}

.client-item .slide.front,
.client-item .slide.back {
	position: absolute;	
	top: 0;
	right: 0;
	left: auto;
	width: 100%;
	height: 100%;
	z-index: -1;	
}
.client-item:nth-child(even) .slide.front,
.client-item:nth-child(even) .slide.back {	
	right: auto;
	left: 0;	
}


.client-item .slide.front {	
	border: 2px solid #0070AF;	
	border-radius: 10px;
	background: #0070AF;
	
}

.client-item .slide.back {	
	border: 2px solid var(--color-bright-blu);	
	border-radius: 10px;
	background: var(--color-bright-blu);
	
}



.client-item.active .slide.front,
.client-item.active .slide.back {
	animation: bounce-in-right 2s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;

	z-index: 3;		

	transition: opacity .1s ease;
}

.client-item.active .slide.front:not(.shown),
.client-item.active .slide.back:not(.shown) {
	opacity: 0;
	visibility: hidden;
}



.client-item.active:nth-child(even) .slide.front,
.client-item.active:nth-child(even) .slide.back {	
	animation: bounce-in-left 2s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;

	z-index: 3;		
}


.client-item.active.open .slide.front,
.client-item.active.open .slide.back {			
	animation: bounce-out-right 2s;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); 
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	
	transform: rotate(0);	
	z-index: 2;
}


.client-item.active.open:nth-child(even) .slide.front,
.client-item.active.open:nth-child(even) .slide.back {	
	animation: bounce-out-left 2s;	

	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); 
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	
	transform: rotate(0);	
	z-index: 2;
}




@keyframes bounce-out-right {
	0% {
		right: 2%;
		transform: rotate(0);

	}
	50% {
		right: -103%;
		transform: rotate(0);
	}		
	85% {
		right: -103%;
		transform: rotate(-4deg);		
	}
	92% {
		right: -103%;
		transform: rotate(-3.2deg);		
	}
	97% {
		right: -103%;
		transform: rotate(-4.3deg);
		z-index: 6;
	}	
	100% {
		right: -103%;
		transform: rotate(-4deg);
		z-index: 5;
	}
}

@keyframes bounce-in-right {
	0% {
		right: -101%;
		transform: rotate(-4deg);
		
	}
	20% {
		right: -101%;
		transform: rotate(0);
		
	}
	90% {
		right: 0;
		transform: rotate(0);
		
	}
	100% {
		right: 0;
		transform: rotate(0);
		
	}
}


@keyframes bounce-out-left {
	0% {
		left: 2%;
		transform: rotate(0);

	}
	50% {
		left: -103%;
		transform: rotate(0);
	}		
	85% {
		left: -103%;
		transform: rotate(4deg);		
	}
	92% {
		left: -103%;
		transform: rotate(3.2deg);		
	}
	97% {
		left: -103%;
		transform: rotate(4.3deg);
		z-index: 5;
	}	
	100% {
		left: -103%;
		transform: rotate(4deg);
		z-index: 5;
	}
}

@keyframes bounce-in-left {
	0% {
		left: -101%;
		transform: rotate(4deg);
		
	}
	20% {
		left: -101%;
		transform: rotate(0);
		
	}
	90% {
		left: 0;
		transform: rotate(0);
		
	}
	100% {
		left: 0;
		transform: rotate(0);
		
	}
}

@keyframes overlay-fade-in {
	0% {
		opacity: 0;
		z-index: -1;		
	}
	90% {
		opacity: 1;
		z-index: 2;		
	}
	100% {
		opacity: 1;
		z-index: 2;		
	}
}

@keyframes overlay-fade-out {
	0% {		
		opacity: 1;
		z-index: 2;
	}
	90% {
		opacity: 1;
		z-index: 0;		
	}
	100% {
		opacity: 0;
		z-index: -1;		
	}
}



/*** Gallery module ***/
.gallery {
	width: 100%;
	max-width: 810px;
	height: auto;
	margin: 20px auto 40px;
	padding: 0 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.gallery .item {
	width: calc(100% / 3 - 20px);
	height: auto;
	margin: 10px;
	border: 4px solid var(--color-sb-blu);
	border-radius: 4px;
	box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.5);
	transition: all .3s ease;
	
	
	
	
}
.gallery .item:hover {
	box-shadow: none;	
}

.gallery .item img {
	width: 100%;
	max-width: 236px;
	height: auto;
	max-height: 236px;
	display: flex;
	justify-content: center;
	margin: auto;
	
	transition: all .3s ease;
}



.fancybox__caption {
	font-size: 22px;
	color: #ffffff;
	
}

.fancybox__nav .f-button.is-next,
.fancybox__nav .f-button.is-prev {
	background-color:rgba(255,255,255, 0.3);	
}
.fancybox__nav .f-button.is-next:hover,
.fancybox__nav .f-button.is-prev:hover {
	background-color:rgba(255,255,255, 1);	
}





.map-wrapper {
  position: relative;
  width: 100%; 
  height: 450px; 
  overflow: hidden;
}
.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(100%); /* kill original colors */
}

/* solid blue base */
.blue-base {
  position: absolute;
  inset: 0;
  background: #006BAC;
  mix-blend-mode: screen; /* makes grey map pick up blue tone */
  opacity: 0.9;
  pointer-events: none;
}

/* soft grey layer over blue */
.grey-overlay {
  position: absolute;
  inset: 0;
  background: #808080;
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}

/* Try also: sepia(60%), invert(90%), hue-rotate(180deg) */