/* colors */
    
     :root {
        --primary-color-base: #641C5C;
        --primary-color-light: #85367b;
        --primary-color-contrast: #FFFFFF;
        --primary-color-cta: var(--dark-color-base);
        --dark-color-base: #1b1725;
        --dark-color-light: #21222f;
        --dark-color-contrast: #FFFFFF;
        --dark-color-contrast-sub: #a3b3c0;
        --dark-color-cta: var(--primary-color-base);
        --grey-dark: #000000;
        --grey-text: #445B78;
        --grey-header: #657482;
        --grey_sidenote: #b5becc;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      overflow-x: hidden
    }
    
    .primary-color-base {
        color: #3880FF;
    }
    
    .primary-color-light {
        color: #5c97ff;
    }
    
    .primary-color-contrast {
        color: #FFFFFF;
    }
    
    .dark-color-base {
        color: #001B3B;
    }
    
    .dark-color-light {
        color: #0D2E55;
    }
    
    .dark-color-contrast {
        color: #FFFFFF;
    }
    
    .grey-dark {
        color: #000000;
    }
    
    .grey-text {
        color: #445B78;
    }
    
    .grey-header {
        color: #657482;
    }
    
    .grey_sidenote {
        color: #b5becc;
    }
    /* create base styles */
    /* light */
    
    .light .h1,
    .light .h2,
    .light .h3,
    .light .h4,
    .light .h5,
    .light .header {
        color: var(--grey-dark);
    }
    
    .light p, .light li {
        color: var(--grey-text);
    }
    
    .light p.sidenote {
        color: var(--grey_sidenote)
    }
    
    .light a {
        color: var(--dark-color-cta)
    }
    
    .light .underline {
        text-decoration-color: var(--primary-color-base);
    }
    /* primary */
    
    section.primary {
        background-color: var(--primary-color-base);
    }
    
    .primary .h1,
    .primary .h2,
    .primary .h3,
    .primary .h4,
    .primary .h5,
    .primary .header {
        color: var(--primary-color-contrast)
    }
    
    .primary p {
        color: var(--primary-color-contrast)
    }
    
    .primary p.sidenote {
        color: var(--primary-color-contrast)
    }
    
    .primary a {
        text-decoration-color: var(--primary-color-cta);
    }
    
    .primary .underline {
        text-decoration-color: var(--primary-color-cta);
    }
    /* dark */
    
    section.dark, footer.dark {
        background-color: var(--dark-color-base);
    }
    
    .dark .h1,
    .dark .h2,
    .dark .h3,
    .dark .h4,
    .dark .h5,
    .dark .header {
        color: var(--dark-color-contrast)
    }
    
    .dark p, .dark li {
        color: var(--dark-color-contrast-sub)
    }
    
    .dark p.sidenote {
        color: var(--dark-color-contrast)
    }
    
    .dark a {
        color: var(--dark-color-cta)
    }
    
    .dark .underline {
        text-decoration-color: var(--dark-color-cta);
    }
    
    body {
        margin: 0;
        padding: 0;
    }
    
    .wrapper,
    .blog {
        margin-left: auto;
        margin-right: auto;
        width: 95%;
    }
    
    .blog {
        margin-bottom: 200px;
    }
    
    .wrapper.wide {
        max-width: 2000px;
    }
    
    .wrapper.narrow,
    .blog {
        max-width: 750px;
    }
    
    .wrapper.normal {
        max-width: 1100px;
    }
    
    .thumbnail {
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
   
    .h1,
    .h2,
    .h3,
    .h4,
    .header {
        font-family: "Amiri", "sans-serif";
    }
    
    p,
    a,
    li,
    .h5 {
        font-family: "Sen", "sans-serif";
    }

    .h5,
    p,
    a {
        word-break: break-word;
        hyphens: auto;
    }
    
    p {
        font-weight: 400;
    }
    
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .header {
        font-weight: 600;
    }
    
    p.center,
    .h1.center,
    .h2.center,
    .h3.center,
    .h4.center,
    .h5.center {
        text-align: center;
    }

    .sub-title {
      hyphens: none;
      word-break: none;
    }

    /* COLOR */
    
    .color {
        color: #2D60FA;
        transition: color 0.1s ease-in-out;
    }
    
    .color2 {
        color: #2951FB
    }
    
    .white,
    a .white {
        color: white;
    }
    
    .light,
    a:hover.white {
        color: #677481;
    }
    
    .light-bg {
        background: white;
    }
    
    .color-bg {
        background: #2D60FA;
    }
    
    .h1.grey,
    .h2.grey,
    .h3.grey,
    .h4.grey,
    .h5.grey,
    .header.grey,
    .h1 span.grey,
    .h2 span.grey,
    .h3 span.grey,
    .h4 span.grey,
    .h5 span.grey,
    .header span.grey {
        color: #657482;
    }
    
    p.sidenote {
        font-size: 1em;
        color: #b5becc;
    }
    /* Box-shadows */
    
    .box-shadow-blue {
        -webkit-box-shadow: 0px 28px 54px -7px rgba(45, 96, 250, 0.49);
        -moz-box-shadow: 0px 28px 54px -7px rgba(45, 96, 250, 0.49);
        box-shadow: 0px 28px 54px -7px rgba(45, 96, 250, 0.49);
    }
    /* Buttons */
    /* basic a tag styling */
    
    a {
        text-decoration: none;
        transition: all 0.1s ease-in-out;
    }
    
    a:hover {
        cursor: pointer;
    }
    /* btn arrow */
    
    a.arrow {
        font-weight: bold;
    }
    
    a.arrow:after {
        content: ' ➔';
    }
    /* STYLING */
    
    .underline {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
    
    .underline.primary {
        text-decoration-color: var(--primary-color-base);
    }
    
    .underline.dark {
        text-decoration-color: var(--dark-color-base);
    }
    
    .menu {
        font-weight: bold;
        color: var(--grey-header);
        font-size: 0.8em;
    }
    
    header a {
        font-weight: bold;
        color: var(--grey-header)
    }
    
    header a:hover {
        color: var(--primary-color-base)
    }

    /* FLEX */
    
    .column,
    .blog {
        display: flex;
        flex-direction: column;
    }
    
    .column.center {
        justify-content: center;
        align-items: center;
    }
    
    .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .hero {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom;
        margin-bottom: 50px;
    }
    
    @media screen and (min-width:320px) {
        /* smartphones, iPhone, portrait 480x320 phones */
        .wrapper.wide {
            width: 90%;
            max-width: 1900px;
            margin-left: auto;
            margin-right: auto;
        }
        p,
        li {
            font-size: 18px;
            line-height: 1.45em;
            hyphens: auto;
        }

        .sub-title {
          font-size: 22px;
          line-height: 1.45em;
          hyphens: auto;
      }

        .h1 {
          font-size: 3em;
        }
        .h2 {
            font-size: 2.3em;
            font-weight: bold;
            line-height: 1em;
        }
        .h3 {
            font-size: 1.4em;
            margin-bottom: 0.5em;
        }
        .h4 {
            font-size: 1.35em;
            line-height: 1.45em;
        }
        .h5 {
            font-size: 18px;
        }
        .tiny-text {
            letter-spacing: 4px;
            text-transform: uppercase;
            font-size: 12px;
            margin-top: 0;
            margin-bottom: -10px;
            font-weight: bold;
        }
        .xl {
          font-size: 2.4em;
        }
        .xxl {
          font-size: 2.8em;
          hyphens: auto;
          word-break: normal;
        }
        .xxxl {
          font-size: 3.5em;
          hyphens: auto;
          word-break: normal;
        }
        .huge-title {
          font-size: 3em;
          margin: 75px 0 25px 0;
        }

        .only-mobile {
            display: flex;
        }
        .all-desktop,
        .only-tablet,
        .only-ultrawide,
        .only-desktop {
            display: none;
        }
        .not-desktop {
            display: block;
        }
        .from-tablet {
          display: none;
        }
        /* inline icons */
        p img {
            height: 1.4em;
            padding-right: 20px;
        }
        .hero {
            padding: 75px 0 0 0;
            min-height: 550px;
            max-height: 750px;
        }
    }
    
    .iframe-containter {
        width: 100%;
        height: 500px;
    }
    /* TABLETS */
    
    @media screen and (min-width: 641px) {
        /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
        .wrapper.wide {
            width: 90%;
        }
        .h1 {
            font-size: 3em;
        }
        .h2 {
            font-size: 2.5em;
        }
        .h3 {
            font-size: 1.8em;
            margin-bottom: 0.5em;
        }
        .h5,
        p,
        li {
            font-size: 18px;
            line-height: 1.8em;
        }
        .xl {
          font-size: 2.8em;
        }
        .xxl {
          font-size: 3.5em;
        }
        .xxxl {
          font-size: 4.5em;
        }
        .huge-title {
          font-size: 6em;
          margin: 150px 0 50px 0;
        }
        .sub-title {
          font-size: 24px;
        }
        .only-mobile {
            display: none;
        }
        .only-tablet {
            display: block;
        }
        .from-tablet {
            display: flex;
        }
        .hero {
            padding: 75px 0 0 0;
            min-height: 700px;
            max-height: 750px;
        }
    }
    
    @media (min-width:1025px) {
        /* big landscape tablets, laptops, and desktops */
        .h1 {
            font-size: 3em;
        }
        .h2 {
            font-size: 2.7em;
        }
        .h3 {
            font-size: 1.8em;
            margin-bottom: 0.5em;
        }
        .h4 {
            font-size: 1.75em;
            line-height: 1.45em;
        }
        .h5,
        p,
        li {
            font-size: 18px;
            line-height: 1.8em;
        }
        .tiny-text {
            font-size: 14px;
            margin-bottom: -20px;
        }
        .xl {
          font-size: 3em;
        }
        .xxl {
          font-size: 4em;
        }
        .xxxl {
          font-size: 5em;
        }
        .huge-title {
          font-size: 120px;
          margin: 150px 0 50px 0;
        }

        .all-desktop {
            display: flex;
        }
        .only-tablet {
            display: none;
        }
        .not-desktop {
            display: none;
        }
        .hero {
            padding: 130px 0 100px 0;
            min-height: 600px;
            max-height: 750px;
        }
        .only-desktop {
            display: block;
        }
        .only-ultrawide {
            display: none;
        }
        .speech_to_text {
            background-image: url('../img/card_speech_to_text.svg');
            background-size: cover;
            background-repeat: no-repeat;
            padding: 200px 0 200px 0;
            margin-bottom: 0;
        }
    }
    
    @media (min-width:1600px) {
        .hero {
            background-image: url('../img/blue_header_wide.svg');
        }
    }
    
    @media (min-width:2000px) {
        .only-desktop {
            display: none;
        }
        .only-ultrawide {
            display: block;
        }
    }

    img.mockup {
        align-self: center;
        height: 600px;
        transition: all 0.3s ease-in-out;
        border-radius: 10px;
        -webkit-box-shadow: 3px 5px 14px 0px rgba(0, 0, 0, 0.29);
        -moz-box-shadow: 3px 5px 14px 0px rgba(0, 0, 0, 0.29);
        box-shadow: 3px 5px 14px 0px rgba(0, 0, 0, 0.29);
    }

    @media screen and (min-width:320px) {
      .right-section {
        width: 100%;
      }
    }
    @media screen and (min-width:1100px) {
      .right-section {
        width: 75%;
        max-width: 1400px;
      }
    }