*{
    -webkit-font-smoothing: antialiased;
    text-rendering:optimizeLegibility;
  }
  

  :root{
    --menu-height: 81px;
    --heading-color: #162b41;
    --body-color: #34495f;
    --eyeline-color: #34495f;
    --outline-color: #162b41;
    --light-blue-grey: #f1f7fd;
  }

    
  html{scroll-behavior: smooth;}

  body,p{font-size: 15px;  color: var(--body-color);}

  
  .font-body-small{
    font-size: 12px;
    line-height: 1.5em;;
  }

  .show-on-desktop{
    display: block;
  }

  a{text-decoration: none;}

  a.anchor {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}

  h1{line-height: 1.1em;}


  #home-hero{
    background-color: var(--light-blue-grey);
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: center;
  }

  .geo-pattern-2{
    background-image: url(/assets/images/geo-pattern-2.svg);
    background-color: var(--primary-color);
     background-repeat: no-repeat;
    background-size: 120%;
    background-position: center;
  }
 
  #home-hero h1{
    color: #fff;
    font-family: 'Outfit-Heading', sans-serif;
    -webkit-text-stroke: 10px var(--outline-color);
    paint-order: stroke fill;
    stroke-linejoin: round;
    padding-top: 64px;
    letter-spacing: 1px;
  }


  h2.outline-heading{
    color              : #fff;
    -webkit-text-stroke: 9px var(--outline-color);
    paint-order        : stroke fill;
    font-family        : 'Outfit-Heading', sans-serif;
    letter-spacing     : 1px;
    font-size          : 44px;
    text-wrap-style    : balance;
    text-transform: uppercase;
  }


  .color-eyeline{color: var(--eyeline-color)}


  .logo-text{
    font-family:'Outfit-Black', sans-serif;
  }

  .text-wrap-pretty{
    text-wrap-style: pretty;
  }

  .text-wrap-balance{
    text-wrap-style: balance;
  }
  

  .text-shimmer{
    display: flex;
    position: relative;
    background: linear-gradient(
        to right,
        var(--primary-dark-color) 30%,
        var(--primary-color) 60%,
        var(--primary-dark-color) 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 33% auto;
    animation: textShine 3s ease-in-out infinite ;

  }

  @keyframes textShine {
      0% {
          background-position: 0% 50%;
      }
      100% {
          background-position: 100% 50%;
      }
  }


  h1,h2{margin-bottom:var(--margin-small)}
  h2{line-height: 1.2em;}

  h3,h4{line-height: 1.2em;}

  h4{font-size:130%}

  h5 {
      color: var(--body-bold-font);
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
  }

  #main-nav h5{color:var(--heading-color)}
  
  h1,h2,h3,h4{color: var(--heading-color);}
  
  label{font-family: var(--body-font);}

  strong,label{color: var(--body-color)}

  .thick-heading{font-family: 'Outfit-Heading', sans-serif;}

  .inputs:focus ~ .placeholder-label, .inputs:valid ~ .placeholder-label{
    font-size: 16px;
  }

  .inputs{line-height: 1.5em;}

  .form-input{
    margin-bottom: 36px;
  }

  .link{
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
  }



  .header-line{
    display: flex;
    gap:4px;
    width:48px;
    margin:4px 0;
    transform: skewX(-35deg);
    margin-left:5px;
  }

  .header-line:before, .header-line::after{
    content: '';
    height: 6px;
    display: block;
  }

  .header-line:before{
    background: var(--primary-color);
    width: 70%;
  }

  .header-line:after{
    background: var(--accent-color  );
    width: 30%;
  }
  

  .button.primary-accent-gradient{
      background:linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
      border:none;
      padding:14px 12px
  }


  .site-container.overflow-x-hidden{ overflow-x:hidden}


  /*=======================================================
  // BACKGROUNDS
  /======================================================*/

  .bg-dark{
    --heading-color: #d3e3f6;
    --body-color: #9bacc2!important;
    --eyeline-color: #9bacc2;
  }

  .bg-dark .outline-heading{
    -webkit-text-stroke: 9px #000;
  }

  .bg-accent{
    --body-color: rgba(22,43,65,0.8);
    --eyeline-color: rgba(22,43,65,0.8);
  }

  .bg-light-grey{
    background-color: var(--light-blue-grey);
  }

  /*=======================================================
  // ELEMEMTS
  /======================================================*/

  .color-error{
    border-color: var(--red);
    color: var(--red);
    background: #ef44441d;
  }

  .card-item:hover{
    border:1px solid rgba(0,0,0,0.1);
    box-shadow: var(--elevation);
    transform: translate3d(0,-5px,0);

  }

  .card-item .fa{
    color: var(--body-color);
  }

  .card-item:hover .fa, .card-item:hover strong{
    color: var(--primary-color);
  }

  .geo-header-container article{
    position: relative;
    z-index: 1;
  }

  .geo-pattern-visual{
    width: 120%;
    display: block;
    position: absolute;
    inset: 0;
    transform: translate3d(-5%,-40%,0);
  }

  /*=== Mailer & Contact ===*/

  .mailer-log{
      display:none;
  }

  .mailer-log.show{
      display:block;
  }

  .contact-finish{
      z-index: -1;
      visibility: hidden;
      transition: 0.3s ease-in;
  }

  .contact-finish .padding{
      transform: translate3d(10%,0,0);
      opacity: 0;
  }

  .contact-finish.show{
      z-index: 1;
      visibility: visible;
      opacity: 1;
  }

  .contact-finish.show .padding{
      transform: translate3d(0,0,0);
      transition: 0.3s ease-in;
      transition-delay: 0.15s;
      opacity: 1;
  }

  label{font-family: var(--body-bold-font);}

  .field-icon {
    position: absolute;
    top: auto;
    bottom: 11px;
    right: 0;
    font-size: 17px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .label-checkbox {
      display: grid;
      grid-template-columns: 21px 1fr 16px;
      gap: 12px;
      padding-bottom: var(--padding-small);
      align-items: center;
      line-height: 1em;
  }

  .label-checkbox .fa {
      font-size: 17px;
      color: #888;
  }

  .label-checkbox p {
    line-height: 1.5em;
    margin-top: -5px;
  }

  .remark-input{display: none;}

  .candidate-card{
    position: absolute;
    width:280px; 
    height:420px;
  }

  .candidate-card.one{
    top: 15vh;
    left: 2.5vw;
    --rotation: -15deg;
    transform: rotate(var(--rotation)) translate3d(0,0,0);
  }

  .candidate-card.two{
    top: 15vh;
    right: 2.5vw;
    --rotation: 15deg;
    transform: rotate(var(--rotation)) translate3d(0,0,0);
  }


  .candidate-icon{
    width:92px; 
    height:92px; 
    margin:var(--margin) auto var(--margin-small);
    padding:4px;
  }
  .candidate-icon img{
    width:100%; 
    height:100%; 
    object-fit:cover; 
    border-radius:50%;
    filter: grayscale(1) brightness(110%)
  }


  .candidate-card-slide{
    opacity: 0;
  }


  .candidate-card-slide .candidate-icon{
    opacity: 0;
  }

  .candidate-card-slide h4,
  .candidate-card-slide span,
  .candidate-card-slide p{
    transform: translateY(8px);
    opacity: 0;
    display: block;
  }

  .candidate-card-slide h4{
    transition-delay: 0.2s;
  }

  .candidate-card-slide .candidate-icon{
    transition-delay: 0.2s;
  }

  .candidate-card-slide span{
    transition-delay: 0.3s;
  }

  .candidate-card-slide p{
    transition-delay: 0.4s;
  }

  .candidate-card-slide.show{
    opacity: 1;
  }


  .candidate-card-slide.show h4,
  .candidate-card-slide.show span,
  .candidate-card-slide.show p{
    transform: translateY(0);
    opacity: 1;
  }

  .candidate-card-slide.show .candidate-icon.loaded{
    opacity: 1;
  }


  .card-nav{
    display: inline-flex ;
    justify-items: center;
    justify-content: center;
    gap:4px
  }
  .card-nav a{
    border-radius: 28px;
    width:8px;
    height: 8px;
    background:var(--primary-color);
    filter: grayscale(1);
    transition-property: background, width, filter;
    cursor: pointer;
  }

  .card-nav a.selected{
    width:20px;
    filter: grayscale(0); 
  }

  @keyframes float-card{

      0%{
          transform: rotate(var(--rotation)) translate3d(0,0,0);
          box-shadow: var(--elevation-medium);
      }
      50%{
          transform: rotate(var(--rotation)) translate3d(0,-1%,0);
          box-shadow: var(--elevation-high);
      }
      100%{
          transform: rotate(var(--rotation)) translate3d(0,0,0);
          box-shadow: var(--elevation-medium);
      }
  }

  


  .feature-hero{
    max-height: 63vh;
  }

  .feature-hero figure{
    height:69vh; z-index:1; overflow:initial
  }

  .feature-hero figure img{
    width:150%!important; max-width:150%!important; height:auto; transform:translate(-10%,10%)
  }

  .hero-wrapper{
      perspective-origin: 50%;
      max-width: 1280px;
      width: 100%;
      margin:-60px auto 0;
      z-index: 1;
      align-items: center;
      max-height: -webkit-fill-available;
      height: 90vh;
  }

  .dotted-background{
    background:url(/assets/images/pattern.svg);
    background-repeat: repeat-x;
    background-position: top center;
    background-size: 512px;
  }

  

  .dotted-background-white{
    background:url(/assets/images/pattern-white.svg);
    background-repeat: repeat;
    background-position: top center;
    background-size: 512px;
  }

  .hero-title{font-size: 320%; font-family: var(--h1-font); line-height: 1.1em;}



  .border-bottom-dash{border-bottom: 1px dashed rgba(0,0,0,0.1);}

  .border-bottom-dash.font-body-large{
    margin-bottom: var(--margin-medium); 
    padding-bottom: var(--padding-medium);
  }


  .defer-media-load{
    opacity: 0;
    transform: translate3d(10%,0,0);
  }

  .defer-media-load.loaded{
    opacity: 1;
    transform: translate3d(0%,0,0);
  }

  img:not([src]) {
    visibility: hidden;
 }

  /*=======================================================
  // ICONS / LOGOS
  /======================================================*/

  .icon-size-44{
    width:44px;
    height: 44px;
  }

  .icon-stack{
      width:280px; 
      height:280px; 
      margin-top:-10%; 
      box-shadow:0 7px 0 #849aa8; 
      transform: rotateX(45deg); 
      border-radius:15%;
      position: relative;
      z-index: 1;
  }



  
  
  @keyframes fade-in {
    0%{opacity: 0;}
    100%{opacity: 1;}
    
  }



  .badge-label{
    font-size:8px;
    border-radius: 45px;
    padding:4px 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background:var(--accent-color);
    color: #fff;

  }

  /*=======================================================
  // BUTTONS
  /======================================================*/


  .outline-button-small{
    padding: 8px 14px;
    max-width: 180px;
  }
  .button-small{
    padding:12px 16px;
    max-width: 190px;
    border-radius: 20px;
    position: relative;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s transform;
    z-index: 1;
  }




  .text-button-small{
    font-family: var(--body-bold-font);
  }

  .text-button-small.align-left{
    padding-left:0;
    text-align: left;
    
  }

  .button-with-icon{
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 190px;
  }

  .button-with-icon .fa{
    font-family: 'Fontawesome';
    font-size: 15px;
    transition: .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    position: relative;
  }

  
  .button-with-icon:hover .fa{
    transform: translate3d(50%,0,0);
  }

  .button{
    padding:12px
  }

  .button.connecting:after{
      box-sizing: border-box;
      width: 32px;
      height: 32px;
      border-radius: 100%;
      border: 2px solid rgba(255, 255, 255, 0);
      border-top-color: #fff;
      -webkit-animation: turn 1s infinite linear;
      animation: turn 1s infinite linear;
      display:block;
      content:"";
      text-indent: -9999px;
      background: none;
  }	 

  .button.connecting:after{position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; }

  /*=======================================================
  // BACKGROUNDS
  /======================================================*/
  

  /*=======================================================
  // NAV
  /======================================================*/

  #main-nav{
      position: sticky; 
      top:var(--margin-small);
      z-index: 2;
      border: 1px solid transparent;
      max-width: 1220px;
      margin-left:auto;
      margin-right: auto;
      transition: 
        .4s cubic-bezier(0.075, 0.82, 0.165, 1);

  }

  .bg-translucent{
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(25px);
     -webkit-backdrop-filter: blur(25px);
  }
  


  #main-nav.scrolled, #mobile-nav.scrolled{
    border:1px solid rgba(0,0,0,0.1);
    box-shadow: var(--elevation-high);
  }

  .menu > a{
      display: block;
      font-size: 90%;
      font-family: var(--body-bold-font);
      text-transform: uppercase;
      padding:var(--padding-small) var(--padding);
      color: #000;
      cursor: pointer;
  }


  /* === Sub Nav === */
  #main-nav .menu a{
    font-family: var(--body-bold-font);
  }


  #mobile-nav{
      position:sticky;
      top:12px;
      left:0;
      right:0;
      z-index: 4;
      border: 1px solid transparent;
    }

    #mobile-nav.bg-white{
        box-shadow: var(--elevation-high);
    }

    #mobile-nav-icon{
        padding:8px 12px;
        border-radius:4px;
        background:#1B9CFC2f;
        color: var(--primary-color);
    }


  #mobile-nav-modal{
      position: fixed;
      inset: 0 0;
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(3px);
      z-index: -1;
      visibility: hidden;
      opacity: 0;
      
  }


  #mobile-nav-modal.show{
      z-index: 5;
      visibility: visible;
      opacity: 1;
  }

  #mobile-nav-modal-inner{
      position: fixed;
      top:0;
      bottom: 0;
      left:10vw;
      right:0;
      opacity: 0;
      transform: translate3d(10%,0%,0);
      border-radius: var(--radius) 0 0 var(--radius);
  }

  #mobile-nav-modal.show #mobile-nav-modal-inner{

      opacity: 1;
      transform: translate3d(0,0%,0);
  }
  

  #mobile-nav-modal .sub-nav-item{
    display: grid;
    grid-template-columns:24px 1fr!important;
    padding:var(--padding-xsmall) 0;
    align-items: center;
    line-height: 1.2em;
    gap: 12px;
  }

  #mobile-nav-modal .sub-nav-item .fa{font-size: 17px; justify-self: center;}
  #mobile-nav-modal .sub-nav-item span{
    font-size: 12px;
  }

  #mobile-nav-modal .sub-nav-item strong{
    font-size: 14px;
  }

  .sub-nav-item span {
      color: #5d656d;
  }




  


  /*=======================================================
  // LISTS
  /======================================================*/
  
  .check-list-grid{
    display:inline-grid;
    grid-template-columns: 1fr 1fr; 
    column-gap:16px;
  }

  .check-list-item{
    font-size: 95%;
    display: flex;
    gap:8px;
    margin-bottom: var(--margin-small);
  }

  .check-list-item .fa{font-size: 17px;}

  /*=======================================================
  // GRIDS
  /======================================================*/

  .grid-title-list{
    grid-template-columns: 200px 1fr;
  }

  .grid-auto-40{
    grid-template-columns: 1fr 40%; 
  }

  /*=== Components Grid ===*/

  .compontent-item{
    padding: var(--padding-small) var(--padding);
    border-radius: 10px;
    transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .compontent-item:hover{
    transform: translate3d(0,-5%,0);
    box-shadow: var(--elevation-high);
    background: #fff;
  }

  .component-item-icon{
    position: relative;
    width: 44px;
    height: 44px;
    margin: var(--margin-xsmall) auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }

  .component-item-icon::after{
    background: var(--accent-color);
    content: ' ';
    position: absolute;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0) scale(0);
    opacity: 0;
    transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }


  .compontent-item:hover .component-item-icon{
    animation: float-hover 1s linear infinite;
  }

  @keyframes float-hover{
    0%{
        transform:translate3d(0%,-0%,0)
    }
    50%{
        transform:translate3d(0%,-10%,0)
    }
    100%{
        transform:translate3d(0%,0%,0)
    }
  }

  .compontent-item:hover .component-item-icon::after{
    transform: translate3d(-50%,-50%,0) scale(1);
    opacity: 1;
  }

  .compontent-item:hover .component-item-icon .fa{
    color: #fff!important;
    font-size: 17px;
    position: relative;
    z-index: 1;
  }


  /*=== Features Grid ===*/
  .features-grid .fa{padding-top:var(--padding-small)}


  /*=== Layout Grids ===*/

  .grid-45-auto{grid-template-columns: 45% 1fr;}

  .grid-x4{grid-template-columns: 1fr 1fr 1fr 1fr;}
  .grid-x3{grid-template-columns: 1fr 1fr 1fr;}
  .grid-x2{grid-template-columns: 50% 50%;}
  .grid-65-auto{
    grid-template-columns: 65% 1fr; 
    gap:28px;
    max-width:1280px; 
    width:100%; 
    margin:0 auto;
    z-index:1
  }

  .grid-60-auto{
    grid-template-columns: 60% 1fr; gap:30px
  }

  .grid-auto-30{
    grid-template-columns: 1fr 30%;
  }

  .snippet-grid{
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr; 
    gap:28px
  }

  .snippet-grid.x3{
    grid-template-columns:1fr 1fr 1fr; 
  }
 

  .divided-grid > div,
  .snippet-grid.divided > div{
    padding:0 16px;
    border-left: 1px dashed rgba(0,0,0,0.1);
  }

  .bg-dark .divided-grid > div,
  .bg-dark .snippet-grid.divided > div{
    border-left: 1px dashed rgba(255,255,255,0.1);
  }


  .divided-grid .fa{margin-top: var(--margin-small);}

  .snippet-grid.x2{
    grid-template-columns:1fr 1fr; 
  }


  .snippet-grid h5{font-size: 100%;}



  /*=======================================================
  // PRICING TABLE
  /======================================================*/

  .pricing-table-header{
      border-radius: 4px;
      padding:44px!important;
      color: #fff;
  }

  .pricing-table-header h3{
      color: #fff;
  }

  .pricing-table-header span,
  .pricing-table-header strong{
      color: #fff;
  }

  .pricing-table-row.grid{
      font-size: 90%;
      grid-template-columns:15px 1fr!important; 
      gap:8px!important
  }

  .pricing-table-row i{
      font-size:15px;
      
  }

  .pricing-table-row .fa-check-circle{
      color:var(--accent-color)
  }

  .pricing-table-column:nth-child(2){
      z-index:1; transform:translate3d(0,-18px,0)
  }

  .pricing-table-column:nth-child(1) .fa-check-circle{
      color:var(--primary-color)
  }

  .pricing-table-column:nth-child(3) .fa-check-circle{
      color:var(--dark-color)
  }

  .pricing-table-column:nth-child(3) > .padding-small{
      padding-left:28px
  }

  .pricing-table-column:nth-child(1) .pricing-table-header{
      background: var(--primary-color) url(/assets/images/wave-pattern-white-2.svg); 
  }

  .pricing-table-column:nth-child(2) .pricing-table-header{
      background: var(--accent-color) url(/assets/images/wave-pattern-white.svg); 
  }

  .pricing-table-column:nth-child(3) .pricing-table-header{
      background: var(--dark-color) url(/assets/images/wave-pattern-white-3.svg); 
  }


  /*=======================================================
  // WHITE PAPER STYLES
  /======================================================*/

  .article,.article p{
      font-size: 17px;
      line-height: 1.7em;
  }
  

  .article-contents ul{
      list-style: none;
      font-size:13px;
      
  }

  

  .article-contents li{
      margin-top: 8px;
  }

  .article h2{
      font-size: 140%;
      margin:0;
      padding-top:44px;
      padding-bottom:var(--padding-small);
      clear:both;

  }

  .article h3{
      font-size:100%;
      padding-top: var(--margin-medium);
      font-family: var(--body-bold-font);
      padding-bottom: var(--margin-xsmall);
      margin-bottom: 0
  }


  .article ul{
      list-style: none;
      padding:0 var(--padding-small);
  }

  .article ol{
      padding:0 var(--padding-small);
  }

  .article li{
      margin-bottom: var(--margin-small);
  }

  .citations li {
    margin-bottom: 8px;
    word-break: break-all;
}


  .article a, .citations a, .article-contents a{
      color:var(--primary-color);
  }

  .list-tiles{
      display: flex;
      flex-wrap: wrap;
      padding: 16px 0 32px ;
  }

  .list-tiles > div{
      width:200px;
      font-size: 15px;
      line-height: 1.5em;
  }

  .list-tiles > div span{
      margin-top: var(--margin-xsmall);
      display: block;
  }

  .pull-quote{
      margin:0 var(--margin-medium) 16px;
      font-size: 110%;
      position: relative;
      line-height: 1.5em;
      float:right;
      width:40%;
      color:#000;
      font-family:var(--body-bold-font);
  }

  .pull-quote:after{
      content: ' ';
      position: absolute;
      inset:0;
      border: 6px solid #000;
      border-radius: 20px;
  }

  .pull-quote-inner{
      border-radius: 12px 15px 23px 23px;
      padding: 32px;
      background-color:var(--accent-color-50);
      transform: translate3d(12px,12px, 0);
  }

  .pull-quote-char{
      width: 44px;
      height: 0px;
      padding: 22px 0 0;
      text-align: center;
      font-family: sans-serif;
      background:#fff;
      font-size: 600%;
      position: absolute;
      left: 20%;
      top: 0;
      transform: translate(-50%, -50%);
      font-family:sans-serif;
      z-index: 1;
  }

  
  /*=======================================================
  // FOOTER
  /======================================================*/

  .footer-grid{grid-template-columns:1fr 1fr 1fr 1fr; gap:30px; align-items: flex-start;}

  .footer-grid strong{
    color: #d3e3f6!important;
  }

  footer ul{padding-bottom: 20px;}
  footer ul li{list-style: none;}
  footer ul li a{display: block; color: #9bacc2; text-decoration: none; padding:var(--padding-xsmall) 0 0; font-size: 90%;}

  footer span{color: #9bacc2;}

  footer p{font-size: 90%;padding: 0 0 20px;}

  footer a{color: #d3e3f6; text-decoration: none;}

  footer a:hover{color: var(--secondary-color)}


  footer .copyright{font-size: 90%;}


  /*==================================================
    // PRIVACY
    /=================================================*/

    #privacy-cookie{
      position: fixed; 
      bottom:2.5vw; 
      left:2.5vw;
      right: 2.5vw;
      z-index:6; 
      transform: translate3d(0,100%,0);
      opacity: 0;
      transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
      
  }

  #privacy-cookie.show{
      transform: translate3d(0,0%,0);
      opacity: 1;
  }
  
  #privacy-cookie p{margin: 0; padding: 0;}

  #privacy-cookie-grid{
      margin:0 auto; 
      max-width:640px; 
      border-radius:30px; 
      display: grid;
      grid-template-columns: 64px 1fr 42px;
      padding:15px; 
      box-shadow: var(--elevation-high);
      align-items: center;
  }

  .cookie-icon{width: 36px; height: 36px; margin:0; display: flex; align-items: center; justify-items: center;}

  .cookie-icon .fa{font-size: 28px;}


  .single-page, .single-page p{
		font-size: 15px;
	}


	/*=======================================================
  // SINGLE PAGE
  /======================================================*/

	.single-page h3{
		font-size: 100%;
		padding: 28px 0 8px;
		color:var(--heading-color);
	}

	.single-page h2{
		font-size: 180%;
		color:var(--heading-color);
	}

	.single-page ul{
		padding:0 28px;
	}

	.single-page b{
		display: inline-block;
		margin-right: 8px;
	}

	.single-page li{
		list-style: none;
	}

	.single-page a{
		color:var(--primary-color)
	}

	.side-nav ul{
		list-style: none;
	}

	.side-nav h5{
		padding: 8px 8px 8px var(--padding-medium);
	}

	.side-nav li a{
		display: block;
		background:rgba(0,0,0,0.0);
		border-radius: 0 45px 45px 0;
		padding:8px 8px 8px var(--padding-medium);
		color: unset;
	}

	.side-nav li a:hover{
		background:rgba(0,0,0,0.05);
	}

	.side-nav li a.active{
		color: var(--primary-color);
	}

	@media screen and (max-width: 768px) {

		.policy-grid{
			display: flex;
			flex-direction: column-reverse;
		}


		.side-nav{
			border-radius: 10px;
			margin-top:-28px
		}

    .side-nav h5,
    .side-nav li a{
      padding-left:var(--padding)
    }
		
	}

  /*=======================================================
  // ADAPTION
  /======================================================*/

  .show-on-mobile{display:none}

  .reseller-hero-slide{max-height: 880px; overflow: hidden;}

  .grid-with-stack-icon{
    grid-template-columns:600px auto; 
    gap:30px;
    align-items:center
  }

  .brand-grid{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center; 
    gap: 44px;
  }
  

  #get-started-grid{ grid-template-columns:  1fr 1fr; column-gap:60px}

  #get-started-grid > .flex{padding:0 var(--padding-medium)}

  
  
  .process-items{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;
  }

  .process-items article{
    text-align: center;
    transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-property: all;
  }

  .process-items article:hover{
    box-shadow: var(--elevation-high);
    background: var(--dark-color);
    transform: translate3d(0,-5%,0);
    z-index: 1;
  }

  .process-items article p{
    opacity: 0;
  }

  .process-items article:hover .fa{
    font-size: 36px;
    animation: 1s float-hover infinite;
  }

  .process-items article:hover p,
  .process-items article:hover strong{
    color: #fff;
    opacity: 1;
  }

  @media screen and (max-width:1024px) {


    
    
    

    .hero-title,
    h1{font-size: 250%;}
    h2{font-size: 200%;}
    h3{font-size: 160%;}
    
    body,p{font-size: 15px;}

    .font-body-large{font-size: 110%;}


    .icon-stack{
      width: 200px;
      height: 200px;
    }

    .form-grid{
      grid-template-columns: 1fr;
    }

    .grid-45-auto{
      grid-template-columns: 50% 1fr;
    }

  }


  @media screen and (min-width:767px) and (orientation: portrait) {


    
    

    .brand-logo{
      max-width: 28px;
    }

    .show-on-desktop{
      display: none;
    }

    .feature-hero{
      max-height: none;
    }
  
    .feature-hero figure{
      height:auto; 
    }

    .addons-grid{grid-template-columns: 1fr 1fr!important;}

    .pricing-table{
      grid-template-columns: 1fr 1fr 1fr!important;
      margin-left:var(--padding-small);
      margin-right:var(--padding-small);
    }

    .pricing-table-column{
      width: auto!important;
    }

    #sub-nav-container{
      transform: translate3d(-50%,0,0)!important;
    }
    

    .article-contents{
      display: none;
    }
    .article-container{
      display: block!important;
    }

    .double-phone-visual{
      height: 40vh;
    }

    #get-started-grid{grid-template-columns: 1fr 1fr; row-gap: 28px;}

    #get-started-grid > div:first-of-type{grid-column: span 2;}

    .hero-wrapper{
      padding-top: 5vh;
      grid-template-columns: 60% 1fr !important;
    }

    .reseller-hero-slide{max-height: none; overflow: hidden;}

    .check-list-grid{grid-template-columns: 1fr;}

    .product-chooser{
      grid-template-columns: 1fr!important;
    }

    
    .footer-grid{
      grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-grid > a{
      grid-column: span 3;
    }

    .grid-with-stack-icon{
      grid-template-columns: 1fr auto;
    }

    
    .grid-x4{grid-template-columns: 1fr 1fr!important;}

    .product-chooser-item{max-width: 500px; margin: 0 auto;}

    .form-wrapper{ margin: 0 auto;}

    .snippet-grid{
      grid-template-columns: 1fr 1fr;
    }

    

    .phablet-flex-column-reverse{
      display: flex;
      flex-direction: column-reverse;
      gap: 0!important;
    }

    .phablet-flex-column-reverse .visual{
      width: 90%;
      margin: 0 auto;
    }

    .phablet-flex-column-reverse .visual img{
      margin: 0!important;
      width: 100%!important;
    }

    .phablet-flex-column{
      display: flex;
      flex-direction: column;
      gap: 0!important;
    }


    /*=== Multi-shot right */
    .multi-shot-right .visual{
      margin:-28% 0 -21%
    }

    .multi-shot-right .visual img{
      width:450px;
    }


   
    .use-case-grid{
      grid-template-columns: 60% auto;
    }

  }

  

  @media screen and (max-width:767px) {

    .contact-container{
      padding: 44px 28px;
      margin: 0 auto 28px;
      width: calc(100% - 56px);
    }

    .geo-header-container{
      margin-left:calc(0px - var(--padding-medium));
      margin-right:calc(0px - var(--padding-medium));
      padding:28px;
      border-radius: 0!important;
      margin-top: 8px;
    }


    .candidate-card{
      position: relative;
      transform: none!important;
      top:0!important;
      left:0!important;
      margin:28px auto;
    }

    .candidate-card.two{
      display:none
    }

    #geo-pattern{
      width: auto;
      height: 100%;
    }

    .micro-interactions-card{
      width:100%;
      max-width: 380px;
      margin: 0 auto;
      overflow-x: hidden;
    }

    

    .brands-scroll-x{
      justify-content: unset;
      scrollbar-width: none;
    }

    .show-on-desktop{
      display: none;
    }

    .feature-hero figure img{
      transform: none!important;
      margin-left: -33px;
    }

    .feature-hero .grid{
      gap:0!important
    }

    .padding-top-mobile{padding-top:28px;}
    .padding-bottom-mobile{padding-bottom:28px;}

    .video-grid{
      display: flex!important;
      flex-direction: column-reverse;
      gap:0!important
    }

    body.overflow{
      max-height: none!important;
      overflow-y: unset!important;
    }

    .pricing-table{
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      display: flex;
      box-sizing: border-box;
      gap:16px!important;
      justify-content: flex-start;
      padding:0 var(--padding) 28px;
    }

    /* iOS Patches */
    .pricing-table:after{
        content:' ';
        width:var(--padding);
        display:block;
        flex-shrink: 0;
    }

    .pricing-table-column{
      width: 80vw!important;
      scroll-snap-align: center;
      flex-shrink: 0;
      transform: translate3d(0,0,0)!important;
    }

    .double-phone-visual{
      position: relative;
      transform: rotate(0deg);
    }

    .double-phone-visual img{
      position: relative;
      transform: translate3d(0,0,0)!important;
      animation: none!important;
      
    }

    .double-phone-visual img:nth-child(2){
      display: none;
    }

    

    .pull-quote{
        margin: 16px 16px 28px -2px;
        width: calc(100% - 16px);
        float: none;
    }

    .article-container.grid{
      display: block;
    }

    .article-contents{display:none;}

    .article-banner,
    .chart{
      margin-left:calc(0px - var(--padding));
      margin-right:calc(0px - var(--padding));
      border-radius: 0;
    }

    .article img{
      width: calc(100% + var(--padding) + var(--padding)) !important;
      margin-left: calc(0px - var(--padding));
      margin-right: calc(0px - var(--padding));
      border-radius: 0;
    }


    .chart img{
      width: 100%!important;
      margin: 0!important;
    }
    
    .chart canvas{
        width: 100%!important;
    }

    .article-banner{
      width:calc(100% + var(--padding) + var(--padding))!important;
    }

    .list-tiles > div{
      width:calc(42% - var(--padding-small))
    }

    .list-tiles > div span{font-size:13px}
    
    .pricing-table.grid{
      grid-template-columns: 320px!important;
    }

    .pricing-table-column{
        margin-top:44px!important
    }

    .pricing-table-column:nth-child(3) > .padding-small{
      padding-left:var(--padding-small)!important
    }

    .hero-title,
    h1{font-size: 250%;}
    h2{font-size: 200%;}
    h3{font-size: 160%;}


    .reseller-hero-slide{max-height: none;}

    .show-on-mobile{display:block}
    .hide-on-mobile{display: none;}

    .menu{display: none!important;}

   

    /*=== Elements === */

    
    .visual{
      width: 90%!important;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    .visual img{
      max-width: 80% !important;
      height: auto !important;
      width: auto !important;
      display: block;
      margin: 0 auto;
    }


    .multi-shot-visual.visual{
      margin:28px -6% 28px auto!important;
    }


    .stripes{z-index: -1; opacity: 0.3;}
    .app-peek{display: none;}

    .multi-shot{
      position: relative;
    }

    .multi-shot .position-absolute{
      position: static;
    }

    .multi-shot img{
      width: 100%!important;
    }

    

    .form-wrapper .bg-dark.radius{border-radius: var(--radius) var(--radius) 0 0;}

    .single-page{padding-top: 28px;}


    /*=== Flex ===*/
    .button-flex-container{
      flex-wrap: wrap;
    }

    .button-flex-container a{flex-shrink: 0;}

    .mobile-flex-column-reverse{
      display: flex;
      flex-direction: column-reverse;
      gap: 0!important;
    }


    
    /*=== Grids ===*/
    .footer-grid,
    .grid{grid-template-columns: 1fr!important; row-gap: 30px;}

    .snippet-grid,
    .compontents-grid{grid-template-columns: 1fr!important; row-gap: 0;}

    .artboard{display: none}

    .compontent-item{padding: 8px 28px;}

    .check-list-grid{
      grid-template-columns: 1fr!important;
    }

    footer .copyright-wrapper{display: block!important;}

    #get-started-grid > .flex{padding:8px 0}


    .features-grid{gap: 0;}
    .features-grid .fa{margin-top: 0;}

    .divided-grid > div,
    .snippet-grid.divided > div{
      padding:8px 0 ;
      border-left: none!important;
      border-top: 1px dashed rgba(0,0,0,0.1);
    }

    .bg-dark .divided-grid > div,
    .bg-dark .snippet-grid.divided > div{
      border-left: none;
      border-top: 1px dashed rgba(255,255,255,0.1);
    }

    .hero-wrapper{
      padding-top: 10vh;
    }

    .grid-mobile-x2{grid-template-columns: 1fr 1fr!important;}

    .visual{width: 90%!important; margin: 16px auto!important; height: auto!important;}


    .use-case-grid{
      display: flex!important;
      flex-direction: column-reverse!important;
    }

    .use-case-image{
      width: 90vw!important;
      height:90vw!important;
      margin-top:0!important;

    }

    .use-case-image img{
      width: 100%!important;
      height: 100%!important;
      max-width: none!important;
    }


    .product-chooser{
      grid-template-columns: 1fr!important;
    }

    .roadmap .bg-white{position: relative; z-index: 1;}


    .brand-logos{
      grid-template-columns: 90px 90px 90px !important;
      gap: 28px !important;
    }
    


  }


  /*=======================================================
  // ADAPTION
  /======================================================*/


  @media screen and  (prefers-color-scheme: dark)  {

    /*=== Root ===*/

    :root{
      --light-blue-grey: #051d33;
      --heading-color: #d3e3f6;
      --body-color: #9bacc2;
      --outline-color: #000d23;
    }


    /*=== Fonts ===*/
    h1,h2,h3,h4,h5{
      color: #d3e3f6;
    }
    .inputs,
    strong,
    label{color: #9bacc2;}


    .inputs::placeholder{
      opacity: 0.3;
    }

    .sub-nav-item span,
    .tiny-label,
    body,p{
      color: #9bacc2;
    }


    .menu > span,.sub-nav-item strong{
      color: #d3e3f6;
    }

    .geo-header-container p{
      color: #34495f;
    }

    /*=== Backgrounds ===*/
    .bg-dark{
      background:var(--dark-dark-color);
    }

    .bg-translucent{
      background: rgba(22,43,57,0.1);
    }

    .dotted-background{
      background:url(/assets/images/pattern-white.svg);
      background-repeat: repeat-x;
      background-position: top center;
      background-size: 512px;
    }

    



    .pull-quote-char {
      background: var(--dark-color);
      color: #fff;
    }

    .pull-quote{
      color: #fff;
    }

   

    .pull-quote:after{
      border-color: #fff;
    }


    /*=== Borders ===*/
    .divided-grid > div,
    .snippet-grid.divided > div{
      border-left: 1px dashed rgba(255,255,255,0.1);
    }

    fieldset,.border, .border-left, .border-top,.border-bottom{border-color: rgba(255, 255, 255, 0.05);}

    #main-nav.scrolled, #mobile-nav.scrolled{
      border-color: rgba(255,255,255,0.1);
    }

    fieldset{border-bottom: 1px solid rgba(255,255,255,0.1)}

    .roadmap::after{
        border-left: 2px dashed rgba(255, 255, 255, 0.1);
    }
    
    /*=== Elements ===*/
    

    .brand-logo{
        filter: grayscale(1) invert(1);
    }

    .brand-logos img{
      filter:grayscale(1) brightness(100%) invert(1);
    }

    .brand-icons .fa{color: #fff;}

    #main-nav a{
      color: #fff;
    }

    .bg-white{
      background: var(--dark-color);
    }

    .frost-overlay.light::before{
      background: linear-gradient(0deg,var(--dark-color) 0%,rgba(52, 73, 95,0.3) 100%);
    }
    .frost-overlay.light::after{
      background: linear-gradient(50deg,var(--dark-color) 0%,rgba(52, 73, 95,0.3) 100%);
    }



    #privacy-cookie-grid{border: 1px solid var(--dark-color);}

    .fa.color-dark{
      color:var(--dark-dark-color);
    }

    .pricing-table-column:nth-child(3) .pricing-table-header{
      background-color: var(--dark-dark-color);
    }


  }




  @media print{
    #main-nav{display: none;}
    section{page-break-inside: avoid;}
  }