/*****************************************************************************/
/** Spherworks styling																											**/
/** Version 3.1 - Maevanin																									**/
/** Gijs Rosengarten, 2021																									**/
/** http://sphereworks.gwtp.net																							**/
/*****************************************************************************/

/***************************************/
/************ Base styling *************/
/**																		**/
/**	Colours:													**/
/**	Dark blue			- 203A59						**/
/**	Med blue			- B5C2D1						**/
/** Light blue 		- EDF1F6						**/
/**	Dark Yellow 	- AC6600						**/
/**	Med Yellow 		- FFAB00						**/
/**	Light Yellow 	- FFE0A1						**/
/**	Dark Beige		- EFEADD						**/
/**	Med Beige			- D5C8A5						**/
/**	Light Beige		- F6F2E7						**/
/**	Black					-	000000						**/
/**																		**/
/***************************************/

/** Font stack sizes: 16, 18, 21, 24, 36 **/
*, *:before, *:after { box-sizing: border-box; }
html { font-family: 'Roboto', sans-serif; color: #203A59; font-size: 62.5%; }
body { margin: 0; padding: 0; overflow-x: hidden; }
h1, .h1 { font-family: 'Roboto Slab', serif; font-size: 4.8em; line-height: 1em; font-weight: 700; margin: 0 0 0.15em 0; letter-spacing: -0.02em; }
h2, .h2 { font-family: 'Roboto Slab', serif; font-size: 3.2em; line-height: 1.5em; font-weight: 700; margin: 0 0 0.45em 0; letter-spacing: -0.01em; }
h3, .h3 { font-family: 'Roboto Slab', serif; font-size: 2.7em; line-height: 1.5em; font-weight: 400; margin: 0 0 0.5em 0; }
h4, .h4 { font-family: 'Roboto Slab', serif; font-size: 2.1em; line-height: 1.5em; font-weight: 400; margin: 0 0 0.5em 0; }
p, .fontDefault { margin:  0 0 1em 0; font-size: 1.6em; line-height: 1.6em; }
th, td { padding: 0; }
ul, ol, dl  { padding-left: 20px; margin: 10px 0; }
ul li, ol li { font-size: 1.6em; line-height: 1.6em }
a h1, a h2, a h3, a h4 { color: #AC6600; }
a { color: #AC6600; text-decoration: none; }
a:hover, a:hover h1, a:hover h2, a:hover h3, a:hover h4 { color: #FFAB00; text-decoration: none;  }
a.box { color: #203A59; border: 1px solid #B5C2D1; -ms-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
a.box h1, a.box h2, a.box h3, a.box h4, a.box h1:hover, a.box h2:hover, a.box h3:hover, a.box h4:hover { color: #203A59; }
a.box:hover { color: #203A59; box-shadow: 0 5px 10px rgba(0,0,0,0.11); cursor: pointer; cursor: hand; -ms-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
hr { border: none; border-top: 1px solid #B5C2D1; margin: 20px 0; }
pre { border: 1px solid #B5C2D1; background: #F6F2E7; }
fieldset { margin: 0; }
picture { display: block; }


/** Block grid layout **/
.container { margin: 0; width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; }
.block { display: -webkit-flex; display: flex; }
.box { border: 1px solid transparent; margin: 1em; padding: 1em; width: 100%; }
.inlineBox { border: 1px solid transparent; margin: 0 1em; padding: 1em; }
.block:first-child > .inlineBox { margin-left: 0; }
.block:last-child > .inlineBox { margin-right: 0; }
.box img, .inlineBox img { max-width: 100%; }
.fixedWidth { width: 1300px; margin: 0 auto; float: none; }
.fixedWidth.article { width: 800px; margin: 0 auto; float: none; }


/** Box and content modifiers. Also applicable to html block elements **/
.border { border: 1px solid #B5C2D1; }
.border0 { border: 0px solid transparent; }
.rounded { border-radius: 1em; }
.rounded2 { border-radius: 2em; }
.margin0 { margin: 0; }
.margin1 { margin: 1em; }
.margin1h { margin: 0 1em; }
.margin1v { margin: 1em 0; }
.margin2 { margin: 2em; }
.margin2h { margin: 0 2em; }
.margin2v { margin: 2em 0; }
.margin3 { margin: 3em; }
.margin3h { margin: 0 3em; }
.margin3v { margin: 3em 0; }
.padding0 { padding: 0; }
.padding1 { padding: 1em; }
.padding1h { padding: 0 1em; }
.padding1v { padding: 1em 0; }
.padding2 { padding: 2em; }
.padding2h { padding: 0 2em; }
.padding2v { padding: 2em 0; }
.padding3 { padding: 3em; }
.padding3h { padding: 0 3em; }
.padding3v { padding: 3em 0; }
.fgYellowLight { color: #FFE0A1; }
.fgYellowMed { color: #FFAB00; }
.fgYellowDark { color: #AC6600; }
.fgBeigeLight { color: #F6F2E7; }
.fgBeigeMed { color: #D5C8A5; }
.fgBeigeDark { color: #A6966A; }
.fgBlueLight { color: #EDF1F6; }
.fgBlueMed { color: #B5C2D1; }
.fgBlueDark { color: #203A59; }
.fgDark { color: #000000; }
.fgLight { color: #FFFFFF; }
.bgYellowLight { background-color: #FFE0A1; }
.bgYellowMed { background-color: #FFAB00; }
.bgYellowDark { background-color: #AC6600; }
.bgBeigeLight { background-color: #F6F2E7; }
.bgBeigeMed { background-color: #D5C8A5; }
.bgBeigeDark { background-color: #A6966A; }
.bgBlueLight { background-color: #EDF1F6; }
.bgBlueMed { background-color: #B5C2D1; }
.bgBlueDark { background-color: #203A59; }
.bgDark { background-color: #000000; }
.bgLight { background-color: #FFFFFF; }

/** Secondary colours **/
.fgGreyYellow10 { background-color: #F4EFE5; }
.fgGreyYellow20 { background-color: #E2D8C1; }
.fgGreyYellow40 { background-color: #DBBF88; }
.fgGreyYellow60 { background-color: #DFB245; }
.fgGreyYellow80 { background-color: #AC862A; }
.fgGreyYellow00 { background-color: #806014; }
.fgBrightBlue10 { background-color: #C5E5FA }
.fgBrightBlue20 { background-color: #52A8E4; }
.fgBrightBlue40 { background-color: #247EBD; }
.fgBrightBlue60 { background-color: #154C73; }
.fgBrightBlue80 { background-color: #0A2E48; }
.fgBrightBlue00 { background-color: #151D22; }
.fgGreen10 { background-color: #F8F3CE; }
.fgGreen20 { background-color: #D5C02C; }
.fgGreen40 { background-color: #B5A537; }
.fgGreen60 { background-color: #917E00; }
.fgGreen80 { background-color: #82772D; }
.fgGreen00 { background-color: #5D5627; }
.fgOrange10 { background-color: #FBCBB8; }
.fgOrange20 { background-color: #DFCBC3; }
.fgOrange40 { background-color: #E06434; }
.fgOrange60 { background-color: #BB3805; }
.fgOrange80 { background-color: #912901; }
.fgOrange00 { background-color: #681C05; }
.fgGreyGreen10 { background-color: #EAEBDE; }
.fgGreyGreen20 { background-color: #C6C8B5; }
.fgGreyGreen40 { background-color: #B2BA9D; }
.fgGreyGreen60 { background-color: #788063; }
.fgGreyGreen80 { background-color: #5A6048; }
.fgGreyGreen00 { background-color: #353D21; }
.fgGreyBlue10 { background-color: #E7F7FA; }
.fgGreyBlue20 { background-color: #CDE5EA; }
.fgGreyBlue40 { background-color: #A7C0C6; }
.fgGreyBlue60 { background-color: #839AA0; }
.fgGreyBlue80 { background-color: #5B7076; }
.fgGreyBlue00 { background-color: #35474C; }
.bgGreyYellow10 { background-color: #F4EFE5; }
.bgGreyYellow20 { background-color: #E2D8C1; }
.bgGreyYellow40 { background-color: #DBBF88; }
.bgGreyYellow60 { background-color: #DFB245; }
.bgGreyYellow80 { background-color: #AC862A; }
.bgGreyYellow00 { background-color: #806014; }
.bgBrightBlue10 { background-color: #C5E5FA }
.bgBrightBlue20 { background-color: #52A8E4; }
.bgBrightBlue40 { background-color: #247EBD; }
.bgBrightBlue60 { background-color: #154C73; }
.bgBrightBlue80 { background-color: #0A2E48; }
.bgBrightBlue00 { background-color: #151D22; }
.bgGreen10 { background-color: #F8F3CE; }
.bgGreen20 { background-color: #D5C02C; }
.bgGreen40 { background-color: #B5A537; }
.bgGreen60 { background-color: #917E00; }
.bgGreen80 { background-color: #82772D; }
.bgGreen00 { background-color: #5D5627; }
.bgOrange10 { background-color: #FBCBB8; }
.bgOrange20 { background-color: #DFCBC3; }
.bgOrange40 { background-color: #E06434; }
.bgOrange60 { background-color: #BB3805; }
.bgOrange80 { background-color: #912901; }
.bgOrange00 { background-color: #681C05; }
.bgGreyGreen10 { background-color: #EAEBDE; }
.bgGreyGreen20 { background-color: #C6C8B5; }
.bgGreyGreen40 { background-color: #B2BA9D; }
.bgGreyGreen60 { background-color: #788063; }
.bgGreyGreen80 { background-color: #5A6048; }
.bgGreyGreen00 { background-color: #353D21; }
.bgGreyBlue10 { background-color: #E7F7FA; }
.bgGreyBlue20 { background-color: #CDE5EA; }
.bgGreyBlue40 { background-color: #A7C0C6; }
.bgGreyBlue60 { background-color: #839AA0; }
.bgGreyBlue80 { background-color: #5B7076; }
.bgGreyBlue00 { background-color: #35474C; }

/** Basic functionality () **/
.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; }
.small { font-size: 1.2em; }
.hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.bg { height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 0; }
.light { color: #FFFFFF; }
.light a { color: #FFE0A1; }
.light a:hover { color: #FFAB00; }
.fullHeight { overflow-y: hidden; }
.parallax { transition: 0s linear; transition-property: background-position;  background-repeat: no-repeat; background-size: auto; }
.anchor { display: block; }
.spacer3 { height: 3em; width: 100%; }
.spacer5 { height: 5em; width: 100%; }
.spacer10 { height: 10em; width: 100%; }
.spacer20 { height: 20em; width: 100%; }
.spacer25 { height: 25em; width: 100%; }
.spacer50 { height: 50em; width: 100%; }
.spacerRow { height: 25em; width: 100%; }
.button, button { font-weight:bold; font-family: 'Roboto'; background: #FFFFFF; color: #203A59; border: 1px solid #203A59; border-radius: 3px; min-width: 60px; text-align: center; padding: 8px 20px 8px; margin: 5px 0; display: inline-block; box-shadow: 0 1px 3px 0 rgba(32,55,70,0.35); -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.button:hover, button:hover { background: #EDF1F6; color: #203A59; box-shadow: none; text-decoration: none; cursor: pointer; cursor: hand; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.button.primary, button.primary { background: #203A59; border: 1px solid transparent; min-width: 60px; color: #FFFFFF; }
.button.primary:hover, button.primary:hover { background: #EDF1F6; color: #203A59; border: 1px solid #203A59; text-decoration: none; }
.button.secondary, button.secondary { background: #FFE0A1; min-width: 60px; color: #203A59; border: none; box-shadow: none; }
.button.secondary:hover, button.secondary:hover { background: #FFAB00; color: #FFFFFF; border: none; text-decoration: none; }
.buttonGroup { display: -webkit-flex; display: flex; flex-wrap: wrap; margin: 0 0 10px 0; font-size: 1.6em; }
.buttonGroup.large { font-size: 1.9em; }
.buttonGroup.large .button { padding: 8px 20px; }
.buttonGroup.small { font-size: 1.2em; }
.buttonGroup .button { margin: 0; border-radius: 0; box-shadow: none; border-right: none; font-size: 1em; font-weight:normal; }
.buttonGroup .button:first-child { border-radius: 0.8em 0 0 0.8em; }
.buttonGroup .button:last-child { border-right: 1px solid #203A59; border-radius: 0 0.8em 0.8em 0; }
.buttonGroup.primary .button { background: #203A59; color: #FFFFFF; border: 1px solid #FFFFFF; border-right: none; }
.buttonGroup.primary .button:hover { background: #EDF1F6; color: #203A59; border-right: none; }
.buttonGroup.secondary .button { background: #FFE0A1; color: #000000; border: 1px solid #FFFFFF; border-right: none; }
.buttonGroup.secondary .button:hover { background: #FFAB00; color: #FFFFFF; border-right: none; }

/** Header/menus**/
.header { width: 100%; z-index: 1000; position: relative; background: #203A59; }
.header.overlay { position: fixed; background: transparent; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.logo { float: left; margin: 20px; font-size: 5em; color: #FFFFFF; font-weight: bold; letter-spacing: -0.1em; display: block; }
.mainMenu { float: left; margin: 10px 20px; padding: 0; }
.mainMenu > ul { margin: 20px 0; float: left; }
.mainMenu > ul > li { float: left; list-style-type: none; position: relative; background: transparent; color: #FFFFFF; padding: 0.5em 1.5em; font-family: 'Roboto', arial, sans-serif; font-size: 18px; line-height: normal; font-weight: normal; position: relative; background: transparent; -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; }
.mainMenu ul > li > a { color: #FFFFFF; font-weight: normal; }
.mainMenu li:hover { background-color: #FFFFFF; }
.mainMenu li:hover a { color: #203A59; }
.mainMenu ul > li:hover ul { visibility: visible; transform: translateY(0); opacity: 1; -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; }
.mainMenu ul > li ul { z-index: 100; position: absolute; left: 0; visibility: hidden; transform: translateY(-2em); opacity: 0; background: #FFFFFF; border-bottom: 4px solid #AC6600; margin: 0.5em 0 0; padding: 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; }
.mainMenu ul > li li { list-style-type: none; white-space: nowrap; font-size: 16px; margin: 0; padding: 0.8em 1.5em; display: inline-block; width: 95%; }
.mainMenu ul > li li:hover a { color: #AC6600; }
.mainMenuIcon { display: none; z-index: 10; width: 4em; height: 3em; margin: 1em auto; position: relative; -webkit-transform: rotate(0deg); transform: rotate(0deg); cursor: pointer; cursor: hand; -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; }
.mainMenuIcon span { display: block; position: absolute; height: 0.5em; width: 100%; background: #FFFFFF; border-radius: 0.5em; opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -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; }
.mainMenuIcon:hover span { background: #AC6600; }
.mainMenuIcon span:nth-child(1) { top: 0px; }
.mainMenuIcon span:nth-child(2),.mainMenuIcon span:nth-child(3) { top: 1em; }
.mainMenuIcon span:nth-child(4) { top: 2em; }
.inPageMenu { list-style-type: none; margin: 0; padding: 0; }
.inPageMenu li { margin-bottom: 10px; }
.inPageMenu li a { padding: 0.5em 1em; display: block; border-left: 3px solid transparent; -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; }
.inPageMenu li a.active { border-left: 3px solid #FFFFFF; -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; }
.inPageMenu li a:hover { color: #CCCCCC; }
.fixHeader .header.fixed { position: fixed; top: 0px; }
.fixHeader .header.overlay { background-color: rgba(255, 255, 255, 1); border-bottom: 1px solid #FFAB00; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.fixHeader .header.overlay .logo, .fixHeader .header.overlay .mainMenu a { color: #203A59; }
.fixHeader .header.overlay .mainMenu a:hover, .fixHeader .header.overlay .logo:hover { color: #AC6600; }
.pageLengthBar { position: absolute; bottom: -1px; height: 5px; width: 0%; background: #FFAB00; opacity: 0; -ms-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
.pageLengthBar.inView { opacity: 1; -ms-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out;}

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

/** Slideshow & Slideshow menu) **/
.slideshow { position: relative; width: 100%; overflow: hidden; height: 100%; }
.slideshow .item { position: absolute; top: 0; left: 0; opacity: 0; height: 100%; width: 100%; display: block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.slideshow .item.active { position: relative; opacity: 1; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.slideshow .item img, .slideshow .item picture { height: 100%; object-fit: cover; }
.ssMenuContainer { position: absolute; bottom: 1em; width: 100%; }
.ssMenuCenter { float: left; left: 50%; position: relative; }
.ssMenu { position: relative; float: left; left: -50% ; width: auto; }
.ssMenu span { display: inline-block; width: 3em; height: 3em; border: 0.5em solid #FFFFFF; border-radius: 50%; margin: 0 0.5em; -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; }
.ssMenu span:hover { border: 0.5em solid #FFAB00; cursor: pointer; cursor: hand; -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; }
.ssMenu span.active { position: relative; }
.ssMenu span.active::after { width: 1em; height: 1em; position: absolute; top: 0.5em; left: 0.5em; border-radius: 50%; background: #FFFFFF; content: ""; -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; }
.ssMenu span.active:hover::after { background: #FFAB00; -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; }

/** Content structures **/
.csContainer { position: relative; }
.csContainer .item { width: 100%; }
.csContainer .title { display: inline-block; -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; }
.csContainer .title:hover { cursor: pointer; cursor: hand; }
.csContainer .item.active .title { -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; }
.csContainer .item .content  { display: none; }
.csContainer .item .content * { opacity: 0; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.csContainer .item.active .content { position: relative; z-index: -1; }
.csContainer .item.active .content * { opacity: 1; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

.csContainer.slider .item .title { position: relative; width: 100%; color: #203A59; background: #EDF1F6; border: 1px solid #B5C2D1; border-radius: 0; padding: 0.6em 1em; margin-bottom: 5px; }
.csContainer.slider .item .title::after { position: absolute; right: 0.5em; font-size: 150%; font-weight: bold; content: "+"; -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; }
.csContainer.slider .item.active .title { border: 1px solid #B5C2D1; color: #203A59; background: #FFFFFF; }
.csContainer.slider .item.active .title::after { transform: rotate(45deg);  -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; }
.csContainer.slider .item .title:hover { background: #FFFFFF; color: #AC6600; border: 1px solid #B5C2D1; }
.csContainer.slider .item.active .title:hover { color: #AC6600; background: #FFFFFF; }
.csContainer.slider .item .content { opacity: 0; margin: 0 1.5em; -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; }
.csContainer.slider .item.active .content { opacity: 1; margin: 1.5em; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.csContainer.tab .item { position: absolute; top: 0; }
.csContainer.tab .item.active { position: relative; width: 100%; }
.csContainer.tab .item .title { position: relative; z-index: 10; margin: 0 0.5em 0 0!important; padding: 0.6em 1em; color: #203A59; background: #EDF1F6; border: 1px solid #B5C2D1; border-bottom: none; border-radius: 0.8em 0.8em 0 0; }
.csContainer.tab .item:last-child .title { margin: 0; }
.csContainer.tab .item.active .title { position: relative; z-index: 12; border: 1px solid #B5C2D1; border-bottom: 1px solid #FFFFFF; color: #203A59; background: #FFFFFF; padding: 0.6em 1em; }
.csContainer.tab .item .title:hover { background: #B5C2D1; color: #203A59; }
.csContainer.tab .item.active .title:hover { color: #AC6600; background: #FFFFFF; cursor: initial; }
.csContainer.tab .item .content { opacity: 0; padding: 2em; border: 1px solid #B5C2D1; border-radius: 0.8em 0.8em 0 0; background: #FFFFFF; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.csContainer.tab .item.active .content { opacity: 1; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.csContainer.pill .item { position: absolute; top: 0; }
.csContainer.pill .item.active { position: relative; width: 100%; }
.csContainer.pill .item .title { position: relative; z-index: 10; margin: 0 1em 0 0!important; padding: 0.6em 1em; position: relative; color: #203A59; background: #EDF1F6; border: 2px solid #B5C2D1; border-radius: 1.2em; }
.csContainer.pill .item:last-child .title { margin: 0; }
.csContainer.pill .item.active .title { position: relative; z-index: 12; color: #203A59; background: #FFFFFF; border: 2px solid #B5C2D1; }
.csContainer.pill .item .title:hover { background: #B5C2D1; color: #203A59; }
.csContainer.pill .item.active .title:hover {  color: #AC6600; background: #FFFFFF; cursor: initial; }
.csContainer.pill .item .content { margin: 1em; }


/** galleries & lightbox **/
.gallery { width: 100%; position: relative; }
.gallery img { float: left; margin: 5px; border: 0px solid #FFFFFF; width: auto; max-width: 100%; display: block; -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; }
.gallery img:hover { opacity: 0.7; -webkit-box-shadow: 0 0 20px #EDF1F6; box-shadow: 0 0 20px #B5C2D1; cursor: pointer; cursor: hand; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.gallery a { position: relative; display: block; }
.gallery a::before { content: ""; background: rgba(0, 0, 0, 0); position: absolute; margin: 5px; left: 0; top: 0; width: calc(100% - 10px); height: calc(100% - 10px); -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; }
.gallery a::after { opacity: 0; content: "";  width: calc(100% - 3em); height: calc(100% - 3em); position: absolute; top: 1.5em; left: 1.5em; border: 2px solid #FFFFFF; box-sizing: box-border; -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; }
.gallery a:hover::before { content: "+"; display: flex; justify-content: center; align-items: center; font-size: 6em; color: #FFFFFF; font-weight: bold;  background: rgba(0, 0, 0, 0.3); width: calc(100% - 10px); height: calc(100% - 10px) -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; }
.gallery a:hover::after { opacity: 1; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out; }
.gallery.row { display: flex; flex-wrap: wrap; justify-content: space-between; }
.gallery.square img { object-fit: cover; margin: 0px; float: left; }
.gallery.square a {  float: left; position: relative; }
.gallery.square a::before, .gallery.grid a::before { margin: 0px; width: 100%; height: 100%; }
.gallery.square a::after, .gallery.grid a::after { width: 90%; height: 90%; top: 5%; left: 5%; }
.gallery.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; }
.gallery.grid a:nth-child(7n+1) { grid-row: span 2; grid-column: span 2; }
.gallery.grid a img, .gallery.grid a picture { object-fit: cover; width: 100%; height: 100%; margin: 0; }
.lightboxBG.lightboxHide { opacity: 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; }
.lightboxBG { background: #000000; opacity: 0.70; width: 100%; position: fixed; top: 0; display: none; z-index: 2000;  -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; }
.lightboxContainer.lightboxHide { opacity: 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; }
.lightboxContainer { opacity: 1; background: #FFFFFF; margin: 10px; position: fixed; z-index: 2000; display: none;  -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; }
.lightboxContent { width: 100%; height: 100%; overflow: auto; padding: 5px; }
.lightboxClose { position: absolute; top: -3.5em; right: 0; width: 3em; height: 3em; z-index: 100; -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; cursor: pointer; cursor: hand; }
.lightboxClose span { display: block; position: absolute; left: 0; top: 1em; height: 0.5em; width: 100%; background: #FFFFFF; border-radius: 0.5em; -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out; } 
.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: #FFAB00; }
.popupContent { display: none; width: 300px; height: 300px; }
.galleryCounter { color: #F6F2E7; font-size: 1.6em; position: absolute; top: -2em; left: 0; width: auto; height: 2em; z-index: 301; }
.contentDescription { color: #F6F2E7; font-size: 1.6em; text-align: center; position: relative; width: 100%; z-index: 301; margin: 1em 0 0 0; }
.navLeft, .navRight { display: block; position: absolute; top: 0; height: 100%; width: 5em; cursor: pointer; cursor: hand; }
.lightboxContainer .navLeft, .lightboxContainer .navRight { position: fixed; }
.navLeft { left: 0; }
.navRight { right: 0; }
.navLeft::before, .navLeft::after, .navRight::before, .navRight::after { content: ""; display: block; position: absolute; left: 1em; top: 50%; height: 0.5em; width: 3em; margin-top: -0.9em; background-color: #FFFFFF; border-radius: 0.5em;  -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: background-color .25s ease-in-out; transition: background-color .25s ease-in-out; }
.navLeft::before { margin-top: 1em; }
.navLeft::after { -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
.navRight::after { margin-top: 0.9em; -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
.navLeft:hover::before, .navLeft:hover::after, .navRight:hover::before, .navRight:hover::after { background-color: #FFAB00; -webkit-transition: background-color .25s ease-in-out; transition: background-color .25s ease-in-out; }

/** Filter list **/
.selector { display: flex; width: 100%; padding: 0 80px 10px 0; }
.selector label { position: relative; margin: 0 1em 0 0; font-size: 1.6em; }
.selector label::after { position: absolute; content: "+"; width: auto; bottom: 0px; right: 0em; padding: 0.15em 0.3em; font-size: 2em; font-weight: bold; color: #203A59; z-index: 100; -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; }
.selector label:hover::after { color: #B5C2D1; -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; }
.selector .filter { display: block; position: relative; font-size: 100%; padding: 0.8em 2.5em 0.8em 0.5em; margin: 0.5em 0 0 0; background: #FFFFFF; color:#203A59; border: 1px solid #B5C2D1; outline: none; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.selector .filter:hover { color: #AC6600; }
.selector .filter:hover option { color: #203A59; }
.filterBlock { opacity: 1; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.filterBlock .filterTags { position: relative; margin-bottom: 30px; }
.filterBlock .filterTags strong { display: inline-block; background: #F6F2E7; padding: 3px 8px; margin: 0 5px 10px 0; color: #000000; font-size: 80%; }
.filterBlock .filterTags strong.hidden { display: none; }
.filterBlock .filterTags strong.moreTags:hover { cursor: pointer; cursor: hand; background: #D5C8A5; }
.filterBlock .filterTags:after { content: ""; position: absolute; left: -10px; bottom: -10px; width: calc(100% + 20px); border-top: 1px solid #B5C2D1; }
.filterContent { position: relative; height: 350px; overflow: hidden; opacity: 1; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.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: 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;}
.filterContent .toggleContent:hover { cursor: pointer; cursor: hand; font-size: 300%; -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; }
.filterContent.active  { height: auto; padding-bottom: 50px; }
.filterContent.active .toggleContent { height: 50px; background: transparent; line-height: 50px; }
.filterContainer { align-content: flex-start; }
.filterContainer .hideFromList { opacity: 0; width: 0!important; height: 0; font-size: 0; border: none; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.filterContainer .hideFromList * { opacity: 0; width: 0; height: 0; font-size: 0; border: none; }
.resetFilter { width: 80px; position: absolute; bottom: 10px; right: 0; }

/** Animations **/
.loadBlocks.fadeIn .animate, .loadBlocks.slideInLeft .animate, .loadBlocks.slideInRight .animate, .loadBlocks.slideInTop .animate, .loadBlocks.slideInBottom .animate { position: relative; opacity: 0; }
.loadBlocks.fadeIn .animate.active, .loadBlocks.slideInLeft .animate.active, .loadBlocks.slideInRight .animate.active, .loadBlocks.slideInTop .animate.active, .loadBlocks.slideInBottom .animate.active {  -ms-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.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; }
.canvas { position: relative; width: 100%; }
.canvas .canvasElements { position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; z-index: 100; }
.canvas .canvasElements .fixed { position: absolute; width: 100%; height: 100%; }
.canvas.latopScreen .canvasBg { width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; }
.canvas.latopScreen .canvasElements { position: absolute; width: 75%; height: 85%; top: 5%; left: 12.5%; }
.canvas.latopScreen .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.latopScreen .dropShadow::before { position: absolute; content: ""; background: #FFFFFF; z-index: 0; width: 10%; height: 100%; left: -10%; top: 0; }
.canvas.latopScreen .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: #203A59; background: #203A59; }
.canvas .graph.primary { fill: #FFAB00; background: #FFAB00; }
.canvas .graph.secondary { fill: #EFEADD; background: #EFEADD;}
.canvas .canvasButton { width: 13%; height: 8%; fill: #CDDCF6; background: #CDDCF6; }
.canvas .arrow { width: 5%; height: 10%; fill: #000000; }
.canvas .click { width: 10%; height: 10%; fill: #FFFFFF; }
.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%; }

/** Tooltip **/
.tooltip { display: inline-flex; position: relative; }
.tooltip::before { opacity: 0; content: ""; background: #F6F2E7; border: 1px solid #A6966A; transform: rotate(45deg); position: absolute;  z-index: 101; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip::after { opacity: 0; content: ""; background: #F6F2E7; position: absolute;  z-index: 101; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltipContent { position: absolute; background: #F6F2E7; font-style: normal; color: #203A59; box-shadow: 0 5px 10px rgba(0,0,0,0.25); border: 1px solid #A6966A; padding: 1em; margin: 1em; z-index: 100; opacity: 1; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltipHide { opacity: 0; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip.tooltipTop::before { opacity: 1; width: 1em; height: 1em; left: calc(50% - 0.5em); top: calc(-1.5em - 1px); -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip.tooltipTop::after { opacity: 1; width: 2em; height: 1em; left: calc(50% - 1em); top: -2em; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip.tooltipRight::before { opacity: 1; width: 1em; height: 1em; left: calc(100% + 0.5em); top: calc(50% - 0.5em); -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip.tooltipRight::after { opacity: 1; width: 1em; height: 2em; left: calc(100% + 1em); top: calc(50% - 1em); -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip.tooltipBottom::before { opacity: 1; width: 1em; height: 1em; left: calc(50% - 0.5em); top: calc(100% + 0.5em); -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip.tooltipBottom::after { opacity: 1; width: 2em; height: 1em; left: calc(50% - 1em); top: calc(100% + 1em); -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip.tooltipLeft::before { opacity: 1; width: 1em; height: 1em; left: -1.5em; top: calc(50% - 0.5em); -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.tooltip.tooltipLeft::after { opacity: 1; width: 1em; height: 2em; left: -2em; top: calc(50% - 1em); -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }


/***************************************/
/********** Responsive styles **********/

@media (max-width: 1340px) {
  .fixedWidth, .fixedWidth.article { width: 100%; }
	.parallax { background-size: inherit; }
}

/* Large desktop and up */
@media (min-width: 960px) {
	.row10 > .block { width: 10% }
	.row10 > .col2 { width: 20%; }
	.row10 > .col3 { width: 30%; }
	.row10 > .col4 { width: 40%; }
	.row10 > .col5 { width: 50%; }
	.row10 > .col6 { width: 60%; }
	.row10 > .col7 { width: 70%; }
	.row10 > .col8 { width: 80%; }
	.row10 > .col9 { width: 90%; }
	.row10 > .col10 { width: 100%; }
	.row12 > .block { width: 8.33% }
	.row12 > .col2 { width: 16.66%; }
	.row12 > .col3 { width: 25%; }
	.row12 > .col4 { width: 33.33%; }
	.row12 > .col5 { width: 41.66%; }
	.row12 > .col6 { width: 50%; }
	.row12 > .col7 { width: 58.33%; }
	.row12 > .col8 { width: 66.66%; }
	.row12 > .col9 { width: 75%; }
	.row12 > .col10 { width: 83.33%; }
	.row12 > .col11 { width: 91.66%; }
	.row12 > .col12 { width: 100%; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 960px) and (max-width: 1199px) {
	.logo { margin: 25px 20px; font-size: 4em; }
	.row10 > .colLarge1 { width: 10% }
	.row10 > .colLarge2 { width: 20%; }
	.row10 > .colLarge3 { width: 30%; }
	.row10 > .colLarge4 { width: 40%; }
	.row10 > .colLarge5 { width: 50%; }
	.row10 > .colLarge6 { width: 60%; }
	.row10 > .colLarge7 { width: 70%; }
	.row10 > .colLarge8 { width: 80%; }
	.row10 > .colLarge9 { width: 90%; }
	.row10 > .colLarge10 { width: 100%; }
	.row12 > .colLarge1 { width: 8.33% }
	.row12 > .colLarge2 { width: 16.66%; }
	.row12 > .colLarge3 { width: 25%; }
	.row12 > .colLarge4 { width: 33.33%; }
	.row12 > .colLarge5 { width: 41.66%; }
	.row12 > .colLarge6 { width: 50%; }
	.row12 > .colLarge7 { width: 58.33%; }
	.row12 > .colLarge8 { width: 66.66%; }
	.row12 > .colLarge9 { width: 75%; }
	.row12 > .colLarge10 { width: 83.33%; }
	.row12 > .colLarge11 { width: 91.66%; }
	.row12 > .colLarge12 { width: 100%; }
	.header .block { position: relative; display: inline-block; margin-right: 0; }
	.mainMenu { float: right; margin: 10px 20px; padding: 0; z-index: 2000; }
	.mainMenu.fullLeft { float: left; }
	.mainMenu > ul > li { padding: 0.5em 1em; }
}

/* Tablet and down */
@media (max-width: 959px) {
/* 	html { font-size: 54%; }	~12px */
	.logo { margin: 25px 30px; font-size: 4em; }
	.desktop { display: none; }
	.tablet { display: block; }
	.spacerRow { height: 10em; }
	.marginMed0 { margin: 0; }
	.marginMed1 { margin: 1em; }
	.marginMed1h { margin: 0 1em; }
	.marginMed1v { margin: 1em 0; }
	.marginMed2 { margin: 2em; }
	.marginMed2h { margin: 0 2em; }
	.marginMed2v { margin: 2em 0; }
	.marginMed3 { margin: 3em; }
	.marginMed3h { margin: 0 3em; }
	.marginMed3v { margin: 3em 0; }
	.paddingMed0 { padding: 0; }
	.paddingMed1 { padding: 1em; }
	.paddingMed1h { padding: 0 1em; }
	.paddingMed1v { padding: 1em 0; }
	.paddingMed2 { padding: 2em; }
	.paddingMed2h { padding: 0 2em; }
	.paddingMed2v { padding: 2em 0; }
	.paddingMed3 { padding: 3em; }
	.paddingMed3h { padding: 0 3em; }
	.paddingMed3v { padding: 3em 0; }
	.header .block { justify-content: space-between; }
	.mainMenu { display: block; width: 4.4em; height: 4.4em; float: right; margin: 3em; }
	.mainMenuIcon { display: block; }
	.mainMenu > ul { float: none; margin: 0; padding: 60px 0 10px 0; position: absolute; right: 2em; background: #FFFFFF; border: 1px solid #AC6600; top: 2em;  height: 0; max-width: 80%; min-width: 30%; opacity: 0; display: block; -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; }
	.mainMenu > ul > li { float: none; text-align: right; white-space: nowrap; padding: 0.5em 1em; }
	.mainMenu li a { display: block; }
	.mainMenu ul > li:hover ul { visibility: hidden; }
	.mainMenu.expand ul { display: block; z-index: 1; opacity: 1; height: auto; -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; }
	.mainMenu.expand ul > li > a { color: #000000; }
	.mainMenu.expand ul > li > a:hover { color: #AC6600; }
	.mainMenu.fullRight li, .mainMenu.fullLeft li { padding: 0.5em 2em; }
	.mainMenu.fullRight ul { padding: 10em 0 0 0; border: none; border-left: 1px solid #AC6600; top: 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; }
	.mainMenu.fullRight.expand ul { right: 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; }
	.mainMenu.fullLeft { width: auto; order: -1; }
	.mainMenu.fullLeft ul { left: 0; right: auto; padding: 10em 0 0 0; border: none; border-right: 1px solid #AC6600; top: 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; }
	.mainMenu.fullLeft > ul > li { text-align: left; }
	.mainMenu.fullLeft.expand ul { left: 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; }
	.mainMenu.expand .mainMenuIcon span { height: 0.6em; border-radius: 0.5em; background-color: #000000; }
	.mainMenu.expand .mainMenuIcon:hover span, .fixHeader .header.overlay .mainMenu .mainMenuIcon:hover span { background-color: #AC6600; }
	.mainMenu.expand .mainMenuIcon span:nth-child(1) { top: 1em; width: 0%; left: 50%; }
	.mainMenu.expand .mainMenuIcon span:nth-child(2) { -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
	.mainMenu.expand .mainMenuIcon span:nth-child(3) { -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
	.mainMenu.expand .mainMenuIcon span:nth-child(4) { top: 1em; width: 0%; left: 50%; }
	.fixHeader .header.overlay .mainMenu .mainMenuIcon span { background-color: #000000; }
}

/* Small screens column setup */
@media (min-width: 768px) and (max-width: 959px) {
	.block { width: 100%; }
	.row10 > .colMed0  { width: 0%; }
	.row10 > .colMed1  { width: 10%; }
	.row10 > .colMed2  { width: 20%; }
	.row10 > .colMed3  { width: 30%; }
	.row10 > .colMed4  { width: 40%; }
	.row10 > .colMed5  { width: 50%; }
	.row10 > .colMed6  { width: 60%; }
	.row10 > .colMed7  { width: 70%; }
	.row10 > .colMed8  { width: 80%; }
	.row10 > .colMed9  { width: 90%; }
	.row12 > .colMed0  { width: 0%; }
	.row12 > .colMed1  { width: 8.33%; }
	.row12 > .colMed2  { width: 16.66%; }
	.row12 > .colMed3  { width: 25%; }
	.row12 > .colMed4  { width: 33.33%; }
	.row12 > .colMed5  { width: 41.66%; }
	.row12 > .colMed6  { width: 50%; }
	.row12 > .colMed7  { width: 58.33%; }
	.row12 > .colMed8  { width: 66.66%; }
	.row12 > .colMed9  { width: 75%; }
	.row12 > .colMed10 { width: 83.33%; }
	.row12 > .colMed11 { width: 91.66%; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
/*	html { font-size: 50%; }						 11.2px */
	.block { width: 100%; float: none; }
	.tablet { display: none; }
	.mobile { display: block; }
	.logo { left: 0; }
	.marginSmall0 { margin: 0; }
	.marginSmall1 { margin: 1em; }
	.marginSmall1h { margin: 0 1em; }
	.marginSmall1v { margin: 1em 0; }
	.marginSmall2 { margin: 2em; }
	.marginSmall2h { margin: 0 2em; }
	.marginSmall2v { margin: 2em 0; }
	.marginSmall3 { margin: 3em; }
	.marginSmall3h { margin: 0 3em; }
	.marginSmall3v { margin: 3em 0; }
	.paddingSmall0 { padding: 0; }
	.paddingSmall1 { padding: 1em; }
	.paddingSmall1h { padding: 0 1em; }
	.paddingSmall1v { padding: 1em 0; }
	.paddingSmall2 { padding: 2em; }
	.paddingSmall2h { padding: 0 2em; }
	.paddingSmall2v { padding: 2em 0; }
	.paddingSmall3 { padding: 3em; }
	.paddingSmall3h { padding: 0 3em; }
	.paddingSmall3v { padding: 3em 0; }
	.row10 > .colSmall0  { width: 0%; }
	.row10 > .colSmall1  { width: 10%; }
	.row10 > .colSmall2  { width: 20%; }
	.row10 > .colSmall3  { width: 30%; }
	.row10 > .colSmall4  { width: 40%; }
	.row10 > .colSmall5  { width: 50%; }
	.row10 > .colSmall6  { width: 60%; }
	.row10 > .colSmall7  { width: 70%; }
	.row10 > .colSmall8  { width: 80%; }
	.row10 > .colSmall9  { width: 90%; }
	.row12 > .colSmall0  { width: 0%; }
	.row12 > .colSmall1  { width: 8.33%; }
	.row12 > .colSmall2  { width: 16.66%; }
	.row12 > .colSmall3  { width: 25%; }
	.row12 > .colSmall4  { width: 33.33%; }
	.row12 > .colSmall5  { width: 41.66%; }
	.row12 > .colSmall6  { width: 50%; }
	.row12 > .colSmall7  { width: 58.33%; }
	.row12 > .colSmall8  { width: 66.66%; }
	.row12 > .colSmall9  { width: 75%; }
	.row12 > .colSmall10 { width: 83.33%; }
	.row12 > .colSmall11 { width: 91.66%; }
	.bg.parallax { background-size: auto; background-repeat: no-repeat; }
	.tab, .pill { border: none; height: auto; }
	.csContainer.tab > .item, .csContainer.pill > .item, .csContainer.tab > .item > .title, .csContainer.pill > .item > .title { position: relative; }
	.tab > .item > .title, .pill > .item > .title  { position: relative; width: 100%; color: #203A59; background: #edf1f6; border: 1px solid transparent; border-radius: 0; padding: 0.6em 1em; margin: 0 0 10px 0!important; top: initial!important; left: initial!important; }
	.tab > .item > .title::after, .pill > .item > .title::after { position: absolute; right: 0.5em; font-size: 150%; font-weight: bold; content: "+"; opacity: 1; }
	.tab > .active > .title, .pill > .active > .title { border: 1px solid #B5C2D1; color: #203A59; background: #FFFFFF; }
	.tab > .active > .title::after, .pill > .active > .title::after { opacity: 0; }
	.tab > .item > .title:hover, .pill > .item > .title:hover { background: #203A59; color: #FFFFFF; }
	.tab > .active > .title:hover, .pill > .active > .title:hover { color: #AC6600; background: #FFFFFF; cursor: initial; }
	.tab > .item > .content, .pill > .item > .content { margin: 1em;  border: none; padding: 0; }
	.selector { justify-content: flex-start; flex-wrap: wrap; }
	.selector label { margin: 0 1em 1em 0; }

}
@media (min-width: 481px) and  (max-width: 767px) {
	/* Define extra small colums */
}

/* Landscape phones and down */
@media (max-width: 480px) {
	
}


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