@charset "UTF-8";
/* "PILLS & POPS" design framework by Ciarán O'Kelly - September 2020 */
/**************************** SETUP **************************/
*{ margin:0; padding:0; box-sizing:border-box; }
::selection , input::selection{ background:var(--hcol); color:var(--bgcol); }
::-webkit-scrollbar{ width:12px; height:10px; }
::-webkit-scrollbar-thumb{ background:#DDD; border:solid 2px #FFF; border-radius:50px; box-shadow:1px -1px 5px rgba(0,0,0,0.1) inset; transition:background 300ms; }
::-webkit-scrollbar-thumb:hover{ background:var(--hcol); }
::-webkit-scrollbar-thumb:active{ background:var(--h2col); }
::placeholder{ font-size:10px; color:#AAA; text-transform:uppercase; font-weight:bold; letter-spacing:normal; transform:translate3d(0,-2px,0); }
.selectable, .selectable *,.noselect .selectable, .noselect .selectable *{ -webkit-user-select:text!important; user-select:text!important; cursor:text; }
input,textarea{ cursor:text; user-select:auto; font-family:'roboto'; }
input:focus, textarea:focus, select:focus,button{ outline:none!important; }
textarea::placeholder{ text-transform:none; font-size:12px; }

/**************************** ROOT STYLES **************************/
html,body{ padding:0; margin:0; min-height:100%; background-color:var(--bgcol); }
body{ font-family:Roboto, Arial, Helvetica, sans-serif; font-size:16px; color:var(--txtcol); }
table{ border-collapse:collapse; border-spacing:0; width:-webkit-fill-available; }
a{ text-decoration:none; color:inherit; }
	a:hover{ color:var(--hcol); }
	a img{ border:0; }

hr{ clear:both; margin:15px 0; height:3px; border:0;  }
	hr.thin{ height:1px; }
	hr.thick{ height:6px; }
	hr.xthick{ height:10px; }
svg, .svg{ display:inline-block; fill:currentColor; width:20px; font-size:20px; height:auto; line-height:100%; vertical-align:middle; pointer-events:none; }
	/*DEPRECATED*/ svg.round, .svg.round{ fill:#666; background:#DDD; border-radius:50%; padding:3px; width:25px; }

/**************************** BUTTONS **************************/
/* HOW TO USE:always add btn class, then choose a btn style, then choose a background colour all below:*/
/* base style */
.btn{ cursor:default; font-size:10px; font-family:Roboto, Arial, Helvetica, sans-serif; font-weight:600; text-transform:uppercase; text-align:center; display:inline-block; position:relative; vertical-align:middle; border:0; border-radius:3px; background-color:#999; color:#FFF; line-height:40px; padding:0 20px; user-select:none; transition:background 300ms; }
	.btn:hover, .btn.on{ background-color:var(--hcol); color:#FFF; }
	.btn>svg, .btn>.svg{ width:16px; margin:-2px 7px 0 -10px; vertical-align:middle; }
	.btn:hover>svg{ color:currentColor; }
	.btn.alignR>svg, .btn.alignR>.svg{ margin-left:2px; margin-right:-7px; }
	.btn:not(.roundbtn)>svg:only-child, .btn:not(.roundbtn)>.svg:only-child{ margin:0; }
	.btn:not(.dropdown):active{ transform:scale(0.95); filter:brightness(1.15); transition:all 300ms; }
	.notouch .btn{ display:none; }
	.btn.small{ line-height:20px; padding:0 10px; }
	.btn.medium{ line-height:30px; }
	.btn.large{ line-height:50px; padding:0 30px; }
	.btn .underbtn, .btn .overbtn { position:absolute; bottom:0; left:50%; min-width:100%; text-shadow:none; white-space:normal; transform:translate(-50%,140%); line-height:140%; }
	.btn .overbtn{ bottom:auto; top:0; transform:translate(-50%,-140%); }

	/* btn color customisations */
	.btn.h3back:hover{ background:color-mix(in srgb, var(--h3col), #FFF 10%); }
	.btn.whiteback{ box-shadow:inset 0px 0px 0px 3px #DDD; transition:box-shadow 300ms; }
		.btn.whiteback.medium, .btn.whiteback.small{  box-shadow:inset 0px 0px 0px 2px #DDD; }
		.btn.whiteback.noborder{ box-shadow:none!important; }
		.btn.whiteback:hover, .btn.whiteback.on{ background-color:#FFF; box-shadow:inset 0px 0px 0px 3px var(--hcol), inset 0 0 1px rgba(0,0,0,1); color:var(--hcol); }

	/* btn types */
	.delbtn{ line-height:40px; height:40px; width:40px; padding:0!important; border-radius:50%; } /*DEPRECATED - use .roundbtn instead*/
		.delbtn.small{ line-height:20px; height:20px; width:20px; }
		.delbtn.large{ line-height:40px; }
	.pillbtn{ border-radius:50px; padding:0px 35px; line-height:40px; white-space:nowrap; transition:background 300ms; }
		.pillbtn.greyback{ border:0; }
		.pillbtn:before{ margin:0 3px 0 -20px; }
		.pillbtn.small{ padding:0 15px; }
		.pillbtn.small.whiteback:not(.noborder){ box-shadow:inset 0px 0px 0px 2px #DDD; }
		.pillbtn.medium{ padding:0 25px; }
		.pillbtn.large{ padding:0 50px; }
		.pillbtn.large svg{ width:20px; margin:-4px 2px 0 -7px; }

	.roundbtn{ width:50px; height:50px; line-height:50px; border-radius:500px; padding:0!important; transition:background 200ms; border:0; }
		.roundbtn.xxsmall{ width:20px; height:20px; line-height:20px; }
		.roundbtn.xsmall{ width:30px; height:30px; line-height:30px; }
			.roundbtn.xsmall>svg, .roundbtn.xsmall>.svg{ width:16px; margin:0; }
		.roundbtn.small{ width:40px; height:40px; line-height:40px; }
			.roundbtn.small.outlined{ box-sizing:border-box; }
			.roundbtn.small.dropdown:before{ margin:0 5px 0 -5px; }
		.roundbtn.large{ width:60px; height:60px; line-height:60px; }
		.roundbtn.xlarge{ width:70px; height:70px; line-height:70px; }
		.roundbtn.xxlarge{ width:90px; height:90px; line-height:90px; }
		.roundbtn>span.smallTxt,
			.roundbtn>span.xsmallTxt{ position:absolute; top:7px; line-height:100%; width:100%; left:0; }
		.roundbtn.xlarge>.smallTxt,
			.roundbtn.xlarge>.xsmallTxt,
			.roundbtn.xxlarge>.smallTxt,
			.roundbtn.xxlarge>.xsmallTxt{ top:20px; }
		.roundbtn.xlarge>.smallTxt+span{ display:block; margin-top:2px; }
		.roundbtn>svg, .roundbtn>.svg{ margin:-1px 0 3px; }
			.roundbtn .btnLabel{ position:absolute; bottom:-10px; left:50%; transform:translate(-50%, 100%); line-height:100%; }

	.arrowbtn.on{ color:var(--hcol); background:transparent; position:relative; }
		.arrowbtn.on:after{ content:''; border-style:solid; border-width:7px 5px 0 5px; border-color:var(--hcol) transparent transparent transparent; position:absolute; left:50%; bottom:0; transform:translate(-50%,100%); }
	.CTAbtn{ text-shadow:0 0 4px #0006; }
		.CTAbtn:after{ content:'►'; margin-left:3px; font-size:70%; vertical-align:middle; }
		.CTAbtn.dropdown:after{ transform:rotate(90deg); display:inline-block; margin:0 -15px 0 15px; }
		.CTAbtn:hover, .CTAbtn:active{ filter:brightness(1.15); color:#FFF; }
	.iconbtn{ background:transparent; transition:color 300ms; }
		.iconbtn:hover, .iconbtn:after, .iconbtn.on{ background:transparent; color:var(--hcol); }
		.iconbtn>svg{ margin:0 }
		.iconbtn:not(.small)>svg{ width:30px; }
	.txtlink{ color:var(--hcol); border-bottom:dotted 1px currentColor; cursor:pointer; transition:background 250ms, color 250ms; }
		.txtlink:hover{ background:#EEE; }
	.hoverShow, .hoverBtn{ opacity:0; pointer-events:none; transition:opacity 300ms; }
		.hoverParent:hover .hoverShow, :hover>.hoverShow, .hoverParent:hover .hoverBtn, :hover>.hoverBtn{ pointer-events:all; opacity:1; transform:scale(1)!important; }
	.hoverGrow{ transition:transform 200ms; }
		.hoverGrow:hover, .hoverParent:hover .hoverGrow:hover{ transform:scale(1.08)!important; }
		.hoverGrow.hoverShow{ transform:scale(0.5); transition:opacity 300ms, transform 200ms; }

/**************************** COMPONENTS **************************/
.counter{ position:absolute; background:#333; color:#FFF; width:20px; display:inline-block; border-radius:50px; margin:-2px 4px -2px 0; height:20px; line-height:21px; text-align:center; font-size:12px; font-weight:900; font-style: normal; letter-spacing:-1px; text-indent:-1px; }
	.counter:empty{ display:none; }
	.counter.xxsmall{ width:8px; height:8px; line-height:8px; font-size:8px; }
	.counter.xsmall{ width:12px; height:12px; line-height:12px; font-size:10px; }
	.counter.small{ width:16px; height:16px; line-height:16px; font-size:10px; }
	.counter.medium{ width:24px; height:24px; line-height:24px; }
	.counter.large{ width:32px; height:32px; line-height:32px; }
	.counter.xlarge{ width:40px; height:40px; line-height:40px; }
	.counter.inline{ position:relative; margin:0; vertical-align:middle; }
	h5>.counter:not(.inline){ margin:-4px -25px; }
		h5>.counter.small:not(.inline){ margin:-2px -20px; }
		h5>.counter.large:not(.inline){ margin:-13px -45px; }
		h5>.counter.inline{ margin:-2px 4px -2px -15px; }

.spacer{ text-align:center; color:#444; padding:10px 10px; font-size:10px; text-transform:uppercase; line-height:normal; font-weight:bold; margin:30px 0 5px 0; clear:both; border-radius:3px; }
	.spacer.pill, .spacer.round{ display:table; margin:30px auto 5px; border-radius:50px; padding:3px 13px; }
	.spacer.pill.small, .spacer.round.small{ padding:0px 13px; }
	.spacer:not(:empty):before, .spacer:not(:empty):after { content:" ● "; margin:-2px 5px 0; display:inline-block; font-size:5px; vertical-align:middle; line-height:100%; }
	.spacer.lines:not(:empty):before, .spacer.lines:not(:empty):after{ content:" ⎻⎻⎻⎻ "; font-size:9px; margin:0 5px; }
	.spacer.simple:before, .spacer.simple:after{ display:none; }
	.spacer.full{display: block;}
	.spacer.nomargin{margin: 0 auto 5px!important;}
	.spacer.medium{ padding: 0 20px; line-height: 25px; }
	.spacer.large{ padding: 0 25px; line-height: 30px; margin-bottom:10px; }
	.spacer.xlarge{ padding: 0 35px; line-height: 35px; margin-bottom:10px; }

.dropdown{ position:relative; z-index:1; }
	.dropdown:not(.noarrow):before{ content:"▼"; font-size:8px; float:right; margin:0 -10px 0 7px; }
	.dropdown>.drop{ position:absolute; box-shadow:1px 2px 8px #0007; width:auto; min-width:100%; max-height:70vh; overflow-y:auto; z-index:-1; left:0; border-radius:25px; text-align:left; text-transform:none; transition:opacity 200ms, transform 200ms; }
	.dropdown>.drop.alignR{ left:auto; right:0; }
	.dropdown>.drop.alignC{ left:50%; transform:translateX(-50%); }
	/* .dropdown.pill:before{ margin:0 5px 0 -5px; } */
		.dropdown>.drop.up{ bottom:40px; }
		.dropdown:not(.on)>.drop{ opacity:0; pointer-events:none; transform:translateY(-30px); }
		.dropdown:not(.on)>.drop.alignC{ transform:translate(-50%,-30px); }
		.dropdown:not(.on)>.drop.up{ transform:translateY(30px); }
	.dropdown .drop>a{ display:block; line-height:42px; padding:0 30px; margin:0 0 0 -5px; white-space:nowrap; transition:background 300ms; }
		.dropdown .drop>a:first-of-type{ padding-top:7px; }
		.dropdown .drop>a:last-of-type{ padding-bottom:5px; }
		.dropdown .drop>a:hover{ background:#0001; }
		.dropdown .drop>a:active{ background:var(--hcol); color:#FFF; }
		.dropdown .drop>a svg,
			.dropdown .drop>a .svg{ margin:-1px 5px 1px -5px; transform:scale(0.8); }
		.dropdown .drop>a.alignR svg,
			.dropdown .drop>a.alignR .svg{ margin:-1px -5px 1px 5px; }
	.dropdown.maximised.on{ display:flex; justify-content:center; flex-wrap:wrap; align-content:flex-start; }
		.dropdown.maximised.on a{ padding:0 60px; font-size:20px; height:65px; margin:10px 5px; line-height:58px; }
		.dropdown.maximised.on a:active{ transform:scale(0.9); }
		.dropdown.maximised.on:not(.noarrow):before{ display:none; }


.accordion>span { display: block; }
	.accordion>span:not(.noarrow):before {content:''; display: inline-block; border-style:solid; border-width:4px 0 4px 6px; border-color:transparent transparent transparent currentColor; display:inline-block; margin:0 5px 0 -12px;; transition: transform 200ms; overflow: hidden;}
	.accordion>span:hover, .accordion.on>span { color: var(--hcol); }
	.accordion>span>svg { margin-top: -3px; }
	.accordion.on>span:before { transform:rotate(90deg); }
	.accordion .drop{ max-height: 0; margin-left: 10px; line-height: 30px; overflow: hidden; transition:max-height 300ms}
	.accordion.on .drop{ max-height: 200px; overflow-y: auto; clear:both; }

 /*DEPRECATED*/ .LRbtns{ display:inline-block; text-align:center; }
	.LRbtns>span{ display:inline-block; width:130px; vertical-align:middle; }

/**************************** CONTAINERS **************************/

/* LAYOUTS */
.hcenter{position:absolute; left:50%; transform:translateX(-50%);}
.vcenter{position:absolute!important; top:50%; transform:translateY(-50%);}
.hcenter.vcenter{ transform:translate(-50%,-50%);}
.hscroll{ overflow-x: auto;}
.vscroll{ overflow-y: auto;}

/* hflex or vflex applies to parents */
.hflex{ display:flex!important; align-items:baseline; }
	.hflex>*, .vflex>*{ flex-grow:1; }
.vflex{ display:flex!important; flex-flow:column nowrap; }
.hflex.alignC, .vflex.alignC{ align-items:center; }
.hflex.alignT, .vflex.alignL{ align-items:flex-start; }
.hflex.alignB, .vflex.alignR{ align-items:flex-end; }

/* hsplit applies directly on children for a split layout without a container */
.hsplit{ display:inline-block; margin-right:-2px; height:100%; vertical-align:top; }
	.hsplit2{ width:50%; }
	.hsplit3{ width:33%; }
	.hsplit4{ width:25%; }

/* masonary wall layouts with horizontal or vertical lines */
.hwall{ display:flex; flex-wrap:wrap; }
	.hwall>*{ flex:1 0 auto; }
.vwall{ display:flex; flex-direction:column; flex-wrap:wrap; }

/*header/footer which sticks to the bottom*/
.fixedheader, .fixedfooter{ transform:translate(0); }
	.fixedheader .header, .fixedheader header{ position:sticky; top:0 }
	.fixedfooter .footer, .fixedfooter footer{ position:sticky; bottom:0; }

/*footer which sticks to the bottom but moves down with scroll content */
.stickyfooter{ display:flex; flex-direction:column; }
	.stickyfooter .footer, .stickyfooter footer{ margin-top:auto; }

/* TABS & POPUPS, ETC */
.popup{ background:rgba(0,0,0,0.2); display:block!important; position:fixed; top:0; left:0; bottom:0; right:0; opacity:0; transition:opacity 500ms; pointer-events:none; z-index:2; }
	.popup.dark{ background-color:rgba(0,0,0,0.85); }
	.popup.slideL, .popup.slideR{ opacity:1!important; }
	.popup.slideL .popwindow{ transform:scale(0.8) translate(-200%,-50.1%)!important; }
	.popup.slideR .popwindow{ transform:scale(0.8) translate(200%,-50.1%)!important; }
	.popup.on{ opacity:1; pointer-events:all; }
	.popup:not(.on){ z-index:-2!important; transition:opacity 500ms, z-index 500ms 0ms; }
	.popwindow{ position:fixed; z-index:1; left:50%; top:50%; background:#FFF; color:#444; box-shadow:1px 1px 15px rgba(0,0,0,0.8); width:1000px; max-width:100%; min-height:250px; max-height:calc(100% - 40px); padding:10px; transform:scale(0.7) rotateZ(5deg) translate(-70%,-40%); pointer-events:none; transition:all 300ms; text-align:center; border-radius:30px; }
		.popup.on .popwindow{ pointer-events:all; transform:scale(1) translate(-50%,-50.1%)!important; }
			.popwindow>.delbtn{ position:absolute; right:-10px; top:-10px; z-index:9; }
			.popwindow.half{ width:650px; }
			.popwindow.clearback{ height:90%; padding-top:10%; box-shadow:none; color:#FFF; }

			.popwindow.round{ width:400px; border-radius:50%; height:400px; }
				.popwindow.round>.delbtn{ margin:50px; }
				.popwindow.round>.btn+.btn{ margin-left:5px; }
				.popwindow.round>.delbtn+h3{ margin:35px 60px 5px 60px; }
				.popwindow.round>p{ max-width:80%; margin:0 auto; }
				.popwindow.round.large{ width:550px; height:550px; }
					.popwindow.round.large>.delbtn{ margin:75px; }
					.popwindow.round.large>.delbtn+h3{ margin:65px 80px 5px; }

			.popwindow.pill, .popwindow.longpill{ border-radius:500px; min-height:150px; display:flex; justify-content:center; flex-direction:column; width:600px; padding:10px 60px; }
				.popwindow.pill>.delbtn{ margin:15px; }
				.popwindow.pill>.pillbtn, .popwindow.longpill>.pillbtn{ margin:10px auto -10px; }
			.popwindow.longpill{ width:1000px; padding:35px 50px 70px; }
				.popwindow.pill>.delbtn, .popwindow.longpill>.delbtn{ margin:10px 20px; }
				.popwindow.pill .footer{ margin-top:10px; }
				.popwindow.pill .footer .btn{ min-width:110px; }

		.popwindow>.header{ margin:-10px -10px 10px -10px; border-radius:20px 20px 0 0; padding:10px; }

		.popwindow>.page>.tabmenu{ padding:10px; border-radius:100px; background:#0005; display:inline-block; }
			.popwindow>.page>.tabmenu .btn{ margin:0 20px; }
			.popwindow>.page>.tabmenu .btn.on{ background:#FFF; color:#333; }
			.popwindow>.page>.tabmenu .btn.on:after{ content:''; border-style:solid; border-width:9px 6px 0 6px; border-color:transparent; border-top-color:#FFF; position:absolute; left:50%; margin-left:-6px; bottom:-7px; }
	.popwindow .popnest{ width:100%; max-height:calc(var(--scaled-height, 100vh) - 70px); overflow-y:auto; padding: 20px 50px; box-sizing: border-box;margin: 15px 0}
.tab{ display:none; }
	.tab.on{ display:block; }

.slides{ position:absolute; width:100%; overflow:visible; white-space:nowrap; transition:transform 400ms; }
	.slides>.slide{ display:inline-block; position:relative; width:100%; vertical-align:middle; opacity:0; transition:opacity 200ms; pointer-events:none; }
	.slides>.slide.on{ opacity:1; pointer-events:all; }

.placeholder:empty:before{ content:'No content'; font-size:16px; color:#AAA; font-style:italic; text-align:center; padding:20px; font-weight:bold; display:block; }

.raisedList{ background-color:#FCFCFC; padding:5px; }
	.raisedList>*:not(.notRaised){ background-color:transparent; border-bottom:solid 2px rgba(0,0,0,0.02); border-radius:10px; transition:all 250ms; }
	.raisedList>*:not(.notRaised):hover, .raisedList>*:not(.notRaised).on{ background-color:#FFF; border-color:transparent; box-shadow:0 0 15px rgba(0,0,0,0.1); position:relative; z-index:1; }
	.raisedList>*:not(.notRaised).on{ box-shadow:0 0 20px rgba(0,0,0,0.15); }

/**************************** FORMS **************************/
label{ display:block; position:relative; }
	form input, form textarea{ width:100%; font-family:roboto; font-weight:900; background:transparent; }
	form textarea{ font-weight:normal; padding:15px 25px; }
	form input:focus, form input[value]:not([value='']){ background:#FFF; }
	form input:focus, form input:not(:placeholder-shown), form textarea:focus{ color:var(--hcol); }
	/*DEPRECIATED:(use hsplit or hflex)*/
	form .split>label{ display:inline-block; margin-left:-2px; }
	form .split2>label{ width:50%; }
	form .split3>label{ width:33%; }
	form .split4>label{ width:25%; }

	.pillform input{ height:50px; border:solid 3px #DDD; border-radius:60px; text-align:center; transition:all 300ms; }
	.pillform input:hover, .pillform input:active, .pillform input:focus{ border-color:currentColor; }
		.pillform input.small{ height:40px; }
		.pillform input.inline{ width:auto; }
		.pillform input.withsubmit{ padding-right:5px; margin-right:-30px; }
	/* .pillform .split>label input{ border-radius:0; border-left:0; border-right:0; }
	.pillform .split>label:first-child input{ border-radius:50px 0 0 50px; border-left:solid 3px #DDD; }
	.pillform .split>label:last-child input{ border-radius:0 50px 50px 0; border-right:solid 3px #DDD; } */

	label>svg{ position:absolute; top:50%; left:0; margin:0!important; transform:translate(50%, -50%); }
		label>svg+input{ padding-left:30px; }

/**************************** FORM ELEMENTS **************************/
/* FANCY CHECKBOXES:*/
input[type=checkbox]{ display:none!important; }
	input[type=checkbox]+label:hover{ background:rgba(0,0,0,0.05); }
	input[type=checkbox]+label:before, .checkbox:before{ content:"\2714\FE0E\a0"; color:rgba(0,0,0,0.3); display:inline-block; width:22px; height:22px; line-height:22px; vertical-align:middle; margin-right:8px; background-color:rgba(0,0,0,0.1); border-radius:50%; transition:all 200ms; text-align:center; font-size:10px; font-weight:900; }
	input[type=checkbox]+label:hover:before, .checkbox:hover:before { background-color:rgba(0,0,0,0.15); transform:scale(1.15); }
	input[type=checkbox]+label.selectall:before{ border:dotted 2px; background:transparent; }
	input[type=checkbox]+label.fr:before{ float:right; margin-left:8px; margin-right:5px; }
	input[type=checkbox]:checked + label:before, .checkbox.on:before{ color:white;	background-color:var(--hcol); }
	input[type=checkbox]:checked:disabled + label:before{ color:#888; background-color:#DDD; cursor:not-allowed; }
	input[type=checkbox]:checked:disabled + label{ color:#AAA; background:transparent; }

/* TOGGLE SWITCHES:*/
.toggle{ display:inline-block; width:44px; height:15px; background:#DDD; color:#999; border-radius:10px; margin:2px 5px; padding:0; position:relative; transition:background 400ms ease 200ms; vertical-align:top; }
	.toggle:before{ content:'OFF'; text-align:right; font-size:8px; font-weight:bold; line-height:15px; font-family:Arial; display:block; padding:0 6px 0 7px; }
	.toggle:after{ content:''; display:block; width:17px; height:17px; border:solid 2px #CCC; background:#FFF; border-radius:50%; position:absolute; top:-3px; left:-1px; transition:left 250ms; }
	.toggle:hover{ color:#555; box-shadow:1px 1px 3px rgba(0,0,0,0.2) inset; background:#DDD; }
		.toggle:hover:after{ box-shadow:0px 1px 6px rgba(0,0,0,0.3); border-color:#AAA; }
	.toggle.on{ background:var(--hcol); color:#FFF; text-align:left; box-shadow:1px 1px 3px rgba(0,0,0,0.2) inset; }
		.toggle.on:before{ content:'ON'; text-align:left; }
		.toggle.on:after{ left:23px; border-color:var(--hcol); }
	.toggle.nolabels{width:30px; height:7px; margin-top:7px;}
		.toggle.nolabels:before{content:none;}
		.toggle.nolabels:after{top:-6px; width:15px; height:15px;}
		.toggle.nolabels.on:after{left:12px;}

/**************************** COLOURS **************************/
/* VARIABLES */
:root{
	--hcol:#0081B5;
	--h2col:#F60;
	--txtcol:#333;
	--bgcol:#FFF;
	--bgcol2:#E9E9E9;
}
:root.dark{
	--hcol:#0081B5;
	--h2col:#F60;
	--txtcol:#FFF;
	--bgcol:#222;
	--bgcol2:#191919;
}

/* BACKGROUND */
.raised{ border:0; box-shadow:1px 1px 8px rgb(0 0 0 / 30%)!important; transition:box-shadow 300ms; }
	.raised:hover{ box-shadow:1px 1px 10px rgb(0 0 0 / 80%)!important; }
.raised.light{ box-shadow:0px 3px 30px rgb(0 0 0 / 10%)!important; }
	.raised.light:hover{ box-shadow:0px 3px 12px rgb(0 0 0 / 30%)!important; }
.raised.xlight{ border:inherit; box-shadow:none!important; }
	.raised.xlight:hover{ box-shadow:0px 2px 12px rgb(0 0 0 / 15%)!important; }
.raised.dark{ box-shadow:0px 3px 20px rgb(0 0 0 / 50%)!important; }
	.raised.dark:hover{ box-shadow:0px 3px 10px rgb(0 0 0 / 80%)!important; }
.outlined{ background:transparent; border:solid 2px currentColor; box-sizing:content-box; margin:-2px; }
	.outlined.thick{ border-width:3px; margin:-3px; }
.whiteback{ background-color:#FFF; color:#777; }
	.whitebackfadeup{ background-color:#FFF; background:linear-gradient(0deg, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%); }
	.whitebackfadedown{ background-color:#FFF; background:linear-gradient(180deg, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%); }
.blackback{ background-color:#333; }
.greyback{ background:#999; }
	.lgreyback{ background:#EEE; color:#555; }
	.dgreyback{ background:#666; }
.bgback{ background-color:var(--bgcol); }
	.bg2back{ background-color:var(--bgcol2); }
.hback{ background-color:var(--hcol); color:#FFF; }
	.h2back{ background-color:var(--h2col); color:#FFF; }
	.h3back{ background-color:var(--h3col); color:#FFF; }
.shadowback{ background:rgba(30,30,30,0.7); text-shadow:0 0 6px #000; }
	.lshadowback{ background:rgba(0,0,0,0.07); color:#555; }
	.shadowback .whiteback, .shadowback .lgreyback{ text-shadow:none; }
.clearback:not(.btn), .btn.clearback:not(:hover){ background:transparent!important; }

/* FOREGROUND */
.black{ color:#333; }
.white{ color:#FFF; }
.dgrey{ color:#666; }
.grey{ color:#AAA; }
.lgrey{ color:#DDD; }
.txtcol{ color:var(--txtcol); }
.hcol{ color:var(--hcol); }
.h2col{ color:var(--h2col); }


/**************************** FONTS **************************/
h1,h2,h3,h4,h5,h6{ line-height:110%; margin-bottom:5px; text-align:center; font-weight:normal; }
h1{ font-size:30px; font-family:roboto; font-weight:bold; letter-spacing:-1px; }
h2{ letter-spacing:-1px; }
h3{ font-size:24px; letter-spacing:-1px; }
h4{ font-size:18px; font-weight:900; }
h5{ text-transform:uppercase; font-size:10px; background:#EEE; padding:5px 20px; margin:5px; border-radius:50px; display:table; margin:10px auto 5px; font-weight:bold; }

.xsmallTxt{ font-size:8px; }
.smallTxt{ font-size:10px; }
.mediumTxt{ font-size:12px; }
.largeTxt{ font-size:16px; }
.xlargeTxt{ font-size:20px; letter-spacing:-1px; }
.xxlargeTxt{ font-size:32px; letter-spacing:-1.5px; }
.xxxlargeTxt{ font-size: 60px;  letter-spacing: -2px; }
.caps{ text-transform:uppercase; }
.arial{ font-family:Arial,sans-serif; }
.ellipsesH, .ellipsesV{ display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ellipsesV{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

/*sub headings*/
h1>.smallTxt, h2>.smallTxt, h3>.smallTxt,
h1>.mediumTxt, h2>.mediumTxt, h3>.mediumTxt{ display:block; line-height:140%; margin-top:5px; letter-spacing:normal; }

/**************************** MODIFIERS **************************/
.fc{ margin-left:auto; margin-right:auto; display:table; }
.fl{ float:left!important; }
.fr{ float:right!important; }
.clear{ clear:both; }
.c{ text-align:center!important; }
.l{ text-align:left!important; }
.r{ text-align:right!important; }
.b{ font-weight:bold!important; }
.xb{ font-weight:900!important; }
.i{ font-style:italic!important; }
.s{ text-decoration:line-through!important; }
.u{ border-bottom:dotted 2px currentColor; }
.prefade{ opacity:0!important; transform:scale(0.8); transition:all 300ms!important; }
.inline{ display:inline-block; }
.block{ display:block; }
.rel{ position:relative; }
.abs{ position:absolute; }
.fixed{ position:fixed; }
.corner0{ border-radius:0px!important; }
.corner10{ border-radius:10px!important; }
.corner25{ border-radius:25px!important; }
.corner50{ border-radius:50px!important; }
.round{ border-radius:500px!important; padding:0; }
.pill{ border-radius:500px!important; padding-left:5px; padding-right:5px; }
	.splitpill:first-of-type{ border-radius: 500px 0 0 500px;}
	.splitpill:last-of-type{ border-radius: 0 500px 500px 0;}
	.splitpill:only-of-type{ border-radius: 500px;}
	.rightpill{ border-radius: 0 50px 50px 0; padding-right:5px;}
	.leftpill{ border-radius: 50px 0 0 50px; padding-left:5px; }
.noborder{ border:0!important; }
.nopad{ padding:0!important; }
.nomargin{ margin:0!important; }
.nocaps{ text-transform:none!important; }
.nowrap{ white-space:nowrap!important; }
.noshadow{ box-shadow:none!important; text-shadow:none!important; }
.notouch{ pointer-events:none!important; }
.noselect, .noselect *{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none!important; cursor:auto }
.mobileOnly, .printOnly{ display:none!important; }
.full{ width:100%; }
.half{ width:50%; }
.third{ width:33%; }
.third2{ width:66%; }
.quarter{ width:25%; }
.hidden{ display:none!important; pointer-events:none; }
.invis{ visibility:hidden!important; }
.disabled{ filter:grayscale(1); opacity:0.6; pointer-events:none; }
.greyscale{ filter:grayscale(1); }
.pointer{ cursor:pointer; }
.flipH{ transform:scaleX(-1); }
.flipV{ transform:scaleY(-1); }
.rot90{ transform:rotate(90deg); }
.rot-90{ transform:rotate(-90deg); }
.grow{ flex-grow:1; }
.nogrow{ flex: 0 0 auto; }
.multiline{ transform:translateY(-50%); top:50%; position:relative; line-height:140%; }

/* Padding modifiers */
.pv05 { padding-top:5px; padding-bottom:5px; }
.pv1 { padding-top:10px; padding-bottom:10px; }
.pv2 { padding-top:20px; padding-bottom:20px; }
.pv3 { padding-top: 30px; padding-bottom: 30px; }
.pv4 { padding-top: 40px; padding-bottom: 40px; }
.pv5 { padding-top: 50px; padding-bottom: 50px; }
.ph05 { padding-left:5px; padding-right:5px; }
.ph1 { padding-left:10px; padding-right:10px; }
.ph2 { padding-left:20px; padding-right:20px; }
.ph3 { padding-left: 30px; padding-right: 30px; }
.ph4 { padding-left: 40px; padding-right: 40px; }
.ph5 { padding-left: 50px; padding-right: 50px; }

/* Margin modifiers */
.mt05 { margin-top: 5px; }
.mt1 { margin-top: 10px; }
.mt2 { margin-top: 20px; }
.mt3 { margin-top: 30px; }
.mt4 { margin-top: 40px; }
.mt5 { margin-top: 50px; }
.mr05 { margin-right: 5px; }
.mr1 { margin-right: 10px; }
.mr2 { margin-right: 20px; }
.mr3 { margin-right: 30px; }
.mb05 { margin-bottom: 5px; }
.mb1 { margin-bottom: 10px; }
.mb2 { margin-bottom: 20px; }
.mb3 { margin-bottom: 30px; }
.mb4 { margin-bottom: 40px; }
.mb5 { margin-bottom: 50px; }
.mb6 { margin-bottom: 60px; }
.mb7 { margin-bottom: 70px; }
.ml05 { margin-left: 5px; }
.ml1 { margin-left: 10px; }
.ml2 { margin-left: 20px; }
.ml3 { margin-left: 30px; }

svg.xsmall, .svg.xsmall{ width:12px!important; font-size:12px; }
svg.small, .svg.small{ width:16px!important; font-size:16px; }
svg.medium, .svg.medium{ width:20px!important; font-size:20px; }
svg.large, .svg.large{ width:24px!important; font-size:24px; }
svg.xlarge, .svg.xlarge{ width:30px!important; font-size:30px; }
svg.xxlarge, .svg.xxlarge{ width:50px!important; font-size:50px; }
svg.alignB{ vertical-align:bottom; }
svg.alignT{ vertical-align:top; }

/**************************** MOBILES ONLY **************************/
@media only screen and (max-width:430px){
	.hideOnMobile{ display:none!important; }
	.mobileOnly{ display:block!important; }
}
/**************************** PRINT ONLY **************************/
@media print{
	.hideOnPrint{ display:none!important; }
	.printOnly{ display:block!important; }
}

/**************************** ANIMATIONS **************************/
.swell, .swellFast{ animation:swell 2s infinite; -moz-animation:swell 2s infinite; -webkit-animation:swell 2s infinite; -o-animation:swell 2s infinite; }
	@keyframes swell{
		from{ transform:scale(1.1); }
		50%{ transform:scale(1); }
		to{ transform:scale(1.1); }
	}

.spinner{ pointer-events:none; transition:opacity 500ms; }
	.spinner, .spinner:before{ border-radius:50%; width:40px; height:40px; vertical-align:middle; margin:0px; position:relative; border:5px solid transparent; border-left:5px solid currentColor; transform:translateZ(0); animation:spin 1.1s infinite linear; display:inline-block; box-sizing:border-box; }
	.spinner:before{ content:''; position:absolute; opacity:0.2; border-color:currentColor; display:block; left:-5px; top:-5px; }
	.spinner.small, .spinner.small:before{ width:20px; height:20px; border-width:3px; }
		.spinner.small:before{ left:-3px; top:-3px; }
	.spinner.large, .spinner.large:before{ width:60px; height:60px; border-width:6px; }
		.spinner.large:before{ left:-6px; top:-6px; }
	.spinner.xlarge, .spinner.xlarge:before{ width:80px; height:80px; border-width:8px; }
		.spinner.xlarge:before{ left:-8px; top:-8px; }
.spinnerVisible{ opacity: 0.8; scale: 0.95; }
	.CTAbtn.spinnerVisible:after{content:'';}

.spin{ animation:spin 2s infinite; -moz-animation:spin 2s infinite; -webkit-animation:spin 2s infinite; -o-animation:spin 2s infinite; }
	@keyframes spin{
		0%{ transform:rotate(0deg); }
		100%{ transform:rotate(360deg); }
	}

.dotdotdot, .dotdotdot:before, .dotdotdot:after{ display:block; border-radius:50%; background-color:currentColor; width:10px; height:10px; animation:ddd 1s infinite ease-out; animation-delay:333ms; vertical-align:middle; }
.dotdotdot{ position:relative; line-height:0; }
	.dotdotdot:before, .dotdotdot:after{ content:''; position:relative; }
		.dotdotdot:before{ left:15px; top:0; animation-delay:0ms; }
		.dotdotdot:after{ left:-15px; top:-10px; animation-delay:666ms; }
		@keyframes ddd{
			0%{ opacity:0.3; }
			10%{ opacity:0.3; }
			40%{ opacity:1; }
			60%{ opacity:1; }
			90%{ opacity:0.3; }
			100%{ opacity:0.3; }
		}
	.dotdotdot.medium{scale:0.7;}
	.dotdotdot.small{scale:0.5;}
	.dotdotdot.xsmall{scale:0.3;}

.flashing{ transition:all 500ms; animation:flash 0.4s infinite linear; }
	.flashing.hcol{ animation-name:flashHcol; }
	.flashing.slow{ animation-duration:2s; }
	@keyframes flash{
		0%{ opacity:1; }
		50%{ opacity:0.5; }
		100%{ opacity:1; }
	}
	@keyframes flashHcol{
		0%{ color:var(--hcol); }
		50%{ color:inherit; }
		100%{ color:var(--hcol); }
	}
	@keyframes blink{
		0%{ opacity:1; }
		50%{ opacity:0; }
		100%{ opacity:1; }
	}

.errorshake{ animation-name:errorshake; animation-duration:.5s; animation-delay:0.25s; }
	@keyframes errorshake{
		0%{ transform:translateX(0px); timing-function:ease-in; }
		37%{ transform:translateX(5px); timing-function:ease-out; }
		55%{ transform:translateX(-5px); timing-function:ease-in; }
		73%{ transform:translateX(4px); timing-function:ease-out; }
		82%{ transform:translateX(-4px); timing-function:ease-in; }
		91%{ transform:translateX(2px); timing-function:ease-out; }
		96%{ transform:translateX(-2px); timing-function:ease-in; }
		100%{ transform:translateX(0px); timing-function:ease-in; }
	}
div.multiSelect{	position:relative;	margin:2px 0 2px 0;	min-height:50px;	width:100%; }
div.multiSelect .select{	width:100%;	z-index:unset;	position:relative; }
div.multiSelect .selectdrop {	position:relative;	min-height:250px;	display:none;	z-index:4;	overflow-y:auto;	width:100%; }
div.multiSelect div.select.hov .selectdrop{	display:block; }
div.multiSelect label{	height:16px;	margin:5px 0 1px 0;	width:100%; }
div.multiSelect div.select.hov .selectdrop .tr-except{	padding:0 5px 0 15px;	margin:0;	min-height:31px}
div.multiSelect div.select.hov .selectdrop label{	margin:0;	padding:0; }
div.multiSelect div.select.hov .selectdrop label:hover{	background:unset}
div.multiSelect div.select .tr-except:hover{	background-color:lightgray; }
div.multiSelect .selected span{	display:inline-block;	background-color:lightgrey;	color:black;	padding:0 1px 0 3px;	margin:0 3px 0 0; }
div.multiSelect .selected span.close{	color:darkgoldenrod;	margin-left:2px;	border-left:1px dotted gray;	padding-left:4px; }
div.multiSelect .selected span.close:hover{	color:red;	cursor:pointer; }