/*
1.	Global Settings
	1.1 Colors
	1.2	Fonts
	1.3 Forms
	1.4 Tables
	1.5 Video
	1.6 Details Polyfill
	1.7 Dialog Polyfill
2.	Header
3.	Navigation
	3.1 Search
4.	Content
	4.1 Executive Team
	4.2 Bureaus & Units
	4.3 About
	4.4 Contact
	4.5 Category Blog
	4.6 Navigation
	4.7 Tags
	4.8 Pagination
	4.9 Victim & Witness Services
	4.10 Campaign
	4.11 Conviction Integrity
	4.12 Publications
	4.13 Crime Control & Prevention
	4.14 Press Releases & In The News
	4.15 Impact Statement
5.	Footer
	5.1 Subscribe Form
6.	Colophon
7.	Search Results
8.	Long Forms
9.	Office Phone List
10.	Calendar
11. Mircomodal
12.	Documentation
*/

/**********************
 * 1. Global Settings *
 **********************/
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
	font-family: 'Lato', Arial, sans-serif;
	color: #444;
}

img{
	display: block;
	width: 100%;
	height: auto;
}

.row{
	margin: 0 auto;
	width: 94%;
	max-width: 1170px;
}

h1{
	font-size: 30px;
	text-transform: uppercase;
}

h2{
	font-size: 24px;
	font-weight: 400;
	margin-bottom: 1em;
}

h3{
	text-transform: uppercase;
	margin-bottom: .5em;
}

p{
	line-height: 1.7;
	margin-bottom: 1em;
}

li{
	line-height: 1.7;
}

a{
	transition: color 300ms;
}

.icon{
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}

.element-invisible{
	display: none;
}

/*********************
 * 1.1 Accessibility *
 *********************/
.screen-reader-text{
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

	.screen-reader-text:focus{
		background-color: #f1f1f1;
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		color: #21759b;
		display: block;
		font-size: 14px;
		font-size: 0.875rem;
		font-weight: bold;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000; /* Above WP toolbar. */
	}

/**************
 * 1.2 Colors *
 **************/
/*
Gold	#ffb400;
Red		#d13736;
Grey	#444;
*/

/*************
 * 1.3 Fonts *
 *************/
@font-face {
	font-family: 'Lato';
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/Lato-400-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/Lato-400-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lato';
	font-display: auto;
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/Lato-700-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Lato';
	font-display: auto;
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/Lato-700-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*************
 * 1.4 Forms *
 *************/
.labels-as-placeholders label{
	padding: 0 0 .5rem 1rem;
	width: auto;
	display: block;
	position: relative;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	transition: ease .2s all;
}

	.labels-as-placeholders label.active{
		padding: 0 0 .5rem;
	}

.labels-as-placeholders p.formDescription:empty{
	margin-bottom: .5em;
}
 
.formResponsive .rsform-block::before,
.formResponsive .rsform-block::after{
    display: table;
    content: "";
}

.formResponsive .rsform-block::after{
    clear: both;
}

.formResponsive .rsform-block-recaptchav2 .formControlLabel{
	display: none;
}

.formResponsive .rsform-block-instructions{
	line-height: 1.5;
	margin-bottom: .5em;
}
	
.formResponsive textarea,
.formResponsive input[type="text"],
.formResponsive input[type="email"],
.formResponsive input[type="tel"]{
	border: solid 1px #8f8f8f !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	height: auto !important;
	box-sizing: border-box !important;
	margin-bottom: 0 !important;
	padding: .5rem 1rem !important;
}

.formResponsive input[type="submit"]{
	display: block !important;
	width: 100% !important;
	padding: 8px 10px !important;
	font-family: 'Lato', Arial, sans-serif;
	font-size: 18px !important;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center !important;
	text-shadow: none !important;
	background-color: #d13736 !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
}

div[id^="g-recaptcha-"]{
	transform: scale(0.95);
	transform-origin: 0 0;
}

.sidebar-within-section .formResponsive{
	font-size: 13px;
}

	.sidebar-within-section .formResponsive .rsform-block-instructions{
		margin-bottom: 1em;
	}
	
	.sidebar-within-section .formResponsive textarea,
	.sidebar-within-section .formResponsive input[type="text"]{
		width: 100% !important;
	}

/**************
 * 1.5 Tables *
 **************/
#content table{
	border-collapse: collapse;
}

	#content table th,
	#content table td{
		padding: 8px;
	}

	#content table th{
		text-align: left;
		border-top: solid 2px #ddd;
		border-bottom: solid 1px #ddd;
	}
	
	#content table td{
		border-top: solid 1px #ddd;
	}

/*************
 * 1.6 Video *
 *************/	
.video-container{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 1.25em;
}

	.video-container iframe{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	figure video{
		width: 100%;
		height: auto;
	}

.vbox-open video{
	width: 80%;
	height: auto;
}

	.vbox-overlay div.custom{
		text-align: center;
	}
	
/************************
 * 1.7 Details Polyfill *
 ************************/
details{
	display: block;
}

details.close > *{
	display:none;
}

details > summary,
details.close > summary{
	display: flex;
	display: list-item;
	cursor: pointer;
}

details > .\u25bc{
	display: block;
}

/***********************
 * 1.8 Dialog Polyfill *
 ***********************/
dialog{
	position: absolute;
	left: 0; right: 0;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: -webkit-fit-content;
	height: fit-content;
	margin: auto;
	border: solid;
	padding: 1em;
	background: white;
	color: black;
	display: block;
}

dialog:not([open]){
	display: none;
}

dialog + .backdrop{
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0, 0, 0, 0.75);
}

._dialog_overlay{
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
}

dialog.fixed{
	position: fixed;
	top: 50%;
	transform: translate(0, -50%);
}

#dialog-close{
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	margin-left: auto;
	border: none;
	background-color: #fff;
	color: #000;
	font-size: 40px;
	font-weight: 700;
	transition: color 300ms;
}

	#dialog-close > span{
		font-size: 14px;
		text-transform: uppercase;
		margin-top: 6px;
	}

	#dialog-close:hover,
	#dialog-close:focus{
		cursor: pointer;
	}

/**************************************************
 * 2. Header                                      *
 * 	  Mobile:	branding 	headline	hamburger *
 *	  Desktop:	contact 	branding	social    *
 **************************************************/
header{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: #231f20;
	padding: 14px 0;
	height: 78px;
}

	header > .row{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
		header > .row > .branding{ order: 1; }
		header > .row > .headline{ order: 2; }
		header > .row > .contact{ display: none; }
		header > .row > .social{ display: none; }
		header > .row > .hamburger{ order: 3; }
	
			header > .row > .branding img{
				max-height: 50px;
				max-width: 50px;
			}
			
			header > .row > .headline h1{
				color: #fff;
				text-transform: none;
				text-align: center;
				font-weight: 600;
				font-size: 12px;
			}
		
		#nav-open-btn{
			font-size: 20px;
		}
	
	header a{
		color: #fff;
		text-decoration: none;
	}
	
		header a:hover{
			color: #fbb518;
		}

	header li{
		list-style: none;
		display: inline-block;
		position: relative;
	}

		header .row > .contact li:first-child{
			padding-right: 9px;
		}
		
			header .row > .contact li:first-child::after{
				content: "|";
				color: #fff;
				position: absolute;
				right: 0;
			}
		
		header .row > .social a{
			padding: 0 6px;
			font-size: 20px;
		}

@media only screen and (min-width: 981px){
	header{
		position: static;
		height: auto;
	}

		header > .row > .branding{ order: 2; transform: translateX(-50%); }
		header > .row > .headline{ display: none; }
		header > .row > .contact{ order: 1; display: block; }
		header > .row > .social{ order: 3; display: block; }
		header > .row > .hamburger{ display: none; }
		
		header > .row > .branding img{
			max-width: 100%;
			max-height: 100%;
		}
}

/*****************
 * 3. Navigation *
 *****************/
.primary-nav{ display: none; }

.slide-menu{
	width: 340px;
	background-color: #333;
	top: 78px; /* height of header */
    height: calc(100vh - 78px);
	-webkit-overflow-scrolling: touch;
}

	.slide-menu,
	.slide-menu a{
		color: #fff;
	}

	.slide-menu a{
		font-size: 14px;
		padding: .9rem 1.5rem;
		border-bottom: 1px solid #231f20;
		text-decoration: none;
	}
	
		.slide-menu a:hover{
			background-color: #231f20;
			color: #fbb518;
		}
		
	.slide-menu .arrow-indicator{
		display: inline-block;
		font-size: 85%;
	}
	
		.slide-menu .arrow-indicator__before{
			margin-right: 1em;
			transform: rotateY(180deg);
		}
		
		.slide-menu .arrow-indicator__after{
			margin-left: 1em;
		}
		
	.slide-menu .search{
		padding: .9rem 1.5rem;
	}

/* About > Bureaus & Units */
/*
.slide-menu li.item-534 ul{
	display: flex;
	flex-wrap: wrap;
}

	.slide-menu li.item-534 ul > li:first-child{
		display: block;
		width: 100%;
	}
	
	.slide-menu li.item-534 ul li{
		display: flex;
		width: 50%;
	}
*/

.slide-menu .controls{
	display:flex;
}

	.slide-menu .btn{
		border: none;
		cursor: pointer;
		font-family: inherit;
		line-height: 1;
		padding: .75rem 1.5rem;
		flex: 1 0 auto;
		font-size: .8rem;
		color: #fff;
		background-color: #231f20;
		text-transform: uppercase;
	}

		.slide-menu .btn:first-of-type{
			text-align: left;
		}
		
			.slide-menu .btn:first-of-type:before{
				content: "⮜";
				margin-right: .5rem;
			}
			
		.slide-menu .btn:last-of-type{
			text-align: right;
		}
		
			.slide-menu .btn:last-of-type:before{
				content: "✕";
				margin-right: .5rem;
			}

@media only screen and (min-width: 981px){
	.mobile-nav{ display: none !important; }
	.primary-nav{ display: block; }

	#nav{
		display: flex;
		justify-content: space-around; /* Edge does not handle space-evenly */
		margin-right: 40px; /* search icon */
	}
	
		#nav a{
			display: block;
			padding: 12px 0;
			font-size: 14px;
			font-weight: 700;
			text-decoration: none;
			text-transform: uppercase;
			color: #444;
		}

			#nav a:hover{
				color: #d13736;
			}

		#nav li{
			position: relative;
			display: block;
			transition-duration: 0.5s;
			list-style: none;			
		}
		
			#nav > li > a{
				padding-top: 1.25em;
				padding-bottom: 1.25em;
			}
			
			#nav li.parent > a,
			#nav li.parent.open > a{
				background-image: none;
			}
		
			#nav li ul {
				visibility: hidden;
				opacity: 0;
				position: absolute;
				transition: all 0.5s ease;
				left: 0;
				display: none;
			}
			
				/* About > Bureaus & Units */
				#nav li.item-534 ul{
					column-count: 2;
					column-gap: 0;
				}
			
				#nav li ul li ul{
					left: 100%;
					top: 0;
				}

				#nav li:hover > ul,
				#nav li ul:hover {
					visibility: visible;
					opacity: 1;
					display: block;
				}

					#nav li ul li a{
						clear: both;
						width: 100%;
						padding-left: .75em;
						padding-right: .75em;
						background-color: #faf9f7;
						text-transform: none;
						white-space: nowrap;
						transition: background-color 300ms;
					}

						#nav li ul li a:hover{
							color: #444;
							background-color: #fbb518;
						}
}

/**************
 * 3.1 Search *
 **************/
#nav li.divider{
	padding-bottom: 12px;
}

nav + .search{
	display: none; /* hide the module */
}

input[type="search"] {
	-webkit-appearance: none;
	border-radius: 0;
	height: 27px;
	border-style: solid;
	border-width: 1px;
	border-color: #ccc;
	font-size: 16px;
	background-color: white;
	background-image: url(../images/search.png);
	background-position: 98% center; 
	background-repeat: no-repeat;
	background-size: 15px;
	padding: 0 1em;
	transition: all 300ms ease-in-out;
}

@media only screen and (min-width: 981px){
	#nav li.divider{
		display: none; /* hide the menu item */
	}

	nav + .search{
		position: relative;
		display: block; /* show the module */
	}

		input[type="search"] {
			position: absolute;
			top: calc(-1.25em - 20px);
			right: 0;
			width: calc(27px + 2%); /* 25 + right/left border */
			cursor: pointer;
			border-color: #fff;
			background-size: 25px;
		}

			input[type="search"]:focus {
				width: 25%;
				background-size: 15px;
				border-color: #ccc;
			}
}

/**************
 * 4. Content *
 **************/
.item-page{
	width: 100%;
}

.item-page .item-image{
	width: auto;
	max-width: 100%;
}

.item-page a,
.blog a{
	color: #d13736;
}

.item-page ul,
.item-page ol,
.blog ul,
.blog ol{
	margin-bottom: 1em;
}

	.item-page li,
	.blog li{
		margin-left: 1em;
	}

#content figure{
	margin-bottom: 2em;
}

	#content figcaption{
		font-size: 14px;
		font-style: italic;
		line-height: 1.7;
	}

		#content figure.columns > figcaption{
			font-size: inherit;
			font-style: normal;
		}	

@media only screen and (min-width: 981px){
	#content figure.columns{
		display: flex;
		align-items: center;
	}
	
		#content figure.columns > div.pull-left.item-image{
			flex: 1 0 auto;
		}
}		

aside h3{
	color: #d13736;
}

.masthead{
	background-repeat: no-repeat;
	background-position: top center;
	background-color: #231f20;
	background-size: cover;
	padding: 1.5em 0;
	margin-bottom: 3.75em;
}

	.masthead h1,
	.masthead h2{
		color: #fff;
		text-shadow: 2px 2px 4px rgba(0,0,0,.58);
		text-align: center;
	}

		.masthead h1{
			font-size: 34px;
			text-transform: none;
		}
		
		.masthead h2{
			margin-bottom: 0;
		}
		
.no-masthead .category-desc{
	margin: 3.75em auto;
	width: 94%;
	max-width: 1170px;
	text-align: center;
}

	.no-masthead .category-desc h1,
	.no-masthead .category-desc h2{
		margin-bottom: 1em;
	}
	
		.no-masthead .category-desc h1{
			text-transform: none;
			font-weight: 400;
		}
		
		.no-masthead .category-desc h2{
			font-size: 18px;
			line-height: 1.5;
		}

.mod-list + p:first-of-type,
.mod-list + h3:first-of-type{
	margin-top: -1.5em;
}
	
@media only screen and (min-width: 981px){
	.item-page .pull-left.item-image{
		float: left;
		margin-right: 1em;
	}
	
	.masthead{
		padding: 9em 0;
	}
	
		.masthead h1{
			font-size: 40px;
		}

	.columns > .row,
	.sidebar-within-section{ /* Bio, Donate, Contact */
		display: flex;
		flex-direction: row;
	}

		.columns > .row > section{
			width: 71.28205128205128%; /* 834px / 1170px */
			margin-right: 2.905982905982906%; /* 34px / 1170px */
		}
		
		.columns > .row > aside{
			width: 25.64102564102564%; /* 300px / 1170px */
			padding: 2em 0;
		}

	.indent-article > article{ /* Donate, Contact */
		width: 45.2991452991453%; /* 530px / 1170px */
		margin-right: 5.982905982905983%; /* 70px / 1170px */
		margin-left: 5.982905982905983%; /* 70px / 1170px */
	}
	
	.indent-article > article + aside{ /* Donate, Contact */
		width: 36.75213675213675%; /* 430px / 1170px */
		padding-top: 2em;
	}

	blockquote.pull-left{
		float: left;
	}	
}

/**********************
 * 4.1 Executive Team *
 **********************/
.team h1,
.team h2{
	text-transform: none;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}
 
.executive-team h1,
.executive-team h2{
	text-align: center;
}

#bio > aside h2,
.executive-team + aside h2{
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: .5em;
	color: #d13736;
}

.executive-team + aside h3{
	text-transform: none;
	color: #444;
}

#bio label{
	top: 2.15rem;
}

	#bio label.active{
		top: .25rem;
	}
	
#bio > aside > .img-fulltext-left,
.columns .row.executive-team > aside > .img-fulltext-left{
	display: none; /* hide sidebar headshot on narrow viewports */
}

@media only screen and (min-width: 981px){
	#bio > .executive-team,
	.row.executive-team > section{
		order: 2;
		width: 68.37606837606838%; /* 800px / 1170px */
		margin-left: 2.905982905982906%; /* 34px / 1170px */
		padding: 2em 0 1em 2.905982905982906%; /* 34px / 1170px */
		border-left: solid 2px #8f8f8f;
	}

	.executive-team h1,
	.executive-team h2{
		text-align: left;
	}

	#bio > .executive-team .item-image{
		display: none; /* hide article headshot on wider viewports */
	}
	
	#bio > aside,
	.row.executive-team > aside{
		order: 1;
		width: 25.64102564102564%; /* 300px / 1170px */
		min-width: 300px;
		padding: 2em 0;
	}
	
		#bio > aside > .img-fulltext-left,
		.row.executive-team > aside > .img-fulltext-left{
			display: block; /* show sidebar headshot on wider viewports */
		}
	
	.team .items-leading{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
		.team .items-leading > div{
			width: 31%;
			margin-bottom: 40px;
		}
		
		.team .items-leading::after{
			content: " ";
			width: 31%;
		}
}

/***********************
 * 4.2 Bureaus & Units *
 ***********************/
.divisions{
	text-align: center;
	margin-bottom: 3.75em;
}

	.divisions h1{
		color: #d13736;
		text-transform: none;
		margin-bottom: 1.25em;
	}
	

	.divisions p{
		margin-bottom: 0;
	}
	
	.divisions_div > div{
		position: relative;
		color: #fff;
		padding: 3em;
	}
		
		.divisions_div > div:first-child{ background-color: #d98c28; }
		.divisions_div > div:nth-child(2){ background-color: #d13736; }
		.divisions_div > div:nth-child(3){ background-color: #174172; }
		.divisions_div > div:nth-child(4){ background-color: #538fa1; }
		.divisions_div > div:last-child{ background-color: #231f20; }

		.divisions_div > div::after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: 0 5px 15px rgba(0,0,0,.3);
			opacity: 0;
			transition: opacity .6s cubic-bezier(.165,.84,.44,1);
		}

			.divisions_div > div:hover::after{
				opacity: 1;
			}
		
img[usemap]{
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

.row.blog.bureau > section .category-desc p{
	margin: 0 auto 2em auto;
}

	.row.blog.bureau > section .category-desc p:not(.fullwidth){
		width: 94%;
		max-width: 1170px;
	}

#content .mod-list.bureau li{
	margin-bottom: 0;
	padding: 2px;
}

	#content .mod-list.bureau a{
		padding: 0;
		border-width: 0;
		text-transform: none;
	}

		#content .mod-list.bureau figure{
			position: relative;
			margin-bottom: 0;
		}

			#content .mod-list.bureau figure::after{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: "";
				background-color: rgba(0, 0, 0, 0.6);
			}
			
			#content .mod-list.bureau figcaption{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 100%;
				text-align: center;
				font-size: 30px;
				font-style: normal;
				color: #fff;
				z-index: 1;
				text-shadow: 2px 2px 4px rgba(0,0,0,.58);
			}

.unit-card > figure{
	position: relative;
	border-top: solid 2px #b7b7b7;
	margin-top: 2.5em;
	padding: 4em 4vw 0 4vw;
}
			
	#content .unit-card figcaption{
		font-style: normal;
		text-align: center;
		line-height: initial;
	}		
			
		.unit-card figcaption p{
			font-size: 24px;
			font-weight: 400;
			line-height: 1.4;
		}

	.unit-card a::after{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
@media only screen and (min-width: 981px){
	.divisions_div{
		display: flex;
		flex-direction: row;
	}
	
		.divisions_div > div{
			width: 20%;
			transition: transform 300ms;
		}
		
			.divisions_div > div:hover{
				/* transform: scale(1.05); */
				z-index: 1;
			}
			
			.divisions_div > div:last-child:hover{
				transform-origin: center right;
			}

	.row.blog.bureau > section .category-desc p:not(.fullwidth){
		width: 88.03418803418803%; /* 1030 / 1170px */
		max-width: 1030px;
	}

	#content .mod-list.bureau li{
		margin-right: 0;
		width: calc(100% / 3);
	}
	
	.unit-card{
		display: flex;
		justify-content: center;
	}
	
		.unit-card > figure{
			display: flex;
			align-items: center;
		}
	
			#content .unit-card figcaption{
				text-align: left;
				margin-left: 4em;
			}
		
			.unit-card img{
				width: auto;
			}
}

/*************
 * 4.3 About *
 *************/
.page-about-us .blog.striped .row-1{
	position: relative; /* Mission */
}

	.page-about-us .blog.striped .row-1::before{
		content: ' ';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: .1;
		background-image: url(../images/logo.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 300px;
	}

/***************
 * 4.4 Contact *
 ***************/
#rsform_29_page_0 label{
	top: 2.15rem;
}

	#rsform_29_page_0 label.active{
		top: .25rem;
	}

	#rsform_29_page_0 input,
	#rsform_29_page_0 textarea{
		width: 100%;
	}

@media only screen and (min-width: 981px){
	#rsform_29_page_0 input,
	#rsform_29_page_0 textarea{
		width: 50%;
	}
	
	#rsform_29_page_0 input[type="submit"]{
		width: 50% !important;
	}
}

/*********************
 * 4.5 Category Blog *
 *********************/
.row.blog,
.row.blog > section{
	max-width: 100%;
	width: 100%;
}

	.row.blog.striped > section .category-desc,
	.row.blog.striped > section .span12{
		margin: 0 auto;
		width: 94%;
		max-width: 1170px;
	}
	
	.striped > section .items-row{
		padding: 1.5em 0;
	}
	
		.striped > section .items-row:nth-child(even){
			background-color: #f2f2f2;
		}
	
	dt.article-info-term{
		display: none;
	}
	
	dd.create{
		font-size: 13px;
		color: #999;
	}
	
	.items-row p.readmore{
		margin-bottom: 0;
	}

	.row.blog.striped > section details.items-row{
		padding: 1.5em 1.5em 0 1.5em;
	}
	
		details.items-row > summary{
			cursor: pointer;
			padding-bottom: 1.5em;
		}

.row-fluid .span6 .item{
	margin-bottom: 3.75em;
}

@media only screen and (min-width: 981px){
	#content:not(.columns) .row.blog.striped > section .category-desc,
	#content:not(.columns) .row.blog.striped > section .span12{
		width: 88.03418803418803%; /* 1030 / 1170px */
		max-width: 1030px;
	}
	
	.pull-left.item-image{
		float: left;
		margin-right: 1em;
	}

	.row-fluid::before,
	.row-fluid::after {
		display: table;
		content: "";
		line-height: 0;
	}

	.row-fluid::after {
		clear: both;
	}	
	
	.row-fluid .span6{
		display: block;
		width: 45.72649572649573%; /* 535 / 1170 */
		min-height: 28px;
		box-sizing: border-box;
		float: left;
		margin-left: 8.547008547008547%; /* 100 / 1170 */
	}

		.row-fluid .span6:first-child {
			margin-left: 0;
		}
}

/******************
 * 4.6 Navigation *		
 ******************/
#content .mod-list{
	margin-bottom: 3.75em;
}
	
	#content .mod-list > li{
		list-style: none;
		margin-bottom: 1.5em;
		margin-left: 0;
	}
	
		#content .hide-active.mod-list > li.current{
			display: none;
		}

		#content .mod-list a,
		.readmore a.btn,
		a.readmore{
			padding: .5em 1em;
			background-color: #fff;
			border-style: solid;
			border-width: 4px;
			border-color: #444;
			color: #444;
			font-weight: 700;
			text-transform: uppercase;
			text-decoration: none;
		}
		
			#content .mod-list a{
				display: block;
				border-color: #444;
				color: #444;
			}
			
			.readmore a.btn,
			a.readmore{
				border-color: #d13736;
				color: #d13736;
			}
			
				.readmore + h3{
					margin-top: 2em;
				}
		
			#content .mod-list a:hover,
			#content .mod-list li.active a,
			.readmore a.btn:hover,
			a.readmore:hover,
			.page-junior-state-s-attorney #content .mod-list li.item-1182 a,
			.page-great-expectations #content .mod-list li.item-1182 a,
			.page-project-17 #content .mod-list li.item-1182 a,
			.page-bmorepopups #content .mod-list li.item-1182 a{
				background-color: #d13736;
				border-color: #d13736;
				color: #fff;
			}

@media only screen and (min-width: 981px){
	#content .mod-list{
		display: flex;
		flex-wrap: wrap;
	}
	
		#content .mod-list > li{
			margin-right: 1.5em;
		}
		
			#content .mod-list > li:last-child{
				margin-right: 0;
			}
}

/************
 * 4.7 Tags *
 ************/
ul.tags{
	display: flex;
}

	ul.tags li{
		list-style-type: none;
		float: left;
		background: url(../images/li-tags.jpg) no-repeat scroll right center;
		margin: 0 6px 0 0;
		padding-right: 12px;
		line-height: 20px;
		text-transform: capitalize;
		font-size: 12px;
		font-weight: bold;
	}
	
		ul.tags li:last-child{
			background: none;
			margin-right: 0;
			padding-right: 0;
		}

/******************
 * 4.8 Pagination *
 ******************/
.pagination {
	margin: 18px 0;
}

	.pagination ul {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 2em;
	}

		.pagination ul > li {
			list-style: none;
			margin-right: 2px;
			margin-bottom: 2px;
			margin-left: 0;
		}

			.pagination ul > li > a,
			.pagination ul > li > span {
				display: block;
				padding: .5em 1em;
				background-color: #fff;
				border-style: solid;
				border-width: 4px;
				border-color: #444;
				color: #444;
				font-weight: 700;
				text-transform: uppercase;
				text-decoration: none;
			}

				.pagination ul > li > a:hover,
				.pagination ul > li > a:focus,
				.pagination ul > .active > a,
				.pagination ul > .active > span {
					background-color: #444;
					color: #fff;
				}

				.pagination ul > .disabled > span,
				.pagination ul > .disabled > a,
				.pagination ul > .disabled > a:hover,
				.pagination ul > .disabled > a:focus {
					border-color: #999;
					background-color: transparent;
					color: #999;
					cursor: default;
				}

/**********************************
 * 4.9 Victim & Witness Services *
 **********************************/
.page-victims-witnesses .category-desc{
	margin: 0 auto;
	width: 94%;
	max-width: 1170px;
	text-align: center;
}

	.page-victims-witnesses .no-masthead .category-desc{
		margin-top: 3.75em;
		margin-bottom: 3.75px;
	}

	.page-victims-witnesses .category-desc h1,
	.page-victims-witnesses .category-desc h2{
		margin-bottom: 1em;
	}
	
		.page-victims-witnesses .category-desc h1{
			text-transform: none;
			font-weight: 400;
		}
		
		.page-victims-witnesses .category-desc h2{
			font-size: 18px;
			line-height: 1.5;
		}

.interior-grid{
	display: flex;
	flex-direction: column;
}

	.interior-grid > div{
		display: flex;
		width: 100%;
		overflow: hidden; /* remove whitespace in IE11 */
	}

		.interior-grid .pull-left.item-image{
			float: none;
			margin-right: 0;
		}
		
			.interior-grid .pull-left.item-image > img,
			.interior-grid .pull-right.item-image > img{
				align-self: center; /* by default, images that are flex-children will be their natural height, regardless of their width */
			}	
		
		.interior-grid > div.item-about_content{
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #f1f1f1;
			background-size: cover;
			padding: 0 5%;
		}

			.interior-grid > div.item-about_content h1{
				margin-top: 1em;
				margin-bottom: 1em;
			}
			
			.interior-grid > div.item-about_content h2{
				margin-bottom: 1em;
			}
			
			.interior-grid > div.item-about_content p{
				font-size: 18px;
			}
			
			.interior-grid > div:not(.item-about_content) p{
				margin-bottom: 0;
			}
			
			.interior-grid > div.item-about_content p:last-child{
				margin-bottom: 3.75em;
			}

.beforeafter > .twentytwenty-wrapper{
	margin-bottom: 1em;
}

@media only screen and (min-width: 981px){
	.beforeafter{
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	
		.beforeafter > .twentytwenty-wrapper{
			width: 49%;
		}
}			
			
@media only screen and (min-width: 1024px){
	.interior-grid{
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 6px;
	}

		.interior-grid > div{
			display: flex;
			width: 50%;
			margin-bottom: 6px;
		}
			
			.interior-grid > div.pull-left,
			.interior-grid > div.pull-right + div.item-about_content{
				border-right: solid #fff 6px;
			}

			.interior-grid > div.pull-right{ order: 2; }
			.interior-grid > div.pull-right + div.item-about_content{ order: 1; }

			.interior-grid .pull-left.item-image > img,
			.interior-grid .pull-right.item-image > img{
				width: auto;
			}
			
			.interior-grid > div.item-about_content{
				padding: 0;
			}
			
				.interior-grid > div.item-about_content > *{
					padding: 0 5%;
				}
}

/*****************
 * 4.10 Campaign *
 *****************/
.page-you-re-not-alone-together-we-re-stronger .hide-active.mod-list{
	margin: 3.75em auto;
	width: 94%;
	max-width: 1170px;
}

	#content .hide-active.mod-list > li{
		text-align: center;
	}

.campaign{
	margin-top: 4px;
	background-repeat: no-repeat, no-repeat;
	background-position: top left, top center;
	background-size: 100% 320px, auto 320px;
}

	.campaign > div{
		display: flex;
		flex-direction: column;
	}

		.campaign p{
			width: 80%;
			font-size: 18px;
			margin: 1em auto 2em auto;
		}
		
		.campaign a[data-micromodal-trigger]{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 320px;
			color: #fff;
			text-decoration: none;
			font-size: 20px;
		}
		
			.campaign a[data-micromodal-trigger]::after{
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				content: '';
				width: 100%;
				height: 320px;
				background-size: cover;
				z-index: -1;
			}
		
			.campaign a[data-micromodal-trigger] > svg{
				font-size: 2em;
				margin-bottom: 10px;
			}
 
@media only screen and (min-width: 981px){
	#content .hide-active.mod-list{
		justify-content: center;
	}

	.campaign{
		display: flex;
		align-items: center;
		min-height: 280px;
		background-position: center 25%;
		background-size: cover;
		background-color: #000;
	}
	
		.campaign > div{
			width: 88.03418803418803%; /* 1030 / 1170px */
			max-width: 1030px;
			margin: 0 auto;
			padding: 2em 0;
		}
		
			.campaign p{
				width: 40%;
				margin: 0;
				color: #fff;
			}
			
			.campaign.left > div{
				align-items: flex-end;
			}
			
			.campaign a[data-micromodal-trigger]{
				flex-direction: row;
				justify-content: flex-start;
				order: 2;
				width: 40%;
				height: auto;
				margin-top: 10px;
				margin-bottom: 0;
			}
			
				.campaign a[data-micromodal-trigger]::after{
					display: none;
				}
			
				.campaign a[data-micromodal-trigger] > svg{
					margin-right: 10px;
					margin-bottom: 0;
				}
}

/*****************************
 * 4.11 Conviction Integrity *
 *****************************/
.page-conviction-integrity .blog .pull-left.item-image{
	margin-bottom: 1em;
}

/*********************
 * 4.12 Publications *
 *********************/
section.blog.publications{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

	section.blog.publications > .items-row{
		padding: 0 2em;
		max-width: 320px;
	}
	
	#content section.blog.publications figcaption{
		text-align: center;
		font-style: normal;
	}
	
		section.blog.publications figcaption > a{
			color: #444;
			text-decoration: none;
		}
		
	section.newsflash.blog.publications{
		margin-bottom: 3.75em; /* FBC Newsletters */
	}

/***********************************
 * 4.13 Crime Control & Prevention *
 ***********************************/
.mod-list > .item-1223{
	display: none;
}

	.page-junior-state-s-attorney .mod-list > .item-1223{
		display: block; /* Donate button on JSA page */
	}

@media only screen and (min-width: 981px){
	.gallery{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

		div.gallery > figure{
			width: 48%;
		}

			div.gallery > figure > a > img{
				border-style: solid;
				border-width: 4px;
				border-color: #fff;
				transition: border-color 300ms;
			}

				div.gallery > figure > a:hover > img{
					border-color: #444;
				}
}
	
/*************************************
 * 4.14 Press Releases & In The News *
 *************************************/
.page-press-releases .items-row,
.page-in-the-news .items-row{
	padding-top: 2.5em;
	border-bottom: solid 1px #ccc;
}

	.page-press-releases .items-row{
		padding-bottom: 2.5em;
	}

	.page-in-the-news .items-row{
		padding-bottom: 1.5em;
	}

	.page-press-releases .category-desc + .items-row,
	.page-in-the-news .category-desc + .items-row{
		padding-top: 0;
	}

.page-press-releases .blog .page-header h2,
.page-in-the-news .blog .page-header h2{
	font-family: 'Lato', Arial, sans-serif;
	font-weight: 700;
	font-size: 22px;
}

	.page-press-releases .blog .page-header h2,
	.page-press-releases .item-page .page-header h2,
	.page-press-releases .blog p.readmore{
		text-align: center;
	}
	
	.page-press-releases .blog .page-header h2 a,
	.page-in-the-news .blog .page-header h2 a{
		color: #444;
		text-decoration: none;
	}

		.page-press-releases .blog .page-header h2 a:hover,
		.page-in-the-news .blog .page-header h2 a:hover{
			color: #d13736;
		}

/*************************
 * 4.15 Impact Statement *
 *************************/
.page-impact-statement div[itemprop="articleBody"]{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

	.page-impact-statement div[itemprop="articleBody"] h2{
		color: #fff;
		margin: 0 auto;
		padding: 3.75em 0;
		width: 94%;
		max-width: 1170px;
		text-align: center;	
	}
	
.page-impact-statement section + div.moduletable{
	margin-top: 3.75em;
	text-align: center;
}

	.page-impact-statement section + div.moduletable ul{
		display: flex;
		justify-content: center;
		list-style: none;
	}
	
		.page-impact-statement .blog section + div.moduletable li{
			margin-right: 2em;
			margin-left: 2em;
		}
		
			.page-impact-statement .blog section + div.moduletable a{
				display: flex;
				flex-direction: column;
				align-items: center;
				text-decoration: none;
				font-size: 13px;
				color: #444;
			}
			
				.page-impact-statement .blog section + div.moduletable a:hover{
					color: #d13736;
				}

				.page-impact-statement .blog section + div.moduletable li:last-child a{
					align-items: flex-start;
					
				}

				.page-impact-statement .blog section + div.moduletable .icon{
					font-size: 70px;
					margin-bottom: 6px;
				}		

@media only screen and (min-width: 981px){
	.page-impact-statement div[itemprop="articleBody"] h2{
		width: 25%;
	}
}
		
/*************
 * 5. Footer *
 *************/
footer{
	background-image: url(../images/bg-footer.png);
	background-repeat: no-repeat;
	background-position:top center;
	background-size: cover;
	padding: 4em 0 3em;
	margin-top: 3.75em;
}

	footer a{
		color: #444;
	}
	
	footer > .row > div{
		margin-bottom: 3em;
	}
	
		footer > .row > div:last-of-type{
			margin-bottom: 0;
		}
	
	footer > .row > div:last-of-type li{
		list-style: none;
		display: inline-block;
		margin-right: .5em;
	}
	
		footer .row > div:last-of-type li:last-child{
			margin-right: 0;
		}
	
		footer .row > div:last-of-type a{
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			width: 60px;
			height: 60px;
			font-size: 36px;
		}
		
			footer .row > div:last-of-type li:first-child > a{ background-color: #3b5998; }
			footer .row > div:last-of-type li:nth-child(2) > a{ background-color: #55acee; }
			footer .row > div:last-of-type li:nth-child(3) > a{ background-color: #3f729b; }
			footer .row > div:last-of-type li:last-child > a{ background-color: #cc181e; }

@media only screen and (min-width: 981px){
	footer > .row{
		display: flex;
		flex-direction: row;
	}
	
		footer > .row > div{
			flex: 1 1 0;
			margin-right: 30px;
			margin-bottom: 0;
		}
		
			footer > .row > div:first-child{
				background-image: url(../images/logo.png);
				background-repeat: no-repeat;
				background-position: top left;
				background-size: 100px;
				padding-left: 128px;
			}
		
			footer > .row > div:last-child{
				margin-right: 0;
			}
}

/**********************
 * 5.1 Subscribe Form *
 **********************/
footer fieldset{
	border: 0;
}

	footer fieldset legend{
		line-height: 1.7;
	}

	footer label{
		top: 2.4rem;
	}

		footer label.active{
			top: .5rem;
		}

	footer input{
		width: 100%;
		border-radius: 0;
		-webkit-appearance: none;
	}
	
		footer input[type="email"]{
			border: solid 1px #db7800;
			height: auto;
			padding: .5rem 1rem;
			margin-bottom: 1.5rem;
			font-size: 1rem;
			line-height: 1.25rem;
			max-width: 100%;
		}
	
		footer input[type="submit"]{
			display: block;
			padding: 8px 10px;
			font-family: 'Lato', Arial, sans-serif;
			font-size: 20px;
			font-weight: 700;
			text-transform: uppercase;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			background-color: #db7800;
			color: #fff;
			border: none;
		}

/***************
 * 6. Colophon *
 ***************/
#colophon{
	font-size: 14px;
	color: #fff;
	background-color: #d13736;
	padding: 1.5em 0;
}
	
	#colophon > .row > div:first-child{
		margin-bottom: 1.5em;
	}

	#colophon a{
		color: #fff;
		text-decoration: none;
	}
	
		#colophon a:hover,
		#colophon li.active a{
			border-bottom: solid 1px #fff;
		}
	
	#colophon li{
		list-style: none;
		line-height: 1.5;
	}

	#colophon li.divider{
		display: none;
	}

@media only screen and (min-width: 981px){
	#colophon > .row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
		#colophon > .row > div:first-child{
			margin-bottom: 0;
		}

		#colophon li{
			display: inline-block;
			position: relative;
			padding-right: 9px;
			margin-right: 5px;
		}
		
			#colophon li:last-child{
				padding-right: 0;
				margin-right: 0;
			}
			
			#colophon li::after{
				content: "|";
				color: #ffb400;
				position: absolute;
				right: 0;
			}
			
				#colophon li:last-child::after,
				#colophon nav li:nth-last-child(2)::after{
					content: "";
				}
}

/*********************
 * 7. Search Results *
 *********************/
input#search-searchword{
	padding: 3px 6px;
}

.search_search{
	line-height: 1.5;
}

.search_search fieldset,
.search_search .form-limit{
	border: none;
	margin-bottom: 1.25em;
}

.search_search .result-title{
	border-top: solid 1px #ddd;
	padding-top: 1em;
}

.search_search .small_search,
.search_search .result-created{
	font-size: 11px;
	color: #999;
	font-weight: normal;
	text-align: left;
}

.search_search .result-text{
	padding-bottom: 1em;
}

.search_search .highlight{
	background-color: #fffebb;
}

.search_search .btn-group {
	position: relative;
	display: inline-block;
	font-size: 0;
	vertical-align: middle;
	white-space: nowrap;
}

.btn-group + .btn-group {
	margin-left: 5px;
}

.search_search .btn {
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 13px;
	line-height: 18px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: #333;
	text-shadow: 0 1px 1px rgba(255,255,255,0.75);
	background-color: #f5f5f5;
	background-image: linear-gradient(to bottom,#fff,#e6e6e6);
	background-repeat: repeat-x;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border: 1px solid #bbb;
	border-bottom-color: #a2a2a2;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

#content ul.chzn-results{
	margin: 0;
}

#content ul.chzn-results li{
	font-size: 1em;
	margin-left: 0;
}

#content a.chzn-single{
	color: #444;
}

.tooltip{
	position: absolute;
	z-index: 1030;
	display: block;
	visibility: visible;
	font-size: 11px;
	line-height: 1.4;
	opacity: 0;
	filter: alpha(opacity=0);
}

.tooltip.in{
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.tooltip.top{
	margin-top: -3px;
	padding: 5px 0;
}

.tooltip-inner{
	max-width: 200px;
	padding: 8px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background-color: #000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.tooltip-arrow{
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}

.tooltip.top .tooltip-arrow{
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-width: 5px 5px 0;
	border-top-color: #000;
}

/***************************************
 * 8. Long Forms                       *
      4:  Community Impact Statement   *
	  25: Request the State's Attorney *
	  26: SAO Citation Request Form    *
 ***************************************/
#rsform_4_page_0 .rsform-block,
#rsform_25_page_0 .rsform-block,
#rsform_26_page_0 .rsform-block{
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 1em;
}

#rsform_4_page_0 .formControls,
#rsform_25_page_0 .formControls,
#rsform_26_page_0 .formControls{
	display: flex; /* tighten up the unnecessary whitespace */
}

#rsform_25_page_0 p.formDescription,
#rsform_25_page_0 p.formDescription + ul{
	font-size: 14px;
	margin-bottom: 0;
}

#rsform_4_page_0 .rsform-text-box,
#rsform_25_page_0 .rsform-text-box,
#rsform_26_page_0 .rsform-text-box{
	font-family: Arial, sans-serif !important;
	font-size: 16px !important;
	width: 80% !important;
}

#rsform_25_page_0 .rsform-block-starttimecomplete{
	float: left;
	margin-right: 1em;
}

#rsform_25_page_0 .rsform-block-endtimecomplete{
	margin-bottom: 0;
}

#rsform_25_page_0 .rsform-block-heading-security > span{
	font-weight: 700;
}

#rsform_25_page_0 p.formDescription + ul li{
	margin-left: 1em;
}

/************************
 * 9. Office Phone List *
 ************************/
.phonelist table{
	width: 100% !important;
}

.phonelist table th,
.phonelist table td {
	width: 20% !important;
}

.phonelist table td{
	font-size: 13px;
}

.phonelist table tr:hover td{
	background-color: #fffebb;
}

/**********************************************
 * 10. Calendar                               *
 *     RSEvents!Pro - All Bootstrap overrides *
 **********************************************/
.page-calendar{
	font-size: initial;
}

.page-calendar .row::before,
.page-calendar .row::after{
	display: none;
}

.page-calendar .element-invisible{
	position: relative;
	width: initial;
	height: initial;
	overflow: initial;
}

.page-calendar .search .form-inline label.element-invisible{
	display: none;
}

.page-calendar .search form,
.page-calendar footer label{
	margin-bottom: 0;
}

.page-calendar .search input[type="search"]{
	box-sizing: border-box;
	box-shadow: none;
}

.page-calendar footer input[type="email"]{
	border-radius: 0;
}

.page-calendar header ul,
.page-calendar footer ul,
.page-calendar #colophon ul{
	margin: 0;
}

.page-calendar .nav > li > a:hover,
.page-calendar .nav > li > a:focus{
	background-color: initial;
}

.page-calendar .nav > li a:hover{
	text-decoration: none;
}

.page-calendar footer h3{
	line-height: initial;
	font-size: initial;
	margin-top: 0;
}

.page-calendar footer input{
	line-height: initial;
}

	.page-calendar footer input[type="submit"]{
		width: 100%;
	}

.page-calendar #colophon a{
	display: initial;
}

@media only screen and (max-width: 767px){
	.page-calendar{
		padding-right: 0;
		padding-left: 0;
	}
}

/*****************************
 * 11. Micromodal            *
 * https://micromodal.now.sh *
 *****************************/
.modal{
	display: none;
}

	.modal.is-open{
		display: block;
	}

.modal video{
	width: 80%;
	height: auto;
}

.modal__overlay{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

.modal__container{
	overflow-y: auto;
	box-sizing: border-box;
}

.modal__header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: transparent;
}

.modal__header .modal__close{
	cursor: pointer;
	position: fixed;
	background: #000;
	color: #fff;
	border: none;
	top: -1px;
	right: 0;
	width: 50px;
	height: 40px;
	padding: 6px;
	display: block;
	overflow: hidden;
	font-size: 24px;
	line-height: 1;
	text-align: center;
	z-index: 1050;
}

	.modal__header .modal__close:before{
		content: "\2715";
	}

.modal__content{
	text-align: center;
}

/*********************
 * 12. Documentation *
 *********************/
.documentation img{
	width: auto;
	max-width: 100%;
	padding: .5em;
	border: solid 1px #ccc;
}

.documentation h1,
.documentation h2,
.documentation h3{
	margin-bottom: .5em;
}

.documentation h2,
.documentation h3{
	margin-top: 1em;
}