/* TABLE OF CONTENTS */
/* --------------------------------------------- BASE STYLES AND LAYOUT */
/* ------------------------------------------------- Base Styles */
/* ------------------------------------------------- Layout */

/* --------------------------------------------- HEADER */
/* ------------------------------------------------- TopLinks */
/* ------------------------------------------------- Search Bar */
/* ------------------------------------------------- Nav */

/* --------------------------------------------- MAIN CONTENT AREA*/
/* ------------------------------------------------- Layout */
/* ------------------------------------------------- Splash Page */
/* ------------------------------------------------- Homepage */
/* ------------------------------------------------- Callouts */
/* ------------------------------------------------- News & Updates */
/* ------------------------------------------------- Accordions */
/* ------------------------------------------------- Stackable Responsive Tables */
/* ------------------------------------------------- Forms */
/* ------------------------------------------------- Cookies */
/* ------------------------------------------------- SideNav */

/* --------------------------------------------- FOOTER */


/*ALL EM CONVERSIONS BASED ON 16PX*/


/* =============================================================================================
	BASE STYLES AND LAYOUT
============================================================================================= */

/* ------------------------------------------------------------------------ Base Styles */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

article, aside, figure, footer, header, hgroup, menu, nav, section, main { display: block; }
 
html {
    font-size: 100%; 
    overflow-y: scroll;
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
	}
	
body {
	margin: 0;
	min-height: 100%;
	font: 400 100%/1.6 'Roboto', Arial, Helvetica, sans-serif; 
	color: #333;
	} 
	.BodyStyle { background: #fafafa;} /* use this class to set body background colour so that it does not interfere with the WYSIWYG editor */
	
	.Preload * {
		-webkit-transition: none !important;
		-moz-transition: none !important;
		-ms-transition: none !important;
		-o-transition: none !important;
		}
	
	
p, ol, ul, table { margin:0; padding: 0 0 1em; }
li{ margin:0; padding: 0 0 .675em; }

	p, li {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-o-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		}

h1, h2, h3 { 
	font-weight:700; 
	margin:0;
	line-height:1.3;
	font-family: 'Roboto Slab', Arial, Helvetica, sans-serif; 
	}	

h1 {
	font-size: 1.625em; /*26px*/
	color: #a80528;
	padding-bottom: 0.667em;	
	}
	
h2 { 
	font-size: 1.375em; /*22px*/
	color: #24566a;
	padding: 0.571em 0;
	}
		
h3 { 
	font-size: 1.125em; /*18px*/
	color: #24566a;	
	padding: 0.727em 0;
	}	
	
	h1 + h2, h1 + h3, h2 + h3  { padding-top: 0 }		
		
ul { 
	list-style: none; 
	list-style-position: outside;
	padding-left: .125em;
	}
	ul li {	
	    padding-left:.875em;
		background: url(../../images/ul-bullets.png) no-repeat 0 0.6em;
		background-size:6px;
		}
	
ol { 
	list-style-position: outside;
	padding-left: 1.5em;
	}
	
	ol li ol { list-style: lower-latin; }
	
	ul ol li {
		background-image: none; 
		padding-left:0;
		}

	li ul, li ol { margin: 0.625em 0 -.5em 0; }
	
	li:last-child {padding-bottom:0; }
		li.Last {padding-bottom:0; }

b, strong, th  { font-weight: 700;}

a {color:#a80528;}
	
	a:hover {
		text-decoration:none;
		outline: 0;
		color: #d70733;
		}
		
	a {
		-webkit-transition: color 0.5s;
		-moz-transition: color 0.5s;
		-o-transition: color 0.5s;
		transition: color 0.5s;
		}
		
	a img {
		-webkit-transition: opacity 0.5s;
		-moz-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		transition: opacity 0.5s;
		}
		
.More {
	display: block;
	text-decoration:none;
	font-size:1.125em;/*18px*/
	font-weight: 500;
	position: relative;
	margin-left: 1.5em;
	}
	.More:before {
		content: '';
		position: absolute;
		background: url(../../images/more.png) no-repeat;
		background-size:20px;
		top:4px;
		left: -1.5em;
		width:20px;
		height: 20px;
		}
		
	.More:hover { color: #d70733; }
	
	/*.AnchorLinks .More {color: #24566a; }*/

	
.Button {
	color: #fff;
	text-transform: uppercase;
	text-decoration:none;
	text-align:center;
	font-size: 1.5em;
	line-height:1.3;
	
	display:inline-block;
	zoom: 1;
	*display:inline;	
	border:none;
	background: #a80528;
	height: auto;
	width:auto;
	margin: 0.75em 0 1.25em 0;
	padding: 0.5em 1em;
	border-radius: 2em; 
	cursor: pointer;
	
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
	transition: background 0.5s;
	}
	
	.Button:hover, .Button:focus  { 
		color: #fff; 
		background: #24566a; 
		outline: none; 
		}		
	
img {
	 border: 0; 
	 width:100%;
    -ms-interpolation-mode: bicubic; 
	}
	img[style] { width: 100%!important; height: auto!important; }
	
hr { 
	border:none;
	color: #9fd8e3;
	background: #9fd8e3;
	height:0.063em;
	margin:1em auto 1.5em auto;
	}	
	hr + h2, hr + h3 { padding-top: 0.375em; }
	
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
	}
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }
	
.NoWrap { white-space:nowrap; }

.Note {
	font-size: 0.875em;
	font-style:italic; 
	}	
	
.AlignRight {text-align:right; }

.IntroText {
	font-size: 1.125em;
	font-weight: 500; 
	line-height:1.4;
	}
	
.FlexibleIframe {
	position: relative;
	margin: 1em 0 1.5em 0;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	height: 0; 
	overflow: hidden;
	}
	.FlexibleIframe iframe,
	.FlexibleIframe object,
	.FlexibleIframe embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
		
.Map { border: 2px solid #ccc; }
	
	.SkipLink { 
	position:absolute; 
	left:-10000px; 
	top:auto; 
	width:1px; 
	height:1px; 
	overflow:hidden;
	background: #24566a;
	color: #fff;
	font-size: 0.875em;
	text-decoration:none;
	z-index: 100;
	} 
 
	.SkipLink:focus { 
		left:0;
		outline: none; 
		padding:0.375em 0.625em; 
		width:auto; 
		height:auto; 
		} 
				
					
@media only screen and (min-width: 40em) {	
	h1 { font-size: 1.875em; } /*30px*/
	h2 { font-size: 1.625em; }/*26px*/
	h3 { font-size: 1.375em; }/*22px*/
	
	.IntroText { font-size: 1.25em; } /*20px*/
	
	.Button { padding: 0.5em 1.5em; }
	
	img.ImageFloatLeft {
		float: left;
		margin: .375em 1em .375em 0;
		width:50%;
		}
		
	img.ImageFloatRight {
		float: right;
		margin: .375em 0 .375em 1em;
		width:50%;
		}
	
}
		
@media only screen and (min-width: 62em) {	
		
	h1 { 	
		text-rendering: optimizeLegibility;
		font-size: 2.25em; /*36px*/
		padding-bottom: 0.5em;
		} 
	h2 { font-size: 1.750em; }/*28px*/
	h3 { font-size: 1.375em; }/*24px*/
	
	.IntroText { font-size: 1.375em; } /*22px*/
	
}	


		
/* ---- Clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/ */

.CF:before, .CF:after { 
	content: ""; 
	display: table; 
	}
	.CF:after { clear: both; }
	.CF { *zoom: 1;}
	
.Clear { clear: both; }



/* ------------------------------------------------------------------------ Layout */

.Wrapper {
	max-width:60em;
	width:90%;
	margin:0 auto;
	}
		
@media only screen and (min-width: 40em) {		
			
	.TwoThirds {
		width:65.5%;
		float:left; 	
		margin:0 3.5% 0 0;
		}
		
	.ThreeCol {
		width:31%;
		float:left; 	
		margin:0 3.5% 0 0;
		}	
			
		.ThreeCol:last-child { margin-right:0; }
			.ThreeCol.Last { margin-right:0; }
				
	.TwoCol {
		width:48.25%;
		float:left; 
		margin:0 3.5% 0 0;
		}
		.TwoCol:last-child { margin-right:0; }
			.TwoCol.Last { margin-right:0; }
					
}	


/* =============================================================================================
	HEADER
============================================================================================= */

.PrintHeader, .PrintFooter { display:none; }

header {
	background: #fcfcfc;
	position: relative;
	z-index: 2;
	}
	
	.Logo { 
		margin:1em auto .75em auto;
		width: 100%;
		display:block;	
		text-decoration:none;
		position: relative;
		}
		
		.Logo img { 
			max-width: 80px;
			max-height: 60px;
			float:left;
			}	
		
		.Logo .Name {
			margin: .75em 0 0 0.375em;
			font-size:0.73em;
			font-weight:700; 
			line-height:1.2;
			color: #333;
			float:left;
			}
		

@media only screen and (min-width: 40em) {		
	
		.Logo img { 
			max-width: 120px;
			max-height: 90px;
			float:left;
			}
		
		.Logo .Name {
			margin: 1.25em 0 0 1em;
			font-size:0.938em;
			font-weight:500; 		
			}

}

@media only screen and (min-width: 62em) {		
	
	.Logo { 
		float:left;
		width: 40%;
		}
		
		.Logo .Name {
			opacity:0;
			
			-webkit-transform:translateX(-16px);	
			-moz-transform:translateX(-16px);
			-o-transform:translateX(-16px);
			transform:translateX(-16px);
			
			-webkit-transition: -webkit-transform .5s, opacity .5s;
			-moz-transition: -moz-transform .5s, opacity .5s;
			-o-transition: -o-transform .5s, opacity .5s;
			transition: transform .5s, opacity .5s;
			}
			
			.Logo:hover .Name {
				opacity:1;
				-webkit-transform:translateX(0);
				-moz-transform:translateX(0);
				-o-transform:translateX(0);
				transform:translateX(0);		
				}
				
		.Logo.French .Name {font-size: .75em; }

}

@media only screen and (min-width: 70em) {	

	.Logo.French .Name { font-size:0.938em; }

}



		
/* ------------------------------------------------------------------------ TopLinks */

.TopLinks { 
	padding-top: .375em;
	text-align:left;
	margin:1em 0 .375em 0;
	color: #fff;
	border-top: 1px solid #9fd8e3;
	}
	
	.TopLinks a { 
		color: #333;
		text-decoration:none;
		font-size:0.7em;
		font-weight: 700;
		line-height:1.2;
		padding: .675em 0;
		margin:0 .125em;	
		display: inline-block;
		}
		.TopLinks a:hover { text-decoration:underline; }	
		
		.TopLinks a:first-child { margin-left: 0; }
		
	.TopLinks a.GatewayButton {
		font-weight: 500;
		background:#a00000;
		text-align:center;	
		zoom: 1;
		*display:inline;	
		border:none;
		height: auto;
		width:auto;
		padding: .5em;
		vertical-align:50%;
		border-radius: 0.188em; 
		cursor: pointer; 
		color: #fff;
		
		-webkit-transition: background 0.5s;
		-moz-transition: background 0.5s;
		-o-transition: background 0.5s;
		transition: background 0.5s;
	}

	.TopLinks a.GatewayButton:hover { 
		text-decoration:none;
		background:#24566a;
	}

	.TopLinks a.LanguageToggle {
		font-weight: 500;
		background:#9fd8e3;
		text-align:center;	
		zoom: 1;
		*display:inline;	
		border:none;
		height: auto;
		width:auto;
		padding: .5em;
		vertical-align:50%;
		border-radius: 0.188em; 
		cursor: pointer; 
		
		-webkit-transition: background 0.5s;
		-moz-transition: background 0.5s;
		-o-transition: background 0.5s;
		transition: background 0.5s;
		}
		
		.TopLinks a.LanguageToggle:hover { 
			text-decoration:none;
			background:#caeff6;
			}

.TopLinks .Links span {
	display: none;
}

.TopLinks a br { display: none; } 

@media only screen and (min-width: 40em) {
	
.TopLinks { 
	padding: .5em 0 ;
	margin:1em 0 0 0;
	color: #333;	
	}
	.TopLinks.French { padding: .375em 0 0 0; }
	
	.TopLinks a { 
		font-size:0.938em;
		font-weight: 500;
		margin:0 .25em;
		}
		
		.TopLinks.French a { padding: .375em 0 .875em 0; }
		
		.TopLinks.French a br { display: inline; } 
		
		
	.TopLinks a.LanguageToggle, .TopLinks a.GatewayButton {
		vertical-align:0;
		padding: .375em .5em .5em .5em ;
		}
		
		.TopLinks.French a.LanguageToggle { vertical-align: 50%; }
	
	.TopLinks .Links span {
	padding: 0 10px;
	display: inline-block;
}
}


	
@media only screen and (min-width: 62em) {
	
.TopLinks { 
	padding-top: 1.75em;
	text-align:right;
	border-top: none;
	color: #333;	
	}
	.TopLinks.French { padding-top: 1.25em; }
	
	.TopLinks.French a { text-align:left; }
	.TopLinks.French a.LanguageToggle, .TopLinks.French a.GatewayButton { vertical-align: 55%; }
	
}



/* ------------------------------------------------------------------------ Search Bar */

.TopLinks .Links {display:flex; justify-content: space-between; align-items: center;} 

.TopLinks .LinksOpen {display:none; }

.SearchBar{
	float: right;
	margin:.25em 0 0 0;
	
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-ms-transition: width 0.3s;
	-o-transition: width 0.3s;
	transition: width 0.3s;
	width:50px;
	}
	
	.SearchBar.searchbar-open {
		width: 108%;
		margin-bottom:.18em;
		}

	.searchbox{
		position:relative;
		height:2.5em;
		width:100%;
		float:right;
		}
	
	.searchbox-input{
		position:absolute;
		top:0;
		right:1.5em;
		border:0;
		outline:0;
		background:#fcfcfc;
		width:10%;
		height:40px;
		margin:0;
		font-size:0.938em;
		color:#333;
		padding:0 1em 0 .5em;		
		}
	.searchbox-input::-webkit-input-placeholder {color: #aaa;}
	.searchbox-input:-moz-placeholder {color: #aaa;}
	.searchbox-input:-ms-input-placeholder {color: #aaa;}
	.searchbox-input::placeholder {color: #aaa;}
	
	.searchbox-icon,
	 input.searchbox-submit {
		font-size: 0;
		color: #333;
		width:40px;
		height:40px;
		display:block;
		position:absolute;
		top:0;
		right:0;
		padding:0;
		margin:0;
		border:0;
		outline:0;
		cursor:pointer;
		background: url(../../images/search-icon.png) no-repeat center center;
		background-color: #c1052d;
		background-size:21px;
		color:#c1052d;
		border-radius: 21px; 
		
		-webkit-transition: background-color 0.5s;
		-moz-transition: background-color 0.5s;
		-o-transition: background-color 0.5s;
		transition: background-color 0.5s;
		}
		.searchbox-icon:hover,
		input.searchbox-submit:hover{ background-color:#d70733; }
	
	.searchbox{
		position:relative;
		min-width:50px;
		height:2.5em;
		float:right;
		overflow:hidden;
		width:0%;
		
		-webkit-transition: width 0.3s;
		-moz-transition: width 0.3s;
		-o-transition: width 0.3s;
		transition: width 0.3s;
		}
		.searchbox-open{ width:100%; }
	
		.searchbox-open .searchbox-input{ width:86%; border:1px solid #d5d5d5; }
		
@media only screen and (min-width: 40em) {
	
	.TopLinks .Links {display:inline-block; } 

	.TopLinks .LinksOpen {display:inline-block; }

	.SearchBar { margin: 0; }
	.French .SearchBar {margin: .25em 0 0 0; }
	
		.SearchBar.searchbar-open {
			width: 40%;
			margin-bottom:0;
			}
}
	

@media only screen and (min-width: 62em) {

	.SearchBar { margin: -.075em; }
	
		.SearchBar.searchbar-open {width: 23%; }
	
}

/* ------------------------------------------------------------------------ Nav */

.MainNav {background: #24566a; }

	.MainNav .Wrapper {width:100%;}
	
.flexnav *, .flexnav *:before, .flexnav *:after { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

.flexnav {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
	-webkit-transform-style: preserve-3d;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	max-height: 0; 
	padding:0;
	line-height:1.2;
	}

	.flexnav.opacity { opacity: 0;  }
		
	.flexnav.flexnav-show {
		max-height: 2000px;
		opacity: 1;
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out; 
		}
	
	.flexnav li {
		font-size: 1.063em;
		position: relative;
		overflow: hidden; 
		background-image: none;
		padding:0;
		}
	
	.flexnav li a {
		position: relative;
		display: block;
		padding: .875em 5%;
		z-index: 2;
		overflow: hidden;
		color: #fff;
		text-decoration:none;
		border-bottom: 1px solid #3b778f;
		background: #24566a; 
		}
		.flexnav li a:hover, .flexnav li.Current a { background: #306276; }
	
	.flexnav li ul { 
		width: 100%;
		margin: 0; 
		padding:0; 
		}
	
	.flexnav li ul li {
		font-size: 0.882em;
		position: relative;
		overflow: hidden; 
		}
	
	.flexnav li ul.flexnav-show li { overflow: visible; }
	
	.flexnav li ul li a {
		display: block;
		background: #1d4c5e; 
		}
	
	.flexnav ul li ul li a { background: #1d4c5e; }
	
	.flexnav ul li ul li ul li a { background: #1d4c5e; }
	
	.flexnav .touch-button {
		position: absolute;
		z-index: 999;
		top: 0;
		right: 0;
		width: 50px;
		height: 49px;
		display: inline-block;
		background: #205063;
		text-align: center; 
		}
		
		.flexnav .touch-button:hover { cursor: pointer; }
		
		.flexnav .touch-button .navicon {
			position: relative;
			top: 1.4em;
			font-size: 12px;
			color: #fff; 
			}


.menu-button {
	position: relative;
	display: block;
	font-weight: 500;
	font-size: 1.063em;
	padding: .6em 5%;
	background: #306276;
	color: #fff;
	cursor: pointer;
	border-bottom: 1px solid #3b778f; 
	}
	
	.menu-button .touch-button {
		background: #205063;
		position: absolute;
		z-index: 999;
		top: 0;
		right: 0;
		width: 50px;
		height: 47px;
		display: inline-block;
		text-align: center; 
		}
	
	.menu-button .touch-button .navicon {
		font-size: 16px;
		position: relative;
		top: .75em;
		color: #fff; 
		}
		
@media only screen and (min-width: 62em) {	
	
.MainNav .Wrapper {
	max-width:65em;
	width:96%;
	margin:0 auto;
	}
	
	.flexnav { overflow: visible; }
	
	.flexnav.opacity { opacity: 1; }
		
	.flexnav li {
		position: relative;
		list-style: none;
		float: left;
		display: block;
		overflow: visible;
		text-align:center;
		}
		
		.flexnav li.About { width: 15% ;}
		.flexnav li.New { width: 18% ;}
		.flexnav li.Returning { width: 22% ;}
		.flexnav li.Organizations { width:29% ;}
		.flexnav li.Links { width: 16% ;}
		
		.French .flexnav li.About { width: 16% ;}
		.French .flexnav li.New { width: 22% ;}
		.French .flexnav li.Returning { width: 21% ;}
		.French .flexnav li.Organizations { width:28% ;}
		.French .flexnav li.Links { width: 13% ;}
		
	.flexnav li a {
		border-bottom: none; 
		padding: .96em .96em .86em .96em;
		}
		
		.French .flexnav li a { padding: .96em .5em .86em .5em;}
	
	.flexnav li > ul {
		position: absolute;
		display: none;
		top: auto;
		left: 0; 
		}
	
	.flexnav li > ul li {width: 100%; }
		
	.flexnav li ul li > ul {
		margin-left: 100%;
		top: 0; 
		}
		
	.flexnav li ul li a { border-bottom: 1px solid #3b778f; } 
		.flexnav li ul li:last-child a { 
			border-radius:  0 0 0.375em 0.375em ;
			border-bottom: none;
			} 			
			.flexnav li ul li.Last a { 
				padding-bottom: 1em;
				border-radius:  0 0 0.375em 0.375em ;
				border-bottom: none;
				} 
				
	.flexnav li ul.open {
		display: block;
		opacity: 1;
		visibility: visible;
		z-index: 1; 
		}
	
	.flexnav li ul.open li {
		overflow: visible;
		max-height: 100px; 
		}
		
	.flexnav li ul.open ul.open {
		margin-left: 100%;
		top: 0; 
		}
	
	.flexnav .touch-button, .menu-button { display: none; } 

}




/* =============================================================================================
	MAIN CONTENT AREA
============================================================================================= */

/* ------------------------------------------------------------------------ Layout */

main { 
	padding: 2em 0 ;
	background: #d5d5d5 ;
	}
	main:focus { outline: none; }
	
	
	
aside { margin-top:1.25em; }	
		
@media only screen and (min-width: 40em) {			
	
	main { padding: 2.5em 0 3.5em 0 ; }
		
		article {
			float:left;
			width:65%;
			}
			
		aside {
			float:right;
			width:31%;
			padding-top:0;
			margin-top:0;
			border-top:none;
			}
					
}	

@media only screen and (min-width: 62em) {			
	
	main { padding: 3em 0 4em 0 ; }
	
}


/* ------------------------------------------------------------------------ Splash Page */

body.Splash {
	background: #d5d5d5 url(../../images/map-bg.png) no-repeat 50% 210%;
	background-size:1287px;
	}

.LogoSplash { 
	max-width: 600px;
	max-height: 147px;
	margin:1em auto ; 
	display: block;
	}

.Splash main {
	padding: 1.5em 0 ;
	border-top: 4px solid #24566a;
	background: transparent;
	}
	
	.Splash h1, .Splash .IntroText {text-align: center; }
	
	
@media only screen and (min-width: 40em) {
	body.Splash { background-position: 50% 227px;}
	
	.Splash main {padding: 2em 0 ;}
	
	.LogoSplash { margin:2.5em auto ;  }	
}

@media only screen and (min-width: 62em) {

	
	.LogoSplash { margin:2.5em auto ; }
	
	.Splash main {padding: 2.5em 0;}

}
	
	
/* ------------------------------------------------------------------------ Homepage */

main.Home { 
	background: #d5d5d5 url(../../images/map-bg.png) no-repeat center top;
	background-size:1287px;
	}
	main.Home h1, main.Home .IntroText {text-align: center; }
	
	
	
	
/* ------------------------------------------------------------------------ Callouts */

.CalloutGroup {margin:1em 0 0 0;}

.Callout a {
	text-align: center;
	background: #24566a url(../../images/callout-bg.png) no-repeat center top;
	background-size:266px;
	border-radius: 0.375em;	
	height: 12.5em;
	margin:0 0 1.5em 0;
	padding: 0 ;	
	display: block;
	text-decoration:none;
	
	-webkit-transition: background-color 0.5s, background-position 0.5s;
	-moz-transition: background-color 0.5s, background-position 0.5s;
	-o-transition: background-color 0.5s, background-position 0.5s;
	transition: background-color 0.5s, background-position 0.5s;
	}
	.Callout a:before {/* http://css-tricks.com/centering-in-the-unknown/ */
		content: '';
		display: inline-block;
		height: 100%; 
		vertical-align: middle;
		margin-right: -0.25em; /* Adjusts for spacing */
		}

	.Callout a:hover { 
		background-color: #9b0223;
		background-position: center -1.125em; 
		}

.CalloutText {/* pseudo element to help vertically center text */
	display: inline-block;
	vertical-align: middle;
	width: 90%;
	}
 
	 .Callout .Small {
		color: #c9f5fe;
		font-size: 1.125em;
		line-height: 1.3;
		display:block;
		
		-webkit-transition: color 0.5s;
		-moz-transition: color 0.5s;
		-o-transition: color 0.5s;
		transition: color 0.5s;	
		}
		
	 .Callout .XSmall {
		color: #c9f5fe;
		font-size: .875em;
		line-height: 1.3;
		display:block;
		padding: .5em 1em;
		
		-webkit-transition: color 0.5s;
		-moz-transition: color 0.5s;
		-o-transition: color 0.5s;
		transition: color 0.5s;	
		}
		.Callout a:hover .Small, .Callout a:hover .XSmall { color: #ff94ab; }
		
	.Callout .Large {
		color: #fff;
		font: 700 1.5em/1.2 'Roboto Slab', Arial, Helvetica, sans-serif; 
		display:block;
		}
	.Callout.Sidebar a { height: 5em; }
			
@media only screen and (min-width: 30em) {	

.FourCallouts .Callout a {
	float:left; 	
	margin:0 3.5% 3.5% 0;
	width:48.25%;
	}
	.FourCallouts .Callout:nth-child(2n) a { margin-right: 0; }
		.FourCallouts .Callout.TwoN a { margin-right: 0; }
		
}

@media only screen and (min-width: 40em) {	

	.CalloutGroup {margin:1.75em 0 0 0;}

}

@media only screen and (min-width: 50em) {	
	
	.CalloutGroup.ThreeCallouts {
		background: url(../../images/callout-shadow.png) no-repeat center bottom;
		background-size:contain;
		padding-bottom: 3em;
		}	
		
		.ThreeCallouts .Callout a {
			float:left; 	
			margin:0 3.5% 0 0;
			width:31%;
			}
			
			.ThreeCallouts .Callout:last-child a { margin-right: 0; }
				.ThreeCallouts .Callout.Last a { margin-right: 0; }
				
				
	.CalloutGroup.TwoCallouts {
		background: url(../../images/callout-shadow.png) no-repeat center bottom;
		background-size:contain;
		padding-bottom: 3em;
		width:100%;
		}	
		
		.TwoCallouts .Callout a {
			float:left; 	
			margin:0 3.5% 0 0;
			width:48.25%;
			}
			
			.TwoCallouts .Callout:last-child a { margin-right: 0; }
				.TwoCallouts .Callout.Last a { margin-right: 0; }


}

@media only screen and (min-width: 62em) {	

	.CalloutGroup {
		background: url(../../images/callout-shadow.png) no-repeat center bottom;
		background-size:960px 38px;
		padding-bottom: 3em;
		}	
			
		.FourCallouts .Callout a {
			float:left; 	
			margin:0 2% 0 0;
			width:18.4%;
			}
			
			.FourCallouts .Callout:nth-child(2n) a { margin-right: 3.5%; }
				.FourCallouts .Callout.TwoN a { margin-right: 2%; }
			
			.FourCallouts .Callout:last-child a { margin-right: 0; }
				.FourCallouts .Callout.Last a { margin-right: 0; }

}

/* ------------------------------------------------------------------------ InfoBox */

.InfoBox {
	background: #e9e9e9 url(../../images/news-bg.png) no-repeat center top;
	background-size:266px;
	border-radius: 0.375em;	
	margin:.75em 0 1em 0 ;
	padding: 1em 1em 0 1em ;	
	text-decoration:none;
	}
	
	.InfoBox .More {color: #24566a; }
		.InfoBox .More:before { background-image: url(../../images/more-green.png); }
		
	.InfoBox .More:hover {color: #3087aa; }
		

		
/* ------------------------------------------------------------------------ News & Updates */

.News {
	background: #e9e9e9 url(../../images/news-bg.png) no-repeat center top;
	background-size:266px;
	border-radius: 0.375em;	
	margin:2em 0 ;
	padding: 0 ;	
	text-decoration:none;
	}
	
	.News h3 { padding-left: 1em; }
	
	.News ul { padding-left: 0; }
	
@media only screen and (min-width: 62em) {
	.News { margin-top:4em; }
}

		
		
/* ------------------------------------------------------------------------ Accordions */

.Accordion { margin: 0; }

	.Accordion dt a {
		padding: 1em 1em 1em 1.5em;
		display: block;
		font-size: 1.063em;
		font-weight: 500;
		line-height:1.3;
		color: #333;
		text-decoration: none;
		background:  url(../../images/more.png) no-repeat 0 1.125em;
		background-size:20px;		
		border-top: 1px solid #e9e9e9;
		}
		
		.Accordion dt a:hover { color: #d70733;}
		
		.News .Accordion dt a {
			padding-left: 3em;
			background-position: 1.375em 1.125em; 
			border-top: 1px solid #d5d5d5;
			}
					
	.Accordion dd {		
		margin: -.5em 0 0 0 ;
		padding: 0 1em 1.5em 1.75em;
		display: block;
		font-size: 0.941em;
		font-weight: 400;
		color: #333;
		text-decoration: none;
		}
		.News .Accordion dd { padding-left: 3.5em; }
		
	
		

/* ------------------------------------------------------------------------ Stackable Responsive Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
	border:none; 
	width:100%;	
	margin:1em 0 2em 0;
	overflow:auto;
	}	
	table[style] {width:100% !important; }
		
	th, td {
		text-align: left;
		vertical-align: top;
		font-size: 0.875em;	
		padding:0.429em 0.714em;
		border:2px solid #24566a;
		background: #e9e9e9;	
		}	
			
		th {
			background: #24566a;
			color: #fff;
			font-weight:700;
			}
			
		th.TwentyPercent {width: 20%; }
		th.FortyPercent {width: 40%; }
		th.FiftyPercent {width: 50%; }
		
		.Hidden { text-indent: -9999px; }
						

/* RESPONSIVE EXAMPLE */

.st-head-row { 
	background: #3b778f;
	color: #fff;
	}
	
	.st-head-row a { color: #fff;}
	
.st-head-row-main { background: #24566a; }


.stacktable.large-only { display: table; }
.small-only { display: none; }


@media only screen and (max-width: 62em) {
	
  .large-only { display: none; }
  .stacktable.small-only {
	  display: table; 
	  *display: inline-block; 
	  }
  
}


/* ------------------------------------------------------------------------ Forms */

hr.Form {margin:2em auto 1.5em auto; }

.RadioCheckHeader {
	margin-top:1.250em;
	padding-bottom:0;
	}
	
.Error, .Error[style], .Required {
	color: #a80528 !important;
	font-size: 0.875em;
	font-weight:700;
	}
		
label {
	display:block; 
	margin: 1.125em 0 0.25em 0;
	}	
	label.RadioCheck {
		display:inline-block; 
		margin: 0 0.625em 0.375em -0.375em;
		}

input, select, textarea {
	border: 1px solid #d5d5d5;
	font-size:0.875em;
	color: #333;
	width: 100%;
	padding:.5em; 
	background: #f4f4f4;	
	border-radius: 0.25em;	
		
	-webkit-transition: all 0.5s;	
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	}
	
	select {line-height: 25px; }
		
	input[type="checkbox"], input[type="radio"], input[type="image"] {
		border:none;
		height: auto;
		width:auto;
		padding: 0;
		background:transparent;
		}
		
	input[type="text"]:focus, select:focus, textarea:focus  { 
		background: #fff;
		outline:none;
		}
		input[type="checkbox"]:focus, input[type="radio"]:focus { background: #ddd; }
		
	textarea { 
		height: 10.714em; 
		width:100%;
		}
		
input.Button { 
	font-family:'Roboto', Arial, Helvetica, sans-serif;
	margin-top:1.5em;
	}

input.Button:focus  { background: #24566a; }


/* ------------------------------------------------------------------------ Cookies */

.cookies {
	display: flex;
	position: fixed;
	bottom: 0;
	width: 100%;
	background: rgba(0,0,0,0.9);
	padding: 2em;
	flex-wrap: wrap;
	-webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
	-webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
	z-index: 1;
}

.cookies p {
	color: #fff;
}

.cookies a {
	color: #fff;
}

.cookies .Button {
	font-size: 1em;
}

.cookies div {
	display: flex;
	width: auto;
}


/* ------------------------------------------------------------------------ SideNav */

.SideNav {	
	background: #f4f4f4;
	margin-bottom:1em ;
	}
	
	.SideNav h3 {
		padding:.5em 1em;
		color: #fff;		
		background: #24566a;
		}
		.SideNav h3 a {
			color: #fff;
			text-decoration:none;
			}	
			.SideNav h3 a:hover { color: #f4f4f4; }
			
	.SideNav ul { 
		margin: 0;
		padding:0.5em  1.5em 0.75em 1.5em;
		overflow:hidden;	
		list-style: none; 
		}		
		.SideNav li { 
			margin:0; 
			padding:0;
			background-image: none;
			border-bottom:2px solid #b5e4f4;
			}
			.SideNav li:last-child { border:none; }
				.SideNav li.Last { border:none; }
			 
			.SideNav ul a { 
				font-size: 1.125em;
				line-height:1.3;
				text-decoration:none;
				color: #333;
				display:block;
				padding: 0.5em 0;
				}
				.SideNav ul a:hover { color: #a80528; }
								
		
	

/* =============================================================================================
	FOOTER
============================================================================================= */

footer { 
	background: #fafafa; 
	padding:1em 0 ;
	}
		
	footer h3 {padding-bottom: .5em }

	footer p, footer ul { font-size:0.938em; }

	footer a { color: #444; }
	
	footer .More {
		color:#a80528; 
		margin-top: .5em;
		}
	
	footer ul li { padding-bottom:.375em }
	
	footer p.Copyright { 
		font-size: 0.875em;
		color: #555; 
		}
	
	footer p.RKD { 
		width: 155px;
		}

@media only screen and (min-width: 40em) {
		
	footer p { 
		font-size:1em;
		padding-bottom: 1.5em;
		}
	
	footer ul { float: right; }
	
	footer p.Copyright { float:left;}		
	
	footer p.RKD { 
		float:right; 
		padding-top:.075em;
		}
	
}


/* ----- COVID MSG -----*/

.covid {
background-color: #a00000;
text-align: center;
padding-top: 6px;
padding-bottom: 6px;
color: white;
font-size: 14px;
font-weight: bold;
line-height: 1.1;
}