html {
    scroll-behavior: smooth;
}
:target:before {
    content:"";
    display:block;
    height: 90px; /* fixed header height*/
    margin: -90px 0 0; /* negative fixed header height */
}

.body--quiz:before, .body--quiz:after {
    content: "";
    position: fixed;
    background: #222222;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 12;
}
.body--quiz:before {
    top: 0;
}
.body--quiz:after {
    bottom: 0;
}
.body--quiz {
    border-left: 20px solid #222222;
    border-right: 20px solid #222222;
    z-index: 12;
}

.content {
    max-width: 100vw;
    overflow-x: hidden;
    min-height: 80vh;
}
.alertBar {
    position: relative;
    padding: 10px 20px;
    text-align: center;
    background: #2FFED5;
    color: rgba(0,0,0,0.9);
    top: 70px;
    z-index: 5;
}
.alertText {
    color: rgba(0,0,0,0.9) !important;
    text-decoration: none;
}

.navBar {
    position: fixed;
    z-index: 10;
    border-bottom: 6px solid rgba(0,0,0,0.02);
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100vw;
    height: 70px;
    background: #f6f6f6;
    padding: 0 30px;
    transform: translateZ(0);
}
.navBar--dark {
    background: #2f2f2f;
    border: none;
}
.navBar--white {
    background: #ffffff;
    border-bottom: 1px solid rgba(31,40,207,0.2);
}
.navBar-right {
    display: none;
}
.navBar-logo {
    height: 27px;
    width: auto;
    opacity: 0.9;
}
.navBar-link {
    box-sizing: border-box;
    padding: 0 6px 2px 6px;;
    margin: 0 10px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    color: rgba(0,0,0,0.6);
    border-bottom: 2px solid rgba(0,0,0,0.0);
    transition: ease-in-out all 0.2s;
}
.navBar-link:hover {
    color: rgba(0,0,0,0.7);
    border-bottom: 2px solid rgba(0,0,0,0.2);
}
.navBar-link--dark {
    color: rgba(255,255,255,0.8);
}
.navBar-link--dark:hover {
    color: rgba(255,255,255,1);
    border-bottom: 2px solid rgba(255,255,255,1);
}
.navBar-icon {
    width: 44px;
    height: auto;
    opacity: 0.7;
    margin-right: -20px;
}
.buttonNav {
    font-size: 14px;
    color: #ffffff;
    background: #222222;
    border: 2px solid #222222;
    box-sizing: border-box;
    padding: 10px 22px;
    border-radius: 4px;
    margin: 0 10px;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    transition: ease-in-out all 0.2s;
}
.buttonNav:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    color: #ffffff;
}

.button--fixedWide {
    min-width: 220px;
    padding: 0;
    margin: 10px;
}
.button--white {
    color: #2f2f2f;
    background-color: #f2f2f2;
    border-color: #f2f2f2;
}
.button--neon {
    color: #112330 !important ;
    background-color: #2ffed5 !important ;
    border-color: #2ffed5 !important ;
}
.button--large {
    font-size: 16px;
    height: 54px;
}

.mobileMenu {
    position: fixed;
    height: calc(100vh - 60px);
    top: 60px;
    left: 0;
    width: 100vw;
    padding: 10px 0 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    background: #e0e0e0;
    z-index: 8;
}
.mobileMenu-link {
    width: 100%;
    color: rgba(0,0,0,0.8);
    font-size: 2.8rem;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    padding: 0;
    text-decoration: none;
}
.mobileMenu-link:focus {
    color: rgba(0,0,0,1);
    background: none;
}

.hero {
    padding-top: 110px;
    min-height: 80vh;
}
.hero--min0 {
    min-height: 0;
}
.full-stripe {
    min-height: 100vh;
}
.stripe-one {
    position: absolute;
    width: 200vw;
    top: -35vh;
    left: -60vw;
    background: rgba(0,0,0,0.02);
    background: linear-gradient(45deg,rgba(0,0,0,0.01),rgba(0,0,0,0.03));
    height: 100vh;
    z-index: -1;
    transform: rotate(-19deg);
}
.stripe-two {
    position: absolute;
    width: 200vw;
    top: 30vh;
    left: -60vw;
    background: rgba(0,0,0,0.02);
    background: linear-gradient(45deg,rgba(0,0,0,0.01),rgba(0,0,0,0.03));
    height: 90vh;
    z-index: -1;
    position: absolute;
    transform: rotate(-19deg);
}
.stripe--dark {
    background: #2f2f2f;
    transform: rotate(-6deg);
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    background: url(../img/superchargedSessions.jpg);
    background-size: cover;
    object-fit: cover;
}
.hero-img {
    width: 150%;
    margin-left: -50%;
    margin-top: 2%;
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
} 
.embed-container--rounded { 
    border-radius: 10px;
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

.img-search {
    width: 100%;
    height: auto;
}

.videoContainer {
  display: none;
  position: fixed;
  background: none;
  z-index: 10;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 100%;
  height: 141px;
}

.videoFrame {
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  width: 280px;
  height: 141px;
}

.videoYT-wrapper {
    position: relative;
    padding-bottom: 52.25%;
    padding-top: 25px;
    height: 0;
}
.videoYT-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.closeButton {
  position: absolute;
  z-index: 20;
  top: -10px;
  left: calc(50% + 122px);
  font-size: 16px;
  font-weight: 700;
  width: 32px;
  height: 32px;
  line-height: 16px;
  border-radius: 50%;
  padding: 0;
  text-align: center;
  background: #f2f2f2;
}

.laptop {
    position: relative;
    width: 280px;
    height: 216px;
    margin-top: -20px;
}
.laptop * {
    position: absolute;
}
.shadow {
    display: none;
    left: 17px;
    right: 17px;
    top: 40px;
    height: 490px;
    opacity: .3;
    background: #7692b3;
    filter: blur(30px);
}
.lid {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,#efefef,#ffffff);
    border-radius: 20px;
    box-shadow: inset 1px -4px 6px rgba(145,161,181,.3);
}
.camera {
    --size: 4px;
    width: var(--size);
    height: var(--size);
    top: 10px;
    left: 50%;
    margin-left: calc(var(--size) / -2);
    border-radius: 50%;
    background: #dae0e8;
}
.screen {
    top: 20px;
    bottom: 16px;
    left: 17px;
    right: 17px;
    border-radius: 4px;
    box-shadow: -1px 1px 6px rgba(171,183,204,.2);
    background: #f5f4f0;
}
.chassis {
    display: none;
    width: 100%;
    height: 142px;
    top: calc(100% - 11px);
    border-radius: 8px 8px 14px 14px;
    -webkit-transform: perspective(880px) rotateX(40deg);
    transform: perspective(880px) rotateX(40deg);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    background: linear-gradient(rgba(145,161,181,.2),rgba(145,161,181,0)),linear-gradient(45deg,#efefef,#ffffff);
    box-shadow: inset 0 -2px 3px rgba(145,161,181,.5), inset -1px -6px 4px rgba(253,255,255,.9);
}
.chassis * {
    opacity: .3;
    filter: alpha(opacity=30);
    background: -webkit-linear-gradient(45deg,#b2bdcc,#c1ccd8);
    background: linear-gradient(45deg,#b2bdcc,#c1ccd8);
    box-shadow: 1px 1px 1px hsla(0,0%,100%,.75);
}
.keyboard {
    left: 28px;
    right: 28px;
    top: 8px;
    height: 66px;
    border-radius: 2px 2px 4px 4px;
}
.trackpad {
    left: 165px;
    right: 165px;
    top: 76px;
    height: 52px;
    border-radius: 4px 4px 6px 6px;
}
#testimonialCarouselB { display: none; }
#testimonialCarouselC { display: none; }
.testimonial {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
}
.testimonial-media {
    padding-top: 5px;
    text-align: center;
}
.testimonial-img {
    width: 80px;
    height: auto;
    border-radius: 50%;
}
.testimonial-content {
    color: rgba(0,0,0,0.6);
}
.testimonial-header {
    font-weight: 700;
    margin-bottom: 5px;
}
.testimonial-body {
    margin-bottom: 5px;
}

.testimonialCard-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}
.testimonialCard-outer {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    margin: 20px 0;
}
.testimonialCard-outer--wide {
    width: 100%;
}
.testimonialCard-outer--superWide {
    width: 100%;
}
.testimonialCard-top {
    width: 100%;
    background: #e6e6e6;
    margin-bottom: 10px;
    min-height: 6px;
    box-sizing: border-box;
}
.testimonialCard-top--wide {
    display: flex;
    padding: 15px 10px 10px 30px;
    align-items: center;
}
.testimonialCard-inner {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px;
    text-align: center;
}
.testimonialCard-img {
    border-radius: 50%;
    width: 70px;
    height: auto;
    margin-bottom: 5px;
}
.testimonialCard-img--wide {
    width: 90px;
    height: 90px;
    margin-right: 20px;
}
.testimonialCard-name {
    margin-bottom: 15px;
    opacity: 0.8;
}
.testimonialCard-name--wide {
    font-size: 18px;
    text-align: left;
}
.customerLogo {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 50px;
}
.customerLogo--small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 0;
}
.customerLogo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26%;
    box-sizing: border-box;
    padding: 24px 0;
}
.customerLogo-box--small {
    width: 17%;
}
.customerLogo-box--quarter {
    width: 25%;
}
.customerLogo-img {
    max-width: 90%;
    max-height: 60px;
}
.customer-outerFlex {
    display: block;
}
.customer-innerFlex {
    display: flex;
    flex-direction: column;
}
.customerLogo-sticky {
    flex: 1;
    display: flex;
}

.customerCard {
    width: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 24px;
    background: #ffffff;
    margin-bottom: 18px;
    box-shadow:
    0 1.5px 1.5px rgba(0, 0, 0, 0.07),
    0 3.6px 3.6px rgba(0, 0, 0, 0.05),
    0 6.8px 6.8px rgba(0, 0, 0, 0.042),
    0 12.1px 12.1px rgba(0, 0, 0, 0.035),
    0 22.6px 22.6px rgba(0, 0, 0, 0.028),
    0 54px 54px rgba(0, 0, 0, 0.02);
}
.customerCard-quote {
    quotes: initial;
    margin-bottom: 18px;
}
.customerCard-quote::before {
    content: open-quote;
}
.customerCard-quote::after {
    content: close-quote;
}
.customerCard-bottom {
    display: flex;
    align-items: center;
}
.customerCard-img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-right: 12px;
}
.customerCard-text {
    font-weight: 700;
    margin: 0;
}
.customerCard-details {
    position: relative;
    width: calc(100% - 100px);
}
.customerCard-link {
    font-weight: 700;
    color: rgba(0,0,0,0.8);
    text-decoration: none;
    cursor: pointer;
    transition: ease-in-out 0.2s color;
}
.customerCard-link:hover {
    color: #3768F1;
}
.customerCard-play {
    position: absolute;
    top: 6px;
    right: -36px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: ease-in-out 0.2s transform;
}
.customerCard-play:hover {
    transform: scale(1.2);
}
.customerCard-playIcon {
    width: 100%;
    height: auto;
}

.stats {
    display: flex;
    width: 100%;
    color: rgba(0,0,0,0.5);
}
.stats-content {
    margin-left: 10px;
}
.stats-header {
    font-weight: 700;
    font-size: 6rem;
    margin-bottom: 5px;
}
.stats-body {
    text-transform: uppercase;
    margin-top: 12px;
    margin-bottom: 0;
}

.row-productFeatureBlocks {
    display: none;
}
.row--medium {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.productTile {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px 10px;
    opacity: 0.9;
}
.productTile-media {
    padding-top: 10px;
}
.productTile-icon {
    width: 60px;
    height: auto;
}
.productTile-content {
    margin-left: 20px;
}
.productTile-header {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0;
}
.productTile-body {
    margin-bottom: 0;
}

.customers {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.customers-box {
    margin-bottom: 10px;
}
.customers-logo {
    filter: grayscale(1);
    width: 100px;
}
.customers-logo--wide {
    width: 200px;
}
.customers-header {
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0,0,0,0.5);
    font-weight: 700;
}

.bg-graph {
    position: absolute;
    z-index: -1;
    opacity: 0.1;
    top: 0;
    left: 0;
    width: 140vw;
    height: auto;
}

.squareTile {
    display: inline-block;
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    vertical-align: top;
    padding: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.squareTile--dark {
    background: #222222;
    background: linear-gradient(to bottom, rgba(34,34,34,1) 0%, rgba(26,26,26,1) 100%);
    color: #f2f2f2;
}
.squareTile--light {
    margin-bottom: 20px;
    margin-left: -2px;
    background: #ffffff;
}
.squareTile-icon {
    width: 100%;
    filter: invert(1);
}
.squareTile-copy {
    text-align: left;
}
.productExamples-img-one {
    width: 125%;
    margin-left: -13%;
    margin-top: 0px;
}
.productExamples-img-two {
    width: 100%;
    margin-left: -0%;
    margin-top: 0px;
}
.productExamples-img-three {
    width: 100%;
    margin-left: -0%;
    margin-top: 0px;
}
.productExamples-number {
    font-size: 7rem;
}

.globe {
    text-align: center;
    position: relative;
    padding-top: 120px;
    margin-bottom: 80px;
}
.globe-img {
    position: absolute;
    top: 0;
    width: 66%;
    left: 17%;
    z-index: -1;
}
.globe-content {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    padding: 30px 40px 20px 40px;
    margin: 0 auto;
    border-radius: 5px;
}
.globe-header {
    max-width: 600px;
    margin: 10px auto 20px auto;
}
.testimonial--globe {
    display: inline-flex;
    text-align: left;
    width: 75%;
}

.footer {
    position: relative;
    width: 100vw;
    background: #2f2f2f;
    margin-top: 10vh;
    color: #f2f2f2;
    padding-top: 5vh;
}
.footer-link {
    text-decoration: none;
    color: #f2f2f2;
    opacity: 0.8;
    line-height: 2;
}
.footer-link:hover {
    color: #f2f2f2;
    opacity: 1;
}
.footer-copyright {
    opacity: 0.6;
}
.footer-icon {
    width: 32px;
    height: auto;
    margin: 0 12px 0 0;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s all ease-in-out;
}
.footer-icon:hover {
    opacity: 1;
}

.img-featureIcon {
  width: 90%;
  height: auto;
  max-width: 120px;
}

.text-micro {
  font-size: 2.0rem;
  color: #757575;
  margin: 2px;
}
.text-nano {
  font-size: 1.4rem;
  color: #757575;
  letter-spacing: 0;
  margin-bottom: -1.0rem;
}
.text-mid {
  font-size: 2rem;
}
.text-massive {
  font-size: 5rem;
}
.text-pricing {
  margin-bottom: 10px;
}

.img-headshot {
    width: 100%;
    border-radius: 50%;
    max-width: 250px;
}

.img-os {
    width: 70%;
}

code {
  margin-top: 0;
  overflow: auto;
}

pre {
  margin: 0;
}
.code-brace {
  display: block;
}
.code-line {
  display: block;
}
.code-grey {
  color: rgba(150,150,150 ,1);
}
.code-blue {
  color: rgba(66,165,245 ,1);
}
.code-red {
  color: rgba(239,83,80 ,1);
}
.code-green {
  color: rgba(102,187,106 ,1);
}
.img-front {
  width: 80%;
  height: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  margin: 1em 0 2em 0;
  border-radius: 5px;
}
.img-front-wide {
  width: 100%;
}
.btn-api {
  height: 42px;
  line-height: 32px;
  padding: 3px 20px;
  margin: 0 5px 5px 0;
}
.btn-selected {
  background: #333333;
  color: #f2f2f2 !important;
}

.contactForm-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 12;
}
.contactForm-container {
    position: relative;
    width: 100%;
    max-width: 540px;
    padding: 60px 40px;
    box-sizing: border-box;
    height: 100vh;
    background: #f2f2f2;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.contactForm-input {
    display: block;
    width: 100%;
}
.contactForm-text {
    display: block;
    width: 100%;
    resize: none;
    min-height: 120px;
}
.contactForm-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 40px;
    opacity: 0.6;
    height: auto;
    cursor: pointer;
}
.contactForm-close:hover {
    opacity: 1;
}

.input-roomCode {
    height: 72px !important;
    padding-top: 4px !important;
    width: 90%;
    max-width: 560px;
}
.roomCodeLink {
    padding: 10px 20px 15px 20px;
    border: 2px solid #222;
    text-decoration: none;
}

.getStarted-logo {
    width: 96%;
    margin: 10px auto;
    max-width: 300px;
}
.getStarted-label {
    opacity: 0.8;
    margin-bottom: 5px;
}
.getStarted-input {
    width: 90%;
    display: block;
    margin-bottom: 20px;
}
.getStarted-input--half {
    width: 45%;
    display: inline-block;
    margin-right: 2%;
}
.getStarted-input-URL {
    width: calc(90% - 80px);
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 5px;
}
.getStarted-input-room {
    width: calc(90% - 115px);
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 5px;
}
.link-getStarted {
    text-decoration: none;
}
.icon-setUp {
    width: auto;
    height: 64px;
    margin-bottom: -14px;
    margin-left: 5px;
}
.activate-label {
    opacity: 0.8;
    max-width: 520px;
    margin-bottom: 5px;
}
.buttonGraphic {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-right: 30px;
    margin-bottom: 30px;
    border: 2px solid #222222;
    border-radius: 3px;
    color: #222222;
    background: #f9f9f9;
    transition: ease-out all 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}
.buttonGraphic:hover {
    filter: invert(1);
}
.buttonGraphic-media {
    height: 80px;
    width: auto;
    margin-bottom: 10px;
}
.buttonGraphic-copy {
    text-transform: uppercase;
    margin-bottom: 10px;
}
.quiz-row {
    margin-bottom: 50px;
}
.quiz-button {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.8);
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    text-transform: none;
    font-size: 1.5rem;
    height: auto;
    padding: 8px 16px;
    margin: 20px 0;
    display: block;
    transition: ease-in-out all 0.3s;
    cursor: pointer;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    box-sizing: border-box;
    text-decoration: none;
}
.quiz-button--correct {
    background: #a5d6a7;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.quiz-button--incorrect {
    background: #ef5350;
}

.quiz-img--inline {
    display: inline;
    height: 36px;
    width: auto;
    margin: 0 1px 0 3px;
    vertical-align: bottom;
}

.activateVideo-wrapper {
  position: relative;
  padding-bottom: 52.25%;
  padding-top: 25px;
  height: 0;
}

.activateVideo-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pricingOptions-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.pricingOptions-blocks {
    display: inline-block;
    margin-bottom: 0;
}

.priceOption {
    width: 90%;
    margin: 40px auto 60px auto;
    box-sizing: border-box;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid #222222;
    border-radius: 6px;
    cursor: pointer;
    transition: ease-in-out all 0.2s;
    background: #f9f9f9;
    color: #222222 !important;
    text-decoration: none;
}
.priceOption:hover {
    filter: invert(1);
}
.priceOption-img {
    height: 100px;
    width: auto;
}
.priceOption-textBramble {
    margin: 0;
    font-weight: 700;
    opacity: 0.7;
}
.priceOption-textTitle {
    margin: -10px 0 20px 0;
    font-weight: 700;
}
.priceOption-arrow {
    height: 8px;
    width: auto;
    margin-left: 4px;
}
.package-icon {
    height: 40px;
    width: auto;
}
.package-text {
    max-width: 240px;
    margin: 10px auto 10px auto;
}
.package-price {
    margin: 10px auto;
    max-width: 240px;
}
.package-price--org {
    margin-top: 15px;
}
.package-divider {
    margin: 10px auto 20px auto;
    border: 1px solid #dcdcdc;
    max-width: 240px;
}
.package-divider--org {
    margin-top: 21px;
}

.pricing-subtitle {
    text-align: center;
}
.pricing-popular {
    margin: 10px 0;
    font-weight: 700;
    background: rgba(47,254,213, 0.3);
    color: rgba(17,98,83, 0.9);
    padding: 10px 30px;
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
}
.pricing-popular--blank {
    opacity: 0;
    pointer-events: none;
}

.pricingOrg-package {
    margin-bottom: 10px;
}
.pricingOrg-month {
    opacity: 0.7;
    margin-top: -20px;
    margin-bottom: 0;
}
.pricingOrg-row {
    display: flex;
    width: 100%;
    align-items: center;
    margin: 20px 0;
}
.pricingOrg-row--no {
    opacity: 0.5;
}
.pricingOrg-icon {
    width: 16px;
    height: auto;
    margin-right: 10px;
}
.pricingOrg-icon--mobile {
    float: right;
}
.pricingOrg-contact {
    margin-top: 10px;
    margin-bottom: 30px;
}
.pricingOrgUsers-container {
    max-width: 820px;
    max-height: 90vh;
}

.pricingFeatures-label {
    font-weight: 700;
    text-transform: capitalize;
    margin: 0;
    padding: 15px 0;
    white-space: nowrap; /* Prevents split over two lines on mobile */
}
.pricingFeatures-logo {
    display: block;
    width: 100%;
    max-width: 288px;
    height: auto;
}

.pricingFAQ-summary {
    font-size: 3.0rem;
    display: list-item;
    cursor: pointer;
    margin: 10px 0;
}

.featureIconContainer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.featureIcon {
    padding: 5px 10px;
    width: 160px;
    box-sizing: border-box;
    min-height: 120px;
    text-align: center;
}
.featureIcon-img {
    height: 80px;
    margin: 0 auto;
}
.featureIcon-text {
    margin-top: -5px;
}

.customers-container {
    width: 90%;
    max-width: 880px;
    margin: 10px auto 50px auto;
    padding: 20px;
    text-align: center;
}
.customers-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 10px auto 30px auto;
    flex-wrap: wrap;
}
.customers-badge {
    width: 22%;
    height: auto;
    cursor: pointer;
    transition: ease-in-out all 0.2s;
}
.customers-badge-img {
    width: 100%;
    height: auto;
}
.customers-badge:hover {
    transform: translateZ(0) scale(1.2);
}
.customers-badge--wide {
    display: none;
    width: 24%;
}
.blogSubscribe-outer {
    color: rgba(0,0,0,0.8);
    text-decoration: none;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    margin-top: -4vh;
    margin-bottom: 10px;
    text-align: center;
    padding: 10px;
}
.blogSubscribe-inline {
    background-color: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.8);
    text-decoration: none;
    box-sizing: border-box;
    border-radius: 10px;
    width: 100%;
    min-height: 180px;
    margin: 20px 0;
    text-align: center;
    padding: 60px 20px 40px 20px;
}
.blogSubscribe-input {
    width: 300px;
    height: 42px !important;
    margin-right: 10px;
}
.blogCard-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 30px;
}
.blogCard-outer {
    background: #ffffff;
    color: rgba(0,0,0,0.8);
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    margin: 20px 0;
    transition: ease-in-out all 0.2s;
    cursor: pointer;
}
.blogCard-outer:hover {
    color: rgba(0,0,0,0.8);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.blogCard-outer--wide {
    width: 100%;
}
.blogCard-outer--superWide {
    width: 100%;
}
/* background-img 840 x 360 */
.blogCard-top {
    width: 100%;
    background: #e6e6e6 no-repeat center center;
    background-size: cover;
    min-height: 180px;
    box-sizing: border-box;
}
.blogCard-top--wide {
    display: flex;
    padding: 15px 10px 10px 30px;
    align-items: center;
}
.blogCard-inner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px;
    text-align: left;
}
.blogCard-header {
    margin-bottom: 1rem;
    line-height: 1.3;
}
.blogCard-img {
    border-radius: 50%;
    width: 70px;
    height: auto;
    margin-bottom: 5px;
}
.blogCard-img--wide {
    width: 90px;
    height: 90px;
    margin-right: 20px;
}
.blogCard-name {
    margin-bottom: 15px;
    opacity: 0.8;
}
.blogCard-name--wide {
    font-size: 18px;
    text-align: left;
}
.blogCard-tag {
    position: absolute;
    padding: 5px 10px; 
    background: #222222;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    top: -14px;
}

.blogPost-outer {
    width: calc(100% + 40px);
    margin-top: calc(70px - 15vh);
    margin-left: -20px;
    max-width: 1000px;
    background: #ffffff;
}
.blogPost-top {
    display: flex;
    padding: 20px 20px 40px 20px;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    position: relative;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap-reverse;
}
.blogPost-headerImage {
    width: 150px;
    height: 150px;
    background: #e6e6e6 no-repeat center center;
    background-size: cover;
    border-radius: 50%;
    margin-bottom: 20px;
    margin-left: 0;
}
.blogPost-featuredImage {
    width: 100%;
}
.blogPost-top h1 {
    font-size: 3.6rem;
    margin-bottom: 10px;
    font-weight: 700;
}
.blogPost-top p {
    margin-bottom: 0;
}
.blogPost-top--b0e0e6 {
    border-bottom: 5px solid #b0e0e6;
}
.blogPost-top--ac6ab7 {
    border-bottom: 5px solid #ac6ab7;
}
.blogPost-top--ff8a68 {
    border-bottom: 5px solid #ff8a68;
}
.blogPost-top--5cb2a3 {
    border-bottom: 5px solid #5cb2a3;
}
.blogPost-top--227aa6 {
    border-bottom: 5px solid #227aa6;
}
.blogPost-top--ffc82f {
    border-bottom: 5px solid #ffc82f;
}
.blogPost-top--fff9e5 {
    border-bottom: 5px solid #fff9e5;
}
.blogPost-top--ff5216 {
    border-bottom: 5px solid #ff5216;
}
.blogPost-top--8756d8 {
    border-bottom: 5px solid #8756d8;
}
.blogPost-top--5d6bc1 {
    border-bottom: 5px solid #5d6bc1;
}
.blogPost-top--f04b7c {
    border-bottom: 5px solid #f04b7c;
}
.blogPost-top--87bb82 {
    border-bottom: 5px solid #87bb82;
}
.blogPost-top--e4bb4a {
    border-bottom: 5px solid #e4bb4a;
}
.blogPost-top--049edf {
    border-bottom: 5px solid #049edf;
}
.blogPost-top--edffeb {
    border-bottom: 5px solid #edffeb;
}
.blogPost-top--a6adf0 {
    border-bottom: 5px solid #a6adf0;
}
.blogPost-top--0e212e {
    border-bottom: 5px solid #0e212e;
}
.blogPost-top--fbc65e {
    border-bottom: 5px solid #fbc65e;
}
.blogPost-top--fd859c {
    border-bottom: 5px solid #fd859c;
}
.blogPost-top--3e908f {
    border-bottom: 5px solid #3e908f;
}
.blogPost-top--763353 {
    border-bottom: 5px solid #763353;
}
.blogPost-top--4742f9 {
    border-bottom: 5px solid #4742f9;
}
.blogPost-top--cd7e3f {
    border-bottom: 5px solid #cd7e3f;
}
.blogPost-top--97979f {
    border-bottom: 5px solid #97979f;
}
.blogPost-top--fecb01 {
    border-bottom: 5px solid #fecb01;
}
.blogPost-top--eb2b48 {
    border-bottom: 5px solid #eb2b48;
}
.blogPost-top--f7a155 {
    border-bottom: 5px solid #f7a155;
}
.blogPost-top--493ee6 {
    border-bottom: 5px solid #493ee6;
}
.blogPost-top--0df1fd {
    border-bottom: 5px solid #0df1fd;
}
.blogPost-top--2ffed5 {
    border-bottom: 5px solid #2ffed5;
}
.blogPost-top--48c789 {
    border-bottom: 5px solid #48c789;
}
.blogPost-top--ffe01a {
    border-bottom: 5px solid #ffe01a;
}
.blogPost-top--e66d41 {
    border-bottom: 5px solid #e66d41;
}
.blogPost-top--ea2a46 {
    border-bottom: 5px solid #ea2a46;
}
.blogPost-top--bd3fc6 {
    border-bottom: 5px solid #bd3fc6;
}
.blogPost-top--7D56D2 {
    border-bottom: 5px solid #7D56D2;
}
.blogPost-top--3768F1 {
    border-bottom: 5px solid #3768F1;
}
.blogPost-top--303030 {
    border-bottom: 5px solid #303030;
}
.blogPost-top--3495D5 {
    border-bottom: 5px solid #3495D5;
}
.blogPost-top--222222 {
    border-bottom: 5px solid #222222;
}
.blogPost-top--112330 {
    border-bottom: 5px solid #112330;
}
.blogPost-top--f8c715 {
    border-bottom: 5px solid #f8c715;
}
.blogPost-top--7d56d2 {
    border-bottom: 5px solid #7d56d2;
}
.blogPost-back {
    width: 52px;
    position: absolute;
    left: 5px;
    top: 5px;
    cursor: pointer;
    transition: ease-in-out all 0.2s;
    opacity: 0.8;
    display: none;
}
.blogPost-back:hover {
    transform: scale(1.1);
}
.blogPost-inner {
    padding: 20px 20px 40px 20px;
}
.blogPost-inner h2 {
    font-size: 2.8rem;
    margin-top: 45px;
    font-weight: 700;
}
.blogPost-inner h3 {
    font-size: 2rem;
    font-weight: 700;
}
.blogPost-inner p {
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: -0.1px;
    color: rgba(0, 0, 0, 0.75);
    margin-bottom: 25px;
}
.blogPost-inner li {
    font-size: 18px;
    line-height: 1.8;
}
.blogPost-inner a {
    text-decoration: none;
}
.blogPost-inner a:hover {
    text-decoration: underline;
}
.blogPost-caption {
    font-size: 14px !important;
    text-align: center;
    font-style: italic;
}
.blogPostTestimonial {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.blogPostTestimonial-img {
    width: 20%;
    min-width: 100px;
    height: auto;
    border-radius: 50%;
    margin-right: 20px;
}
.blogPostTestimonial-copy {
    width: calc(80% - 20px);
    font-style: italic;
    margin-bottom: 0 !important;
}
q {
    quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}
.blogPost-img {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-bottom: 15px;
}
.blogPost-videoWrapper {
    position: relative;
    padding-bottom: 52.25%;
    padding-top: 25px;
    height: 0;
    width: calc(100% + 40px);
    margin-left: -20px;
}

.blogPost-videoFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.blogPost-chart {
    position: relative;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #112330;
}
.blogPost-chart--white {
    background: #ffffff;
}

.blogPost-chartFull {
    width: 94%;
    height: 480px;
    margin: 0 auto;
    padding: 30px 0;
    background: #112330;
}
.blogPost-chartHalf {
    width: 100%;
    padding: 30px 0;
    margin-bottom: 10px;
    background: #112330;
}
.blogPost-canvas {
    background: #112330;
    margin-bottom: 10px;;
}

.icon-inline {
    display: inline-block;
    margin: 0 2px;
    height: 18px;
    width: auto;
}

.libraryCard-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 30px;
}
.libraryCard-outer {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: rgba(0,0,0,0.8);
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    margin: 25px 0;
    transition: ease-in-out all 0.2s;
    cursor: pointer;
    min-height: 260px;
}
.libraryCard-outer:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    color:  rgba(0,0,0,0.8);
}
.libraryCard-top {
    width: 100%;
    background: #e6e6e6 no-repeat top center;
    background-size: cover;
    min-height: 100px;
    box-sizing: border-box;
    filter: brightness(0.95);
}
.libraryCard-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 2;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    text-align: left;
}
.libraryCard-header {
    font-size: 18px;
    margin: 10px 0;
    font-weight: 400;
    letter-spacing: 0;
}
.libraryCard-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.libraryCard-type {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.8;
    margin: 0;
}
.libraryCard-topic {
    font-size: 12px;
    opacity: 0.9;
    margin: 0;
}
.libraryCard-footerIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-weight: 600;
}
.libraryCard-footerIcon--example {
    border-radius: 50%;
}
.libraryCard-footerIcon--maths {
    background: #2962ff;
}
.libraryCard-footerIcon--biology {
    background: #00bfa5;
}
.libraryCard-footerIcon--english {
    background: #ffa000;
}
.libraryCard-footerIcon--economics {
    background: #8e24aa;
}
.libraryCard-footerIcon--chemistry {
    background: #e53935;
}

.lectureFrame-container {
    width: 100%;
    padding-top: 73%;
    position: relative;
}
.lectureFrame-frame {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    border: 5px solid #222222;
}

.loginContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.loginCard {
    box-sizing: border-box;
    position: relative;
    width: 260px;
    background: #222222;
    color: #f2f2f2;
    padding: 20px 30px;
    min-height: 200px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    cursor: pointer;
    transition: ease-in-out all 0.2s;
    margin: 20px 0 40px 0;
    text-decoration: none;
}
.loginCard:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    color: #ffffff;
}
.loginText {
    font-size: 24px;
}
.loginIcon {
    width: 60px;
    height: auto;
    position: absolute;
    bottom: 20px;
    right: 30px;
    filter: invert(1);
}

/* Usage and Infrastructure */
.hero--usage {
    min-height: 0;
}
.usageChart-img {
    display: block;
    position: relative;
    margin: 20px auto;
    width: 90%;
    max-width: 960px;
    border-radius: 10px;
    cursor: pointer;
    transition: ease-in-out all 0.2s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.usageChart-img:hover {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.worldMap-container {
    width: 100vw;
    padding: 30px 0 0 0;
}
.worldMap-img {
    width: 100%;
    height: auto;
}

.regionMap-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}
.regionMap-img {
    display: none;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    border-radius: 10px;
}
#regionMap-img--europe {
    display: block;
}
.regionMap-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.regionMap-option {
    width: 20%;
    max-width: 140px;
    height: auto;
    transition: ease-in-out all 0.2s;
    cursor: pointer;
    filter: invert(0.8);
    margin: 20px 0;
}
.regionMap-option:hover {
    filter: invert(0);
}
#regionMap-option--europe {
    filter: invert(0);
}

.techStack-container {
    display: block;
    width: 100%;
    padding: 40px 20px 20px 20px;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
}
.techStack-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.techStack-btn {
    min-width: 140px;
    border-width: 3px;
    height: 46px;
    font-weight: 700;
    transition: ease-in-out all 0.2s;
}
.techStack-btn--voice {
    border-color: #50E3C2;
    color: #50E3C2;
}
.techStack-btn--voice:hover, .techStack-btn--voice:focus {
    border-color: #50E3C2;
    color: #ffffff;
    background: #50E3C2;
}
.techStack-btn--voice--active {
    border-color: #50E3C2;
    color: #ffffff;
    background: #50E3C2;
}
.techStack-btn--draw {
    border-color: #B35FFC;
    color: #B35FFC;
}
.techStack-btn--draw:hover, .techStack-btn--draw:focus {
    border-color: #B35FFC;
    color: #ffffff;
    background: #B35FFC;
}
.techStack-btn--draw--active {
    border-color: #B35FFC;
    color: #ffffff;
    background: #B35FFC;
}
.techStack-btn--image {
    border-color: #16D2FF;
    color: #16D2FF;
}
.techStack-btn--image:hover, .techStack-btn--image:focus {
    border-color: #16D2FF;
    color: #ffffff;
    background: #16D2FF;
}
.techStack-btn--image--active {
    border-color: #16D2FF;
    color: #ffffff;
    background: #16D2FF;
}
.techStack-btn--pdf {
    border-color: #FF00C2;
    color: #FF00C2;
}
.techStack-btn--pdf:hover, .techStack-btn--pdf:focus {
    border-color: #FF00C2;
    color: #ffffff;
    background: #FF00C2;
}
.techStack-btn--pdf--active {
    border-color: #FF00C2;
    color: #ffffff;
    background: #FF00C2;
}
.techStack-btn--export {
    border-color: #001EFF;
    color: #001EFF;
}
.techStack-btn--export:hover, .techStack-btn--export:focus {
    border-color: #001EFF;
    color: #ffffff;
    background: #001EFF;
}
.techStack-btn--export--active {
    border-color: #001EFF;
    color: #ffffff;
    background: #001EFF;
}
.techStack-btn--playback {
    border-color: #FF003D;
    color: #FF003D;
}
.techStack-btn--playback:hover, .techStack-btn--playback:focus {
    border-color: #FF003D;
    color: #ffffff;
    background: #FF003D;
}
.techStack-btn--playback--active {
    border-color: #FF003D;
    color: #ffffff;
    background: #FF003D;
}

.techStack-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
.techStack-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: none;
}
#techStack-img--voice {
    display: block;
}
.techStack-details {
    width: 100%;
    margin-top: 20px;
}
.techStack-list {
    display: none;
}
#techStack-details--voice {
    display: block;
}
.techStack-list li {
    margin-bottom: 2rem;
}

/* Quiz */
.quizLanding {
    color: #ffffff;
    min-height: 100vh;
    background-color: #222222;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23ffffff' fill-opacity='0.07' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
}
.quizNav {
    box-sizing: border-box;
    width: 100vw;
    padding: 0 60px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 70px;
    margin-top: 20px;
    margin-bottom: 30px;
}
.navBar-logo--light {
    filter: invert(1);
}
.navBar-link--quiz {
    color: #ffffff;
}
.quizLanding-title {
    margin-top: 100px;
    color: #ffffff;
    font-weight: 700;
}
.quizLanding-blurb {
    color: #ffffff;
    margin: 20px auto;
}
.button--quizLanding {
    background: #ffffff;
    color: #222222;
}
.quizContent {
    min-height: 100vh;
}
.quizNav-button {
  display: inline-block;
  height: 42px;
  width: 118px;
  color: #222222;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #222222;
  cursor: pointer;
  box-sizing: border-box;
  transition: ease-in-out all 0.2s;
}
.quizNav-button:hover {
    background: #222222;
    color: #ffffff;
}
.quizNav-button--light {
    color: #ffffff;
    border: 1px solid #ffffff;
}
.quizNav-button--light:hover {
    background: #ffffff;
    color: #222222;
}
.quizNav-link {
    color: #222222;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 4px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.quizNav-link:hover {
    color: #222222;
    border-bottom: 2px solid #222222;
}
.quizNav-link--light{
    color: #ffffff;
}
.quizNav-link--light:hover {
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
}
.quizBadge {
    width: 100%;
    margin: 0 auto;
    filter: invert(1);
}
.quizContent-number {
    font-size: 4rem;
    font-weight: 700;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    background: #222222;
    color: #ffffff;
    margin: 60px auto 20px auto;
}
.quizContent-header {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1;
    font-weight: 600;
}

.quizCardTop-container {
    width: 100%;
    box-sizing: border-box;
    margin: -20px 0 30px 0;
    padding: 20px 0;
    background: #ffffff;
    text-align: left;
    min-height: 200px;
}

.quizCard-container {
    width: 90%;
    box-sizing: border-box;
    margin: 10px auto;
    padding: 20px 30px;
    background: #ffffff;
    text-align: left;
    min-height: 250px;
    transition: ease-in-out all 0.2s;
    cursor: pointer;
}
.quizCard-container:hover {
    border-bottom: 10px solid #222222;
}
.quizCard-link {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.87);
}
.quizCard-link:hover {
    color: rgba(0, 0, 0, 0.87);
}
.quizVideo-wrapper {
    position: relative;
    padding-bottom: 52.25%;
    padding-top: 25px;
    height: 0;
}
.quizVideo-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.readyProgress-container {
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
    justify-content: center;
}
.readyProgress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
}
.readyProgress-indicator {
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    margin-top: 2px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    transition: ease-in-out all 0.7s;
    background: transparent;
}
.readyProgress-indicator--active {
    background-color: rgba(0, 0, 0, 0.2);
}
.readyProgress-indicator--pass {
    background-color: #a5d6a7;
}
.readyProgress-indicator--amber {
    background-color: #ffd54f;
}
.readyProgress-text {
    display: none;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

.ready-img {
    width: 60%;
    margin: 30px auto 10px auto;
    max-width: 240px;
}
.readyResult-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
    padding: 8px 40px;
    background: #a5d6a7;
    border-radius: 40px;
}
.readyResult-container--fail {
    background: #ef5350;
}
.readyResult-container--amber {
    background: #ffd54f;
}
.readyResult-icon {
    width: 22px;
    height: auto;
    margin: 0 10px 0 -10px;
}
.readyResult-text {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    color: #ffffff;
}
.readyCopy {
    max-width: 620px;
    margin: 20px auto 30px auto;
}
.readySteps {
    font-size: 18px;
}
.readyForm-input {
    width: 400px;
    display: block;
    margin: 10px auto 30px auto;
}

.readyConnection-results {
    column-count: 2;
    font-size: 1.5rem;
    column-width: 210px;
    width: 440px;
    margin: 10px auto;
}
.readyConnection-results p {
    margin-bottom: 10px;
}

/* Classroom */
.body--classroom {
    background: #fafaff;
    color: #191847;
}
.container--wide {
    max-width: 1200px;
}
.container--fullWidth {
    position: relative;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
}
.classroomSection {
    margin-top: 10px;
    margin-bottom: 30px;
}
.classroomSection--negative {
    top: -150px;
}

.button-classroom--primary {
    background: #2b44ff;
    border-color: #2b44ff;
    color: #ffffff !important;
    transition: ease-in-out all 0.2s;
}
.button-classroom--primary:hover {
    color: #ffffff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.hero--classroom {
    padding-top: 80px;
    margin-bottom: 20px;
}
.link--classroom {
    color: #ffffff;
}
.link--classroom:hover {
    color: #ffffff;
}
.heroText-classroom {
    margin-top: 20px;
}
.img-classroomHero {
    width: 160%;
    margin-left: -25%;
}
.img-tablet {
    width: 100%;
}
.layeredHero {
    position: relative;
    width: 160%;
    margin-left: -25%;
    padding-bottom: 119%;
}
.layeredHero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}
.layeredHero-video {
    position: absolute;
    width: 57%;
    top: 10.5%;
    left: 16.8%;
}
.layeredHero-one { z-index: 1; }
.layeredHero-two { z-index: 2; }
.layeredHero-three { z-index: 3; }

.logo-classroom {
    width: 270px;
    height: auto;
    margin-bottom: 5px;
}
.icon-classroom {
    height: 80px;
    width: auto;
    margin-bottom: -5px;
}
.laptop-classroom {
    width: 200%;
}

.classroomExampleVideo {
    position: relative;
    width: 100%;
    height: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin-bottom: 20px;
}

.classroomCard {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 40px 50px 40px;
    border-top: solid 5px #2b44ff;
    background: #ffffff;
    margin-bottom: 20px;
    min-height: 400px;

}

.classroomTile {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    padding: 20px 20px 20px 10px;
    border-left: solid 5px #2b44ff;
    display: flex;
    align-items: center;
    transition: ease-in-out all 0.2s;
    margin-bottom: 20px;
}
.classroomTile-img {
    width: 50px;
    height: auto;
    margin: 0 20px 0 10px;
}

.classroomNumber {
    width: 100%;
    max-width: 100px;
}

.border--purple { border-color: #1F28CF; }
.border--darkPurple {
    border-color: #2f3676;
    background: #2b44ff;
    color: #ffffff;
}


.stripe-three {
    position: absolute;
    width: 120vw;
    top: -100px;
    left: -10vw;
    background: #191848;
    height: 200px;
    z-index: -1;
    transform: rotate(-6deg);
}
.footer--purple {
    background: #191848;
}

/* Jobs */
.jobs-list {
    display: block;
    list-style-position: outside;
    padding-inline-start: 20px;
}
.jobs-locationText {
    opacity: 0.7;
    margin-top: -15px;
    margin-bottom: 0;
}

.jobsCard {
    display: block;
    text-align: left;
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    padding: 20px;
    cursor: pointer;
    border: 4px solid #222222;
    border-radius: 6px;
    cursor: pointer;
    transition: ease-in-out all 0.2s;
    background: #f9f9f9;
    color: #222222 !important;
    text-decoration: none;
    margin: 20px auto;
}
.jobsCard-title {
    font-weight: 700;
    margin: 0;
}
.jobsCard-sub {
    margin-top: -5px;
    margin-bottom: 10px;
    opacity: 0.7;
}
.jobsCard-link {
    font-weight: 700;
    margin: 0;
}
.jobsCard-divider {
    margin-top: 0;
    margin-bottom: 10px;
    border-width: 0;
    border-top: 2px solid #E1E1E1;
}
.jobsCard-arrow {
    height: 10px;
    width: auto;
    margin-left: 6px;
}
.jobsCard:hover {
    filter: invert(1);
}
.jobsVideoCard {
    background: #162331;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    padding: 4px;
}
.jobsVideo {
    position: relative;
    width: 100%;
    height: auto;
}

.projector-container {
    width: 100vw;
    height: 100vh;
    background: #f5f4f0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.projector-text {
    color: #222222;
    font-weight: 900;
    font-size: 18vw;
}

.announcement {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px 20px 30px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    cursor: pointer; 
    transition: ease-in-out all 0.2s;
    text-decoration: none;
    color: #222222;
    box-sizing: border-box;
    border-top: 5px solid #EA2A46;
}
.announcement:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    color: #222222;
}
.announcement p {
    margin: 0;
}

.announcement--neon {
    background: #112330;
    color: #ffffff;
    border-top: 5px solid #2FFED5;
}
.announcement--neon:hover {
    color: #ffffff;
}

.helpAccordion {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    margin: 20px 0 40px 0;
    border-top: 6px solid #222222;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    cursor: pointer;
    transition: ease-in-out all 0.2s;
}
.helpAccordion:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.helpAccordion-upper {
    padding: 20px 15px 20px 0;
    outline: none !important;
}
.helpAccordion-innerFlex {
    display: flex;
    align-items: center;
}
.helpAccordion-icon {
    position: relative;
    width: 60px;
    height: auto;
    margin: 0 20px 0 20px;
}
.helpAccordion-header {
    margin-bottom: 5px;
    font-weight: 700;
    text-transform: capitalize;
}
.helpAccordion-explainer {
    margin-bottom: 5px;
    opacity: 0.9;
}
.helpAccordion-lower {
    margin-left: 20px;
    padding: 25px 15px 20px 0;
}
summary::-webkit-details-marker {
    display: none;
}
.helpAccordion-divider {
    margin: 0;
}
.helpAccordion-link {
    color: rgba(0,0,0,0.8);
    text-decoration: none;
}
.helpAccordion-link:hover {
    text-decoration: underline;
    color: rgba(0,0,0,0.8);
}

.helpArticle {
    position: relative;
    width: 100%;
    border-top: 6px solid #222222;
    border-radius: 6px;
    padding: 24px 24px;
    box-sizing: border-box;
    background: #ffffff;
}
.helpArticle-top {
    display: flex;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    margin-bottom: 24px;
}
.helpArticle-icon {
    width: 60px;
    height: auto;
}
.helpArticle-body p {  
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: -0.1px;
}
.helpArticle ol {
    font-size: 18px !important;
    list-style: decimal outside;
    padding-left: 20px;
}
.helpArticle ul {
    font-size: 18px !important;
    list-style: disc outside;
    padding-left: 20px;
} 
.helpArticle-body h5 {  
    text-transform: capitalize;
    font-weight: 700;
}
.helpArticle-em {
    font-weight: 700;
}
.helpArticle-image {
    width: 100%;
    border-radius: 6px;
}
.helpArticle-dockIcon {
    height: 36px;
    width: auto;
    vertical-align: bottom;
}
.helpArticle-dockIcon--lg {
    height: 54px;
    width: auto;
    vertical-align: middle;
}
.helpArticle-caption {
    font-size: 14px !important;
    text-align: center;
    font-style: italic;
}
.helpArticle-video { 
    position: relative;
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    margin-bottom: 5px;
    } 
.helpArticle-video iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border-radius: 6px;
    }
.hero--help {
    min-height: 100vh;
}

.smallTable td{
    vertical-align: top;
}
.smallTable p {
    font-size: 12px;
    line-height: 1.4;
}
.smallTable li {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Broadcast Product Page */

.hero--broadcast {
    padding-top: 130px;
}
.broadcastHero {
    width: 100vw;
    margin: 32px 0 96px 0;
    text-align: center;
    position: relative;
}
.broadcastHero-wave {
    position: absolute;
    width: 100%;
    top: -5vw;
    left: 0;
    z-index: -1;
    pointer-events: none;
}
.broadcastHero-waveTop {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.broadcastHero-waveBottom {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.broadcastHero-img {
    width: 90%;
    max-width: 1200px;
}

.broadcastCopy {
    font-size: 20px;
}
.broadcastBandwidth {
    width: 100%;
    box-sizing: border-box;
    background: #f1f1f1;
    border-radius: 4px;
    padding: 40px 40px 16px 40px;
    margin: 24px 0 96px 0;
}
.broadcastBandwidth-section {
    margin-bottom: 32px;
    position: relative;
}
.broadcastBandwidth-stat {
    width: 100%;
}
.broadcastBandwidth-value {
    font-size: 24px;
    font-weight: 900;
    display: inline-block;
    width: 90px;
}
.broadcastBandwidth-bar {
    position: relative;
    display: inline-block;
    width: calc(100% - 100px);
    height: 24px;
    background: #cccccc;
    vertical-align: sub;
    overflow: hidden;
}
.broadcastBandwidth-barFill {
    height: 24px;
    width: 100%;
    position: absolute;
    background: #4c4c4c;
    animation: expand 8s infinite ease-out;
}
.broadcastBandwidth-bar--bramble {
    width: calc( 0.06 * (100% - 100px));
}
.broadcastBandwidth-barFill--bramble {
    background: #808080;
}
.broadcastBandwidth-comparison {
    position: relative;
    margin-top: 30px;
}
.broadcastBandwidth-percentage {
    display: block;
    font-size: 56px;
    font-weight: 900;
    line-height: 48px
}
.broadcastIcon {
    height: 90px;
    width: auto;
    display: block;
}
.broadcastContainer-grey {
    background: #f1f1f1;
    padding-bottom: 20px;
}

.broadcastTools {
    max-width: 60vw;
    margin-bottom: 20px;
}
.laptop--broadcast {
    margin: 30px auto !important;
}

.broadcastMode {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    padding: 40px 30px;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.broadcastModeSelect {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    border: 4px solid #f1f1f1;
    border-radius: 4px;
    text-align: left;
    transition: all ease 0.2s;
    margin-bottom: 10px;
    color: rgba(0,0,0,0.8);
    text-decoration: none;
}
.broadcastModeSelect:hover {
    background: #f1f1f1;
    color: rgba(0,0,0,0.8);
}
.broadcastAudioMode-icon {
    height: 80px;
    width: auto;
    margin-right: 20px; 
}
.broadcastInteractionMode-icon {
    height: 40px;
    width: auto;
    margin: 0 20px 0 10px; 
}

.broadcastMore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.broadcastMore-block {
    width: 30%;
    text-align: center;
}
.broadcastMore-icon {
    width: 90%;
    max-width: 100px;
    display: block;
    margin: 0 auto;
}

.broadcastScreenshot {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;
}
.broadcastScreenshot:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    transform: translateY(-10px);
}

.broadcastMap {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 20px 0;
}
.broadcastMap:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    transform: scale(1.05);
}

/* Case Study Styles */
.caseStudyHero-wave {
    position: absolute;
    width: 100%;
    top: -20vw;
    left: 0;
    z-index: -1;
    pointer-events: none;
}
.caseStudyHero-img {
    width: 100%;
}
.hero--caseStudy {
    padding-top: 120px;
}
.caseStudyContainer-grey {
    background: #f1f1f1;
}

.caseStudy-stat {
    height: 80px;
    width: auto;
}
.caseStudy-logo {
    height: 80px;
    width: auto;
    max-width: 100%;
}
.caseStudy-infographic {
    width: 100%;
    height: auto;
    border-radius: 20px;
}
.caseStudy-waveTop {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.statsCard {
    background: #ffffff;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 10px;
}
.flourish-credit {
    display: none;
}
.flourish-header {
    font-family: "Lato", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link--caseStudy {
    color: #222222;
    transition: ease-in-out 0.2s all;
}
.link--caseStudy:hover {
    color: #3768F1;
}

.caseStudyCard {
    width: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 18px;
    background: #ffffff;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    color: rgba(0,0,0,0.8);
    text-decoration: none;
    transition: ease-in-out all 0.2s;
    cursor: pointer;
    box-shadow:
    0 1.5px 1.5px rgba(0, 0, 0, 0.07),
    0 3.6px 3.6px rgba(0, 0, 0, 0.05),
    0 6.8px 6.8px rgba(0, 0, 0, 0.042),
    0 12.1px 12.1px rgba(0, 0, 0, 0.035),
    0 22.6px 22.6px rgba(0, 0, 0, 0.028),
    0 54px 54px rgba(0, 0, 0, 0.02);
}
.caseStudyCard:hover {
    box-shadow:
    0 1.5px 1.5px rgba(0, 0, 0, 0.02),
    0 3.6px 3.6px rgba(0, 0, 0, 0.028),
    0 6.8px 6.8px rgba(0, 0, 0, 0.035),
    0 12.1px 12.1px rgba(0, 0, 0, 0.042),
    0 22.6px 22.6px rgba(0, 0, 0, 0.05),
    0 54px 54px rgba(0, 0, 0, 0.07);
    color: #3768F1;
}
.caseStudyCard-text {
    padding: 6px;
}
.caseStudyCard-logo {
    height: 36px;
    width: auto;
    margin-top: -8px;
    margin-bottom: 8px;
}
.caseStudyCard-title {
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.2;
}
.caseStudyCard-link {
    margin: 0;
    color: #3768F1;
    font-weight: 700;
}
.caseStudyCard-media {
    margin-left: 6px;
}
.caseStudyCard-img {
    width: auto;
    height: 200px;
    border-radius: 8px;
}

.embed-container-vertical { 
    position: relative; 
    padding-bottom: 177.78%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    border-radius: 10px;
} 
.embed-container-vertical iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

/* Smart Search Feature Page Styles */
.smartSearchGIF {
    width: 100%;
    max-width: 1120px;
    margin: 20px auto;
}
.smartSearchGIF-video {
    width: 100%;
    border-radius: 10px;
}
.smartSearchPlay-video {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.12);
}

.ssArrow {
    position: absolute;
    pointer-events: none;
    display: none;
}
.ssArrow-a {
    top: 118px;
    left: -70px;
}
.ssArrow-b {
    bottom: 240px;
    right: 90px;
}
.ssArrow-c {
    bottom: 230px;
    left: -15px;
}

.ssFeatureSection {
    text-align: center;
}

.smartSearchImg {
    width: 100%;
    border-radius: 10px;
}

.animatedImage {
    width: 100%;
    position: relative;
}
.animatedImage-layer {
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
.animatedImage-layer--1 {
    z-index: 1;
    position: relative;
}
.animatedImage-layer--2 {
    z-index: 2;
}
.animatedImage-layer--3 {
    z-index: 3;
}
.animatedImage-layer--4 {
    z-index: 4;
}
.forgetL1 {
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.12);
}

.ntpLogos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
}
.ntpLogo-img {
    width: 15%;
    margin: 1%;
    min-width: 100px;
}
.ntpScreenshots {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.12);
}

.welcomeHero-img {
    width: 100%;
}
.welcomeIcon-img {
    width: 80%;
    height: auto;
    margin: 0 auto;
    max-width: 120px;
}
.welcomeFeatures-selector {
    display: inline-flex;
    margin-top: -30px;
    flex-wrap: wrap;
    justify-content: center;
}
.welcomeFeatures-option {
    display: inline-flex;
    padding: 16px 32px;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: solid 1px #d4d4d4;
    min-width: 200px;
    box-sizing: border-box;
    cursor: pointer;
    transition: ease-in-out 0.2s all;
    background-color: #eeeeee;
}
.welcomeFeatures-option:hover {
    background-color: #f9f9f9;
}
.welcomeFeatures-option--active {
    display: inline-flex;
    padding: 16px 32px;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: solid 1px #d4d4d4;
    min-width: 200px;
    box-sizing: border-box;
    background-color: #ffffff;
}
.welcomeFeatures-icon {
    width: 32px;
    height: auto;
    margin-right: 4px;
}
.welcomeFeatures-text {
    font-weight: 700;
    margin: 0;
}
.welcomeFeatures-block {
    padding-top: 60px;
    padding-bottom: 120px;
}
.welcomeUpdates-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.welcomeTeam-img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

#quizOne { display: none; }

#getStarted-done { display: none; }
#activate-i-two { display: none; }
#activate-i-three { display: none; }
#activate-i-four { display: none; }
#activate-i-five { display: none; }
#activate-o-two { display: none; }
#activate-o-three { display: none; }
#activate-o-four { display: none; }
#activate-o-five { display: none; }
#activate-o-six { display: none; }

#mobileMenu-close { display: none; }
#mobileMenu { display: none; }

#pingResponse { display: none; }
#pingFront { display: none; }
#roomsResponse { display: none; }
#roomsFront { display: none; }
#reportingResponse { display: none; }
#reportingFront { display: none; }

#pricingTutor { display: none; }
#pricingUS { display: none; }
#switchAgency { display: none; }
#switchUK { display: none; }
#pricingForTutor { display: none; }
#priceSmallUS { display: none; }
#priceGrowingUS { display: none; }
#pricePremierUS { display: none; }
#priceTutorUS { display: none; }
#priceTutorProUS { display: none; }
#hourSmallUS { display: none; }
#hourGrowingUS { display: none; }
#hourPremierUS { display: none; }
#hourTutorUS { display: none; }
#hourTutorProUS { display: none; }

.u-full-width { width: 100%; box-sizing: border-box; }
.u-full-height { min-height: 100vh; }
.u-width-view { width: 100vw; box-sizing: border-box; }
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right { float: right; }
.u-pull-left { float: left; }
.u-marginT-no { margin-top: 0;}
.u-marginT-xs { margin-top: 5px;}
.u-marginT-sm { margin-top: 10px;}
.u-marginT-md { margin-top: 30px;}
.u-marginT-lg { margin-top: 50px;}
.u-marginT-xl { margin-top: 100px;}
.u-marginT-xxl { margin-top: 200px;}
.u-marginB-no { margin-bottom: 0;}
.u-marginB-xs { margin-bottom: 5px;}
.u-marginB-sm { margin-bottom: 10px;}
.u-marginB-md { margin-bottom: 30px;}
.u-marginB-lg { margin-bottom: 50px;}
.u-marginB-xl { margin-bottom: 100px;}
.u-marginB-xxl { margin-bottom: 200px;}
.u-marginR-no { margin-right: 0px;}
.u-marginR-xs { margin-right: 5px;}
.u-marginR-sm { margin-right: 10px;}
.u-marginR-md { margin-right: 30px;}
.u-marginR-lg { margin-right: 50px;}
.u-marginR-xl { margin-right: 100px;}
.u-marginR-xxl { margin-right: 200px;}
.u-marginL-no { margin-left: 0px;}
.u-marginL-xs { margin-left: 5px;}
.u-marginL-sm { margin-left: 10px;}
.u-marginL-md { margin-left: 30px;}
.u-marginL-lg { margin-left: 50px;}
.u-marginL-xl { margin-left: 100px;}
.u-marginL-xxl { margin-left: 200px;}
.u-paddingT-no { padding-top: 0;}
.u-paddingT-xs { padding-top: 5px;}
.u-paddingT-sm { padding-top: 10px;}
.u-paddingT-md { padding-top: 30px;}
.u-paddingT-lg { padding-top: 50px;}
.u-paddingT-xl { padding-top: 100px;}
.u-paddingT-xxl { padding-top: 200px;}
.u-paddingB-no { padding-bottom: 0;}
.u-paddingB-xs { padding-bottom: 5px;}
.u-paddingB-sm { padding-bottom: 10px;}
.u-paddingB-md { padding-bottom: 30px;}
.u-paddingB-lg { padding-bottom: 50px;}
.u-paddingB-xl { padding-bottom: 100px;}
.u-paddingB-xxl { padding-bottom: 200px;}
.u-paddingR-no { padding-right: 0px;}
.u-paddingR-xs { padding-right: 5px;}
.u-paddingR-sm { padding-right: 10px;}
.u-paddingR-md { padding-right: 30px;}
.u-paddingR-lg { padding-right: 50px;}
.u-paddingR-xl { padding-right: 100px;}
.u-paddingR-xxl { padding-right: 200px;}
.u-paddingL-no { padding-left: 0px;}
.u-paddingL-xs { padding-left: 5px;}
.u-paddingL-sm { padding-left: 10px;}
.u-paddingL-md { padding-left: 30px;}
.u-paddingL-lg { padding-left: 50px;}
.u-paddingL-xl { padding-left: 100px;}
.u-paddingL-xxl { padding-left: 200px;}
.u-textAlign-center { text-align: center; }
.u-textAlign-left { text-align: left; }
.u-textAlign-right { text-align: right; }
.u-bold { font-weight: 600; }
.u-extraBold { font-weight: 900; }
.u-lowercase { text-transform: lowercase; }
.u-capitalize {text-transform: capitalize; }
.u-small { font-size: 14px !important; }
.u-italic { font-style: italic !important; }
.u-gold { color: #FECB01 !important; }
.u-silver { color: #97979F !important; }
.u-bronze { color: #CD7E3F !important; }
.u-secondary { color: rgba(0,0,0,0.5)}
.u-invisible { opacity: 0; }
.u-hidden-mobile { display: none; }
.u-hidden-tablet { display: none; }
.u-hidden-tablet-only { display: block; }
.u-hidden {display: none; }
.u-textDecoration-none { text-decoration: none; }
.u-textTransform-none { text-transform: none !important; }
.u-white { color: #fff;}
.u-red { color: #EA2A46;}
.u-invert { filter: invert(1); }
.u-lineHeight-2 { line-height: 2; }
.u-underline { text-decoration: underline; }
.u-relative { position: relative; }
.u-inlineBlock { display: inline-block; }
.u-flex { display: flex; }
.u-alignItems-center { align-items: center; }
.u-flexColumn { display: flex; flex-direction: column; }
.u-wrap { flex-wrap: wrap;}
.u-wrapReverse { flex-wrap: wrap-reverse;}
.u-quote {
    quotes: initial;
}
.u-quote::before {
    content: open-quote;
}
.u-quote::after {
    content: close-quote;
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .customers-badge {
        width: 7%;
    }
    .customers-badge--wide {
        display: block;
    }
    .videoContainer {
        width: 100%;
        height: 281px;
    }
    .videoFrame {
        width: 500px;
        height: 281px;
    }
    .closeButton {
        left: calc(50% + 230px);
    }
    .laptop {
        position: relative;
        width: 584px;
        height: 451px;
        margin-top: -20px;
    }
    .screen {
        top: 24px;
        bottom: 35px;
    }
    .chassis {
        display: block;
    }
    .shadow {
        display: block;
    }
    .testimonial {
        flex-direction: row;
    }
    .testimonial-content {
    margin-left: 10px;
    }
    .testimonial-body {
        margin-bottom: 0;
    }
    .row-productFeatures {
        display: block;
    }
    .row-productFeatureBlocks {
        display: block;
    }
    .u-marginT-xl {
        margin-top: 100px;
    }
    .u-marginT-lg {
        margin-top: 50px;
    }
    .u-hidden-mobile {
        display: block;
    }
    .u-show-mobile {
        display: none;
    }
    .contactForm-container {
        height: 60vh;
        border-radius: 5px;
        padding: 40px;
        max-height: 500px;
    }
    .testimonialCard-outer {
        width: 31.33%;
    }
    .testimonialCard-outer--wide {
        width: 48.5%;
    }
    .testimonialCard-outer--superWide {
        width: 80%;
        margin-left: 10%;
    }
    .blogCard-outer {
        width: 30%;
        margin: 1.5%;
    }
    .blogCard-outer--wide {
        width: 48.5%;
    }
    .blogCard-outer--superWide {
        width: 80%;
        margin-left: 10%;
    }
    .blogPost-outer {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 60px;
        border-radius: 4px;
    }
    .blogPost-inner {
        padding: 60px 100px 20px 100px;
    }
    .blogPost-img {
        width: calc(100% + 200px);
        margin-left: -100px;
    }
    .blogPost-chart {
        width: calc(100% + 200px);
        margin-left: -100px;
    }
    .blogPost-chartHalf {
        width: 49.5%;
    }
    .blogPost-videoWrapper {
        position: relative;
        padding-bottom: 52.25%;
        padding-top: 25px;
        height: 0;
        width: calc(100% + 200px);
        margin-left: -100px;
    }
    .standard-videoWrapper {
        position: relative;
        padding-bottom: 52.25%;
        padding-top: 25px;
        height: 0;
    }
    .blogPost-top {
        border-radius: 4px 4px 0 0;
        padding: 40px 100px 40px 100px;
        flex-wrap: nowrap;
        text-align: left;
        justify-content: space-between;
    }
    .blogPost-headerImage {
        margin-bottom: 0;
        margin-left: 40px;
    }
    .blogCTA-text {
        font-weight: 700;
        font-size: 18px;
    }
    .readyProgress-item {
        width: 120px;
    }
    .readyProgress-text {
        display: inline-block;
    }
    .libraryCard-outer {
        width: 28%;
    }
    .techStack-img {
        width: 46%;
    }
    .techStack-details {
        width: 48%;
    }
    .pricing-subtitle {
        text-align: left;
    }
    .helpAccordion-upper {
        padding-right: 30px;
    }
    .helpAccordion-lower {
        margin-left: 120px;
        padding: 25px 30px 20px 0;
    }
    .helpAccordion-icon {
        margin: 0 30px 0 30px;
    }
    .broadcastBandwidth-comparison {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .customer-outerFlex {
        display: flex;
    }
    .u-hidden-phablet { 
        display: none; 
    }
    .ssFeatureSection {
        text-align: left;
    }
    .pricingOrg-icon--mobile {
        display: none;
    }
    
}
/* Hack laptop for iPad Portrait */
@media (min-width: 550px) and (max-width: 820px) {
    .hero-laptop {
        width: 100% !important;
    }
    .hero-copy {
        width: 100% !important;
        margin-top: 120px;
        margin-left: 0;
    }
    .navBar-right {
        display: none;
    }
    .navBar-mobile {
        display: block;
    }
    #noWorries {
        display: none;
    }
    .u-hidden-tablet-only { 
        display: none; 
    }
}
/* Larger than tablet – increased from 770 to 820 for iPad Air*/
@media (min-width: 821px) {
    .videoContainer {
    width: 100%;
    height: 562px;
    }
    .videoFrame {
        width: 1000px;
        height: 562px;
    }
    .closeButton {
        left: calc(50% + 478px);
    }
    .laptop {
        position: relative;
        width: 520px;
        height: 401px;
        margin-top: -20px;
    }
    .navBar-right {
        display: block;
    }
    .navBar-mobile {
        display: none;
    }
    .hero {
    width: 90%;
    }
    .hero--broadcast {
    width: 90%;
    }
    .hero--caseStudy {
        padding-top: 180px;
    }
    .globe-content {
        width: 82%;
    }
    .u-hidden-tablet {
        display: block;
    }
    .row-productFeatures {
        display: block;
        margin-top: 100px;
    }
    .regionMap-container {
        flex-direction: row;
    }
    .regionMap-img {
        width: 70%;
    }
    .regionMap-row {
        width: 20%;
        flex-direction: column;
    }
    .regionMap-option {
        width: 100%;
    }
    .worldMap-container {
        padding: 50px 0 0 0;
    }
    .heroText-classroom {
        margin-top: 40px;
    }
    .classroomSection {
        margin-top: 10px;
        margin-bottom: 50px;
    }
    #noWorries {
        display: none;
    }
}

/* Larger than Desktop SD */
@media (min-width: 1025px) {
    .laptop {
        position: relative;
        width: 584px;
        height: 451px;
        margin-top: -20px;
    }
    .squareTile--light {
        margin-top: 40px;
    }
    .row-productFeatures {
        display: block;
        margin-top: 100px;
    }
    .heroText-classroom {
        margin-top: 100px;
    }
    #noWorries {
        display: block;
    }
    .ssArrow {
        display: block;
    }
    .ssFeatureSection--lower {
        padding-top: 36px;
    }
}

/* Larger than Desktop HD */
@media (min-width: 1300px) {
    .videoContainer {
    width: 100%;
    height: 720px;
    }
    .videoFrame {
    width: 1281px;
    height: 720px;
    }
    .closeButton {
    left: calc(50% + 622px);
    }
    .navBar-right {
        display: block;
    }
}

/* Tablet and Mobile */
@media (max-width: 770px) {
    .r-tablet-fullWidth {
        min-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}