/*
    --- VARIABLES & MIXINS --------------
*/
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,700,600,500,300);
@-webkit-keyframes pulse-fill {
  0% {
    background-color: #75ef80; }
  33% {
    background-color: #adf54f; }
  67% {
    background-color: #3de4b3; }
  100% {
    background-color: #75ef80; } }
@-webkit-keyframes pulse-stroke {
  0% {
    border-color: #75ef80; }
  33% {
    border-color: #adf54f; }
  67% {
    border-color: #3de4b3; }
  100% {
    border-color: #75ef80; } }
/*
    --- GENERAL -------------------------

    http://fontello.com/
*/
* {
  margin: 0;
  padding: 0;
  color: black; }

body {
  position: absolute;
  width: 100%;
  height: 100%; }

a {
  position: relative;
  text-decoration: none; }
  a.exploratory:hover, a.exploratory.active, a.exploratory.on {
    color: #adf54f; }
  a.illustrative:hover, a.illustrative.active, a.illustrative.on {
    color: #75ef80; }
  a.inspirational:hover, a.inspirational.active, a.inspirational.on {
    color: #3de4b3; }
  a.hide {
    color: black;
    opacity: 0.2; }
  a.hovered {
    color: black; }

strong {
  color: black;
  font-weight: 600; }

.quiteBig strong {
  font-weight: 500; }

/*
    --- LOADING -------------------------
*/
#l0__loading {
  position: fixed;
  margin-left: 50%;
  left: -16px;
  top: 46%;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  border: .2em solid #eee;
  border-top-color: grey;
  animation: spin 1300ms infinite linear; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/*
    --- BACKGROUND ----------------------
*/
#l1__background {
  opacity: 0;
  z-index: 10;
  position: fixed;
  overflow: hidden;
  background-color: white;
  -webkit-transition: background-color 250ms ease-in;
  -moz-transition: background-color 250ms ease-in;
  -o-transition: background-color 250ms ease-in;
  -ms-transition: background-color 250ms ease-in;
  transition: background-color 250ms ease-in; }
  #l1__background[class^="imgOnly_"] {
    -webkit-transition: background-color 1250ms ease-in;
    -moz-transition: background-color 1250ms ease-in;
    -o-transition: background-color 1250ms ease-in;
    -ms-transition: background-color 1250ms ease-in;
    transition: background-color 1250ms ease-in; }
  #l1__background.overlay_exploratory {
    background-color: #adf54f; }
  #l1__background.overlay_illustrative {
    background-color: #75ef80; }
  #l1__background.overlay_inspirational {
    background-color: #3de4b3; }
  #l1__background.imgOnly_exploratory {
    background-color: #adf54f; }
  #l1__background.imgOnly_illustrative {
    background-color: #75ef80; }
  #l1__background.imgOnly_inspirational {
    background-color: #3de4b3; }
  #l1__background div.bg-slot {
    -webkit-transition: background-color 1250ms ease-in;
    -moz-transition: background-color 1250ms ease-in;
    -o-transition: background-color 1250ms ease-in;
    -ms-transition: background-color 1250ms ease-in;
    transition: background-color 1250ms ease-in;
    position: relative;
    overflow: hidden;
    display: inline-block;
    background-repeat: no-repeat;
    border: 1px solid;
    background-color: transparent;
    border-color: transparent; }
    #l1__background div.bg-slot img {
      -webkit-transition: opacity 250ms ease-in;
      -moz-transition: opacity 250ms ease-in;
      -o-transition: opacity 250ms ease-in;
      -ms-transition: opacity 250ms ease-in;
      transition: opacity 250ms ease-in;
      width: 100%;
      height: 100%;
      opacity: 0.05; }
    #l1__background div.bg-slot.used img {
      cursor: pointer; }
    #l1__background div.bg-slot.hide img {
      opacity: 0; }
    #l1__background div.bg-slot.show img {
      opacity: 0.05; }
    #l1__background div.bg-slot.active img {
      opacity: 0.5; }
    #l1__background div.bg-slot.hover img {
      opacity: 1; }
    #l1__background div.bg-slot.bordered.bgImg_exploratory, #l1__background div.bg-slot.hover.bgImg_exploratory {
      border-color: #adf54f; }
    #l1__background div.bg-slot.bordered.bgImg_illustrative, #l1__background div.bg-slot.hover.bgImg_illustrative {
      border-color: #75ef80; }
    #l1__background div.bg-slot.bordered.bgImg_inspirational, #l1__background div.bg-slot.hover.bgImg_inspirational {
      border-color: #3de4b3; }
    #l1__background div.bg-slot.bged.bgImg_exploratory {
      background-color: rgba(173, 245, 79, 0.2); }
    #l1__background div.bg-slot.bged.bgImg_illustrative {
      background-color: rgba(117, 239, 128, 0.2); }
    #l1__background div.bg-slot.bged.bgImg_inspirational {
      background-color: rgba(61, 228, 179, 0.2); }

/*
    --- CONTENT -------------------------
  
    checkout flex css positioning
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#l2__content {
  z-index: 20;
  position: relative;
  height: 100%;
  display: flex;
  opacity: 0;
  /*flex-flow: row nowrap;*/ }
  #l2__content .smallMono {
    font-family: Inconsolata, monospace;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px; }
  #l2__content .big {
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 51px; }
  #l2__content .quiteBig {
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px; }
  #l2__content div#l2__left {
    z-index: 22;
    position: fixed;
    -webkit-transition: opacity 250ms ease-in;
    -moz-transition: opacity 250ms ease-in;
    -o-transition: opacity 250ms ease-in;
    -ms-transition: opacity 250ms ease-in;
    transition: opacity 250ms ease-in;
    opacity: 1;
    height: 103%;
    top: -2%;
    width: 43%;
    /*flex-grow: 1*/ }
    #l2__content div#l2__left table {
      text-align: left;
      height: 100%; }
    #l2__content div#l2__left .smallMono {
      margin-left: 45px;
      margin-top: 10px;
      margin-bottom: 10px; }
    #l2__content div#l2__left .big {
      margin-left: 45px; }
      #l2__content div#l2__left .big > a {
        cursor: pointer;
        padding-top: 5px; }
        #l2__content div#l2__left .big > a.on {
          cursor: w-resize; }
        #l2__content div#l2__left .big > a.down {
          cursor: n-resize; }
  #l2__content div#l2__center {
    z-index: 21;
    /*flex-grow: 1*/
    position: fixed;
    height: 100%;
    width: 100px;
    right: 50%; }
    #l2__content div#l2__center table {
      text-align: right;
      width: 100%;
      height: 100%; }
      #l2__content div#l2__center table div#indicator {
        font-family: Inconsolata, monospace;
        font-weight: normal;
        font-size: 18px;
        line-height: 28px;
        position: relative;
        width: 300px;
        height: 300px;
        margin-left: 55px;
        text-align: center;
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        transform-origin: center center 50%; }
  #l2__content div#l2__right {
    z-index: 22;
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    margin-left: 50%;
    width: 45%;
    /*flex-grow: 1*/ }
    #l2__content div#l2__right #l2__caselist, #l2__content div#l2__right [id^=caseList_] {
      padding-top: 5px; }
      #l2__content div#l2__right #l2__caselist a, #l2__content div#l2__right [id^=caseList_] a {
        display: inline-block;
        padding: 4px 0; }
    #l2__content div#l2__right div.contentSection {
      max-width: 90%; }
      #l2__content div#l2__right div.contentSection img {
        max-width: 100%; }
    #l2__content div#l2__right .contentSectionSeparator {
      width: 100%;
      margin: 40px 0;
      border-top: 1px solid rgba(0, 0, 0, 0.5); }
    #l2__content div#l2__right .contentSection > p, #l2__content div#l2__right .contentSection form > p {
      margin: 25px 0; }
    #l2__content div#l2__right .big, #l2__content div#l2__right .smallMono, #l2__content div#l2__right .quiteBig {
      width: 95%; }
    #l2__content div#l2__right .glossaryEntry {
      width: 90%;
      margin-bottom: 30px; }
      #l2__content div#l2__right .glossaryEntry .glossaryTerm {
        font-family: 'Work Sans', Arial, sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        margin-right: 15px; }
      #l2__content div#l2__right .glossaryEntry p {
        font-family: Inconsolata, monospace;
        font-weight: normal;
        font-size: 18px;
        line-height: 28px; }
    #l2__content div#l2__right input, #l2__content div#l2__right textarea {
      font-family: Inconsolata, monospace;
      font-weight: normal;
      font-size: 18px;
      line-height: 28px;
      background-color: rgba(220, 220, 220, 0.8);
      width: 90%;
      padding: 15px 5%;
      border: none; }
      #l2__content div#l2__right input ::-moz-focus-inner, #l2__content div#l2__right textarea ::-moz-focus-inner {
        border: 0;
        padding: 0; }
      #l2__content div#l2__right input.errorEmpty, #l2__content div#l2__right textarea.errorEmpty {
        border: 2px solid pink;
        margin: -2px -2px; }
      #l2__content div#l2__right input.empty, #l2__content div#l2__right textarea.empty {
        color: #bbb; }
      #l2__content div#l2__right input.error, #l2__content div#l2__right textarea.error {
        border: 2px solid red;
        margin: -2px -2px; }
    #l2__content div#l2__right textarea {
      height: 280px; }
    #l2__content div#l2__right #form-messages {
      font-family: Inconsolata, monospace;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px; }
      #l2__content div#l2__right #form-messages.errorMessage {
        color: red; }
      #l2__content div#l2__right #form-messages.successMessage {
        color: #75ef80; }
    #l2__content div#l2__right button#contrib_submit {
      font-family: 'Work Sans', Arial, sans-serif;
      font-weight: 600;
      font-size: 20px;
      line-height: 28px;
      margin-left: 25%;
      width: 50%;
      height: 50px;
      border: 1px solid;
      -webkit-animation: pulse-stroke 8000ms infinite normal;
      background-color: transparent;
      cursor: pointer; }
      #l2__content div#l2__right button#contrib_submit:hover:not(:disabled) {
        border: 1px solid white;
        -webkit-animation: pulse-fill 8000ms infinite normal; }
      #l2__content div#l2__right button#contrib_submit:disabled {
        cursor: not-allowed; }
    #l2__content div#l2__right #l2__credits {
      font-family: Inconsolata, monospace;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      padding-bottom: 30px; }
    #l2__content div#l2__right .toggleContainer {
      border: none;
      display: none; }
      #l2__content div#l2__right .toggleContainer div.contentSection {
        max-width: 90%; }
        #l2__content div#l2__right .toggleContainer div.contentSection img {
          max-width: 100%;
          margin-top: 15px;
          border: 1px solid black; }
        #l2__content div#l2__right .toggleContainer div.contentSection p.title {
          font-family: Inconsolata, monospace;
          font-weight: normal;
          font-size: 18px;
          line-height: 28px;
          color: black; }
          #l2__content div#l2__right .toggleContainer div.contentSection p.title:not(:first-child) {
            margin-top: 60px; }
        #l2__content div#l2__right .toggleContainer div.contentSection p.caption {
          font-family: Inconsolata, monospace;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          color: black;
          max-width: 550px;
          margin: 15px 0 35px 0; }
    #l2__content div#l2__right #content_exploratory div.contentSection p.quiteBig {
      color: #adf54f; }
    #l2__content div#l2__right #content_illustrative div.contentSection p.quiteBig {
      color: #75ef80; }
    #l2__content div#l2__right #content_inspirational div.contentSection p.quiteBig {
      color: #3de4b3; }

#l2__menu__header {
  font-family: Inconsolata, monospace;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  -webkit-transition: opacity 250ms ease-in;
  -moz-transition: opacity 250ms ease-in;
  -o-transition: opacity 250ms ease-in;
  -ms-transition: opacity 250ms ease-in;
  transition: opacity 250ms ease-in;
  z-index: 20;
  position: fixed;
  left: 15px;
  top: 24px;
  opacity: 1; }
  #l2__menu__header a#menu, #l2__menu__header a#header {
    cursor: pointer; }
  #l2__menu__header a.imagesOnlyToggle {
    margin-left: 10px; }
    #l2__menu__header a.imagesOnlyToggle:hover, #l2__menu__header a.imagesOnlyToggle.active {
      border-bottom: 2px solid black; }

#l2__menuContent {
  font-family: 'Work Sans', Arial, sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 51px;
  -webkit-transition: left 250ms ease-in;
  -moz-transition: left 250ms ease-in;
  -o-transition: left 250ms ease-in;
  -ms-transition: left 250ms ease-in;
  transition: left 250ms ease-in;
  z-index: 20;
  position: fixed;
  display: block;
  top: 10%;
  left: -50%;
  width: 30%;
  margin-left: 45px; }
  #l2__menuContent p {
    margin: 45px 0; }
    #l2__menuContent p a {
      border-bottom: 2px solid transparent; }
    #l2__menuContent p a:hover {
      border-bottom: 2px solid black; }

#l3__overlay {
  z-index: 30;
  position: fixed;
  display: none;
  opacity: 0;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%; }
  #l3__overlay table {
    text-align: left;
    width: 100%;
    height: 100%; }
    #l3__overlay table #l3__overlay__title {
      vertical-align: top;
      padding: 10px; }
      #l3__overlay table #l3__overlay__title div {
        width: 70%;
        font-family: 'Work Sans', Arial, sans-serif;
        font-weight: 500;
        font-size: 18px;
        line-height: 22px; }
        #l3__overlay table #l3__overlay__title div p.title {
          margin-bottom: 3px; }
        #l3__overlay table #l3__overlay__title div p.who {
          font-family: Inconsolata, monospace;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px; }
        #l3__overlay table #l3__overlay__title div p.link {
          font-family: Inconsolata, monospace;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          margin-bottom: 6px;
          color: white; }
          #l3__overlay table #l3__overlay__title div p.link a {
            color: white;
            text-decoration: underline;
            cursor: ne-resize;
            display: inline-block; }
    #l3__overlay table #l3__overlay__content {
      display: absolute;
      width: 100%;
      height: 100%;
      vertical-align: center; }
      #l3__overlay table #l3__overlay__content #l3__overlay__content__left, #l3__overlay table #l3__overlay__content #l3__overlay__content__right {
        position: absolute;
        width: 15%;
        padding: 10px;
        font-family: Inconsolata, monospace;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px; }
        #l3__overlay table #l3__overlay__content #l3__overlay__content__left a, #l3__overlay table #l3__overlay__content #l3__overlay__content__right a {
          padding-top: 50px;
          padding-bottom: 50px; }
        #l3__overlay table #l3__overlay__content #l3__overlay__content__left a:hover, #l3__overlay table #l3__overlay__content #l3__overlay__content__right a:hover {
          color: white; }
        #l3__overlay table #l3__overlay__content #l3__overlay__content__left div.nav, #l3__overlay table #l3__overlay__content #l3__overlay__content__right div.nav {
          padding-bottom: 10px; }
          #l3__overlay table #l3__overlay__content #l3__overlay__content__left div.nav .navDot, #l3__overlay table #l3__overlay__content #l3__overlay__content__right div.nav .navDot {
            position: relative;
            top: 2px;
            display: inline-block;
            border: 1px solid;
            border-color: black;
            width: 9px;
            height: 9px;
            border-radius: 20px;
            margin: 1px; }
            #l3__overlay table #l3__overlay__content #l3__overlay__content__left div.nav .navDot.dot_exploratory, #l3__overlay table #l3__overlay__content #l3__overlay__content__right div.nav .navDot.dot_exploratory {
              background: #adf54f; }
            #l3__overlay table #l3__overlay__content #l3__overlay__content__left div.nav .navDot.dot_illustrative, #l3__overlay table #l3__overlay__content #l3__overlay__content__right div.nav .navDot.dot_illustrative {
              background: #75ef80; }
            #l3__overlay table #l3__overlay__content #l3__overlay__content__left div.nav .navDot.dot_inspirational, #l3__overlay table #l3__overlay__content #l3__overlay__content__right div.nav .navDot.dot_inspirational {
              background: #3de4b3; }
      #l3__overlay table #l3__overlay__content #l3__overlay__content__left {
        left: 0px;
        text-align: left; }
      #l3__overlay table #l3__overlay__content #l3__overlay__content__right {
        right: 0px;
        text-align: right; }
      #l3__overlay table #l3__overlay__content #l3__overlay__content__center {
        position: absolute;
        width: 60%;
        left: 20%;
        top: 15%;
        text-align: center;
        height: 70%; }
        #l3__overlay table #l3__overlay__content #l3__overlay__content__center div.overlayImgCont {
          border: 1px solid white;
          position: absolute;
          display: inline;
          max-width: 100%;
          max-height: 100%; }
          #l3__overlay table #l3__overlay__content #l3__overlay__content__center div.overlayImgCont img {
            cursor: pointer;
            width: 100%;
            height: 100%; }
          #l3__overlay table #l3__overlay__content #l3__overlay__content__center div.overlayImgCont div.overlayImgLabel {
            font-family: Inconsolata, monospace;
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
            position: absolute;
            color: white; }
    #l3__overlay table #l3__overlay__description {
      vertical-align: bottom;
      padding: 10px; }
      #l3__overlay table #l3__overlay__description div {
        width: 70%;
        font-family: 'Work Sans', Arial, sans-serif;
        font-weight: 500;
        font-size: 18px;
        line-height: 22px; }
        #l3__overlay table #l3__overlay__description div p.title {
          font-family: Inconsolata, monospace;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          margin-bottom: 5px; }

#l4__threeDots {
  z-index: 40;
  position: fixed;
  top: 0px;
  right: -40px;
  height: 30px;
  padding: 7px 12px;
  margin: 10px;
  border-radius: 40px; }
  #l4__threeDots #dotsContainer {
    display: inline-block;
    cursor: pointer; }
    #l4__threeDots #dotsContainer .dot {
      display: inline-block;
      border: 1px solid black;
      width: 9px;
      height: 9px;
      border-radius: 20px;
      margin: 1px; }
      #l4__threeDots #dotsContainer .dot:nth-child(1) {
        background: #adf54f; }
      #l4__threeDots #dotsContainer .dot:nth-child(2) {
        background: #75ef80; }
      #l4__threeDots #dotsContainer .dot:nth-child(3) {
        background: #3de4b3; }
      #l4__threeDots #dotsContainer .dot.selected {
        border: 2px solid black;
        width: 7px;
        height: 7px; }
  #l4__threeDots #closeOverlay {
    display: inline-block;
    width: 15px;
    height: 18px;
    text-align: center;
    margin-left: 15px;
    margin-right: 0px;
    cursor: pointer;
    -webkit-transition: margin-right 250ms ease-in;
    -moz-transition: margin-right 250ms ease-in;
    -o-transition: margin-right 250ms ease-in;
    -ms-transition: margin-right 250ms ease-in;
    transition: margin-right 250ms ease-in; }

/*
    --- LABEL FOR IMAGES ONLY MODE ------
*/
#l2__imagesOnlyModeLabel {
  font-family: 'Work Sans', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  z-index: 20;
  display: block;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 200px; }
  #l2__imagesOnlyModeLabel.rightAlign p {
    text-align: right; }
  #l2__imagesOnlyModeLabel p:nth-child(2) {
    font-family: Inconsolata, monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px; }

/* 
.overlayer{
  opacity: 0;
  display: none;
  .active{
    opacity: 1;
    display: fixed;
  }
}
*/

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