/*
Theme Name: State of Hawaii Scroll Template for o365
Theme URI: 
Author: HIC
https://jobs.hawaii.gov/wp-admin/themes.phpAuthor URI: 
Description: Child template for State Templates (v2).
Template: hic_state_template_parent
Version: 1.01
License: 
License URI:
*/

@import url("../hic_state_template_parent/style.css");
@import url("https://use.fontawesome.com/releases/v5.10.2/css/all.css");
html {
	background: #FFF; 
	height: 100%;
}

#tbl-o365 ul { list-style: inherit; }

/* SharePoint Training Registration */f
.big-button { text-decoration: none !important; }

p[x-apple-data-detectors].phoneText {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.jobsTitle a{
	color:#4D76A4 !important;
}
@media only screen and (max-width: 750px) {
	.inner-header{
		background: #FFE url("/wp-content/uploads/2019/12/background.jpg") 0% 20% no-repeat;
	}
	.jobTitle a{
		color:black !important;
	}
	.jobTitle a:visited{
		color:black !important;
	}
	.jobTitle a:link{
		color:black !important;
	}
	.jobTitle a:active{
		color:black !important;
	}
}
.jobstagLine{
	color:#79482A !important;
}
/************************************************************************
 Video Option
************************************************************************/
#video_section_career_32{
	display:none;
	
}
#video_section_about_32{
	display:none;
}
#video_section_career_28{
	display:none;
}
#video_section_about_28{
	display:none;
}
#video_section_career_30{
	display:none;
}
#video_section_about_26{
	display:none;
}
#video_section_about_1101{
	display: none;
}
#video_section_career_1101{
	display:none;
}

#video_section_about_1089{
	display: none;
}
#video_section_career_1089{
	display:none;
}

#employBanner_30{
	display:flex;
	flex-direction:row;
	justify-content:center;
}

#leaderBanner_30{
	background-image: url("/wp-content/uploads/2019/10/state-seal-blue.png"); 
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-color: #27508b;
	color:white;
}
#leaderBanner_26{
	display:none;
}
#leaderBanner_32{
	display:none;
	
}
#leaderBanner_28{
	display:none;
}
#leaderBanner_22{
	display:none;
}
#about_us_26{
	display:none;
}
#about_us_28{
	display:none;
}
#about_us_32{
	display:none;
}
#upcoming_28{
	display:none;
}
#upcoming_30{
	display:none;
}
#upcoming_32{
	display:none;
}

#about_us_30{
	background-image: url("/wp-content/uploads/2019/10/Adobe2.png"); 
	color:white;
	background-size: cover;
	background-repeat: no-repeat;
	text-align:center;
}
#aboutBottomTitle p{
	text-align:center;
}
#inner_26{
	margin-bottom: 50px;
}
#upcoming_26{
	margin-top: -20px;
	color: white;
	height: 650px;
	background-image: url("/wp-content/uploads/2020/02/ConventionCenterPhotoShopped.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
}
@media only screen and (max-width: 820px) {
	#upcoming_26{
		background-image: url("/wp-content/uploads/2019/12/Career-Events.jpg"); 
	}
}
#video_section_career_26{
	color: white;
	height: 750px;
	font-size: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#video_section_career_26 b {
	text-align: center;
	font-size: 35px;
	vertical-align: middle;
	line-height: 250px;
}
#video_section_about_30{
	color: white;
	height: 750px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0px 0px 0px 0px;
}
#title_about_30  {
	text-align: center;
	color:white;
	font-size: 40px;
	vertical-align: middle;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
#title_career_26  {
	text-align: center;
	color:white;
	font-size: 40px;
	vertical-align: middle;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

#employBanner_26{
	display:none;
}
#employBanner_28{
	display:none;
}
#employBanner_32{
	display:none;
}

@media only screen and (max-width: 730px) {
	#video_section_about_30{
		height: 275px;
	}
	#video_section_career_26{
		height: 275px;
	}
	#leaderBanner_30{
			  background-size: 300px 300px !important;
	}
	#title_about_30  {
		text-align: center;
		color:white;
		font-size: 30px;
		vertical-align: middle;
	}
	#employBanner_30{
		height: 100%;
	}

}
/**********************************************************************
=COMMON
**********************************************************************/

q {
  display:block;
}
q:before {
  content: open-quote;
}
 
q:after {
  content: close-quote;
}
blockquote.quoteBlock {
    border:none;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:-30px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before { 
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
} 
blockquote:after { 
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
}
#breadcrumb{
	margin: 0px 0px 0px 0px;
}
.squareBreak{
	line-height: 300%;
}
#crumbs{
	display:none;
}
.pagetitle{
	display:none;
}
#header {
	background: #fff none no-repeat scroll 0 20%;
}

.stripe-row {
	width:100%;
	padding: 8px 0 7px;
	display:table;
}

/**********************************************************************
=DISABLED MAX WIDTH AS PER NATHAN'S REQUEST Disabled Padding
**********************************************************************/

.main-wrapper {
	margin: 0 auto;
	text-align: left;
	max-width: 1022px;  
}
.inner-wrapper {
	/*
	padding: 10px  30px;
	*/
}
.inner-wrapper .page-id-77 {
	background-color: white;
}
.reverse ul li.six-col a {
	color:#fff;
}


.section-title, .our-number{
	font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 30px;
	text-align: center;
}
.section-title-home{
	font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 30px;
	text-align: center;
	text-shadow: 1px 1px 2px black;   
}
h3{
	color:white;
}
.section-subtitle{
	font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 30px;
}

.inner-wrapper div.entry-content h4 {
	padding: 10px;
}

@media only screen and (min-width: 767px) {
	.section-title{
		font-size: 30px;
		margin-top: 0.8em;
		margin-bottom: 0.4em;
	}
	.our-number{
		font-size: 30px;
	}
	.section-title-home{
		font-size: 30px;
	}

	.section-subtitle{
		font-size: 25px;
	}
}

.simple-border-button a{
	padding: 5px 20px;
	display: inline-block;
	text-decoration: none;
	background-color: #d17f09;
	color: #fff;
}

.simple-border-button a:hover {text-decoration: none; background-color: #022c5c; color: #ffffff;}


.simple-border-button.reverse a{
	border: 1px solid #fff;
	padding: 20px;
}

.simple-green-button{
	margin: 0 auto
}

.simple-border-button a img {
	vertical-align: middle;
	padding: 10px 0 10px 20px;
}


h4.homesub {
	font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 35px;
	text-align: left;
	text-shadow: 1px 1px 2px black;
	color:#fff;
}

.story-detail-topbar-left {border:2px solid #022c5c;; width: 150px; display:block; margin:5px;}

hr.style-orange {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: #d17f09;
	border-image: none;
	border-style: solid none none;
	border-width: 4px 0 0;
	display: block;
	height: 4px;
	margin: 0 auto;
	padding: 0;
	width: 50%;
}

hr.style-white {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: #fff;
	border-image: none;
	border-style: solid none none;
	border-width: 4px 0 0;
	display: block;
	height: 4px;
	margin: 0 auto;
	padding: 0;
	width: 50%;
}


@media only screen and (min-width: 767px) {
	.stripe-row {
		display:block;
	}
}

.content-wrapper {
	max-width: 1022px;
	margin: 1em auto;
	padding-right: .5em; padding-left: .5em;
}

.stripe-row img.scp_post_thumbnail {
	width: 100px;
}

.scp_posts .scp_post .scp_post_read_more {
	display: block;
	margin-top: 10px;
	text-align: right;
}

.primary-content .scp_post_read_more a { text-decoration: none;}

.scp_posts .scp_post .scp_post_thumbnail, .scp_posts .scp_post .scp_post_thumbnail_f {
	width: 100px !important;
}

span.scp_post_read_more a{
	border: 1px solid #000;
	padding: 5px 20px;
	display: inline-block;
}

span.scp_post_read_more a:hover {text-decoration: none; background-color: #022c5c; color: #ffffff;}


.subpage-top-main-img {text-align: center; color: #fff; background-repeat: no-repeat; background-position: center; background-size: cover; height:250px;}
.subpage-top-main-img h2 {color: #fff; font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 700; margin-top: 1.5em; font-size: 2em; }

a.btn_green, a:visited.btn_green { background-color: #022c5c; display: block; padding: 1.2em 0; text-align: center; color: #ffffff; font-size: 1.2em; clear: both;}
a:hover.btn_green { background-color: #0E886A; text-decoration: none; color: #ffffff; }
.sidebar-section {margin-top: 1em;}
.sidebar-section.first {margin-top: 0;}



/* sidebar */
#sidebar_wrapper  h3{ border-bottom: 3px solid #022c5c; color: #333333; font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 700; padding-bottom: 0 !important; margin-bottom: .5em; text-transform: capitalize;}

#sidebar .sidebar_widget {
	border-bottom: none;
}

#sidebar_wrapper.sidebar_bg, #sidebar_wrapper_home.sidebar_bg {
	background-color: transparent;
	border-left: none;
}

/* pages */
#page-title-header {font-size: 2em;
	font-weight: 700;
	color: #fff;
	font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	padding-top: 2.5em;
	padding-bottom: .5em;
}
.section-title-home.main-sec{ text-align: center; color: #fff; padding-top:.5em;padding-top:1em;  }
.main-sec-sub-title { font-weight:bold; padding-top:1.5em; padding-bottom: .7em; text-align: center; color: #fff;}
.main-sec-sub-content { text-align: center; color: #fff; }

@media only screen and (min-width: 768px) {
	.section-title-home.main-sec{ font-size:3.2em}
	.main-sec-sub-title { font-size:1.5em;}
	.main-sec-sub-content { font-size:1.4em;}
}

.pagetitle h2 {
	font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: #009171;
	font-size: 2em;
	padding-bottom: .5em;
}



/* little HIC stylings */
.text-large {
	font-weight: 700;
	font-size: 2em;
}

.primary-content ul, ul.w-icon-disc {
	list-style-image: url('images/bullet-disc.png');
}

.primary-content ul.w-icon-check {
	list-style-image: url('images/bullet-check.png') ;
}

.primary-content ul.w-icon-break {
	list-style-image: url('images/bullet-break.png') ;
}

q {
	quotes: "“" "”" "‘" "’";
}
q:before {
	content: open-quote;
}
q:after {
	content: close-quote;
}

.text-center { text-align: center;}
.font-small { font-size: 0.8em;}

#header #search_toggle { display: none;}

#content_wrapper h3 {font-size: 1.5em;}

#footer-widgets { margin-top: 1em;}
#footer .widgettitle {
	font-family: 'OpenSansRegular', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 1.4em;
	padding-bottom: 0.5em; /*BF*/
}




.gform_wrapper .gform_page_footer .button.gform_button, .gform_wrapper .gform_page_footer .button.gform_next_button, .gform_wrapper .gform_page_footer .gform_previous_button { padding: 1em 1.5em; }


/* background color with point bottom */
.bubble-style01{
	position: relative;
	height: auto;
	background: #eeeeee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 1em;
	margin-bottom: 1em;
}

.bubble-style01:after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 15px 15px 0;
	border-color: #eeeeee transparent;
	display: block;
	width: 0;
	z-index: 1;
	bottom: -15px;
	left: 158px;
}

/* background color with point top */
.bubble-style02{
	position: relative;
	height: auto;
	background: #eeeeee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 1em;
	margin-top: 1em;
}

.bubble-style02:after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 0 15px 15px 15px;
	border-color: #eeeeee transparent;
	display: block;
	width: 0;
	z-index: 1;
	top: -15px;
	left: 158px;
}

/* Background color and no point top */
.bubble-style03{
	position: relative;
	height: auto;
	background: #eeeeee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 1em;
	margin-bottom: 1em;
}


@media only screen and (max-width: 767px) {
	.bubble-style01:after {
		left: 50%;
	}
}




/* news */
.scp_posts .scp_cat_read_more {
	display: none !important;
}

.scp_pagination a{
	background-color: #eeeeee;
	padding: 1em 1.5em;
	border: 1px solid #aaaaaa;
	text-decoration: none;
	display: inline-block;
}

/**********************************************************************
=HEADER
**********************************************************************/

/**********************************************************************
=SLIVER
**********************************************************************/
.statewide-header {
	margin-bottom: 0;
	background-color: #444;
}

/**********************************************************************
=NAV
**********************************************************************/
#navigation .grid-container {
	min-height: 60px;
}

#navigation .grid-container {
	line-height: 60px;
}

/**********************************************************************
=SIDEBAR
**********************************************************************/

/**********************************************************************
=TABLE
**********************************************************************/

/**********************************************************************
=FOOTER WORDPRESS
**********************************************************************/
#footer-outer-wrapper {
	background-color: #022c5c;
	margin: 0;
	text-align: center;
}
#footerButton{
	padding: 20px;
	font-size: 30px;
	border-radius: 8px;
	background-color: #27508b;
	color: white;
	border: none;
	height: 600;
	width: 600;
	text-align:center;
}
#footer {
	margin-bottom: 0;
	background: none;
}


#footer ul {
	/* padding-left: 1.2em; */
}

#footer ul li{
	font-size:1em;
	border: none;
	/*list-style: url('images/bullet-disc.png'); */
	display: list-item; 
	padding: 0;
	line-height: 2em; /*BF*/
}

#footer .tel, #footer .email { list-style: none; margin-bottom: 1em; } /*BF*/

#copyright_info, .powered-by { margin-left: 1em; }

@media only screen and (max-width: 767px) {
	#footer {
		background-color: #000000;
	}

	#footer dt, #footer .widgettitle {
		color: #ffffff;
		text-shadow: none;
	}
	#footer a {
		color: #ffffff;
	}
	#footer .widgettitle { 
		margin-top: 0em; 
	}
	#footerTitle b{
		font-size: 25px;
	}
	#footerTitle{
		margin-bottom: 1em;
	}
	#footerButton{
		padding: 10px;
		font-size: 20px;
		height: 600;
		width: 600;
	}
}

/**********************************************************************
=input gform
**********************************************************************/


/**********************************************************************
=SEARCH
**********************************************************************/


/**********************************************************************
=OTHER
**********************************************************************/

#scp0Hv {
	float:right;
	height: 47px;
	margin-top: 19px;
}

#main {
	padding:0 !important;
}
#teamTitle{
	padding-top:25px;
	background-color:transparent;
	color:white;
	font-size: 35px;
	position:absolute;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	z-index: 2;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	
}
@media only screen and (max-width: 1450px) {
	#teamTitle{
	}
}
@media only screen and (max-width: 650px) {
	#teamTitle{
		font-size: 15px;
		padding-top:25px;
	}
}

/**********************************************************************
=Sections
**********************************************************************/
#section_1{
	max-height: 750px;
	overflow:hidden;
}
#section_2{
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}
#section_2 .main-wrapper{
	max-width: 1300px;
}
#section_3{
	padding: 0px !important;
}
#section_3 .main-wrapper{
	max-width: 2600px;
}
.ourImageandTitle p{
	margin: 0px;
}
.ourImageandTitle img{
	margin: 0px;
}
@media only screen and (max-width: 1450px) {
	#section_3 {
		background-image: none !important;
	}
}

#section_4{
	width: 2600px;
}

@media only screen and (max-width: 1520px) {
	#section_3 .main-wrapper{
		min-height: 0px !important;
	}
}

@media only screen and (max-width: 730px) {
	#careerWrapper{
		margin-top: 0px !important;
	}
	#section_1 .main-wrapper{
	min-height: 200px !important;
	}
	#section_2{
			  background-size: 700px 350px !important;
	}
}

@supports (-webkit-overflow-scrolling: touch) {
  #section_2{
 	 background-attachment: scroll;
  }
}
/**********************************************************************
=Join the state of Hawaii Team
**********************************************************************/
#careerWrapper{
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: 251px;
}
#firstTitle{
	color:white;
	font-size: 35px;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
.careerButton{
	margin-top: 90px;
	padding: 20px;
	font-size: 30px;
	border-radius: 8px;
	background-color: #27508b;
	color: white;
	border: none;
	height: 600;
	width: 600;
	text-align:center;
}
.careerButton:hover{
	transition: background-color 700ms;
	background-color:#3C76C8;
}
@media only screen and (max-width: 730px) {
	#firstTitle{
		font-size: 30px;
		text-align: center;
	}
	.careerButton{
		margin-top:45px;
		padding: 15px;
		font-size: 25px;
	}
}
/**********************************************************************
=Our Mission
**********************************************************************/

.wordBox{
	padding: 85px 10px 85px 10px;
	color:white;
	border-color:white;
	border-style: solid;
	border-width: medium;
	background-color:#77278b;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	max-width: 251px;
}
.leaderCaption{
	font-size: 20px;
	color: #27508b;
}
.andrewCaption{
	margin-top: 50px;
}
.wordBox b{
	font-size: 30px;
}
.wordArea{
	font-size: 20px;
	width: 95%;
	text-align:center;
}
#missionStatement{
	font-size: 30px;
	max-width: 1022px;
	margin: auto;
}
#ourMissionContainer{
	display:flex;
	flex-direction: row;
	max-width: 1100px;
	margin: auto;
	margin-top: 50px;
}
#ourMissionImageContainer{
	display:flex;
	justify-content: space-between;
	max-width: 2600px;
	position: relative;
	z-index: -10;
	margin-top: -200px;
}

#ourMissionRyker{
	align-self: flex-start;	
}
#ourMissionAndrew{
	align-self: flex-end;	
}
.Integrity{
	background-color:#804040;
	padding: 85px 5px 85px 5px;
	max-width:240px;
}
.Excellence{
	background-color:#005C00;
}
.Diversity{
	background-color:#A30000;
	padding: 85px 5px 85px 5px;
	max-width:240px;
}
.TeamWork{
	background-color:#27508b;
}
.imageBottom{
	position:fixed;
    bottom:0px;
}
.blueBoxTitle{
	position: relative;
	z-index: 10;
	margin: 0px;
}
.hideMission{
	display:none;
}
.blueBoxTitle p {
	display: none;
}
.blueBoxTitle .blueBoxCaption {
	color:white;
	background-color:#27508b;
	font-size: 25px;
	display:block;
	padding: 5px;
	width: 300px;
}
.ourImageandTitle .blueBoxCaption {
	color:white;
	background-color:#27508b;
	font-size: 25px;
	display:block;
	margin-bottom: 50px;
	padding: 5px;
	width: 300px;
	height: 75px;
	align-self: flex-end;
}
.ourImageandTitle .rightText {
	width: 300px;
}
.wordContainer{

}
.ourImageandTitle {
	display: flex;
}

@media only screen and (max-width: 1520px) {
	.cornerScaleImages{
		margin-top: 0px;
	}
	#missionStatement{
		font-size: 25px;
	}
	#ourMissionContainer {
		justify-content: space-between;
	}
	#ourMissionContainer .wordBox{
			padding: 80px 0px 80px 0px;
	}
	#ourMissionImageContainer{
		z-index: 0;
		margin-top: 0px;
	}
	.ourImageandTitle {
	flex-direction: column;
	}
	.rightTitle{
		flex-direction: column-reverse;
	}
	.ourImageandTitle p {
		margin: 0px;
	}
	.ourImageandTitle img {
		margin: 0px;
	}
}
@media only screen and (max-width: 1450px) {
	.hideMission{
		display:block;
	}
	.ourAndrew{
		margin-left:auto;
	}
	.blueBoxTitle .blueBoxCaption{
		width: 100%;
		text-align: center;
		
	}
}
@media only screen and (max-width: 1250px) {
	.wordContainer{
		max-width: 200px;
		margin-left:auto;
		margin-right:auto;
	}
	#ourMissionContainer .wordBox b{
		font-size: 20px;
	}

}
@media only screen and (max-width: 1000px) {
	.wordContainer{
		width: 175px;
	}
}
@media only screen and (max-width: 880px) {
	.wordContainer{
		width: 140px;
	}
	.leftMostContainer{
		margin-left: 115px;
	}
}
@media only screen and (max-width: 850px) {
	.wordBox{
		padding: 45px 10px 45px 10px;
		max-width: 100%;
	}
}
@media only screen and (max-width: 750px) {
	#ourMissionContainer {
		flex-direction: column;
	}
	#ourMissionContainer .wordBox{
		padding: 0px;
	}
	.wordContainer{
		width: 100%;
		max-width: 100%;
	}
	.leftMostContainer{
		margin-left: 0px;
	}
	#ourMissionImageContainer{
		display:none;
	}
}
@media only screen and (max-width: 650px) {
	#missionStatement{
	font-size: 30px;
	margin-bottom: 40px;
	max-width: 1022px;
}
	.wordBox{
		padding: 0px;
		margin: 0 2px;
	}
	.hideMission{
		margin: auto;
	}
}
/**********************************************************************
=Why Apply to the State
**********************************************************************/

#whyTitle{
	color:white;
	font-size: 25px;
}
#whyParagraph{
	color:white;
	width: 70%;
}
.WhyBottomArea{
	margin-top: 60px;
}
#whyVideoArea{
}
#whyTextArea{
	font-size: 20px;
}
#section_2 .section-title{
	padding-bottom:25px;
}
.iconBox{
	text-align: center;
	color:white;
	margin-top:50px;
}
.iconBox p {
	text-align: center;
	font-size:25px;
}
.iconBox i {
	font-size:65px;
}
.whyMoreButton{
	padding: 20px;
	font-size: 20px;
	border-radius: 8px;
	background-color: grey;
	color: white;
	border: none;
}
@media only screen and (max-width: 1280px) {
	.iconBox i {
		font-size:50px;
	}
	.iconBox p {
		text-align: center;
		font-size:20px;
	}
}
@media only screen and (max-width: 1030px) {
	.iconBox i {
		font-size:35px;
	}
	.iconBox p {
		text-align: center;
		font-size:15px;
	}
	.benefitsBox{
		padding: 0px 0px 0px 20px;
	}
}

@media only screen and (max-width: 730px) {
	#whyTitle{
		text-align:center;
	}
	#whyParagraph{
		text-align:center;
		width: 100%;
	}
	.whyMoreButton {
	    text-align:center;
		margin-left: 25%;
	}
}
/**********************************************************************
=Resources
**********************************************************************/
.resourceLink{
	display:flex;
	flex-direction: column;
	height: 200px;
	width: 225px;
	background-color: #27508b;
	margin: 20px 10px 0px 10px;
	position:relative;
	z-index: 4;
	bottom: 0px;
}
.resourceLink:link, .resourceLink:visited{
	text-decoration:none !important;
	color:white;
	text-align:center;
}
.resourceLink:link span, .resourceLink:visited span{
	margin-top: 20px;
}

.resourceLink i {
	font-size: 50px;
	margin-top: 20px;
}

.resourceRow{
	display:flex;
	flex-direction: row;
	justify-content:center;
	margin-top: 20px;
}
@media not all and (pointer: coarse) {
	.resourceLink:hover{
		transition-duration: all 120ms ease 0s;
		bottom: 20px;
	}
}
@media only screen and (max-width: 700px) {
	.resourceLink{
		width: 125px;
		height: 125px;
		margin: 5px;
	}
	.resourceLink  span {
		text-align: center;
		margin-top:10px;
		font-size: 10px;
	}
	.resourceLink i  {
		display: none;
	}
}
/**********************************************************************
=Contact Us
**********************************************************************/
.contactArea{
	display:flex;
	justify-content: center;
}
.contact{
	width: 300px;
	height: 300px;
	background-color: #27508b;
	margin: 15px;
	border-color:black;
	border-width: thin;
	border-style:solid;
	color:white;
}
.moreContactPadding{
	margin-top:70px;
}
.contact p {
	text-align:center;
}
.contact:hover{
	transition: background-color 700ms;
	background-color:#3C76C8;
}
.contact:hover .hoverHide{
	display:none;
}
.contact .hoverShow{
	display:none;
}
.contact:hover .hoverShow{
	display:block;
	font-size: 22px;
	color:white !important;
}
.hoverHide {
	font-size: 35px;
}
.contact i {
	font-size: 50px;
}
.DHRD-contact{
	margin-top:48px;
}
@media only screen and (max-width: 650px) {
	.contact{
		width: 200px;
		height: 200px;
	}

	.contact p {
		font-size: 25px;
	}
	.moreContactPadding{
		margin-top:35px;
	}
	.contact i {
		text-align: center;
		font-size: 35px;
	}
	.DHRD-contact{
		margin-top:24px;
	}
	.contact:hover .hoverShow{
		font-size: 16px;
		margin: 0px;
	}
}
/**********************************************************************
=Career Page
**********************************************************************/
.careerArea{
	display:flex;
}
.careerArea p{
	margin-bottom: 0px;
}
.squareBox{
	width: 325px;
	height: 167px;
	background-color: #27508b;
	color:white;
	margin: 7px;
}
.rectBox{
	width: 664px;
	height: 325px;
	background-color: #27508b;
	color:white;
	margin: 7px;
}
.rectBox p {
	text-align: center;
	margin-top: 45px;
	font-size: 35px;
}
.squareBox p {
	text-align: center;
	margin-top: 45px;
	font-size: 35px;
}
#discoverTitle{
	color:#27508b;
	text-align: center;
	font-size:35px;
	margin-bottom: 40px;
	margin-top: 40px;
}
#discoverHighlight{
	font-size: 20px;
	text-align: center;
}
.squareLink{
	display:flex;
	flex-direction: column;
	height: 167px;
	width: 323px;
	margin:7px;
	color:white;
	text-align:center;
	border-color: black;
	border-width: thin;
	border-style: solid;
}
.hideSpan:link, .hideSpan:visited{
	font-size: 35px;
	text-decoration:none !important;
	color:white;
	margin-top: 40px;
}
.showSpan{
	display:none;
}
.showSpan:link, .showSpan:visited{
	font-size: 20px;
	text-decoration:none !important;
	color:white;
}
.squareLink:hover .showSpan{
	font-size:20px;
	color:white;
	display:block;
}
.spanPadding{
	padding-top: 25px;
}
.smallSpanPadding{
	padding-top: 0px;
}
.squareLink:hover .hideSpan{
	display:none;
}
.OTHERS{
	background-color:#27508b;
}
.OTHERS:hover{
	transition: background-color 700ms;
	background-color:#3C76C8;}
.CIVIL-SERVICE{
	background-color:#006100;
	height:325px;
}
.WIKIWIKI{
	background-color: purple;
}
.CIVIL-SERVICE:hover{
	transition: background-color 700ms;
	background-color:#008000;
}
.NON-CIVIL{
	background-color:#A8571A;
}
.NON-CIVL:hover{
	background-color:#B55E1C;
	transition: background-color 700ms;
}
.NON-CIVIL .showSpan{
	font-size: 18px !important;
}
.PROMOTIONAL{
	background-color:#AD0057;
}
.islandPic{
	background-image: url("/wp-content/uploads/2019/10/Diamond-1.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
}
.cityPic{
	background-image: url("/wp-content/uploads/2019/10/Downtown-Honolulu-1.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
}
.statuePic{
	background-image: url("/wp-content/uploads/2019/10/Aliiolani-Hale-Honolulu-Hawaii-1.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
}
.palacePic{
	background-image: url("/wp-content/uploads/2019/10/City-Hall-1.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
}
.legisPic{
	background-image: url("/wp-content/uploads/2019/10/Capital-1.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
}
.beachPic{
	background-image: url("/wp-content/uploads/2019/10/Makapuu-1.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
}
.upcomingTitle p{
	text-align:center;
	font-size: 35px;
	padding: 25px;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
.informationArea{
	margin-left: 70%;
	margin-top: 5%;
}
.eventTitle {
	font-size: 30px;
		text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	margin: 0px;
}
.eventInfo {
	font-size: 20px;
		text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
.emptyArea{
	width: 50%;
}
.readMoreButton{
	padding: 20px;
	font-size: 20px;
	border-radius: 8px;
	background-color: #27508b;
	color: white;
	border: none;
}
.readMoreButton:hover {
	transition: background-color 700ms;
	background-color:#3C76C8;
}
@media only screen and (max-width: 825px) {
	.informationArea{
		margin-left: 30%;
		margin-top: 0%;
	}
}

@media only screen and (max-width: 700px) {
	.upcomingTitle p{
		font-size: 25px;
		margin: 0px;
	}
	.careerArea{
		flex-direction: column;
	}
	.CIVIL-SERVICE{
		height: 167px;
	}
	.squareBox{
		display:none;
	}
	.rectBox{
		display:none;
	} 
	.squareLink{
		margin-left: auto;
		margin-right: auto;
	}
	.eventTitle{
		font-size: 25px;
	}
	.eventInfo{
		font-size: 20px;
	}
	.readMoreButton{
		padding: 15px;
		font-size: 16px;
		border-radius: 8px;
		background-color: #27508b;
		color: white;
		border: none;
	}
}
/**********************************************************************
=Footer Content
**********************************************************************/
.footerArray{
	display:flex;
	flex-direction:row;
}
.footerBrand{
	background-color: #27508b; 
	width:25%;
	margin: 10px;
	height: 75px;
	text-align:center;
}
.footerBrand:link, .footerBrand:visited{
	color:white;
	text-decoration: none !important;
}
.footerBrand:hover{
	transition: background-color 700ms;
	background-color:#3C76C8;
}
.footerBrand i{
	font-size: 30px;
	margin: 10px auto 10px auto;
}
.footerBrand p{
	text-align:center;
}
#footer-widgets .widgettitle{
	font-size:14px;
}
#footerTitle{
	font-size:30px;
}
.footerBanner{
	margin-top: 20px;
	background-image: url("/wp-content/uploads/2019/10/Mountain-Range.png"); 
	height: 450px;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;

}
.footerBanner p {
	text-align:center;
	color:  #27508b;
}
.footerButtonContainer{
	display:flex;
	justify-content: center;
}

/**********************************************************************
=About Us
**********************************************************************/

#aboutTitle {
	color: #27508b;
	font-size: 35px;
	margin-top: 100px;
}
#aboutDescription{
	font-size: 20px;
}
#aboutPara{
}
.underlineTitle {
	padding: 25px 0px 0px 0px;
	text-align:center;
	font-size: 35px;
}
.underlineTitle p{
	margin:auto;
	text-align:center;
	font-size: 25px;
}
#aboutBottomTitle{
	padding: 25px 0px 0px 0px;
	text-align:center;
	font-size: 35px;
}
.stats-col{
	text-align:center;
	font-size: 15px;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
.stats-4colholder{
	margin-top: 150px;
	display:flex;
	justify-content:space-around;
}
.counter{
	margin-bottom: 25px;
	font-size:25px;
}
.circleRow{
	display: flex;
	justify-content: center;
}
.leaderCircle p{
	text-align:center;
	font-size: 20px;
}
.igeLeaderCircle{
	margin-right: 400px;
	position:relative;
	z-index: 2;
}
.rykerLeaderCircle{
	margin-top:30px;
	margin-right: 375px;
}
.andrewPic{
	margin-top:30px;
	margin-left: 30px;
}
#kingPicBottom{
	display:none;
}
#publicQuote{
	text-align:center;
	font-size:25px;
	padding: 0px 0px 25px 0px;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
#kingPic{
	margin: 0px 0px 0px 0px;
	position:relative;
	z-index:3;
	width: 500px;
}
.statCount{
	color:white;
}
@media only screen and (max-width: 1580px) {
	#aboutDescription{
		font-size: 16px;
	}
	#aboutPara{
		font-size: 25px;
	}
	#publicQuote{
		font-size:25px;
	}
	#aboutTitle b{
		font-size: 25px;
	}
}
@media only screen and (max-width: 1375px) {
	#kingPic{
		width: 700px;
	}
}
@media only screen and (max-width: 1050px) {
	#kingPic{
		width: 500px;
	}
	#aboutDescription{
		max-width: 100%;
	}	
	.leaderCircle p{
	font-size: 18px;
	}
	.stats-col{
		font-size: 25px;
	}
	#aboutTitle{
		margin-top: 0px;
	}
}
@media only screen and (max-width: 700px) {
	.leaderCircle p{
	text-align:center;
	font-size: 16px;
	}
	.igeLeaderCircle{
		margin-right: 0px;
	}
	.joshLeaderCircle{
		margin: 5px 0px 15px 15px;
	}
	.rykerLeaderCircle{
		margin-top: 0px;
	margin-right: 0px;
	}
	.andrewPic{
		margin-top: 5px;
		margin-bottom: 10px;
	}
	#employBanner_30{
		flex-direction:column;
	}
	#videoContainer p {
		
	}
	#publicQuote{
		font-size:15px;
	}
	.stats-4colholder{
		margin-top: 0px;
		flex-direction: column;
	}
	.stats-col{
		margin-top: 20px;
	}
	#aboutTitle {
		margin-top: 0px;
		margin-bottom: 0px;
		text-align: center;
	}
	.underlineTitle {
		font-size: 16px;
	}
	.underlineTitle p{
		font-size: 16px;
	}
	#aboutDescription{
		font-size: 16px;
		max-width: 100%;
	}
	#aboutBottomTitle{
		font-size: 20px;
	}
	.stats-col{
		font-size: 16px;
	}
	.counter{
		margin-bottom: 25px;
	}
	#kingPic{
		display:none;
	}
	#kingPicBottom{
		display: block; 
		margin: 0px;
	}
}


@media only screen and (max-width: 1500px) {
.sliderText{
}
	.sliderText div div p i {
			font-size: 20px !important;
	}
	.sliderTitle div div p i {
			font-size: 20px !important;
	}
}

@media only screen and (max-width: 900px) {
	#n2-ss-2-arrow-previous{
		display:none; 
	}
	#n2-ss-2-arrow-next{
		display:none; 
	}
	.sliderText div div p i {
			font-size: 16px !important;
	}
	.sliderText div div p {
		line-height: 0.5 !important;
	}
	.firemanText div div p {
		line-height: 1 !important;
	}
	.firemanText div div p i {
			font-size: 16px !important;
	}
	.sliderTitle div div p {
			font-size: 16px !important;
	}
}