@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');
:root {
  --toar-blue: #203036;  /* aka 32, 48, 54 */
  --toar-orange1: #E35525;
  --toar-orange2: #C34515;
  --toar-orange3: #B33505;
  --toar-green: #17B17E;
  --tint0: rgba(32,48,54,0.025);
  --tint2: rgba(32,48,54,0.4);  
  --tint4: rgba(32,48,54,0.8);
  --gray0: #FAFAFA;
  --gray1: #F6F6F6;    
  --gray2: #C6C8CC;
  --gray3: #797C84;
  --gray4: #474953;  
  --gray5: #292B31;
  --sizeXXS: 9px;
  --sizeXS: 12px;
  --sizeS: 14px;
  --sizeM: 17px;
  --sizeL: 21px;
  --sizeXL: 24px;
  --sizeXXL: 34px;
  --sizeXXXL: 42px;
  --weightL: 300;
  --weightR: 400;
  --weightM: 500;
  --weightS: 600;
  --weightB: 700;   
  --family1: 'Lexend Deca', sans-serif;
  --family2: 'Lora', serif;
}

* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: var(--family1); }
html { width:100%; height:100%; font-family: var(--family1); font-weight: var(--weightNormal); color:var(--toar-blue); font-size: var(--sizeM);}
body { height:100%; }
div { width:100%; overflow:hidden; position:relative; }
input, input:focus, select:focus, textarea:focus, button:focus {-webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; outline-width: 0;}

img {width: 100%; height: auto;}

h1 { font-size: var(--sizeXXXL); font-weight: var(--weightB); font-family: var(--family2); line-height: 50px; color:var(--toar-orange1); margin:0 0 5%;}
h2 { font-size: var(--sizeXXL); font-weight: var(--weightB); font-family: var(--family2); line-height: 40px; color:var(--toar-orange2); margin:0 0 2%;}
h3 { font-size: var(--sizeXL); font-weight: var(--weightM);  margin:0 0 5%; }
h5 { font-size: var(--sizeL); font-weight: var(--weightS); margin-top:0; }
h6 { font-size: var(--sizeM); font-weight: var(--weightR); margin-top:0; }

@media only screen and (max-width: 690px) {
  html { font-size: var(--sizeS); }
  h1 { font-size: var(--sizeXXL); line-height: 38px; }
  h3 { font-size: var(--sizeL);}
  h5 { font-size: var(--sizeM);}
  h6 { font-size: var(--sizeS);}
}
p {margin-bottom:20px;}

.orange {color:var(--toar-orange1);}
.highlight { background-color: var(--toar-orange1); }
.blueBG { background-color: var(--toar-blue); color:#fff; }
.grayBG { background-color: var(--gray1); }
.whiteBG { background-color: #fff; }

/* .vMiddle > div {
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  overflow: visible;
} */

.vMiddle {
  display: flex;
  align-items: center; 
  flex-grow: 1;
}


#head {
  height:80px;
  position: fixed;
  top:0;
  left: 0;
  background-color: #fff;
  color: var(--toar-blue);
  z-index:8;  
}

#head.dark {
    background-color: var(--toar-blue);
    color:#fff;
}

.logo {
  position: absolute;
  left: 0;
  top: 0;
  margin-left:5%;
  width: 160px;
  height: 100%;
  background-image: url( '../images/logo/Toar_Dark.svg' );
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2;
}
.dark .logo, #footer .logo {
  background-image: url( '../images/logo/Toar_Light.svg' );
}

.nav {
  position: absolute;
  right: 0;
  margin-right: 5%;
  top: 0;
  width: 70%;
  height: 80px;
  z-index: 1;
  text-align: right;
}

.nav a, .nav a:visited {
  display: inline-block;
  height: 80px;
  padding: 28px 0 0 5%;
  text-decoration: none;
  color: var(--toar-blue);
}
.dark .nav a, .dark .nav a:visited {
  color: #fff;
}

#head .nav a:hover {
  color: var(--toar-orange1);
}
#head .nav a.active {
  color: var(--toar-orange1);  
}

.section {
  padding: 60px 0;
  float: left;
}
.flex {
  display: flex;
  align-items: stretch;
}

.panel {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.panel.wide {
  max-width: 1400px;
  width: 95%;
}
.panel.thin {
  max-width: 800px;
}

._60, ._40, ._33, ._25 {
  float: left;
  padding: 20px 0;
}
._60 {
  width: 60%;
}
._40 {
  width: 40%;
}
._33 {
  width: 33.333%;
}
._25 {
  width: 25%;
}

.hero {
  margin-top: 40px;
}

img.feature {
  padding-left: 40px;
}
.heroText { 
  padding-right: 40px;
}

.illustrations {
  background-color: var(--gray1);
  padding:40px 0;
}
.illustrations.onboarding {
  padding: 80px 0;
  background-color: #fff;
}


.illustrations .panel > div {
  text-align: center;
  padding: 10px 0 30px;
}
.illustrations img {
  width: 100px;
}
.illustrations span {
  font-size: var(--sizeS);
}

.percentText {
  padding-left: 40px;
  margin-bottom:-20px;
}

.section.circle {
  padding-bottom: 0;
  padding-top: 120px;
}
.circle .panel, .circle .panel * {
  text-align: center;
  display: block;
  color: #fff;
}

.circleBG {
  width: 4000px;
  height: 4000px;
  border-radius: 50%;
  background-color: var(--toar-blue);
  position: absolute;
  top: 0;
  left: calc(-2000px + 50%);
}

button {
  background-color: var(--toar-green);
  border-radius: 25px;
  border: none;
  height: 50px;
  text-align: center;
  padding: 0 25px 3px;
  text-decoration: none;
  display: inline-block;
  font-size: var(--sizeM);
  font-weight: var(--weightR);
  cursor: pointer;
}

.circle .panel a.button {
  text-decoration: none;
  display: inline-block;
  margin: 20px 0;
}
.circle h1 {
  margin-bottom: 10px;
}

#footer {
  /* background-color: var(--toar-blue); */
  height:120px;
  text-align: left;
  padding:40px 8%;
  color:rgba(255,255,255,0.2);
  font-size: var(--sizeS);
  margin-top: 40px;
}
#footer .logo {
  right: 8%;
  left: unset;
}
#footer .tc {
  left: 5%;
  padding-top: 10px;
}

#contact {
  padding-top: 0px;
}

.contactHero {
  padding-bottom: 0;
}

.retailHero {
  padding:120px 0;
}

.heroText.center {
  text-align: center;
  padding: 60px 8% 0;  
}

.quotes {
  background-color: var(--gray1);
  color: var(--gray3);
}
.quote, .quoteText {  

}
.quote {
  font-size: 54px;
  position: absolute;
  left: 40px;
  top: 0;
  color: var(--gray2);
}
.quoteText {
  padding: 0 80px;
  position: relative;
  font-size: var(--sizeM);
  font-weight: var(--weightR);
}
.quoteText span {
  color: var(--gray2);
  margin-top: 10px;
  display: block;
}

.benefits {
  background-color: var(--toar-blue);
}

.benefits h2 {
  margin-bottom:0px;
}
.benefits h3 {
  font-weight: var(--weightS);
  margin:30px 0 10px;
}

.benefits ul {
  list-style-type: square;
}
.benefits li {
  margin:0 0 10px 20px;
}

.benefits .panel {
  
  padding: 0;
  background-color: #fff;
  border-radius: 20px;
}

.benefitsText {
  padding: 20px 8%;
}


.benefitsImg {
  background-image: url( '../images/feature/FloorSticker_Small.jpg' );
  background-repeat: no-repeat;
  background-position: 75% 70%;
  background-size: cover;
  height: auto;
  min-height: 25%;
}

@media only screen and (max-width: 890px) {
  .illustrations.onboarding ._33 {
    width: 50%;
  }
}

@media only screen and (max-width: 690px) {
  .panel {
    display: block;
  }
  
  ._60, ._40, ._33, ._25 {
    width: 100%;
  }
  .panel .percentText {
    padding: 0;
  }
  img.feature {
    padding: 0 15%;
  }
  .percent img.feature {
    padding: 0 5%;
  }
  .logo {
    width: 120px;
  }

  .circleBG {
    width: 1500px;
    height: 1500px;
    left: calc(-750px + 50%);
  }

  .hero .heroText {
    padding: 0;
    text-align: center;
  }

  .illustrations.onboarding ._33 {
    width: 100%;
  }

}






.banner {
  background-color: var(--toar-blue);
  /* background-image: url("../images/feature/Banner_Grocery.jpg"); */
  /* background-size: cover;
  background-position: center; */
  /* height:800px; */
  color:#FFF;
  height: 100%;
  position: relative;
}
.banner .vMiddle {
  height:100%;
 
}

.pathStart {
  width:80px;
  height: 80px;
  transform: rotate(180deg);
}
.dot {
  background-color: rgba(255,255,255,0.15);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 20px 30px 0px;
}

.bullet {
  /* background-color: rgba(0,0,0,0.15); */
  width: 50px;
  height: 50px;
  border-radius: 50%; 
  position: absolute;
  left:0;
  margin:0px 30px 20px 0;
}
.bulletText {
  width: 100%;
  margin:0 0 50px 0px;
  padding-left:90px;
}



.fade {
  position:absolute;
  bottom: 0;
  height: 30%;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.fadeDown {
  position:absolute;
  top: 0;
  height: 100%;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
}



.form {
  background-color: #eee;
  padding: 40px 0 30px;
}