@charset "UTF-8";
/* CSS Document */

html, body { background-color: #fff; margin: 0 0; padding: 0 0; }
.myContainer { width: 100%; }

.clearboth { clear: both; }

.btn { border-radius: 0px; }

/*::::::::: COURSE.html ::::::::::::::::::*/

.action-box { display: block; background-color: red; margin: 0px auto; text-align: center; width: 100%; max-width: 460px; }
.action-box-header { color: white; font-weight: bold; font-size: 1.4em; padding: 20px 20px; text-align: center; }
.action-box-body { padding: 20px 0px; }
.action-btn { display: table; margin: 0px auto; font-size: 1.4em; font-weight: bold; padding: 10px 20px; cursor: pointer; }
.action-btn a { color: inherit; text-decoration: none;  }
.action-btn a:hover, .action-btn a:visited {color: inherit;}

.back-btn { display: inline-block; font-size: 1.0em; margin-right: 30px; }
.next-btn { display: inline-block; font-size: 1.0em; margin-left: 30px; }

.next-question-btn { display: inline-block; font-size: 1.2em; }

.nav-content { background-color: white; text-align: center; margin-top: 30px; }


.menu-bar-btn-decoy { color: white; background-color: #4093d5; display: inline-block; padding: 5px 8px; font-size: 1.4em; float: left; margin-right: 10px; }

.assessmentUrl { text-align: center; }
.assessmentUrl > input { font-size: 25px;  padding: 30px; background-color: #275982; font-weight: bold; color: white; }

/* ::::::: INDEX.html ::::::::::::::::::*/


/* ::::::: HEADER ::::::: */

header { text-align: center; padding-top: 40px; padding-bottom: 30px; border-bottom: 1px solid #cacbcb; width: 100%; max-width: 960px; margin: 0px auto; }
header.course { padding-top: 10px; padding-bottom: 10px; width: 95%; margin: 0px auto; border: none; text-align: left; }
header.course p { margin-top: 10px; }
header.course img { max-height: 90px; }

@media (max-width: 767px) {header { width: 95%; margin: 0px auto; padding: 10px 0px; }}
.sticky-header { width: 100%; position: inherit;/*position:fixed;*/ }

@media (max-width: 767px) {}
.sticky-header.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
.sticky-header.clone { position: fixed; top: -100px; transition: 0.2s top ease-in; }
body.down .sticky-header.clone { top: 0; left: 0; right: 0; z-index: 999; }



/* ::::::: MENU BAR ::::::: */
.menu-bar { width: 100%; margin: 0px auto; font-size: 1.8em; }
.menu-bar-header { font-family: Georgia, serif; font-size: 1em; }
.menu-bar-header b {font-weight:normal; }
.menu-bar-body { width: 95%; margin: 0px auto; display: table; max-width: 960px; padding-top: 10px; padding-bottom: 10px; }
.menu-bar-body-left { display: table-cell; text-align: left; vertical-align: middle; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; }
.menu-bar-body-right { display: table-cell; vertical-align: middle; text-align: right; width:120px; }
.menu-bar-btn { display: inline-block; font-size: 0.7em; cursor: pointer; text-align: right; padding: 0 0; background-color: #4093d5; ; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.menu-bar-btn span { margin: 5px 5px 5px 10px; }
.menu-bar-btn i { margin: 5px 10px; }
.menu-bar-btn.active { background-color: white; color: #1e69a2; }

@media (max-width: 767px) {
.menu-bar-body-right { width: 50px; }
.menu-bar-btn span { display: none; }
.menu-bar { font-size: 1.2em; }
.menu-bar-btn i { }
.menu-bar-btn { font-size: 1.2em; }
}

.menu-bar-header { font-family: Georgia, serif; font-size: 1em; }

/* ::::::: MENU ::::::: */

.menu { position: relative; width: 95%; max-width: 960px; margin: 0px auto; }
.menu.closed { display: none; }
.menu table { position: absolute; background-color: white; width: 50%; left: 50%; right: -3px; top: -3px; border: 3px solid #1e69a2; float: right; z-index: 99999; }
.menu table td { padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid #ccc; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.menu table i { margin-right: 5px; }
.menu table img { }
.menu .menu-middle-cell { width: 80%; }
.menu .menu-left-cell { text-align: center; vertical-align: top; }
.menu .menu-right-cell { text-align: right; }

/* menu helpers */
.menu .large-size { font-size: 1.2em; font-weight: 700; }
.menu .subtle-size { font-size: 1.0em; font-weight: 400; }



@media (max-width: 767px) {
.menu { width: 100%; }
.menu table { width: 100%; left: 0%; }
}

/* ::::::: CONTENT ::::::: */

.content-bar { width: 100%; }
.content-bar .status-bar { width: 100%; max-width: 960px; margin: 0px auto; text-align: center; color: white; padding-top: 5px; padding-bottom: 5px; }
#content { width: 95%; max-width: 940px; margin: 0px auto; margin-top: 1em; margin-bottom: 1em; min-height: 300px; }
@media (max-width: 767px) {#content { display: block;/*margin-top:100px;*/ }}


/* ::::::: NAVIGATION ::::::: */
.left-column .nav-content { display: none; }
.nav-content { width: 100%; float: left; }
.nav-content .back-btn { float: left; }
.nav-content .next-btn { float: right; }

@media (max-width: 767px) {
.nav-content { width: 100%; float: left; }
}


/* ::::::: VIDEO STUFF ::::::: */
.video-container { margin-top: 20px; margin-bottom: 20px; position: relative; border: 5px solid white; background-color: white; }
.video-container video,
.video-container canvas { top: 0; left: 0; width: 100%; max-width: 100%; height: auto; padding: 0 0; }
.video-container video { height: 100%; position: absolute; }


/* ::::::: FOOTER ::::::: */
footer { padding-top: 20px; border-top: 5px solid #1e69a2; width: 100%; max-width: 960px; margin: 0px auto; }

@media (max-width: 767px) {footer { width: 95%; margin: 0px auto; }}
.language-toggle { }
#lang-en-btn,
#lang-es-btn { cursor: pointer; }
#lang-en-btn.active,
#lang-es-btn.active { font-weight: bold; }
.sub-action-box { border: 2px solid #000000; display: table; width: 100%; max-width: 360px; margin: 10px auto; }
.sub-action-title,
.sub-action-icon { display: table-cell; vertical-align: middle; font-size: 1.4em; }
.sub-action-title { padding-left: 20px; padding-top: 10px; padding-bottom: 10px; }
.sub-action-title a { text-decoration: none; color: inherit; }
.sub-action-title a:hover, .sub-action-title a:visited  { color: inherit; }
.sub-action-icon { width: 50px; text-align: left; }



/* RESPONSIVE HELPERS */

.hidden { display: none !important; visibility: hidden; }
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.hidden-desktop { display: none !important; }
.visible-desktop { display: initial !important; }

@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: initial !important; }
.visible-tablet { display: inherit !important; }
.hidden-tablet { display: none !important; }
}

@media (max-width: 767px) {
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
.visible-phone { display: inherit !important; }
.hidden-phone { display: none !important; }
}
.visible-print { display: none !important; }

@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}


/*for firefox browser*/
.left-box img { width: 100%; }