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

/*----- Form Styles -----*/
.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; 
}

.forms .form-block:after {
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}

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

.forms .form-block-standard:after {
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}

.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; 
}

/*----- 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,0.05);
	-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.05);
	box-shadow: 0 0 10px 0 rgba(0,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,0.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,0.04);
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.04);
	box-shadow: 0 0 15px 0 rgba(0,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 {
	/*bottom: -1px;
	font-size: 34px;
	opacity: 0;
	position: absolute;
	width: 108px;
	z-index: 0;*/
}

.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;
    /*display: block;*/
    font: 700 13px/32px "Open Sans",sans-serif;
   /* height: 32px;
    outline: medium none;
    overflow: hidden;*/
    padding: 10px 20px;
   /* position: absolute;
    text-align: center;
    top: 4px;*/
    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;
	/*font: 15px/48px 'Open Sans', sans-serif;*/
	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;
}

.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: 45%;
	float: left;
	margin-right: 10%;
}

.macro-col2:last-child {
	margin-right: 0;
}

.macro-col3 {
	width: 28%;
	float: left;
	margin-right: 8%;
}

.macro-col3:last-child {
	margin-right: 0;
}

.macro-col4 {
	width: 19%;
	float: left;
	margin-right: 8%;
}

.macro-col4:last-child {
	margin-right: 0;
}

.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;
	}

/*=========================================================== 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 .macro-col4 {
	width: 45%;
	margin-right:10%;
}

.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;
}

.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;
}