@import url("https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text");
@import url("https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text");
@import url('https://fonts.googleapis.com/css?family=Raleway');

#cta {
 
}



.nextButt {

  background-color: #222 !important;
  color: white !important;
}

.splashButt {
  /*background-color: green !important;*/
  margin-top: 3em !important;
  max-width: 350px;
  float: left;
}

.nextButt:hover  {
  color: black !important;
  background-color: white !important;
}



body {
  color: black;
  background-color: white;
}

#header {
  height: 3em;
}

#header nav > ul > li {
    line-height: 3em;
}

#header  .button {
  padding: 0em 0.5em;
  margin: 0em 0.5em;
  font-weight: 100;
}

#header.reveal .button {
  font-weight: 400;
}

#header.alt .button {
  font-weight: 100;
}

.logoImage {
      margin-top: 0.86em;
      height: 1.25em;
      display: none;
}

#altLogo {
  display: inline-block;
}



#header.reveal {
  border-bottom: 1px solid #eee;
}

#header.alt {
  border: 0px solid black;
}

h2 {
  /* font-size: 3.25em; */
  color: #222;
}

#cta h2 {
  color: #222;
  /* font-family: font-family: 'Raleway', sans-serif; */
}

#cta {
 background-color: #efef;
padding: 2.5em 0 4em 0;
margin: 6em auto;
}

b {
  color: #222;
  /*font-weight: 400;*/
}

* {
  color: #222;
}

.marketingBlock {
    padding: 0em 1em;
    text-align: center;
}

.faqBlock {

}

.faqBlock .whole {
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0em;
  padding-bottom: 2em;
}

.faqContainer {
  border-bottom: 1px solid #eee;
  /*z-index: 10000;*/
}

.faqContainer:hover {
  cursor: pointer;
}

.faqContainer .x {
  /*content: '\f489';*/
  /*font-family: 'ionicons';*/
  /*float: right;*/
  display: inline-block;
  float: right;
  transition: 0.15s;
  transform : rotate(0deg);
}

.faqContainer h3 {
  /*font-variant: small-caps;*/
  /*font-size: 1.1em;*/
      font-size: 1.6em;
}

.showCon .x {
  transform : rotate(405deg);
}

.faqContainer p {
  display: none;
}

.showCon p {
  display: block;
}

.showCon h3:after {
   transform: rotate(45deg);
}

.no-dot .name,
#navButton .name {

  color: #333;

}

/*#navButton .name {
  color: ;
}*/

#navButton {
  background-color: white;
  /*border-bottom: 1px solid #eee;*/
  color: #222;
}

#navButton .toggle:before {
  color: black;
}

.half {
  position: relative;
}

.half p {
  border: 0px solid black !important;
  text-align: left;
  margin-bottom: 0em;
}



.betterWay .half {
  margin-top: 1.5em
}

.betterWayImageCon {

}

.betterWayImage {
  content: url('/images/diagram_mobile_lh.svg');
  max-width: 100%;
}

.box {
  padding: 1.7em;
  margin: 0em;
}

/*.no-dot {
  font-family: 'Libre Barcode 39 Text', cursive;
    color: black;
    margin-left: 1em;
    font-size: 2.5em;
    font-variant: small-caps;
}*/
#splash {
      /*height: 100vh;*/
      /*background-color: #c5e2ff;*/
      /*background-color: #daecff;*/
}

.betterWay .half div {
  text-align: left;
  margin-bottom: 1em;
  font-size: 1.2em;
}

body.landing #main {
  margin-top: 0em;
}


.splash-whole {
  width: 100%;
  text-align: center;
  padding: 6em 0% 0em 0%;
}



.betterWay .colored {
  border-color: yellow;
  border-color: #FEDF0F;
}

.howItWorks .colored {
  border-color: #2CA8EC;
  border-color: #2A8ECF;
  border-color: #1AA0D8;
  border-color: #0095D4;
}

.membership .colored {
  border-color: #379a37;
  border-color: #58CA1F;
  border-color: #45bd0d;
}

.partners .colored {
  border-color: #ff7676;
  border-color: #DC3231;
  border-color: #e84141;
}

.socialProof .colored {
  border-color: #fd4dc7;
  border-color: #56B4F4
}

.socialProof .body {
  margin-top: 3em;
}


.half {
      padding: 1.5em;
}

.overweight {
  width: 59%;
  min-width: 460px;
}



.half img {
  width: 70%;
}

.membership img {
  margin-top: -2em;
}

.whole {
    max-width: 900px;
    width: 80%;
    margin: 0.5em auto 2em auto
}

.howItWorks .whole {
  margin: 2em auto;
}

.faqCon .whole {
  padding: 0em 0em 2em 0em;
}

.partners .whole {
  margin: 4em auto;
}



.videoHalf {
  padding-left: 6%;
  padding-right: 4%;
  min-height: 60vh;
}

.des {
  font-size: 1.1em;
font-weight: 400;
z-index: -100 !important;
}

.numCon {
  display: none;
}

.paras {
  width: 40%;
  margin-left: 10%;
  margin-top: 20%;

}

.topP {
  font-size: 2.5em;
      line-height: 1.5em;
      padding-bottom: 1em;
}

.bottomP {
  font-size: 1.5em;
  line-height: 1.5em;
      margin-bottom: 0px;
}

#splash .topP,
#splash .bottomP {
  text-align: left;
}

#splash .half {
  text-align: right;
  /* position: relative; */
}

#splash .half img {
  /* margin-right: 1em; */
  max-height: inherit;
  margin-top: 25%;
  /* position: absolute; */
}

#splash .background,
#splash .innerBackground {
  background-color: black;
  /*background-image: url('../images/coffee-beans.jpg');*/
  margin: 0;
  padding: 0;
  top: 0px;
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  /*opacity: 0;*/
  /*background-position-x: right;*/
}

#splash video {
  width: 100%;
  /*margin-left: -20%;*/
  /*width: 200%;*/
/*margin-left: -63%;*/
}

#splash .innerBackground {
  background-color: black;
  z-index: -2
}

#splash .half p {    z-index: 2;}

.splashText {
  z-index: 10;
      padding-left: 10%;
      padding-top: 0em;
}

.howItWorks {
  /*background-color: #daecff*/

}

.long {
  margin-top: 0em;
}

.stepsRow {
  padding: 0em;
}

.container {
  width: 100%;
}

.box {
  box-shadow: none;
}

.imageCon .icon {
  width: 100%;
  /*left: 15%;*/
}

.imageCon .small {
  /*width: 37%;*/
  /*left: 20%;*/
  bottom: 10px;
}

img.scale  {
  width: 85%;
  margin: 0% 7.5%;
}

.betterWay  {
  /*background-color: #c8fff5;*/
}

.sources {
  text-align: left;
  margin-top: 1em;
  font-size: 0.9em;
  line-height: 1em;
}

.sources .lab {
  font-weight: 400;
}

.sources a {
  color: #222;
}

#footer {
  background: #fff;
    padding: 3em 0 4em 0;
    text-align: center;
}

.half.socialProof {
    position: relative;
    min-height: 200px;
    margin-top: 2em;
}

.socialProof .twitter {
      color: #4AB3F4;
}

.socialProof .email {
  color: #7fcdb8
}

.socialProof .ic {
    text-align: center;
    /*position: absolute;*/
    top: 0px;
    width: 100%;
    font-size: 4em;
}

.socialProof .body {
    margin-top: 0em;
    font-size: 1.2em;
}

.socialProof .attribution {
  margin-top: 1em
}

.underweight {
  width: 40%;
}

.attribution a {
  color: #aaa;
  text-decoration: underline;
}

.imageCon .icon {
  width: 100%;
  left: 0%;
  top: -10px;

}

@media screen and (max-width: 600px) {
  .overweight,
  .underweight {
    width: 100%;
  }

  .howItWorks .third {
    min-width: auto;
    width: 100%;
  }


}

@media screen and (max-width: 480px) {
  .splash-whole {
    font-size: 0.9em;
    text-align: center;
    padding: 5em 0% 0em 0%;
  }

  .splash-whole .half {
    padding-bottom: 0px;
  }

  .topP {
    padding-bottom: 0.5em;
    font-size: 2.25em;
  }

  .long {
    height: 250px;
  }

  .roasterImage {
    margin: 0.5em 0em;
  }

  .overweight {
    min-width: inherit;

  }

  .underweight {
    padding: 0px;
  }

  .betterWayImageCon {
    padding: 1em 0em;
  width: 120%;
  margin-left: -10%;
  }

  .betterWayImage {
    content: url('/images/diagram_mobile_lh.svg');
    /*-webkit-transform: translateZ(0);*/
    max-width: 100%;
  }

  .betterWay .half div {
    font-size: 1.1em;
  }

  #cta {
    padding: 2.5em 1em 4em 1em;
  }
}

#header nav > ul > li a:not(.button) {
  color: black;

}

#header.alt input[type="submit"], #header.alt input[type="reset"], #header.alt input[type="button"], #header.alt .button {
    border: 1px solid #c1c1c1;
}

#header.alt {

  color: black;
}

#header input[type="submit"], #header input[type="reset"], #header input[type="button"], #header .button {
     box-shadow: inset 0 0 0 0px #999;
     color: black;
}

@media screen and (min-width: 1380px) {
  body {
    font-size: 1.1em;
  }
  .splashText {
    font-size: 1.1em;
  }

  .colored {
    font-size: 2em;
  }

  .underweight {
    width: 39%;
  }

  .whole,
  .partners .whole,
  .betterWay .whole
   {
      margin: 4.5em auto 5em auto;
  }

  .howItWorks .whole {
    margin-top: 5em;
    margin-bottom: 6em;
  }

  .whole {
      max-width: 1100px;

  }

}