﻿html{
	font-family:arial;
	font-size:12pt;
}

body{
	position:relative;
	min-height:100vh;
	padding-bottom:75px; /*height of footer*/ 
}

h1{
	color:#424243;
	font-family:Trebuchet MS;
	font-weight:bold;
	font-size:1.75em;
}

h2, h3, h4, h5, h6{
	font-family: Trebuchet MS;
	color:#424243;
	font-weight:bold;
	margin-top:2rem;
	margin-bottom:1rem;
}

h2{
	color:#355B71;
	font-size:1.5em;
}

h3{
	font-size:1.2em;
}

h4{
	font-size:1.1em;
	font-weight:normal;
}

h5{
	font-size:1.1em;
	font-weight:normal;
}

h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child{
	margin-top:.5em;
}

#banner{
	border-top: 10px solid #003663;
}

#menu-bar{
	height:45px;
	width:100%;
	background:#003663;
	position:relative;
}

#menu-bar #home-btn{
	position:absolute;
	left:15px;
	top:6px;
	border-color:#a8a8a8 !important;;
}	

#menu-bar #home-btn:hover{
	background:#6c6c6c;
}

#banner-img{
	position:relative;
	max-height:340px;
	overflow:hidden;
	text-align:center;
	background: rgb(129,129,131);
background: linear-gradient(97deg, rgba(129,129,131,1) 38%, rgba(252,244,225,1) 59%);
	border-top:5px solid #ffffff;
	border-bottom:5px solid #ffffff;
}
#banner-img h1{
	position: absolute;
    left: 0;
    right: 0;
    color: #ffffff;
    text-shadow: 2px 2px 5px #000000;
    font-size: 2em;
    text-align: center;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1.5em;
	white-space:nowrap;
}

#banner-img.home-banner h1{
	position:absolute;
	left:0;
	right:0;
	color:#ffffff;
	text-shadow: 2px 2px 5px #000000;
	font-size:2em;
	text-align:center;
	bottom:20px;
	margin:auto;
	height:1.5em;
	top:auto;
	white-space:normal;
}

#banner-img:before{
	position: absolute; 
    display: block; 
    content: "";
    top: 0; right: 0; bottom: 0; left: 0;  

}

#banner-img img{
	max-width:100%;
	width:1900px;
	position:relative;
}

#banner-slogan{
	background:#003663;
	color:#ffffff;
	text-align:center;
}

#banner-slogan h2{
	font-size:1.5em;
	font-weight:normal;
	color:#ffffff;
}

#wioa-logo{
	max-width:300px;
}

#accordion .card{
	margin-bottom:.5em;
}

#accordion .card-header{
	cursor:pointer;
	position:relative;
	padding: .75rem 2.25rem .75rem 1.25rem;
}

#accordion .card-header:hover, #accordion .card-header[aria-expanded="true"]{
	background-color: rgba(0,0,0,.1);
}

#accordion h3, #accordion h2{
	color:#484848;
}

#accordion .card-header h2, #accordion .card-header h3{
	font-size:1.25em;
}

#accordion .card-body h2, #accordion .card-body h3{
	font-size:1.2em;
	margin-top: 1.25em;
	margin-bottom: .5em;
	font-size: 1.1em;
}


#accordion .card-header h3, #accordion .card-header h2{
	margin-top:0;
}

#accordion li, li{
	margin-bottom:.25em;
}

#accordion [data-toggle="collapse"] i{
	position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -8px;
}

#accordion [aria-expanded="false"] i:before {
    content: "\f0fe";
	color:#003663;
}

#accordion [aria-expanded="true"] i:before {
    content: "\f146";
	color:#003663;
}

/*For Phone Icon Spacing*/
.mr-2-5{
	margin-right:.7em;
}

.poster-tn span{
	width: 100%;
    display: block;
    text-align: center;
    font-size: 80%;
}	



/**********************GLOBAL MAIN NAV***********************************/
#main-nav{
	background:#383839;
	color:#ffffff;
}

#main-nav ul{
	padding:0;
	text-align:center;
}

#main-nav a{
	text-decoration:none;
	width:100%;
}

#main-nav li{
	list-style-type:none;
}


.navbar-dark .navbar-toggler{
	border-color:#ffffff;
	background:#537487;
}

.navbar-toggler{
	margin:5px 0;

}


.breadcrumb{
	background:none;
	color:#666666;
	padding:0;
	margin-bottom:1rem;
}


.breadcrumb a, .breadcrumb .fa-home{
	color:#666666;
}



.breadcrumb .active{
	color:#000000;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: ">";
	padding-right:.3rem;
}

.breadcrumb-item+.breadcrumb-item{
	padding-left:.3rem;
}



/**************************GLOBAL FOOTER STYLES****************************/
#footer{
	background:#003663;
	background-size:auto 60%;
	position:absolute;
	bottom:0;
	width:100%;
}

#americanJobCenter{
	top:-27px;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	text-align:center;
	color:#000000;
}

#americanJobCenter img{
	margin-top:-9px;
}

/**************************HOME PAGE STYLES*************************/

#main-home-slider .carousel-item:before{
	position: absolute; 
    display: block; 
    content: "";
    top: 0; right: 0; bottom: 0; left: 0;  
    background: rgba(0,0,0,0.15);
}

#main-home-slider .carousel-indicators{
		margin-bottom:3px; /*added to move to bottom*/
}
#main-home-slider .carousel-caption{
	/*transform: translateY(-50%);
    bottom: 0;
    top: 50%;*/
	bottom:0;
	padding-bottom:15px;
}


#news-signup-wrap .news-signup-input{
	width: 300px;
    max-width: 100%;
    padding-right: 55px;
    padding: 3px 55px 3px 3px;
    border-radius: 4px;
	border: 1px solid #356689;
}

#news-signup-wrap .news-signup-icon{
	position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border-radius: 0 4px 4px 0;
	width:auto;
}

#icon-menu-head{
	color:#000000;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.carousel-caption h2{
	font-size:3em;
	text-shadow:0px 0px 8px #000000;
	color:#ffffff;
}


/***************************TAB MENU********************************/

#tab-menu-wrapper{
	margin-top:10px;
	margin-bottom:10px;
}

#tab-menu a{
	display:inline-block;
	background:#cccccc;
	color:#000000;
	padding:5px 10px;
}

#tab-menu a:hover{
	text-decoration:none;
}

#tab-menu a.active{
	color:#ffffff;
	background:#355B71;
}

.tab-menu-content{
	border:1px solid #cccccc;
	padding:10px;
	display:none;
}

.tab-menu-content h2:first-of-type{
	margin-top:.5rem;
}

.tab-menu-content.active{
	display:inline-block;
	width:100%;
}



/*********************UNIVERSAL STYLES*****************************/


p, li{
	line-height:1.2;
}

a{
	color:#0000cc;
}

#content-wrapper{
	margin-top:1em;
	margin-bottom:1.5em;
}

#content-wrapper .container-fluid{
	max-width:1140px;
	left:0;
	right:0;
	margin:auto;
}

.container-fluid-max{
	max-width:1140px;
	left:0;
	right:0;
	margin:auto;
	padding-left:15px;
	padding-right:15px;
}



/*Header Teal*/
.drk-teal-bg{
	background:#355B71;
	color:#ffffff;
}





.white-txt, a.white-txt, .white-txt a{
	color:#ffffff;
}

a.white-txt:hover, .white-txt a:hover{
	color:#ffffff;
}

.blk-txt, a.blk-txt, .blk-txt a{
	color:#000000;
}

.blk-bg{
	background:#000000;
	color:#ffffff;
}

.drk-teal-txt, a.drk-teal-txt, a.drk-teal-txt:hover, .drk-teal-txt a{
	color:#355B71;
}

.red-txt, .important{
	color:#E60000;
}

.orange-txt{
	color:#FF9900;
}

.grey-bg{
	background:#E6E7E8;
}


.fs-70{font-size:70%;}
.fs-75{font-size:75%;}
.fs-80{font-size:80%;}
.fs-90{font-size:90%;}
.fs-100{font-size:100%;}
.fs-110{font-size:110%;}
.fs-120{font-size:120%;}
.fs-130{font-size:130%;}
.fs-140{font-size:140%;}
.fs-150{font-size:150%;}
.fs-160{font-size:160%;}
.fs-170{font-size:170%;}
.fs-180{font-size:180%;}
.fs-190{font-size:190%;}
.fs-200{font-size:200%;}



#update-browser{
	width:1000px;
	left:0;
	right:0;
	margin:auto;
}

#update-browser p{
	margin-bottom:5px;
	font-size:80%;
}


#qr-code p{
	margin-top:30px;
	float:right;
	font-size:80%;
	font-style:italic;
}



/*******************************SEARCH BOX AND OTHER FORM ELEMENT STYLES****************************/
.search-form{
	width: 100%;
	position:relative;
}

.search-form .search-input{
	width: 100%;
    padding-right: 50px;
}

.search-form .search-icon {
	position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
}

.search-input {
    border: 1px solid #356689;
    font-weight: normal;
    padding:4px 10px 4px 6px;
    position: relative;
    width: 60%;
	
	background-color: #fff;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    -moz-transition: border linear .2s,box-shadow linear .2s;
    -o-transition: border linear .2s,box-shadow linear .2s;
    transition: border linear .2s,box-shadow linear .2s;
	
	display: inline-block;
    height: 30px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	
}

.digital-poster{
		font-family: Trebuchet MS;
		font-weight: bold;
		font-size:1.1em;
		color:#484848;
	}




/*********************************MEDIA QUERIES********************************/



/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	#banner-img h1{
		font-size:2.5em;
	}
	
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	/**********************DESKTOP MENU***********************************/
		
	#main-nav .lvl1-nav{
		width: calc(1/6*1140px - (1 - 1/6)*10px);
		display:inline-block;
		position:relative;
		color:#ffffff;
		font-size:1rem;
	}

	#main-nav .lvl1-nav a{
		padding:6px 6px 3px 6px;
		display:inline-block;
		color:#ffffff;
	}

	#main-nav .lvl1-nav a:hover{
		background:#537487;
	}

	#main-nav .lvl1-nav:hover .dropdown{
		display:block;
	}

	#main-nav .lvl1-nav.active{
		background:#134b79;
	}

	#main-nav .dropdown{
		position:absolute;
		top:29px;
		min-width:100%;
		background:#ffffff;	
		z-index:11;
		display:none;
		text-align:left;
		box-shadow:0 0px 4px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);
		white-space:nowrap;
	}

	#main-nav .dropdown a{
		color:#355B71;
		line-height:20px;
	}

	#main-nav .dropdown a:hover{
		color:#ffffff;
	}

	#main-nav .dropdown li{
		border-bottom:1px solid #dfdfdf;
		border-left:1px solid #dfdfdf;
		border-right:1px solid #dfdfdf;
	}

	#main-nav .dropdown li:first-of-type{
		border-top:1px solid #dfdfdf; 
	}
	/*****************************END DESKTOP MENU*****************************/
	
	#banner-img h1{
		left:auto;
		bottom:auto;
		top:20px;
		right:10%;
		height:auto;
	}
	
	.lg-left-border{
		border-left:1px solid #eeeeee;
	}
}

/* Large devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
	#banner-img h1{
		font-size:3em;
	}
	
	#intro-txt{
		font-size:120%;
	}
}

/*Custom for extra wide screens*/
@media (min-width: 1600px) {
	#banner-img h1{
			font-size:3.5em;
	}

}
	

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	body{
		padding-bottom:145px !important
	}
	
	#icon-menu-head{
		font-size:1.25em;
	}
	
	.small-txt-xs{font-size:80%;}
	.xsmall-txt-xs{font-size:65%;}
	.no-gutters-xs{margin-right:0; margin-left:0;}
	.no-gutters-xs>.col, .no-gutters-xs>[class*=col-] {padding-right: 0;padding-left: 0;}
	.hidden-xs{display:none;}
	.w-xs-100{width:100%;}
	.w-xs-75{width:75%;}
	.w-xs-50{width:50%;}
	
	h1{
		font-size:1.2em;
	}
	
	#accordion .card-header h2{
		font-size:1em;
	}
	
}
/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
	body{
		padding-bottom:100px;
	}
	
	#main-search-wrap{
		position: absolute;
		left: 0;
		width: 85%;
		top: 123px;
		z-index: 50;
		right: 0;
	}

	
	#main-search-input{
		background:#dcdcdc;
		border:1px solid #484848;
		color:#000000;
	}
	
	#main-search-input::placeholder{
		color:#484848;
	}

	
	#tab-menu a{
		width:100%;
		margin-bottom:2px;
	}
	
	.breadcrumb{
		font-size:.8em;
	}

		
	h2{
		font-size:1.4em;
	}	
	
	h3{
		font-size:1.1em;
	}
	
	
	
	
	
	
}
/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
	/****************************************MOBILE MENU*************************************/
	
	#main-nav{
		padding:0;
	}
	
	#main-nav button{
		margin-right:10px;
	}
	
	#main-nav .lvl1-nav {
		text-align:left;
		background:#ffffff;
		position:relative;
	}
	
	#main-nav .lvl1-nav a:hover{
		background:#cedde6;
	}
	
	#main-nav .lvl1-nav a:first-of-type{
		color:#355B71;
		width:100%;
		display:block;
		padding:10px;
		border-bottom:1px solid grey;
	}
	
	#main-nav .dropdown{
		display:none;
		top:0 !important;
		text-align:left;
	}
	
	#main-nav .dropdown a{
		padding-left:45px !important;
	}
	
	#main-nav a.expand-collapse{
		position: absolute;
		top: 0;
		border-left: 1px solid grey;
		font-size: 26px;
		color: #355B71;
		bottom: 0;
		background: #ffffff;
		right: 0;
		width: auto;
		border-bottom: 1px solid grey;
		cursor:pointer;
		width:50px;
		text-align:center;
		height:45px;
	}
	
	#navbar-wrap.show{
		border-bottom:10px solid #355B71;
	}
	
	/**************************************END MOBILE MENU***********************************/
	
	
	.container-fluid-md{
		width:100%;
		max-width:100%;
	}
	
	.small-txt-md{
		font-size:80%;
	}
	
	
	h1{font-size:1.8em;}
	h2{font-size:1.4em;}
	h3{font-size:1.2em;}
	h4{font-size:1.1em;}
	h5{font-size:1.1em;}
	h6{font-size:1.05em;}
	
	
	
}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
	.carousel-caption{
		left:10%;
		right:10%;
	}
	
	#main-search-wrap{
		width: 75%;
	}
	
	
	
	
}



@media (max-width: 767.98px){
	h1{
		font-size:1.4em;
	}
	

	
	#accordion h3{
		font-size:1em;
	}
	
	
}


/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	#main-search-wrap{
		width: 90%;
	}
	
	.fs-xs-90{
		font-size:90%;
	}
	
	#banner-slogan h2{
		font-size:1.2em;
	}
	
	.poster-tn img{
		width:300px;
		height:auto;
	}
	
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	.poster-tn img{
		width:200px;
		height:auto;
	}	
	#intro-txt{
		font-size:110%;
	}
	
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {

	
	#left-nav .left-nav-btn{
		font-size:.75em;
	}
	
	.poster-tn img{
		width:300px;
		height:auto;
	}
	
	#intro-txt{
		font-size:110%;
	}
	
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	#main-nav .lvl1-nav{
		width: calc(1/6*960px - (1 - 1/6)*10px);
		font-size:.85em;
	}
	#main-nav .dropdown{
		top:26px;
	}
	#left-nav .left-nav-btn{
		font-size:.9em;
	}
	
	.poster-tn img{
		width:350px;
		height:auto;
	}
	
	#intro-txt{
		font-size:120%;
	}
}





