h1, h2, h3, h4, h5, h6, p, ul, td. th {font-family: Arial, sans-serif;}
.h1, .h2, .h3, .h4, .h5, .h6 {font-family: Arial, sans-serif;}

p, ul, blockquote, pre, td, th, label, li {font-size: 14px; line-height: 20px}
.h2 {font-size: 24px; font-weight: bold; letter-spacing: 0.63px}
.h3 {font-size: 20px; font-weight: bold; letter-spacing: 0.53px}

.text-M-700 {font-family: 'Arial', sans-serif; font-weight: 700}
.text-M-800 {font-family: 'Arial', sans-serif; font-weight: 800}

.card-title {font-size: 16px; color: #48525b; font-weight: bold}
.card {border: solid 1px #979797; border-radius: 0px}
.card-img-top {border-bottom: solid 1px #979797; border-radius: 0px}

.h1-adjusted {font-size: 2em}


p, ul, blockquote, pre, td, th, label {margin-top: 0px; color: #000}
li {padding-bottom: 19px}
li:last-child {padding-bottom: 0px}

.ul-right {text-align: right; direction: rtl;}

h1, h2, h3, h4, h5, h6, p, ul, td. th {font-family: Arial, sans-serif;}
.h1, .h2, .h3, .h4, .h5, .h6 {font-family: Arial, sans-serif;}

/*p, ul, blockquote, pre, td, th, label, li {font-size: 14px; line-height: 20px}  DO NOT EVER USE PX FOR THE PAGE BODY CONTENT - it breaks DPH Font Size Picker */
.h2 {font-size: 24px; font-weight: bold; letter-spacing: 0.63px}
.h3 {font-size: 20px; font-weight: bold; letter-spacing: 0.53px}

.text-M-700 {font-family: 'Arial', sans-serif; font-weight: 700}
.text-M-800 {font-family: 'Arial', sans-serif; font-weight: 800}

.card-title {font-size: 16px; color: #48525b; font-weight: bold}
.card {border: solid 1px #979797; border-radius: 0px}
.card-img-top {border-bottom: solid 1px #979797; border-radius: 0px}

.h1-adjusted {font-size: 2em}


p, ul, blockquote, pre, td, th, label {margin-top: 0px; color: #48525b}
/* li {padding-bottom: 19px} */
li:last-child {padding-bottom: 0px}

.ul-right {text-align: right; direction: rtl;}

/* MAIN NAVIGATION CLASSES */
#header {} /* contains mobile menu icon and text */
.li-margin-left-20 {margin-left: 20px}
.mobile-icon {cursor: pointer}
.logo-placement {margin-top: -46px}
.dph-logo {width: 100%; max-width: 160px} /* display: block; max-width: 528px */
.close-placement {margin-top: -46px}

#mobile-menu-div {position: fixed; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1; padding-top: 4px; width: 100%; overflow: scroll}
#open-header {width: 100%} /* contains mobile close menu icon and text */
#menu {margin-top: 66px} /* div that contains the nav text */
.cursor {cursor: pointer}
.media-nav-div {display: grid; position: relative; margin: 0 auto}
.mobile-menu {font-size: 16px; font-weight: bold; padding-left: 20px}
.mobile-menu a:link, .mobile-menu a:visited {color:#2D3F77; text-decoration: underline}

/*ListGroup Nav */
.list-group li {
    padding: .139rem;
}

.list-group li a {
    text-decoration: none;
    color: #075290 !important;
    line-height: 1.2em;
    margin: 0;
}

.list-group li a:hover,
.list-group li {
    color: #075290 !important;
    cursor: pointer;
}

.list-group-item {
    border: none;
    margin: auto .45em;
    padding: .45rem;
    border-top: 1px solid rgba(0, 0, 0, .125);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    line-height: 1.15em;
}

.list-group-item:hover {
    background-color: #fcfcfc;
}

.list-group>li .list-group {
    margin-top: .45em;
    margin-left: .8em;
}

.list-group>li .list-group li:last-child {
    border-bottom: none;
}

/* added javascript class */
.open-fixed-menu {position: fixed; top: 0px; padding-top: 4px; padding-bottom: 4px; width: 100%; z-index: 1} /* fixed item on scrollable mobile menu */
.btn {border-radius: 0px}
/* .btn-outline-white {border: solid 2px #ffffff} */
/* .btn-outline-aqua {border: solid 2px #007483} */
.section-buttons {}
.resource-top-section {}
.mobile-infographic {}
.desktop-infographic {display: none}


/* COLORS, LINES, HYPERKINKS */
.text-black {color: #000}
.text-blue {color: #061C60}
.bg-blue {background-color: #061C60}
.bg-lblue {background-color: #2d68a8}
.bg-ablue {background-color: #4F81BD}
.bg-bblue {background-color: #31859C}
.bg-cblue {background-color: #17375E}
.bg-lgrey {background-color: #D3D3D3}
.bg-dblue {background-color: #345DA6}
.bg-eblue {background-color: #C2D1EC}
.bg-fblue {background-color: #DCE5F4}

.text-white {color: #FFFFFF}



a {color: #4D4D4D; text-decoration: underline}
/*a:hover {color: #1C1C1C} */



/* BANNER SLIDE */
.jumbotron-flu {
  background-image: url("../../images/photo-flu-banner.jpg");
  background-size: cover;
  background-position: center center;
  border-radius: 0;
  height: 280px;
}

.banner-rectangle {height: 8px; width: 130px; background-color: #4dbcb5; text-align: left;}
.banner-horiz-gradient {height: 24px; background-image: linear-gradient(to right, rgba(120,149,205,1), rgba(141,213,235,1), rgba(0,127,172,1))}
.banner-vert-gradient {background-image: linear-gradient(to bottom, rgba(120,149,205,1), rgba(141,213,235,1), rgba(0,127,172,1))}
.social-icons {width: 75px; height: 75px}




/* OTHER */
.center {text-align: center}
.right {text-align: right}
.justify {text-align: justify}
.center-mobile {text-align: center}

.fixed-footer {position: fixed; width: 100%; height: 40px; bottom: 0; z-index: 1}

.video-100 {width: 100%; height: 130%; padding-bottom: 20%}
.w-100-img {width: 100%; height: auto; margin-bottom: 20px}



/* collapsed sections */
button .collapseSection::before {font-family: 'FontAwesome'; content: "\f068"}
button.collapsed .collapseSection::before {font-family: 'FontAwesome'; content: "\f067"}


/* collapsed sections ARROW */
button .collapseSection-Arrow::before {font-family: 'FontAwesome'; content: "\f062"}
button.collapsed .collapseSection-Arrow::before {font-family: 'FontAwesome'; content: "\f063"}


/* Left Side Menu */
a .collapseVaccineMenu::before {font-family: 'FontAwesome'; content: "\f068"}
a.collapsed .collapseVaccineMenu::before {font-family: 'FontAwesome'; content: "\f067"}



/* MOBILE PORTRAIT */
@media only screen and (min-width: 0px) {
	body {
		
	}

	/* MAIN NAVIGATION CLASSES */
	#desktop-menu {display: none}
	#mobile-menu-div {display: none}
	.media-nav-div {width: 88%}


}



/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
	body {
		
	}

	/* MAIN NAVIGATION CLASSES */
	#desktop-menu {display: none}
	#mobile-menu-div {display: none}
	.media-nav-div {width: 88%}

}



/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
	body {
		
	}


}



/* SMALL TABLET */
@media only screen and (min-width: 600px) {
	body {
		
	}
	
}



/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) { 
	body {
		
	}
	
	.jumbotron-flu {height: 330px}
	.resource-top-section {padding-left: 5px; padding-right: 5px}
	.social-icons {width: 50px; height: 50px}
	.video-100 {width: 690px; height: 388px; padding-bottom: 0}
	.section-buttons {padding-left: 10px; padding-right: 10px}
	.mobile-infographic {display: none}
	.desktop-infographic {display: block;}
}


/* TABLET/NETBOOK */
@media only screen and (min-width: 945px) { 
	body {
		
	}

	.w-100-img {margin-bottom: 0px}
	.h1-adjusted {font-size: 2.5em}

}




/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) { 
	body {

	}
	
	/* DPH MEDIA HEADER */
	.colAtoZ1, .colAtoZ2 {display: block}
	.colGrey3 {display: block}
	.colGrey4{float:right; width: 300px; padding-top:10px;}
	.globalNavGreyMedia a:link, .globalNavGreyMedia a:visited {font-size: 18px}
	
	/* DPH MEDIA FOOTER */
	.column3alt {font-size: 11px; font-family: Arial, Helvetica, sans-serif; width: 70%; margin-left: 15%; margin-right: 15%}
	.column3alt-1 {padding-left: 2%; width: 30%; display: inline-block}
	.column3alt-2 {width: 66%; display: inline-block; vertical-align: top}

	.media-nav-div {width: 1003px; float: none}	
	.dph-width {width: 1003px; float: none; margin: 0 auto; padding: 0%}
	
	.social-icons {width: 32px; height: 32px}

}

@media only print and (min-width: 768px) {
	body {

	}
	#mobile-icon {display: none}
	#mobile-menu-div {display: none}
	.logo-placement {display: none}
}