/* adapted from normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/*
Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

/* Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/*
Add the correct display in IE 9-.
Add the correct display in Edge, IE, and Firefox.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block; 
}

/*
Add the correct display in IE 10-.
Add the correct display in IE.
*/
template { display: none;  }

/* Links
   ========================================================================== */
/*
1. Remove the gray background on active links in IE 10.
2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

/*
Remove the outline on focused links when they are also active or hovered
in all browsers (opinionated).
*/
a:active, a:hover { outline-width: 0; }

/* Text-level semantics
   ========================================================================== */
/*
1. Remove the bottom border in Firefox 39-.
2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */ 
}
/* Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }
/*
Add the correct font weight in Chrome, Edge, and Safari.
*/
b, strong { font-weight: bolder; }
/* Add the correct font size in all browsers.*/
small { font-size: 80%; }
/*
Prevent `sub` and `sup` elements from affecting the line height in
all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; 
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Embedded content
   ========================================================================== */
/* Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/* Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/*
1. Add the correct box sizing in Firefox.
2. Show the overflow in Edge and IE.
*/
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/* Forms
   ========================================================================== */
/*
1. Change font properties to `inherit` in all browsers (opinionated).
2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */ 
}

/* Restore the font weight unset by the previous rule. */
optgroup { font-weight: bold; }

/* Show the overflow in IE. Show the overflow in Edge. */
button,
input {
  overflow: visible; 
}

/* Remove the inheritance of text transform in Edge, Firefox, and IE. */
button, select { text-transform: none; }


/* Remove the inner border and padding in Firefox. */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; 
}

/* Restore the focus styles unset by the previous rule. */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; 
}

/*
1. Correct the text wrapping in Edge and IE.
2. Correct the color inheritance from `fieldset` elements in IE.
3. Remove the padding so developers are not caught out when they zero out
  `fieldset` elements in all browsers.
*/
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */ 
}

/* Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/* Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { padding: 0; }

/* Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; 
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */ 
}

/* Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; 
}

/* Correct the text style of placeholders in Chrome, Edge, and Safari. */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
/*********************************************************************************
COLORS
*********************************************************************************/
/* 
Ported from scss, preserved in case we can use SCSS in the future
CSS variables in place for when IE supports them
If colors are to be changed, consider adding variables to :root - it allows all
occurances to be edited at once.
*/


/*$light: mix( $base-color,  $lightest, 5%); //mix white with 5% base color
$dark: mix( $base-color, $darkest, 10%); //mix black

$action-color: adjust-hue($base-color, 160); //used once or twice max on a page, could be
$error-color: mix(red, $lightest, 10%); //probably some sort of red or pink

$base-text-color: $dark;
$link-color: $complementary-color;

$subtle-gradient-horizontal: linear-gradient(left, $lightest 0%, $light 47%, darken($lightest, 5%) 100%);
$subtle-gradient-vertical: linear-gradient(to bottom, $lightest 0%, $light 47%, darken($lightest, 5%) 100%);*/

:root {
/*
Grays
*/
	--lightest-gray: hsl(0, 0, 98%); /* 98% white better than 100%? */
	--darkest-gray: hsl(0, 0, 26%); /* 26% better than 100% black! */
	--gray--5: hsl(0, 0, 93%); /* 5% darker than lightest */
	--gray--10: hsl(0,0, 88%); /* etc... */
	--gray--20: hsl(0, 0, 78%);
	--gray--30: hsl(0, 0, 68%);

/*
Theme Colors
Add variables with names you can remember (like $puke-green or $screaming-pink)
Names from: http://chir.ag/projects/name-that-color
*/
	--united-nations-blue: hsl(217, 50%, 40%);
	--chardonnay: hsl(37, 100%, 74%);
	--coral: hsl(17, 91%, 64%);
	--cinnabar: hsl(0, 78%, 56%);

/* Create harmonious grays */
	--theme-gray--lightest: hsl(217, 44%, 96%);; /* mix white with 5% base color */
	--theme-gray--05: hsl(217, 44%, 92.7%);
	--theme-gray--10: hsl(217, 44%, 89.4%);
	--theme-gray--25: hsl(217, 44%, 79.5%);
	--theme-gray--50: hsl(217, 44%, 63%);
	--theme-gray--75: hsl(217, 44%, 46.5%);
	--theme-gray--90: hsl(217, 44%, 36.6%);
	--theme-gray--darkest: hsl(215, 11%, 30%); /* mix black */

/*
Functional color names
*/
	--base-color: var(--united-nations-blue);
	--complementary-color: var(--chardonnay);

	--action-color: var(--coral);
  --error-color: var(--cinnabar);
  --base-text-color: var(--theme-gray--darkest);
	--link-color: var(--complementary-color);
	
/* Gradients */
	--gradient--subtle--horizontal:  linear-gradient(to left, var(--lightest-gray) 0%, var(--theme-gray--lightest) 47%, var(--theme-gray--5) 100%);
  --gradient--subtle--vertical: linear-gradient(to bottom, var(--lightest-gray) 0%, var(--theme-gray--lightest) 47%, var(--theme-gray--5) 100%);
	--gradient--subtle-diagonal: linear-gradient(135deg, var(--lightest-gray) 0%, var(--theme-gray--lightest) 47%, var(--theme-gray--5) 100%);

/* linear-gradient(135deg, hsl(0, 0, 98%) 0%, hsl(217, 44%, 96%) 47%,  hsl(217, 44%, 92.7%) 100%); */

/* Shadows */
	--shadow: .1em .1em .5em var(--theme-gray--50);

}

/***************************************************************************
GLOBAL STYLES
***************************************************************************/

/*
Default to the more intuitive box model
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Focus style (and fix for IE/Edge) */

:root *:focus:not(div):not(svg) {	
	outline: 2px solid hsl(217, 44%, 63%);
	background-color: hsl(217, 44%, 63%);
	color: white;
}

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* Ensure images respond to container */
img { max-width: 100%; height: auto; }


a {
	color: hsl(217, 50%, 40%);
	transition: color .3s ease, background-color .3s ease;
}

/* Non content area */
body {
	background-image: linear-gradient(to bottom, hsl(217, 44%, 46.5%) 0%, hsl(217, 44%, 63%) 47%,  hsl(217, 44%, 92.7%) 100%);
	/*background: linear-gradient(135deg, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); */
	background-size: cover;
	background-attachment: fixed;

}
.site-header {
 	background-color: hsl(217, 44%, 86%);
	box-shadow: .1em .1em .5em -.25em black; 	
}
/* Main content area */
main {
	background-color: white;
  	color: #444;
	box-shadow: .1em .1em .5em -.25em black;
}

.site-footer {
	background-color: hsl(217, 44%, 86%);
  	color:  hsl(215, 11%, 30%);
	border-top: 8px solid hsl(17, 91%, 64%);
	box-shadow: 0em -.1em .5em -.25em #777;
}

/* More readable underlines */
main a {
	padding: 0 2px;
	text-decoration: none;
	/* text-shadow: .06em 0 0 hsl(215, 11%, 30%), -.06em 0 0 hsl(215, 11%, 30%), 0 .06em 0 hsl(215, 11%, 30%), 0 -.06em 0 hsl(215, 11%, 30%), .1em 0 0 hsl(215, 11%, 30%), -.1em 0 0 hsl(215, 11%, 30%), 0 .1em 0 hsl(215, 11%, 30%), 0 -.1em 0 hsl(215, 11%, 30%);
	text-shadow: .06em 0 0 var(--theme-gray--darkest), -.06em 0 0 var(--theme-gray--darkest), 0 .06em 0 var(--theme-gray--darkest), 0 -.06em 0 var(--theme-gray--darkest), .1em 0 0 var(--theme-gray--darkest), -.1em 0 0 var(--theme-gray--darkest), 0 .1em 0 var(--theme-gray--darkest), 0 -.1em 0 var(--theme-gray--darkest);*/
	background-image: linear-gradient(to right, hsla(217, 50%, 40%, .5) 0%, hsla(217, 50%, 40%, .5) 100%);
	background-repeat: repeat-x;
	background-position: bottom .1em center;
	background-size: 100% 1px;
}
main a:hover,main a:active {
	background-color: hsl(217, 44%, 96%);
	color: hsl(215, 11%, 30%);
}


/***************************************************************************************
TYPOGRAPHY
***************************************************************************************/

html {
  /*
  The base font size is the only absolute value in the type
  system. All other values are derived from it.
   */
  font-size: 16px; 
}
@media screen and (min-width: 40em) {
	html {
		font-size: 17px; 
	} 
}
@media screen and (min-width: 60em) {
	html {
     font-size: 20px; 
	} 
}

body {
/*  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;*/
	
	font-family: Arial, sans-serif;
	
  /*
    Changing this font size will only affect headings
    TODO: Make sure it doesn't affect anything else
  */
  font-size: 1em;
  line-height: 1.5; 
}

@media screen and (min-width: 40em) {
	body {
  	font-size: 1em; 
	} 
}

main ul, main ol {
	padding-left: 1em;
}

.large-text p, .large-text ul, .large-text ol, .large-text address, .large-text pre {
  font-size: 1.5rem; 
}


/*
Size headings in ems so they are relative to base font
Use headings as headings! Put them in order so screen readers
and other robots can parse the content of the page.
*/

h1, .h1 {
  font-size: 3em;
  line-height: 1.1;
}

h2, .h2 {
  font-size: 1.8em;
  line-height: 1.3333;
}

h3, .h3 {
  font-size: 1.6em; 
}

h4, .h4 {
  font-size: 1.2em; 
}

h5, .h5 {
  font-size: .9em;
}


/*******************************************************************************************
GRID
*******************************************************************************************/

/* Grid system accomodates two, three or four columns
Columns must have a .col class and be the immediate children of a container with a .row class.
Classes of .half, .third, or .fourth will make columns take up corresponding amount of total space.
Columns without an explicit width will share the available width equally. 
*/


/* Narrow screens, start with a tube of content */
.row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  clear: both;
  max-width: 100%; 
}


.col { flex: 0 1 auto; padding-left: 4px; padding-right: 4px;}


/* Room for two columns */
@media (min-width: 42em) {

  .row { flex-direction: row;}

  .col, .half { 
		flex: 1; 
		min-width: 50%;
		padding: 0 8px;
	}
	.col:nth-child(even) {
		padding-right: 0;
	}
	.col:nth-child(odd) {
		padding-left: 0;
	}

}
@media screen and (min-width: 54em) {

	.col { min-width: 33.33333334%; padding: 0 2%; }

	.col:nth-child(even) {
		padding-right: 2%;
	}
	
	.col:nth-child(odd) {
		padding-left: 2%;
	}
	
	.col:nth-child(3n-2) {
		padding-left: 0;
	}
	
	.col:nth-child(3n) {
		padding-right: 0;
	}

	.third, .fourth { flex: 0 0 33.333334%; }

}

/***********************************************************************************************
LAYOUT
***********************************************************************************************/
html, body {
  min-height: 100vh;
  min-height: 100%;
	max-width: 100%;
}

.site-header {
	max-width: 100%;
}

.site-footer {
	padding: 0 8px;
}

nav[aria-label="site"] {
	width: 100%;	
 max-width: 60rem;
 margin: 0 auto;
}
main {
  max-width: 50rem;
	min-height: 75vh;
  margin: 0 auto;
  padding: 0 8px 1.5rem; 
}
main.wide {
	max-width: 70em;
}

@media screen and (min-width: 30em) {
	main, .site-footer { padding: 0 2% 1.5rem; }
}

/***********************************************************************************************
FLOW SYSTEM
***********************************************************************************************/
main * + *:not([class=^"align"]) { margin-top: 1.5rem }

main li, main dt, main dd, main br, main th, main td { margin-top: .75em; }


* + h2, * + h3, * + h4, * + h5 { margin-top: 1.5em; }



/***********************************************************************************************
Spanish link
***********************************************************************************************/

.spanish-link {
	font-size: .75em;
	padding: 0 8px;
}

/***********************************************************************************************
SITE SEARCH
***********************************************************************************************/
.site-search {
	display: flex;
	justify-content: flex-end;
	padding: 4px 8px;
	font-size: 16px;
}
.site-search [type="search"] {
	padding: 2px;
	color: #444;
	border: 0;
	border-radius: 4px 0 0 4px;
	box-shadow: inset 1px 1px 3px rgba(0,0,0, .5);
}

.site-search [type="search"]:focus,
.site-search button:focus {
	background-color: white;
	color: #444;
	outline: none;
	box-shadow: inset 1px 1px 3px rgba(0,0,0, .5), 0 0 0 2px var(--coral);
	box-shadow: inset 1px 1px 3px rgba(0,0,0, .5), 0 0 0 2px hsl(17, 91%, 64%);
}
.site-search button {
	border: 0;
	border-radius: 0 4px 4px 0;
	background-color: var(--base-color);
	background-color: hsl(217, 50%, 40%);
	color: white;
	text-shadow: 0 1px 0 #555;
	
}
.site-search:hover button {
	background-color: var(--theme-gray--darkest);
	background-color: hsl(215, 11%, 30%);
}

/***********************************************************************************************
SITE NAVIGATION
***********************************************************************************************/

nav[aria-label="site"] {
  padding: 0;
	font-size: 18px;
}

nav[aria-label="site"] ul {
	max-width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

nav[aria-label="site"] li {
	display:inline-block;
	max-width: 100%;
	flex-shrink: 0;
	list-style: none;
}

/* Bottom border on all but bottom/last nav item */
nav[aria-label="site"] li:not(:last-of-type) {
	border-bottom: 1px solid hsl(217, 44%, 89.4%);
	border-bottom: 1px solid var(--theme-gray--05);
}


nav[aria-label="site"] a, nav[aria-label="site"] button {
	display:inline-block;
	width: 100%;
	padding: .25em .5em .25em .75em;
	text-decoration: none;
	color: hsl(217, 50%, 40%);
	color: var(--base-color);
  transition: color .2s ease, background .2s ease;
}

/* Toggles visibility of submeu */
nav[aria-label="site"] button { 
	position: relative; 
	cursor: pointer;
	padding-right: 2em; 
}

nav[aria-label="site"] a:hover, nav[aria-label="site"] button:hover {
	color: hsl(37, 100%, 74%);
	color: var(--complementary-color);
	background-color: hsl(217, 50%, 40%);
	background-color: var(--base-color);
}

nav[aria-label="site"] button > svg {
	display: none;
}

nav[aria-label="site"] button[aria-expanded] > svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	transition: transform .4s ease;
}
nav[aria-label="site"] button[aria-expanded] + ul {
	animation: fadeIn .2s ease;
}

nav[aria-label="site"] button[aria-expanded="true"] > svg { transform: rotateX(520deg); }

nav[aria-label="site"] li li a { padding-left: 1em; }

nav[aria-label="site"] a[href="#site-main"],  button.current { position: relative; }
	
nav[aria-label="site"] li:not(:first-child) a[href="#site-main"]:before, button.current:before {
	content: ' ';
	display:block;
	position:absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 8px;
	background-image: url('../img/right-pointing-triangle.svg'); 
	background-size: cover; 
	background-repeat: no-repeat;
}



/* This width needs to be based on width of menu items */
@media screen and (min-width: 52em) {
	
	nav[aria-label="site"] li:not(:last-of-type) {
		border-bottom: none;
	}

	nav[aria-label="site"] ul {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
	nav[aria-label="site"] ul > li {
		flex-shrink: 1;
		text-align: center;
	}
	nav[aria-label="site"] > ul > li:first-child {
		width: 33.333%;
		min-width: 290px;
	}
	
	nav[aria-label="site"] ul ul {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background-color: hsl(217, 44%, 96%);
		background-color: var(--theme-gray--lightest);
		box-shadow: var(--shadow);
		box-shadow:  .1em .1em .1em -.05em hsl(217, 44%, 63%);
		
	}
	nav[aria-label="site"] a { 	padding: .25em .75em 4px .75em; /* 4px bottom to prevent hover border from shifting text */ }
	nav[aria-label="site"] a[href="#site-main"], nav[aria-label="site"] button.current, nav[aria-label="site"] a:hover  { border-bottom: 4px solid hsl(17, 91%, 64%); padding-bottom: 0; }
	nav[aria-label="site"] li:not(:first-child) a[href="#site-main"]:before, nav[aria-label="site"] button.current:before { display: none; }
	nav[aria-label="site"] li li a { padding-left: .25em; text-align: left; } /* indent isn't needed */

}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; } 
}

/***********************************************************************************
UTILITIES
***********************************************************************************/
/*
Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visually-hidden {
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
	white-space: no-wrap; 
}

/*
Extends the .visuallyhidden class to allow the element to be focusable when
navigated to via the keyboard: h5bp.com/p
*/
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  height: auto;
  width: auto;
  margin: 0; 
}

[hidden] {
	display: none !important;
	opacity: 0;
}


/* Clearfix: contain float s*/
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after { clear: both; }

/* Sometimes you don't want your link or it's children styled */
.link-reset {
  text-decoration: none;
  color: none;
}

/* Remove list styles */
.list-reset { margin: 0; padding: 0; }
.list-reset > li {
	display: inline-block;
	margin: 0;
	padding: 0; 
}
/* Remove button styles */
.button-reset {
  padding: 0;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
  -webkit-appearance: none;
}

.nowrap {
	white-space: nowrap;
}
/* https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
*/
.force-word-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto; 
}

.shadow {
	box-shadow: .1em .1em .5em hsl(217, 44%, 63%);
	box-shadow: var(--shadow);
}

.align-right {
	text-align: right;
}

/* Ensure readable text in selections */
/*
main a::selection {
	text-shadow: none !important;
  background-color: hsl(17, 91%, 64%);
  color: white; 

}
::selection {
  text-shadow: none !important ;
	background-color: hsl(17, 91%, 64%);
}*/
.back-to-top {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	text-align: center;
	text-decoration: none;
	background: hsla(215, 11%, 30%, .8);
	border-radius: 50%;
		color: white;
}
.back-to-top > .arrow-icon {
	display: block;
	font-size: 2.7rem;
	line-height: 2.75rem;

}
.back-to-top > .text-label {
	position: relative;
	display: block;
	bottom: 20px;
	font-size: .5rem;
	font-weight: bold;
	color: white;
}


.back-to-top:hover, .back-to-top:active {
  color: hsl(17, 91%, 64%);
}
/* Make sure we don't get orphan text along side of images on narrow screens */
/* at narrow widths we don't float any images */
[class^="align"] {
	width: 100%;
}

@media screen and (min-width: 36em) {
[class^="align"] {
	width: auto;
	max-width: 60%;
}	
.align-left {
  float: left;
  padding-right: 1.5rem; 
}

.align-right {
  float: right;
  padding-left: 1.5rem;
}

.see-more {
  text-align: right;	
}
	
}

/********************************************************************************************
PRINT
********************************************************************************************/
@media print {
  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster:
       http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }
	/* show url in parens after links */ 
  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  /*
   Don't show links that are fragment identifiers
  */
  a[href^="#"]:after { content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  /*
   Printing Tables:
   http://css-discuss.incutio.com/wiki/Printing_Tables
  */
  thead {
    display: table-header-group; }

  tr,
  img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } 
}

/********************************************************************************************
EXPAND/COLLAPSE CONTENT
********************************************************************************************/
.toggle-collapsible {
  position: relative;
  display: block;
  border: none;
  background: none;
  padding-left: 1.33em;
	text-align: left;
	color: inherit;
}

.toggle-collapsible:before {
  content: '';
  position: absolute;
  display: block;
  left: 0;
  top: 50%;
  margin-top: -.6em;
  height: 1.2em;
  width: 1.2em;
  font-weight: bold;
  background-size: contain;
  background: url('../img/caret.svg') no-repeat center center;
}

.toggle-collapsible[aria-expanded="false"]:before {
	
}
.toggle-collapsible[aria-expanded="true"]:before {

}

.collapsible-list > [aria-hidden="true"] {
  display: none;
}

.collapsible-list > div {
  display: block;
}