/* General */

h1, h2, h3, h4, h5 {
    color: #374384;
  }
  
  h5 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: bold;
  }
  
  .btn-primary {
    background: #374384 !important;
    border: 0px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  }
  
  .btn-light {
      background: white !important;
      box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  }
  
  #altalt-docs.scrolled {
    /*background: #374384;
    background-image: linear-gradient(-110deg, #F22956 0%, 
    rgba(243,40,86,0.00) 75%), url("/?originalUrl=https%3A%2F%2Fhyperdeck.io%2Fimg%2Fblueprints.png");
      transition: background-color 200ms linear;
  box-shadow: 8px 4px #000;*/
    opacity: 1.0;
    transition: opacity 1.0s ease;
  }
  
  #altalt-docs {
    opacity: 0;
    margin-right: 1em;
  }
  
  #altalt-docs a {
    background-color: #004795 !important;
    border: 0px !important;
    margin-top: 1em;
    color: white;
  }
  
  html,body {
    font-family: 'Nunito', sans-serif;
    /*font-family: "Open Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;*/
    background-color: #FFF;
  }
  
  button {
    font-family: 'Nunito', sans-serif !important;
    font-weight: bold !important;
  }
  
  button > svg {
      padding-bottom: 0.1em;
  }
  
  button.active {
      background-color: #D85678 !important;
      box-shadow: none !important;
      transition: background-color 0.8s ease;
      transition: box-shadow 0.8s ease;
  }
  
  /* Header / Hero */
  
  .hero.is-info {
    background: #374384;
    background-image: linear-gradient(-110deg, #F22956 0%, 
    rgba(243,40,86,0.00) 75%), url("/?originalUrl=https%3A%2F%2Fhyperdeck.io%2Fimg%2Fblueprints.png");
  }
  .hero .nav, .hero.is-success .nav {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  h1, h2, h3, h4, h5 {
    font-family: 'jelleebold', sans-serif;
  }
  
  .hero {
      color: #fff;
  }
  
  #header_tagline {
      font-weight: bold;
      padding: 8px;
      color: white;
  }
  
  #main-headline h2 {
      color: white !important;
  }
  
  #main-headline h2 strong {
      color: yellow !important;
  }
  
  #main-video-container-mac, #main-video-container-mac {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    width: 30em;
    height: 22.5em;
    border-radius: 1em;
    background-color: black;
  }
  
  #main-video-container-ipad {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    width: 30em;
    height: 22.5em;
    border-radius: 1em;
    background-color: white;
  }
  
  .main-video {
    border-radius: 1em;
  }
  
  .video-content {
      margin-top: 1em;
  }
  
  .video-content > div {
      margin-top: 2em;
  }
  
  .video-content > button {
      margin-top: 2em;
  }
  
  .video-content.hidden {
      display: none;
  }
  
  /* Showcase */
  
  /* Editor Section */
  
  #editor-section {
      padding-top: 3em;
      margin-bottom: 3em;
  }
  
  /* Some Features */
  
  .feature-content.hidden {
      display: none;
  }
  
  .feature-content.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    border-radius: 1em;
  }
  
  .bshadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    border-radius: 0.75em;
  }
  
  #circled_bg {
      background-image: url("/?originalUrl=https%3A%2F%2Fhyperdeck.io%2Fimg%2Fcircle_bg_pattern.png");
      background-repeat: repeat;
      padding-top: 2em;
      padding-bottom: 2em;
  }
  
  .feature-entry {
      background-color: white;
      border-radius: 1em;
      padding: 0.7em;
      margin-bottom: 0.7em;
  }
  
  .feature-entry.active {
      background-color: #D85678;
      color: white !important;
      box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
      transition: background-color 0.8s ease;
      transition: color 0.8s ease;
      transition: box-shadow 0.8s ease;
  }
  .feature-entry.active h5 {
      color: white !important;
      transition: color 0.8s ease;
  }
  
  .feature-content {
      background-color: #EEF0F1;
      border-radius: 1em;
      text-align: center;
      vertical-align: middle;
  }
  
  /* Table Section
  
  Tables, stolen from 
  https://css-tricks.com/accessible-simple-responsive-tables/
  */
  
  #comparison_table {
      padding-top: 5em;
      padding-left: 3em;
      padding-right: 3em;
      padding-top: 5em;
  }
  
  .Rtable--3cols > .Rtable-cell {
      width: 33.33%;
    }
  
    .Rtable {
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;
      margin: 0 0 3em 0;
      padding: 0;
    }
  
    .HeadlineTable {
        margin: 0px;
    }
  
  .HeadlineTable > .HeadlineCell {
      width: 25%;
  }
  
    .HeadlineCell {
      box-sizing: border-box;
      -webkit-box-flex: 1;
              flex-grow: 1;
      width: 100%;
      overflow: hidden;
      list-style: none;
      padding: 0.5em 1.0em;
      font-weight: bold;
      text-align: center;
      color: #004795;
    }
  
  
    .Rtable-cell {
      box-sizing: border-box;
      -webkit-box-flex: 1;
              flex-grow: 1;
      width: 100%;
      overflow: hidden;
      list-style: none;
      padding: 0.5em 1.0em;
      border-bottom: solid 0.1em #D85678;
    }
  
  .Rtable--4cols {
      border: 0.1em solid #004795;
      border-radius: 1em;
  }
  
  .Rtable--4cols > .Rtable-cell {
      width: 25%;
  }
  
  .selected-cell {
      border-bottom: solid 0.1em #D85678;
      background-color: #D85678;
  }
  
  .first-side-table-cell {
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      background-color: #D85678;
      border-bottom: solid 0.1em white;
      margin-top: -0.3em;
      margin-left: -0.1em;
      padding-top: 0.8em;
      font-weight: bold;
      color: white;
  }
  
  .side-table-cell {
      background-color: #D85678;
      border-bottom: solid 0.1em white;
      margin-left: -0.1em;
      font-weight: bold;
      color: white;
  }
  
  .last-side-table-cell {
      border-bottom-left-radius: 1em;
      border-bottom-right-radius: 1em;
      background-color: #D85678;
      margin-bottom: -0.3em;
      margin-left: -0.1em;
      font-weight: bold;
      color: white;
  }
  
  .normal-cell {
      align-items: center;
      text-align: center;
  }
  
  .last-cell {
      border: none;
  }
  
  @media (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
      #circled_bg {
          background-image: url("/?originalUrl=https%3A%2F%2Fhyperdeck.io%2Fimg%2Fcircle_bg_pattern%402x.png");
          background-size: 32px 32px;
      }
  
      .hero.is-info {
      background: #374384;
      background-image: linear-gradient(-110deg, #F22956 0%, 
      rgba(243,40,86,0.00) 75%), url("/?originalUrl=https%3A%2F%2Fhyperdeck.io%2Fimg%2Fblueprints_2x.png");
      }
  }
  
  /* Try Beta Section */
  
  #try-beta-section {
      align-items: center;
      background-color: #004795;
      color: white;
  }
  
  #try-beta-section > div.container {
      padding: 2em;
  }
  
  /* Screenshot Section */
  
  .screenshot {
    text-align: center;
  }
  
  img.screenshot {
    margin: auto;
    width: 590px !important;
    border: 1px solid #aaa;
    border-radius: 0.75em;
  }
  
  #carouselExampleIndicators {
    border-radius: 0.75em;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    background-color: #ddd;
  }
  
  #carouselExampleIndicators .carousel-item img.screenshot {
    border-radius: 0.75em;
  }
  
  .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
  }
  
  .carousel-control-next-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
  }
  
  
  /* Blog Section */
  
  #blog-section h3, #footer-section h3 {
      color: white !important;
  }
  
  #blog-section, #footer-section {
      background-color: #004795;
      background-image: url("/?originalUrl=https%3A%2F%2Fhyperdeck.io%2Fimg%2Fblueprints.png");
      color: white;
      padding-top: 4em;
      padding-bottom: 5em;
  }
  
  .blog-entry {
      margin-bottom: 0.25em;
  }
  #blog-section a, #footer-section a {
      color: yellow;
  }
  
  #joinbetabutton1 { margin-bottom: 1em }
  
  .main-video {
    width: 30em;
    height: 22.5em;
  }
  
  #svg-editor {
    width: 27em;
  }
  
  #smallfooter {
    margin-top: 1em;
    display: none;
    font-size: 0.7em;
  }
  
  @media (min-width: 576px) { 
    #mbn-alt-logo { display: none }
  }
  @media (max-width: 575.98px) { 
    #mbn-alt-logo { display: block; padding: 1em; }
    #svg-editor { width: 20em; margin-bottom: 1em; }
    #nnav { display: none; }
    .main-video {
      width: 22em;
      height: 16.5em;
    }
    #main-video-container {
      width: 22em;
      height: 16.5em;
    }
    #showcases > div.col {
      flex: 0 0 50%;
      max-width: 50%;
    }
    #showcases > div.col > button {
      margin-bottom: 1em;
    }
    #comparison_table {
      padding-top: 3em;
      padding-left: 0em;
      padding-right: 0em;
      padding-top: 3em;
      font-size: 13px;
    }
    .feature-content > * {
      width: 14em !important;
    }
    img.screenshot {
      margin: auto;
      width: 220px !important;
      border: 1px solid #aaa;
      border-radius: 0.25em;
    }
    .Rtable--4cols > .Rtable-cell.side-table-cell,
    .Rtable--4cols > .Rtable-cell.first-side-table-cell,
    .Rtable--4cols > .Rtable-cell.last-side-table-cell
    {
      padding-left: 0.2em;
    }
    #bigfooter {
      display: none;
    }
    #smallfooter {
      display: block;
    }
    #vcon-startup-add {
      display: none;
    }
  }
  
  #alt-docs {
    position: absolute;
    right: 1em;
    top: 1.5em;
  }
  
  .feature-entry {
    cursor: pointer;
  }
  
  #features-again {
      background-image: url("/?originalUrl=https%3A%2F%2Fhyperdeck.io%2Fimg%2Fcircle_bg_pattern.png");
      background-repeat: repeat;
      margin-top: 2em;
  }
  
  #features-again .featureblock {
    margin-top: 2em;
    border-radius: 0.75em;
    box-shadow: 0 1.5rem 1rem rgba(0,0,0,.15)!important;
    border: 0.5em solid white;
  }
  
  .feature-entry-bottom {
      background-color: white;
      border-radius: 1em;
      padding: 0.7em;
      margin-bottom: 0.7em;
    background-color: #f5f5f5;
    border-radius: 0.75em;
    margin-top: 4em;
    margin-bottom: 2em;
  }
  
  #features-again .macpad {
  padding: 1em; 
  padding-top: 1.5em; 
  padding-bottom: 1.5em;
    background-color: #f5f5f5;
    box-shadow: 0 1.5rem 1rem rgba(0,0,0,.15)!important;
  }
  
  .feature-entry-bottom p {
    font-size: 1em;
  }
  
  .video-container {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    width: 21em;
    border-radius: 1em;
    background-color: white;
  }
  
  .video-container-video {
    border-radius: 1em;
  }
  
  .feature-entry-bottom h1 {
    margin-bottom: 1em;
  }
  
  /* Platform Segmented Control Theming */
  
  .segmented-control {
    font-size: 12pt;
    position: relative;
    display: inline-block;
    border: 2px solid #004795;
    background-color: #fff;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    overflow: hidden;
    margin: .5em auto;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -moz-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -o-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    margin-top: 10pt;
  }
  .segmented-control > input {
    position: absolute;
    left: -10000px;
    opacity: 0;
  }
  .segmented-control > input[type='checkbox'] ~ label {
    -moz-transition-duration: 0;
    -o-transition-duration: 0;
    -webkit-transition-duration: 0;
    transition-duration: 0;
  }
  .segmented-control > input[type='checkbox'] ~ label:before {
    opacity: 0;
  }
  .segmented-control > input:disabled:nth-child(1) ~ label:nth-of-type(1) {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):before {
    opacity: 1;
  }
  .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:before {
    left: 0%;
  }
  .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before {
    left: 0%;
  }
  .segmented-control > input:disabled:nth-child(2) ~ label:nth-of-type(2) {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):before {
    opacity: 1;
  }
  .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before {
    left: 50%;
  }
  .segmented-control > label {
    display: inline-block;
    padding: 0 .51em;
    cursor: pointer;
    margin-top: 10px;
    float: left;
    line-height: 1.5em;
    font-style: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    -moz-transition-property: none;
    -o-transition-property: none;
    -webkit-transition-property: none;
    transition-property: none;
    -moz-transition-duration: inherit;
    -o-transition-duration: inherit;
    -webkit-transition-duration: inherit;
    transition-duration: inherit;
    -moz-transition-timing-function: inherit;
    -o-transition-timing-function: inherit;
    -webkit-transition-timing-function: inherit;
    transition-timing-function: inherit;
  }
  .segmented-control > label:before, .segmented-control > label:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .segmented-control > label:after {
    color: white;
    content: attr(data-value);
    text-align: center;
    padding: inherit;
    z-index: 10;
    margin-top: 10px;
    font-style: inherit;
    text-decoration: inherit;
    font-weight: inherit;
    opacity: 0;
    -moz-transition-property: opacity, left;
    -o-transition-property: opacity, left;
    -webkit-transition-property: opacity, left;
    transition-property: opacity, left;
    -moz-transition-duration: inherit;
    -o-transition-duration: inherit;
    -webkit-transition-duration: inherit;
    transition-duration: inherit;
    -moz-transition-timing-function: inherit;
    -o-transition-timing-function: inherit;
    -webkit-transition-timing-function: inherit;
    transition-timing-function: inherit;
  }
  .segmented-control > label:after, .segmented-control > label {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .segmented-control > label:before {
    content: '';
    color: inherit;
    background: #004795;
    -moz-transition-property: left;
    -o-transition-property: left;
    -webkit-transition-property: left;
    transition-property: left;
    -moz-transition-duration: inherit;
    -o-transition-duration: inherit;
    -webkit-transition-duration: inherit;
    transition-duration: inherit;
    -moz-transition-timing-function: inherit;
    -o-transition-timing-function: inherit;
    -webkit-transition-timing-function: inherit;
    transition-timing-function: inherit;
  }
  .segmented-control > label:first-of-type:nth-last-of-type(1), .segmented-control > label:first-of-type:nth-last-of-type(1):after, .segmented-control > label:first-of-type:nth-last-of-type(1):before, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:before {
    width: 100%;
  }
  .segmented-control > label:first-of-type:nth-last-of-type(2), .segmented-control > label:first-of-type:nth-last-of-type(2):after, .segmented-control > label:first-of-type:nth-last-of-type(2):before, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:before {
    width: 50%;
  }
  .segmented-control.italic, .segmented-control .italic {
    font-style: italic;
  }
  .segmented-control.bold, .segmented-control .bold {
    font-weight: bold;
  }
  .segmented-control.underline, .segmented-control .underline {
    text-decoration: underline;
  }
  .segmented-control.line-through, .segmented-control .line-through {
    text-decoration: line-through;
  }