@charset "UTF-8";
.primary-font-normal, h5,
.h5, p,
body, .ghost-text, input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder, textarea ::-webkit-input-placeholder, input[type="text"],
input[type="email"],
input[type="number"] {
  font-family: proxima_nova, Helvetica, Arial, sans-serif;
  font-weight: 400; }
.primary-font-normal, h5,
.h5, p,
body, .ghost-text, input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="number"]::-moz-placeholder, textarea ::-moz-placeholder, input[type="text"],
input[type="email"],
input[type="number"] {
  font-family: proxima_nova, Helvetica, Arial, sans-serif;
  font-weight: 400; }
.primary-font-normal, h5,
.h5, p,
body, .ghost-text, input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder, textarea :-ms-input-placeholder, input[type="text"],
input[type="email"],
input[type="number"] {
  font-family: proxima_nova, Helvetica, Arial, sans-serif;
  font-weight: 400; }
.primary-font-normal, h5,
.h5, p,
body, .ghost-text, input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder, textarea ::placeholder, input[type="text"],
input[type="email"],
input[type="number"] {
  font-family: proxima_nova, Helvetica, Arial, sans-serif;
  font-weight: 400; }

.primary-font-semibold, h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h6,
.h6, .small-text, .btn {
  font-family: proxima_nova, Helvetica, Arial, sans-serif;
  font-weight: 600; }

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h6,
.h6 {
  color: #222627; }

h1,
.h1 {
  font-size: 30px; }

h2,
.h2 {
  font-size: 24px; }

h3,
.h3 {
  font-size: 20px; }

h4,
.h4 {
  font-size: 18px; }

h5,
.h5 {
  color: #222627;
  font-size: 18px; }

h6,
.h6 {
  font-size: 16px; }

p,
body {
  color: #505355;
  font-size: 16px; }

div.error,
p.error,
span.error {
  color: #c92711; }

.small-text {
  color: #767676;
  font-size: 14px; }

.ghost-text {
  color: #c5c5c5;
  font-size: 16px; }

.font-fix, .label {
  display: inline-block; }
  .font-fix:after, .label:after {
    font-family: helvetica;
    content: "​"; }

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder, textarea ::-webkit-input-placeholder {
  font-size: 16px;
  color: #767676; }

input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="number"]::-moz-placeholder, textarea ::-moz-placeholder {
  font-size: 16px;
  color: #767676; }

input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder, textarea :-ms-input-placeholder {
  font-size: 16px;
  color: #767676; }

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder, textarea ::placeholder {
  font-size: 16px;
  color: #767676; }

input[type="text"],
input[type="email"],
input[type="number"] {
  padding: 0 15px;
  margin: 10px;
  border-radius: 3px;
  border: 1px solid #c5c5c5;
  color: #505355;
  font-size: 16px; }

label {
  font-size: 16px; }

.btn {
  background-color: #f3f3f3;
  border: 1px solid #505355;
  border-radius: 3px;
  color: #505355;
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  outline: none !important;
  padding: 0 15px; }
  .btn:hover, .btn:focus {
    background-color: #dddddd;
    border-color: #dddddd; }
  .btn.btn-primary {
    border-color: transparent;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    background-color: #ea7300; }
    .btn.btn-primary:hover, .btn.btn-primary:focus {
      border-color: transparent;
      background-color: #c45500; }
  .btn.btn-small {
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    padding: 0 10px; }
  .btn.btn-secondary {
    color: #505355;
    height: 35px;
    line-height: 35px;
    background-color: #f3f3f3;
    border-color: #505355; }
    .btn.btn-secondary:hover, .btn.btn-secondary:focus {
      background-color: #dddddd;
      border-color: #dddddd; }
    .btn.btn-secondary.btn-small {
      height: 22px;
      line-height: 22px;
      border-color: #767676; }
    .btn.btn-secondary.disabled {
      border: 1px solid transparent; }
  .btn.selected {
    color: #ffffff;
    border-color: transparent; }
  .btn.disabled {
    border-color: #dddddd;
    background-color: #dddddd;
    color: #ffffff; }
    .btn.disabled:hover, .btn.disabled:focus, .btn.disabled:active {
      background-color: #dddddd;
      border-color: #dddddd; }
  .btn.btn-tag {
    background-color: #767676;
    color: #f3f3f3; }

a {
  color: #247ea8; }
  a:hover, a:active, a:focus {
    text-decoration: none; }
  a.gray-link {
    color: #505355; }
    a.gray-link:hover, a.gray-link:focus {
      color: #222627; }

.progress-thin {
  height: 6px;
  border-radius: 3px;
  background-color: #ffffff;
  border: 1px solid #505355;
  overflow: hidden; }

.progress-bar-thin {
  height: 100%;
  float: left; }

.progress-bar-warning {
  background-color: #ea7300; }
  .progress-bar-warning.progress-bar-striped {
    background-image: url("/images/progress_bar_warning_bg-5fd24a0891.png"); }

.progress-bar-success {
  background-color: #007953; }

.modal-header {
  border-bottom: 0;
  padding: 30px 40px 10px; }
  .modal-header .close {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-top: -12px;
    margin-right: -16px; }

.modal-body {
  padding: 0 40px; }

.modal-footer {
  border-top: 0;
  padding: 20px 40px 40px;
  text-align: left;
  clear: both; }
  .modal-footer .btn {
    min-width: 100px; }

.nav-underline {
  padding: 0;
  border-bottom: 1px solid #c5c5c5;
  font-size: 18px; }
  .nav-underline > li {
    display: inline-block;
    cursor: pointer;
    margin: 0 20px -1px 0;
    border-bottom: 5px solid transparent;
    color: #767676; }
    .nav-underline > li:hover {
      text-decoration: none; }
    .nav-underline > li.selected {
      border-bottom-color: #505355; }
    .nav-underline > li:hover, .nav-underline > li.selected {
      color: #505355; }
    .nav-underline > li.disabled {
      cursor: auto; }
      .nav-underline > li.disabled:hover {
        color: #767676; }

.label {
  padding: 0.3em 0.8em; }

.label-default {
  background-color: #c5c5c5; }

.label-normal-text {
  font-size: 100%;
  background-color: #f3f3f3;
  color: #222627;
  font-weight: normal; }

.tooltip-inner {
  background-color: #222627; }

.tooltip.top {
  margin-top: -1px; }
  .tooltip.top .tooltip-arrow {
    border-top-color: #222627; }

pre {
  display: block;
  padding: 0;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  word-break: inherit;
  word-wrap: inherit;
  color: inherit;
  background-color: inherit;
  border: none;
  border-radius: 0;
  font-family: inherit;
  white-space: pre-wrap; }

/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
/*
These "retina group" variables are mappings for the naming and pairing of normal and retina sprites.

The list formatted variables are intended for mixins like `retina-sprite` and `retina-sprites`.
*/
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}
*/
/*
The `retina-sprite` mixin sets up rules and a media query for a sprite/retina sprite.
  It should be used with a "retina group" variable.

The media query is from CSS Tricks: https://css-tricks.com/snippets/css/retina-display-media-query/

$icon-home-group: ('icon-home', $icon-home, $icon-home-2x, );

.icon-home {
  @include retina-sprite($icon-home-group);
}
*/
/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
/*
The `retina-sprites` mixin generates a CSS rule and media query for retina groups
  This yields the same output as CSS retina template but can be overridden in SCSS

@include retina-sprites($retina-groups);
*/
.icon-cddf {
  background-image: url("../images/sprite-3f1c9f53e8.png"); }

@media (-webkit-min-device-pixel-ratio: 2) {
  .icon-cddf {
    background-size: 901px 822px;
    background-image: url("../images/sprite-retina-3d40704466.png"); } }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-cddf {
    background-size: 901px 822px;
    background-image: url("../images/sprite-retina-3d40704466.png"); } }

#playVideoDialog .modal-dialog {
  width: 100%;
  max-width: 960px;
  height: auto;
  max-height: 540px;
  overflow: visible;
  position: relative;
  margin-top: 10%; }

#playVideoDialog .modal-content {
  height: auto;
  max-height: 540px;
  overflow: visible; }

#playVideoDialog .modal-header {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  top: -50px;
  left: 0;
  text-align: right; }
  #playVideoDialog .modal-header .close {
    margin: 0; }
  #playVideoDialog .modal-header span {
    font-size: 50px;
    line-height: 50px;
    color: #f3f3f3; }

#playVideoDialog .modal-body {
  padding: 0;
  height: auto;
  max-height: 540px; }

body {
  margin-bottom: 84px; }

#accessWallContainer {
  text-align: center;
  margin-top: 52px; }
  #accessWallContainer h1 {
    padding: 0;
    margin: 0;
    font-size: 36px;
    font-weight: normal;
    color: #222627; }
  #accessWallContainer .sub-h1 {
    font-weight: normal;
    font-size: 20px;
    color: #505355;
    padding: 0;
    margin: 0; }
  #accessWallContainer h2 {
    margin: 0;
    padding: 0;
    font-weight: 300;
    font-size: 30px;
    color: #222627; }
  #accessWallContainer .sub-h2 {
    font-weight: normal;
    color: #505355;
    font-size: 20px; }
  #accessWallContainer h3 {
    padding: 0;
    margin: 0;
    font-weight: 300;
    font-size: 24px;
    color: #222627; }

#accessCodeForm {
  margin-top: 44px;
  display: inline-block; }
  #accessCodeForm input[type="text"] {
    height: 35px;
    padding: 0 10px;
    margin: 0 10px 0 0;
    color: #222627; }
  #accessCodeForm #accessCodeError {
    color: #c92711;
    text-align: left;
    display: none; }
  #accessCodeForm #accessCodeIssues {
    margin: 10px 0 0 0;
    padding: 0;
    font-size: 16px;
    text-align: left;
    line-height: 18px;
    color: #505355; }
  #accessCodeForm.error input[type="text"] {
    border: 1px #c92711 solid; }
  #accessCodeForm.error #accessCodeError {
    display: block; }

#video-container {
  margin-top: 54px; }
  #video-container .btn {
    margin-left: 10px; }
  #video-container .happy-video {
    background-image: url("/images/img_video_still-b4997c2653.png");
    margin-top: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 537px;
    min-height: 537px; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      #video-container .happy-video {
        background-image: url("/images/img_video_still@2x-32c1247a32.png");
        background-size: 954px 537px; } }
    #video-container .happy-video i.play-video {
      background-position: -128px -707px;
      width: 108px;
      height: 108px;
      position: absolute;
      left: calc(50% - 54px);
      top: calc(50% - 54px); }

#collaborate-container {
  margin: 48px 0 80px 0; }
  #collaborate-container .columns {
    margin-top: 38px; }
    #collaborate-container .columns:before, #collaborate-container .columns:after {
      content: " ";
      display: table; }
    #collaborate-container .columns:after {
      clear: both; }
    #collaborate-container .columns .column-container {
      width: 50%;
      float: left;
      text-align: left; }
      #collaborate-container .columns .column-container .column .image {
        width: 128px;
        height: 115px;
        float: left;
        background-image: url("../images/sprite-3f1c9f53e8.png"); }
      #collaborate-container .columns .column-container .column .column-content p {
        font-weight: normal;
        color: #505355;
        line-height: 21px;
        font-size: 16px; }
      #collaborate-container .columns .column-container .column.teacher .column-content {
        margin-left: 142px;
        padding-right: 20px; }
      #collaborate-container .columns .column-container .column.teacher .image {
        background-position: -708px -536px;
        width: 128px;
        height: 115px; }
      #collaborate-container .columns .column-container .column.school .column-content {
        margin-left: 150px; }
      #collaborate-container .columns .column-container .column.school .image {
        background-position: 0px -707px;
        width: 128px;
        height: 115px; }