/*
1.	Header
2.	Navigation
3.	Grid
4.	Slideshow
5.	Service Bar
6.	Flow Flow
*/

.modal__content figcaption{
	background-color: #000;
	padding: .5em;
}

	.modal__content figcaption > a{
		color: #fff;
	}

/*************
 * 1. Header *
 *************/
@media only screen and (min-width: 981px){
	header .branding{ /* hide logo */
		display: none;
	}
}

/*****************
 * 2. Navigation *
 *****************/
/* accommodate Smart Slider 3 */
main > .row,
main .branding{
	position: relative;
	z-index: 1;
}

main .branding{
	display: none;
}

@media only screen and (min-width: 981px){
	main{
		position: relative;
	}
	
		main .branding{
			display: block;
			width: 175px;
			height: 175px;
			position: absolute;
			top: 10px;
		}
		 
		main nav > ul{
			margin-left: 175px; /* width of logo */
		}
}	

/***********
 * 3. Grid *
 ***********/
/****************************************************************************************************************************
 * 1. Narrow viewports                                                                                                      *
 *	  a. Stack the columns                                                                                                  *
 *	  b. Hide the 2 smaller images associated with Victim & Witness Services                                                *
 *	  c. Layout flows image, CTA, image, CTA, image, CTA                                                                    *
 * 2. Wide viewports without grid support                                                                                   *
 *	  a. 2x2 grid                                                                                                           *
 *	  b. Hide the 2 smaller images associated with Victim & Witness Services                                                *
	  c. Hide image associated with Victim & Witness Services so the background image gives the appearance of equal heights *
 * 3. Wide viewports with grid support                                                                                      *
 *	  a. Optimized layout                                                                                                   *
 ****************************************************************************************************************************/
#content{
	margin-top: 3em;
}

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

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

		.grid-container > div:nth-child(2),
		.grid-container > div:nth-child(3){
			display: none;
		}
		
		.grid-container > div:nth-child(1){ order: 1; }
		.grid-container > div:nth-child(4){ order: 4; }
		.grid-container > div:nth-child(5){ order: 6; }
		.grid-container > div:nth-child(6){ order: 5; }
		.grid-container > div:nth-child(7){ order: 7; }
		.grid-container > div:nth-child(8){ order: 8; }
		.grid-container > div:nth-child(9){ order: 10; }
		.grid-container > div:nth-child(10){ order: 9; }
		
		.grid-container > div.customcta{
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #f1f1f1;
			background-size: cover;
			padding: 0 5%;
		}

			body.dark-mode .grid-container > div.customcta{
				background-color: var(--bg-color);
				background-image: none !important;
			}

			@media (prefers-color-scheme: dark){
				.grid-container > div.customcta{
					background-color: var(--bg-color);
					background-image: none !important;
				}
			}

			.grid-container > div.customcta h1{
				margin-top: 1em;
			}
			
				.grid-container > div.customcta:nth-child(4) h1{ color: #d13736; }
				.grid-container > div.customcta:nth-child(5) h1{ color: #538fa1; }
				.grid-container > div.customcta:nth-child(8) h1{ color: #231f20; }

				body.dark-mode .grid-container > div.customcta h1 a,
				body.dark-mode .grid-container > div.customcta:nth-child(8) h1{
					color: #fff !important;
				}

				@media (prefers-color-scheme: dark){
					.grid-container > div.customcta h1 a,
					.grid-container > div.customcta:nth-child(8) h1{
						color: #fff !important;
					}
				}

			.grid-container > div.customcta h2{
				margin-bottom: 1em;
			}
			
			.grid-container > div.customcta p{
				font-size: 18px;
			}
			
			.grid-container > div:not(.customcta) p{
				margin-bottom: 0;
			}
			
			.grid-container > div.customcta p:last-child{
				margin-bottom: 1em;
			}
			
				#content .grid-container > div.customcta p:last-child > a{
					display: inline-block;
					padding: .5em 1em;
					background-color: #fff;
					border-style: solid;
					border-width: 4px;
					font-weight: 700;
					text-transform: uppercase;
					text-decoration: none;
				}
				
					#content .grid-container > div.customcta:nth-child(4) p:last-child > a,
					#content .grid-container > div.customcta:nth-child(9) p:last-child > a{
						border-color: #d13736;
						color: #d13736;
					}
					
					#content .grid-container > div.customcta:nth-child(5) p:last-child > a{
						border-color: #538fa1;
						color: #538fa1;
					}
					
					#content .grid-container > div.customcta:nth-child(8) p:last-child > a{
						border-color: #231f20;
						color: #231f20;
					}
					
						#content .grid-container > div.customcta:nth-child(4) p:last-child > a:hover,
						#content .grid-container > div.customcta:nth-child(9) p:last-child > a:hover{
							background-color: #d13736;
							color: #fff;
						}
						
						#content .grid-container > div.customcta:nth-child(5) p:last-child > a:hover{
							background-color: #538fa1;
							color: #fff;
						}
						
						#content .grid-container > div.customcta:nth-child(8) p:last-child > a:hover{
							background-color: #231f20;
							color: #fff;
						}

@media only screen and (min-width: 1024px){
	.grid-container{
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
	}

		.grid-container > div{
			display: flex;
			flex-basis: calc(50% - 3px);
			min-height: 492px;
			margin-bottom: 6px;
		}
		
			.grid-container > div:nth-child(1){
				order: 1;
				background-size: cover;
				background-position: center;
			}
			
				.grid-container > div:nth-child(1) img{
					display: none;
				}

			.grid-container > div:nth-child(4){ order: 4; }
			.grid-container > div:nth-child(5){ order: 5; }
			.grid-container > div:nth-child(6){ order: 6; }
			.grid-container > div:nth-child(7){ order: 7; }
			.grid-container > div:nth-child(8){ order: 8; }
			.grid-container > div:nth-child(8){ order: 9; }
			.grid-container > div:last-child{ order: 10; }
		
			.grid-container > div.customcta{
				padding: 0;
			}
			
				.grid-container > div.customcta > *{
					padding: 0 5%;
				}
}

@supports(display: grid){
	@media only screen and (min-width: 1024px){
		.grid-container{
			display: grid;
			grid-gap: 6px;
			grid-template-columns: repeat(4, 1fr);
			padding: 6px;
		}

			.grid-container > div{
				background-color: black;
				min-height: auto;
				margin-bottom: 0;
			}
			
			.grid-container > div:nth-child(1) img{
				display: block;
			}
				
			.grid-container > div:nth-child(2),
			.grid-container > div:nth-child(3){
				display: initial;
			}
			
			.grid-container > div.customcta{
				padding-right: 20%;
				padding-left: 20%;
			}

			.grid-container > div:first-child{
				grid-column: 1 / 3;
				grid-row: 1 / 2;
			}

			.grid-container > div:nth-child(2){
				grid-column: 1 / 2;
				grid-row: 2 / 3;
			}

			.grid-container > div:nth-child(3){
				grid-column: 2 / 3;
				grid-row: 2 / 3;
			}

			.grid-container > div:nth-child(4){
				grid-column: 3 / 5;
				grid-row: 1 / 3;
			}

			.grid-container > div:nth-child(5){
				grid-column: 1 / 3;
				grid-row: 3 / 5;
			}

			.grid-container > div:nth-child(6){
				grid-column: 3 / 5;
				grid-row: 3 / 5;
			}

			.grid-container > div:nth-child(7){
				grid-column: 1 / 3;
				grid-row: 5 / 7;
			}

			.grid-container > div:nth-child(8){
				grid-column: 3 / 5;
				grid-row: 5 / 7;
			}

			.grid-container > div:nth-child(9){
				grid-column: 1 / 3;
				grid-row: 7 / 9;
			}
			
			.grid-container > div:last-child{
				grid-column: 3 / 5;
				grid-row: 7 / 9;
			}
	}
}

/****************
 * 4. Slideshow *
 ****************/
.n2-ss-slider .n2-ss-layer.mobile-landscape[data-pm="normal"]{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	z-index: 0;	
}

/******************
 * 5. Service Bar *
 ******************/
.moduletable_services{
	background-color: #d13736;
}

	.moduletable_services > ul{
		display: flex;
		flex-direction: column;
		align-items: center;
		list-style: none;
		margin: 0 auto;
		width: 98%;
		max-width: 1170px;
	}
	
		.moduletable_services li{
			padding: 1.25em 0;
			text-align: center;
		}

		.moduletable_services img{
			width: auto;
			margin: 0 auto 10px auto;
		}

		.moduletable_services .icon{
			display: block;
			width: 41px;
			height: 41px;
			margin: 0 auto;
		}
		
		.moduletable_services a{
			color: #fff;
			text-decoration: none;
		}
		
			.moduletable_services a:hover{
				color: #ffb400;
			}
			
			.moduletable_services a > img{
				background-color: #fff;
				transition: background-color 300ms;
			}
			
				.moduletable_services a:hover > img{
					background-color: #ffb400
				}

@media only screen and (min-width: 981px){
	.moduletable_services > ul{
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
}

/****************
 * 6. Flow Flow *
 ****************/
.flow-flow{
	margin-top: 2em;
}

	.flow-flow h1{
		text-align: center;
		font-size: 40px;
		color: #000;
	}