@font-face {
	font-family: 'Redressed';
	src: url("../fonts/Redressed-Regular.ttf");
}
@font-face {
	font-family: 'Open Sans Regular';
	src: url("../fonts/OpenSans-Regular.ttf");
}
@font-face {
	font-family: 'Open Sans ExtraBold';
	src: url("../fonts/OpenSans-ExtraBold.ttf");
}
@font-face {
	font-family: 'Roboto Medium';
	src: url("../fonts/Roboto-Medium.ttf");
}

@font-face {
	font-family: 'Roboto Bold';
	src: url("../fonts/Roboto-Bold.ttf");
}


/* @font-face {
	font-family: "Archivo";	
	src: url("../fonts/ArchivoBlack-Regular.ttf");
} */
/*************************************************/
/**                RESET                         */
/*************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}*/
/* HTML5 display-role reset for older browsers */
/*article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}*/
/*************************************************/
/**                GLOBAL                        */
/*************************************************/
html, body{height: 100%; width: 100%;} /* Important for background height...*/
body{
	/* font: normal 14px "Open Sans Regular","Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";  */
	font: normal 14px "Open Sans Regular", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; 
	color: #fff;
}
strong, b{font-weight: 900;}
canvas, mods_big, mods_small{cursor:pointer;}

table, tbody, tfoot, thead, tr, th, td{color: #000;}

.navbar-header .nav-expander{position: absolute;}

jb1, jb2, jb3, jb4, jb5, jb6, jb7, jb8{line-height:1.5;}

.col-lg-12 h2, .col-lg-12 h3, .col-lg-12 h4, .col-lg-12 h5, .col-lg-12 h6,
.col-md-12 h2, .col-md-12 h3, .col-md-12 h4, .col-md-12 h5, .col-md-12 h6,
.col-xs-12 h2, .col-xs-12 h3, .col-xs-12 h4, .col-xs-12 h5, .col-xs-12 h6,
.col-lg-12 p, .col-md-12 p, .col-xs-12 p{color: #000;}

/*FOR h3 content in SRI111*/
 .col-lg-12 h2, .col-md-12n h2 .col-xs-12 h2, .col-lg-12 h2 p, .col-md-12n h2 p .col-xs-12 h2 p{color: #015d52;}
 .col-xs-12 h3 em, .col-md-12 h3 em, .col-lg-12 h3 em{color: #bf0d3f;}

.h3red{color: #bf0d3f;}
.h3green{color: #015d52;}
.h3black{color: #000000;}
/*FOR h3 content in SRI111*/

.jb_modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 80px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width 100% */ 
	height: 100%; /* Full height 100% */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	text-align: center;
  }  
  
  /* Modal Content */
  .jb_modal-content {
	background-color: #0070b0;
	margin: auto;
	padding: 10px;
	width: 350px; /*  350px   60% */
	overflow-y: auto;    
	max-height: 200px;        
  }
  
  .jb_modal-hdr-ftr {
	background-color: #ffffff;
	margin: auto;
	padding: 10px;
	height:8px;
	height: auto;
	width: 350px; /* 60% */
  }    
  

.jb_column1{color: #000;}
.jb_mx_wd{color:#000;}

.bkgrdGrad{
	background: #fff /*linear-gradient(to bottom, rgba(13,91,142,1) 30%, rgba(13,91,142,0) 100%)*/;
	background-size: 100% 550px;
	background-repeat: no-repeat;
}
#lessonContent{display: none;}
.boldpagelink{font-weight:900; cursor: pointer;}

/*************************************************/
/**                HEADER                        */
/*************************************************/
#indexHead{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 50px;
    background: #222;
	/*Blueberry*/ 
	/* background:#002f70;  */
    color: #9d9d9d;
    z-index: 9995;
}
#indexHead .lomalogo{
    position: absolute;
    top: 12px;
    left: 12px;
    /* height: 26px; */
	height: 36px;
	cursor: pointer;
}
#indexHead #courseTitle{
    position: absolute;
    /* top: 15px;*/
    left: 120px; /*85px for single company logos; "150px" for combined LLG logo */
	top: 12px;
	/* left: 70px; */
    font-size: 1.25em;
    color: #fff;
	cursor: pointer;
}
#indexHead #headerModules{
    position: absolute;
    /*top: 18px;*/
	top:15px;
    left: 170px; /*180px for double logo courses  */
	/* left: 110px; */
    font-size: 1.1em;
}
#indexHead #headerModules a{
    display: inline-block;
    margin: 0 1em;
    cursor: pointer;
    text-decoration: none;
	color: #fff;
}
#indexHead #headerModules a:hover{color: #fff;}
#indexHead #headerModules a.moduleLink{display: none;}
#indexHead #namebar{
    position: fixed;
    top: 50px;
    left: 0;
    height: 27px;
    background:#004c9d;
    /*border-bottom: 1px solid #333;*/
    width: 100%;
    color: #fff;
}
#indexHead #indexName{
    position: absolute;
    right: 20px;
    /* width: 250px; */
	font-weight: normal;
    text-align: right;
    font-size: 1.1em;
    line-height: 1.75em;
    cursor:pointer;
}
#homehelpexit{
	position: absolute;
	right: 20px;
	top: 12px;
}
#homehelpexit div{
	position: relative;
	display: inline-block;
	margin-left:30px;
    cursor: pointer;
}
#homehelpexit img{
	width: 20px;
}
/*************************************************/
/**               TOOL TIPS                      */
/*************************************************/
.btooltiplarge::after{
	content: attr(tooltip);
	position: absolute;
	top: 130%;
	left: 0%;
	width: 100%;
	background-color: #ccc;
	color: #000;
	text-align: center;
	border-radius: 6px;
	padding: 7px 10px;
	z-index: 1000;
	margin-left: -83px;
	visibility: hidden;
	opacity: 0;
	transition: visibility .25s, opacity .25s;
}
.btooltip::after{
	content: attr(tooltip);
	position: absolute;
	top: 130%;
	right:50%; 
	background-color: #ccc;
	color: #000;
	text-align: center;
	border-radius: 6px;
	padding: 7px 10px;
	z-index: 1000;
	margin-left: -83px;
	visibility: hidden;
	opacity: 0;
	transition: visibility .25s, opacity .25s;
}
#dashLarge .btooltiplarge::after{
	top: -35px;
	left: 45%;
	width: 100%;
}
#dashSmall .btooltip::after{
	top: -35px;
	left: 80%;
	width: 100%;
}
.btooltiplarge:hover::after, .btooltip:hover::after{
	visibility: visible;
	opacity: 1;
}

/*************************************************/
/**                FOOTER                        */
/*************************************************/
#indexFooter{
    position: fixed;
    left:0;
    bottom: 0;
    height: 70px;
    width: 100%;
    background:#111;
	/*Blueberry*/ 
	/* background:#002f70; 	 */
    color: #fff;
    text-align:center;
    z-index: 9990;
}
.termslink, .privacylink{
	display:inline-block;
	cursor: pointer;
}
#indexFooter a{
    color: #fff;
    text-decoration: none;
}
#indexFooter a:hover{color: #fff;}
#indexFooter #legalstuff{
    position: absolute;
    bottom: 0px;
    width: 100%;
    font-size: .85em;
}
#indexFooter #footMenu div{
    display:inline-block;
    cursor: pointer;
    width: 20%;
}
#indexFooter #footMenu div img{
    position: relative;
    top: 7px;
    left: -10px;
}
#indexFooter #footMenu .footerlabel{position: absolute; top: 12px;}
#indexFooter div, #indexFooter img, #indexFooter span, #vidContainer #vidClose{
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */      
}
/*************************************************/
/**                CONTENTS                      */
/*************************************************/
#portalContents{
    position:relative;
    top: 70px;
    width:100%;
    height: 100%;
	padding: 0;
	text-align: center;
	font-size: 16px;
    z-index: 99;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	display: block;
}
#portalContents .theContent{
    height: 100%;
    width: 90%;
    max-width: 1000px;    
    margin: 20px auto;
}
/*#portalContents .theContent h1{*/
#portalContents .theContent header{
	width: 50%;
	/* font: 900 24px/36px "Open Sans Regular", Helvetica, Arial, "sans-serif"; */
	/* font: 24px/36px "Open Sans ExtraBold", Helvetica, Arial, "sans-serif"; */
	font: 900 24px/36px "Roboto Bold", Helvetica, Arial, "sans-serif";
	font-stretch: ultra-expanded;
	margin-bottom: 20px;
	/* color: #1d1d1d; */
	color: rgba(0,112,175,0.65); /* Light BLue */
	text-align: left;
}
#portalContents .theContent p{
    text-align: left;
    margin-bottom:20px;
    font-size: 1em;
	line-height: 1.5;
	color: #1d1d1d;
}
#contentBtns{margin-top:40px;}
/*#contentBtns .indexBtn{
    position: relative;
    box-sizing: border-box;
    width: 50%;
	background: rgba(200,220,235,.7);
	color: #1d1d1d;
	font-weight: bold;
    border: 1px solid #111;
    border-radius:4px;
    margin: 10px 0;
    padding: 20px;
    text-align: center;
    font-size: 1.1em;
    cursor: pointer;
}*/
#contentBtns .indexBtn:hover{/*background: #ddd;*/ background: rgba(200,220,235,.35);}
/*#contentBtns .indexBtn img{
    position: absolute;
    top:10px;
    left: 10px;
}*/
/****HYBRID SIZED****/
#contentBtns .indexBtn{
    position: relative;
    box-sizing: border-box;
    width: 50%;
	background: rgba(200,220,235,.7);
	color: #1d1d1d;
	font-weight: bold;
    border: 1px solid #111;
    border-radius:4px;
    margin: 10px 0;
    padding: 10px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
}
#contentBtns .indexBtn img{
    position: absolute;
    top:10px;
    left: 10px;
	height: 25px;
}
.bTopBlock{	margin: 0; padding: 5px; text-align:left;}

.description{
	width: 80%;
	max-width: 900px;
	margin: 20px auto;
	padding: 20px;
	border-radius: 20px;
	color:#1d1d1d;
	text-align: left;
	/*background-image: url(../images/LOMA_302_hero.png);*/
	background-image: url(../images/background_placeholder.png);
	background-repeat: no-repeat;
	background-size: 45%;
	background-position: 100% 20%;
}
.description a{color:#1d1d1d; text-decoration: underline;}
.description header, .description h1{
	display: block;
	/* font: 900 24px/24px "Open Sans Regular", Helvetica, Arial, "sans-serif"; */
	/* font: 24px/24px "Open Sans ExtraBold", Helvetica, Arial, "sans-serif"; */
	font: 900 24px/24px "Roboto Bold","sans-serif";
	font-stretch: ultra-expanded;
	margin-bottom: 20px;
	/*color: #1d1d1d;*/
    /*color: #48aaa9;*/
    color: rgba(0,112,175,0.65); /* Light BLue */
    /*color: rgba(71,153,151,1); /* Aqua */
	text-align: left;
}
.description ul{
	display: inline-block;
	width: 100%; /*40% - was used originally in HIOC courseType*/
	vertical-align:top;
	line-height: 24px;
}
.description ul li{margin-bottom: 16px; list-style: disc;}
.description p{
	display: inline-block;
	/* width: 50%; */
	vertical-align:top;
	/* margin-right: 70px; */
	margin-right: 30px;
	line-height: 24px;
}
.expertVidBlock img{
    height: 75px;
    border-radius: 8px;
    border: 1px solid #000;
}
.bSubHead{
	display: block;
	font: 600 16px/24px Helvetica, Arial, "sans-serif";
	font-stretch: ultra-expanded;
	margin-bottom: 20px;
	border-bottom: 1px solid #1d1d1d;
	text-align: left;
}
.bLessonBlock{
	max-width: 1200px;
	 margin: auto; 
}
.flex-container{
	display: flex; 
	flex-direction: row;
	flex-wrap: wrap;
	width:100%;
	justify-content: center;
}

/*************************************************/
/**                  CIRCLES                     */
/*************************************************/
.circles{height:100%; width: 65%; margin: auto;}
.circle{position: relative; cursor: pointer;}
#big_circle{width:200px;margin: 20px auto;}
.small_circle{margin-top: 20px;}
.labeled{
	font-weight: 900;
	font-size: 36px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	color: #1d1d1d;
}
#dashLarge{
	display:inline-block;
	margin:0;
	padding:0;
	width: 30%;
	min-width: 250px;
	vertical-align: top;
	border-right:1px solid #bbb;
}
#dashSmall{
	display:block;
	margin:50px auto;
	text-align: center;
	padding:0;
	width: 100%;
	/*height: 100%;
	vertical-align: top;*/
}
#dashSmall .circle{display:inline-block; margin:20px;}
#dashSmall .labeled{font-size: 24px;}
#dashInfo{
    position: relative;
	display:inline-block;
	margin:0;
	padding:0;
	width: 59%;
	/*border:1px solid #bbb;
	padding-bottom: 220px;*/
}
#dashInfo p{
	font-size: 1.15em;
	line-height: 1.5;
	margin: 20px;
	text-align: left;
    vertical-align: middle;
	color: #1d1d1d;
}
.dashgroup{position: relative; font-size: 1.15em; color:#1d1d1d; /*min-height: 20px;*/ background: pink;}
.dashgroup div{position: absolute; top:15px;}
/*.dashgroup div:nth-child(1){left: 5%;}
.dashgroup div:nth-child(2){left: 15%;}
.dashgroup div:nth-child(3){left: 40%;}
.dashgroup div:nth-child(4){left: 75%;}*/

.dashgroup div:nth-child(1){left: 5%;}
.dashgroup div:nth-child(2){left: 15%; text-decoration: underline;} /* requested to look like links */
.dashgroup div:nth-child(3){left: 47%;}
.dashgroup div:nth-child(4){left: 80%;}

/*.dashgroup:nth-child(1){top:0;left:0;}
.dashgroup:nth-child(2){top:25px;left:0;}
.dashgroup:nth-child(3){top:50px;left:0;}
.dashgroup:nth-child(4){top:75px;left:0;}
.dashgroup:nth-child(5){top:100px;left:0;}
.dashgroup:nth-child(6){top:125px;left:0;}
.dashgroup:nth-child(7){top:150px;left:0;}*/

.dashgroup:nth-child(1){top:0;left:0;}
.dashgroup:nth-child(2){top:30px;left:0;}
.dashgroup:nth-child(3){top:60px;left:0;}
.dashgroup:nth-child(4){top:90px;left:0;}
.dashgroup:nth-child(5){top:120px;left:0;}
.dashgroup:nth-child(6){top:150px;left:0;}
.dashgroup:nth-child(7){top:190px;left:0;}
/*
  .dashcheckmark
  .dashlessonnumber
  .dashlessondate
*/

/*************************************************/
/**                Module Landing                */
/*************************************************/
.moduleVideoIcon{
	margin: 0 20px 10px 0;
	float: left;
	cursor: pointer;
}
.modulePageBlocks{
	box-sizing: border-box;
	position: relative;
	display:inline-block;
	width:300px; 
	border-radius: 8px;
	margin: 20px;
	text-align: left;
	color:#1d1d1d;
	padding-bottom: 70px;
}
.lessonBlock{position: relative; background: rgba(200,220,235,.75); border: 1px solid #111; vertical-align: top;}
.examBlock{position: relative; background: #004c9d; color: #e5e5e5; border: 1px solid #c1ac21; vertical-align: top;}
.examBlockDisabled{position: relative; /*background: rgba(200,200,200,.75);*/background: #80b8d7; color: #777; /*border: 1px solid #c1ac21;*/ border: 1px solid #999; vertical-align: top;}

.lesson_num{
	position: absolute;
	top: 10px;
	left: 20px;
	font: bold 18px Helvetica, Arial, "sans-serif";
}
.lesson_date{position: absolute;top: 10px;right: 50px;}
.lesson_indicator{
	position: absolute;
	top: 10px;
	right: 15px;
	width: 20px;
	height: 20px;
}

.lesson_indicator_complete{background: url(../images/lesson_indicator_check.png) no-repeat;}
.lesson_indicator_incomplete{background: url(../images/lesson_indicator_circle.png) no-repeat;}
.lesson_description{margin: 40px 20px 10px 20px;}

.lesson_launch_btn, .disabled_launch_btn{
	width: 265px;
	height: 45px;
	border: 1px solid #333;
	border-radius: 8px;
	margin: 10px auto;
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	cursor: pointer;
}
/* .lesson_launch_btn{color: #222;}
.lesson_launch_btn{background: rgba(255,255,255,.65);} */

.lesson_launch_btn{
	color: #222;
	background: rgba(255,255,255,.65);
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%, 0);
}
.lesson_launch_btn:hover{background: rgba(255,255,255,1);}

/*.examBlock .lesson_launch_btn{background: rgba(255,255,255,.75);}
.examBlock .lesson_launch_btn:hover{background: rgba(255,255,255,1);}*/
/*.examBlock */
.disabled_launch_btn{
	background: rgba(255,255,255,.5); 
	color: #888; 
	border: 1px solid #888; 
	cursor:not-allowed;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%, 0);
}

/*HYBRID VERSION*/
.module_btn, .ebook_btn, .kotobee_btn, .hiocexam_btn, .pdf_btn{
	display: inline-block;
	font: bold 14px/12px Helvetica, Arial, "sans-serif";
	text-decoration: none;
	width: 32%;
	height: 45px;
	border: 1px solid #333;
	border-radius: 8px;
	margin: 10px 10px 10px 0;
	/*color: #1d1d1d;*/
	color: rgba(0,0,0,.75);
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	/*background: rgba(255,255,255,.5);*/
	background: rgba(0,112,175,.25);
	background-repeat: no-repeat;
	background-position: 97%;
	cursor: pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
	overflow: hidden;
}
.module_btn_disabled{
	position:relative;
	display: inline-block;
	font: bold 14px/12px Helvetica, Arial, "sans-serif";
	/* width: 25%; */
	width: 32%;
	height: 45px;
	border: 1px solid #333;
	border-radius: 8px;
	margin: 10px 10px 10px 0;
	/*color: #1d1d1d;*/
	color: rgba(0,0,0,.75);
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	/*background: rgba(255,255,255,.5);*/
	background: rgba(0,112,175,.25);
	background-image: url("../images/glyphicons-151-edit.png");
	background-repeat: no-repeat;
	background-position: 97%;
	cursor: not-allowed;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
	overflow: hidden;
	opacity: .5;
}
.hiocexam_btn_disabled{
	position:relative;
	display: inline-block;
	font: bold 14px/12px Helvetica, Arial, "sans-serif";
	/* width: 25%; */
	width: 32%;
	height: 45px;
	border: 1px solid #333;
	border-radius: 8px;
	margin: 10px 10px 10px 0;
	/*color: #1d1d1d;*/
	color: rgba(0,0,0,.75);
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	/*background: rgba(255,255,255,.5);*/
	background: rgba(0,112,175,.25);
	/* background-image: url("../images/glyphicons-151-edit.png"); */
	background-repeat: no-repeat;
	background-position: 97%;
	cursor: not-allowed;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
	overflow: hidden;
	opacity: .5;
}
.module_btn_disabled::before{
	position: absolute;
	top: 0px;
	left: 10%;
	content:url("../images/lesson_indicator_check.png");
}
#moduleBtns, #courseContentBtns{width: 73%; max-width: 900px; margin:auto;}
#moduleBtns{ color:#1d1d1d; text-align:left;}
.module_btn:hover, .ebook_btn:hover, .kotobee_btn:hover, .hiocexam_btn:hover, .pdf_btn:hover{background-color: rgba(0,112,175,1); color: rgba(255,255,255,1);}
.NOTE{color:#ff0000; font-style: italic;}

.module_btn:nth-child(1){background-image: url("../images/glyphicons-352-book-open.png");}
/* .module_btn:nth-child(2){background-image: url("../images/glyphicons-473-target.png");}
.module_btn:nth-child(3){background-image: url("../images/glyphicons-151-edit.png");}

.module_btn:nth-child(1):hover{background-image: url("../images/glyphicons-352-book-open-rev.png");}
.module_btn:nth-child(2):hover{background-image: url("../images/glyphicons-473-target-rev.png");}
.module_btn:nth-child(3):hover{background-image: url("../images/glyphicons-151-edit-rev.png");} */

/*************************************************/
/**                Course Content                */
/*************************************************/
.ebook_btn{background-image: url("../images/welcome-352-book-open.png");}
.kotobee_btn{background-image: url("../images/glyphicons-732-puzzle-2.png");}
.pq_btn{background-image: url("../images/glyphicons-473-target.png");}
.se_btn{background-image: url("../images/glyphicons-31-pencil.png");}
#exam_btn{background-image: url("../images/glyphicons-151-edit.png");}

/*************************************************/
/**                Resources                     */
/*************************************************/
#theResources{
	width: 73%;
	max-width: 900px;
	margin: 20px auto;
	text-align: center;
	color: #1d1d1d;
}
.resource_btn{
	display: inline-block;
	font: bold 14px/12px Helvetica, Arial, "sans-serif";
	width: 45%; /* 30%; */
	min-width: 250px;
	height: 45px;
	border: 1px solid #333;
	border-radius: 8px;
	margin: 10px 10px 10px 0;
	color: #1d1d1d;
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	background: rgba(255,255,255,.5);
	cursor: pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */      
	overflow: hidden;
}
.summary_btn{
	display: inline-block;
	font: bold 12px/12px Helvetica, Arial, "sans-serif";
	/* font: bold 14px/12px Helvetica, Arial, "sans-serif"; */
	width: 45%;
	height: 45px;
	border: 1px solid #333;
	border-radius: 8px;
	margin: 10px 10px 10px 0;
	/*color: #1d1d1d;*/
	color: rgba(0,0,0,.75);
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	/*background: rgba(255,255,255,.5);*/
	background: rgba(0,112,175,.25);
	cursor: pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
	overflow: hidden;
}
.resource_btn:hover{background: rgba(0,0,0,1); color: #E5E5E5;}
.summary_btn:hover{background: rgba(0,112,175,1); color: rgba(255,255,255,1);}
.type_summary{background: rgba(255,255,255,.5) url(../../jbuild_libs/fonts/glyphicons/png/glyphicons-530-list-alt.png) no-repeat 95% 50%;}
.type_summary:hover{color: rgba(0,0,0,.75); background: rgba(0,112,175,.25) url(../../jbuild_libs/fonts/glyphicons/png/glyphicons-530-list-alt.png) no-repeat 95% 50%;}
.type_expert_vid{background: rgba(255,255,255,.5) url(../../jbuild_libs/fonts/glyphicons/png/glyphicons-9-film.png) no-repeat 95% 50%;}
.type_expert_vid:hover{color: rgba(0,0,0,.75); background: rgba(0,112,175,.25) url(../../jbuild_libs/fonts/glyphicons/png/glyphicons-9-film.png) no-repeat 95% 50%;}
.type_doc{background: rgba(255,255,255,.5) url(../../jbuild_libs/fonts/glyphicons/png/glyphicons-319-more-items.png) no-repeat 95% 50%;}
.type_doc:hover{color: rgba(0,0,0,.75); background: rgba(0,112,175,.25) url(../../jbuild_libs/fonts/glyphicons/png/glyphicons-319-more-items.png) no-repeat 95% 50%;}

.expertVidBlock{
	box-sizing: border-box;
	min-height: 115px;
	padding: 20px;
	color: #1d1d1d;
	border-radius: 20px;
	border:1px solid #111;
	cursor: pointer;
	margin: 10px auto;
	font:normal 13px/20px Helvetica, Arial, "sans-serif";
}
.expertVidBlock:hover{ color: #e5e5e5; background: rgba(200,200,200,1);/*rgba(0,112,175,.25);*/}

.expertVidBlock img{
	float:left;
	margin-right: 10px;
	font-weight: 300;
}
.expertVidBlock p{text-align:left;}
.expertVidBlock p strong{font-weight: bold;}
.expertVidBlockTime{font-weight: bolder; font-size: 90%; margin-left: 10px;}
.dotted_seperator{border-bottom:1px dashed #1d1d1d;height:1px;width:100%; margin:30px auto 15px auto;}

#vidOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 999999;
}
#vidContainer{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
   /*  height: 360px; */
   height: 420px;
	/* padding: 30px 20px; */
	padding: 30px 20px 70px 20px;
    background: #fff;
	border-radius: 15px;
	border:1px solid #c1ac21;
	text-align: center;
}
#vidContainer #vidClose{
    display: inline-block;
    position:absolute;
    top:3px;
    right:4px;
    width: 23px;
    height:23px;
    padding: 5px;    
    color: #111;
    text-align: center;
    line-height: .9em;    
    font-weight: 900;
    font-size: .85em;    
    border: 1px solid #111;    
    border-radius: 100px;    
    cursor: pointer;
}
#vidContainer #vidClose:hover{
    background: #0069aa;
    color: #fff;
    border: #0069aa;
}
#vidContainer video{
	width: 100%;
	height: 100%
}

#vidContainer #transcriptBtn{
	display: inline-block;
	font: bold 14px/12px Helvetica, Arial, "sans-serif";
	width: 32%;
	height: 45px;
	border: 1px solid #333;
	border-radius: 8px;
	/* margin: 10px 10px 10px 0; */
	margin: 10px auto;
	color: rgba(0,0,0,.75);
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	background: rgba(0,112,175,.25);
	background-repeat: no-repeat;
	background-position: 97%;
	cursor: pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
	overflow: hidden;
}
#vidContainer #transcriptBtn:hover{background-color: rgba(0,112,175,1); color: rgba(255,255,255,1);}

#bTranscript{
	display: none;
	border: 1px solid #000;
	width: 100%;
	height: 100%;
	overflow-x: none;
	overflow-y: auto;
	color: #1d1d1d;
	padding: 10px;
	-webkit-overflow-scrolling: touch;
}

.figureVidBlock{
	display: inline-block;
	width: 45%;
	box-sizing: border-box;
	height: 200px;
	padding: 20px;
	color: #1d1d1d;
	border-radius: 20px;
	border:1px solid #111;
	cursor: pointer;
	margin: 10px;
	font:normal 13px/20px Helvetica, Arial, "sans-serif";
	overflow: hidden;
}
.figureVidBlock:hover{ color: #e5e5e5; background: rgba(200,200,200,1);/*rgba(0,112,175,.25);*/}

.figureVidBlock img{
	margin-bottom: 10px;
	font-weight: 300;
	width: 100%;
	max-width:201px;	
}
.figureVidBlock p{text-align:left;}
.figureVidBlock p strong{font-weight: bold;}
.figureVidBlockTime{font-weight: bolder; font-size: 90%; margin-left: 10px;}

/*************************************************/
/**                Glossary                      */
/*************************************************/
.glossary_items{width: 80%; max-width: 900px; margin: auto auto 50px auto; text-align: left; color: #1d1d1d;}
.glossary_items a{color:#1d1d1d;}
hr{color:#1d1d1d; border-top:1px solid #1d1d1d;}
h3.bAlpha{color: #1d1d1d; font-size: 150%; margin-top: 30px;}
.glossary_items dt,.glossary_items dd{display:inline-block; vertical-align: top;} 
.glossary_items dt{width: 30%;margin: auto 10px 10px auto; font-weight: 900;}
.glossary_items dd{width: 66%;}
.glossary_items div{padding: 10px; border-radius: 4px;}
.glossary_items div:nth-child(odd){/*background: rgba(34,34,34,.1);*/ background: rgba(200,220,235,.75);color: #1d1d1d;}
.perLOMACOM{font-size:75%; text-align: left;}
.glossary_items ul{width: 100%; text-align: center;padding-left: 0;padding-right: 0;}
.glossary_items ul li{display:inline-block;list-style: none; padding:1.10%;}
#autocomplete{color:#111; width: 100%;}
.autocomplete-suggestions{border: 1px solid #999; background: #fff; color: #111; overflow: auto; }
.autocomplete-suggestion{padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden; cursor: pointer;}
.autocomplete-selected{background: #f0f0f0; }
.autocomplete-suggestions strong{font-weight: normal; color: #3399ff;}
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

/* MAY NOT BE NECESSARY FOR LESSONS ??? */
#theLesson{-webkit-overflow-scrolling:touch;}

/*************************************************/
/**                Contact                       */
/*************************************************/
form#lomacontact{position:relative; width: 100%; margin-top: 20px;}
form#lomacontact p{width: 100%; margin-bottom: 20px;}

form#lomacontact label, form#lomacontact input, form#lomacontact textarea{display: inline-block;}
form#lomacontact div, form#lomacontact input {width: 100%; margin: 0 0 10px 0}
form#lomacontact div label{margin: 0 0 5px 0;}
form#lomacontact div input, form#lomacontact div textarea{font: normal 16px "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; background: rgba(200,220,235,.25); border: 1px solid #ccc;}
form#lomacontact div textarea{width: 100%; height:100px; margin:0;}

::-webkit-input-placeholder{color: #939393; font-style: italic;} /* Chrome/Opera/Safari */
::-moz-placeholder{color: #939393;font-style: italic;} /* Firefox 19+ */
:-ms-input-placeholder {color: #939393;font-style: italic;} /* IE 10+ */
:-moz-placeholder {color: #939393;font-style: italic;} /* Firefox 18- */

.error{color: #ff0000; font-style: italic;}

/*************************************************/
/**               TERMS OF USE                   */
/*************************************************/
#terms_frame, #terms_load, #accept_terms, #lang_links{width: 100%; max-width:711px; -webkit-overflow-scrolling: touch;}
#terms_cover{
	position: fixed;
	top: 0;	left:0;	bottom:0; right:0;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAmSURBVHjaYmRkZDjDgAYAAoiJAQsACCCsggABhFUQIICwCgIEGABTwQDY2vcyswAAAABJRU5ErkJggg==');
	background-repeat: repeat;
	display:none;
	z-index:99998;
}
#lang_links{
	width: 60%;
	margin: 2.5% auto 0 auto;
    font: 11px Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
	background:#fff;
	border-bottom: 1px solid #0069aa;
    display: none;
}
#lang_links span{
	display: inline-block;
	width:28px;
	height:28px;
    border-left: 1px solid #0069aa;
	color: #0069aa;
	text-align:center;
	cursor: pointer;
	line-height: 2.5;
}
#lang_links span.activated{color:#fff; background-color: #0069aa;}
#terms_load{
	width: 60%;
	height: 75%;
	overflow-y:scroll;
	overflow-x:hidden;
	margin: 0 auto;
	z-index:999;
	background-color:#fff;
    display: none;
}
#accept_terms{
	text-align:center;
	background-color:#0069aa;
	width: 60%;
	height: 90px;
	overflow:hidden;
	margin: 0 auto;
	z-index:99999;
    display: none;
}
.terms_p {
	margin: 10px auto;
    font:bold 11px/18px Verdana, Arial, Helvetica, sans-serif;
	color: #FFF;
	width: 90%;
}
#acceptBtn, #sumbitBtn, #closeBtn{
	color: #fff;
	margin: 10px 15px 0 10px;
	padding: 5px 10px;
	border: 1px solid #fff;
	border-radius: 8px;
	cursor: pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */  
}
#sumbitBtn{color: #1d1d1d;}
#acceptBtn:hover, #sumbitBtn:hover, #closeBtn:hover{background: #fff; color:#006BAD;}
#sumbitBtn{position: absolute; right: 0px; margin-right: 10px; border: 1px solid #333;}
#sumbitBtn:hover{background: #0069aa; color: #fff; border: 1px solid #0069aa;}

/*************************************************/
/**             SLIDING MENU                     */
/*************************************************/
body{
    overflow-x: hidden;
	overflow-y:auto;
    -webkit-animation: androidbugfix infinite 1s;
}
@-webkit-keyframes androidbugfix {
	from {
	padding:0
	}
	to {
	padding:0
	}
}
#menu label {padding: 0 0.25em;font: 2.875em/1.4375em Arial;}
#header label:hover, #menu label:hover {color: #ccc;}
#main-nav-check {position: absolute;top: -9999px;left: -9999px;}
.toggle {
	position: absolute;
    top: -.08em;
	right: .5em;
	cursor: pointer;
	color: #fff;
    font: 2.875em/1.4375em Arial;
}
#menu{
    display:block;
	position: absolute;
	top:-.15em;
    left: 100%;
	bottom: 0;
	width: 13.75em;
    background: #444; 
    z-index: 9999;
    opacity: 0;
    -webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
	-webkit-transition: -webkit-transform .25s ease;
	transition: all .35s ease;
	overflow: auto;
}
#menu ul{
	background:#444;
	text-decoration: none;
	padding: 0;
	list-style: none;
    margin-top: 5.6em;
	border-top: 1px solid #444;
}
#menu li{border-bottom: 1px solid #444;
	display: block;
    font-size: 1.1em;
	line-height:1em;
	margin: 0;
	padding:.75em .75em .75em 1.5em;
	color:#9d9d9d;
	text-decoration: none;
	/* vertical-align:middle; */
	cursor: pointer;
}
#menu li:hover{	background:#222;color:#fff;}

/* ...THE MENU ANIMATION IS HANDLED BY A SCRIPT NOW... */
/*#main-nav-check:checked ~ #menu{
    opacity: 1;
	-webkit-transform: translate(-13.75em, 0);
	-ms-transform: translate(-13.75em, 0);
	transform: translate(-13.75em, 0);
}*/

/********************************************************************/
/************MEDIA QUERIES FOR TERMS OF USE**************************/
/********************************************************************/
@media (max-width:875px){
    #terms_load, #lang_links, #accept_terms{width: 90%;}
    #terms_load{height: 77%;}
    #acceptBtn, #sumbitBtn, #closeBtn{margin-top:0;}
    #accept_terms{height: 95px;}
    /*.terms_p{font-size:10px}*/
}
@media (orientation: landscape) and (max-width: 875px){
    #terms_load{height: 59%;}
}

/********************************************************************/
/************Document Styles for loaded Terms and Privacy************/
/********************************************************************/
#terms_load h1{
	width: 90%;
	margin: 1em 0;
	text-align: center;
	font-size: 120%;
	color: #0070C0;
	font-weight: 900;
}
#terms_load h2 {
	width: 90%;
	margin: auto 0 10px 0;
	font-size: 130%;
	color: #0070C0;
	font-style: italic;
	text-align: center;
}
#terms_load h1, #terms_load h2, #terms_load h3, #terms_load h4, #terms_load h5, #terms_load h6{font-size: 110%; font-weight:bold;}
#terms_load p{width: 90%; margin: 0 auto;}
#terms_load a:link{color: blue;	text-decoration: underline;}
#terms_load ol.numbered{
	list-style-type:decimal;
	padding:.5em 1.5em;
	margin: 0 2em;
}
#terms_load ol.uprAlpha{list-style-type:upper-alpha;padding:inherit;}
#terms_load ol.lwrAlpha{list-style-type:lower-alpha;padding:inherit;}
#terms_load #window_content, #terms_load #window_content_en {
	width:100%;
	max-width:600px;
	margin: 0 auto;
	background-color: #FFFFFF;
	/* font-family: Verdana, Arial, Helvetica, sans-serif; */
	/* font-family: OpenSans-Regular, OpenSans-Italic, Roboto-Medium, Roboto-Bold; */
	font-family: "Open Sans Regular", Helvetica, Arial, "sans-serif"; 
	font-size: 11px;
	line-height: 18px;
	color: #333333;
	padding: 10px 15px 5px;
}
/*#terms_load #window_content_en{display:none;}
#terms_load #window_content{display:block;}*/

/*************************************************/
/**            Terms and Video Intro             */
/*************************************************/
#intro_cover{
	position: fixed;
	top: 0;	left:0;	bottom:0; right:0;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAmSURBVHjaYmRkZDjDgAYAAoiJAQsACCCsggABhFUQIICwCgIEGABTwQDY2vcyswAAAABJRU5ErkJggg==');
	background-repeat: repeat;
	display:block;
	z-index:99998;
}
#courseIntro{
    box-sizing: border-box;
    position: absolute;
    width: 300px;
    height: 210px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    z-index: 99999;
    border: 6px double rgb(218, 165, 32); /*goldenrod*/
    border-radius: 20px;
    padding: 20px;
    color: #1d1d1d;
}
.courseIntroBtn{
    position: relative;
    text-align: center;
    background-color: #0069aa;
	color: #fff;
	margin: 10px 15px 0 10px;
	padding: 10px 10px;
	border: 1px solid #fff;
	border-radius: 8px;
	cursor: pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */  
}
.courseIntroBtn img{
    position: absolute;
    top: 5px;
    left: -25px;
    display: none;
}
.courseIntroBtn:hover{
    background-color: #0085d7;/*rgba(0,131,206,1.00)*/
}

/*************************************************/
/**              ABOUT THE COURSE                */
/*************************************************/
#aboutCover{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: rgba(0,0,0,.5);
	display:block;
	z-index: 9999;
}
#aboutCover #imageHolder{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	height:90%;
	width: 90%;
	max-height: 1000px;
	max-width: 668px;
	background: #fff;
	border-radius: 20px;
	text-align: center;
	vertical-align: middle;
}
#aboutCover #imageHolder img{
	max-height: 90%;
	max-width: 90%;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}
#aboutCover #imageHolder #aboutClose{
	position: absolute;
	top: 5px;
	right: 5px;
	color: #000;
	font-size: 100%;
	font-weight: bold;
	border: 1px solid #000;
	padding: 5px 10px;
	border-radius:100px;
	cursor: pointer;
}
#aboutCover #imageHolder #aboutClose:hover{
	background: #0069aa;
	color: #fff;
	border: 1px solid #0069aa;
}

/*************************************************/
/**                    HELP                      */
/*************************************************/
#theHelp{
	width: 80%;
	max-width: 900px;
	margin: 0 auto;
}
#portal_help, #course_help{
	position: relative;		
}
#portalhelptopics, #coursehelptopics,
#portalhelpanswer, #coursehelpanswer,
#bHelptopics{
	width: 100%;
	max-width: 900px;
	text-align: left;
}
#portalhelptopics .bHelpItem, #coursehelptopics .bHelpItem, #bHelptopics .bHelpItem{
	display:block;
	padding: 10px;
	color:#337ab7;
	text-decoration: none;
	border-radius: 8px;
	cursor: pointer;
}
#portalhelptopics .bHelpItem:hover, #coursehelptopics .bHelpItem:hover, #bHelptopics .bHelpItem:hover{
	background: #0069aa;
	color: #fff;		
}
.helptopichead{
	color:#337ab7;
	margin: 10px 0;
	font-weight: 600;
}
#portalhelpanswer p, #coursehelpanswer p{margin:0; padding:0;}
.helpback{
	color: rgba(0,112,175,0.65); /* Light BLue */
	padding: 5px 15px;
	display: inline-block;
	border-radius: 8px;
	cursor: pointer;
}
.helpback:hover{background: #0069aa; color: #fff;}
.helpback img{position: relative; top:-2px; margin: 0 5px;}

/*************************************************/
/**          Congrats/Failed Message             */
/*************************************************/
#eocmessagecover{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: rgba(0,0,0,.5);
	z-index: 999998;
}
#eocmessagesPassed{
	color: #333;
	background: #fff;
	border-radius: 16px;
	border:5px solid #c0af40;
	padding: 20px 20px 0 20px;
	width: 75%;
	max-width: 600px;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	display:flex;
	flex-direction: column;
	height: auto;
}
#eocmessagesFailed{
	color: #333;
	background: #fff;
	border-radius: 16px;
	border:5px solid #ccc;
	padding: 20px 20px 0 20px;
	width: 75%;
	max-width: 600px;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
	/*display:flex;
	flex-direction: column;*/
}
#eocmessagesPassed p.passed{
	width: 100%;
	/* margin: 0 0 30px 0; */
	text-align: center;
	font-family: "Redressed", serif;
	font-size: 40px;
}

#eocmessagesFailed p.failed{
	width: 100%;
	margin: 0 0 30px 0;
	text-align: center;
	/*font-family: "Redressed", serif;
	font-size: 40px;*/
	font-size: 25px;
}
.eocmessage{
	margin: 0 0 10px 0;
	flex: 1;
	display: flex;
	align-items: flex-start;
}
.eocmessage img{
	width:151px;
}
#eocmessagesFailed .eocmessage{display:block;}
#eocbtns .eocbtn{
	padding: 20px 10px;
	margin: 5px;
	background: #0069aa;
	color: #fff;
	text-align: center;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	flex: 1;
}
#eocmessagesFailed #eocbtns .eocbtn{display: block; width:50%;margin: 20px auto;}

#eocbtns .eocbtn:hover{
	background: #0085d7;
}
.eoctext{
	display:inline-block;
	/* width: 50%; */
	width: 90%;
	font-size: 16px;
	font-weight: 600;
	vertical-align: middle;
	/* margin-left: 20px; */
	margin: auto;
	flex: 3;
}
#eocX{
    display: inline-block;
    position:absolute;
    top:3px;
    right:4px;
    width: 23px;
    height:23px;
    padding: 5px;    
    color: #111;
    text-align: center;
    line-height: .9em;    
    font-weight: 900;
    font-size: .85em;    
    border: 1px solid #111;    
    border-radius: 100px;    
    cursor: pointer;
}
#eocX:hover{
    background: #0069aa;
    color: #fff;
    border: #0069aa;
}



/*************************************************/
/**              ALERTS                          */
/*************************************************/
#alertCover{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: rgba(0,0,0,.5);
	z-index: 99999; /*was 9999, but needed it to cover the terms which is 99998*/
}
#alertCoverContainer{
	color: #333;
	background: #fff;
	border-radius: 16px;
	border:5px solid #ccc;
	padding: 20px 20px 0 20px;
	width: 75%;
	max-width: 600px;
	max-height: 90%;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
	text-align: center;
	overflow-y: auto;
}
.xSpot{
	position: absolute;
	top: 5px;
	right: 5px;
	color: #666;
	cursor: pointer;
	border:1px solid #666;
	border-radius:100px;
	padding: 5px 10px;
}
.xSpot:hover{color: #fff; border-color: #0069aa ;background:#0069aa;}

#alertCoverContainer p.alertHead{
	width: 100%;
	margin: 0 0 30px 0;
	text-align: center;
	/*font-family: "Redressed", serif;
	font-size: 40px;*/
	font-size: 25px;
}

#alertCoverContainer .bListLink{
	color:#0069aa;
	cursor: pointer;
}
#alertCoverContainer .bListLink:hover{
	text-decoration: underline;
}

/*.alertBtn{display: block; width:50%;margin: 20px auto;}}

 #alertCoverContainer #alertBtns  */
 
 .alertBtn:hover{
	background: #0085d7;
}

.alertMessage{
	margin: 0 0 10px 0;
	display:block;
	/* flex: 1;
	display: flex;*/
	/* align-items: flex-start; */
}

.alertText{
	display:block;
	width: 50%;
	font-size: 16px;
	font-weight: 600;
	/* vertical-align: middle; */
	margin-left: 20px;
	/* flex: 3; */
}

.alertBtn{
	display:inline-block;
	width: 40%;
	margin: 20px auto;
	padding: 20px 10px;
	background: #0069aa;
	color: #fff;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	font-size: 16px;
	border: 5px solid #fff;
	/* flex: 1; */
}
.alertText a{color:#004c9d;}
a.alertBtn {color: #fff}
a.alertBtn:hover{color:#fff;text-decoration: none;}

/*************************************************/
/**              KEY TERMS                       */
/*************************************************/
.keyterm{
    box-sizing: border-box;
	font-weight:bold;
	color: #0069aa;
	text-decoration: underline;
	cursor: pointer;
}
.keyterm:hover{color: rgba(0,106,101,1);}

.keyterm:focus{
    /*background: rgba(0,112,175,0.35);*/
    /*background: rgba(160,222,199,0.65);*/ /*Pastel Green*/
    color: rgba(0,106,101,1);
    font-style: italic;
}    
	
#keytermsparent, #keytermsdiv, #termtitle{
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  	
}
	
#keytermsparent{
  position: fixed;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0,0,0,0.2);
}
#keytermsdiv{
  position: absolute;
  width: 260px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0069aa;
  color: #fff;
  padding: 20px 20px 30px 20px;
  border-radius: 15px;
  border: 1px solid #004067;
  cursor: pointer;
}
#termtitle{
	font-size: 150%;
	line-height: 175%;
	font-weight: bold;
}

/*************************************************/
/**              RETURN TO LESSON                */
/*************************************************/
#returnToLsn{
    display:none;
    /*display:inline-block;*/
    font-size: 1.1em;
    line-height: 1.75em;
    margin-left: 10px;
    cursor:pointer;
}
/*************************************************/
/**              BOOKMARKS                       */
/*************************************************/
#bookmarkCover{
	position:fixed;
	top:0; left:0; bottom:0; right:0;
	background: rgba(0,0,0,.3);
	z-index: 9999;
}
#bookmarkDisplay{
	display: block;
	box-sizing: border-box;
	width: auto;
	height: 150px;
	padding: 20px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	background: #0069aa;
	border:1px solid #fff;
	border-radius: 10px;
}
#bookmarkDisplay header{
	font-weight: 600;
	font-size: 1.3em;
	margin-bottom: 15px;
}
#bookmarkDisplay p{
	font-size: 1.1em;
	margin-bottom: 15px;
}
#goBookmark, #startOver{
	display: inline-block;
	padding: 8px;
	border: 1px solid #fff;
	border-radius: 8px;
	cursor: pointer;
}
#goBookmark{margin-right: 20px;}
#goBookmark:hover, #startOver:hover{
	color: #0069aa;
	background: #fff;
}

/*************************************************/
/**              HONESTY STATEMENTS              */
/*************************************************/
ol.honest ol{list-style: lower-alpha;margin-top: 1em;}
ol.honest li, ol.honest ol li{padding-left:.5em;}
#honestAccept, #honestRefuse, #areyousureAccept, #areyousureRefuse{ width:90%; margin: 20px;font-weight: 600;cursor: pointer;}
#honestAccept, #areyousureAccept{color: #007700;}
#honestRefuse, #areyousureRefuse{color: #990000;}
#honestyResponse ul, #areyousureResponse ul{width: 90%;}
#honestyResponse ul li, #areyousureResponse ul li{list-style-type: circle; padding-left:1em;}
/*************************************************/
/**            INTEGRITY STATEMENTS              */
/*************************************************/
ul.honest li{list-style-type: none;}
ul.honest ul{margin-bottom: -20px;}
.bContainer{
	position: relative; 
	font-weight: normal; cursor: pointer; 
	display:inline-block;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
}
.bContainer input {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.bCheckmark {
	position: absolute;
	top: 0;
	left: -30px;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border: 1px solid black;
}

/* On mouse-over, add a grey background color */
.bContainer:hover input ~ .bCheckmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.bContainer input:checked ~ .bCheckmark {
	background-color: #004c9d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.bCheckmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.bContainer input:checked ~ .bCheckmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.bContainer .bCheckmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*************************************************/
/**                EXAM PREP                     */
/*************************************************/
.examprep_block{
    margin-bottom: 50px;
    padding: 10px 15px;
}
.examprep_btn{
	display: inline-block;
	font: bold 14px/12px Helvetica, Arial, "sans-serif";
	/* width: 30%; */
	width: 45%;
	height: 45px;
	border: 1px solid #333;
	border-radius: 8px;
	margin: 10px 10px 00px 0;
	color: rgba(0,0,0,.75);
	text-align: center;
	line-height: 42px;
	font-weight: bold;
	background: rgba(0,112,175,.25);
	cursor: pointer;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
	overflow: hidden;
}
.examprep_btn:hover{background: rgba(0,112,175,1); color: rgba(255,255,255,1);}
.tttt_btn{background-image: url("../images/glyphicons-115-list.png");}

/*.examprep_block:nth-child(2) .examprep_btn{width: 45%;}*/ /*For 4 module courses*/
/* .examprep_block:nth-child(3) .examprep_btn{width: 45%;} *//*Specificallly for the TTTT section - only one button*/
/* .examprep_block:nth-child(4) .examprep_btn{width: 45%;} *//*Specificallly for the Sample Exams*/

/*************************************************/
/**              GETTING STARTED                 */
/*************************************************/
a.kotobeeDownload, a.appleDownload, .helptextlink{
	color: #0069aa;
	font-weight: bold;
	cursor: pointer;
	text-decoration: underline;
}

div.kotobeeDownload,div.appleDownload{background-image: url("../images/glyphicons-201-download.png");}
div.kotobeeDownload:hover, div.appleDownload:hover{background-color: rgba(0,112,175,1); color: rgba(255,255,255,1);}
div.modulePageBtns{background-image: url("../images/glyphicons-319-more-items.png");} 
div.entirePDF{background-image: url("../images/glyphicons-72-book.png");}
a.pdf_btn{background-image: url("../images/glyphicons-72-book.png");}

img.paraImage{
	width:200px; 
	margin: 15px;
	cursor: pointer;
}

img.paraImageLeft{
	width:200px; 
	margin: 15px;
	float:left;
	cursor: pointer;
}
img.paraImageRight{
	width:200px; 
	margin: 15px;
	float:right;
	cursor: pointer;
}

/*************************************************/
/**                EASY BTN                      */
/*************************************************/
.bEasyBtn{
	width: 50%;
	text-align: center;
	line-height: 3;
	background: rgba(0,112,175,1);
	font-size: 2em;
	border-radius: 50px;
	cursor: pointer;
}
.bEasyBtn:hover{
	background: rgba(0,112,175,.75);
}

/* #bTOCImage{
	position: relative;
}
#bTOCImage::before{
	content:"Table of Contents";
	position: absolute;
	width: 100%;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #000;
	font-size: 4vw;
	font-family: "Archivo";
	color: rgba(0, 112, 175, 1);
} */

.navbar-header span{
	margin-left:10px; color:#fff; font: normal 14px "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

/*************************************************/
/**              MEDIA QUERIES                   */
/*************************************************/
@media (max-width: 870px){
	/* #homehelpexit{display: none;} */
}
@media (max-width: 825px){
	.module_btn, 
    .module_btn_disabled, 
    .ebook_btn, 
    .kotobee_btn{width:40%;}
}
@media (max-width: 750px){
    #indexHead #headerModules{display: none;}	
	#portalContents .theContent, #indexContent .theContent{background: none;}	
	#contentBtns .indexBtn, .theContent h1, .theContent p{width:100%;}
	#vidContainer{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 75%;
		height: 70%;
		padding: 30px 20px 70px 20px;
		background: #fff;
	}
	#vidContainer #transcriptBtn{width: 100%;}
	#portalContents .theContent header{width:100%;}
    
	/* .examprep_block:nth-child(3) .examprep_btn,
	.examprep_block:nth-child(4) .examprep_btn{ */
	.examprep_btn{
        display:block;
        width: 100%;
	}
	#moduleBtns{ margin-top: 30px;}

	.figureVidBlock{
		display: block;
		width: 100%;
	}
	.navbar-header span{display:none;}
	.hiocexam_btn, .hiocexam_btn_disabled{width:90%;}
}
@media (max-width: 694px){	
	#dashLarge, #dashSmall, #dashInfo{
		display:block;
		width: 100%;
		height:auto;
		border: none;
	}
	#dashInfo{margin: 40px 20px 40px -5px;}
	#dashHybrid{margin-top:200px;}
	#dashHybrid p{width:90%; margin: auto;}
	#dashInfo p{
		margin: 10px 20px;
		font-size: 1.15em;
		line-height: 1.5;		
		text-align: left;
		vertical-align: inherit;
	}
	#big_circle, #dashLarge canvas{width:200px;margin: auto;}
	#dashLarge{margin: auto;text-align: center;}
	.module_btn, 
    .module_btn_disabled, 
    .ebook_btn, 
    .kotobee_btn{display:block; margin: 10px auto; width:75%;}
	/* #eocmessagesPassed {height: 90%; overflow-x: auto;} */ /* FOR ALL OTHER COURSE TYPES!!!!!!!!!!!*/
	#eocmessagesPassed {overflow-x: auto;} /* FOR SHORT COURSES!!!*/
}
@media (max-width : 630px ){
	#eocmessages{width: 90%;}
	.eocmessage{display: block;}
	.eoctext{display:block; width: 100%;/*margin: 0 20px 30px 10px; /* display: none; */}/* Since a closing video was added to HIOCs, this text will now be hidden phones and only buttons appear */
	.eocmessage img{width: 98%;}
}
@media (max-width: 615px){
	.description{margin-bottom: 0; padding-bottom: 0; background-image: none !important;}
	.description p, .description ul{ width:100% !important;}
	.description ul{margin:30px 20px 0px 0px; padding-left:1em;}
	#bookmarkDisplay{height: 250px;}
}
@media (max-width: 500px){
	#indexFooter #footMenu .footerlabel, #legalstuff span{display: none;}
	.expertVidBlock img{width: 100%; height: auto;/* float:none; display:block; */  margin-bottom: 20px;}
}

@media screen and (max-width: 450px) {
	#indexHead #courseTitle{display: none;}
	.resource_btn{width: 95%; min-width: 50px; text-align:left; padding-left:10px;}
	.summary_btn{width: 95%;margin: 5px auto;}
	.glossary_items dt,.glossary_items dd{display:block; width:100%;}
	.glossary_items ul{text-align: left;}
	.glossary_items ul li{padding:3%;}
	#autocomplete{height: 30px}
	#alertCoverContainer, #eocmessagesFailed{max-height:90%; overflow-y:auto;}
	#eocmessagesFailed #eocbtns .eocbtn{width:75%;}
	.alertBtn{display:block; width: 75%;}
	.bEasyBtn{width: 100%;}
	  
	/* Modal Content */
	.jb_modal-content {		
		max-height: 180px;        
	}
}

@media (max-width: 375px){
	#courseIntro{width: 90%;}
	#eocmessagesPassed p.passed{font-size: 30px;}
	.eoctext{font-size: 14px;}
	#eocbtns .eocbtn{padding:10px;}
	.modulePageBlocks{width: 85%;}
	.lesson_launch_btn, .disabled_launch_btn{width:90%;}
	.tttt_btn{background-image: url();}
}

@media (max-height: 330px){
	#eocmessagesPassed{height: 90%;}
	.eoctext{margin: 0 20px 0 10px}
}
/* div p{width:100%;} */