/* custom.css */

/* 
Any styles added here should be special case only, 
new styles needed for specific, custom page content, 
and not changing existing site styles. 
*/

.flash_error {
	list-style: none;
	background: #ff6666;
	padding: 0.5em;
	margin-left: 12em;
	border: 2px solid #ff0000;
	color: #ffffff;
	font-weight: bold;
}
.flash_info {
	list-style: none;
	background: #CEE5F5; 
	border: 1px solid #3399ff; 
	background: #CCFFCC;
	border: 1px solid #33ff33;
	padding: 0.5em;
	margin-left: 12em;
	color: #000;
	font-weight: bold;
}


img.autoWH {
  width: auto;
  height: auto;
}

.padding {
  padding:15x;
}

.border {
  padding:5x;
  border:1px solid #e6e6e6;
  margin:.5rem;
  margin-bottom: 2rem;
}

.tboxtiny {
  	padding:1px;
	color: black;
  	border:1px solid #666666;
	font-size: 10px;
}

h3.special {font-family:"Definitiva-Regular",Arial,Helvetica,Sans-serif;}

.edit_area button {
  color:#666666;
  padding:20px;
  border:0;
  margin-right:1px;
}


.grid .four-oc {
  font-size: .8rem;
  text-align: center; 
}



/* add bottom line for left panel section for pages with regular txt instead of nav */
.dynamic-border-nav-bline {
  border-bottom: 1px solid #DDD;
}

/* set bread crumbs for mobile */
.breadcrumbs {
  font-size: .8rem;
  padding-bottom: 1rem;
}

/* replacing accordion subnav sub links for mobile */
ul.sub-sidebar-nav li.mobile a {
  font-size:1.1rem;
}
ul.sub-sidebar-nav li.mobilefirst a {
  border-top: 1px solid #DDD;
}

img.admin-red-line { margin:5px 0 !important; padding:0 !important; width: auto; height: auto; display: inline-block !important; }


/* bulleted list */

ul.bullets {
  margin: 0.25rem 0 1rem 1.25rem; 
  padding: 0; 
}

ol.bullets {
  margin: 0.25rem 0 1rem 2.5rem; 
  padding: 0; 
}

ol.bullets li, ul.bullets li { padding-bottom:1rem; }
/* /bulleted list */

/* steps */

/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: #999;
	text-transform: uppercase;
	font-size: 9px;
	width: 18%;
	float: left;
	position: relative;
	text-align:center;
	padding: 1%;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	text-align:center;
	color: #999;
	background: #ddd;
	border-radius: 3px;
	margin: 0 auto 5px auto;
	position:relative;
	z-index:5;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: #ddd;
	position: absolute;
	left: -50%;
	top: 14px;
	z-index: 4; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = orange*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #b07228;
	color: white;
}


/* /steps */

table.elearning { 
  width: 100%; 
  border-collapse: collapse; 
  margin: 10px 0;
}

/* Zebra striping
table.elearning tr:nth-of-type(odd) { 
  background: #eee; 
}
 */
 
table.elearning th { 
  background: #fff; 
  color: #1f5733; 
  font-weight: bold; 
}

table.elearning td, table.elearning th { 
  padding: 10px;
  text-align:left;
}

/*
Our Mission & Core Values page
*/
.our-mission-section {
	--mission-values-heading: #2e2e2e;
	--mission-values-line: #b7c8bb;
	--mission-values-paper: #fbfcfa;
	--mission-values-text: #242424;

	margin-bottom: 0;
	padding-bottom: 0;
}

.mission-values-heading {
	margin-bottom: 1.4rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--mission-values-line);
}

.our-mission-body {
	padding: 1.25rem 1.4rem;
	border-left: 3px solid var(--mission-values-line);
	background: var(--mission-values-paper);
}

.our-mission-section .edit_area,
.core-value-copy {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
}

.our-mission-section .edit_area p,
.our-mission-section .edit_area li {
	color: var(--mission-values-text);
	font-size: 1.12rem;
	font-weight: 500;
	line-height: 1.55;
}

.our-mission-section .edit_area p {
	padding-bottom: 1.35rem;
}

.our-mission-section .edit_area p:last-child {
	padding-bottom: 0;
}

.our-mission-section .edit_area strong,
.our-mission-section .edit_area b {
	font-weight: 700;
}

.core-values-section {
	--core-values-green: #175732;
	--core-values-heading: #2e2e2e;
	--core-values-text: #242424;
	--core-values-line: #b7c8bb;
	--core-values-rule: #b7c8bb;
	--core-values-hover-shadow: rgba(192, 138, 44, 0.24);

	margin-top: 0;
	color: var(--core-values-text);
}

.core-values-heading {
	margin-bottom: 2rem;
	padding: 2.15rem 0 1.2rem;
	border-bottom: 2px solid var(--core-values-rule);
}

.our-mission-heading h3,
.core-values-heading h2 {
	margin: 0;
	color: var(--mission-values-heading, var(--core-values-heading, #2e2e2e));
	font-family: Definitiva-Regular, Arial, Helvetica, sans-serif;
	font-size: 3rem;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
}

.core-values-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 2rem;
}

.core-values-column + .core-values-column {
	padding-left: 2rem;
	border-left: 1px solid var(--core-values-line);
}

.core-value {
	display: grid;
	grid-template-columns: 5.25rem minmax(0, 1fr);
	column-gap: 1.6rem;
	align-items: start;
	padding: 1.65rem 0 1.85rem;
	border-bottom: 1px solid var(--core-values-line);
	transition: transform 180ms ease;
	will-change: transform;
}

.core-value:hover {
	transform: translateY(-0.25rem);
}

.core-value:hover .core-value-number {
	background: #123f25;
	box-shadow: 0 0.45rem 0.9rem var(--core-values-hover-shadow);
}

.core-values-column .core-value:first-child {
	padding-top: 0;
}

.core-value-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.25rem;
	height: 5.25rem;
	border-radius: 50%;
	background: var(--core-values-green);
	color: #ffffff;
	font-family: Definitiva-Regular, Arial, Helvetica, sans-serif;
	font-size: 3.8rem;
	line-height: 1;
	transition: background-color 180ms ease, box-shadow 180ms ease;
}

.core-value-copy h3 {
	margin: 0 0 0.45rem;
	color: var(--core-values-green);
	font-family: Definitiva-Regular, Arial, Helvetica, sans-serif;
	font-size: 2rem;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

.core-value-copy p {
	margin: 0;
	color: #1f1f1f;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 1.12rem;
	font-weight: 400;
	line-height: 1.55;
}

@media all and (max-width: 980px) {
	.core-values-grid {
		display: block;
	}

	.core-values-column + .core-values-column {
		margin-top: 1.65rem;
		padding-left: 0;
		border-left: 0;
	}

	.core-values-column + .core-values-column .core-value:first-child {
		padding-top: 0;
	}
}

@media all and (max-width: 640px) {
	.our-mission-body {
		padding: 1rem;
		border-left-width: 3px;
	}

	.our-mission-heading h3,
	.core-values-heading h2 {
		font-size: 2.1rem;
		line-height: 1.08;
	}

	.core-value {
		grid-template-columns: 3.35rem minmax(0, 1fr);
		column-gap: 1rem;
		padding: 1.3rem 0 1.45rem;
	}

	.core-value-number {
		width: 3.35rem;
		height: 3.35rem;
		font-size: 2.35rem;
	}

	.core-value-copy h3 {
		font-size: 1.45rem;
		line-height: 1.1;
	}

	.core-value-copy p {
		font-size: 1rem;
		line-height: 1.5;
	}
}


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.elearning, table.elearning thead, table.elearning tbody, table.elearning th, table.elearning td, table.elearning tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.elearning thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.elearning tr { border: 1px solid #ccc;}
	
	table.elearning td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		/*padding-left: 50%;*/
	}
	
	table.elearning td:before { 
      padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
		color:#1f5733;
	
			}
	
		/*
		Label the data
		*/
		table.elearning td:nth-of-type(1):before { content: ""; }
		table.elearning td:nth-of-type(2):before { content: "Description:"; }
		table.elearning td:nth-of-type(3):before { content: "Quantity:"; }
		table.elearning td:nth-of-type(4):before { content: "Price:"; }
	}
	
	

	<!--<![endif]-->


table.lessons { 
  width: 100%; 
  border-collapse: collapse; 
  margin: 10px 0;
}

/* Zebra striping
table.elearning tr:nth-of-type(odd) { 
  background: #eee; 
}
 */
 
table.lessons th { 
  background: #fff; 
  color: #000; 
  font-weight: bold; 
}

table.lessons tr.off td { 
  color: #abb3bc; 
}

tr.border_bottom th {
  border-bottom:1pt solid #1f5733;
  border-top:1pt solid #1f5733;
}

table.lessons th.title { 
  background: #fff; 
  color: #1f5733; 
  font-weight: bold;
  border-top: 1pt solid #abb3bc;
  margin-top: 10px;
  }

table.lessons th.title_off { 
  background: #fff; 
  color: #abb3bc; 
  font-weight: bold; 
  border-top: 1pt solid #abb3bc;
  margin-top: 10px;
}

table.lessons th, table.lessons td { 
  padding: 10px;
  text-align:left;
}



table.lessons tr.first th { border:none; }

table.lessons td.status {text-align:center;}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.lessons, table.lessons thead, table.lessons tbody, table.lessons th, table.lessons td, table.lessons tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.lessons thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.lessons tr { border: 1px solid #ccc;}

	table.lessons tr.border_none { border:none; }
	
	table.lessons td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		/*padding-left: 50%;*/
	}
	
	table.lessons td.status {text-align:left; }
	
	table.lessons th.title, table.lessons th.title_off { border-top:none; }
	
	table.lessons td:before { 
      padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
		color:#1f5733;
	
			}
	
		/*
		Label the data
		*/
		table.lessons td:nth-of-type(1):before { content: "Status"; }
		table.lessons td:nth-of-type(2):before { content: "Lesson:"; }
		table.lessons td:nth-of-type(3):before { content: "Date Started:"; }
		table.lessons td:nth-of-type(4):before { content: "Date Finished:"; }
		table.lessons td:nth-of-type(5):before { content: "Score:"; }
	}
	
	

	<!--<![endif]-->

table.bulk { 
  width: 100%;
  table-layout:fixed;
  border-collapse: collapse; 
  margin: 10px 0;
}

 
table.bulk th { 
  background: #fff; 
  color: #000; 
  font-weight: bold; 
}

table.bulk td, table.bulk th { 
  padding: 10px 10px 10px 0;
  text-align:left;
}


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.bulk, table.bulk thead, table.bulk tbody, table.bulk th, table.bulk td, table.bulk tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.bulk thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.bulk tr { border: 1px solid #ccc;}
	
	table.bulk td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding:10px;
		/*padding-left: 50%;*/
	}
	
	table.bulk td:before { 
      padding: 5px 5px 5px 0;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
		color:#000;
	
			}
	
		/*
		Label the data
		*/
		table.bulk td:nth-of-type(1):before { content: "First Name:"; }
		table.bulk td:nth-of-type(2):before { content: "Last Name:"; }
		table.bulk td:nth-of-type(3):before { content: "Email:"; }
		table.bulk td:nth-of-type(4):before { content: "Password:"; }
	}
	

	<!--<![endif]-->
/* moved from /css/admin.css */
.flash_error {
  list-style: none;
  background: #ff6666;
  padding: 0.5em;
  margin-left: 12em;
  border: 2px solid #ff0000;
  color: #ffffff;
  font-weight: bold;
}
.flash_info {
  list-style: none;
  /*background: #CEE5F5;*/
  /*border: 1px solid #3399ff;*/
  background: #CCFFCC;
  border: 1px solid #33ff33;
  padding: 0.5em;
  margin-left: 12em;
  color: #000;
  font-weight: bold;
}
/* /moved from /css/admin.css */

/* jumbotron */
.jumbotron-aboutus{background-image:url("/assets/img/jumbotron/j-aboutus-01.jpg")}

/* jumbotron remove @font-face for Android devices */
.device-android .jumbotron-home-content h2 {
  font-family: Arial,Helvetica,Sans-serif !important;
  letter-spacing: normal !important;
}

.aa_grader {
	border: #339966; border-style: solid; 
	border-top-width: 2px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px ;
	background: #ffffff;
}
.a_grader {
	border: #0066cc; border-style: solid; 
	border-top-width: 2px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px ;
	background: #ffffff;
}
.b_grader {
	border: #ffcc00; border-style: solid; 
	border-top-width: 2px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px ;
	background: #ffffff;
}
.app_grader {
	border: #dd0806; border-style: solid; 
	border-top-width: 2px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px ;
	background: #ffffff;
}
div.breakafter {
	page-break-after:always;
}
div.breakbefore {
	page-break-before:always;
}

/* ----------- remove select background in FF */

@-moz-document url-prefix() { 
  select { background-image: none !important; }
}

/* ----------- /remove select background in FF */



/* 
Grid adjustments for the Our Customers page: 
To account for the text throwing off the grid, we force some styles, 
and change the responsive breakpoints.
*/
.our-customers .four-oc img { 
  max-width: 216px!important; 
  height: auto!important; 
  margin: 0 auto!important; 
}
@media all and (min-width: 1100px){
  .grid .four-oc {
    float: left!important; 
    display: inline!important;
    width: 21.25%!important; 
    margin: 0 5% 5% 0!important; 
  }
  .grid .counter .four-oc:nth-child(4n+4) {  
    margin-right: 0!important;
  }
}
@media all and (max-width: 1100px){
  .grid .four-oc {
    float: left!important;
    display: inline!important;
    width: 47.5%!important;
  }
  .grid .counter .four-oc:nth-child(2n+2) {  
    margin-right: 0!important;
  }
}
@media all and (max-width: 600px){
  .our-customers { text-align: center!important; }
  .our-customers .counter { margin: 0 auto!important; }
  .grid .four-oc {
    float: none!important;
    display: block!important;
    width: 100%!important;
    margin: 0 auto 5% auto!important;
  }
} 

/* 
UL LI adjustments for the glossary page: 
*/
.glossary-item ul.glossary { 
  padding:0 1em;
}
.glossary-item ul.glossary li { 
  font-size: 1.125rem;
  line-height:1.5rem;
}

/*
elearning savings calculator page:
*/
.columnsContainer { position:relative; margin-bottom:2rem; }
.leftColumn {  padding:0; margin-bottom:5px; }
.leftColumn p { padding-top:5px; font-size: .95rem; line-height: 1.125rem; }
.rightColumn { padding: 0; }
/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
.leftColumn { margin:0 7rem 0 0; text-align:right; }
.rightColumn { position: absolute; top: 0; right: 0; width: 6.5rem; }
}

.ml1 { margin-left:1rem; }
.mr1 { margin-right:1rem; }
.mt1 { margin-top:1rem; }
.mb1 { margin-bottom:1rem; }

tr.featured {background-color:#F8F4E9; }

tr.featured td, tr.featured th { color:#1F5733; font-weight:bold;}
tr.filtered td, tr.filtered th { color:#ff5733; font-weight:bold;}

/* 
fluid video 
*/

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoWrapper div { /* for catalog issuu */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#careerform #companylabel, #careerform #company, #contactform #business {
  display: none;
}