/* ==========================================================================
Template Name 	: 	Trainstar
Author				: 	
Theme Url 			: 	
Description		: 	
Website				: 	
========================================================================== */

@import url("font.css");

/* ==========================================================================
Basic Styling
========================================================================== */ 
body { width: 100%; min-height: 100%; font-family: "Helvetica Neue","HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal; font-size: 14px; line-height: 21px; color: #333; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative;}

.helvetica-light {font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal;}
.helvetica-regular {font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal;}
.helvetica-medium {font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;}

body, html { height: 100%;}

h1, h2, h3, h4, h5, h6 { font-weight: normal; position: relative; color: #222;}
h1, h2, h3, h4, h5, h6 { margin-top: 0;  margin-bottom: 10px; padding-top: 0; font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;}

.myriad {font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', "myriad_web_proregular", Helvetica, Lucida Sans Unicode,Arial,sans-serif;}

h1 {font-size: 44px;}
h3 {font-size: 22px; line-height: 34px; }
h2 {font-size: 34px; line-height: 44px;}
h4 {font-size: 17px;}
h5 {font-size: 12px; margin: 0; padding: 0; line-height: 16px; margin-bottom: 5px; font-weight: normal; text-transform: uppercase;}

p { margin-bottom: 15px;}

a, button {-webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; color: #f7941d;}
a:hover, a:focus { text-decoration: none; color: #007DA0; outline: none; } 

ul { margin: 0; padding: 0; list-style: none;}
li {transition: all 0.2s ease-out;}

::-moz-selection { text-shadow: none; background: #0090D9; color: #FFF;}
::selection { text-shadow: none; background: #0090D9; color: #FFF; }

img::selection { background: 0 0;}
img::-moz-selection { background: 0 0;}

hr {margin-top: 20px; margin-bottom: 30px; clear: both; border-top: 1px solid #EFEFEF;}
body { webkit-tap-highlight-color: rgba(255,255,255,.2);}

form {margin-bottom: 0;}
input, select, textarea {outline: 0;}
input:hover, input:focus,
textarea:hover, textarea:hover {border: none;}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus { border-color: transparent; box-shadow: none!important; outline: 0 none;}

.input-group .form-control {z-index: initial;}
.input-group .form-control:last-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
.btn:active, .btn.active {box-shadow: none;}


/* ==========================================================================
Classes
========================================================================== */ 
.cover {-webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover; background-attachment: fixed; }

.thin {font-weight: 300;}
.strong {font-weight: 700;}

.subline {font-size: 24px;}

.section {padding: 85px 0; overflow: hidden;}
.section20 {padding:20px 0;}
.section30 {padding:30px 0;}

.bottom-align {position: absolute; bottom: 20px; width: 100%; height: auto;}

.table-cell {display: table-cell; vertical-align: center;}

.padding10 {padding: 10px 0!important;}
.padding20 {padding: 20px 0!important;}
.padding40 {padding:40px 0;}
.padding50 {padding:50px 0!important;}
.padding60 {padding: 60px 0;}
.padding80 {padding: 80px 0!important;}
.paddingtop-5 {padding-top: 5px!important;}
.paddingtop-10 {padding-top: 10px!important;}
.paddingtop-20 {padding-top: 20px!important;}
.paddingtop-30 {padding-top: 30px!important;}
.paddingtop-70 {padding-top: 70px!important;}
.paddingtop-80 {padding-top: 50px!important;}
.paddingtop-40 {padding-top: 40px!important;}
.paddingbottom-10 {padding-bottom: 10px!important;}
.paddingbottom-20 {padding-bottom: 20px!important;}
.paddingbottom-50 {padding-bottom: 50px!important;}
.paddingbottom-80 {padding-bottom: 80px!important;}

.padding25-all {padding: 25px!important;}
.nopadding {padding: 0!important;}
	
.paddingright-10 {padding-right: 10px;}
.paddingleft-10 {padding-left: 10px;}
.paddingleft-20 {padding-left: 20px!important;}
.paddingleft-25 {padding-left: 25px;}
.paddingtop-content {padding-top: 12px;}

.nopadding-bottom {padding-bottom: 0!important;}
.nopadding-top {padding-top: 0!important;}

.bordered {border:1px solid #EFEFEF;}
.border-left {border-left: 1px solid #EFEFEF;}
.border-right {border-right: 1px solid #EFEFEF;}
.border-top {border-top: 1px solid #EFEFEF;}
.border-bottom {border-bottom: 1px solid #EFEFEF;}
.borderbottom-2 {border-bottom: 2px solid rgba(0,0,0,0.2);}
.noborder-bottom {border-bottom: none!important;}
.bordered-bottom {border-bottom: 1px solid #F7F7F7!important;}
.bordered-top {border-top: 1px solid #F7F7F7!important;}

.separator30 {margin:30px 0;}
.separator60 {margin:60px 0;}

.marginbottom-none {margin-bottom: 0!important;}
.marginbottom-5 {margin-bottom: 5px!important;}
.marginbottom-10 {margin-bottom: 10px!important;}
.marginbottom-15 {margin-bottom: 15px!important;}
.marginbottom-120 {margin-bottom: 120px!important;}
.marginbottom-12 {margin-bottom: 12px!important;}
.marginbottom-30 {margin-bottom: 30px!important;}

.nomargin-top {margin-top: 0!important;}
.nomargin-bottom {margin-bottom: 0;}
.nomargin-right {margin-right: 0}
.nomargin-left {margin-left: 0!important;}

.marginleft-5 {margin-left: 5px!important;}
.marginright-5 {margin-right: 5px;}
.marginright-8 {margin-right: 8px;}
.marginright-10 {margin-right: 10px;}
.marginright-20 {margin-right: 20px!important;}
.marginright-30 {margin-right: 30px!important;}

.divider70 {clear: both; height: 70px;}
.divider50 {clear: both; height: 50px;}
.divider20 {clear: both; height: 20px;}
.divider35 {clear: both; height: 35px;}

.margin50 {margin: 50px 0;}
.margin20 {margin: 20px 0;}
.margintop-5 {margin-top: 5px!important;}
.margintop-10 {margin-top: 10px;}
.margintop-20 {margin-top: 20px!important;}
.margintop-30 {margin-top: 30px;}
.margintop-40 {margin-top: 40px;}
.margintop-45 {margin-top: 45px!important;}
.margintop-50 {margin-top: 50px!important;}
.margintop-70 {margin-top: 70px!important;}

.marginbottom-20 {margin-bottom: 20px!important;}
.marginbottom-90 {margin-bottom: 90px;}
.marginbottom-120 {margin-bottom: 55px!important;}

.overflow-hidden {overflow: hidden;}
.no-overflow {overflow: visible!important}

.text-center {text-align: center!important;}
.text-center img {display: block; margin: 0 auto!important; float: none!important;}
.text-center i {margin: 0 auto!important; float: none!important;}

.btn {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal; font-size: 14px;}
.btn:hover, .btn:focus { background-color: #090C0F; color: #FFF; border-color: #090C0F;}

.bg-overlay { background-color: rgba(59, 71, 95, 0.8); position: fixed; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 100%;}

.relative {position: relative!important;}
.fixed {position: fixed!important;}
.absolute {position: absolute!important;}


.text-left {text-align: left;}
.text-right {text-align: right;}
.align-right {text-align: right!important;}
.align-left {text-align: left;}

.underline {text-decoration: underline;}

.overlay { position: fixed; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6);}
.overlay-black { position: fixed; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index:  5; display: table;}
.overlay-black2 { position: fixed;width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 5;}

.circle-blue {color: #2A9BDC;}
.marginpara-bottom5 p {margin-bottom: 5px;}

.transparent {background-color: transparent!important; background: none!important;}


/* ==========================================================================
Color Customizations
========================================================================== */
.bg-none {background: none!important;}

.bg-white {background-color: #FFF!important;}
.bg-grey {background-color: #f0efef;}
.bg-grey2 {background-color: #888!important;}
.bg-blue {background-color: #00A3A3!important;}
.bg-blue2 {background-color: #007AFF!important;}
.bg-dark {background-color: #20232A;}
.bg-orange {background-color: #F27F22!important;}
.bg-green {background-color: #8DBB24!important; }
.bg-black {background-color: #333!important;}

.bg-semi {background: rgba(255,255,255,0.85)}

.white-text,
.white-text p,
.white-text a,
.white-text h5,
.white-text h4,
.white-text h3,
.white-text h2,
.white-text h1,
.white-text li {color: #FFF!important;}

.dark-text,
.dark-text p,
.dark-text a,
.dark-text h5,
.dark-text h4,
.dark-text h3,
.dark-text h2,
.dark-text h1,
.dark-text li {color: #333!important;}

.yellow {color: #F0B91E!important;}
.yellow2 {color: #F1B921!important;}
.orange {color: #F27F22!important;}
.black {color: #000!important;}
.blue {color: #007AFF!important;}

.bold-text {font-weight: bold;}
.underline {text-decoration: underline;}

/* ==========================================================================
Backgrounds
========================================================================== */ 
.bg-signup {background: url(../img/bg-signup.png); background-position: top center; background-size: cover; background-attachment: fixed;}
.bg-home {background: url(../img/main-bg.jpg); background-position: top center; background-size: cover; background-attachment: fixed;}
.bg-landing {background: url(../img/main-bg-tinted.jpg); background-position: top center; background-size: cover; background-attachment: fixed;}
/* ==========================================================================
Forms
========================================================================== */
.form-input, .input-group {margin-bottom: 15px; width: 100%;}
.form-group input, .input-group input {border: none; border-radius: 3px; padding: 25px 15px; padding-left: 10px; box-shadow: none; display: block;}
.form-group input[type="submit"], 
.form-group button,
.input-group input[type="submit"], 
.input-group button
{background-color: #F1B921; border: none; color: #FFF; padding: 15px 25px; width: 100%;}

::-webkit-input-placeholder { color: #bbb!important;}
:-moz-placeholder {color: #bbb!important; }
::-moz-placeholder {color: #bbb!important;}
:-ms-input-placeholder { color: #bbb!important;}

/* ==========================================================================
Screen Section
========================================================================== */ 

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

.vertical-center {
min-height: 100%;  /* Fallback for vh unit */
min-height: 100vh; 

/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; 

/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;

/* In legacy web browsers such as Firefox 9 we need to specify the width of the flex container */
width: 100%;

/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers hence the bootstrap's container won't be aligned to the center anymore. Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
}

.home-footer-login {position: relative; bottom: -10px;}
.home-footer-login p a {font-weight: bold;}
.home-footer-login p {margin-bottom: 0;}
 
/* ==========================================================================
Social Login
========================================================================== */

/* ==========================================================================
Page Header
 ========================================================================== */
.inline {display: inline-block!important;}
.block {display: block!important;}


/* ==========================================================================
Media Queries
========================================================================== */
 
/* ------ Tablet Portrait size to standard 960 (devices and browsers) ------*/
@media only screen and (max-width: 959px) {
}

/* ------ Mobile Landscape Size to Tablet Portrait (devices and browsers) ------*/
@media only screen and (max-width: 767px) {
	.container {width: 100%;}
}


/* ------ Mobile Portrait Size to Mobile Landscape Size (devices and browsers) ------*/
@media only screen and (max-width: 479px) {
	.text-right2 i {font-size: 16px; margin-left: 5px;}
	p {margin-bottom: 10px;}
	h2 {font-size: 28px;}


	.footer-links li {font-size: 10px; padding: 0; margin-top: 0;}
	.footer-links li i { font-size: 20px;  padding-top: 5px;}
	.footer-links li i {margin-bottom: 0;}

	.paddingtop-80 {padding-top: 10px;}
	.follow-name {width: 60%; overflow: hidden;}

	.footer-invite i {right: 20px;}

	.padding40-mobile {padding-top: 12px;}

	.home-columns {text-align: center;}
	.home-columns .box-listing img {float: none; display: block; margin: 10px auto;}
	
	.mobile-align-left {text-align: left!important;}
	
	.results-box .follow-listing {width: 90%;}

	.workout-tabs button {font-size: 14px;}
	.text-right-mobile {text-align: right;}
	.text-right-mobile i {position: static;}
	

	.nosidemargin {margin-left:0!important; margin-right: 0!important; padding-left: 0!important; padding-right: 0!important;}
	
	.mobile-header-first {padding-left: 30px; padding-left: 15px;}
	
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {padding-right: 8px; padding-left: 8px;}
	
	.header li.home-link {font-size: 18px; margin-top: -6px; font-weight: bold; font-family: "myriad_web_proregular";}
}




 
/*----------------------------------------------------------------
Typography
----------------------------------------------------------------*/
.headline-thin {font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal; font-size: 72px; margin-bottom: 35px;}
.headline-bold {font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal; font-weight: bold;}
 .large-font {font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal; font-size:36px; line-height: 46px;}
 
 .headline-bold h3 {font-size: 48px;}
 
/*----------------------------------------------------------------
Colors
----------------------------------------------------------------*/
.green {color: #8ebc3f;}
.orange {color: #f17f21;}

.arrow-next-section {width: 80px; height: 80px; line-height: 65px; font-size: 16px; border-radius: 50%; background-color: #FFF; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; margin-bottom: -40px; z-index: 1; color: #cac9c9;}
.arrow-next-section.bg-grey {background-color: #f0efef;}

.full-height {height: 100%!important; position: relative;}
.splash {background: transparent;}

.header {margin-top: 30px; margin-bottom: 50px;}
.header p {color: #929191;}
.header a {border-bottom: 2px solid #929292; padding-bottom: 3px; color: #929292;}

.vertical-align1 {float:none; display:inline-block; vertical-align:middle; margin-right:-4px;}

.text-center img.margintop-75 {margin-top: 75px!important;}
.marginleft-10 {margin-left: 10px;}

.btn-green {background: #8ebc3f; color: #FFF; font-size: 18px; font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal; border-color: rgba(0,0,0,0.02); padding: 15px 40px; border-radius: 5px;}

.section65 {padding: 65px 0;}

.centered-absolute {height: 20%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

.splash-form {background: rgba(0,0,0,0.5); padding: 30px 0; font-size: 18px; margin-top: 100px; margin-bottom: 50px;}

.splash-form .form-inline .form-group {width: 70%;}
.splash-form .form-inline .form-control {width: 100%;}
.splash-form .btn-green {font-size: 18px; padding-top: 10px; padding-bottom: 10px;}

.splash-form .form-group input, .splash-form .input-group input {font-size: 18px; padding: 23px 15px;}

.splash-form-bottom p {color: #929191;}

.footer {background: #202728; padding: 35px;}
.footer p {margin-bottom: 0; color: #929292;}
.footer-links li {display: inline-block; margin-right: 25px; font-size: 12px;}
.footer-links a {color: #929292;}

.splash h2 {text-transform: uppercase; font-size: 48px;}
.splash h4 {font-size: 32px; font-weight: normal;}
.splash p a {border-bottom: 2px solid #929292; padding-bottom: 3px; color: #929292;}
.splash p a:hover {color: #FFF; border-color: #FFF;}

.fixed-bottom {bottom: 0; position: fixed; width: 100%;}


.header-black {background: #333;}
.top-links li {display: inline-block; font-size: 14px; padding: 10px 30px;}
.top-links li a {color: #929191;}
.top-links li i {font-size: 20px; color: #FFF; margin-right: 10px;}
.top-links li.active {border-bottom: 4px solid #929191;}

.bg-semi-grey {background: rgba(50,50,50,0.4); border-radius: 10px;}
.bg-semi-orange {background: rgba(240,126,33, 0.8); border-radius: 10px;}
.bg-semi-green {background: rgba(141,187,62,0.8); border-radius: 10px;}
.bg-semi-blue {background: rgba(4,110,158,0.8); border-radius: 10px;}
.bg-semi-white {background: rgba(255,255,255,0.8); border-radius: 10px;}

.boxed-details {}
.boxed-details h4 {}

.nutri li {border-bottom: 1px solid rgba(0,0,0,0.2); padding: 25px 20px;}
.nutri li:last-child {border-bottom: none;}
.nutri img {float: left; margin-right: 25px;}
.nutri h4 {font-size: 18px; margin-bottom: 5px; font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:400; font-stretch:normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.nutri p {margin-bottom: 0; font-size: 12px;}

.whats-new img {max-width: 25px; margin-right: 10px;}

.clearfix {clear: both;}

.big-btn-semi {background: rgba(0,0,0,0.5); padding: 20px 40px; text-align: center; color: #FFF; font-size: 14px; border-radius: 10px; display: block; width: 60%; margin: 0 auto; margin-top: 30px; font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;}

.footer-semi {padding: 15px; background: rgba(50,50,50,0.9); border-radius: 10px; margin-bottom: 60px;}
.footer-semi p {margin-bottom: 0; color: #CECECE; font-size: 12px;}
.footer-semi a {color: #CECECE;}

.orange-tabs li {margin-bottom: 15px;}
.orange-tabs li a {background: #F07E21; padding: 20px 25px; font-size: 12px; text-transform: uppercase; color: #FFF;}
.orange-tabs li:last-child a {background: #8DBB3E;}
.orange-tabs li a:hover,
.orange-tabs li.active a:hover {background: #333;}
.orange-tabs li.active a{background: #F07E21; margin-right: -20px;}