/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/*----- Form Styles -----*/
#macro-form {
	box-sizing: border-box;
}

.forms {
	padding: 20px;
}

.form-wrapper {
	margin: 0 auto;
	outline: none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	padding: 40px;
}

.forms {
	color: #555;
	font-size: 14px;
	line-height: 1;
	position: relative;
}

.forms .input {
	position: relative;
}

.forms .form-block {
	position: relative;
	margin-bottom: 50px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.macro-calc-percentage {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.forms .form-block-standard {
	position: relative;
	margin-bottom: 30px;
}

.forms .form-pad {
	padding-top: 10px;
}

.forms .form-colL {
	float: left;
	width: 45%;
}

.forms .form-colR {
	float: right;
	width: 45%;
}

.forms .form-macro-col3 {
	float: left;
	width: 33.33%;
}

.forms .form-macro-col4 {
	float: left;
	width: 25%;
}

.forms .inline-group {
	display: inline-block;
}

/*----- Layout -----------*/
.imperial-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.metric-box {
	width: 100%;
}

.macro-calc-grams {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.forms .snack-size {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.forms .snack-size .label {
	width: 100%;
}

label.disabled {
	color: #999 !important;
}

.forms .inline-group.snack-size .radio {
	margin-right: 0;
}

/*----- Form Reset -----*/
.forms select, .forms input[type="button"], .forms input[type="submit"], .forms input[type="search"] {
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}

.forms .hidden {
	display: none;
}

.forms fieldset {
	border: none;
	margin: 0;
	padding: 0;
	display: block;
	overflow-y: hidden;
	background-color: transparent;
}

.forms fieldset p {
	margin-bottom: 40px;
}

/*----- Labels -----*/
.forms label {
	color: #333;
	display: block;
	margin-bottom: 8px;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.4em;
}

.forms label.tip {
	height: auto;
}

label.radio, label.checkbox {
	font-weight: normal;
}

.macro-container {
	font-size: 1.3em;
}

/*----- Radio and Checkbox -----*/
.forms .radio, .forms .checkbox, .forms .radio-toggle, .forms .checkbox-toggle {
	color: #555;
	cursor: pointer;
	font-size: 14px;
	height: 14px;
	margin-bottom: 10px;
	position: relative;
	line-height: 14px;
}

.forms .radio, .forms .checkbox, .forms .inline-group .radio, .forms .inline-group .checkbox {
	padding: 7px 0 11px 28px;
}

.forms .radio-toggle, .forms .checkbox-toggle, .forms .inline-group .radio-toggle, .forms .inline-group .checkbox-toggle {
	padding: 7px 0 11px 54px;
}

/*.forms .radio:last-child, .forms .checkbox:last-child, .forms .radio-toggle:last-child, .forms .checkbox-toggle:last-child { 
	margin-bottom: 0; 
}*/
.forms .inline-group .radio, .forms .inline-group .checkbox, .forms .inline-group .radio-toggle, .forms .inline-group .checkbox-toggle {
	display: inline-block;
	margin-right: 40px;
}

.forms .radio input, .forms .checkbox input, .forms .radio-toggle input, .forms .checkbox-toggle input {
	position: absolute;
	left: -9999px;
}

.forms .radio i, .forms .checkbox i, .forms .checkbox-toggle i, .forms .radio-toggle i {
	border: 1px solid #ddd;
	display: block;
	height: 18px;
	left: 0;
	outline: none;
	position: absolute;
	top: 5px;
	-webkit-transition: border-color .2s;
	-moz-transition: border-color .2s;
	-ms-transition: border-color .2s;
	-o-transition: border-color .2s;
	transition: border-color .2s;
	background: #fff;
}

.forms .radio i, .forms .checkbox i {
	width: 18px;
}

.forms .checkbox-toggle i, .forms .radio-toggle i {
	width: 44px;
}

.forms .checkbox i, .forms .checkbox-toggle i {
	border-radius: 0;
}

.forms .radio i, .forms .radio i:after, .forms .radio-toggle i:before {
	border-radius: 50%;
	padding: 0;
}

.forms .radio-toggle i {
	border-radius: 13px;
}

.forms .checkbox-toggle i:before {
	border-radius: 0;
}

.forms .radio i:after {
	background-color: #ef6b73;
	content: "";
	height: 8px;
	top: 4px;
	left: 4px;
	opacity: 0;
	position: absolute;
	width: 8px;
}

.forms .checkbox i:after {
	border-width: 0 0 2px 2px;
	border-bottom: solid #ef6b73;
	border-left: solid #ef6b73;
	content: "";
	height: 5px;
	top: 5px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 3px;
	opacity: 0;
	position: absolute;
	width: 10px;
}

.forms .radio input:checked + i:after, .forms .checkbox input:checked + i:after {
	opacity: 1;
}

.forms .checkbox-toggle i:before, .forms .radio-toggle i:before {
	border: none;
	background-color: #000;
	content: "";
	display: block;
	height: 12px;
	left: 3px;
	position: absolute;
	top: 3px;
	width: 12px;
}

.forms .checkbox-toggle input:checked + i:before, .forms .radio-toggle input:checked + i:before {
	left: 28px;
}

.forms .checkbox-toggle i:after, .forms .radio-toggle i:after, .forms .checkbox-toggle input:checked + i:after, .forms .radio-toggle input:checked + i:after {
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
	line-height: 10px;
	position: absolute;
	top: 4px;
}

.forms .checkbox-toggle i:after, .forms .radio-toggle i:after {
	content: "NO";
	left: 22px;
}

.forms .checkbox-toggle input:checked + i:after, .forms .radio-toggle input:checked + i:after {
	content: "YES";
	left: 6px;
}

.forms .checkbox:hover i, .forms .radio:hover i, .forms .checkbox-toggle:hover i, .forms .radio-toggle:hover i {
	-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
	-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05);
}

.forms .radio input:checked + i, .forms .checkbox input:checked + i, .forms .radio-toggle input:checked + i, .forms .checkbox-toggle input:checked + i {
	border: 1px solid #ddd;
}

.forms .radio input:checked + i, .forms .checkbox input:checked + i {
	color: #000;
}

.forms .checkbox-toggle input:checked + i, .forms .radio-toggle input:checked + i {
	background-color: #fff;
}

/*----- Input ------*/
.forms input[type="text"], .forms input[type="password"], .forms input[type="email"], .forms input[type="url"], .forms input[type="tel"], .forms input[type="number"], .forms textarea, .forms select {
	background: rgba(255, 255, 255, .8);
	border: 1px solid #ddd;
	color: #555;
	display: block;
	height: 40px;
	padding: 10px 15px;
	width: 100%;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
	font: 400 14px "Open Sans", sans-serif;
}

.forms input[type="text"]:hover, .forms input[type="password"]:hover, .forms input[type="email"]:hover, .forms input[type="url"]:hover, .forms input[type="tel"]:hover, .forms input[type="number"]:hover, .forms textarea:hover, .forms select:hover {
	-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .04);
	-moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .04);
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, .04);
}

.forms input[type="text"]:focus, .forms input[type="password"]:focus, .forms input[type="email"]:focus, .forms input[type="url"]:focus, .forms input[type="tel"]:focus, .forms input[type="number"]:focus, .forms textarea:focus, .forms select:focus {
	border: 1px solid #ddd;
}

.forms .input textarea {
	height: 100px;
	overflow: auto;
	min-height: 52px;
	resize: vertical;
}

.forms .input textarea:focus {
	height: 140px;
}

.forms .input textarea.chat {
	min-height: 900px;
}

/*----- Select -----*/
.forms select {
	padding-left: 13px;
	position: relative;
	outline: none;
}

select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}

select::-moz-focus-inner {
	outline: none !important;
}

.forms .select i {
	background: #fff;
	-webkit-box-shadow: 0 0 0 8px #fff;
	-moz-box-shadow: 0 0 0 8px #fff;
	-o-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
	height: 20px;
	position: absolute;
	pointer-events: none;
	bottom: 11px;
	right: 10px;
	width: 10px;
}

.forms .select i:after, .forms .select i:before {
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
	position: absolute;
	right: 3px;
}

.forms .select i:after {
	border-top: 6px solid #bbb;
	bottom: 1px;
}

.forms .select i:before {
	border-bottom: 6px solid #bbb;
	top: 5px;
}

/*----- File Upload -----*/
.forms .file-button input {}

.forms .append-big-btn .file-button input {
	right: 0;
}

.forms .append-big-btn .file-button {
	/*width: 106px;*/
	right: 4px;
	cursor: pointer !important;
}

.forms .append-big-btn input[type="text"] {
	padding-right: 123px;
}

.forms .input input[type="file"] {
	cursor: pointer;
}

/*----- Buttons -----*/
.forms .primary-btn {
	border: none;
	color: #fff;
	display: block;
	cursor: pointer;
	font: 700 13px "Open Sans", sans-serif;
	height: 40px;
	margin: 0;
	outline: none;
	padding: 0 30px;
	white-space: nowrap;
	position: relative;
	text-transform: uppercase;
}

.forms .file-button {
	color: #fff;
	font: 700 13px/32px "Open Sans", sans-serif;
	padding: 10px 20px;
	z-index: 1;
}

.forms .primary-btn, .forms .file-button {
	background: #ef6b73;
	-webkit-transition: background .2s;
	-moz-transition: background .2s;
	-ms-transition: background .2s;
	-o-transition: background .2s;
	transition: background .2s;
}

.forms .primary-btn:hover, .forms .file-button:hover {
	background: #000;
}

/*----- Tooltip -----*/
.forms .tooltip {
	background-color: #000;
	border-radius: 3px;
	display: block;
	left: -9999px;
	opacity: 0;
	position: absolute;
	z-index: 20px;
	color: #fff;
	font: 700 12px/20px "Open Sans", sans-serif;
	padding: 5px 10px;
}

.forms .input input:focus + .tooltip, .forms .input textarea:focus + .tooltip, .forms .select select:focus + .tooltip, .forms .input input:focus + .tooltip-image, .forms .input textarea:focus + .tooltip-image, .forms .select select:focus + .tooltip-image {
	opacity: 1;
	z-index: 5;
}

.forms .tooltip-left-top {
	bottom: 100%;
	margin-bottom: 8px;
}

.forms .tooltip-left-top:before {
	border-color: #000 transparent;
	border-style: solid;
	border-width: 8px 7px 0;
	bottom: -6px;
	content: "";
	left: 16px;
	position: absolute;
}

.forms .input input:focus + .tooltip-left-top, .forms .input textarea:focus + .tooltip-left-top, .forms .select select:focus + .tooltip-left-top {
	left: 0;
	right: auto;
}

/*----- Error Message -----*/
.forms .error-view .checkbox i, .forms .error-view .radio i, .forms .error-view .checkbox-toggle i, .forms .error-view .radio-toggle i, .forms .error-view input, .forms .error-view select, .forms .error-view textarea {
	background: #ffebee !important;
}

.forms .select.error-view i {
	background-color: #ffebee;
	-webkit-box-shadow: 0 0 0 12px #ffebee;
	-moz-box-shadow: 0 0 0 12px #ffebee;
	-o-box-shadow: 0 0 0 12px #ffebee;
	box-shadow: 0 0 0 12px #ffebee;
}

.forms span.error-view {
	display: block;
	font-size: 12px;
	height: 14px;
	line-height: 14px;
	margin-top: 5px;
	padding: 0 2px;
	color: #b71c1c;
}

.forms .error-message {
	background: #ffebee;
	color: #b71c1c;
}

/*----- Ratings -----*/
.forms .rating-group {
	color: #555;
	height: 30px;
	line-height: 30px;
	margin-bottom: 4px;
}

.forms .rating-group:last-child {
	margin-bottom: 0;
}

.forms .rating-group .label {
	float: left;
	font-size: 14px;
	height: 30px;
	line-height: 30px;
	margin-bottom: 0;
	padding-right: 20px;
}

.forms .rating-group .ratings {
	float: left;
	height: 30px;
	line-height: 30px;
}

.forms .ratings input {
	left: -9999px;
	position: absolute;
}

.forms .ratings input + label {
	color: #ddd;
	cursor: pointer;
	font-size: 20px;
	float: right;
	padding: 0 2px;
	-webkit-transition: color .2s;
	-moz-transition: color .2s;
	-ms-transition: color .2s;
	-o-transition: color .2s;
	transition: color .2s;
}

.forms .ratings input + label:hover, .forms .ratings input + label:hover ~ label, .forms .ratings input:checked + label, .forms .ratings input:checked + label ~ label {
	color: #000;
}

/*----- Stepper -----*/
.forms .stepper {
	position: relative;
	padding-right: 40px;
}

.forms .stepper .stepper-wrapper {
	bottom: 0;
	outline: none;
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
	width: 40px;
}

.forms .stepper input::-webkit-inner-spin-button, .forms .stepper input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.forms .stepper .stepper-arrow {
	background-color: #eee;
	cursor: pointer;
	display: block;
	height: 50%;
}

.forms .stepper .stepper-arrow.down {
	bottom: 0;
}

.forms .stepper .stepper-arrow.up:after, .forms .stepper .stepper-arrow.down:after {
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
	position: absolute;
	right: 16px;
}

.forms .stepper .stepper-arrow.down:after {
	border-top: 6px solid #000;
	bottom: 13px;
}

.forms .stepper .stepper-arrow.up:after {
	border-bottom: 6px solid #000;
	top: 13px;
}

.forms .stepper .stepper-arrow:hover.down:after {
	border-top: 6px solid #000;
}

.forms .stepper .stepper-arrow:hover.up:after {
	border-bottom: 6px solid #000;
}

/*----- Slider -----*/
.ui-slider {
	position: relative;
	max-width: 95%;
}

.ui-slider .ui-slider-range {
	border: none;
	display: block;
	font-size: 11px;
	position: absolute;
	overflow: hidden;
	z-index: 1;
}

.ui-slider .ui-slider-handle {
	background-color: #ef6b73;
	border-radius: 100%;
	cursor: pointer;
	height: 15px;
	position: absolute;
	outline: none;
	left: -5px;
	width: 15px;
	z-index: 2;
}

.ui-slider-horizontal {
	height: 5px;
	margin-bottom: 10px;
}

.ui-slider-vertical {
	height: 100px;
	width: 5px;
	margin-left: 5px;
}

.ui-slider-horizontal .ui-slider-handle {
	top: -6px;
	margin-left: 0;
}

.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}

.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}

.ui-slider.ui-widget-content {
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 0;
}

.ui-slider-vertical .ui-widget-header, .ui-slider-horizontal .ui-widget-header {
	background-color: #ef6b73;
}

.forms .slider-group {
	color: #333;
	min-height: 48px;
	padding: 0 2px;
	margin-bottom: 5px;
	line-height: 1.4em;
}

.forms .slider-group label {
	display: inline-block;
	color: #333;
	padding: 0 4px;
	height: 1px;
}

.form-tip {
	background-color: #f6f6f6;
	border-radius: 4px;
	padding: 20px;
	margin: 20px 0px;
	display: block;
}

.tip-toggle {
	display: block;
	margin-bottom: 20px;
}

.forms .form-block {
	margin-bottom: 30px;
}

.forms .slider-group {
	font-size: 1.1em;
	font-weight: bold;
}

.mb40 {
	margin-bottom: 40px !important;
}

p {
	line-height: 1.5em;
}

.callout-box {
	border-radius: 4px;
	padding: 20px;
	margin: 20px 0 40px;
	background-color: #f6f6f6;
	border: 1px solid #c6c6c6;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.callout-box h3 {
	width: 100%;
}

.forms .callout-box .bmi-message {
	margin-top: 10px !important;
	margin-bottom: 1px;
}

.body-fat-box {
	margin-bottom: 30px;
}

.macro-footer {
	text-align: center;
	font-size: .9em;
}

/* grid */
.macro-col2 {
	width: 47.5%;
}

.macro-col3 {
	width: 30%;
}

.macro-col4 {
	width: 21%;
}

.macro-row {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.macro-row .macro-col3 {
	text-align: center;
	margin-bottom: 0 !important;
}

.macro-row .macro-col3 .macro-number {
	display: block;
	margin-top: 8px;
}

.macro-row::after, .callout-box::after, .section-3::after {
	content: "";
	display: block;
	float: none;
	clear: both;
}

.text-center {
	text-align: center;
}

.callout-box h3 {
	font-size: 1.5em !important;
	margin-top: 0 !important;
	text-transform: uppercase !important;
	margin-bottom: 10px;
}

.callout-box p {
	font-size: 1.1em !important;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.callout-box .macro-number {
	font-weight: bold;
}

.section-4 {
	margin-top: 0;
}

.section-4 .text-message {
	font-size: 1.5em;
	clear: both;
}

.forms .bmi-message {
	margin-top: 10px;
}

.macro-number {
	display: block;
}

.bmi-value {
	display: inline !important;
}

.form-tip p:last-child {
	margin-bottom: 0;
}

#macro-form fieldset {
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	opacity: 1 !important;
}

#macro-form	input[type="number"] {
	width: 100% !important;
}

.ui-slider-vertical .ui-widget-header, .ui-slider-horizontal .ui-widget-header, .ui-slider .ui-slider-handle, .forms .radio i::after {
	background-image: none;
}

#macro-form input[type=number] {
	width: 100% !important;
	max-width: none !important;
}

.weekly-box {
	background: #555;
	color: #fff;
}

.weekly-box h3 {
	color: #fff !important;
}

.weekly-box .macro-accent {
	color: #f7f7f7 !important;
}

.forms .form-tip p {
	margin-bottom: 10px;
}

/*=========================================================== Breakpoint 1024 ==================================================*/

/*=========================================================== Breakpoint 768 =================================================*/
.macro-768 .macro-number {
	display: inline;
}

.macro-768 label.tip {
	min-height: 40px;
}

.macro-768 .bmi-message {
	margin-top: 20px !important;
}

.macro-768 .form-block {
	margin-bottom: 0;
}

.macro-768 .macro-col2, .macro-768 .macro-col3, .macro-768 .macro-col4, .macro-768 .inline-group {
	margin-bottom: 30px;
}

.macro-768 .section-4 .macro-col4 {
	margin-bottom: 10px;
}

.macro-768 .input textarea.chat {
	min-height: 300px;
}

.macro-768 .macro-col3, .macro-768 .callout-box .macro-col4 {
	width: 100%;
	float: none;
	margin-right: 0;
}

.macro-768 .callout-box .macro-col4 {
	width: auto;
}

/*.macro-768 .full-768 {
	width: 100%;
	display: block;
}*/
.macro-768 .macro-col4:nth-child(2n+2) {
	margin-right: 0%;
}

.macro-768 .callout-box .macro-col3:last-child, .macro-768 .callout-box .macro-col4:last-child {
	margin-bottom: 0;
}

.macro-768 .section-3 .callout-box {
	text-align: center;
}

.macro-768 .callout-box h3 {
	margin-bottom: 20px;
	text-align: center;
}

.macro-768 .section-4 {
	margin-top: -30px;
}

/*============================================= Breakpoint 480 ==============================*/
.macro-480 .macro-number {
	display: inline;
}

.macro-480 .bmi-message {
	margin-top: 10px !important;
}

.macro-480 label.tip {
	height: auto;
}

.macro-480 .form-block {
	margin-bottom: 0;
}

.macro-480 .macro-col2, .macro-480 .macro-col3, .macro-480 .macro-col4, .macro-480 .inline-group {
	margin-bottom: 30px;
}

.macro-480 .section-4 .macro-col4 {
	margin-bottom: 10px;
}

.macro-480 .input textarea.chat {
	min-height: 300px;
}

.macro-480 .macro-col2, .macro-480 .macro-col3, .macro-480 .macro-col4 {
	width: 100%;
	float: none;
	margin-right: 0;
}

.macro-480 .callout-box .macro-col3:last-child, .macro-480 .callout-box .macro-col4:last-child {
	margin-bottom: 0;
}

.macro-480 .section-3 .callout-box {
	text-align: center;
}

.macro-480 .callout-box h3 {
	margin-bottom: 20px;
}

.macro-480 .section-4 {
	margin-top: -30px;
}

.macro-480 .macro-col2 {
	width: 100%;
	float: none;
	margin-right: 0;
}

.macro-480 .macro-calc-percentage {
	width: 100%;
}