/* colors 
/* colors 

#262626 (grey)
#F2F2F2 (light grey)
#E8AA00 (yellow)
#eee    (hover grey)
#666    (light p)

*/

/* system */
html, body {height:100%;width:100%;}
body {background:#fff;font-size:16px;color:#000;min-width:100%;max-width:2400px;margin:0 auto;font-family:'Roboto';font-weight:100;}
button,select,textArea,input {font:1em 'Roboto';font-weight:500;background:#eee;padding:1em 1em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:90%;border-radius:0.2em;border:none;margin:0 5%;}
button {color:#fff;background:#262626;margin-bottom:0.5em;}
button.compact {margin:0.05em;padding:0.5em 1em;}
button:hover {color:#262626;background:#E8AA00;cursor:pointer;}
input[type='submit'] {background:#262626;color:#fff;}
input[type='submit']:hover {color:#262626;background:#E8AA00;}
input[type='text'] {border:3px solid #ddd;}
input[type='radio'] {width:1.5em;height:1.5em;margin:1em;display:inline-block;}
input[type='checkbox'] {-webkit-appearance:none;width:2em;height:2em;border:3px solid #262626;}
input[type='checkbox']:checked {background:rgba(255,255,255,0.8) url('/pics/icon_checked.svg');border:3px solid #262626;background-size: contain;}
table {border:1px solid #ddd;padding:1em;}
td {padding:0.1em 0.5em;}
td.compact {padding:0;}
.anim {-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
.anim1 {-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}

/* home */
button.intro {color:#fff;background:rgba(0,0,0,0.8);margin-bottom:0.5em;font-size:1.2em;text-transform:uppercase;}
button.intro:hover {color:#fff;background:rgba(0,0,0,0.5);}
button.yellowButton {color:#282828;background:#E8AA00;}
button.yellowButton:hover {color:#fff;background:rgba(0,0,0,0.5);}
#home {width:100%;margin-top:4em;}
.home {display:table;width:100%;padding:2em 10%;}
.box {background-color:#fff;margin:1em;padding:2em;border-bottom:0.25em solid #E8AA00;min-height:35em;}
.boxGrey {background-color:#eee;margin:1em;padding:2em;border-bottom:0.25em solid #E8AA00;min-height:35em;}
.iconS {width:3em;height:3em;margin:0.5em;vertical-align:middle;}
.iconM {width:5em;height:5em;margin:1em;}
.iconL {width:7em;height:7em;margin:1.5em;}
.iconCheck {width:2em;height:2em;vertical-align:middle;}
.iconPlay {width:7em;height:7em;margin:1.5em;}
.iconPlay:hover {opacity:0.5}
ul li.indent {text-indent:-2em;padding:1em 0 0 4em}
ul li.indent img {width:2em;}
#page1 {height:100vh;background-color:#999;background-image:url('/home/home1.jpg');background-size:cover;background-position:40% 10%;background-repeat:no-repeat;}
#page2 {height:40em;background-color:#eee;}
#page3 {height:50em;background-color:#000;background-image:url('/home/home2.jpg');background-size:cover;background-position:64% 80%;background-repeat:no-repeat;}
#page4 {height:40em;background-color:#fff;}
#page5 {height:40em;background-color:#000;background-image:url('/home/home3.jpg');background-size:cover;background-position:50% 50%;background-repeat:no-repeat;}
#page6 {height:10em;background-color:#f1f1f1;}
#page7 {background-color:#fff;}
#page8 {height:30em;background-color:#fff;background-image:url('/home/blog.jpg');background-size:cover;background-position:50% 50%;background-repeat:no-repeat;}
#blog {display:table;width:100%;margin-top:3.6em;}
.blog {display:table;width:100%;padding:2em 10%;font-size:110%;}
#home a {color:#000;text-decoration:none;}
#home a:hover {color:#666;}
#home ul {margin:0;padding:0;font:1.3em 'Roboto';}
#home ul li {margin:0;padding:1em 1em;text-align:left;}
#home ul li.normal {font-size:0.8em;list-style:disc;padding-left:0em;margin-left:2em;}
#blog a {color:#000;text-decoration:none;border-bottom:1px solid #E8AA00;}
#blog a:hover {color:#666;}
#blog p {font-size:1.0em;line-height:150%;}
#blog ul {line-height:inherit;margin:0 0 1em 0;padding:1em;font:1.3em 'Roboto';background-color:#eee;}
#blog ul li {font-size:0.8em;line-height:150%;margin: 2em;text-align: left;list-style-type: disc;list-style-position: outside;}
#blog ul li ul {padding: 0em 1em;}
#blog ul li ul li {font-size:0.8em;color:#282828;margin:0.5em;}
.blogHeader {background-size:auto 100%;background-position:50% 50%;height:40em;margin:4em 0 0 0;background-repeat: no-repeat;background-color:#000;}
.blogHeaderTitle {background-color: rgba(255,255,255,0.9);margin:27em 0 8em 0;font-size:90%;}
#footer {height:10em;background-color:#f1f1f1;}

/* typography */
h1 {font:4.5em 'Lora';letter-spacing:0;line-height:120%;margin:0 0 1em 0;font-weight:100;}
h2 {font:2.0em 'Roboto';letter-spacing:0;margin:0 0 1em 0;line-height:150%;font-weight:500;}
h3 {font:1.5em 'Roboto';margin:0 0 1em 0;font-weight:500;}
h4 {font:0.9em 'Roboto';letter-spacing:0em;margin:0 0 1em 0;font-weight:500;}
h5 {font:0.7em 'Roboto';}
hr {height:1px;max-width:100%;background:#ddd;border:0;margin:3em auto;border-radius:0.2em;}
hr.tall {margin:6em auto;}
hr.intro {max-width:20%;min-width:20%;border-bottom:0.2em solid #E8AA00;margin:2em auto 2em auto;background:none;}
hr.introLong {max-width:100%;min-width:100%;border-bottom:0.2em solid #E8AA00;margin:2em auto 2em auto;background:none;}
p {font-size:1.1em;font-family:'Roboto';line-height:150%;margin-bottom:1.2em;font-weight: normal;}
b {font-weight:bold;}
.light {font-weight:500 !important;}
u {border-bottom:0.075em solid #b8bdce;text-decoration:none;}
sup {font-size:70%;}
td {font:1em 'Roboto';font-weight:500;border:0;padding:0.5em;}
.marg {margin:0;}
.leftTxt {text-align:left}
.rightTxt {text-align:right}
.center {text-align:center}
.display {display:none;}
.left {float:left;}
.right {float:right;}
.upper {text-transform:uppercase;}
.padR {padding-right:1em;}
img.wide100 {width:100%;}
/* global */
.desktop {display:block;}
.mobile {display:none;}
.col1 {min-width:25%;width:25%;float:left;}
.col2 {min-width:50%;width:50%;float:left;}
.col3 {min-width:75%;width:75%;float:left;}
.col4 {min-width:100%;width:100%;float:left;}
.col20 {min-width:20%;width:20%;float:left;}
.col33 {min-width:33%;width:33%;float:left;}
.col33d {min-width:33%;width:33%;float:left;}
.col66 {min-width:66%;width:66%;float:left;}
.col8 {min-width:12.5%;width:12.5%;float:left;}
.col7 {min-width:75%;width:75%;float:left;}

.iframeWrap {position:relative;padding-bottom:56.25%; /* 16:9 */padding-top:0;height:0;}
.iframeWrap iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

.centerTxt {text-align:center;}
.rightTxt {text-align:right;}
.leftTxt {text-align:left;}

.hide {display:none;}
.opacity {opacity:0;}
.clear {clear:both;}

.white {color:#fff !important;}
.black {color:#000 !important;}
.darkGrey {color:#262626 !important;}
.grey {color:#666 !important;}
.lightGrey {color:#888 !important;}
.red {color:#f66 !important;}
.yellow {color:#E8AA00 !important;}
.green {color:#6d6 !important;}
.grey {color:#666 !important;}
.blue {color:#262626 !important;}

.alert {border-radius:0.5em;color:#000;background:#E8AA00;padding:0.5em 1em;font-weight:500;}

.bgDarkGrey {background:#262626 !important;}
.bgDarkGrey50 {background:rgba(38,38,38,0.5) !important;}
.bgLightGrey {background:#bbb !important;}
.bgLightLightGrey {background:#f1f1f1 !important;}
.bgLightRed {background:#fbb !important;}
.bgWhite {background:#fff !important;}
.bgRed {background:#f33 !important;}
.bgYellow {background:#E8AA00 !important;}
.bgLightGreen {background:#bfb !important;}
.bgLightBlue {background:#bbf !important;}
.bgGreen {background:#6d6 !important;}
.bgGrey {background:#666 !important;}
.bgBlue {background:#262626 !important;}

.borderGrey {border-color:#eee !important;}
.borderBlue {border-color:#262626 !important;}

/*rounded*/
.chapter {width:2em;border-radius:0.5em;font-size:0.9em;color:#fff;background:#666;padding:0.15em 0.5em;margin:0.25em 0.25em 0.25em 0;text-align:center;display:inline-block;text-indent:0;}
.chapterTxt {color:#999;font-weight:100;font-size:0.7em;letter-spacing:0.1em;margin-right:0.5em;}
.reference {border-radius:0.5em;color:#fff;background:#262626;padding:0.5em 1em;font-size:0.8em;font-weight:500;}
  .referenceChapter {border-radius:0.5em;color:#262626;background:#f00;padding:0.2em 1em;font-size:0.7em;font-weight:500;width:0.8em;text-align:center;display:inline-block;text-indent:0;font-weight:500;border:1px solid #262626;}
.score {border-radius:0.5em;background:#ddd;padding:0.25em 0.5em;font-size:1.0em;font-weight:500;}

/* quiz content */
#content {position:relative;width:75%;float:left;margin-top:8em;padding:0 4em;}
#content ul,
#content ul {border:1px solid #ddd;padding:1em;margin-bottom:2em;}
#content ul li,
#content ul li {font:1.1em 'Roboto';line-height:180%;margin:0 5em 1em 3em;border-radius:0.5em;font-weight:500;}
#content a {color:#000;text-decoration:none;}
#content a:hover {color:#000;}
#content a.text  {color:#000;text-decoration:none;border-bottom:1px solid #262626}
#content a.text:hover {color:#262626;}
div.hover {padding:0.5em;}
div.hover:hover {background:#eee;cursor:pointer;}
li {list-style:none;}
li.hover {padding:0.5em;}
li.hover:hover {background:#eee;cursor:pointer;}
li.yellow {background:#262626;border-radius:0.5em;}
li.green {background:#6d6;border-radius:0.5em;}
li.grey {background:#666;border-radius:0.5em;}

.quizBlock {color:rgba(0,0,0,1);display:inline-block;font-weight:500;padding:0.9em 0.5em 0.1em 0.5em;width:3em;height:2em;border-width:0.2em;border-style:solid;margin:0.1em;text-align:center;border-radius:0.5em;}
.quizBlock:hover {border-color:#262626 !important;}
.quizBlockSmall {margin:0em;padding:0em;border-width:0em;width:1em;height:1em;border-radius:0.2em;color:rgba(0,0,0,0);letter-spacing:0em;border-style:none;}
.quizBlockAdmin {display:inline-block;padding:0em;border-width:0.01em;width:1.5em;height:1.5em;border-radius:0.2em;color:rgba(0,0,0,0.5);letter-spacing:0em;}
.quizBlockAdmin p {font-size:0.8em;margin:0;}

.circ { display:inline-block;border-radius:50%;border-width:5px;height:1em;width:1em;margin:-0.15em 0.25em;}
.fixedBottom {position:fixed;padding:1em 0;left:0;bottom:0;width:100%;height:3em;background:#eee;font-size:140%;}
.explanation {background:#262626;color:#fff;padding:1em;border-radius:1em;margin-bottom:2em;}

/* table of */
#toc {float:left;width:25%;background:#F2F2F2;color:#262626;margin-top:4em;z-index:998;padding-bottom:100em;}
#toc a {color:#262626;text-decoration:none!important}
#toc ul {margin-top:4em;padding:0em;font-size:1.1em;}
#toc ul li {padding:0;margin:0;font-weight:500;color:#262626;background:#F2F2F2;width:100%;height:3em;position:relative;}
#toc ul li:hover {color:#fff!important;background:#262626!important;cursor:pointer;}
#toc ul li div.chapterToc {color:#fff!important;background:#E8AA00!important;height:3em;width:3em;padding-top:0.9em;display:inline-block;text-align:center;vertical-align:middle;box-sizing:border-box;font-weight:500;border-bottom:1px solid rgba(0,0,0,0.1)}
#toc ul li div.chapterTxtToc {position: absolute;display:inline-block;margin-left:1em;transform: translateY(-50%);top:50%;width:75%;}
#toc ul li div.topic  {position: absolute;display:inline-block;margin-left:2em;transform: translateY(-50%);top:50%;width:75%;font-size:0.8em;}
#toc ul li div.control {color:#262626!important;background:#E8AA00!important;height:3em;width:100%;padding-top:0.9em;display:inline-block;text-align:center;vertical-align:middle;box-sizing:border-box;font-weight:500;border-bottom:1px solid rgba(0,0,0,0.1)}
#toc ul li div.control:hover {color:#fff!important;background:#262626!important;cursor:pointer;}
#toc ul li.border {border-bottom:1px solid rgba(0,0,0,0.1);}
#toc ul li.title {color:#888;font-size:0.8em;padding:2em 1em;text-align:center;}
#toc ul li.selected {background:#ddd;}
#toc ul li img.larr {position:absolute;top:50%;left:0.5em;transform: translateY(-50%);}
#toc ul li img.rarr {position:absolute;top:50%;right:0.5em;transform: translateY(-50%);}
.inactive {opacity:0.3;}


/* table of */
#tocHome {width:24em;background:#F2F2F2;color:#262626;margin:2em auto 2em auto;}
#tocHome ul {margin:0;padding:0em;font-size:1.1em;}
#tocHome ul li {padding:0;margin:0;font-weight:500;color:#262626;background:#F2F2F2;width:100%;height:3em;position:relative;}
#tocHome ul li div.chapterToc {color:#fff!important;background:#E8AA00!important;height:3em;width:3em;padding-top:0.9em;display:inline-block;text-align:center;vertical-align:middle;box-sizing:border-box;font-weight:500;border-bottom:1px solid rgba(0,0,0,0.1)}
#tocHome ul li div.chapterTxtToc {position: absolute;display:inline-block;margin-left:1em;transform: translateY(-50%);top:50%;width:70%;}
#tocHome ul li.border {border-bottom:1px solid rgba(0,0,0,0.1);}
#tocHome ul li img {position:absolute;top:50%;right:0.5em;transform: translateY(-50%);}


/* video*/
#vid {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,1);display:none;z-index:1999;}
#vidPlayer {margin-top:4em;height:90%;}
.vidStop {position:absolute;top:-1em;right:1em;z-index:1;}
.vidStopIcon {width:2.5em;vertical-align:middle}

/* nav */
#nav {font:1em 'Roboto';position:fixed;top:0em;left:0;width:100%;height:4em;background-size:auto 100%;z-index:999;background:#262626;font-weight:500;color:#fff}
#nav a {color:#fff;text-decoration:none;}
#nav a:hover {color:#E8AA00;}
#nav a:active {color:#ddd;}
#nav ul {position:absolute;top:0;width:70%;height:4em;margin:0;padding:0;list-style-type:none;}
#nav img.socialIcon {height:2em;vertical-align:middle;}
#nav ul.right {right:0;text-align:right;width:40%;}
#nav ul li {display:inline-block;margin:0;padding:1.3em 0.5em;position:relative;color:#fff;height:3.8em;border-right:1px solid #444}
#nav ul li.selected {color:#fff;text-decoration:underline;}
#nav ul li:hover {background:#E8AA00;color:#fff;}
#nav ul li.special {background:#E8AA00;color:#fff;border:none;border-radius:0.5em;}
#nav ul li.noHover:hover {background:#262626;color:#fff !important}
#nav ul li:hover a {color:#262626;}
#nav ul li:active a {color:#E8AA00;}
#nav .logoDiv {background:#fff;position:absolute;top:-3em;left:-2em;width:10em;height:10em;border-radius:10em;box-shadow:0 0 2em rgba(0,0,0,0.2)}
#nav .logo {position:absolute;top:3.3em;left:2.3em;height:4em;margin:0.5em;}


/* nav mobile */
#navMobile {font:1em 'Roboto';position:fixed;top:0;left:0;width:100%;height:4em;overflow:hidden;background:#262626;z-index:998;text-align:center;color:#fff;}
#navMobile a {color:#fff;text-decoration:none;;z-index:999;}
#navMobile .left {position:absolute;top:0.25em;left:1em;width:4em;font-size:80%;padding-top:3em;}
#navMobile .right {position:absolute;top:0.25em;right:1em;width:4em;font-size:80%;padding-top:3em;}
#navMobile .navIcon {position:absolute;top:0;left:0.5em;height:3em;}
#navMobile img.socialIcon {height:2em;vertical-align:middle;}
#navMobile hr {margin:1em auto;}
/* level 1 */
#navMobile ul {width:90%;text-align:center;font-size:1.4em;margin-top:6em;}
#navMobile ul li {list-style:none;padding:1em;width:100%;border-bottom:1px solid #fff;}
#navMobile ul li:hover {background:#262626;color:#fff;}
#navMobile ul li:active {background:#fff;color:#262626;}
#navMobile ul li.special {background:#E8AA00;color:#262626;}
#navMobile ul li.selected {background:#444;color:#E8AA00;}
#navMobile ul li.noHover {color:#888;border:none;}
#navMobileLogo .logoDiv {background:#fff;position:fixed;top:-2em;left:50%;transform:translatex(-50%);width:8em;height:8em;border-radius:10em;box-shadow:0 0 2em rgba(0,0,0,0.2);z-index:999;}
#navMobileLogo .logo {position:absolute;top:2em;left:0.8em;height:4em;margin:0.5em;}

ul, li, .col1, .col2, .col3, .col4, .col20, .col33, .col33d, .col66, .col8, .col7, #content, .home, .blog, .box {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} /* keep width with padding */


/* desktop oversize 6  */
@media only screen 
    and (min-width:4500px) {
		body {font-size:300%;}
    }

/* desktop oversize 5  */
@media only screen 
    and (min-width:4000px) and (max-width:4500px)  {
		body {font-size:260%;}
    }

/* desktop oversize 4  */
@media only screen 
    and (min-width:3500px) and (max-width:4000px) {
		body {font-size:190%;}
    }

/* desktop oversize 3  */
@media only screen 
    and (min-width:3000px) and (max-width:3500px) {
		body {font-size:160%;}
    }

/* desktop oversize 2  */
@media only screen 
    and (min-width:2500px) and (max-width:3000px) {
		body {font-size:140%;}
    }

/* desktop oversize 1 */
@media only screen 
    and (min-width:2200px) and (max-width:2500px) {
		body {font-size:120%;}
    }


/* desktop ideal 100% */
@media only screen 
    and (min-width:1920px) {
	}

/* desktop large */
@media only screen 
    and (max-width:1720px) {
		body {font-size:92.5%;}
    }
/* desktop medium-large */
@media only screen 
    and (max-width:1600px) {
		body {font-size:83%;}
    }

/* desktop medium */
@media only screen 
    and (max-width:1280px) {
		body {font-size:75%;}
    }

/* desktop medium-small */
@media only screen 
    and (max-width:1080px) {
		body {font-size:60%;}
    }


/* desktop mobile */
@media only screen 
    and (max-width:900px) {
		body {font-size:75%;}
		.desktop {display:none;}
		.mobile {display:block;}
        h1 {font-size:3em;}
        #content {width:100%;margin-top:8em;padding:0 2em 10em 2em;}
        #toc {position:absolute;left:-100em;width:100%;}
        #toc ul {font-size:1.3em;margin-top:2em;}
        #content ul {background:#f7f7f7;border:none;margin:2em -2em;padding:2em 2em;text-align:left;}
        #content ul li {margin:0 0 1em 0;}
        .col8 {min-width:0%;width:0%;}
        .col1, .col2, .col3, .col4, .col7, .col20, .col33, .col66 {min-width:100%;width:100%;}
        .box {min-height:5em;}
        #page1 {background-size:185%;background-position:37% 0%;}
        .blogHeader {height:32em;margin:4em 0 15em 0;background-position:50% 0%;}
        .blogHeaderTitle {margin:30em 0 8em 0;background:#eee;}
        
        /* video*/
        #vid {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8);display:none;z-index:1999;}
        #vidplayer {position:absolute;top:5em;left:0;width:100%;}
        .vidStop {position:absolute;top:1em;right:10%;z-index:1;}
        .vidStopIcon {width:4em;}
    }

* {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

.selectable, input {
   -moz-user-select: -moz-text;
   -khtml-user-select: text;
   -webkit-user-select: text;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: text;
   user-select: text;
}

.grecaptcha-badge { visibility: hidden; }