html {overflow-x: hidden}
body {overflow-x: hidden;}
body p, h1, h2, h3, ul, strong, a {font-family: Open Sans, Sans-Serif; color: black; text-align: left}
h1 {font-size: 39px; color: #1e2e50;font-weight:100;margin-top:0px; margin-bottom:0px;}
h2 {font-size: 35px;margin-top:0px}
h3 {font-size: 12px; text-transform: uppercase; font-weight:700;margin-bottom:0px;color:white}
p, ul, strong {font-size: 16px; padding-top: 0px;}
ul { line-height: 28px}
li {padding: 5px}
a {text-decoration: none; cursor: pointer}
hr {background-color: #06bb79; width: 80%; border-color: #06bb79; border-style: solid}
.is-placeholder {color: #1E2e50; margin: 0px }
  
.header {background-color: white; padding-left: 20px; 
  padding-top:20px; 
  padding-bottom: 20px;
  display: flex;
  color: #1e2e50;
  align-items:center;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .21);
  margin-bottom: 10px;
 }
.nav-item {color: #1e2e50;
          margin: 0px 25px;
          font-size: 16px;
          font-weight: bold;
          padding: 10px;
          
          }
.nav-item a { scroll-behavior: smooth;}
.header a:hover {color: #06bb79}
.header a {scroll-behavior: smooth;}
.logo {margin-left:0px}
.hs-button#hs-button_module_170326303948526 {color:white !important; padding: 10px 20px; font-weight:700;
  background: #06bb79;
  border-width: 1px; font-size: 16px;
border-style: solid; border-radius: 5px;
  border-color: white;
cursor:pointer;
display: flex;
margin-left:55px !important}
.hs-button#hs-button_module_170326303948526:hover {background: transparent; border-style: solid;
  border-width:1px; border-color: #06bb79; color: #06bb79 !important}
.nav {display: flex;
      align-items: center;
      }
.top-cta {display: flex;
          align-items: center;
          justify-content: flex-end}


.hero-flex {color:#1e2e50; 
  background: #f8f8f8;
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  width:100%;
  padding-left:20px;
// background-image: linear-gradient(to bottom right, #06a48f, #05d163)//;}
.hero-flex p, h1, h3, strong {color:#1e2e50;}
.hero-flex .strong {font-size: 39px; font-weight: 300}
.hero-flex-1 {width: 50%; display:flex; color: #1e2e50;
  flex-wrap:wrap;align-items: center; align-content:center; justify-content: flex-start}
.hero-flex-1 p {font-size: 17px; line-height: 30px}
.hero-flex-2 {width:43%; display:flex; justify-content: center; align-items: center}
.hero-flex-2 img {width:100%; padding-top:10px; margin-bottom: -1px;}
.hs-button{ color:white; padding: 10px 20px; font-weight:700;
  background-image: linear-gradient(to bottom right, #ff5858, #ff9b15);
  border-width: 1px; font-size: 16px;
border-style: solid; border-radius: 5px;
  border-color: transparent;
cursor:pointer; margin-right:23px}
.button3 {color:#0e2e50; padding: 10px 20px; font-weight:700;
  background: transparent;
  border-width: 1px; font-size: 16px;
border-style: solid; border-radius: 5px;
  border-color: #0e2e51;
cursor:pointer;
text-align: center}
.sub {padding-bottom:10px;width:100%}
.sub h3 {color:#1e2e50; text-align: left; padding-bottom: 12px;}
.button-container{display:flex;width:100%; margin-top:20px; align-items: center}
.hs-button:hover {background: transparent; border-style: solid;
  border-width:1px; border-color: #ff5858; color: #ff5858}
.button3:hover, .button3 a:hover {background: white; border-style: solid;
  border-width:1px; border-color: white; color: white; background-color: #0e2e51; text-decoration: none}
.try {display: flex; text-align: right; margin-bottom:50px; font-weight:100; font-size: 10px; justify-content: center}

.dnd_area-row-0-padding {padding-top: 25px !important}

.rep-section{background: #1e2e50; display:flex;width:100%;flex-wrap:wrap;
  background-repeat:no-repeat;background-size:37%;background-position:right 0% bottom 0%;}
.rep-flex-2 p {color: white}
.rep-flex-2 h2 {color: white}
.rep-flex-2 h3 {color: white; text-align: left}
.rep-section h3 {padding-bottom: 12px}
.rep-section p {line-height: 30px; font-size:17px; font-weight:100}
.rep-flex-1{width:50%;align-content:center;align-items:center;justify-content:center;display:flex; }
.rep-flex-1 img {width: 80%; margin: 25px 0px;}
.rep-flex-2{width:39%;padding:20px;}
.download {width:100%; display:flex;flex-direction:row}
.download a {display: flex}
.apple img {width:80%}
.google img {width:80%}
.apple {width:38%;display:flex}
.google {width: 38%;display: flex}

.video-section {display: flex; margin: 20px}
.video-flex-1 {display: flex; width: 50%}
.video-flex-2 {display: flex; width: 43%; flex-wrap: wrap; padding-left:25px; align-content: center;}
.video-section p {font-size:38px;font-weight: 100; padding-top:0px;}
.video-title {display:flex; width: 100%;}
.video-copy {display: flex; width: 100%}
.iframe-container {position: relative; overflow: hidden; width: 100%; padding-top: 56.25%}
.iframe-responsive {position: absolute; top: 0; bottom: 0; right: 0; left: 0; border:none}
#hs_cos_wrapper_module_170256506712310 {width: 100%}

.reason-section {display:flex;width:100%; background: #f8f8f8; flex-wrap: wrap; justify-content: center; padding: 25px 0px; align-content: center; align-items: center}
.reason-section p, h2, h3, ul {color: #1e2e51}
.reason-section p {padding: 20px; text-align: center;}
.reason-title h2 {text-align: center; padding: 70px 0px;}
.reason-title{display:flex;width:100%;
background-size: cover; justify-content: center; height: 100px}
.reason-flex-1 {display: flex; width: 39%; justify-content: center}
.reason-flex-2 {display: flex; width: 39%; justify-content: center; align-content: center;
align-items: center; padding-left:30px}
.reason-cta {display: flex; width: 100%; justify-content: center;}

.hs-button#hs-button_module_170326114456312 {color: #06bb79; padding: 10px; font-weight:700;
  background: white;
  border-width: 1px; font-size: 16px;
border-style: solid; border-radius: 5px;
  border-color: #06bb79;
cursor:pointer;margin-bottom:25px;
text-align: center;
margin-right:0px}
.hs-button#hs-button_module_170326114456312:hover {border-style: solid;
  border-width:1px; background: #06bb79; border-color: transparent; color: white !important}
.button2 a:hover {color: white;text-decoration: none;}
#hs_cos_wrapper_module_170247979738115:hover {color: #06bb79}
.button2 {color: #06bb79; padding: 10px; font-weight:700;
  background: white;
  border-width: 1px; font-size: 16px;
border-style: solid; border-radius: 5px;
  border-color: #06bb79;
cursor:pointer;margin-bottom:25px;
text-align: center}
.button2:hover {border-style: solid;
  border-width:1px; background: #06bb79; border-color: transparent; color: white !important}
.button2 a:hover {color: white;text-decoration: none}
#hs_cos_wrapper_module_170326114456312 {margin: 20px}

.main {display: flex; background: #f8f8f8; flex-wrap: wrap; margin-left: 50px; margin-right: 50px; justify-content: center}
.main h2, h3, p {color: #1e2e50}
.main-sub {display: flex; width: 100%; margin: 0px 20px}
.main-title {display: flex; width: 100%; margin: 0px 20px}
.main-sub h3 {color: #1e2e50; margin-left: 20px; display: flex; padding-bottom: 12px}
.main-title h2 {margin-left:20px; margin-bottom: 20px; display: flex;}
.main-right {display: flex; flex-wrap: wrap; width: 43%; margin-top: 25px}
.main-left p {margin-left: 40px; margin-bottom: 12px}
.main-left {display: flex; flex-wrap: wrap; width: 43%; margin-top: 25px; align-content: center}
.main-left li {margin-left: 25px; text-align: left}
.main-right p {margin-left: 40px; margin-bottom: 25px}
.main-right strong {margin-left: 40px; text-align: left}
.main-right {display: flex; flex-wrap: wrap; width: 43%; align-content: center}
.main-right li {margin-left: 25px}
.main-image {display: flex; flex-wrap: wrap; width: 50%; align-items: center; justify-content: center; margin: 30px 0px}
.main-image img {width:100%; justify-content: center; max-width: 500px}
.main-image-mobile {display: flex; flex-wrap: wrap; width: 50%; align-items: center; justify-content: center; margin: 30px 0px}
.main-image-mobile img {width:100%; justify-content: center; max-width: 250px}

.main-blue {display: flex; background: #1e2e50; flex-wrap: wrap; margin-left: 50px; margin-right: 50px; justify-content: center; padding-bottom: 25px}
.main-blue .main-right p {color: white}
.main-blue .main-left p {color: white}
.main-blue .main-left strong {color: white}
.main-sub-blue {display: flex; width: 100%; margin: 0px 20px}
.main-sub-blue h3 {color: white; margin-left: 20px; display: flex; padding-bottom: 12px;}
.main-title-blue {display: flex; width: 100%; margin: 0px 20px}
.main-title-blue h2 {color: white; margin-left:20px; margin-bottom: 20px; display: flex;}
.row-first {display: flex}
.row-reverse {display: flex}
.row-one {display: flex}

.crm-section {display: flex; width: 100%; background: #f8f8f8; flex-wrap: wrap; justify-content: center; padding: 25px 0px}
.crm-title {display: flex; width: 100%; justify-content: center; margin: 30px 0px}
.crm-image {display: flex; width: 100%; justify-content: center; align-items: center; align-content: center}
.crm-point {display: flex; width:100%; justify-content: center; align-items: center; align-content: center}
.crm-point-1 {display: flex; width: 30%; justify-content: center; align-items: center; align-content: center}
.crm-point-2 {display: flex; width: 30%; justify-content: center; align-items: center; align-content: center}
.crm-point-3 {display: flex; width: 30%; justify-content: center; align-items: center; align-content: center}
.crm-point-image {display: flex; width: 43%; justify-content: center; align-items: center; align-content: center; margin: 0px 5px}
.crm-point-image img {width:50px}
.crm-point-copy {display: flex; flex-wrap: wrap; width: 43%; justify-content: flex-start; align-items: center; align-content: center}

.roi-section {display: flex; width: 100%; background: #f8f8f8; flex-wrap: wrap; justify-content: center; padding:25px 0px}
.roi-image {display: flex; width: 43%; justify-content: center; align-items: center}
.roi-image img {width:80%}
.roi-copy {display: flex; width: 43%; justify-content: flex-start;
  flex-wrap:wrap; align-content: center}
.roi-content {display: flex; width: 100%; align-items: flex-start}
.roi-content-image {display: flex; width: 20%; justify-content: center; padding-right: 5px; align-items: center}
.roi-content-copy {display: flex; width: 75%; flex-wrap: wrap; align-content: center; align-items: center;}
.roi-content-image img {width:50px}
.button2#green {margin-top: 25px}

.integration {width:95%; margin:25px;}

.pricing {display: flex; 
          margin-right: 50px; 
          justify-content: center; 
          margin-left: 50px;
           }
.pricing-flex {display: flex; width: 30%; padding:25px; flex-direction: column; background: white; border-radius: 20px;  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.19); margin: 50px 25px; align-items: center;}
.pricing-flex h2, h3, strong, ul {text-align: center}
.pricing-flex p {text-align: center}
.pricing-flex li {text-align: left; padding: 3px}
.pricing-title h2 {text-align: center; margin:25px auto; width: 100%}

.footer {background: #06bb79; padding: 20px;}
.footer img {width: 200px}
.footer p, a {color: white}

.confirmation-main {display: flex; width: 100%; justify-content: flex-start; padding: 20px}
.confirmation-flex-1 {width: 35%; display: flex; flex-direction: column}
.confirmation-flex-1 h2 {padding-bottom: 12px}
.confirmation-flex-2 {width: 57%; padding: 12px; display: flex; flex-direction: column}

@media only screen and (max-width: 800px) {
  h1 {font-size: 32px; padding-left: 12px; padding-right: 12px}
  h2 {font-size: 25px}
  h3 {font-size:10px; padding-left: 12px;}

  .nav-item {display: none}
  
  .hero-flex {padding-left:0px; flex-direction:column; 
    align-content: center; align-items: center; justify-content: center;}
  .hero-flex h3 { padding-top: 25px}
  .hero-flex-1 {width: 100%;}
  .hero-flex-1 p {width: 91%; font-size: 16px; padding-left: 12px; flex-direction: column}
  .hero-flex-2 {width:100%}
  .button1{}
  .button-container {justify-content: center; flex-direction: column; align-content: center; align-items: flex-start; padding-left: 12px;}
  .hs-button {padding: 10px 50px;}
  .button2 {margin-top: 50px; padding: 10px 50px}
  .button3 {margin-top: 30px; padding: 10px 50px}
  .try {margin-bottom:12px}
  .hs-button#hs-button_module_170326303948526 {font-size: 12px}
  .rep-section {flex-direction: column-reverse}
  .rep-section p {width: 85%; padding-left: 25px;}
  .rep-section h3 {color: white; padding-left: 25px}
  .rep-section h2 {padding-left: 25px}
  .rep-flex-1 {width: 100%; }
  .rep-flex-2 {width: 100%; padding-left: 0px}
  .download {justify-content:center; padding: 25px; flex-direction: column; align-items: flex-start}
  .apple {width: 50%; margin-bottom: 25px}
  .google {width: 50%}
  
  .main {flex-direction: column; margin: 0px; align-items: center;}
  .main-blue {flex-direction: column; margin: 0px; align-items: center}
  .main-left {width: 100%}
  .main-right {width: 100%}
  .main-image {width: 80%}
  .main-left p {margin-right: 40px}
  .main-right p {margin-right: 40px}
  .main-left h3 {padding-left: 0px}
  .main-right h3 {padding-left: 0px}
  .main-left li {margin-right: 25px}
  .main-right li {margin-right: 25px}
  .row-first {align-items: center; flex-direction: column}
  .row-one {align-items: center; flex-direction: column}
  .row-reverse {align-items: center; flex-direction: column-reverse}
  
  .pricing {flex-direction: column; margin: 0px; align-items: center}
  .pricing-flex {width: 100%}
  .pricing-flex h3 {padding-left: 0px}
  
  .video-section {flex-direction: column-reverse}
  .video-copy {justify-content: center}
  .video-copy p {font-size: 25px}
  .video-flex-1 {width: 100%}
  .video-flex-2 {width: 100%; padding-left: 0px}
  .video-title {justify-content: center}
  
  .reason-section {flex-direction: column}
  .reason-flex-1 {width: 100%}
  .reason-flex-2 {width: 100%; padding-left: 0px}
  
  .crm-section {flex-direction: column}
  .crm-image img {width: 70%}
  .crm-point {flex-direction: column}
  .crm-point-1 {width: 100%; flex-direction: column}
  .crm-point-2 {width: 100%; flex-direction: column}
  .crm-point-3 {width: 100%; flex-direction: column}
  .crm-point-image {width: 100%; padding-top:25px}
  .crm-point-copy {width: 85%; justify-content: center; padding-top: 25px}

  .roi-section {flex-direction: column}
  .roi-content {flex-direction:  column; justify-content: center; align-items: center}
  .roi-copy {width: 100%; justify-content: center}
  .roi-content-copy {justify-content: center;padding-top:12px}
  .roi-image {width: 100%}
  
  .footer img { display: block}
  .footer p {padding-top: 12px}
  
  .confirmation-main {flex-direction: column}
  .confirmation-flex-1 {width: 95%;}
  .confirmation-flex-1 p {padding-right: 12px}
  .meetings-iframe-container {padding-right: 12px}
  .confirmation-flex-2 {width: 95%; padding: 0px; justify-content: center}
  
  @media only screen and (max-width: 395px) { .hs-button#hs-button_module_170326303948526 {display: none}