/*homepage css*/

.index-body {
	background: url("/assets/img/main-background.jpg") no-repeat fixed; 
    background-position: 0% 50%;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


body{
  font-family: 'Noto Sans', sans-serif;
	margin:0;
	width:100%;
	height:100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
header{
    position: fixed;
	width:100%; 
	background-color: rgba(0, 0, 0, 0.8);
	height:60px; 
	line-height:60px;
}

header button {
    outline:none !important;
}
.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:white;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:white;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu {
    z-index:1000000; 
    font-weight:bold; 
    font-size:0.8em; 
    width:100%; 
    background-color: rgba(0, 0, 0,0.8);
    position:absolute; 
    text-align:center; 
    font-size:12px;
    margin-top: 60px;
    position: fixed !important;
}
.menu ul {
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-image: none;
}

.menu li {
    display: block;   
    padding:20px 0 20px 0; 
    color: white;
    font-size: 20px;
}

.menu li:hover{
    color: rgb(16, 138, 21);
}

.menu ul li a { 
    text-decoration:none;  
    margin: 0px; 
    color:#666;
}

.menu ul li a:hover {  
    color: #666; 
    text-decoration:none;
}

.menu a{
    text-decoration:none; 
    color:#666;
}

.menu a:hover{
    text-decoration:none; 
    color:#666;
}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}

header{
    display:inline-block; 
    font-size:16px;
    z-index: 99;
}

span{
    padding-left:20px;
}

.logo {
    max-height: 50px !important;
}

.index-logo {
    width: 600px;
}

.index-title {
    font-size: 3.5vw;
    font-weight: 900;
    line-height: 4vw;
    color: white;
}

.index-subtitle {
    color: white;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.5rem;
    margin-top: 1rem;
    font-style: italic;
}

.index-select {
    color: white;
    font-size: 1.2rem;
    margin-top: 3rem;

}

.index-terms {
    color: white;
    font-size: .9rem;
    margin-top:30px;
    margin-bottom:100px;
}

.index-terms a {
    color: white;
    font-weight: 500;
}

.index-terms a:hover {
    color:  rgb(16, 138, 21);
}

 .copyright {
     color: white !important;
 }

.container-fluid {
   padding-top: 100px;
	/*padding-left: 2%; */
}

.banner-7 .container-fluid {
    padding-top: 0px !important;
}

.green-gradient {
	background: rgb(16, 138, 21);
	background: linear-gradient(90deg, rgba(16, 138, 21, 1) 0%, rgba(76, 175, 80, 1) 47%, rgba(57, 184, 124, 1) 63%, rgba(0, 212, 255, 1) 100%);
}

.gender {
	margin-left: -2%;
	margin-top: 2%;
}

.or-item h2 {
	color: white;
	text-align: center;
	margin-top: 40%;
	font-size: 30px;
	font-weight: 400;
}

/*.woman {
	width: 40px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}*/

.woman-alert, .men-alert {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: 0rem !important;
}

.women .alert {
    background:#FF0068;
    background: linear-gradient(315deg, #FF0068 0%,#FF00C1 74%) !important;
    z-index: -1;
}


.men .alert {
	background: #00CFFF;
    background: linear-gradient(315deg, #00CFFF 0%, #2665FB 74%);
    z-index: -1;
}

.women > .alert ,
.men > .alert {
	width: 100%;
	border-radius: 50%;
	font-size:25px;
	font-weight: 400;
	color: #fff;
	cursor: pointer;
    text-align: center !important;
}

/*.men-alert, .women-alert{
    position:relative;
}*/

.men-alert span, .women-alert span {
    text-align: center;
}

.frame {
    white-space: nowrap;       
    text-align: center; margin: 1em 0;
    }
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.gender-photo {
    vertical-align: middle;
    max-height: 100%;
}


.pulse-woman {
	animation: pulse-animation-women 2s infinite;
}

.pulse-man {
	animation: pulse-animation-man 2s infinite;
}

@keyframes pulse-animation-women {
	0% {
		box-shadow: 0 0 0 0px #FF0068;
	}
	100% {
		box-shadow: 0 0 0 50px rgba(0, 0, 0, 0);
	}
}

@keyframes pulse-animation-man {
	0% {
		box-shadow: 0 0 0 0px  #00CFFF;
	}
	100% {
		box-shadow: 0 0 0 50px rgba(0, 0, 0, 0);
	}
}

.master {
	color: black;
	float: right;
}

.show {
	display: block;
}

.hide {
	display: none;
}


/* progress bar css */
.progress-bar {
    margin-top: 3rem;
    border-radius: .5rem;
    background-color: rgba(255,255,255,0.2);
    padding: 10px 0px 10px 0px;
    margin-bottom:3rem;
}

.progress-item {
    font-size: 40px;
}

.progress-container {
    margin-top: 1rem;
}

.progress {
    margin-top: 1rem;
    margin-bottom: 0px !important;
    height: 10px !important;
}



/* page 2 */

.banner-2 {
background: url("/assets/img/fitnesslevel.jpg") no-repeat fixed; 
background-position: 0% 20%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.content-2, .content-3{
}



.footer {
    display: unset;
    text-align: center;
}

.answer-title {
    color: #ffffff;
    filter: drop-shadow(1px 3px 6px rgba(0, 0, 0, 0.8));
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 2.1rem;
    text-align: center;
}

.answer-title div {
margin: 2rem 1rem 4rem 1rem;
padding-left: 0px !important;
}

.emphasized {
    font-weight: 700 !important;
    padding-left: 2px !important;
}




/* page 3*/

.banner-3 {
	background: url("/assets/img/meats.jpg") no-repeat fixed; 
background-position: 0% 20%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


/* page 4*/

.banner-4 {
	background: url("/assets/img/veggies.jpg") no-repeat fixed; 
    background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


/* page 5*/

.banner-5 {
	background: url("/assets/img/banner5.jpg") no-repeat fixed; 
    background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


/* page 6*/

.banner-6 {
	background: url("/assets/img/typicalday.jpg") no-repeat fixed; 
    background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


/* page 7*/

.banner-7 {
	background: url("/assets/img/truestatements.jpg") no-repeat fixed; 
    background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

.banner-7 .wrapper {
    padding-left: 15px;
    padding-right: 15px;
}


/* page 8*/

.banner-8 {
	background: url("/assets/img/measurements.jpg") no-repeat fixed; 
    background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.banner-8 .fa, .banner-8 .fas {
    color: white !important;
}

.banner-8 .wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

#imperial-system {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

#metric-system {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}


/* page 9*/

.banner-9 {
	background: url("/assets/img/banner9.jpg") no-repeat fixed; 
    background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/* page 10*/
.banner-10 {
	background: url("/assets/img/banner10.jpg") no-repeat fixed; 
    background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow-x: none!important;
}


.water-box {
  text-align:center;
  position:relative;
  overflow:hidden;
  display:flex;
  background-color: white !important;
  width: 100%;
  margin-left: 0px;
  border-radius: 6px;
}

.water-box:before {
  content:"";
  position:absolute;
  width:800px;
  height:800px;
  background: #07B0C4; 
  left:50%;
  transform:translateX(-50%);
  border-radius:40%;
  animation:fill 14s ease-in-out infinite;
  z-index:2;
}
@keyframes fill {
  0% {
    top:400px;
    transform:translateX(-50%) rotate(0deg);
  }
  50% {
    top:-50px;
    transform:translateX(-50%) rotate(360deg);
  }
  100% {
    top:400px;
    transform:translateX(-50%) rotate(0deg);
  }
}


.recom-water {
    animation: change;
    animation-duration: 14s; 
    animation-iteration-count: infinite;
    font-size: 30px;
    font-weight: 400;
    background: #333333;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

.waterCount {
    animation: change2;
    animation-duration: 14s; 
    animation-iteration-count: infinite;
    font-size: 30px;
	font-weight: 500;
    background: -webkit-linear-gradient(#47A44A, rgba(0, 212, 255, 1)); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

@keyframes change {
    0% {
        background: #333333;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    10% {
        background: #333333;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    60% { 
        background: white;  
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    100% {
         background: #333333;
         -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

@keyframes change2 {
    0% {
        background: -webkit-linear-gradient(#47A44A, rgba(0, 212, 255, 1)); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    10% {
        background: -webkit-linear-gradient(#47A44A, rgba(0, 212, 255, 1)); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    60% { 
        background: white;  
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    100% {
        background: -webkit-linear-gradient(#47A44A, rgba(0, 212, 255, 1)); 
         -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.banner-9 .wrapper {
    text-align:center;
}

.egg-loader {
  margin-top: -100px;
  position:absolute;
  width:100%;
  height:100%;
  visibility:hidden;
  transform:translate(-50%, 0%);

}

.type {
    margin-top: -150px;
    color: #ffffff;
    filter: drop-shadow(1px 3px 6px rgba(0, 0, 0, 0.8));
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 2.1rem;
    text-align: center;
     display: inline;
}

.typed-cursor {
    color: #ffffff;
    filter: drop-shadow(1px 3px 6px rgba(0, 0, 0, 0.8));
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 2.1rem;
}

.icon-top {
	max-width: 200px;
}

.base-heading {
	color: #eee;
	text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
	font-weight: 600;
}

.step-icon {
	background: linear-gradient(60deg, #66bb6a, #43a047);
	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
	border-radius: 50%;
	background-color: #999999;
	padding: 15px;
	text-align: center;
	margin-bottom: 100px;
	height: 100px;
	width: 100px;
}

.step-icon i {
	color: #eee;
	line-height: 70px;
	font-size: 50px;
}

.answers,
.image-answers {
	padding-top: 10px;
}

.answer {
    position: relative;
	border-radius: .5rem;
	padding-top: 5px;
    padding-bottom: 5px;
	margin-top: 20px;
	cursor: pointer;
	color: black;
	background-color: white;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.answer-text {
	font-size: 20px;
	font-weight: 400;
	text-align: center;
    margin-top: 5px;
    margin-bottom: 5px !important;
}

.image-answer {
    border: 2px white solid;
    border-radius: 20px;
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}

.image-answer-text {
	color: white;
	text-align: center;
	font-size: 16px;
	margin-top: 0px;
}

.question-asked {
	color: rgba(46, 49, 49, 1);
	border-radius: 3px;
	padding: 5px 10px;
	margin-top: 20px;
	font-weight: 400;
	font-size: 22px;
	text-align: center;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    background-color: white;
}

.image-selector {
	color: rgba(46, 49, 49, 1);
	width: 40px;
	height: 40px;
	position: relative;
	font-size: 30px;
	cursor: pointer;
	border-radius: 50%;
	border: none;
	outline: 0;
	padding: 0;
    margin-right: -14px;
	background-color: white;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.plus,
.minus {
	color: #636171;
	padding: 10px;
	width: 40px;
	height: 40px;
	line-height: 30px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	box-sizing: border-box;
	transition: .5s all ease-out;
}

.plus {
	opacity: 0;
	transform: rotate(0deg);
    font-size: 20px;
    margin-top: 0px;
    margin-left: 4px;
}

.image-selector.active .plus {
	opacity: 1;
	transform: rotate(90deg);
    font-size: 20px;
    margin-top: 0px;
    margin-left: 4px;
}

.minus {
	opacity: 1;
	transform: rotate(0deg);
    font-size: 20px;
    margin-top: -3px;
}

.image-selector.active .minus {
	opacity: 0;
	transform: rotate(0deg);
    font-size: 20px;
    margin-top: -3px;
}

.centrelize {
	text-align: center;
}

.continue-button {
	margin-top: 10%;
	height: 60px;
	font-size: 30px;
	background: rgb(16, 138, 21);
	background: linear-gradient(90deg, #47A44A 0%, rgba(76, 175, 80, 1) 47%, rgba(57, 184, 124, 1) 63%, rgba(0, 212, 255, 1) 100%);
	border: 1px solid #1BC7C2;
}

.continue-button > .material-icons {
	font-size: 2rem !important;
	margin-bottom: -0.7em !important;
}

i.fa-times {
    position: absolute;
    right: 0;
    top: 0;
	border-radius: 50%;
	border: 1px solid rgba(46, 49, 49, 0.3);
	box-shadow: 0px 0px 2px white;
	padding: 0.5em 0.65em;
	font-size: 20px;
	color: rgba(46, 49, 49, 0.5);
    margin-right: 5px;
    margin-top: 4px;
}

i.fa-check {
    position: absolute;
    right: 0;
    top: 0;
	border-radius: 50%;
	box-shadow: 0px 0px 2px white;
	padding: 0.5em 0.5em;
	font-size: 20px;
	background-color: #4caf50;
	color: white;
    margin-right: 5px;
    margin-top: 4px;
}



.active-answer {
	color:black;
}

.answer:hover {
	color: white;
    background: rgb(16, 138, 21);
	background: linear-gradient(90deg, rgba(16, 138, 21, 1) 0%, rgba(76, 175, 80, 1) 47%, rgba(57, 184, 124, 1) 63%, rgba(0, 212, 255, 1) 100%);
}

.image-answer-group {
    margin-top: 20px;
	cursor: pointer;
}

.measurements {
	margin-top: 10px;
	border-radius: 3px;
	padding: 0px;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}

.measurements span {
	font-size: 30px;
	text-transform: uppercase;
	margin: 0px;
	min-width: 25px;
	padding: 10px;
}

.measurements .col-md-6 {
	padding: 0px;
}

.inactive-measure-system {
	background-color: #eee;
	border-color: #2E3131;
	box-shadow: none;
	color: rgba(46, 49, 49, 0.7);
}

.active-measure-system {
	background: rgb(16, 138, 21);
	background: linear-gradient(90deg, rgba(16, 138, 21, 1) 0%, rgba(76, 175, 80, 1) 47%, rgba(57, 184, 124, 1) 63%, rgba(0, 212, 255, 1) 100%);
}

.inactive-measure-system:hover {
	background-color: #eee;
	box-shadow: none;
	color: rgba(46, 49, 49, 1);
}

.col-form-label {
	text-align: center;
	margin-top: 5px;
}

.col-form-label i {
	font-size: 30px;
	color: rgba(46, 49, 49, 1);
}

.form-control,
.is-focused .form-control {
	background-image: linear-gradient(to top, rgb(16, 138, 21) 2px, rgba(156, 39, 176, 0) 2px), linear-gradient(to top, #d2d2d2 1px, rgba(210, 210, 210, 0) 1px);
}

.measurement-content {
	margin-top: 2%;
}

.input-unit {
	color: white;
	line-height: 1.5;
	font-size: 1.5em;
	margin-bottom: -1.5em;
	text-align: right;
	margin-right: 10px;
	display: none;
}

.form-group.is-focused .form-control {
	color: rgba(46, 49, 49, 1);
}

.form-control {
	text-align: center;
	color: rgba(46, 49, 49, 0.8);
	font-size: 2em;
}

#metricTab .row,
#imperialTab .row {
	margin-top: 20px;
}

.loader {
	color: rgba(46, 49, 49, 1);
	width: 100px;
	height: 80px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}

.loader .image {
	width: 100px;
	height: 160px;
	font-size: 40px;
	text-align: center;
	transform-origin: bottom center;
	animation: 3s rotateImages infinite;
	opacity: 0;
}

.loader span {
	display: block;
	width: 100%;
	text-align: center;
	position: absolute;
	font-size: 30px;
	bottom: 0;
}

.loader {
	width: 100px;
	height: 80px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}

.loader .image {
	width: 100px;
	height: 160px;
	font-size: 40px;
	text-align: center;
	transform-origin: bottom center;
	animation: 3s rotateImg infinite;
	opacity: 0;
}

.loader span {
	display: block;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0;
	margin-top: 20px;
}

@keyframes rotateImg {
	0% {
		transform: rotate(90deg);
	}
	10% {
		opacity: 0;
	}
	35% {
		transform: rotate(0deg);
		opacity: 1;
	}
	65% {
		transform: rotate(0deg);
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		transform: rotate(-90deg);
	}
}

.loading-unit {
	padding-top: 30px;
	min-height: 400px;
	margin-top: -50px;
}

.text-loader {
	font-size: 30px;
	color: rgba(46, 49, 49, 1);
	text-align: center;
}

.page10 {
	padding-top: 100px;
}

.final-heading {
	 color: #ffffff;
    filter: drop-shadow(1px 3px 6px rgba(0, 0, 0, 0.8));
    font-weight: 400;
    text-transform: uppercase;
    font-size: 4rem;
    line-height: 5.5rem;
}

button.get-now-btn {
	font-size: 30px !important;
	padding: 15px !important;
	border-radius: 3px !important;
	border: 1px solid #09D2F8 !important;
	background: rgb(16, 138, 21);
	background: linear-gradient(90deg, #47A44A 0%, rgba(76, 175, 80, 1) 47%, rgba(57, 184, 124, 1) 63%, rgba(0, 212, 255, 1) 100%);
}

.phone {
	max-width: 350px;
}


.summary-box {
/*	max-width: 150px; */
	height: 150px !important;
/*	position: relative;*/
}

.summary-box .fas,
.card-icon i {
	font-size: 25px;
	color: white;
}

.summary-header > .card-icon {
	padding: 5px !important;
}

.gender-icon i {
	color: rgba(46, 49, 49, 1) !important;
	font-size: 50px !important;
	text-align: center;
}

.gender-here,
.infoTab {
	color: rgba(46, 49, 49, 1);
	font-size: 20px;
	position: absolute;
	bottom: 10px;
	text-align: center;
}

.age-here,
.height-here,
.weight-here {
	text-align: center;
	color: rgba(46, 49, 49, 1);
	margin-top: 10px;
	font-size: 50px;
}

.ct-chart .ct-series-a .ct-point,
.ct-chart .ct-series-a .ct-line {
	stroke: #53ac57;
}

.body-index {
	font-weight: bold;
}

.bmi-desc {
	color: rgba(46, 49, 49, 1);
    margin-top: 20px;
}

.piefilled1 {
	stroke: #53ac57;
	fill: #53ac57;
}

.piefilled2 {
	stroke: #316734;
	fill: #316734;
}

.pieempty {
	stroke: #eee;
	fill: #eee;
}

.final-card-head {
	font-size: 20px;
	font-weight: 400;
}

.final-card-bottom {
	font-size: 30px;
	font-weight: 400;
	margin-top: 90px;
}

.card-footer {
	margin: 0px !important;
}

.carbs-color {
	background: -webkit-linear-gradient(#ED213A, #93291E);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.proteins-color {
	background: -webkit-linear-gradient(#47e7e9, #2d31c9);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.fats-color {
	background: -webkit-linear-gradient(#a8ff78, #78ffd6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.calorierange {
	margin-top: 30px;
	font-size: 30px;
	font-weight: 500;
	text-align: center;
	color: #53ac57;
	text-shadow: 1px 1px 1px rgba(13, 13, 14, 0.8);
	margin-bottom: 30px;
}

.calorie-count {
	margin-top: -140px;
	font-size: 20px;
	color: #3C4858;
}

.min-calorie {
	margin-right: 90px
}

.water-image img {
	max-height: 200px !important;
	margin-top: 80px;
}

.weight-image img {
	max-height: 250px;
	margin-top: 40px;
}

.water-value {
	margin-top: -100px;
	font-size: 20px;
	text-align: center;
	color: white;
	font-weight: 400;
}

.weight-value,
.recipe-value {
	font-size: 30px;
	text-align: center;
	color:  #3C4858;
	font-weight: 500;
	margin-top: -160px;
	text-shadow: 1px 1px 1px rgba(128, 128, 126, 0.8);
}

.recipe-value {
    margin-top: -80px !important;
}

.body-index,
.weightCount {
	background: -webkit-linear-gradient(#47A44A, rgba(0, 212, 255, 1)); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
	font-size: 30px;
    font-weight: 500;
	font-weight: 500;
}

.howmuch {
    background: -webkit-linear-gradient(#47A44A, rgba(0, 212, 255, 1)); 
    font-weight: 500;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

#elementsPieChart {
	margin-top: 30px;
}

#weightLineChart {
	margin-top: 30px;
}

#weightLineChart .ct-chart .ct-series-a .ct-slice-pie,
.ct-chart .ct-series-a .ct-slice-donut-solid,
.ct-chart .ct-series-a .ct-area {
	fill: #53ac57 !important;
	opacity: 0.3;
}

#weightLineChart .ct-horizontal {
	margin-left: -25px;
}

#weightLineChart .ct-horizontal.ct-end {
	width: 50px !important;
	margin-left: -30px;
}

#colouredRoundedLineChart .ct-series-a .ct-point:nth-child(2),
#colouredRoundedLineChart .ct-series-a .ct-point:nth-child(3),
#colouredRoundedLineChart .ct-series-a .ct-point:nth-child(4) {
	display: none;
}

#weightLineChart .ct-chart .ct-series-a .ct-slice-pie, .ct-chart .ct-series-a .ct-slice-donut-solid, .ct-chart .ct-series-a .ct-area {
    fill: url(#gradient4) !important;
}

.weekday {
	font-size: 10px;
}

.day {
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

.day i {
	font-size: 5px;
}

.howmuch {
	text-align: center;
    font-size: 50px;
    font-weight: 500;
    line-height: 56px;
    margin-top: 60px;
}

.last-card-text {
	margin-top: 40px;
}

.green-item {
	color: #53ac57;
}

.bottom-icons {
	font-size: 30px !important;
	text-align: center;
}

.bottom-text {
	font-size: 25px;
	text-align: left !important;
    padding: 0px;
    width: calc(100% - 20px)!important;
    margin-left: 20px;
    display: block;
}

.gen-footer {
	background-color: white;
	margin-top: 30px;
	padding-top: 30px;
	padding-right: 30px;
}

.footer-menu ul li {
	list-style-type: none;
	line-height: 30px;
}

.footer-menu ul li a {
	color: #636171;
}

.footer-menu ul li a:hover {
	color: #50AA54;
}

.rights-reserved {
	text-align: right;
}

.contact-back, .contact-info {
	background-image: url("/assets/img/contact-info-back.jpg");
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: auto;
}



.form-back {
	background-image: url("/assets/img/contact-info-back.jpg");
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 100vh;
}

.contact-head {
    margin-top: 120px;
	color: white;
}

.contact-head .bmd-label-floating {
	color: white;
	margin-top: 30px;
	font-size: 25px;
}

.contact-head .form-control {
	color: white !important;
}

.stubborn {
	color: #50aa54 !important;
	text-shadow: 0px 1px 1px black;
}


#email-submit {
    margin-bottom: 20px;
}


#payment h1 {
	color: white;
	margin-top: 30px !important;
    text-align: center;
}

.payment-box {
	border: 2px solid #9a949c;
	border-radius: 5px !important;
	height: 120px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: rgba(0, 0, 0, 0.4);
    margin-top: 0px;
}

.vertical-align-payment-box {
	display: flex;
	justify-content: left;
	align-items: center;
}

.the-icon {
	margin: auto;
}

.payment-box .fa-times {
	color: white !important;
	text-align: center;
}

.payment-box-head {
	color: white;
	font-size: 1.3rem;
	line-height: 1.3rem;
	padding-right: 0px !important;
}

.price {
	font-size: 0.5rem;
	line-height: 0.5rem;
	padding: 0px !important;
}

.box-pricing {
	color:#238823;
	font-size: 1.2rem;
	line-height: 1rem;
	text-align: center;
	font-weight: 600;
	margin: 0px;
}

.payment-box .row {
	flex-wrap: inherit;
	width: 100%;
}

.box-pricing-sub {
	color: white;
	font-size: 0.8rem;
	text-align: center;
	font-weight: 400;
	margin: 0px;
}

.total-box-price {
	margin: 0px;
	text-align: center;
	font-size: 0.9rem;
	color: white;
}

.special-offer-box {
	background-color: white;
    position: absolute;
    width: 93%;
    border-radius: 3px;
    text-align: center;
    margin-left: 3.5%;
    margin-right: auto;
    bottom: -10px;
    font-weight: 700;
    color: #3C4858;

}

.selected-box {
	border: 2px solid #4caf50;
}

.pay-btn {
	border-radius: 50px;
	font-size: 20px;
	min-width: 400px;
}

.fa-credit-card,
.fa-cc-paypal {
	font-size: 20px;
	line-height: initial;
	float: right;
}

#credit-card {
	margin-top: 10%;
}

#credit-card2 {
    color: white;
    padding:15px;
}

#paypal {
	margin-top: 1%;
}

.what-you-get {
	margin-top: 5%;
}

.what-you-get ul {
	list-style-type: none;
	margin-top: 5%;
}

.what-you-get li {
	color: white;
	font-size: 20px;
	line-height: 60px;
}

.what-you-get li .fas {
	color: #50aa54;
	margin-right: 10px;
	font-size: 20px;
}

.feedbacks {
	margin-top: 5% !important;
}

.split {
	margin-top: 1% !important;
}

.feedbacks img {
	width: inherit;
}

#payment p {
	color: white;
	font-size: 12px;
	text-align: center;
	margin-top: 5% !important;
}

.secure-banner {
	min-height: 70px;
}

.secure-banner .img-fluid {
    max-height: 70px !important;
}

.parent {
	height: 70px;
}

.card .card-header-rose .card-icon {
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(68, 157, 68, 0.4) !important;
}

.child {
	line-height: 70px;
	vertical-align: middle;
	color: white;
    font-size: 14px;
}
.card-holder {
	padding-top: 60px;
	padding-bottom: 60px;
	text-align: center;
}

.card-holder img {
	max-height: 40px;
}

.bmd-form-group [class^='bmd-label'].bmd-label-floating,
.bmd-form-group [class*=' bmd-label'].bmd-label-floating {
	line-height: 0.5;
}

.remove-left-right-padding {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.payment-cards {
	margin-left: 0px;
	margin-right: 0px;
}

.payment-check {
	max-width: 62px !important;
}

.summary-box {
    max-width: 100%;
}

.food-icon {
        width: 80%;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 20px;
}

    .food-icon img {
    width: 100%;
    margin: 100 auto;
    margin-top: 0;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;

    }

.vertical-align-parent {
    /*padding-left: 30px;
    padding-right: 0px; */
}

.errors-page {
    text-align: center;
    color: red;
    background-color: rgba(255, 255, 255, 0.7);
    font-weight:500;
    filter: drop-shadow(1px 3px 6px rgba(0, 0, 0, 0.8));
}

#circle {
    margin-top: 100px;
}


[data-id = "s0"]  {
    fill: url(#gradient1) !important;
    font-weight:600;
    font-size:28px;
} 

[data-id = "s1"]  {
    fill: url(#gradient2) !important;
    font-weight:600;
    font-size:28px;
} 

[data-id = "s2"]  {
    fill: url(#gradient4) !important;
    font-weight:600;
    font-size:28px;
}

.question-mark-modal i {
    font-size: 50px;
    color: white;
} 


/* On xl systems */

@media (min-width:1200px) {
	.payment-box {
		margin-right: 10px;
	}
    .section-half {
        margin-left: 0px !important;
    }

    .cot-cheese {
        margin-top: -20px !important;
    }

    .bmi-card {
        min-height: 450px;
    }

}

/*  Custom size */
@media( max-width: 401px) {
    .cot-cheese {
        margin-top: -20px;
    }
}

.modal-btn {
    padding: 10px 4px !important;
    font-weight: 500 !important;
    background-color: white !important;
    color: #3C4858;
    font-size: 16px;
    border: 1px solid #3C4858 !important;
}

.modal-btn:hover {
    font-weight: 600 !important;
     color: #3C4858;
}

.modal-btn:focus {
    font-weight: 600 !important;
     color: #3C4858;
}

@media (min-width:992px) {
    .women > .alert ,
    .men > .alert {
        min-height:150px;
        text-align: center;
        padding-top: 40px;
    }
}

/* On lg, md, sm, xs */

@media (max-width: 1200px) {
    .calorierange {
        margin-bottom: 0px !important;
    }

    .water-image img {
        margin-top: 40px !important;
    }
}


/* On lg systems */

@media (max-width:1200px) and (min-width:992px) {
	.payment-box {
		margin-right: 10px;
	}
	.price {
		margin-left: -10px;
	}
    .section-half {
        margin-left: 0px !important;
    }

    #caloriePieChart {
        margin-top: -50px !important;
    }

    .modal-btn {
    padding: 10px 4px !important;
    font-weight: 600 !important;
    background-color: white !important;
    color: #3C4858;
    font-size: 16px;
    border: 1px solid #3C4858 !important;
    }
}


/* On md systems */

@media (max-width:992px) and (min-width:768px) {
	.payment-box {
		margin-left: 8.33333%;
		margin-top: 10px;
	}
	.box-pricing {
		font-size: 1.2rem;
		color: white;
	}
	.price {
		margin-left: 30px;
	}

    .modal-btn {
    padding: 10px 4px !important;
    font-weight: 600 !important;
    background-color: white !important;
    color: #3C4858;
    font-size: 16px;
    border: 1px solid #3C4858 !important;
    }
}


.mobile-view-progress {
        margin-left: 0px;
        margin-right: 0px;
        display: none;
}

.desktop-view-progress {
        display: block;
    }


/* On xs systems */

@media (max-width: 576px) {
	.payment-box {
		margin-top: 30px !important;
	}
	.sec-user {
		margin-top: 5px;
	}
	.secured-item {
		margin-top: 5%;
	}

    #caloriePieChart {
        margin-top: 40px !important;
    }

    .image-selector {
        margin-right: 5px;
	    margin-top: 10px;
    }
    .footer .copyright {
      margin-right:20px;
    }

    .index-body {
        background-position: 70% !important;
    }
    .child {
        line-height: 15px;
        margin-top: 3%;
    }

    .child span {
        padding: 0px;  margin-top: 15% !important
    }

    .card-holder {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.main-back {
	background: rgb(16, 138, 21) !important;
	background: linear-gradient(90deg, #47A44A 0%, rgba(76, 175, 80, 1) 47%, rgba(57, 184, 124, 1) 63%, rgba(0, 212, 255, 1) 100%) !important;
	border: 1px solid #1BC7C2 !important;
}


.login-form-row {
	margin-top: 5%;
}

.login-form-row .card-footer {
	display: block;
	padding-right: 10px !important;
}

.login-form-row .card-footer .main-bacl {
	margin-right: 20px;
}

.thankyou-back {
	min-height: 100vh;
}

.thankyou-back h1 {
	margin-top: 10%;
	color: white;
    text-align: center;
}

.thankyou-back h2 {
	color: white;
	text-align: center;
}

.inside-link {
    color: #AAAAAA !important;
    font-weight: 700;
    text-decoration: underline;
}


.active {
    background-color:  rgb(16, 138, 21) !important;
    
}

.active .plus {
    color: white !important;
}

.add-space {
    padding-top: 100px;
}

.measurement-content input {
    color: white !important;
}

.four-content {
    font-size: 3rem;
    line-height: 4rem;
    text-align: center;
}

.four-content a {
    color: rgb(16, 138, 21);
    font-weight: 500;
    text-shadow: 1px 3px 5px black;
}


#i-agree {
    font-size: 20px;
    color: white;
}

/* Less then 1200 - lg, md, sm, xs */
@media only screen and (max-width: 1200px) {
    .index-body {
        background-position: 80% 50%;
    }
    .banner-2 {
        background-position: 80% 20% !important;
    }

    #circle {
    margin-top: 20px;
    }
}


/* Less than 768px - sm, xs */

@media only screen and (max-width: 768px) {
	.or-item {
		margin-top: -100px;
		margin-bottom: 80px;
		text-shadow: 1px 0px 0px black;
	}
	.simple-answer {
		margin-left: 10px;
		margin-right: 10px;
	}

    .index-terms div {
        text-align: center;
    }

   .index-subtitle {
        font-size: 1rem;
        line-height: 1.1rem;
    }

    .index-select {
        margin-top: 2rem;
        font-size: 0.8rem;
        line-height: 1rem;
        font-weight: 600;
        text-align: center;
    }

    .women, .men {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .mobile-view-progress {
        display: block !important;
    }

    .desktop-view-progress {
        display: none !important;
    }

    .banner-9 {
        background-position: 10% !important;
    }


    .contact-head h1 {
        font-size: 2rem;
    }

    .contact-back, .contact-info {
        background-position: 40%;
    }

     .food-icon {
        width: 70% !important;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .food-icon img {
    width: 100%;
    margin: 100 auto;
    margin-top: 0;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;

    }

    .form-control {
    padding:0px !important;
    font-size: 20px!important;
    }

    .phone {
        width: 300px;
        margin-right: -60px;
    }

    .payment-head h1 {
        text-align: center;
        font-size: 2.5rem;
        line-height: 1.15em;
        font-weight: 500;
    }

    .pay-btn {
       width: 100%;
       border-radius: 0px;
    }

    #circle {
    margin-top: 20px;
    }

    .modal-btn {
        display: none;
    }

    .answer-title div {
        margin: 2rem 1rem 0rem 1rem;
    }

    .image-answer-group {
        margin-top: 0px;
    }

    .image-answer {
        margin: 20px;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .men .alert, .women .alert {
        padding: 20px 15px !important;
        text-align:center;
    }
    
}

/* On sm systems only */

@media (max-width: 768px) and (min-width: 576px) {
	.payment-box {
		margin-left: 8.33333%;
		margin-top: 30px;
	}
	.sec-user {
		margin-top: 5px;
	}
	.secured-item {
		margin-top: 5%;
	}
}

/* On xs systems only */

@media only screen and (max-width: 576px) {
    .index-title {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .index-subtitle {
    font-size: 1rem;
    line-height: 1.1rem;
    }

    .contact-head {
        margin-top: 0px;
    }

    .final-heading {
        font-size: 40px;
        line-height: 70px;
    }

    #svg {
        margin-top: -40px !important;
    }

    .pizza-card .card-footer {
        margin-top:-20px !important;
    }
    
    .index-select {
    margin-top: 1rem;
    font-size: 0.8rem;
    line-height: 1rem;
    text-align: center;
    }
}

body {
    overflow-x: hidden !important;
}

footer {

    bottom: 0;
    right: 10px;
}

#paypal-container, #paypal-container2 {
    margin-top: 50px;
    background-color:white;
    -moz-box-shadow:    inset 0 0 5px #000000;
   -webkit-box-shadow: inset 0 0 5px #000000;
   box-shadow:         inset 0 0 5px #000000;
    padding: 15px;
    border-radius: 15px;
}

.legal-box {
    background-color: rgba(0,0,0,0.8);
    padding:20px 15px;
    color: white;
    margin-bottom: 60px;
}

.legal-box h2 {
    text-align: center;
    font-weight: 500;
}

.legal-box .card-collapse{
    padding:10px;
}

.legal-box .card-collapse:hover {
    background: rgba(255,255,255,0.4);
}

.legal-box .card-collapse a{
    color: white;
}

.legal-box #accordion {
    margin-top: 40px;
}

.forgotPass {
    margin-top: 10px;
    color: #3C4858;
}

.forgotPass:hover {
    color: #3C4858;
    text-decoration: underline;
}

.head-feedback {
    font-weight: 500;
}

.subhead-feedback {
    font-weight: 400;
    font-size: 30px;
    color: white !important;
}

.single-feedback {
    background-color: white;
    border-radius: 15px;
    padding: 30px;
        -moz-box-shadow:    inset 0 0 5px #000000;
   -webkit-box-shadow: inset 0 0 5px #000000;
   box-shadow:         inset 0 0 5px #000000;
}

.feedback-title {
    font-size: 20px !important;
    color: #3C4858 !important;
    font-weight: 500;
    font-style: italic;
}

.feedback-subtitle {
    font-size: 16px !important;
    color: #3C4858 !important;
    font-weight: 400;
}

.validated-badge {
    background-color: rgba(16, 138, 21,0.8) !important;
    border-radius: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.the-testimonial {
    color: #3C4858 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    font-weight: 500;
    font-style: italic;
}

.circle-image {
    border-radius: 50%;
    max-width: 150px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 2px solid #4caf50;
    box-shadow: 3px 2px 14px rgba(0,0,0,0.3);
}

.modal-logo {
    position: absolute;
    top: 10px;
    left: 10px;
}

.modal-title {
    font-weight: 500;
}

.question-mark {
    position: absolute;
    top: 75px;
    right: 5px;
}

.question-mark i {
    color: white;
    font-size: 40px;
}

@media (min-width: 576px) {
    .modal-dialog {
    max-width: 800px !important;
    margin: 1.75rem auto;
    }
}

@media (min-width: 768px) {
    .question-mark {
        display: none;
    }
}

svg {
    touch-action: unset;
}

.payment-card-text {
    text-align: center;
    margin-top: 5%;
    margin-bottom: 0px;
    text-decoration: underline;
    background: -webkit-linear-gradient(#47A44A, rgba(0, 212, 255, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
    font-weight: 700;
}

.total-box-price {
    color: #D2222D;
    text-decoration: line-through;
    font-size: 16px;
    font-weight: 500;
}


.alert span {
    max-width: 100% !important;
    padding-left: 0px;
}

.card .card-body + .card-footer, .card .card-footer {
    justify-content: unset;
}

.card-img-top {
    max-height: 300px;
    object-fit: cover;
}

.bloglink {
    color: rgb(16, 138, 21) !important;
    font-weight: 400;
}

.singlecat:hover {
    text-decoration: underline;
}

.form-header {
    font-size: 16px;
    font-style: italic;
}

.single-tag {
    color: white;
    cursor: pointer;
    margin: 5px 3px 5px 0;
    position: relative;
    padding: 3px 8px;
    border-radius: 15px;
    font-weight: 500;
    font-size: .75em;
    display: inline-block;
    line-height: 1.5em;
    padding-left: .8em;
}

.women-alert, .men-alert {
    margin-bottom: 0px !important;
}