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

/* ------------------------------------------------------------------------ CSS Variables */

:root {
	--white: #fff;
	--black: #181818;
	--pink-dk: #C2006B;
	--pink-lt: #ff5cb6;
	--green-lt: #84E673;
	--green-md: #61C250;
	--green-dk: #097A38;
	--blue-lt: #009FDA;
	--blue-md: #0073CF;
	--blue-dk: #006BB7;
	--error: #C2006B;

	--grey-lt: #F0F0F0;

	--header-height: 104px;
	--header-height-scroll: 86px;
	--footer-height: 248px;
	--section-p: 4rem;
	--section-p-sm: 3rem;

	--card-p: 2rem;
	--card-p-sm: 2rem;

	--border-color: rgba(0, 0, 0, .2);

	--swiper-theme-color:#fff;
	--swiper-navigation-size: 2rem;
}

@media (min-width: 768px) {
	:root {
		--footer-height: 144px;
	}
}

@media (min-width: 992px) {
	:root {
		--footer-height: 142px;
	}
}

@media (min-width: 1400px) {
	:root {
		--header-height: 185px;
		--footer-height: 174px;
		--card-p: 2.5rem;
	}
}

@media (min-width: 1400px) {
	:root {
		
		--section-p: 5.625rem;
		--section-p-sm: 4rem;

		--card-p: 3.5rem;
		--card-p-sm: 3rem;
		
		--swiper-navigation-size: 2.5rem;
	}
}


/* ------------------------------------------------------------------------ Page Styles & Resets */

body {
	font: 400 100%/1.6 'Open Sans', Arial, Helvetica, sans-serif; 
	color: var(--black);
	background-color: var(--white);
} 

@media (min-width: 992px) {

}


/* ------------------------------------------------------------------------ Keyboard Accessibility */

.skip-link { 
	position:absolute; 
	left:-10000px; 
	top:0; 
	width:1px; 
	height:1px; 
	overflow:hidden;
	background-color: var(--green);
	color: var(--white);
	font-size: 0.875rem;
	text-decoration:none;
	z-index: 1050;
	padding:0.5rem 0.625rem; 
} 

.skip-link:focus, .skip-link.sr-only-focusable:active, .skip-link.sr-only-focusable:focus {
	position: absolute; 
	outline: none; 
	left:0;
	outline: none; 
	width:auto; 
	height:auto;
} 

.skip-link:hover {
	color: var(--white);
	filter: brightness(1.1);
}

a:focus, .btn:focus {
	outline: solid thin rgba(0, 0, 0, 0.5);
	box-shadow: none;
} 

.sidenav__header-link:focus, .card__header-link:focus {
	outline: solid thin rgba(255, 255, 255, 0.5);
}

a:hover, a:active { outline: none !important; } /*...not with mouse (kinda) */


/* ------------------------------------------------------------------------ Headers */

h1, h2, h3,
.h1, .h2, .h3  { 				
	margin-bottom: 1rem;
	font-family: 'Lora', Arial, Helvetica, sans-serif; 
	font-weight: 700;
}	

h1, .h1 {	  
	font-size: 2.25rem;
	line-height: 1.1;
	font-weight: 600;
}
	
h2, .h2 {
	font-size: 1.75rem;
	line-height: 1.2; 
}
		
h3, .h3 { 
	font-size: 1.5rem; 
	line-height: 1.4;
}	

.h3--sm { 
	font-size: 1.25rem;
	margin-bottom: .75rem;
}

h2, h3,
.h2, .h3  { 
	margin-top: 2.5rem;
}

hr + h2, 
hr + h3, 
section h2:first-child,
section h3:first-child {
	margin-top: 0;
}

h2 + h3 {
	margin-top: 3rem;
}


@media (min-width: 1400px) {	
	h1, .h1 {
		font-size: 3rem;
	}

	h2, .h2 {
		font-size: 2.375rem;
	}

	h3, .h3 { 
		font-size: 2rem; 
	}	

	.h3--sm { 
		font-size: 1.5rem; 
	}	

	h2, h3,
	.h2, .h3  { 
		margin-top: 3rem;
	}
}	


body {
    background-color: #f9f9f9 !important;
}

/* ------------------------------------------------------------------------ Other Base Text Styles */

.color-inherit {
	color: inherit;
}	

.text-muted {
	color: var(--black)!important;
}

.text-white {
	color: var(--white);
}

.text-green-dk {
	color: var(--green-dk);
}

.text-blue-lt {
	color: var(--blue-lt);
}

.text-blue-dk {
	color: var(--blue-dk);
}

.intro-text {
	font-size: 1.25rem;
}

.intro-text--serif {
	font-family: 'Lora', Arial, Helvetica, sans-serif; 
	font-weight: 700 !important;
}

.note {
	font-size: .875rem;
}

.date-icon {
	font-weight: bold;
	position: relative;
}

.date-icon:after {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: .5rem;
	vertical-align: text-top;
}

.date-icon--expired {
	color: var(--pink-dk);
}

.date-icon--expired:after {
	background-image: url(../../images/icon-date-expired.svg);
}

.date-icon--active {
	color: var(--green-dk);
}

.date-icon--active:after {
	background-image: url(../../images/icon-date-active.svg);
}

sup, sub {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup { 
	top: -0.5em; 
}

sub { 
	bottom: -0.25em; 
}

@media (min-width: 1400px) {	
	p,
	.p,
	li,
	label,
	table {
		font-size: 1.25rem;
	}

	.intro-text {
		font-size: 1.5rem;
	}

	.note {
		font-size: 1.063rem;
	}	
}


/* --- Header --- */

.header {
	background-color: var(--white);
    box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    padding: 2em 0;
	position: relative;
}

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

.print-footer { 
	display:none;
}

.footer { 
	background-color: var(--white);
	margin-top: auto!important;
	padding-bottom: var(--section-p-sm);
}

.footer .container {
	border-top: 1px solid var(--border-color);
	padding-top: var(--section-p-sm);
}

.footer a { 
	color: var(--black);
	font-weight: normal;
}

.copyright {
	font-size: .875rem;
}