/* Green text #10903B */

@import url("/assets/font-awesome/font-awesome-e5745670.css");

@font-face {
  font-family: "Myriad Pro";
  src: url("/assets/MyriadPro-Light-98e77f69.otf");
  font-weight: 300;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("/assets/MyriadPro-Regular-2b902e89.otf");
  font-weight: 400;
  font-style: normal;
}

/*

Don't use these fonts for now since they are 100kb each.

@font-face {
  font-family: 'Myriad Pro';
  src: url("/assets/MyriadPro-Bold-69cd2088.otf");
  font-weight: bold;
}

@font-face {
  font-family: 'Myriad Pro';
  src: url("/assets/MyriadPro-Semibold-3d762000.otf");
  font-weight: bold;
}
*/


html { height:100%; width:100%; }
body { background:url("/assets/background-357adbd5.png") #e6f1f6; padding:0; margin:0; font-size:13px; font-family: Helvetica, arial, sans-serif; height:100%; width:100% }

img { border:0 }
a, a:visited { color: #4183C4; text-decoration:none }
a:hover { color:#000 }
hr {
  border-style: solid;
  border-width: 1px 0 0 0;
  color: #ddd;
  &.light {
    color: #eee;
  }
}

.errorExplanation { font-size:13px; background-color:#883333; color:#ffffff; padding:10px; margin:0 0 12px; }
.errorExplanation ul { list-style:inside disc; }
.errorExplanation li { padding:2px 0; }

.rounded_4 { -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; }

.content { margin:auto; padding:15px 0 15px 0 }

.gradient-top { background:url("/assets/gradient-24bd6047.png") repeat-x; width:100%; height:183px; position:absolute; top:0; left:0; z-index:-1000;}
.gradient { background:url("/assets/gradient-24bd6047.png") repeat-x; width:100%; height:183px }
.gradient-reverse { background:url("/assets/gradient_reverse-cd2ea279.png") repeat-x; width:100%; height:183px }

.home { padding: 0; margin: 0; font-size:16px; font-family: "Myriad Pro", Helvetica, arial, clean, sans-serif; }
  .home h1 { font-size:36px; font-weight:normal; color:#000; text-shadow: 1px 1px white; line-height:1.3em; }
  .home h2 { font-size:32px; font-weight:normal; color:#000; text-align:center; text-shadow: 1px 1px #FFF; margin:30px 0; }
  .home h3 { font-size:24px; font-weight:normal; color:#10903B }
  .home .smooth-center { text-align:center; font-size:18px; color:#777; text-shadow:none; line-height:1.5em; width:700px; margin:20px auto 0 auto; margin-top:5px}
  .home .mainpic { height:366px; margin-top:-100px }
    .home .mainpic .mainpic-middle { background-color:#fff; height:750px }
  .home .content { width:960px }
    .home .anywhere-anyone { font-size:18px; display:inline-block; margin:30px auto 0 auto; line-height:1.4em; }
    .home .anywhere-anyone h3 { font-size:32px; font-weight:lighter; margin:40px 0 15px 0; line-height:1.2em; }
      .home .anywhere-anyone strong { color:#10903B }
      .home .anywhere-anyone .column { float:left; width:430px; margin:0 25px;}
      .home .anywhere-anyone .text { width:350px }
    .home .hero { position:relative; text-align:center; margin:30px 0; font-size:26px; line-height:1.5em;  }
    .home header.content { width:auto; max-width:960px; padding-left:16px; padding-right:16px }
    .home .hero .smooth-center { width:auto; max-width:700px }
      /*.home .hero .annotations { position:absolute; top:27px; left:-50px }*/
      .home .left p { margin:20px 40px }
    .home .who-uses { box-sizing:border-box; width:100%; padding:0 16px }
      .home .who-uses h2 { margin-bottom:0 }
      .home .who-uses h3 { margin:30px 0 -8px 0; font-weight:lighter; }
      .home .who-uses .columns { display:flex; gap:30px }
      .home .who-uses .column { flex:1 }
      .home .who-uses p { line-height:1.5em }
    .home .what-more { padding:20px; background-color:#fff; border-bottom:solid 1px #e5e5e5; margin:auto;}
      .home .what-more h3 { margin-left:60px; }
      .home .what-more ul { line-height:2em; font-size:14px; list-style:none; padding-left:80px }
      .home .what-more ul li { background: url("/assets/check_icon-4aa52086.jpg") no-repeat 5px 4px; padding-left:28px }
  .home .box-container { width:960px; margin:auto; display:inline-block }
    .home .product-box { float: left; line-height:1.5em; display:inline-block; width:300px; padding:0 10px}
    .home .product-box strong { color:#10903B; font-weight:bold; }
    .home .product-box h3 { line-height:1.3em; font-weight:bold; font-size:22px;}
    .home .product-box .screenshot { border:solid 1px #ddd; margin:0px; width:280px }
  .home .signup { text-align:center; color:#888; margin:30px 0 30px 0; font-weight:normal; }
  .home .signup p { margin-top:25px; font-size:13px; }
  .home .footer { font-size:18px; text-align:center; color:#333333; padding:15px 16px; margin:-280px 0 0 0}
    .home .footer-background { margin: -80px 0 0 0}
    .home .footer .logos { padding-bottom:0px }
    .home .footer .logos img { margin:30px }
  .home .footer-bottom { height:300px; }
  .home .all-you-need { background-color:#fafafa; margin-top:70px; }
    .home .all-you-need img { margin:20px; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) }
    .home .all-you-need .screenshots { display:flex; justify-content:center; margin:25px auto 0 }

.product-preview { margin:32px auto 16px; max-width:900px; font-size:16px; line-height:1.5; }
.product-preview img { display:block; width:100%; height:auto; border:1px solid #ddd; border-radius:8px; box-shadow:0 4px 20px #0002; }
.product-preview figcaption { margin:12px 0; color:#555; }
.home .hero .import-help { font-size:18px; line-height:1.5; }

@media (max-width: 767px) {
  .home .content { width:auto }
  .home .anywhere-anyone { display:block }
  .home .anywhere-anyone .column { float:none; width:auto; margin:0 16px }
  .home .anywhere-anyone .screenshot { display:none }
  .home .all-you-need .smooth-center { width:auto; padding:0 16px }
  .home .all-you-need .screenshots { flex-direction:column; align-items:center }
  .home .all-you-need .screenshots img { max-width:calc(100% - 40px); height:auto }
  .home .who-uses .columns { flex-direction:column; gap:0 }
  .home .signup .signup-button { font-size:16px; padding:10px 16px }
}