@import url(https://fonts.googleapis.com/css?family=Lato:600,500,400,300,300italic,400italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
/* ----------------------------------------------------------

STRIPPED DOWN RESET

---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

* {
  padding: 0;
  margin: 0;
  outline: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility; }

.clear:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }

img {
  align-self: flex-start; }

/* ----------------------------------------------------------

GRIDS & BREAKPOINTS

---------------------------------------------------------- */
/*420*/
/*600*/
/*900*/
/*1200*/
/*1400*/
/*1800*/
/* query for no padding beyond this width */
/* ----------------------------------------------------------

DEFAULTS

---------------------------------------------------------- */
/* STANDARD COLORS*/
/* really dark navy */
/* #C3E2F8; */
/* #97BEE5; */
/* #205EA3; */
/* #1E417C; */
/* BASE */
/*
tint = lighten w/ white  
shade = darken w/ black 
*/
/* REVERSE */
/* LIGHT ACCENTS */
/* ALERT */
/* STANDARD HIGHLIGHTER COLORS */
.highlighter-green {
  background-color: #BBF99E; }

.highlighter-orange {
  background-color: #F9D3A7; }

.highlighter-yellow {
  background-color: #FFFF99; }

/* ----------------------------------------------------------

FONTS

---------------------------------------------------------- *

/* This Is the Setup for Utilizing the Checkbox Font Selection */
/* ----------------------------------------------------------

GENERAL BODY & CONTAINERS

---------------------------------------------------------- */
.d-mobile-block.d-small-none {
  display: block; }

.d-none.d-small-block {
  display: none; }

@media (min-width: 37.5em) {
  .d-none.d-small-block {
    display: block; }

  .d-mobile-block.d-small-none {
    display: none; } }
html, body {
  height: 100%;
  /* necessary for 50% height image based footer */
  color: #465264;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif; }

body {
  font-size: 100%;
  font-weight: 500;
  background-color: #f1f2f2;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif; }
  body #home-landing {
    background: #000; }

.content-page {
  background-color: #192540; }

.course-page {
  background: #d9e4ef;
  background: -moz-linear-gradient(top, #E3EBF3 0%, #ffffff 100%);
  background: webkit-gradient(linear, left top, left bottom, color-stop(0%, #E3EBF3), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(top, #E3EBF3 0%, #ffffff 100%);
  background: -o-linear-gradient(top, #E3EBF3 0%, #ffffff 100%);
  background: -ms-linear-gradient(top, #E3EBF3 0%, #ffffff 100%);
  background: linear-gradient(to bottom, #E3EBF3 0%, #ffffff 100%);
  background-repeat: no-repeat;
  -moz-background-size: 100% 350px;
  -webkit-background-size: 100% 350px;
  background-size: 100% 350px; }

body#search {
  background-image: none;
  background-color: #e3e5e8; }

header,
nav,
article,
section,
footer,
aside {
  width: 100%;
  display: block;
  float: none;
  position: relative; }

nav,
article,
section,
footer,
aside {
  padding: 1.5em; }

.page-header-image-based section.page-navigation-block {
  padding: 0; }

header {
  padding: 0.5em 1.5em; }

.max-width {
  /* add this to any container that is not full-screen width */
  max-width: 1280px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  text-align: center;
  position: relative; }

.container-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

.sequencer .max-width {
  max-width: 1024px; }

#main article,
#main nav {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  *float: left; }
#main article,
#main div.container-no-article,
#main section.dashboard-container {
  background-color: #FFF;
  padding: 1.5em;
  text-align: left;
  padding: 1em;
  margin-bottom: 1em; }
#main div.container-no-article {
  padding: 0 3em 3em 3em; }

.tools #main article {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  *float: left; }

.centered {
  text-align: center;
  margin: 0 auto; }

/* ----------------------------------------------------------

UTILITY CLASSES

---------------------------------------------------------- */
/* Offscreen Elements
----------------------------------------- */
.element-invisible.mobile-only {
  height: auto;
  width: auto;
  left: auto;
  position: relative; }

.element-invisible,
.offScreen {
  height: 0px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 0px; }
  .element-invisible:active, .element-invisible:focus,
  .offScreen:active,
  .offScreen:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    width: auto; }

a.element-invisible:focus {
  background-color: #C12B0D;
  color: #FFF; }

@media (min-width: 37.5em) {
  .element-invisible.mobile-only {
    height: 0px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 0px; } }
/* Formatting Utilities
----------------------------------------- */
.no-margin {
  margin: 0; }

.no-margin-bottom {
  margin-bottom: 0; }

.no-margin-top {
  margin-top: 0; }

.no-padding {
  padding: 0 !important; }

.no-padding-bottom {
  padding-bottom: 0; }

.no-padding-top {
  padding-top: 0; }

.img-rounded {
  border-radius: 6px; }

.img-circle {
  border-radius: 500px;
  border: 0.5em solid rgba(255, 255, 255, 0.1); }

.large {
  font-size: 125%; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.float-right {
  float: right; }

.container-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

.img-actual-size {
  width: auto;
  height: auto;
  margin: 0 auto; }

.img-actual-size.logo {
  width: 200px; }

@media (min-width: 37.5em) {
  .img-actual-size.logo {
    width: auto; } }
.print-only {
  display: none; }

/* ----------------------------------------------------------

FLEX LAYOUT

---------------------------------------------------------- */
section {
  padding-bottom: 2em; }
  section.footer-branding {
    padding-bottom: 0; }

.grid {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  text-align: center;
  position: relative; }

.group {
  display: block;
  width: 100%;
  text-align: center;
  position: relative; }
  .group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0; }

.module-image-quarter {
  padding: 0.75rem; }

.module-image-quarter,
.module-lesson-three-quarters {
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  float: none; }

.module-lesson-three-quarters {
  padding: 0 1rem; }

@media (min-width: 56.25em) {
  .module-image-quarter {
    float: left;
    width: 25%; }

  .module-lesson-three-quarters {
    float: left;
    width: 75%;
    padding: 0; } }
.text-center {
  text-align: center; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.grid-cell {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative; }

.reverse {
  -webkit-flex-direction: row;
  flex-direction: row; }

.grid-content {
  padding: 0;
  width: 100%;
  display: block;
  text-align: left;
  position: relative; }

.grid-content.no-padding {
  padding: 0; }

.grid-flex-end {
  -webkit-justify-content: flex-end;
  /* Safari */
  justify-content: flex-end; }

.grid-centered {
  -webkit-justify-content: center;
  justify-content: center; }

.block-image {
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
  position: relative; }

.block-image-positioner {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: block;
  /* no flex on single column */ }

.full, .three-quarters, .half, .third, .two-thirds, .quarter, .fifth, .sixth {
  width: 100%;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%; }

.max-width {
  width: 100%;
  padding: 0 3%;
  margin: 0 auto; }

@media (min-width: 1320px) {
  .max-width {
    padding: 0;
    max-width: 1280px;
    /* need to set explicit width to equalize same width columns in different blocks */ }

  .single-post .max-width {
    max-width: 1080px; } }
.grid-padded {
  padding: 0.5em; }

.grid-horizontal {
  -webkit-flex-direction: row;
  flex-direction: row; }

.grid-vertical {
  -webkit-flex-direction: column;
  flex-direction: column; }

.justify-right {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.reverse {
  -webkit-flex-direction: row;
  flex-direction: row; }

.three-quarters .grid-content {
  padding-bottom: 0; }

@media (min-width: 37.5em) {
  .grid-content {
    padding: 0 1.5em; }

  .quarter,
  .sixth,
  .fifth,
  .half,
  .third {
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%; } }
@media (min-width: 56.25em) {
  .reverse {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse; }

  .third,
  .fifth,
  .sixth {
    -webkit-flex-basis: 33.3333%;
    flex-basis: 33.3333%;
    max-width: 33.3333%; }

  .quarter {
    -webkit-flex-basis: 25%;
    flex-basis: 25%;
    max-width: 25%; }

  .three-quarters {
    -webkit-flex-basis: 75%;
    flex-basis: 75%;
    max-width: 75%; }
    .three-quarters .third {
      -webkit-flex-basis: 100%;
      flex-basis: 100%;
      max-width: 100%; }

  .two-thirds {
    -webkit-flex-basis: 66.6666%;
    flex-basis: 66.6666%;
    max-width: 66.6666%; }

  .block-image-positioner {
    display: flex;
    /* box flexes but image inside does not */
    position: absolute; }

  .block-image img {
    /* use standard responsive img until 2 column layout */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%; } }
@media (min-width: 75em) {
  .fifth {
    -webkit-flex-basis: 20%;
    flex-basis: 20%;
    max-width: 20%; }

  .sixth {
    -webkit-flex-basis: 16.6666%;
    flex-basis: 16.6666%;
    max-width: 16.6666%; } }
.post-previews .block {
  position: relative;
  margin-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: left;
  margin-bottom: 2em; }
.post-previews .block.closed {
  pointer-events: none; }
.post-previews .block.closed img,
.post-previews .block.closed h3 {
  opacity: 0.6; }
.post-previews .block.closed:before {
  position: absolute;
  top: 2rem;
  left: 2rem;
  content: 'Under Development';
  background-color: #192540;
  color: #FFF;
  padding: 0.25rem;
  z-index: 999; }

.feature-blocks {
  margin-bottom: 1rem; }

.feature-blocks.closed {
  pointer-events: none; }
  .feature-blocks.closed #dashboard-nav {
    display: none; }

.feature-blocks.closed img,
.feature-blocks.closed h3 {
  opacity: 0.6; }

.feature-blocks.closed .module-lesson-three-quarters:after {
  position: relative;
  top: 0.5rem;
  content: 'Under Development';
  background-color: #475166;
  color: #FFF;
  padding: 0.25rem;
  z-index: 999; }

.complete-module .module-lesson-three-quarters:after {
  position: relative;
  top: 0.5rem;
  content: 'Module Complete';
  background-color: #BBF99E;
  color: #192540;
  padding: 0.25rem;
  z-index: 999; }

#dashboard .post-previews img {
  margin-top: 0.75em;
  margin-left: 0.75em; }
#dashboard .post-previews .block {
  padding-bottom: 0; }

.complete-module {
  background-color: rgba(232, 233, 236, 0.5); }

.module-results-sent {
  background-color: rgba(177, 212, 59, 0.15); }

.module-results-sent:before {
  content: '\E876';
  font-family: 'Material Icons';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  padding: 0.5em;
  display: block;
  font-size: 1.5em;
  color: #FFF;
  background-color: #B1D43B;
  z-index: 9; }

/* ----------------------------------------------------------

GENERAL STYLING

---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  line-height: 1.2;
  font-weight: 400; }

h1, .h1 {
  font-size: 2.31em;
  letter-spacing: -0.025em;
  margin: 0.5em 0 0.5em 0;
  color: #C6482B;
  text-align: left; }

h2, .h2 {
  font-size: 1.98em;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 2em 0 0.5em 0;
  padding-top: 1em;
  border-top: 1px solid #dadce0; }

.course-page h2 {
  border-top: none;
  padding-top: 0;
  font-size: 2.31em;
  margin-top: 0; }

h3,
.h3,
caption {
  font-size: 1.32em;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0.5em 0 0.25em 0;
  line-height: 1.2;
  color: #C6482B; }

h3 span {
  display: block;
  font-size: 65%;
  font-weight: bolder;
  text-transform: uppercase;
  color: #465264; }

caption {
  text-align: left; }

h4, .h4 {
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  font-size: 1.1em;
  font-weight: 500;
  margin: 0;
  text-align: left;
  margin-top: 0.75em;
  display: inline-block;
  background: #e8e9ec;
  padding: 0.25em 0.5em; }
  h4:after, .h4:after {
    clear: both;
    display: block;
    content: ".";
    height: 0px;
    visibility: hidden; }

p {
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.7;
  margin: 0.25em 0 1.25em 0;
  text-align: left; }

.post-previews p.text-warning {
  font-size: 80%;
  line-height: 1.2;
  margin-bottom: 0.75em; }

.post-previews p.post-category {
  text-transform: uppercase;
  font-size: 0.88em;
  font-weight: 500;
  margin-bottom: 0; }

.post-previews p.instructor-preview {
  line-height: 1.2;
  font-size: 0.88em;
  color: #465264;
  margin-bottom: 0.25em; }

h4 + p {
  margin-top: 0; }

.instructor p {
  line-height: 1.4; }

p.lesson-header {
  display: none; }

p.image-caption {
  font-size: 0.88em;
  font-style: italic;
  margin-bottom: 2em;
  text-align: right; }

/* ----------------------------------------------------------

For Instructor Box - Landing Page

---------------------------------------------------------- */
.for-instructors {
  background-color: #FFF;
  padding: 1rem; }
  .for-instructors p.h3 {
    line-height: 1.2;
    margin-bottom: 0.75rem; }
  .for-instructors ul {
    margin-left: 1rem;
    padding-left: 1rem; }
    .for-instructors ul li {
      margin-bottom: 0.75rem;
      font-size: 0.88em; }

/* ----------------------------------------------------------

LINKS

---------------------------------------------------------- */
a {
  color: #2C76C6;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  text-decoration: none; }

a:visited {
  color: #2C76C6; }

a:focus {
  color: #2C76C6; }

a:hover {
  color: #194473; }

a:active {
  color: #C6482B; }

a:focus,
header a:focus,
a:focus img,
a:focus #nav-icon {
  outline: thin dotted;
  outline: 5px auto yellow;
  outline-offset: -2px;
  box-shadow: inset 0 0 3px 2px yellow; }

/* ----------------------------------------------------------

REVERSE STYLES

---------------------------------------------------------- */
.reverse {
  color: #e8eff5; }

.reverse h1 {
  color: #FFF; }

.reverse h2 {
  color: #FFF; }

.reverse h3 {
  color: #e8eff5; }

.reverse a {
  color: #FFF; }

.reverse a:visited {
  color: #FFF; }

.reverse a:focus {
  color: white; }

.reverse a:hover {
  color: #cccccc; }

.reverse a:active {
  color: #FFF; }

.light .reverse {
  color: #FFF; }

.light .reverse h1 {
  color: #FFF;
  font-weight: normal;
  letter-spacing: -0.01em;
  margin: 1em 0; }

.light .reverse h3 {
  color: #FFF; }

.light .reverse a {
  color: #FFF; }

.light .reverse a:visited {
  color: #FFF; }

.light .reverse a:focus {
  color: #FFF; }

.light .reverse a:hover {
  color: #fff; }

.light .reverse a:active {
  color: #FFF; }

.light .reverse a.course-name {
  color: #FFF; }

.light .reverse a.course-name:visited {
  color: #FFF; }

.light .reverse a.course-name:focus {
  color: #FFF; }

.light .reverse a.course-name:hover {
  color: #bfbfbf; }

.light .reverse a.course-name:active {
  color: #FFF; }

/* ----------------------------------------------------------

HEADER

---------------------------------------------------------- */
header {
  background: #FFF url(https://www.bellisario.psu.edu/page-assets/assets/images/bg-texture-blue.jpg);
  z-index: 999;
  border-top: 0.5em solid #C6482B; }
  header .course-title a {
    font-size: 1.1em;
    font-weight: 400;
    display: inline-block;
    margin-left: 0.25em;
    color: #fff;
    text-align: left;
    z-index: 101;
    position: relative;
    line-height: 1.1; }
    header .course-title a:hover {
      opacity: 0.75; }
    header .course-title a:after {
      margin-left: 0.25em;
      content: '/';
      color: #fff; }
    header .course-title a:last-of-type:after {
      content: none; }
  header h2 {
    font-size: 1.1em;
    font-weight: 500;
    display: inline-block;
    border-top: none;
    margin: 0;
    padding: 0; }
  header .course-title {
    text-align: left;
    z-index: 9999;
    position: relative;
    margin-top: 0.75em;
    line-height: 1.7; }
    header .course-title img {
      display: none; }

#home-landing header {
  background: none;
  border-top: none; }

.register-login {
  position: relative;
  top: 0;
  right: 0;
  margin-bottom: 1em;
  z-index: 333; }
  .register-login a.btn {
    display: inline-block;
    margin-left: 0.25em;
    margin-right: 0.25em; }

p.affiliation-flag {
  padding: 1.5rem;
  border: .25rem solid #CC0000; }
  @media (min-width: 37.5em) {
    p.affiliation-flag {
      max-width: 75%; } }

@media (min-width: 37.5em) {
  .register-login {
    position: absolute;
    right: 1.5em;
    margin-bottom: 0; }

  header .course-title a {
    font-size: 1.54em; }
  header .course-title img {
    display: block;
    float: left;
    margin: 0 1.0em 0.5em 0;
    max-width: 100%; } }
.container-search input {
  float: left; }
.container-search input.submit {
  margin: 0; }
.container-search form {
  margin-top: 0;
  padding-left: 0; }

#search section .container-search {
  display: inline-block; }
#search section input {
  font-size: 1.3em; }

header #nav-icon {
  z-index: 999999;
  position: relative; }

@media (min-width: 37.5em) {
  .nav-primary-icon-right header .course-title {
    width: 57.62712%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    *float: left; } }
.nav-primary-icon-right header #course-nav-icon {
  width: 40.67797%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  *float: left;
  text-align: right;
  /* width: 38px; */
  margin-top: 0.25em;
  margin-bottom: 0.25em; }
  .nav-primary-icon-right header #course-nav-icon a {
    display: inline-block;
    vertical-align: middle; }

header nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 102;
  text-align: center;
  margin: 0 auto;
  padding-top: 6em;
  background-color: #040c14;
  display: none;
  /* DISPLAY BY TOGGLE */ }
  header nav a {
    color: #FFF;
    display: block;
    padding: 0.5em;
    border-bottom: 1px solid transparent; }
    header nav a:hover {
      color: #FFF;
      border-bottom: 1px solid #3C9EE4; }
  header nav p.nav-section {
    color: #FFF;
    border-top: 1px solid #e8eff5;
    margin-bottom: 0;
    font-size: 1.54em;
    padding-top: 0.25em; }
  header nav ul {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    text-align: center;
    font-size: 0.99em;
    font-family: "Lato", "Open Sans", "Bitter", sans-serif;
    line-height: 1.2; }
    header nav ul li {
      margin-bottom: .125em;
      list-style: none;
      -moz-page-break-inside: avoid-column;
      -webkit-column-break-inside: avoid-column;
      break-inside: avoid-column;
      display: inline-block;
      width: 100%; }
    header nav ul li.closed {
      opacity: 0.6;
      pointer-events: none; }
      header nav ul li.closed a:after {
        position: inline;
        content: ' (Under Development)'; }
    header nav ul li span {
      display: none;
      /* hide "week whatever" until breakpoint */ }

header nav ul li span:first-of-type {
  margin-top: 0; }

header nav ul li ul {
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
  font-size: 0.8em;
  list-style-type: square;
  margin-top: 10px; }

header nav ul li ul li {
  margin-bottom: 0.5em;
  margin-left: 2em; }

.light header nav {
  background-color: #040c14; }
  .light header nav ul li span {
    color: #2C76C6; }

/* ----------------------------------------------------------

TEXT HEADER

---------------------------------------------------------- */
.text-only-header {
  position: relative;
  min-height: 25vw;
  width: 100%;
  overflow: hidden;
  display: table;
  table-layout: fixed;
  background-color: #465264; }

.center-center {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 85vh;
  position: relative;
  z-index: 1; }

.partial-height + .center-center {
  height: 45vh; }
  @media (min-width: 56.25em) {
    .partial-height + .center-center {
      height: 51.6666vh; } }

.center-center-cell {
  display: table-cell;
  position: relative;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  /*	background-size: 100%;	
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));	
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%);	
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%);	
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); */ }

.center-center-cell ul {
  list-style-type: none; }

.center-center-cell ul li a {
  background: #2C76C6;
  color: #FFF;
  text-align: center;
  line-height: 1.3;
  font-weight: 400;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  border: none;
  margin-top: 1.0em;
  font-size: 1.1em;
  display: inline-block;
  padding: 1em 2em;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }

.center-center-cell ul li a:before {
  content: 'Start the Course: '; }

.center-center-cell ul li a:hover {
  background: #194473;
  color: #FFF; }

.left-bottom-cell {
  display: table-cell;
  position: relative;
  width: 100%;
  vertical-align: bottom;
  text-align: left;
  padding: 0 1.5em;
 /* background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%);
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 1%, #000000 100%); 
*/ }
  .left-bottom-cell h1, .left-bottom-cell p {
    color: #FFF; }
  .left-bottom-cell a.landing-page-center-link {
    text-align: left;
    display: block;
    font-size: 1.32em; }
    @media (min-width: 37.5em) {
      .left-bottom-cell a.landing-page-center-link {
        font-size: 1.54em; } }
    .left-bottom-cell a.landing-page-center-link:link, .left-bottom-cell a.landing-page-center-link:visited {
      color: #FFF; }
  .left-bottom-cell h1 {
    font-size: 2.31em;
    margin-bottom: 0.5em;
    margin-top: 0.25em;
    text-align: left;
    line-height: 1.0; }
    @media (min-width: 37.5em) {
      .left-bottom-cell h1 {
        font-size: 3.74em; } }
    .left-bottom-cell h1 span {
      display: block;
      font-size: 65%; }
  .left-bottom-cell p {
    font-size: 1.32em; }

.text-only-header h1 {
  font-size: 2.31em;
  color: #FFF;
  border-bottom: none;
  font-weight: bolder;
  text-transform: uppercase;
  margin-top: 1em; }

.text-only-header h2 {
  margin-bottom: 1em; }

.course-module-previews {
  background-color: #FFF; }

.course-developers {
  background-color: #465264; }
  .course-developers .grid {
    padding-top: 3em; }

.course-intro {
  background-color: #d5e4f4; }
  .course-intro p {
    font-size: 0.99em;
    margin-top: 1em;
    margin-bottom: 0.75em; }
    @media (min-width: 56.25em) {
      .course-intro p {
        font-size: 1.1em; } }

/* ----------------------------------------------------------

DASHBOARD

---------------------------------------------------------- */
#dashboard ul {
  list-style-type: none; }
#dashboard ul.lesson-nav {
  width: 90%; }
#dashboard ul.lesson-nav li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
#dashboard #main li {
  padding: 0.25rem;
  font-size: 1.25em; }
#dashboard #main ul.assessment-list {
  order: -1; }
#dashboard #main ul.assessment-list li:before {
  content: '\E835';
  font-family: 'Material Icons';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin-right: 0.25rem;
  position: relative;
  top: 0;
  display: block;
  left: 0;
  font-size: 1.25em;
  color: #e8e9ec; }
#dashboard #main ul.assessment-list li.introduction:before {
  content: '\E85D';
  /* replace checkbox with assignment icon */ }
#dashboard #main ul.assessment-list li.status-complete:before {
  content: '\E834';
  font-family: 'Material Icons';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin-right: 0.25rem;
  position: relative;
  top: 0;
  display: block;
  left: 0;
  font-size: 1.25em;
  color: #B1D43B; }

#dashboard-nav {
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

.assessment h4 {
  /* hide assessment text */
  height: 0px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 0px; }

/* ----------------------------------------------------------

INSTRUCTOR

---------------------------------------------------------- */
.instructor-bio {
  text-align: center;
  margin-top: 0.5em; }

#main .instructor-bio img {
  width: 30%;
  height: auto;
  border-radius: 50%;
  margin-top: 1em;
  border: 0.5em solid #b5bac1;
  align-self: flex-start; }
#main .instructor-bio h2 {
  margin-top: 0.25em;
  border-top: 0;
  padding-top: 0; }
#main .instructor-bio p {
  text-align: left; }

.module #main .instructor-bio p.italic,
.tools #main .instructor-bio p.italic {
  color: #C6482B;
  font-size: 1.32em;
  text-align: center; }

/* ----------------------------------------------------------

FULL SCREEN IMAGE

---------------------------------------------------------- */
.slide-fullscreen-landing h1 {
  text-align: center;
  background: none;
  font-size: 3.74em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  width: 100%;
  padding-bottom: 0;
  color: #465264; }

.slide-fullscreen-landing .max-width {
  max-width: 1280px; }

.slide-fullscreen-landing {
  padding-left: 1.5em;
  padding-right: 1.5em;
  text-align: center; }

.slide-fullscreen-landing p {
  text-align: center;
  color: #465264;
  font-size: 1.98em;
  line-height: 1.2;
  margin-top: 1.0em; }

.slide-fullscreen {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.95;
  background-color: #000;
  background-attachment: scroll;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center; }

.slide-fullscreen.partial-height {
  opacity: 1; }

.no-touch .slide-fullscreen {
  width: 100%;
  height: 100vh;
  background-attachment: fixed;
  position: fixed; }

.no-touch .slide-fullscreen.partial-height,
.slide-fullscreen.partial-height {
  height: 80vh; }

.slide-fullscreen p {
  color: #fff;
  font-size: 1.32em;
  line-height: 1.2;
  margin-top: 1em; }

.slide-fullscreen-landing h2 {
  border-top: none;
  padding-top: 0; }

/* ----------------------------------------------------------

JUMBOTRON

---------------------------------------------------------- */
.jumbotron img {
  width: 100%;
  height: auto; }

/* ----------------------------------------------------------

STYLING BASED ON TOGGLES

---------------------------------------------------------- */
.article-dropcap article h1 + p {
  margin-top: 3.0em; }
.article-dropcap article h1 + p:first-letter {
  color: #C6482B;
  float: left;
  font-size: 4.488em;
  /* paragraph font size medium times 2 x line height */
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  line-height: 0.75;
  margin-right: 0.025em; }

/* ----------------------------------------------------------

CITATIONS

---------------------------------------------------------- */
.citations-text {
  background-color: #f6f6f7;
  padding: 1em;
  border: 1px solid #e3e5e8;
  margin-top: 1em;
  text-align: left; }

.citations-text p {
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  font-size: 0.88em;
  line-height: 1.4;
  margin-bottom: 1em;
  float: left;
  width: 95%; }

/* turned this off for Page Center */
span.citation-row-count {
  /* matrix numbering in footer citation accordion */
  position: relative;
  display: block;
  float: left;
  font-size: 0.88em;
  margin-right: 0.2em;
  line-height: 1.6;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  margin-top: 0.1em; }

/* ----------------------------------------------------------

DASHBOARD

---------------------------------------------------------- */
.course-status-note {
  display: block;
  padding: 1.5em;
  background-color: rgba(244, 217, 79, 0.5);
  border: 1em solid rgba(239, 201, 3, 0.5);
  position: relative;
  text-align: center; }
  .course-status-note h2 {
    margin-top: 0;
    border-top: none;
    padding-top: 0; }
  .course-status-note h2:before {
    content: '\E865';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    display: block;
    font-size: 2em;
    color: #C6482B; }
  .course-status-note p {
    margin-bottom: 0;
    text-align: center; }

/* ----------------------------------------------------------

ARTICLE SPECIFIC STYLING

---------------------------------------------------------- */
.container-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  z-index: 1; }
  .container-video iframe,
  .container-video object,
  .container-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.container-video + p,
.add-margin {
  margin-top: 1em; }

a.media-transcript {
  width: 100%;
  padding: 1.5em;
  background-color: #e8e9ec;
  position: relative;
  font-size: 75%; }
  a.media-transcript a {
    font-family: "Lato", "Open Sans", "Bitter", sans-serif;
    font-size: 1.32em; }

.toggle {
  display: block;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif; }

.toggle:hover {
  cursor: pointer; }

.toggle.toggle-citations {
  margin-top: 2em; }

.toggle:before {
  content: '+';
  margin-right: 0.125em; }

.toggle.toggle-opened:before {
  content: 'x';
  margin-right: 0.25em;
  position: relative;
  top: -0.05em; }

div.toggled-group {
  display: none; }

div.toggled-group h3 {
  margin-top: 0.25em; }

.toggle, .toggled-group {
  text-align: left; }

.transcript-text {
  background-color: #e8e9ec;
  padding: 1em;
  border-bottom: 0.5em solid #465264; }

a.media-transcript + p,
.transcript-text + p {
  margin-top: 2em; }

#main img {
  width: 100%;
  height: auto;
  align-self: flex-start; }

#main #wrap-timeline img {
  width: auto;
  height: auto; }

#main img.course-nav-hint {
  float: right;
  margin-left: 2em;
  width: auto;
  height: auto; }

/* ----------------------------------------------------------

LIST TYPES

---------------------------------------------------------- */
/* need this just here so as to not override secondary nav lists */
.content article,
.content section {
  	/* ol > li:before {
  	content: counter(li);
  	counter-increment: li;
  	position: absolute;
  	left: -0.5em;
  	color: $color-primary;
  	text-align: center;
  	font-weight: $font-weight-bold;
  	}
  		
  	ol li:after {
  	clear:both;
  	}
  
  */ }
  .content article ul,
  .content section ul {
    list-style: none;
    counter-reset: none;
    /* Initiate a counter */
    position: relative;
    margin: 0 0 2em 0; }
  .content article ol,
  .content section ol {
    /* counter-reset: li; */
    /* Initiate a counter */
    position: relative;
    margin: 0 0 2em 0;
    padding: 0;
    width: 85%; }
  .content article ul li, .content article ol li,
  .content section ul li,
  .content section ol li {
    position: relative;
    padding: 1.0em 0.75em;
    border-bottom: 1px solid #dadce0;
    line-height: 1.6; }
  .content article ol li,
  .content section ol li {
    padding: 1.0em 0.75em 1.0em 0.25em; }
  .content article ul li:last-of-type,
  .content article ol li:last-of-type,
  .content section ul li:last-of-type,
  .content section ol li:last-of-type {
    border-bottom: none; }
  .content article ul li:before,
  .content section ul li:before {
    content: '\25CF';
    /* bullet */
    position: absolute;
    left: -0.5em;
    color: #C6482B;
    text-align: center;
    font-weight: bold; }
  .content article ol ol,
  .content section ol ol {
    margin: 0 0 0 2em;
    /* Add some left margin for inner lists */ }
  .content article li ul, .content article li ol,
  .content section li ul,
  .content section li ol {
    margin: 0 2.5em 0 2.5em; }
  .content article ul li ul li:last-of-type,
  .content article ol li ul li:last-of-type,
  .content section ul li ul li:last-of-type,
  .content section ol li ul li:last-of-type {
    border-bottom: none; }
  .content article ul.course-outline,
  .content section ul.course-outline {
    list-style-type: none;
    margin-bottom: 0; }
    .content article ul.course-outline li,
    .content section ul.course-outline li {
      padding: 0 0 0.375em 0;
      border-bottom: 0; }
    .content article ul.course-outline li:before,
    .content section ul.course-outline li:before {
      content: none; }
    .content article ul.course-outline a,
    .content section ul.course-outline a {
      display: inline-block;
      padding: 0.25em 1.0em;
      color: #2C76C6;
      background: #465264; }
    .content article ul.course-outline a:visited,
    .content section ul.course-outline a:visited {
      background: #eaecee;
      color: #2C76C6; }
    .content article ul.course-outline a:hover,
    .content section ul.course-outline a:hover {
      background: #acb1b9;
      color: #2C76C6; }
  .content article ul.concepts li,
  .content article ul.objectives li,
  .content article ul.outline li,
  .content section ul.concepts li,
  .content section ul.objectives li,
  .content section ul.outline li {
    background-color: #f0f5f9; }
  .content article ul.concepts li:nth-of-type(2n),
  .content article ul.objectives li:nth-of-type(2n),
  .content article ul.outline li:nth-of-type(2n),
  .content section ul.concepts li:nth-of-type(2n),
  .content section ul.objectives li:nth-of-type(2n),
  .content section ul.outline li:nth-of-type(2n) {
    background-color: #f8fafc; }
  .content article ul.concepts li:hover,
  .content article ul.objectives li:hover,
  .content article ul.outline li:hover,
  .content section ul.concepts li:hover,
  .content section ul.objectives li:hover,
  .content section ul.outline li:hover {
    background-color: #e8eff5; }
  .content article ul.resrouces li,
  .content article ul.concepts li, .content article ul.objectives li, .content article ul.outline li,
  .content section ul.resrouces li,
  .content section ul.concepts li,
  .content section ul.objectives li,
  .content section ul.outline li {
    padding-left: 3em; }
  .content article ul.resources li:before,
  .content section ul.resources li:before {
    content: '\E2C0';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    top: 0.25em;
    position: absolute;
    left: -1.0em;
    font-size: 2em; }
  .content article ul.concepts li:before,
  .content section ul.concepts li:before {
    content: '\2609';
    color: #7e8693;
    position: absolute;
    left: 1.0em; }
  .content article ul.objectives li:before,
  .content section ul.objectives li:before {
    content: '\2713';
    color: #7e8693;
    position: absolute;
    left: 1em; }
  .content article ul.outline li:before,
  .content section ul.outline li:before {
    content: '\2192';
    position: absolute;
    left: 1em; }

.content article table ul {
  margin: 0; }
.content article table ul.objectives li,
.content article table ul.objectives li:nth-of-type(2n) {
  background-color: transparent; }

/* ----------------------------------------------------------

BIG QUESTION LIST

---------------------------------------------------------- */
p.question {
  padding: 0 2em 0 1.5em;
  margin-left: 2.5em;
  position: relative;
  font-size: 1.54em;
  line-height: 1.2;
  margin-bottom: 1.0em;
  margin-top: 1.5em;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  color: #C6482B;
  font-weight: 400;
  font-style: italic; }

p.question::after {
  clear: both;
  display: block;
  content: ".";
  height: 0px;
  visibility: hidden; }

p.question:before {
  content: '?';
  font-size: 1.54em;
  font-weight: bolder;
  color: #7e8693;
  left: 0;
  position: absolute;
  top: -0.25em; }

/* ----------------------------------------------------------

PULLQUOTE

---------------------------------------------------------- */
p.pullquote {
  padding: 3em 0 0 1em;
  font-weight: 400;
  font-size: 1.1em;
  margin: 0 3em 2em 0;
  text-align: left;
  position: relative;
  z-index: 1;
  color: #C6482B;
  font-style: italic;
  line-height: 1.4; }

p.pullquote:before {
  content: '\201C';
  position: absolute;
  font-style: normal;
  top: -.2em;
  left: 0;
  font-size: 12em;
  color: #e3e5e8;
  z-index: -1;
  margin: 0;
  padding: 0; }

p.pullquote-citation {
  font-size: 1.1em;
  line-height: 1.3;
  display: block;
  margin-top: 0;
  margin-left: 3em;
  margin-right: 2em;
  text-align: right;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-style: normal;
  position: relative;
  top: -1.5em; }

p.pullquote-citation:before {
  content: "\2014 \2009"; }

/* ----------------------------------------------------------

BORDERED CALLOUT

---------------------------------------------------------- */
p.callout {
  background: #e3e5e8;
  border-left: 10px solid #C6482B;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  overflow: hidden;
  padding: 1.5em 1.5em;
  letter-spacing: 0;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif; }

p.email {
  background: #FFF;
  border: 2px solid #e8eff5;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  overflow: hidden;
  padding: 3em 3em;
  letter-spacing: 0;
  -webkit-box-shadow: 2px 2px 3px #ccc;
  -moz-box-shadow: 2px 2px 3px #ccc;
  box-shadow: 2px 2px 3px #ccc; }

/* ----------------------------------------------------------

 

---------------------------------------------------------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 2em; }

table {
  width: 870px;
  display: block;
  margin: 0 0 4em 0;
  width: 100%; }

.table-wrap > table {
  /* table bottom margin is 4em unless there is table-wrap to prevent big gap before scrollbar */
  margin-bottom: 0; }

table p {
  margin: 0; }

td,
th {
  padding: 0.5em 1em;
  vertical-align: top; }

.content table img,
.content table img {
  margin: 0;
  padding: 0;
  background: none; }

table {
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  font-weight: 500;
  line-height: 1.2;
  color: #192540; }

table td p {
  font-size: 0.88em;
  margin-bottom: 1em; }

table th {
  text-align: left;
  font-weight: bolder; }

tr {
  background: #465264; }

tr:nth-of-type(odd) {
  background: #e3e5e8; }

td, th {
  border: 0; }

table.exceltable {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.99em; }
  table.exceltable:hover {
    cursor: pointer; }
  table.exceltable td {
    padding: 0.7em 0.9em;
    overflow: hidden;
    word-break: normal; }
  table.exceltable th,
  table.exceltable td.small {
    font-weight: normal;
    padding: 0.3em;
    text-align: center;
    font-size: 0.99em;
    overflow: hidden;
    word-break: normal;
    vertical-align: middle; }
  table.exceltable span {
    display: block;
    position: relative;
    z-index: 0; }
    table.exceltable span .hidden {
      background: #afbebe;
      z-index: 1; }
  table.exceltable .right {
    text-align: right; }
  table.exceltable .strong {
    font-weight: 700; }
  table.exceltable .boldright {
    font-weight: 700;
    text-align: right; }

/*------------------------------------------------

BUTTON STYLES

---------------------------------------------------------- */
.btn,
p.btn,
.alt-btn,
input[type="submit"],
input[type="reset"] {
  background: #2C76C6;
  color: #FFF;
  text-align: center;
  line-height: 1.3;
  font-weight: 400;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  border: 1px solid transparent;
  margin-top: 1.0em;
  font-size: 0.88em;
  display: inline-block;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }
  @media (min-width: 56.25em) {
    .btn,
    p.btn,
    .alt-btn,
    input[type="submit"],
    input[type="reset"] {
      font-size: 1.1em; } }

input[type="submit"],
input[type="reset"] {
  cursor: pointer;
  padding: 0.5em 1em;
  margin: 2.0em 0.5em 0 0;
  color: #2C76C6;
  font-weight: bolder; }

input[type="submit"] {
  background: #c8e176; }
  input[type="submit"]:hover {
    background: #B1D43B; }

input[type="reset"] {
  background: #f4d94f; }
  input[type="reset"]:hover {
    background: #efc903; }

a.btn:visited {
  color: #FFF; }

.btn a,
a.btn,
button {
  padding: 0.5em 1em;
  display: block; }
  @media (min-width: 56.25em) {
    .btn a,
    a.btn,
    button {
      padding: 0.5em 2em; } }

a.btn#nav-icon {
  display: inline-block;
  padding: 0.5em;
  border: 1px solid #fff;
  margin-top: 0;
  margin-left: 0.5em; }

@media (min-width: 37.5em) {
  a.btn#nav-icon {
    padding: 0.5em 1.5em; } }
.alt-btn {
  background: #C6482B;
  color: #FFF; }

.outline-btn {
  background: transparent;
  border: 1px solid #FFF; }

.btn:hover {
  background: #194473;
  color: #FFF; }

.btn.btn-back a:after {
  content: none; }

.btn a {
  color: #FFF; }

.btn a:visited {
  color: #FFF; }

.btn a:focus {
  color: #FFF; }

.btn a:hover {
  color: #FFF; }

.btn a:active {
  color: #FFF; }

.btn a:visited,
.btn a:active {
  color: #FFF; }

a#btn-next {
  display: block;
  width: 100%;
  font-size: 1.54em;
  text-align: center;
  padding: 2em;
  margin-top: 2em;
  background-color: #d5e4f4; }
  a#btn-next:after {
    content: " \2192"; }

a#btn-next:hover {
  background-color: #2C76C6;
  color: #fff; }

/* Social Login Buttons */
a.btn.social-login {
  font-size: 1.32em;
  color: #FFF;
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  margin-right: 1em;
  display: inline-block; }
  a.btn.social-login.facebook {
    background: #22589C; }
  a.btn.social-login.facebook:before {
    content: url(../images/icons/icon-facebook-white.png);
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em; }
  a.btn.social-login.facebook:hover {
    background: #1b467d; }
  a.btn.social-login.twitter {
    background: #39AEE1; }
  a.btn.social-login.twitter:before {
    content: url(../images/icons/icon-twitter-white.png);
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em; }
  a.btn.social-login.twitter:hover {
    background: #2e8bb4; }
  a.btn.social-login.google {
    background: #a92626; }
  a.btn.social-login.google:before {
    content: url(../images/icons/icon-google-white.png);
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em; }
  a.btn.social-login.google:hover {
    background: #d32f2f; }

p.self-check-question {
  font-size: 1.32em;
  line-height: 1.4;
  margin-bottom: 0;
  padding-top: 1em;
  margin-top: 1em;
  border-top: 1px dotted #dadce0; }

.yes-no-questions .btn {
  background: #f4f4f4;
  color: #2C76C6;
  text-transform: uppercase;
  margin-left: 2em;
  font-weight: bolder;
  text-transform: none;
  text-align: left; }

.yes-no-questions .toggled-group {
  background-color: #f6f6f7;
  border-bottom: none;
  margin-left: 2em; }
  .yes-no-questions .toggled-group p {
    font-size: 90%; }
  .yes-no-questions .toggled-group p.correct-selector {
    background-color: #7FA855;
    color: #fff;
    display: inline-block;
    padding: 0.25em;
    margin-bottom: 0.25em; }
  .yes-no-questions .toggled-group p.incorrect-selector {
    background-color: #bf3b20;
    color: #fff;
    display: inline-block;
    padding: 0.25em;
    margin-bottom: 0.25em; }

p.more {
  display: block;
  margin-top: 1em;
  margin-left: 2em;
  padding-left: 48px;
  display: block;
  line-height: 1.0; }

p.more a:link {
  font-size: 0.9em;
  min-height: 48px;
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
  padding-left: 12px;
  padding-top: 15px;
  padding-right: 10px;
  background-color: #e8eff5; }

.pdf {
  background: url(../images/icons/icon-pdf.png) no-repeat; }

/* ----------------------------------------------------------

FORM STYLES

---------------------------------------------------------- */
form {
  margin: 1em 0;
  padding: 1em 0 1em 1em; }
  form fieldset {
    border: none; }
  form .row {
    clear: both;
    padding: 0.5em;
    position: relative; }
    form .row p {
      font-family: "Roboto Slab", "Open Sans", "Bitter", sans-serif; }
  form li p {
    margin: 0; }
    form li p[role="alert"] {
      font-weight: bolder; }
  form fieldset legend {
    font-size: 1.3em;
    line-height: 1.1;
    color: #002344;
    padding: 0 0.5em 0.5em; }
  form div.formfield {
    margin: 1.5em 6em 1em 3em;
    font-size: 1.8em; }
  form div.formfield > .small {
    font-size: 0.8em;
    color: #b32017; }
  form input[type="radio"],
  form input[type="checkbox"] {
    float: left;
    margin-right: 0.5em;
    margin-top: 0.2em;
    display: block; }
  form textarea {
    display: block;
    padding: 0.5em;
    min-width: 100%; }
  form input[type="text"],
  form input[type="password"],
  form input[type="email"] {
    background: #D2F0F9;
    border: 1px solid #e8eff5;
    padding: 0.5em;
    display: block;
    font-size: 0.99em;
    color: #465264; }
    form input[type="text"]:hover,
    form input[type="password"]:hover,
    form input[type="email"]:hover {
      background-color: #fef2cc; }
    form input[type="text"]:focus,
    form input[type="password"]:focus,
    form input[type="email"]:focus {
      background-color: #fef2cc; }
  form input.submit {
    padding: 0.5em 1em;
    background: #2C76C6;
    border: 1px solid #2C76C6;
    color: #fff;
    margin: 1em 0.5em 0 0; }
    form input.submit:hover {
      background: #194473;
      cursor: pointer; }
  form label {
    font-size: 0.99em;
    font-family: "Lato", "Open Sans", "Bitter", sans-serif;
    font-weight: 500;
    color: #465264;
    line-height: 1.0;
    margin-bottom: 0.5em;
    display: block;
    margin-top: 1.5em; }
  form input + label {
    margin-top: 0; }
  form ol {
    list-style-type: decimal; }
  form li {
    border-top: 1px dotted #e8e9ec;
    font-family: "Roboto Slab", "Open Sans", "Bitter", sans-serif;
    padding: 1.5em 0 1em 1em;
    position: relative; }
    form li div {
      margin: 0;
      font-size: 0.99em; }
      form li div li:before {
        content: none; }
  form li.correct {
    background: #D9F2CC !important; }
  form li.incorrect {
    background: #FFF0B2 !important; }
  form li.correct:after {
    position: absolute;
    display: inline-block;
    top: 0em;
    right: 0em;
    color: #465264;
    padding: 0.25em;
    background-color: #8CD966;
    content: 'Correct';
    font-family: "Lato", "Open Sans", "Bitter", sans-serif;
    font-size: 0.99em; }
  form li.incorrect:after {
    position: absolute;
    display: inline-block;
    top: 0em;
    right: 0em;
    color: #fff;
    padding: 0.25em;
    background-color: #C6482B;
    content: 'Incorrect';
    font-family: "Lato", "Open Sans", "Bitter", sans-serif;
    font-size: 0.99em; }
  form p.after {
    position: absolute;
    top: 0.5em;
    right: 0.5em; }
  form li.incorrect p.after {
    margin: 0;
    font-size: 0.99em;
    font-family: "Lato", "Open Sans", "Bitter", sans-serif; }
  form div.true {
    background: #badba8;
    padding: 5px; }
  form div.false {
    background: #f79e9e;
    padding: 5px; }
  form .assessment div.false,
  form .assessment div.true {
    font-size: 1.8em; }
  form div.true p,
  form div.false p {
    font-size: 1em;
    margin: 0 0 0 1em; }

header form {
  margin-top: 0; }

.container-search form {
  display: -webkit-flex;
  display: flex;
  flex: 1; }

.container-search input {
  display: -webkit-flex;
  display: flex;
  float: left; }

.container-search input.submit {
  margin: 0; }

#search section .container-search {
  display: inline-block; }
#search section input {
  font-size: 1.3em; }

.assessment #assessment-loader {
  max-width: 160px;
  margin: 0 auto;
  display: block; }

.assessment .fail {
  background: #FFF0B2; }
.assessment .valid {
  background: #D9F2CC; }
.assessment .error {
  border: none; }
.assessment .partial-correct {
  background: #F0FAEB; }
.assessment input[type="text"] {
  border: 1px solid #000; }
.assessment .container {
  padding: 1em; }
.assessment .hideMe {
  display: none; }
.assessment .showMe {
  display: block; }
.assessment span {
  padding: 0 0.5em 0 0;
  font-size: 0.9em; }
.assessment span#total-tries {
  padding: 0; }

.form-completion form {
  margin: 0;
  padding: 0; }
  .form-completion form input[type="submit"] {
    margin: 0.5em 0 0.5em 0; }

/* ----------------------------------------------------------

	SECONDARY NAVIGATION

---------------------------------------------------------- */
#main nav {
  display: block;
  height: 100%;
  margin: 0 0 30px 0;
  /* why was this 30px here? for fixed side nav w/ arrows? */
  z-index: 0;
  text-align: left;
  /* First Level UL and LI */ }
  #main nav p {
    color: #FFF;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 0.99em;
    padding: 0.25em 0.75em;
    background-color: rgba(25, 37, 64, 0.75);
    opacity: 0.8;
    display: inline-block; }
  #main nav img {
    border: none;
    background: none;
    filter: alpha(opacity=60);
    opacity: 0.6;
    max-width: 60px;
    margin: 0 auto;
    display: block;
    padding: 0.35em; }
  #main nav.no_slide_nav li:first-child {
    border-top: 0; }
  #main nav.no_slide_nav li:last-child {
    border-bottom: 0; }
  #main nav ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
    font-family: "Lato", "Open Sans", "Bitter", sans-serif;
    font-size: 0.99em; }
    #main nav ul li {
      margin-bottom: 1px;
      line-height: 1.2; }
      #main nav ul li:first-child {
        border-top: none; }
      #main nav ul li:last-of-type {
        border-bottom: none; }
      #main nav ul li span {
        color: #e8eff5; }
      #main nav ul li a {
        color: #FFF;
        line-height: 1.2;
        display: block;
        font-size: 0.99em;
        padding: 1em;
        -moz-transition: all 0.15s;
        -o-transition: all 0.15s;
        -webkit-transition: all 0.15s;
        transition: all 0.15s;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        background: #2C76C6; }
        #main nav ul li a:hover {
          color: #FFF;
          background: #235e9e; }
      #main nav ul li.selected a {
        color: #FFF;
        background: #C6482B;
        position: relative;
        z-index: 0; }
  #main nav ul li.parent-selected a {
    background-color: #C6482B; }
  #main nav ul li.selected ul li a,
  #main nav ul li.parent-selected ul li a {
    background-color: #e8e9ec;
    color: #2C76C6; }
    #main nav ul li.selected ul li a:hover,
    #main nav ul li.parent-selected ul li a:hover {
      background-color: #FFF; }
  #main nav ul li.parent-selected ul li.selected a {
    background-color: #FFF; }

/* ----------------------------------------------------------

NEXT PAGE

---------------------------------------------------------- */
.page-navigation-block {
  text-align: center;
  height: 50%;
  overflow: hidden;
  position: relative;
  background-color: #000;
  width: 100%; }

.page-navigation-block img {
  background: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  position: relative;
  top: -25%;
  opacity: 0.4; }

.light .page-navigation-block {
  background-color: #FFF; }
.light .page-navigation-block img {
  opacity: 0.25; }

.page-navigation-next {
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  position: relative;
  top: 25%;
  z-index: 99;
  margin-left: auto;
  margin-right: auto; }

.page-navigation-next span {
  display: block;
  font-size: 0.88em;
  font-weight: 400;
  letter-spacing: 0.4em;
  margin-bottom: 0.5em;
  padding: 0 0 0.5em 0;
  text-transform: uppercase;
  border-bottom: 1px dotted #dadce0; }

.page-navigation-next a {
  display: inline-block;
  font-size: 1.1em;
  padding: 0.5em 1em; }

.page-navigation-next a:hover {
  background-color: rgba(44, 118, 198, 0.5); }

.page-header-text-only .page-navigation-block {
  height: auto;
  background-color: transparent; }
.page-header-text-only .page-navigation-block img {
  display: none; }
.page-header-text-only .page-navigation-next {
  text-align: center;
  line-height: 1.3;
  font-weight: 400;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif;
  border: none;
  margin-top: 1em;
  margin-bottom: 2em;
  font-size: 1.1em;
  display: inline-block;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; }
.page-header-text-only .page-navigation-next span {
  font-size: 1.1em;
  display: inline;
  font-weight: bolder;
  border-bottom: none;
  text-transform: none;
  letter-spacing: 0; }
.page-header-text-only .page-navigation-next span:after {
  content: ":"; }
.page-header-text-only .page-navigation-next a {
  display: inline-block;
  font-size: 1.32em;
  font-weight: 400;
  background: #2C76C6;
  padding: 1em 2em;
  display: block;
  color: #FFF; }
  .page-header-text-only .page-navigation-next a:after {
    content: '\2192';
    margin: 0 0 0 0.5em; }
  .page-header-text-only .page-navigation-next a:hover {
    background: #194473;
    color: #FFF; }
  .page-header-text-only .page-navigation-next a:visited {
    color: #FFF; }

/* ----------------------------------------------------------

FOOTER

---------------------------------------------------------- */
footer {
  background: #040c14 url(https://www.bellisario.psu.edu/page-assets/assets/images/bg-texture-blue.jpg);
  text-align: center; }
  footer img {
    width: auto;
    height: 49px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 0.5em;
    margin-bottom: 0.5em; }
  footer img.page-logo {
    width: 280px;
    height: 38px; }
  footer p {
    margin: 0.5em 0;
    font-family: "Lato", "Open Sans", "Bitter", sans-serif;
    font-size: 0.88em; }

@media (min-width: 37.5em) {
  footer img {
    width: auto;
    height: 64px; }
  footer img.page-logo {
    width: 366px;
    height: 50px;
    margin-left: 2em; }
  footer p {
    font-size: 0.99em; } }
/* ----------------------------------------------------------

MEDIA QUERIES

---------------------------------------------------------- */
/* -----------------------------------------
BREAKPOINT SMALL ---------------------------
----------------------------------------- */
@media (min-width: 37.5em) {
  body {
    font-size: 110%; }

  .readtime {
    text-align: right; }

  .page-header-text-only .readtime {
    text-align: left; }

  #main article,
  #main div.container-no-article {
    padding: 3em; }

  #main .img-full {
    width: 100%;
    height: auto;
    float: none;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0; }

  #main .img-inset {
    width: 60%;
    height: auto;
    float: none;
    margin-left: 20%;
    margin-bottom: 0;
    margin-top: 0; }

  #main .img-right {
    width: 48%;
    float: right;
    margin-left: 2%;
    margin-bottom: 2%;
    margin-top: 0; }

  #main .img-left {
    width: 48%;
    float: left;
    margin-right: 2%;
    margin-bottom: 2%;
    margin-top: 0; }

  #main .img-right-third {
    width: 30%;
    float: right;
    margin-left: 2%;
    margin-bottom: 2%;
    margin-top: 0; }

  #main .img-left-third {
    width: 30%;
    float: left;
    margin-right: 2%;
    margin-bottom: 2%;
    margin-top: 0; }

  #main .img-right:after, #main .img-left:after,
  #main .img-right-third:after, #main .img-left-third:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }

  #main p.centered img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em; }

  figcaption {
    font-style: italic;
    font-size: 0.88em;
    text-align: right; }

  .content article ol, .content article ul,
  .content section ol,
  .content section ul {
    margin: 0 3em 2em 3em; }

  .content article table ul {
    margin: 0; }

  .page-navigation-next a {
    font-size: 1.98em; }

  p.lesson-header {
    display: inline-block;
    position: relative;
    font-size: 2.31em;
    font-weight: bolder;
    opacity: 0.6;
    top: -1.5em;
    left: -1.45em;
    margin-top: 0;
    margin-bottom: 0;
    color: #fff; }

  #main .launch-interactive {
    width: 66.10169%;
    float: left;
    margin-right: -100%;
    margin-left: 16.94915%;
    clear: none; }

  /* END BREAKPOINT SMALL */ }
/* -----------------------------------------
BREAKPOINT MEDIUM --------------------------
----------------------------------------- */
@media (min-width: 56.25em) {
  body {
    font-size: 115%; }

  header nav {
    text-align: left; }
    header nav ul {
      text-align: left;
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
      -moz-column-gap: 4em;
      -webkit-column-gap: 4em;
      column-gap: 4em; }
      header nav ul li span {
        display: block;
        text-transform: uppercase;
        color: #e8eff5;
        font-weight: bolder; }

  .no-side-nav #main article,
  .tools #main article,
  .login #main article {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    *float: left; }

  /* JUMBOTRON */
  .page-header-image-based .jumbotron {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: -1;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #163b63; }
    .page-header-image-based .jumbotron figure {
      display: block;
      /* height: 100% !important;*/
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden; }
      .page-header-image-based .jumbotron figure img {
        display: block;
        width: 100%;
        height: auto;
        opacity: 0.5; }

  .page-header-image-based .jumbotron.header-strip {
    /* GOLF */
    background-color: #E2E3E6;
    position: relative; }
    .page-header-image-based .jumbotron.header-strip .max-width {
      text-align: left; }
    .page-header-image-based .jumbotron.header-strip img {
      width: 23.72881%;
      float: left;
      margin-right: -100%;
      margin-left: 0;
      clear: none;
      display: block;
      float: left;
      width: auto;
      height: 325px;
      margin-top: 0;
      /* adjusted this to pull img up to baseline of h1 - what to do with this ???? */ }

  .jumbotron + #main {
    margin-top: -4em;
    /* THIS NEEDS TO BE ADJUSTABLE AS VARIALBE IN SPECIFIC TEMPLATE */ }

  .page-header-text-only .jumbotron {
    display: none; }

  .page-header-text-only .jumbotron + #main {
    margin-top: 15vh; }

  .post-previews a.block {
    padding: 1em; }

  .post-previews h2 {
    border-top: 0;
    margin-top: 0.5em;
    padding-top: 0; }

  .post-previews p {
    color: #465264;
    line-height: 1.6; }

  .post-previews a.block:hover {
    background-color: #eaf1f9; } }
@media (min-width: 56.25em) and (min-width: 37.5em) {
  .post-previews.three-column a {
    width: 32.20339%;
    clear: right;
    float: left;
    margin-left: 0;
    margin-right: 1.69492%;
    position: relative; }

  .post-previews.three-column a:nth-of-type(3n) {
    width: 32.20339%;
    clear: right;
    float: right;
    margin-right: 0;
    position: relative; } }
@media (min-width: 56.25em) {
  /* MAIN */
  #main .dashboard-container {
    margin: 2em 0 3em 0; }

  #main .container-no-article {
    width: 66.10169%;
    float: left;
    margin-right: -100%;
    margin-left: 16.94915%;
    clear: none;
    *float: left; }
  #main article {
    width: 74.57627%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    *float: left;
    margin: 2em 1em 3em 0;
    background: #fff; }
    #main article h1 {
      margin-bottom: 0.5em;
      margin-top: 0; }
  #main nav {
    width: 23.72881%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    *float: left;
    margin-top: 1.9em; }
    #main nav p {
      text-transform: uppercase;
      margin: 1em 0 0 0; }
    #main nav h2 {
      margin: 0;
      padding: 0.5em 0 0;
      font-size: 1.54em; }
      #main nav h2 p {
        margin: 0 0 -0.5em;
        line-height: 1.6; }
  #main nav.no_slide_nav {
    margin-top: 0.8em; }

  .box {
    background: #FFF;
    padding: 1em 0;
    border: 1px solid #e8eff5; }

  p.pullquote {
    padding: 3em 0 0 3em; }

  p.lesson-header {
    font-size: 3.74em; }

  /* END BREAKPOINT MEDIUM */ }
/* -----------------------------------------
BREAKPOINT LARGE --------------------------
----------------------------------------- */
@media (min-width: 75em) {
  header nav ul {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4; }

  .nav-primary-include-tools header .nav-primary-course {
    width: 74.57627%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    *float: left; }
    .nav-primary-include-tools header .nav-primary-course ul {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3; }
  .nav-primary-include-tools header .nav-primary-tools {
    width: 23.72881%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    *float: left; }
    .nav-primary-include-tools header .nav-primary-tools ul {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      column-count: 1; }

  /* END BREAKPOINT LARGE */ }
/* ----------------------------------------------------------

PRINT

---------------------------------------------------------- */
.icon-print {
  color: #2C76C6;
  float: right;
  border: 0;
  background: none;
  font-size: 1.1em;
  padding: 0;
  font-family: "Lato", "Open Sans", "Bitter", sans-serif; }
  .icon-print:hover {
    cursor: pointer;
    border-bottom: 2px solid #3DCBFF; }

.icon-print:before {
  content: '\E8AD';
  font-family: 'Material Icons';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  top: 0.25em;
  left: 0.25em;
  padding: 0 0.5em 0.5em 0.5em;
  display: inline-block;
  font-size: 1.6em;
  color: #2C76C6;
  z-index: 9; }

@media print {
  .print-only {
    display: block; }

  body {
    color: #000;
    background: #fff; }

  html, body, article, .max-width, #main, .content {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0; }

  img {
    max-width: 100% !important;
    page-break-inside: avoid; }

  .do-not-print,
  .no-touch .slide-fullscreen,
  .slide-fullscreen,
  .icon-print,
  nav,
  nav#nav-secondary,
  #course-nav-icon,
  a#btn-next,
  .assessment,
  #selfCheck,
  footer,
  .element-invisible,
  h1:last-of-type {
    display: none; } }