/* 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;
}