html{
  font-size: 1vw;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
}
@media screen and (max-width: 1440px) {
   html{
  font-size: 16px;
}
}
body {
  font-family:'SanaSans', sans-serif;
  line-height: 1.3em;
  color: var(--color-black);
  background-color: var(--color-white);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  width: 100%;
}
*{
  box-sizing: border-box;
}
@font-face {
  font-family: 'SanaSans';
  src: local("☺"), url("../fonts/Sans-Regular.woff2") format("woff2");
  font-weight: 400
}
@font-face {
  font-family: 'SanaSans';
  src: local("☺"), url("../fonts/Sans-Medium.woff2") format("woff2");
  font-weight: 700
}
:root {
  --color-black: #212121;
  --color-white: #fff;
  --color-dark-blue: #242431;
  --color-true-blue: #0F008E;
  --color-blue: #002FA7;
  --color-light-blue: #00ADFF;
  --color-true-green: #00F0B4;
  --color-green: #00BF8F;
  --color-true-yellow: #FFEA00;
  --color-yellow: #FFD148;
  --color-red: #EB2949;
  --color-orange: #FF5544;
  --color-gray: #727282;
  --color-light-1: #F7F8FA;
  --color-light-2: #E5E7EB;
  --color-light-3: #D8D9DE;
  --color-dark: #888897;
  --color-dark-2: #727282;
  --color-dark-3: #101112;
  --color-dark-4: #000000;
}
::placeholder{color: var(--color-gray); opacity: 1}
::-moz-selection { background: var(--color-yellow); color: var(--color-black); }
::selection { background: var(--color-yellow); color: var(--color-black); }
h1, .h1 {
    font-size: 3.125rem;
    line-height: 1.2em;
    font-weight: 400;
    letter-spacing: -.03em;
    margin:-.15em -0.06em 2.25rem;
    padding: 0 0 0;
    text-transform: none;
}
@media screen and (max-width: 990px) {
    h1,.h1{
        font-size: 3.125rem;
    }
}
@media screen and (max-width: 760px) {
    h1,.h1{
        font-size: 2.5rem;
    }
}
h2, .h2{
    font-size: 2.25rem;
    line-height: 1.2em;
    font-weight: 400;
    letter-spacing: -.025em;
    margin:-.15em -0.06em 1.5rem;
    padding: 0 0 0;
    text-transform: none;
}
h3,.h3{
    font-size: 2rem;
    line-height: 1.3em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin:-.25em -0.03em 1rem;
    padding: 0 0 0;
    text-transform: none;
}
.big-text{
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.01em;
    margin:-.15em -0.03em 1.5rem;
    padding: 0 0 0;
    text-transform: none;
    color: var(--color-gray);
}
h4,.h4{
    font-size: .8125rem;
    font-weight: 700;
    margin:0 -0.03em 1rem;
    line-height: 1em;
    letter-spacing: .01em;
    text-transform: uppercase;
}
h5,.h5{
    font-size: 1rem;
    font-weight: 400;
    margin:-.15em -0.03em 0.25rem;
    line-height: 1em;
    letter-spacing: -.01em;
    text-transform: none;
}
p, .p {
  margin: -.15em -0.03em 1rem;
  padding: 0;
  font-size: 1rem;
  letter-spacing: -.01em;
  line-height: 1.5em;
  max-width: 40em;
  text-transform: none;
}
p.text, .p.text{
  color: var(--color-gray);
}
img{max-width: 100%; height: auto;}
.progressive-image {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
	overflow: hidden;
}
.progressive-image div {
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: center !important;
}
.progressive-image .overlay {
	position: absolute;
    top: 0;
	opacity: 0;
}
a{
  color:inherit;
  text-decoration: none;
  cursor: pointer;
}
a.big-btn{
    background-color: var(--color-black);
    font-size: 1rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--color-white);
    padding: .75rem 1.5rem;
    display: inline-block;
    margin: 0 0 2rem;
    transition: .2s all ease;
}
a.big-btn:hover{
    background-color: var(--color-dark-3);
}
a.link,.link{
    display: inline-flex;
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.01em;
    margin:-.15em -0.03em 1.5rem;
    padding: 0 2rem 0 0;
    text-transform: none;
    color: var(--color-black);
    position: relative;
    border: 0;
    outline: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family:'SanaSans', sans-serif;
    cursor: pointer;
    
}
a.link::after,.link::after{
    content: "";
    background-image: url(../img/arrow-black.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: right center;
    position: absolute;
    right: .5rem;
    bottom: 0.475rem;
    height: .8125rem;
    width: .8125rem;
    transition: .2s ease transform;
}
a.link:hover::after,.link:hover::after, .hs-button::after{
    transform: translateX(.5rem);
}
a.link.yellow, .link.yellow{
    color: var(--color-yellow);
}
a.link.yellow::after, .link.yellow::after{
    background-image: url(../img/arrow-yellow.svg);
}
a.link.blue, .link.yellow{
    color: var(--color-blue);
}
a.link.blue::after, .link.blue::after{
    background-image: url(../img/arrow-blue.svg);
}
a.link.black,.link.black{
    color: var(--color-black);
}
a.link.black::after,.link.black::after{
    background-image: url(../img/arrow-black.svg);
}
a.link.white, .link.white{
    color: var(--color-white);
}
a.link.white::after, .link.white::after{
    background-image: url(../img/arrow-white.svg);
}
a.link.orange, .link.orange{
    color: var(--color-orange);
}
a.link.orange::after, .link.orange::after{
    background-image: url(../img/arrow-orange.svg);
}
a.link.dark, .link.dark{
    color: var(--color-dark);
}
a.link.dark::after, .link.dark::after{
    background-image: url(../img/arrow-dark.svg);
}
header{
  height: 5rem;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1000;
}

header.darkmode{
  height: 5rem;
  width: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-white);
}
header.docs{
  background-color: var(--color-dark-3);
  position: relative;
}
@media screen and (max-width: 760px) {
    header{
        padding: 1rem 0;
    }
}
a.logo{
  display: flex;
  height: 1.8125rem;
  width: 8.75rem;
  background-image: url(../img/logo.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  margin: 0;
  z-index: 1001;
}
.darkmode a.logo{
  background-image: url(../img/logo-white.svg);
}
.darkmode.on a.logo{
  background-image: url(../img/logo.svg);
}
.nav{
    display: flex;
    z-index: 1001;
}
.nav a {
  line-height: 1.2em;
  padding: 0.35rem 1rem 0.35rem 0;
  margin: -.15em 0;
  margin-right: 2rem;
  font-size: 1.3125rem;
  line-height: 1.2em;
  font-weight: 400;
  letter-spacing: -.02em;
  text-transform: none;
}
.nav a.link::after {
    content: "";
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: right center;
    position: absolute;
    right: 0;
    bottom: 0.7rem;
    height: .8125rem;
    width: .8125rem;
}
a.menu-btn{
  color: var(--color-black);
  transition: .3s ease all;
  position: relative;
  padding-left: 1.75rem;
}
.darkmode a.menu-btn{
  color: var(--color-white);
}
.darkmode.on a.menu-btn{
  color: var(--color-black);
}
.menu-plus{
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  left: 0;
  top: .475rem;
  display: block;
  transition: .2s ease transform;
  background-image: url(../img/plus.svg);
  background-size: 1.25rem 1.25rem;
  background-repeat: no-repeat;
  background-position: center;
}
.on .menu-plus{
  transform: rotate(135deg);
}
.darkmode .menu-plus{
  background-image: url(../img/plus-white.svg);
}
.darkmode .on .menu-plus{
  background-image: url(../img/plus.svg);
}
a.menu-btn:hover{
}
.main-menu{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    z-index: 1000;
    display: none;
}
.menu-container{
    padding: 6rem 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    width: 100%;
}
@media screen and (max-width: 990px) {
   .menu-container{
    display: flex;
    flex-direction: column;
    }
}
.menu-column{
    width: 100%;
    position: relative;
}
.menu-container h4{
    color:var(--color-gray);
    margin-bottom: 1.25rem;
}
.menu-container a{
    display: block;
    font-size: 2.25rem;
    line-height: 1.1em;
    font-weight: 400;
    letter-spacing: -.025em;
    margin:-.15em -0.06em 1.5rem;
    padding: 0 0 0;
    text-transform: none;
    color: var(--color-black);
    transition: .2s ease color;
}
.menu-container a:hover{
    color: var(--color-black);
}
footer{
    padding: 3rem 0 2rem;
    position: relative;
    background-color: var(--color-white);
}
footer a{
  color: var(--color-gray); 
  padding:.375rem 0;
  transition: .2s ease color;
}
footer a:hover{
  color: var(--color-black);
}
.footer-icon{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 12;
  grid-column-end: 13;
  flex-direction: column;
  background-image: url(../img/icon.svg);
  background-repeat: no-repeat;
  background-size: 1.8125rem auto;
  background-position: top right;
  grid-row: 1;
}
.footer-col-1{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 1;
  grid-column-end: 3;
  flex-direction: column;
  grid-row: 1;
}
.footer-col-2{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 3;
  grid-column-end: 5;
  flex-direction: column;
  grid-row: 1;
}
.footer-col-3{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 5;
  grid-column-end: 7;
  flex-direction: column;
  grid-row: 1;
}
.footer-newsletter{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 7;
  grid-column-end: 12;
  flex-direction: column;
  grid-row: 1;
}
.footer-bottom{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--color-light-1);
}
.footer-copy{
    display: flex;
    color: var(--color-gray);
    padding:.375rem 0;
}
.footer-social{
    display: flex;
}
.footer-social a{
    margin:0 1rem;
}
@media screen and (max-width: 990px) {
    .footer-col-1{
      grid-column-start: 1;
      grid-column-end: 4;
      margin-bottom: 3rem;
    }
    .footer-col-2{
      grid-column-start: 4;
      grid-column-end: 7;
      margin-bottom: 3rem;
    }
    .footer-col-3{
      grid-column-start: 7;
      grid-column-end: 10;
      margin-bottom: 3rem;
    }
    .footer-newsletter{
      grid-column-start: 1;
      grid-column-end: 13;
      margin-bottom: 3rem;
      grid-row: 2;
    }
    .footer-icon{
       grid-column-start: 12;
      grid-column-end: 13;
      margin-bottom: 3rem;
    }
    .footer-bottom{
    margin-top: 0rem;
    }
}
@media screen and (max-width: 760px) {
    .footer-col-1{
      grid-column-start: 1;
      grid-column-end: 2;
      margin-bottom: 2rem;
      grid-row: 2;
    }
    .footer-col-2{
      grid-column-start: 2;
      grid-column-end: 3;
      margin-bottom: 2rem;
      grid-row: 2;
    }
    .footer-col-3{
      grid-column-start: 1;
      grid-column-end: 2;
      margin-bottom: 2rem;
      grid-row: 3;
    }
    .footer-newsletter{
      grid-column-start: 1;
      grid-column-end: 3;
      margin-bottom: 2rem;  
      grid-row: 1;
    }
    .footer-icon{
       grid-column-start: 2;
      grid-column-end: 3;
      margin-bottom: 2.5rem;
      background-position: bottom right;
      grid-row: 3;
    }
    .footer-bottom{
    flex-direction: column;
    border-top: 1px solid var(--color-light-2);
    }
    footer{
    padding: 3rem 0 2rem;
    border-top: 16px solid var(--color-light-1);
    }
    .footer-social a{
    margin:0 1rem 0 0;
    }
}

.cookie{
  position: fixed;
  height: 5rem;
  width: 100%;
  bottom: 0;
  left: 0;
  font-size: 1.3125rem;
  line-height: 1.2em;
  font-weight: 400;
  letter-spacing: -.02em;
  background-color: var(--color-white);
  color: var(--color-gray);
  line-height: 5rem;
  padding: 0 ;
  display: flex;
  justify-content: space-between;
  z-index: 2000;
  transform: translateY(5rem);
  transition: .3s ease transform;
}
@media screen and (max-width: 990px) {
    .cookie{
      position: fixed;
      height: auto;
      width: 100%;
      bottom: 0;
      left: 0;
      font-size: 1rem;
      line-height: 1.2em;
      font-weight: 400;
      letter-spacing: -.02em;
      background-color: var(--color-white);
      color: var(--color-black);
      line-height: 1.3em;
      padding:1.5rem 0 ;
      display: flex;
      justify-content: space-between;
      z-index: 2000;
      color: var(--color-gray);
    }
}
#cookie-consent{
  
}
#cookie-consent.show{
    transform: translateY(0rem);
}
.request-block{
    padding: 8rem 0;
}
@media screen and (max-width: 1030px) {
    .request-block{
    padding: 5rem 0;
    }
}
.request-single{
    padding: 5rem 5rem 6rem;
    background-color: var(--color-light-1);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.request-single .email-box{
    max-width: 50rem;
}
@media screen and (max-width: 760px) {
    .request-single{
    padding: 0;
    background-color:transparent;
    width: 100%;
    }
}
.email-box{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    justify-content: flex-start;
    align-items: flex-start;
}
.quote-box{
    padding: 3rem 3rem 2.5rem;
    display: flex;
    color: var(--color-black);
    border: 1px solid var(--color-light-2);
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 24rem;
    max-width: 30rem;
    margin-left: auto;
}

.quote{
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin: -.15em -0.03em 1.5rem;
    max-width: 20rem;
    z-index: 1;
}
@media screen and (max-width: 990px) {
    .quote-box{
    max-width: 100%;
    margin-left: 0;
    min-height: 1rem;
    padding: 1.75rem 2rem 1.5rem;
    }
    .quote{
    max-width: 100%;
    }
}
@media screen and (max-width: 760px) {
    .quote-box{
    padding:3rem 0 0;
    border: 0;
    border-top: 1px solid var(--color-light-2);
    }
    .quote{
    max-width: 100%;
    }
}

.quote-box ul{
    margin: 0 0 1rem;
    padding: 0;
}
.quote-box ul li{
    margin: 0 0 .5rem;
    padding: 0 0 0 1rem;
    list-style: none;
    position: relative;
}
.quote-box ul li::after{
    content: "·";
    position: absolute;
    font-size: 2rem;
    left: 0;
    top: 0;
    color:var(--color-black);
}
.hbspt-form{
    width: 100%;   
}
.hs-submit{
    display: flex;
}
.actions{
    display: inline-flex;
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin: 1rem 0 1.5rem;
    padding: 0.5rem 2rem 0 0;
    text-transform: none;
    color: var(--color-blue);
    position: relative;
    border: 0;
    outline: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'SanaSans', sans-serif;
    cursor: pointer;
}
.actions::after{
    content: "";
    background-image: url(../img/arrow-blue.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: right center;
    position: absolute;
    right: .5rem;
    bottom: 0.3rem;
    height: .8125rem;
    width: .8125rem;
    transition: .2s ease transform;
}
.hs-button{
    display: inline-flex;
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin: -.15em 0;
    padding: 0 0 0 0;
    text-transform: none;
    color: var(--color-blue);
    position: relative;
    border: 0;
    outline: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'SanaSans', sans-serif;
    cursor: pointer;
}
.hs-fieldtype-select{
     position: relative;
}
.hs-fieldtype-select::after{
     position: absolute;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    transform: rotate(90deg);
    display: block;
    background-image: url(../img/arrow-black.svg);
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    right: 0;
    bottom: 1.825rem;
    height: 2.3rem;
    pointer-events: none;
    content: "";
}

.hbspt-form .input{
    position: relative;
}
.hbspt-form ul, .hbspt-form ul li{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.hbspt-form label{
    color: var(--color-gray);  
}
.hbspt-form label.hs-error-msg{
    color: var(--color-red);
    display: none;
}
input.feild, .field input {
    outline: 0;
    border: 0;
    border-bottom: 1px solid var(--color-light-2);
    background-color: transparent;
    font-size: 1.3125rem;
    line-height: 1.2em;
    font-weight: 400;
    letter-spacing: -.02em;
    padding:.5rem 0 1rem;
    font-size: ;
    font-family: 'SanaSans';
    width: 100%;
    margin: 0 0 1rem 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius:0;
}
.feild:hover, .feild:focus{
    border-bottom: 1px solid var(--color-black);
}
.feild:hover::placeholder, .feild:focus::placeholder{
    color: var(--color-black);
}
input.feild.end{
    border-bottom: 1px solid rgba(0,0,0,0);
}
.send-form{
    width: 100%;
}
.form-sent form{
    display: none;
}
.message-sent{
  display: none;
}
.form-sent .message-sent{
  display: block;
}
.select-wrapp{
    position: relative;
}
.select-wrapp::after{
    position: absolute;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    transform: rotate(90deg);
    display: block;
    background-image: url(../img/arrow-black.svg);
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    right: 0;
    top: 0;
    height: 2.3rem;
    pointer-events: none;
    content: "";
}
select {
    outline: 0;
    border: 0;
    color: var(--color-gray)!important;
    border-bottom: 1px solid var(--color-light-2);
    background-color: transparent;
    font-size: 1.3125rem;
    line-height: 1.2em;
    font-weight: 400;
    letter-spacing: -.02em;
    padding: .5rem 0 1rem;
    font-size: ;
    font-family: 'SanaSans';
    width: 100%;
    margin: 0 0 1rem 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    cursor: pointer;
}
select:hover {
    border-bottom: 1px solid var(--color-black);
    color: var(--color-black)!important;
}
select.end {
    border-bottom: 0;
    margin-bottom: 2rem;
}
.radio-wrapper{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.radio-wrap{
    position: relative;
    margin: 0 1rem 1rem 0;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-light-2);
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--color-blue);
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 85rem;
  position: relative;
  justify-content: space-between;
}
.container.column {
    flex-direction: column;
}
@media screen and (max-width: 1380px) {
    .container {
      display: flex;
      margin-left: 0;
      margin-right: 0;
      padding: 0 2rem;
      width: 100%;
      position: relative;
      justify-content: space-between;
    }
}
@media screen and (max-width: 760px) {
    .container {
      padding: 0 1.5rem;
    }
}
.container.center {
  justify-content: center;
}
.page-top{
   position: relative;
   margin: 3rem 0 2rem;
   min-height: 10rem;
}
.page-top .left{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 1;
  grid-column-end: 7;
  flex-direction: column;
  margin-right: 3rem;
}
.page-top .left.new{
  grid-column-end: 8;
}
.page-top .right{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 7;
  grid-column-end: 13;
  flex-direction: column;
  margin-right: 4rem;
}
.page-top .right.new{
  grid-column-start: 9;
}
@media screen and (max-width: 880px) {
 .page-top{
   position: relative;
   margin: 3rem 0 2rem;
}
.page-top .left, .page-top .left.new{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 1;
  grid-column-end: 13;
  flex-direction: column;
  margin-right: 0;
  max-width: 35rem;
  margin-bottom: 2rem;
}
.page-top .right, .page-top .right.new{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 1;
  grid-column-end: 13;
  flex-direction: column;
  margin-right: 0;
  max-width: 35rem;
}
}
.card{
    width: 100%;
    height: 0;
    padding-bottom: 115%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-size: cover;
    background-position: center;
}
.full-card{
    padding-bottom: 115%;
}
.full-card{
    width: 100%;
    height: 0;
    padding-bottom: 52%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-size: cover;
    background-position: center;
    margin-bottom: 2rem;
}
.card-in{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.card-in.bottom{
    justify-content: flex-end;
}
.card-in h2{
    max-width: 26rem;
}
@media screen and (max-width: 760px) {
    .card{
    padding-bottom: 150%;
    }
    .full-card{
        padding-bottom: 130%;
    }
    .card-in{
    padding: 1.5rem 1.5rem 0rem;
    }
    .card-in h2{
        font-size: 1.875rem;
        line-height: 1.2em;
        font-weight: 400;
        letter-spacing: -.02em;
        margin-bottom: 1rem;
        margin-right: 0;
    }
}

.card-in.bottom{
    justify-content: flex-end;
}
.content-box{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
}
.content-box h2, .content-box .h2{
    max-width: 30rem;
}
@media screen and (max-width: 760px) {
    .content-box{
    padding: 1.5rem;
    }
    .content-box h2, .content-box .h2{
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
    margin-right: 0;
    }
}
.container.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 2rem;
}
@media screen and (max-width: 760px) {
    .container.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 1rem;
    }
}
.col-2-1{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  grid-column-start: 1;
  grid-column-end: 7;
  flex-direction: column;
  position: relative;
  margin-bottom: 2rem;
}
.col-2-2{
  display: flex;
  justify-content: flex-start;
  align-items: flex-scctart;
  grid-column-start: 7;
  grid-column-end: 13;
  flex-direction: column;
  position: relative;
  margin-bottom: 2rem;
}
@media screen and (max-width: 990px) {
    .col-2-1,.col-2-2{
      grid-column-start: 1;
      grid-column-end: 13;
      margin-bottom: 2rem;
    }
}
@media screen and (max-width: 760px) {
    .col-2-1,.col-2-2{
      grid-column-start: 1;
      grid-column-end: 3;
      margin-bottom: 2rem;
    }
}
.solution-section{
    margin: 4rem 0;
}
.cases{
  margin: 5rem 0
}
.case-1, .case-2, .case-3{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding-left: 3rem;
  background-image: url(../img/pdf-icon.svg);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: auto 2rem;
}
.case-1{
  grid-column-start: 1;
  grid-column-end: 5;
}
.case-2{
  grid-column-start: 5;
  grid-column-end: 9;
}
.case-3{
  grid-column-start: 9;
  grid-column-end: 13;
}
@media screen and (max-width: 1080px) {
    .cases{
      margin: 5rem 0
    }
    .case-1, .case-2, .case-3{
      grid-column-start: 7;
      grid-column-end: 13;
      margin-bottom: 2rem;
    }
}
@media screen and (max-width: 760px) {
    .cases{
      margin: 5rem 0
    }
    .case-1, .case-2, .case-3{
      grid-column-start: 1;
      grid-column-end: 3;
      margin-bottom: 2rem;
    }
}
.partners{
    position: relative;
    margin: 5rem 0;
}
.partner-grid{
    display: grid;
    width: 100%;
    position: relative;
    grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      grid-column-gap: 2rem;
}

.partner-1,.partner-2,.partner-3,.partner-4{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

@media screen and (max-width: 990px) {
    .partners{
    position: relative;
    margin: 4rem 0 3rem;
    }
    .partner-1, .partner-3,.partner-2, .partner-4{
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 760px) {
    .partner-grid{
        display: grid;
        width: 100%;
        position: relative;
        grid-template-columns: repeat(2, 1fr);
          grid-template-rows: auto;
          grid-column-gap: 2rem;
    }
    .partner-1, .partner-3{
        align-items: flex-start;
    }
    .partner-2, .partner-4{
        align-items: flex-start;
    }
}

.partners a{
  max-width: 20rem;
  text-align: center;
  padding:1rem 2rem;
}
.partners img{
    max-height: 3rem;
    width: auto;
}
@media screen and (max-width: 760px) {
    .partners a{
        display: none;
    }
    .partners img{
    max-height: 2.5rem;
    width: auto;
}
}
.featured-in{
    margin: 4rem 0 0rem;
}
.features{
    display: grid;
    width: 100%;
    position: relative;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 2rem;
}
@media screen and (max-width: 990px) {
   .features{
    grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 760px) {
   .features{
    grid-template-columns: repeat(2, 1fr);
    }
}
.feature-logo{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
}
.feature-logo img{
    position: relative;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.covid-logos-in{
    margin: 0 0 6rem;
    position: relative;
    padding: 0 0 3rem;
    border-bottom: 1px solid var(--color-light-2);
    
}
.covid-logos{
    display: flex;
    width: 100%;
    max-width: 70rem;
    margin: 0 auto;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.covid-logos-title{
    margin: 0 auto 2rem; 
    text-align: center;
}
@media screen and (max-width: 760px) {
   .covid-logos{
    grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 520px) {
   .covid-logos{
    grid-template-columns: repeat(3, 1fr);
    }
}

.covid-logo{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(50% - 2rem);
    margin:0 1rem 1rem;
    max-width: 14rem;
}
.covid-logo img{
    position: relative;
    max-width: 100%;
    width: 100%;
    height: auto;
}
.covid-course ul {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    position: relative;
}
.covid-course ul li{
    margin: 0 0 .5rem;
    padding: 0 0 0 1rem;
    list-style: none;
    position: relative;
}
.covid-course ul li::after{
    content: "·";
    position: absolute;
    font-size: 2rem;
    left: 0;
    top: 0;
    color:var(--color-blue);
}
.double-box{
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 2rem;
}
@media screen and (max-width: 760px) {
   .double-box{
        grid-template-columns: repeat(1, 1fr);
    }
}
.single-box{
    display: grid;
    position: relative;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 2rem;
}
.double-box-feature{
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    margin-bottom: 4rem;
}
.double-box-image{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 3rem;
    margin-bottom: 2rem;
    overflow: hidden;
    background-color: var(--color-light-2);
}

.double-box-image img{
    position: relative;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 35rem;
}
.double-box-feature h4{
    margin-bottom: .5rem;
}
.double-box-feature p{
    color: var(--color-dark-2);
}
.sais{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5rem 0;
    min-height: 54rem;
    background-position: top;
    background-size: cover;
    background-color: var(--color-dark-3);
    background-repeat: no-repeat;
    background-image: url();
}
.sais-title{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    grid-column-start: 1;
    grid-column-end: 7;
    font-size: 3.5rem;
    line-height: 1.2em;
    font-weight: 400;
    letter-spacing: -.03em;
    margin:-.15em -0.06em 2.25rem;
    padding: 0 0 0;
    text-transform: none;
}
.sais-desc{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    grid-column-start: 9;
    grid-column-end: 13;
}
.sais-desc p{
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin:-.15em -0.03em 1.5rem;
    padding: 0 0 0;
    text-transform: none;
}
.sais-event-1, .sais-event-2, .sais-event-3{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding-right: 6rem;
    position: relative;
}
.event-date{
    margin-bottom: .75rem;
    color: var(--color-dark-2);
}
.sais-event-1{
  grid-column-start: 1;
  grid-column-end: 5;
}
.sais-event-2{
  grid-column-start: 5;
  grid-column-end: 9;
}
.sais-event-3{
  grid-column-start: 9;
  grid-column-end: 13;
}
@media screen and (max-width: 990px) {
    .sais{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem 0;
        min-height: 50rem;
        background-position: top center;
        background-size: 100% auto;
        background-color: var(--color-dark-3);
        margin: 0;
    }
    .sais-title{
        grid-column-start: 1;
        grid-column-end: 7;
    }
    .sais-desc{
        grid-column-start: 7;
        grid-column-end: 13;
    }
    .sais-event-1, .sais-event-2, .sais-event-3{
        grid-column-start: 7;
        grid-column-end: 13;
    }
    .sais-event-1, .sais-event-2, .sais-event-3, .sais-desc{
        margin-bottom: 3rem;
    }
}
@media screen and (max-width: 760px) {
    .sais{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem 0;
        min-height: 50rem;
        background-position: center;
        background-size: 100% auto;
        background-color: var(--color-dark-3);
    }
    .sais-title{
    grid-column-start: 1;
    grid-column-end: 3;
    font-size: 3.2rem;
    line-height: 1.2em;
    font-weight: 400;
    letter-spacing: -0.03em;
    text-transform: none;
    margin: -0.15em -0.06em 2.25rem;
    }
    .sais-desc{
        grid-column-start: 1;
        grid-column-end: 3;
        
    }
    .sais-event-1, .sais-event-2, .sais-event-3{
        grid-column-start: 1;
        grid-column-end: 3;
        padding-right: 0;
        padding-left: 6rem;
    }
    .sais-event-1, .sais-event-2, .sais-event-3, .sais-desc{
        margin-bottom: 3rem;
    }
    .event-date{
    position: absolute;
    left: 0;
    top: 0;
    }
}

.video-wrapp{
    width: calc(100% + 3rem);
    height: 0;
    padding-bottom: 50%;
    margin: 0 -1.5rem;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color:var(--color-light-2);
}
@media screen and (max-width: 990px) {
    .video-wrapp{
    padding-bottom: 70%;
    }
}
@media screen and (max-width: 760px) {
    .video-wrapp{
    padding-bottom: 130%;
    }
}
video{
    position: absolute;
    object-fit: cover;
    width: 100.2%    !important;
    height: 100.2%   !important;
    background-position: center;
    transition: .2s opacity ease;
}
.video-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    margin-bottom: 2rem;
}
.video-bg video{
    position: absolute;
    object-fit: cover;
    width: 100% !important;
    height: 100%   !important;
    background-position: center;
}
.video-play{
    height: 2.125rem;
    line-height: 2.125rem;
    font-size: 1.3125rem;
    font-weight: 400;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--color-white);
    width: auto;
    position: relative;
    padding-left: 3rem;
    transition: .2s all ease;
    cursor: pointer;
}
.video-play::after{
    height: 2.125rem;
    width: 2.125rem;
    background-image: url(../img/play-white.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: .2s all ease;
    content: "";
}
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
    display: none;
}
audio::-webkit-media-controls,
video::-webkit-media-controls {
    display: none;
}
.text-section{
    padding: 6rem 0;
}
.text-section-left{
    grid-column-start: 1;
    grid-column-end: 6;
}
.text-section-right{
    grid-column-start: 9;
    grid-column-end: 13;
}
.text-section-li{
    position: relative;
    margin-bottom: 3rem;
}
.text-section-li::after{
    position: absolute;
    left: -3rem;
    top: 0;
    background-image: url(../img/check.svg);
    background-repeat:no-repeat;
    background-position: center;
    background-size: 100% auto;
    height: 2rem;
    width: 2rem;
    content: "";
}
.text-section-li p{
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin:-.15em -0.03em 1.5rem;
    padding: 0 0 0;
    text-transform: none;
    color: var(--color-gray);
}
@media screen and (max-width: 990px) {
    .text-section-left{
        grid-column-start: 1;
        grid-column-end: 7;
    }
    .text-section-li p{
        font-size: 1rem;
        line-height: 1.4em;
    }
}
@media screen and (max-width: 760px) {
    .text-section-left{
        grid-column-start: 1;
        grid-column-end: 3;
        margin-bottom: 3rem;
    }
    .text-section-right{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .text-section-li{
        padding-left: 3rem;
    }
    .text-section-li::after{
        left: 0rem;
    }
    .text-section{
        padding: 3rem 0;
    }
}
.take-over{
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--color-light-1);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}
.pack-shot{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 60rem;
    margin: 4rem auto;
}
.sana-ai-top{
    position: relative;
    margin: 3rem 0 2rem;
}
.sana-ai-top-grid{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 2rem;
}
@media screen and (max-width: 760px) {
    .sana-ai-top-grid{
    position: relative;
    display: flex;
    flex-direction: column;
    }
    .sana-ai-top-grid.reverse{
    flex-direction: column-reverse;
    }
}
.sana-ai-top-text{
    position: relative;
    z-index: 1;
    width: 100%;  
    margin: 10vh 0 0 0;
}
@media screen and (max-width: 1280px) {
    .sana-ai-top-text{
        margin:10vh 0 0 0;
    }
}
@media screen and (max-width: 760px) {
    .sana-ai-top-text{
        margin:0 0 0;
    }
}
@keyframes fadeInAI {
  0% {opacity: 0; transform: translateY(5vw);}
  100% {opacity: 1; transform: translateY(0rem);}
}
.sana-ai-top-img{
    width: 140%;
    height: 90vh;
    max-height: 50rem;
    top:-3rem;
    left: -40%;
    position: relative;
    background-color: var(--color-light-1);
    z-index: 0;
    background-image: url(../img/corp/1.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size:auto 100%;
    animation-name: fadeInAI;
    animation-fill-mode: both;
    animation-timing-function: ease;
    animation-duration: 1.3s;
    animation-delay: 0.2s;
}
@media screen and (max-width: 1380px) {
    .sana-ai-top-img{
        width: 100%;
        left: 0;
        background-position: right bottom;
    }
}
@media screen and (max-width: 760px) {
    .sana-ai-top-img{
        height: 20rem;
        background-position: center bottom;
        background-size:auto 100%;
    }
}

.sana-platform-start{
    position: relative;
    width: calc(100% + 3rem);
    height: 50rem;
    grid-column-gap: 2rem;
    background-color: var(--color-light-1);
    background-image: url(../img/corp/1.png);
    background-repeat:no-repeat;
    background-position: left bottom;
    background-size:auto 90%;
    margin:0 -1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
@media screen and (max-width: 1440px) {
    .sana-platform-start{
        height: 50vw;
    }
}
@media screen and (max-width: 990px) {
    .sana-platform-start{
        height: auto;
        padding-bottom: calc(70vw + 5rem);
        background-position: center bottom;
        background-size:100% auto;
        align-items: flex-start;
    }
}

.sana-platform-start-text{
    width: auto;
    height: 100%;
    max-width: 35rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 3vw;
}
@media screen and (max-width: 1180px) {
    .sana-platform-start-text{
        max-width: 32rem;
        padding:2.5rem 2rem;
         margin-right: 0;
    }
}
@media screen and (max-width: 990px) {
    .sana-platform-start-text{
        margin-right: 0;
        padding:1.5rem 1.5rem;
    }
}
.industries-wrapp{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    position: relative;
    width: calc(100% + 3rem);
    grid-column-gap: 1rem;
    margin:0 -1.5rem 2.5rem;
}
@media screen and (max-width: 990px) {
    .industries-wrapp{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 760px) {
    .industries-wrapp{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}
.industries-box{
    position: relative;
    width: calc(100%);
    height: auto;
    padding:2rem 2rem 100%;
    background-color: var(--color-light-1);
    background-repeat:no-repeat;
    background-position:top left;
    background-size:cover;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
}
@media screen and (max-width: 760px) {
    .industries-box{
        padding:1.5rem 1.5rem 100%;
    }
}
.industries-logo-wrapper{
    width: calc(100% + 2rem);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0rem -1rem 3rem;
    flex-wrap: wrap;
}
.industries-logo-wrapper img{
    width: 100%;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 12rem;
    height: auto;
    margin:1rem;
}
.news-wrapp{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    position: relative;
    width: calc(100%);
    grid-column-gap: 2rem;
    margin:5rem 0 0;
}
@media screen and (max-width: 760px) {
    .news-wrapp{
        grid-template-columns: repeat(1, 1fr);
    }
}
.news-item{
    width: 100%;
    position: relative;
}
.news-item h3{
    max-width: 25rem;
    margin-bottom: 1rem;
}
.news-image{
    position: relative;
    width: 100%;
    padding-bottom: 80%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 1rem 0 1rem;
}
@media screen and (max-width: 760px) {
    .news-image{
        margin: 1rem 0 5rem;
    }
}
.how-it-works{
    position: relative;
    margin: 2rem 0;
}
.how-it-works h3{
    font-weight: normal;
    margin-bottom: 2rem;
}
@media screen and (max-width: 760px) {
    .how-it-works h3{
        font-size: 1.125rem;
    }
}
.how-it-works-img{
    background-color: var(--color-light-2);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:auto;
    padding: 2rem;
}
.how-it-works-video{
    width: 90%;
    height: 0;
    padding-bottom: 56.75%;
    display: flex;
    position: relative;
    left: 0;
    top: 0;
}
.how-it-works-video video{
    
}
.sticky-section-wrapp{
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100vh;
}
.sticky-left{
    position: sticky;
    display: block;
    padding: 3rem 2rem 0 0;
    height: 0rem;
    top: 0;
    width: calc(33% + 2rem);
}
@media screen and (max-width: 990px) {
    .sticky-left{
        display: none;
    }
}
.sticky-left ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.sticky-left ul li{
    padding: 0 0 1rem;
    margin: 0;
}
.sticky-left ul li a{
    color: var(--color-gray);
}
.sticky-left ul li a.active{
    color: var(--color-black);
    font-weight: 700;
}
.sticky-left ul li a.active:before{
    content: "—";
    padding-right: .25rem;
}
.sticky-main{
    width: 100%;
}
.sticky-item{
    padding: 0rem 0 8rem;
    width: 66%;
    margin-left: auto;
}
@media screen and (max-width: 990px) {
    .sticky-item{
    padding: 0rem 0 4rem;
    width: 100%;
    margin-left: auto;
    }
}

.sana-ai-1{
    position: relative;
    margin: 3rem 0 2rem;
}

.sana-ai-1-text{
    position: relative;
    z-index: 1;
    width: 100%;  
    margin: 3rem 0 0;
    padding:0 3rem;
    height: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (max-width: 990px) {
    .sana-ai-1-text{ 
        margin: 0 0 0;
        padding:0;
        height: auto;
        min-height: auto;
    }
}
@media screen and (max-width: 760px) {
    .sana-ai-1-text{ 
    }
}

.sana-ai-img{
    width: 100%;
    height: 45rem;
    left: 0;
    position: relative;
    z-index: 0;
    background-color: var(--color-light-1);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size:100% auto;
}

@media screen and (max-width: 760px) {
    .sana-ai-img{ 
    height: 20rem;
        margin-bottom: 3rem;
    background-position: center bottom;
    background-size:auto 90%;
    }
}

.sana-ai-quote{
    position: relative;
    margin: 3rem 0 0;
    padding: 3rem 0;
    border-top: 1px solid var(--color-light-2);
    color: var(--color-gray);
}
.sana-ai-quote p{
    max-width: 28rem;
}

.sana-ai-features{
    position: relative;
}
@media screen and (max-width: 1080px) {
    .sana-ai-features{
    display: none;
    }
}
.sana-ai-three-grid{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 5rem 0;
}
.sana-ai-three-grid-item-1{
    position: relative;
    margin-bottom: 3rem;
    width: 100%;
    margin-right: 2rem;
}
.sana-ai-three-grid-item-2{
    position: relative;
    margin-bottom: 3rem;
    width: 100%;
    margin-right: 2rem;
}
.sana-ai-three-grid-item-3{
    position: relative;
    margin-bottom: 3rem;
    width: 100%;
}
.sana-ai-three-grid-item-img-1,.sana-ai-three-grid-item-img-2,.sana-ai-three-grid-item-img-3{
    background-color: var(--color-light-1);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: auto 100%;
    margin-bottom: 2rem;
}
.sana-ai-three-grid-item-img-1{
    height: 30rem;
}
.sana-ai-three-grid-item-img-2{
    height: 30rem;
}
.sana-ai-three-grid-item-img-3{
    height: 30rem;
    background-size: 100% auto;
    background-position: center center;
}



.usp{
    color: var(--color-gray);
    padding: 3rem 0 0 0;
    margin-top: 2rem;
    max-width: 12rem;
    position: relative;
}
.usp::after{
    position: absolute;
    left: 0rem;
    top: 0rem;
    background-image: url(../img/check.svg);
    background-repeat:no-repeat;
    background-position: center;
    background-size: 100% auto;
    height: 2rem;
    width: 2rem;
    content: "";
}
.page-top.in-flow{
   position: relative;
   margin: 8rem 0 2rem;
}
.in-flow h2{
    max-width: 28rem;
}
.one{
    grid-column-start: 1;
    grid-column-end: 3;
}
.two{
    grid-column-start: 3;
    grid-column-end: 5;
}
.three{
    grid-column-start: 5;
    grid-column-end: 7;
}
.four{
    grid-column-start: 7;
    grid-column-end: 9;
}
.five{
    grid-column-start: 9;
    grid-column-end: 11;
}
.six{
    grid-column-start: 11;
    grid-column-end: 13;
}
@media screen and (max-width: 990px) {
    .one{
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .two{
        grid-column-start: 5;
        grid-column-end: 9;
    }
    .three{
        grid-column-start: 9;
        grid-column-end: 13;
    }
    .four{
        grid-column-start: 1;
        grid-column-end: 5;
    }
    .five{
        grid-column-start: 5;
        grid-column-end: 9;
    }
    .six{
        grid-column-start: 9;
        grid-column-end: 13;
    }
    .usp{
        padding: 3rem 1rem 0 0;
    }
    .product-hero{
        padding: 0 0 3rem;
    }
    .product-hero-img{
        grid-column-start: 1;
        grid-column-end: 13;
        margin-bottom: 2rem;
    }
    .product-hero-email{
        display: none;
    }
}
@media screen and (max-width: 760px) {
    .one, .three, .five{
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .two, .four, .six{
        grid-column-start: 2;
        grid-column-end: 3;
    }
    .product-hero{
        padding: 0 0 3rem;
    }
    .product-hero-img{
        grid-column-start: 1;
        grid-column-end: 3;
        margin-bottom: 2rem;
    }
    .product-hero-email{
        grid-column-start: 1;
        grid-column-end: 3;
        margin-top: 0;
    }
    .page-top.in-flow{
       position: relative;
       margin: 3rem 0 2rem;
    }
}
.take-over-number{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-light-1);
}
.big-nr-col{
    position: relative;
    display: flex;
    flex-direction:column;
    min-width: 50%;
}
.counter{
    display: flex;
    padding: 5rem 0;
    position:relative;
    width: 100%;
}
.big-nr{
    font-size: 15rem;
    margin: 2.5rem 5rem 0 -0.08em; 
    line-height: 1em;
    color: var(--color-black);
}
.nr-text{
    font-size: 1.3125rem;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin: -.15em -0.03em 4rem;
    padding: 0 0 0;
    text-transform: none;
    color: var(--color-gray);
}
.documentation-wrapp{
    position: fixed;
    width: 100vw;
    height: calc(100vh - 5rem);
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    margin: 0 0 0;
    padding: 3rem 0 4rem;
}
.documentation-wrapp article p{
    color: var(--color-dark-2);
    max-width: 50rem;
}
.documentation-wrapp article ul{
    margin: 1.5rem 0;
    padding: 0;
    position: relative;
}
.documentation-wrapp article ul li{
    margin-bottom: 2rem;
    line-height: 1.5em;
    position: relative;
    padding:0 2rem;
    color: var(--color-dark-2);
}
.documentation-wrapp article{
   max-width: 50rem;
   padding: 0 3rem 1rem;
    margin:0 auto 2rem;
}
.doc-menu{
    position: fixed;
    top: 5rem;
    left: 0;
    max-width: 25rem;
    height:calc(100% - 5rem);
    display: flex;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem 3rem 4rem;
    margin: -.15em 0;
    margin-right: 2rem;
    font-size: 1.3125rem;
    line-height: 1.2em;
    font-weight: 400;
    letter-spacing: -.02em;
    text-transform: none;
}
.doc-menu-subject{
    padding: 1rem 0;
    position: relative;
}
.doc-menu-subject a{
    padding:0 0 .5rem 0;
    position: relative;
    display: block;
    color: var(--color-light-3);
    transition: .2s ease color;
}
.doc-menu-subject a:hover{
    color: var(--color-black);
}
a.doc-menu-subject-title{
    font-size: 1rem;
    color: var(--color-black);
}
.doc-content{
    padding-left: 20rem;
}
.sais-hero{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-height: 50rem;
}
.sais-poster{
    grid-column-start: 1;
    grid-column-end: 7;
    width: 100%;
    height: calc(16rem + 28vw);
    position: relative;
    animation-name: saisPoster;
    animation-fill-mode: both;
    animation-timing-function: ease;
    animation-duration: 1.7s;
}
@keyframes saisPoster {
  0% {opacity: 0; width: calc(200% + 2rem);}
  40% {opacity: 1; width: calc(200% + 2rem);}
  55% {opacity: 1; width: calc(200% + 2rem);}
  100% {opacity: 1;  width: calc(100%);}
}
@keyframes saisPosterMobile {
  0% {opacity: 0; transform: translateY(2rem);}
  100% {opacity: 1; transform: translateY(0);}
}
.sais-hero-text{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    grid-column-start: 7;
    grid-column-end: 13;
    padding: 2rem 0rem;
}
.sais-hero-text-about{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 3rem;
    padding: 3rem;
}
@media screen and (max-width: 1180px) {
   .sais-poster{
        grid-column-start: 1;
        grid-column-end: 6;
        width: 100%;
        height: calc(10rem + 28vw);
        position: relative;
    }
    .sais-hero-text{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        grid-column-start: 7;
        grid-column-end: 13;
        padding: 4rem 0;
    }
    .sais-hero-text-about{
        padding:0 3rem 0 0;
    }
}
@media screen and (max-width: 990px) {
   .sais-poster{
        grid-column-start: 1;
        grid-column-end: 13;
        width: 100%;
        height: calc(10rem + 28vw);
        position: relative;
        animation-name: saisPosterMobile;
        animation-duration: .9s;
        transition-delay: .3s;
    }
    .sais-hero-text{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        grid-column-start: 1;
        grid-column-end: 13;
        padding: 2rem 0;
    }
    .sais-hero-text-about{
        padding:0 0 0 0;
    }
}
.sais-programme{
    padding: 3rem 0;
}
.programme-time{
    grid-column-start: 7;
    grid-column-end: 8;
    margin-bottom: 1rem;
}
.programme-point{
    grid-column-start: 8;
    grid-column-end: 13;
    margin-bottom: 2rem;
}
.about-sais{
    grid-column-start: 1;
    grid-column-end: 5;
    margin-bottom: 2rem;
}
@media screen and (max-width: 990px) {
    .about-sais{
        grid-column-start: 1;
        grid-column-end: 13;
    }
   .programme-time{
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .programme-point{
        grid-column-start: 4;
        grid-column-end: 13;
        margin-bottom: 2rem;
    }
}
@media screen and (max-width: 760px) {
    .about-sais{
        grid-column-start: 1;
        grid-column-end: 3;
    }
   .programme-time{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .programme-point{
        grid-column-start: 1;
        grid-column-end: 3;
        margin-bottom: 2rem;
    }
}
.sais-speakers{
    margin: 6rem 0 4rem;
}
.sais-speakers-title{
    max-width: 29rem;
    margin-bottom: 2rem;
}
.sais-speaker-list{
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 3rem;  
}
@media screen and (max-width: 1280px) {
   .sais-speaker-list{
    grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 870px) {
   .sais-speaker-list{
    grid-template-columns: repeat(1, 1fr);
    }
}
.sais-speaker {
    margin: 1rem 2rem 0 0;
}
.sais-speaker-img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin-bottom: 1rem;
    position: absolute;
}
.sais-speaker-info{
    padding-left: 3rem;
    margin-bottom: 1rem;
}
@media screen and (max-width: 990px) {
   .sais-speakers-title{
    grid-column-start: 1;
    grid-column-end: 13;
    }
}
.san-diego{
    padding: 3rem 0;
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    min-height: 100vh;
    background-image: url(../img/sandiegomap.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-color: var(--color-light-1);
}
.where-text{
    max-width: 20rem;
}
@media screen and (max-width: 990px) {
    .san-diego{
    min-height: 100vh;
    background-size: cover;
    background-position: 20% top;
    }
}
@media screen and (max-width: 550px) {
    .san-diego{
    min-height: calc(70vw + 20rem);
    background-size: 160%;
    background-position: 20% top;
    margin-bottom: 0;
    }
}
.super{
    font-size: 7rem;
    letter-spacing: -.05em;
    margin: -.15em -0.06em 1.5rem;
    padding: 0 0 0;
    text-transform: none;
    line-height: .95em;
    display: block;
}
@media screen and (max-width: 1440px) {
    .super{
    font-size: 7vw;
    }   
}
@media screen and (max-width: 990px) {
    .super{
    font-size: 14vw;
    }   
}

.big{
    font-size: 4.75rem;
    letter-spacing: -.05em;
    margin: -.15em -0.06em 3rem;
    padding: 0 0 0;
    text-transform: none;
    line-height: 1.1em;
    display: block;
}
@media screen and (max-width: 760px) {
    .big{
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: -.03em;
    }   
}

.conf{
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.conf h4{
    margin-bottom: .25rem;
}
.conf-1, .conf-2, .conf-3, conf-4{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 2rem;
}
.conf-1{
    grid-column-start: 1;
    grid-column-end: 4;
}
.conf-2{
    grid-column-start: 4;
    grid-column-end: 7;
}
.conf-3{
    grid-column-start: 7;
    grid-column-end: 10;
}
.conf-4{
    grid-column-start: 10;
    grid-column-end: 13;
}
@media screen and (max-width: 990px) {
    .conf-1,.conf-3{
    grid-column-start: 1;
    grid-column-end: 7;
    }
    .conf-2,.conf-4{
        grid-column-start: 7;
        grid-column-end: 13;
    }
}
@media screen and (max-width: 760px) {
    .conf-1,.conf-3{
    grid-column-start: 1;
    grid-column-end: 3;
    }
    .conf-2,.conf-4{
        grid-column-start: 1;
        grid-column-end: 3;
    }
}
.people{
    display: flex;
    flex-direction: row;
    margin: 1rem 0;
}
.sanian{
    background-repeat: no-repeat;
    background-size: cover;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 50%;
    margin-right: -.25rem;
    position: relative;
    background-color: var(--color-light-1);
}
.sanian-name{
    position: absolute;
    width: 6rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color:var(--color-black);
    transform: translateY(-1.5rem);
    left: calc(1.125rem - 3rem);
    opacity: 0;
    transition: .2s ease all;
}
.sanian:hover .sanian-name{
    opacity: 1;
    transform: translateY(-2.25rem);
}
.about-contact-1,.about-contact-2,.about-contact-3,.about-contact-4{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 2rem;
}
.about-contact-1 p,.about-contact-2 p,.about-contact-3 p,.about-contact-4 p{
    margin-bottom: .25rem;
}
.about-contact-1{
    grid-column-start: 1;
    grid-column-end: 4;
}
.about-contact-2{
    grid-column-start: 4;
    grid-column-end: 7;
}
.about-contact-3{
    grid-column-start: 7;
    grid-column-end: 10;
}
.about-contact-4{
    grid-column-start: 10;
    grid-column-end: 13;
}
@media screen and (max-width: 760px) {
    .about-contact-1,.about-contact-2,.about-contact-3,.about-contact-4{
    grid-column-start: 1;
    grid-column-end: 3;
    }
}
.values{
    
}
.left-side{
    grid-column-start: 1;
    grid-column-end: 7;
}
.left-side-stats{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.left-side-stat{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 2rem;
    justify-content: flex-start;
    max-width: 70%
}
.link-list{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.right-side{
    grid-column-start: 7;
    grid-column-end: 13;
    margin-bottom: 6rem;
}
@media screen and (max-width: 760px) {
    .text-section{
    margin: 4rem 0;
    }
    .left-side{
    grid-column-start: 1;
    grid-column-end: 3;
    }
    .right-side{
        grid-column-start: 1;
        grid-column-end: 3;
    }
}
@media screen and (max-width: 1080px) {
    .big-nr{
        font-size: 18vw;
    }
    .counter{
        padding: 3rem 0;
    }
    .nr-text{
        font-size: 1rem;
        line-height: 1.4em;
        margin: .25em -0.03em 3rem;
    }
}
.quarter-1{
    grid-column-start: 1;
    grid-column-end: 4;
    margin-bottom: 2rem;
    margin-right: 1rem;
}
.quarter-2{
    grid-column-start: 4;
    grid-column-end: 7;
    margin-bottom: 2rem;
    margin-right: 1rem;
}
.quarter-3{
    grid-column-start: 7;
    grid-column-end: 10;
    margin-bottom: 2rem;
    margin-right: 1rem;
}
.quarter-4{
    grid-column-start: 10;
    grid-column-end: 13;
    margin-bottom: 2rem;
}
@media screen and (max-width: 990px) {
    .quarter-1,.quarter-3{
        grid-column-start: 1;
        grid-column-end: 7;
    }
    .quarter-2,.quarter-4{
        grid-column-start: 7;
        grid-column-end: 13;
    }
}
@media screen and (max-width: 760px) {
    .quarter-1,.quarter-3,.quarter-2,.quarter-4{
        grid-column-start: 1;
        grid-column-end: 3;
    }
}
.technology-hero{
    position: relative;
    min-height: 30rem;
    background-color: var(--color-dark-4);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5rem 0;
}
.technology-apis{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    margin-bottom: 2rem;
    margin: 4rem 0;
}


.technology-apis div{
    margin-bottom: 2rem;
}
.technology-api{
    
}

.alphabet{
    position: relative;
    color: var(--color-white);
    background-color: var(--color-dark-3);
}
.alpha-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    margin-bottom: 2rem;
    padding:  0;
    position: relative;
}

.alpha-letter{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 22rem;
}
.alpha-letter h2{
    font-size: 18rem;
    padding: 4rem 0;
}
.alfa-subjects{
    padding: 4rem 0;
    position: relative;
}
.alfa-subjects p{
    font-size: 1.3125rem;
    line-height: 1.2em;
    font-weight: 400;
    letter-spacing: -.02em;
    margin-bottom: 1.5rem;
    color: var(--color-dark-2);

}
.alfa-subjects p strong{
    font-weight: 400;
    color: var(--color-white);
}


@media screen and (max-width: 760px) {
    .alpha-wrap{
        grid-template-columns: repeat(1, 1fr);
        padding: 3rem 0;
    }
    .alpha-letter{
    position: relative;
    top: 0;
    height: auto;
    }
    .alpha-letter h2{
        font-size: 8rem;
        color: var(--color-white);
        padding: 0 0 0;
    }
}
@media screen and (max-width: 990px) {
   .technology-apis{
        grid-template-columns: repeat(2, 1fr);
    }
   .technology-api-title{
        grid-column-start: 1;
        grid-column-end: 3;
    }
}
@media screen and (max-width: 760px) {
   .technology-apis{
        grid-template-columns: repeat(1, 1fr);
    }
   .technology-api-title{
        grid-column-start: 1;
        grid-column-end: 2;
    }
}
.legal p{
    color: var(--color-gray);
    margin-bottom: 2rem;
}
.legal h2{
    margin-top: 3rem;
}
.space-1{
    position: relative;
    display: block;
    padding: 0 0 1rem;
}
.space-2{
    position: relative;
    display: block;
    padding: 0 0 2rem;
}
.blue{
  color: var(--color-blue)!important;
}
.gray{
  color: var(--color-gray)!important;
}
.light-1{
  color: var(--color-dark)!important;
}
.light{
  color: var(--color-light-3)!important;
}
.lighter{
  color: var(--color-light-2)!important;
}
.dark{
  color: var(--color-dark-2)!important;
}
.yellow{
  color: var(--color-yellow)!important;
}
.white{
  color: var(--color-white)!important;
}
.black{
  color: var(--color-black)!important;
}
.red{
  color: var(--color-red)!important;
}
.orange{
  color: var(--color-orange)!important;
}

.show-if-small{
    display: none !important;
}
@media screen and (max-width: 880px) {
    .hide-if-small{
    display: none !important;
    }
    .show-if-small{
        display: flex !important;
    }
}
/*-- ANI START --*/
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
.ani{
    opacity: 0;
}
.ani-hero{
    opacity: 0;
}
.visible .ani{
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .9s;
}

.visible.alphabet .ani{
  animation-name: bendIn;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .6s;
  animation-delay: .2s;
}
@keyframes bendIn {
  0% {opacity: 0; transform: translateY(2rem);}
  100% {opacity: 1; transform: translateY(0rem);}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .9s;
}
@keyframes fadeInUp {
  0% {opacity: 0; transform: translateY(2rem);}
  100% {opacity: 1;  transform: translateY(0);}
}
.fade-in-up {
  animation-name: fadeInUp;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: .9s;
}
@keyframes fadeInHero {
  0% {opacity: 0; transform: translateY(-15rem);}
  50% {opacity: 1; transform: translateY(-15rem);}
  100% {opacity: 1;  transform: translateY(0);}
}
.fade-in-hero {
  animation-name: fadeInHero;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-duration: 1.9s;
}
.public-warning{
    position: relative;
    background-color: var(--color-orange);
    color: var(--color-white);
    width: 100%;
    padding:.5rem 2rem; 
    text-align: center;
}
.ani-1{
    animation-delay: .3s;
}
.ani-2{
    animation-delay: .4s;
}
.ani-3{
    animation-delay: .5s;
}
.ani-4{
    animation-delay: .6s;
}
.ani-5{
    animation-delay: 1.3s;
}
.ani-6{
    animation-delay: 1.4s;
}
.ani-7{
    animation-delay: 1.5s;
}
.ani-8{
    animation-delay: 1.6s;
}
.ani-9{
    animation-delay: 1.7s;
}
/*-- ANI END --*/