body {
  font-family: 'Source Sans Pro', sans-serif; }

a {
  text-decoration: none; }

.part-heading {
  font-size: 48px;
  line-height: 52px;
  padding: 40px 20px 0 20px;
  text-transform: uppercase; }
  .part-heading.dark-text {
    color: #000; }
  .part-heading.light-text {
    color: #fff; }
  .part-heading .font-light {
    font-size: 46px;
    font-weight: 300; }
  .part-heading .font-heavy {
    font-weight: 600; }

.page-heading {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase; }

.body-heading {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 16px;
  margin-bottom: 4px;
  text-transform: uppercase; }

.body-heading-big {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 8px; }

.body-copy {
  font-family: 'Lora', serif;
  font-size: 13px;
  line-height: 19.5px;
  margin-bottom: 16px; }
  .body-copy p {
    text-indent: 20px; }
    .body-copy p:nth-of-type(1) {
      text-indent: 0; }
  .body-copy blockquote {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    margin: 8px 0 8px 24px; }

.font-hand {
  font-family: 'Shadows Into Light', serif;
  font-size: 19px;
  line-height: 24px; }

.font-times {
  font-family: 'Times', serif;
  font-size: 13px;
  line-height: 21px; }
  .font-times h1,
  .font-times h2 {
    font-weight: 700;
    text-transform: uppercase; }
  .font-times h1 {
    font-size: 21px; }
  .font-times h2 {
    font-size: 15px; }

.meta-copy {
  line-height: 18px;
  margin-bottom: 18px; }

.note-heading {
  color: #00b8f0;
  font-weight: 700;
  text-transform: uppercase; }

.note-copy {
  font-family: 'Lora', serif;
  font-size: 12px;
  line-height: 15px; }
  .note-copy p {
    text-indent: 20px; }
    .note-copy p:nth-of-type(1) {
      text-indent: 0; }

.instructions {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px; }

strong {
  font-weight: 600; }

em {
  font-style: italic; }

.uppercase {
  text-transform: uppercase; }

.list {
  margin-top: 8px;
  padding-left: 30px; }
  .list li {
    list-style-type: disc;
    margin-bottom: 8px; }

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Source Sans Pro', sans-serif;
  overflow: visible;
  padding: 0; }

.btn-primary {
  background: -webkit-linear-gradient(top, #6ccff6 0%, #ffffff 100%);
  background: linear-gradient(to bottom, #6ccff6 0%, #ffffff 100%);
  border: 1px solid #00b8f0;
  border-radius: 8px;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.125), inset 2px 2px 6px -2px white, inset -1px -1px 6px -2px rgba(0, 184, 240, 0.5);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 8px 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0, 184, 240, 0.25); }

.radio-button {
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px 0;
  padding: 8px 6px 8px 24px;
  position: relative;
  text-transform: uppercase; }
  .radio-button.checked .filled {
    opacity: 1;
    -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transition: all 100ms ease-out;
            transition: all 100ms ease-out; }
  .radio-button .filled {
    background-color: #00b8f0;
    border-radius: 100%;
    bottom: 0;
    height: 12px;
    left: 4px;
    margin: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
            transform: scale(0.75, 0.75);
    -webkit-transition: all 100ms ease-out;
            transition: all 100ms ease-out;
    width: 12px;
    z-index: 1; }
  .radio-button .empty {
    background-color: #ddf2fd;
    border: 1px solid #00b8f0;
    border-radius: 100%;
    bottom: 0;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.125), inset 3px 3px 6px -3px white, inset -2px -2px 6px -2px rgba(0, 184, 240, 0.5);
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 20px;
    z-index: 0; }
  .radio-button .text {
    margin-top: 1px; }

.select {
  background-color: #ddf2fd;
  border: 1px solid #00b8f0;
  height: 48px;
  padding: 8px;
  width: 200px; }

#app-header {
  height: 38px;
  position: relative;
  z-index: 2; }
  #app-header .logo-home-link {
    display: block;
    padding-top: 6px;
    width: 214px; }
    #app-header .logo-home-link .logo {
      height: 30px;
      width: 100px; }
  #app-header .main-nav {
    font-family: 'Lora', serif;
    left: 242px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 10px; }
  #app-header .tab {
    float: left;
    padding: 0 4px; }
    #app-header .tab.active a, #app-header .tab.active-you a {
      border-radius: 6px 6px 6px 6px;
      height: 38px;
      margin-bottom: -10px;
      -webkit-transition: all 250ms ease-out;
              transition: all 250ms ease-out; }
      #app-header .tab.active a.tab-text, #app-header .tab.active-you a.tab-text {
        -webkit-transition: all 250ms ease-out;
                transition: all 250ms ease-out; }
    #app-header .tab a {
      background-color: #fff;
      border-radius: 6px 6px 0 0;
      box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.4);
      color: #fff;
      display: block;
      height: 28px;
      font-size: 20px;
      font-weight: 700;
      line-height: 24px;
      overflow: hidden;
      text-align: center;
      width: 28px;
      -webkit-transition: all 250ms ease-out;
              transition: all 250ms ease-out; }
      #app-header .tab a.tab-text {
        font-size: 13px;
        padding: 2px 6px 0 6px;
        width: auto;
        -webkit-transition: all 250ms ease-out;
                transition: all 250ms ease-out; }
      #app-header .tab a.tab-c, #app-header .tab a.tab-p {
        color: #000; }
      #app-header .tab a.tab-part-1 {
        background-color: #769b3e; }
      #app-header .tab a.tab-part-2 {
        background-color: #6e78a7; }
      #app-header .tab a.tab-part-3 {
        background-color: #9280a7; }
      #app-header .tab a.tab-part-4 {
        background-color: #717245; }
      #app-header .tab a.tab-part-5 {
        background-color: #9a226f; }
      #app-header .tab a.tab-part-6 {
        background-color: #a5732a; }
      #app-header .tab a.tab-part-7 {
        background-color: #499a89; }
      #app-header .tab a.tab-part-8 {
        background-color: #781b7b; }
      #app-header .tab a.tab-part-9 {
        background-color: #377b9b; }
      #app-header .tab a.tab-part-10 {
        background-color: #75639b; }
      #app-header .tab a.tab-part-11 {
        background-color: #993733; }
      #app-header .tab a.tab-search {
        background-color: #da8227;
        font-family: 'Open Sana', sans-serif; }
      #app-header .tab a.tab-glossary {
        background-color: #ed1c24;
        font-family: 'Open Sana', sans-serif; }
      #app-header .tab a.tab-you {
        background-color: #2e3092;
        font-size: 20px;
        max-width: 100px;
        text-overflow: ellipsis; }
    #app-header .tab.tab-you-wrapper {
      float: right;
      margin-right: 33px; }
  #app-header .main-nav-hover {
    background-color: #555;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.25);
    color: #fff;
    height: 38px;
    left: 242px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 38px;
    -webkit-transition: all 250ms ease-out;
            transition: all 250ms ease-out; }
    #app-header .main-nav-hover.open {
      opacity: 1; }
    #app-header .main-nav-hover.tab-part-1 {
      background-color: #769b3e; }
      #app-header .main-nav-hover.tab-part-1 .full-description {
        -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0); }
    #app-header .main-nav-hover.tab-part-2 {
      background-color: #6e78a7; }
      #app-header .main-nav-hover.tab-part-2 .full-description {
        -webkit-transform: translate3d(46px, 0, 0);
                transform: translate3d(46px, 0, 0); }
    #app-header .main-nav-hover.tab-part-3 {
      background-color: #9280a7; }
      #app-header .main-nav-hover.tab-part-3 .full-description {
        -webkit-transform: translate3d(82px, 0, 0);
                transform: translate3d(82px, 0, 0); }
    #app-header .main-nav-hover.tab-part-4 {
      background-color: #717245; }
      #app-header .main-nav-hover.tab-part-4 .full-description {
        -webkit-transform: translate3d(118px, 0, 0);
                transform: translate3d(118px, 0, 0); }
    #app-header .main-nav-hover.tab-part-5 {
      background-color: #9a226f; }
      #app-header .main-nav-hover.tab-part-5 .full-description {
        -webkit-transform: translate3d(154px, 0, 0);
                transform: translate3d(154px, 0, 0); }
    #app-header .main-nav-hover.tab-part-6 {
      background-color: #a5732a; }
      #app-header .main-nav-hover.tab-part-6 .full-description {
        -webkit-transform: translate3d(190px, 0, 0);
                transform: translate3d(190px, 0, 0); }
    #app-header .main-nav-hover.tab-part-7 {
      background-color: #499a89; }
      #app-header .main-nav-hover.tab-part-7 .full-description {
        -webkit-transform: translate3d(226px, 0, 0);
                transform: translate3d(226px, 0, 0); }
    #app-header .main-nav-hover.tab-part-8 {
      background-color: #781b7b; }
      #app-header .main-nav-hover.tab-part-8 .full-description {
        -webkit-transform: translate3d(262px, 0, 0);
                transform: translate3d(262px, 0, 0); }
    #app-header .main-nav-hover.tab-part-9 {
      background-color: #377b9b; }
      #app-header .main-nav-hover.tab-part-9 .full-description {
        -webkit-transform: translate3d(298px, 0, 0);
                transform: translate3d(298px, 0, 0); }
    #app-header .main-nav-hover.tab-part-10 {
      background-color: #75639b; }
      #app-header .main-nav-hover.tab-part-10 .full-description {
        -webkit-transform: translate3d(334px, 0, 0);
                transform: translate3d(334px, 0, 0); }
    #app-header .main-nav-hover.tab-part-11 {
      background-color: #993733; }
      #app-header .main-nav-hover.tab-part-11 .full-description {
        -webkit-transform: translate3d(370px, 0, 0);
                transform: translate3d(370px, 0, 0); }
    #app-header .main-nav-hover.tab-c {
      background-color: #555; }
      #app-header .main-nav-hover.tab-c .full-description {
        -webkit-transform: translate3d(406px, 0, 0);
                transform: translate3d(406px, 0, 0); }
    #app-header .main-nav-hover.tab-p {
      background-color: #555; }
      #app-header .main-nav-hover.tab-p .full-description {
        -webkit-transform: translate3d(442px, 0, 0);
                transform: translate3d(442px, 0, 0); }
    #app-header .main-nav-hover.tab-search {
      background-color: #da8227; }
      #app-header .main-nav-hover.tab-search .full-description {
        -webkit-transform: translate3d(478px, 0, 0);
                transform: translate3d(478px, 0, 0); }
    #app-header .main-nav-hover.tab-glossary {
      background-color: #ed1c24; }
      #app-header .main-nav-hover.tab-glossary .full-description {
        -webkit-transform: translate3d(550px, 0, 0);
                transform: translate3d(550px, 0, 0); }
    #app-header .main-nav-hover.tab-you {
      background-color: #2e3092; }
      #app-header .main-nav-hover.tab-you .full-description {
        -webkit-transform: translate3d(636px, 0, 0);
                transform: translate3d(636px, 0, 0); }
  #app-header .full-description {
    position: absolute;
    top: 8px;
    -webkit-transition: all 250ms ease-out;
            transition: all 250ms ease-out; }

.nav-left {
  background-color: #fff;
  border-top: 4px solid #d0d0d0;
  bottom: 0;
  box-shadow: inset -16px 0 16px -16px rgba(0, 0, 0, 0.25);
  font-size: 12px;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  width: 242px; }

.nav-heading {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 125%;
  padding: 6px 10px 7px 10px; }
  .nav-heading.big-text {
    font-size: 22px;
    font-weight: 400;
    line-height: 90%;
    padding-top: 12px;
    text-transform: uppercase; }

.sub-heading {
  background-color: #d8d8d8;
  padding: 6px 10px 7px 10px; }

.nav {
  background-color: #fff;
  box-shadow: inset -16px 0 16px -16px rgba(0, 0, 0, 0.25);
  min-height: 100%; }
  .nav li a {
    color: #444;
    cursor: pointer;
    display: block;
    line-height: 15px;
    font-weight: 700;
    padding: 5px 16px 5px 10px; }

.sub-nav {
  display: none; }
  .sub-nav li a {
    font-weight: 400;
    padding: 4px 16px 4px 24px; }

.learn-try-nav {
  background-color: #888888;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 32px; }
  .learn-try-nav .rotated-nav-header {
    color: rgba(0, 0, 0, 0.75);
    font-weight: bold;
    font-size: 14px;
    margin: 60px 0px auto 4px;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
    .learn-try-nav .rotated-nav-header.learn {
      margin-bottom: 30px; }
    .learn-try-nav .rotated-nav-header.try {
      margin-bottom: 16px; }
    .learn-try-nav .rotated-nav-header .it {
      color: #fff; }
  .learn-try-nav .tab {
    border-radius: 4px 0 0 4px;
    color: black;
    display: block;
    height: 32px;
    line-height: 32px;
    margin: 0 0 4px 4px;
    text-align: center;
    width: 28px;
    -webkit-transition: all 300ms;
            transition: all 300ms; }
    .learn-try-nav .tab:hover {
      background-color: #fff !important;
      -webkit-transition: all 300ms;
              transition: all 300ms; }
    .learn-try-nav .tab.active {
      background-color: #fff !important; }

.what-will-you-learn {
  padding: 32px 160px 32px 32px; }
  .what-will-you-learn .body-copy {
    margin-bottom: 24px; }

.accordion-list .btn-expander {
  padding: 0 10px 0 2px; }
  .accordion-list .btn-expander.open .icon-triangle-container {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: all 300ms;
            transition: all 300ms; }
.accordion-list .icon-triangle-container {
  display: inline-block;
  position: relative;
  top: 2px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 300ms;
          transition: all 300ms; }
.accordion-list .icon-triangle {
  fill: #000;
  height: 32px;
  left: 9px;
  position: absolute;
  top: 9px;
  width: 16px;
  z-index: 1; }
.accordion-list .icon-triangle-shadow {
  background-image: url(../assets/img/triangle-shadow.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 34px 50px;
  height: 50px;
  position: relative;
  width: 34px;
  z-index: 0; }
.accordion-list .text {
  font-size: 16px;
  font-weight: 600;
  position: relative;
  top: -16px; }
.accordion-list .description {
  display: none;
  font-family: 'Lora', serif;
  font-size: 13px;
  overflow: hidden;
  padding-left: 36px; }
  .accordion-list .description p {
    margin-bottom: 8px; }

.interactive-paper section {
  margin-top: 12px; }
.interactive-paper .list {
  margin-top: 0; }
.interactive-paper li {
  margin-bottom: 0; }
.interactive-paper .left {
  position: absolute;
  top: 100px;
  width: 158px; }
.interactive-paper .radio-label {
  display: block;
  margin: 20px 0; }
.interactive-paper .right {
  background-color: #f0f0f0;
  bottom: 0;
  padding: 40px 50px 40px 40px;
  position: absolute;
  right: 0;
  top: 100px;
  width: 530px; }
.interactive-paper .highlight-area {
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1; }
.interactive-paper .highlight {
  background-color: rgba(0, 184, 240, 0.25);
  opacity: 0;
  -webkit-transition: all 300ms ease-out;
          transition: all 300ms ease-out;
  position: absolute; }
  .interactive-paper .highlight.showing {
    opacity: 1;
    -webkit-transition: all 300ms ease-out;
            transition: all 300ms ease-out; }
.interactive-paper .body-copy-written {
  margin-bottom: 0;
  position: relative;
  z-index: 1; }
.interactive-paper .popup {
  opacity: 0;
  -webkit-transform: scale(0.95, 0.95);
      -ms-transform: scale(0.95, 0.95);
          transform: scale(0.95, 0.95);
  -webkit-transition: all 300ms ease-out;
          transition: all 300ms ease-out;
  position: absolute; }
  .interactive-paper .popup.showing {
    opacity: 1;
    -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transition: all 300ms ease-out;
            transition: all 300ms ease-out; }

.popup {
  background-color: #fff;
  border: 1px solid #000;
  box-shadow: 3px 3px 12px 0 rgba(0, 0, 0, 0.333);
  font-size: 14px;
  padding: 16px;
  position: relative;
  z-index: 1; }
  .popup .button-close-popup {
    background-color: #000;
    border-radius: 100%;
    display: block;
    height: 20px;
    margin-bottom: 16px;
    padding: 4px;
    position: relative;
    width: 20px; }
  .popup .icon-x {
    fill: #fff;
    height: 12px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 12px; }
  .popup .body-copy {
    margin-bottom: 0; }
  .popup ul {
    padding-left: 16px; }
    .popup ul li {
      margin-bottom: 4px; }

body {
  background-color: #cbdde7; }

img {
  display: block; }

.cf:before,
.cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

.config-prompt-overlay {
  background-color: rgba(203, 221, 231, 0.875);
  bottom: 0;
  left: 0;
  min-height: 672px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1; }
  .config-prompt-overlay .message-box {
    background-color: rgba(255, 255, 255, 0.9);
    background-image: url("../../home/assets/img/colorful-swirls-crop-blur.jpg");
    background-size: cover;
    box-shadow: 4px 4px 32px 0 rgba(0, 0, 0, 0.25), 1px 1px 8px 0 rgba(0, 0, 0, 0.333);
    height: 210px;
    left: 0;
    margin: auto;
    padding: 24px;
    position: absolute;
    right: 0;
    top: 180px;
    width: 400px; }
  .config-prompt-overlay .input-name {
    border: 1px solid #00b8f0;
    border-radius: 8px;
    box-shadow: inset 1px 1px 6px -2px rgba(0, 184, 240, 0.5), -1px -1px 4px 0 rgba(0, 0, 0, 0.125), 2px 2px 4px 0 rgba(255, 255, 255, 0.5);
    height: 48px;
    font-size: 18px;
    padding: 0 12px;
    width: 100%; }
  .config-prompt-overlay .btn-primary {
    bottom: 24px;
    position: absolute;
    right: 24px; }

#app-wrapper {
  height: 672px;
  left: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 1024px;
  z-index: 0; }

/*
 * A 'part-view' is everything under the top nav tabs.
 * The left nav and main content make up a 'part-view'
 */
.part-view {
  bottom: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 38px;
  -webkit-transition: all 550ms;
          transition: all 550ms;
  z-index: 1; }
  .part-view.ng-enter .nav-left {
    opacity: 0; }
  .part-view.ng-enter .page-view {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); }
  .part-view.ng-enter-active .nav-left {
    opacity: 1; }
  .part-view.ng-enter-active .page-view {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  .part-view.ng-leave {
    z-index: 0; }
    .part-view.ng-leave .nav-left {
      opacity: 1; }
    .part-view.ng-leave .page-view {
      z-index: 0; }
  .part-view.ng-leave-active {
    z-index: 0; }
    .part-view.ng-leave-active .nav-left {
      opacity: 1; }
    .part-view.ng-leave-active .page-view {
      z-index: 0; }

/*
 * A 'page-view' is the main content area.
 */
.page-view {
  background-color: #fff;
  border-top: 4px solid #d0d0d0;
  bottom: 0;
  position: absolute;
  left: 242px;
  right: 0;
  top: 0;
  -webkit-transition: all 500ms;
          transition: all 500ms;
  z-index: 1; }
  .page-view.ng-enter {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); }
  .page-view.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  .page-view.ng-leave {
    z-index: 0; }
  .page-view.ng-leave-active {
    z-index: 0; }
  .page-view .page-view-inner {
    height: 100%;
    width: 100%; }
  .page-view .part-intro {
    background-image: url("../../shared/assets/img/intro-sprite.jpg");
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: 782px auto; }

/*
 * A 'learn-try-view' is the main content area with vertical tabs on the left.
 */
.learn-try-view {
  background-color: #fff;
  bottom: 0;
  left: 32px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: all 200ms;
          transition: all 200ms;
  z-index: 1; }
  .learn-try-view.ng-enter {
    opacity: 0; }
  .learn-try-view.ng-enter-active {
    opacity: 1; }
  .learn-try-view.ng-leave {
    opacity: 1;
    z-index: 0; }
  .learn-try-view.ng-leave-active {
    opacity: 1;
    z-index: 0; }

/*# sourceMappingURL=style.css.map */