/* Custom Stylesheet */

/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);

h1, h2, h3, h4, body, p {font-family: 'Source Sans Pro', sans-serif;}
h3.header, h4.header {font-weight: 600;}
label {color: #404040; font-size: 1rem;}
.grey {background-color: #d5d5d5 !important;}
nav.white { height:110px; padding:15px 0; box-shadow:none;}
nav ul a,
nav .brand-logo { color: #444;}
nav .brand-logo img{ max-height: 75px;}
.nav-wrapper ul.right { margin-top: 25px;}
nav.white ul a:hover {background-color: transparent; color: #404040 !important;}
p {line-height: 2rem;}
.sidenav-trigger { color: #26a69a;}
.parallax-container {
  min-height: 380px;
  line-height: 0;
  height: auto;
  color: rgba(255,255,255,.9);
}

strong {font-weight:600;}
#outputFeet, #outputPounds {font-weight:600;}
.parallax-container .section {width: 100%;}
[type="radio"]:not(:checked) + span, [type="radio"]:checked + span {padding-left:30px;}
.input-field.col label {margin-right: 15px;}
.input-field > label {color: #404040;font-size: 1.25rem;}
@media only screen and (max-width : 992px) {
  .parallax-container .section {
    position: absolute;
    top: 40%;
  }
  #index-banner .section {
    top: 10%;
  }
}

@media only screen and (max-width : 600px) {
.parallax-container .parallax img {left: 0;}
  #index-banner .section {top: 0;}
  #progressbar li span.green-text {display: block;}
  .container {width: 100%;}
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}

footer.page-footer {
  margin: 0;
}

.green-text{
  color: #3AAA35 !important;
}
.green-bg{
  background-color: #3AAA35 !important;
}

/*form styles*/
#msform {
  position: relative;
  margin-top: 30px;
}

#msform fieldset {
  background: white;
  border: 1px solid rgba(160, 160, 160, 0.6);
  border-radius: 0px;
  padding: 20px 15px;
  box-sizing: border-box;

  /*stacking fieldsets above each other*/
  position: relative;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}

/*headings*/
.fs-title {
    font-size: 40px;
    color: #404040;
    margin-bottom: 20px;
    letter-spacing: 0px;
    font-weight: bold;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 18px;
	color: #666;
	margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
    text-align: center;
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

#progressbar li {
    list-style-type: none;
    font-size: 16px;
    width: 33.33%;
    float: left;
    position: relative;
    font-weight: bold;
    color: #404040;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 55px;
    height: 55px;
    line-height: 55px;
    display: block;
    font-size: 16px;
    color: #404040;
    background: white;
    border-radius: 30px;
    margin: 0 auto 10px auto;
    border: 1px solid rgb(213,213,213);
}

/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 3px;
    background: rgb(213,213,213);
    position: absolute;
    left: -50%;
    top: 27px;
    z-index: -1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
    background: #3AAA35;
    color: white; border: 1px solid rgb(58,170,53);
}

.mp_row{margin-bottom: 0px;}
.mp_row .mp_head {width:80px; display: inline-block;}
.mb-10{margin-bottom: 10px;}
.btn-round, .btn-round:hover, .btn-round:focus{border-radius: 30px;background-color: #3AAA35;}
.nbm{margin-bottom: 0px;}
.thick-progress{height: 10px;}
.meal-list .card-image{cursor: pointer;}
.meal-list .collapsible-header{font-weight: bold;}

/*.meal-list .card-content .rec-calories::before,
.meal-list .card-content .rec-carbs::before,
.meal-list .card-content .rec-fat::before,
.meal-list .card-content .rec-protein::before {
	content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 2px;
    width: 12px;
    height: 12px;
    background-color: #F086A4;
    border-radius: 50%;
}*/

.card .card-title {white-space: inherit;font-size: 16px;font-weight: 400; padding:10px 15px;line-height: 22px; height:65px; border-bottom: 1px solid rgba(160, 160, 160, 0.2);}
.card .card-content {font-size: 12px;padding: 10px 15px;}

.meal-list .card-content .nutrient-title { font-weight: 400; width: 70px; display: inline-block;}
.meal-list .card-content .nutrient-grams { color: #3AAA35; font-weight: 400;}

.diet-coach,.feedback {
  padding: 10px;
  width: 100%;
  height: 100px;
  float: left;
  position: relative;
  display: inline;
  color: #FFF;
  padding-left: 90px;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
}
.diet-coach {
    background: url(/images/icon-user.png) no-repeat 12px 15px #3AAA35;
}
.feedback {
    background: url(/images/icon-envelope.png) no-repeat 12px 15px #3AAA35;
}
.diet-coach a,.feedback a{color: inherit;}
#step-4 .fs-title{margin-top: 1rem;}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #3AAA35;
  -webkit-box-shadow: 0 1px 0 0 #3AAA35;
          box-shadow: 0 1px 0 0 #3AAA35;
}
input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #3AAA35;
}
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border: 2px solid #3AAA35;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
  background-color: #3AAA35;
}
[type="checkbox"].filled-in:checked + span:not(.lever):after {
  border: 2px solid #3AAA35;
  background-color: #3AAA35;
}


/* New CSS */

/* #bs-collapse icon scale option */

.collapsible-header{position: relative;}

.collapsible .collapsible-header span:before {
  content: '\e146';
  position: absolute;
  font-family: 'Material Icons';
  right: 10px;
  top: 10px;
  font-size: 24px;
  transition: all 0.5s;
  transform: scale(1);
}

.collapsible li.active .collapsible-header span:before {
  content: ' ';
  transition: all 0.5s;
  transform: scale(0);
}

.collapsible .collapsible-header span:after {
  content: ' ';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 10px;
  top: 10px;
  transform: scale(0);
  transition: all 0.5s;
}

.collapsible li.active .collapsible-header span:after {
  content: '\e909';
  transform: scale(1);
  transition: all 0.5s;
}

.sticky{
  position: sticky;
  top: 0;
  margin: 0 auto !important;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
  padding: 20px 0px;
  border-bottom: 1px solid #333;
}