/* fonts
---------------------------------------------------------------------------------------------------------------- */
@font-face{
   font-family: "HelveticaNeueLTStd-Hv";
   font-style: normal;
   font-weight: normal;
   src: url("fonts/HelveticaNeueLTStd-Hv.otf");
}
@font-face{
   font-family: "HelveticaNeueLTStd-Lt";
   font-style: normal;
   font-weight: normal;
   src: url("fonts/HelveticaNeueLTStd-Lt.otf");
}
@font-face{
   font-family: "HelveticaNeueLTStd-Md";
   font-style: normal;
   font-weight: normal;
   src: url("fonts/HelveticaNeueLTStd-Md.otf");
}
@font-face{
   font-family: "HelveticaNeueLTStd-Th";
   font-style: normal;
   font-weight: normal;
   src: url("fonts/HelveticaNeueLTStd-Th.otf");
}


/* body
------------------------------------------------------------------------------------------------------  */
body {
    margin: 0 auto;
/*    font-family: "HelveticaNeueLTStd-Lt";*/
		font-family: "sofia-pro-soft",sans-serif;
    width: 100%;
/*    max-width: 1380px;*/
    padding: 0px;
    text-align: center;
	letter-spacing: 1px;
/*background: linear-gradient(0deg, #bbd37f ,#71ba78 100%) no-repeat;*/
 background-color:#73bb78;
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#73bb78, endColorstr=#73bb78);
 background-image:-moz-linear-gradient(top, #73bb78 0%, #73bb78 25%,#bbd37f 50%,#bbd37f 100%);
background-image:linear-gradient(top, #73bb78 0%, #73bb78 25%,#bbd37f 50%,#bbd37f 100%);
background-image:-webkit-linear-gradient(top, #73bb78 0%, #73bb78 25%,#bbd37f 50%,#bbd37f 100%);
background-image:-o-linear-gradient(top, #73bb78 0%, #73bb78 25%,#bbd37f 50%,#bbd37f 100%);
background-image:-ms-linear-gradient(top, #73bb78 0%, #73bb78 25%,#bbd37f 50%,#bbd37f 100%);
 background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#73bb78), color-stop(25%,#73bb78),color-stop(50%,#bbd37f),color-stop(100%,#bbd37f));
 
    overflow-x: hidden;
}
h3
{
font-family: "sofia-pro-soft",sans-serif;	
}

p, ul, li
{
    font-family: "HelveticaNeueLTStd-Lt";	
}

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #6cb977, #bbd37f)); /* Standard syntax (must be last) */
}

	/* row
	------------------------------------------------------------------------------------------------------  */
	.row        { width: 100%; /*max-width: 1380px;*/ margin: 0 auto; }


	/* cols
	------------------------------------------------------------------------------------------------------  */
	.col_100    { float: left; margin: 0px; padding: 0px; width: 100%; }
	.col_75     { float: left; margin: 0px; padding: 0px; width: 75%; }
	.col_66     { float: left; margin: 0px; padding: 0px; width: 66.66%; }
	.col_50     { float: left; margin: 0px; padding: 0px; width: 50%; }
	.col_45     { float: left; margin: 0px; padding: 0px; width: 45%; }
	.col_33     { float: left; margin: 0px; padding: 0px; width: 33.33%; }
	.col_25     { float: left; margin: 0px; padding: 0px; width: 25%; }
	.col_20     { float: left; margin: 0px; padding: 0px; width: 20%; }



	/* utils
	------------------------------------------------------------------------------------------------------  */
	.fleft		{ float: left !important; }
	.fright		{ float: right !important; }
	.tacenter	{ text-align: center !important; }
	.backred 	{ background-color: #e42612 !important; }
	.backblue 	{ background-color: #004288 !important; }
    .backlightblue 	{ background-color: #20b9dc !important; }
	 .backwhite 	{ background-color: white !important; }
	.backgreen 	{ background-color: #80ba27 !important; }
	.backcyan 	{ background-color: #20b9dc !important; }
	.backpurple     { background-color: #994b97 !important; }
	.backgrey {background-color:#97a4ad!important;}
        
	.blacktext {color:black!important;}	

	.margintop0	{ margin-top: 0px !important; }
	.marginbot0	{ margin-bottom: 0px !important; }
	.marginbot22	{ margin-bottom: 22px !important; }
	.marginbot122	{ margin-bottom: 122px !important; }
	.txtcolgray { color: #999 !important; }
	.tbig		{ font-size: 35px !important; }

	.txt-blue {color:#004288 !important;font-family: "HelveticaNeueLTStd-Md";font-weight:bold}



	/* header
	------------------------------------------------------------------------------------------------------  */
	#header{
		display: inline-block;
/*		background-color: white;*/
		padding: 10px 0px;
		padding-bottom: 0px;
		height: 500px;
		background:url(../vid/YST%201%20-%20Introducing%20HSBC%20UK%20Go-Ride%20Go%20-%20no%20audio%20-%20480p.mp4);
	}
	#header .menu{
	width: 83%;
	text-align: left;
	font-size: 18px;
	border-radius: 10px;
/*	background-color: white;*/
	display: inline-block;
	margin-top:40px;
	}
	#header .menu a{
		float: left;
/*		width: 150px;*/
		padding: 14px 0px;
		padding-top: 20px;
		color: #000;
		text-align: center;
		background-color: #fff;
		text-decoration: none;
		font-size: 14px;
		border-style: solid;
		border-width: 2px;
		border-radius: 10px;
/*		margin-right: 69.8px;*/
		margin-top: 40px;
		margin-right: 5.5%;
		width: 13%;
	}
	#header .no-styles{
		width: 250px !important;
		padding-top: 0px !important;
		margin-top: 0px !important;
		border: none !important;
		background: none !important;
	}
	#header .menu a:hover{
/*		background-color: #95989a;
		color: #fff;*/
	}

	#header .menu img{
		float: left;
		width: 210px;
		margin: 25px;
		margin-top: 9px;
	}
	#header .menu .login{
position: absolute;
width: 80px;
padding-top: 36px;
padding-bottom: 10px;
margin-top: -30px;
color: #fff;
border: none;
margin-left: 0px;
background: none;
right: 0px;
margin-right: 30px;
	}
	#header .menu .login img{
		width:70px;
		margin-top: -25px;
		margin-left: 10px;
	}
	#header .menu .login div{
margin-top: -67px;
float: left;
color: white;
margin-left: 25px;
font-size: 12px;
	}
#header .menu .login.out div{
margin-left: 20px;
	}	
	#header .menu-responsive .login img {
    width: 70px;
margin-top: -5px;
    margin-left: 10px;
	float: right;
}
	#header .menu-responsive .login div{
float: right;
color: #fff;
/*margin-left: 53px;*/
font-size: 12px;
margin-right: -65px;
margin-top: 20px;
	}
	
#header .menu-responsive .login.out div {
    margin-left: 20px;
}
	#header .logged{
		padding-top: 52px !important;
	}
	#header .menu-responsive{
		display: none;
		float: left;
		width: 100%;
/*		background-color: #e5e5e5;*/
		padding: 10px 0px;
		padding-bottom: 0px;		
		text-align: center;
	}
	#header .menu-responsive .pull{
		float: left;
margin-top: 5px;
	}
	#header .menu-responsive .pull img{
		width: 40px;
		cursor: pointer;
	}
	#header .menu-responsive .pull img:hover{
		opacity: 0.8;
	}
	#header .menu-responsive .content-menu{
		float: left;
		width: 100%;
		margin-bottom: 20px;
margin-top: 0px;
	}
	#header .menu-responsive .content-menu a{
		float: left;
		width: 100%;
		border-top: 1px solid #ccc;
		padding: 16px 0px;
		color: #95989a;
		text-align: center;
		background-color: #fff;
		text-decoration: none;
		font-size: 14px;
	}
	#header .menu-responsive img{
		width: 150px;
		margin: 25px;
		margin-top: -5px;
	}

	#header .menu-responsive .login-responsive{
		float: right;
		width: 80px;
		padding-top: 36px;
		padding-bottom: 10px;
		margin-top: -20px;
		margin-right: 20px;
		font-size: 12px;
/*		background-color: #95989a;*/
		color: #fff;
		text-decoration: none;
	}




	/* top
	------------------------------------------------------------------------------------------------------  */
	#top{
		display: inline-block;
		background-color: #004789;
/*		padding: 55px 0px;*/
		color: #fff;
		margin-top: -13px;
		background:url(../img/header-back-fence.png),url(../img/header-back-tree-right.png),url(../img/header-back-tree-left.png);
min-height: 290px;
		background-position:50% 50%,right,20% 50%;
		width: 100%;
/*		background-size: cover;*/
		background-repeat: repeat-x,no-repeat,no-repeat;
		margin-top: -180px;
	}
	#top a{
		float: left;
		width: 92%;
		padding: 0px 4%;
		text-align: left;
		color: #fff;
		font-size: 15px;
		margin-top: -17px;
		text-decoration: none;
	}
	#top a:hover{
		text-decoration: underline;
	}
	#top h2{
/*		float: left;*/
		width: 92%;
		padding: 0px 4%;
		text-align: left;
/*		text-transform: uppercase;*/
		font-size: 40px;
		font-family: "sofia-pro-soft",sans-serif;
		font-style: normal;
		font-weight: 700;
		color:#002d7a;
	}
	#top h3{
/*		float: left;*/
		width: 92%;
		padding: 0px 4%;
		text-align: left;
/*		text-transform: uppercase;*/
		font-size: 20px;
		font-family: "sofia-pro-soft",sans-serif;
		font-style: normal;
		font-weight: 700;
		color:#002d7a;
	}


	/* contenido
	------------------------------------------------------------------------------------------------------  */
	#contenido{
		display: inline-block;
		max-width: 1380px;
	}
	#contenido .content{
		display: inline-block;
		width: 83%;
		box-shadow: 10px 10px 5px #4442424d;
		    text-align: left;
	}
	#contenido .content-gen
	{
		width: 79%;
		padding: 0px 12%;
		text-align: left;
		font-size: 18px;
		line-height: 26px;
		padding-left: 30px;
		border-radius: 10px;
		padding-right: 30px;
		padding-bottom: 10px;
		padding-top: 10px;
		margin-left: 8%;
		background-color: white;
	}
	#contenido .content-home{
		width: 83%;
		text-align: left;
		font-size: 18px;
		line-height: 26px;
		border-radius: 10px;
		padding-bottom: 10px;
		padding-top: 10px;
/*		margin-top: -160px;*/
		background-color: white;
		display: inline-block;
		box-shadow: 10px 10px 5px #4442424d;
	}
	#contenido .content-home h2,#contenido .content-home  h3,#contenido .content-home p {
		padding-left:22px;
		padding-right:22px;
	}
	#contenido .content-home h2
	{
		text-align: left;
		font-size: 30px;
		font-family: "sofia-pro-soft",sans-serif;
		font-style: normal;
		font-weight: 700;
		color:#002d7a;	
		line-height: 30px;
	}
	#contenido .content-home h3
	{
/*		float: left;*/
/*		width: 92%;
		padding: 0px 4%;*/
		text-align: left;
/*		text-transform: uppercase;*/
		font-size: 20px;
		font-family: "sofia-pro-soft",sans-serif;
		font-style: normal;
		font-weight: 700;
		color:#002d7a;	}
	#contenido .content-box{
display: inline-block;
/*margin-top: 30px;*/
width: 83%;
/*background-color: white;*/
    margin-bottom: 40px;
	}

	#contenido .content-box p,#contenido .content-box ul {
	    text-align: left;
		font-size: 18px;
		line-height: 26px;
	}
	#contenido .content-box .box{
		float: left;
		height: 200px;
		width: 28%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		text-decoration: none;
		border-style: solid;
		border-width: 2px;
		border-radius: 10px;
		border-color: black;
		margin-right: 6.91%;
		box-shadow: 10px 10px 5px #4442424d;
	}

	#contenido .content-box .box.left{
		background-color:#e52320;
    margin-left: 0px;
			}
	#contenido .content-box.certificates .box.left{
		background-color:#e52320;
        margin-left: 0px;
		background:url(../img/Balance-Certificate.jpg);
	
			}
	#contenido .content-box .box.mid{
		background-color:#004288;
			}
	#contenido .content-box .box.right{
		background-color:#e52320;
		    margin-right: 0px;
			float:right;
			}
	#contenido .content-box .box-texto{
		float: left;
height: 350px;
	}
	#contenido .content-box .box-5{
    width: 17.3%;
    margin: 1.4%;
                margin-bottom: 35px !important;
	}
	#contenido .content-box .box-5.first
	{
		margin-left:0px;
	}
	#contenido .content-box .box-4{
		width: 21%;
		margin: 1.5%; /*modification*/
	}
	#contenido .content-box .box-4-2{
		width: 21%;
		margin: 1.5%; /*modification*/
		opacity: 0.6;
		height: 160px;
		margin-top: 30px !important;
	}
	#contenido .content-box .box-4-2:hover{
		opacity: 1;
	}

	#contenido .content-box .box-texto .tit{
		float: left;
		width: 80%;
		padding: 40px 10%;
		color: #fff;
text-transform: none;
font-size: 24px;
	}
	#contenido .content-box .txt{
		padding: 16px 10px;
		padding-top: 25px;
		color: #fff;
font-size: 26px;
	text-align: center;
	margin-top: -10px;
	}
		#contenido .content-box img{
			width: 40%;
margin-top: 20px;
		}
	#contenido .content-box .hub{
		float: left;
		width: 96%;
		margin-bottom: 15px;
		text-align: left;
		color: #fff;
		padding: 10px 2%;
		text-decoration: none;
		background-color: #004789;
	}
	#contenido .content-box .hub:hover{
		opacity: 0.8;
	}
	#contenido .content .box-section{
/*		border: 1px solid #ccc;*/
		text-align: center;
		font-size: 22px;
		line-height: 26px;
/*		padding: 80px 0px;*/
		padding-left: 22px;
		padding-right:22px;
		color: #000;
		/*border-style: solid;*/
		/*border-width: 2px;*/
		border-radius: 10px;
		/*border-color: black;*/
		background-color: white;
		padding-top: 22px;
	}
	#contenido .content .box-section.feed
	{
			background-color:#20b9dc;	
	}
		#contenido .content .box-section.feed h2
	{
		text-align:left;
		color:white;
		padding-bottom: 10px;
	}

	#contenido .content-box .box-login{
		float: left;
width: 37%;
		margin: 2%;
min-height: 590px;
		text-align: left;
		padding: 4%;
		padding-top: 3%;
		color: #fff;
		border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: black;
	}
	#contenido .content-box .box-login a{
		float: left;
		width: 100%;
		height: 20px;
		color: #fff;
		text-decoration: none;
	}
	#contenido .content-box .box-login .tit{
		float: left;
		width: 100%;
		font-size: 40px;
	}
	#contenido .content-box .box-login form{
		float: left;
		width: 100%;
		margin-top: 40px;
	}
	#contenido .content-box .box-login form label{
		float: left;
		width: 25%;
		margin-top: 12px;
		margin-bottom: 5px;
		font-size: 13px;
	}
	#contenido .content-box .box-login form input{
		float: left;
		width: 69%;
		font-size: 16px;
		padding: 6px 2%;
		margin-top: 5px;
		margin-bottom: 5px;
		border: 1px solid #888;
	}
	#contenido .content-box .box-login form .short{
		width: 20% !important; 
	}
	#contenido .content-box .box-login form .moveleft{
		margin-left: 2%;
		width: 23%;
	}
	#contenido .content-box .box-login form button{
		float: right;
		margin-right: 2%;
		margin-top: 15px;
		border: 1px solid #888;
		padding: 6px 30px;
		font-size: 16px;
		color: #fff;
		border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: white;
	}





	#contenido .content .bar{
		display: inline-block;
		width: 90%;
		background-position: 98% center;
		background-repeat: no-repeat;
		background-size: 45px;
		padding: 25px 5%;
		text-decoration: none;
		margin-bottom: 15px;
                cursor: pointer;
	}
	#contenido .content .bar:hover{
		opacity: 0.8;
	}
	#contenido .content .bar .tit{
		text-align: left;
		color: #fff;
		font-size: 40px;
	}
	#contenido .content .contents{
		padding-bottom: 50px;
	}
	#contenido .content .contents img{
		width: 100%;
/*		border: 1px solid #888;*/
		margin: 20px 0px;
	}
	#contenido .content .contents .texts{
		width: 100%;
		line-height: 30px;
		padding-top: 30px;
	}

	#contenido .content .bar-on{
		background-image: url('../img/arrow-bottom.png');
		background-color: #004789;
	}
	#contenido .content .bar-off{
		background-image: url('../img/arrow-top.png');
		background-color: #a1bc32;
	}








	/* footer
	------------------------------------------------------------------------------------------------------  */
	#footer{
/*		display: inline-block;*/
	/*	background-color: #25346c;*/
		min-height: 330px;
		width: 100%;
		background: url(../img/footer_back.png);
		background-position-x: 950px;
		background-repeat:repeat-x;
		z-index:10;

	}
	#footer.row.shed{
/*		display: inline-block;*/
	/*	background-color: #25346c;*/
		/*min-height: 330px;*/
		width: 100%;
		background: url(../img/footer_back_shed1.png),url(../img/footer_back_shed2.png);
    background-position-x: center,100%;
		background-repeat:repeat-x,no-repeat;

	}
	#footer .menu{
/*		display: inline-block;*/
/*		padding: 25px 0px;*/
		padding-top: 35px;
	/*	margin-left: -200px;*/
		width:50%;
/*		padding-right: 1%;*/
	}
	#footer .menu a{
		float: left;
		color: #fff;
		text-decoration: none;
		font-size: 14px;
		border-right: 1px solid #fff;
		margin-right: 10px;
		padding-right: 10px;
	}
	#footer .menu a:hover{
		color: #95989a;
	}
	#footer .logo-footer {
			
/*		width:300px;
  	    padding-right:17%;*/
		width: 50%;
	}
	#footer .media-footer {
	
width: 255px;
	}
	#footer .logo-footer img{
		float: left;
		width: 120px;
		margin-left: 30px;
		margin-top: 20px;
		margin-bottom: 15px;
	}
	#footer .media-footer img{
		float: left;
		width: 45px;
		margin-left: 10px;
		margin-top: 20px;
		margin-bottom: 15px;
	}
	#footer span{
		float: left;
		color: #fff;
		text-decoration: none;
		font-size: 14px;
	}
#footer .col_100 div 
{
	float:left;
}





	/* responsive
	------------------------------------------------------------------------------------------------------
	------------------------------------------------------------------------------------------------------  */


	@media only screen and (max-width: 1397px) {

		#header .menu a{
	/*		width: 12%;*/

			margin-right: 5%;
		}

		#header .menu .login{
		/*	margin-left: 30px;*/
		}
	}
	@media only screen and (max-width: 1195px) {

		#header .menu a{
	/*		width: 12%;*/

			margin-right: 4%;
		}
		#header .no-styles{
		width: 30%!important;
		}
	}

	@media only screen and (max-width: 1195px) {

		#contenido .content-box .box-4-2{
			width: 46%;
			margin: 2%;
			height: 160px;
		}


	}


	@media only screen and (max-width: 1140px) {
	
		#contenido .content-box .box-5{
width: 28%;
margin-right: 2.9%;
		}
		.marginbot0{
			margin-bottom: 20px !important;
		}

	}

	@media only screen and (max-width: 1115px) {

		#header .menu a{
/*			width: 130px;*/
		}

	}
@media only screen and (max-width: 1125px) {
	#contenido.row.home
	{
		margin-top:0px!important;
	}
	.strapline {
	margin-top:0px!important;
	}
}
	@media only screen and (max-width: 1065px) {
		
		#contenido .content-box .box-4{
			width: 46%;
			margin: 2%;
		}
		.marginbot0{
			margin-bottom: 20px !important;
		}

	}

	@media only screen and (max-width: 1132px) {

		#footer .logo-footer{
			float: none;
			margin: 0 auto;
			width: 100%;
			margin-left: 0px;
			padding-top: 30px;
		}
		#footer .menu{
			float: left;
			width: 100%;
			text-align: center;
			padding: 30px 0px;
			margin-left: 0px;
		}
		#footer .menu a{
			float: none;
			margin: 0 auto;
			margin-left: 10px;
		}
		#footer span{
			float: none;
			margin: 0 auto;
			margin-left: 10px;
		}
		#footer .logo-footer img {
			float: none;
		}
		#footer .media-footer img {
		  float: none;
		}
		#footer .media-footer {
			width: 100%;
			text-align: center;
			float: none!important;
		}
		#footer .menu div{
			margin-right: 10%;
		}
		#footer {
   			 min-height: 500px;
		}
	}


	@media only screen and (max-width: 1045px) {

		#contenido .content-box .box-login{
			width: 88%;
			min-height: auto;
		}

	}

	@media only screen and (max-width: 990px) {

		#header .menu{
			display: none;
		}
		#header .menu-responsive{
			display: inline-block;
		}
	}

	@media only screen and (max-width: 940px) {
	
		#contenido .content .bar .tit{
			font-size: 22px;
		}
		#contenido .content .bar{
			background-position: 95% center;
			background-size: 35px;
			padding: 20px 5%;
		}

	}


	@media only screen and (max-width: 900px) {

		#contenido .content-box .box{
    float: left;
/*    height: 340px;*/
    width: 100%;
    margin-bottom: 20px;
    display: inline-block;
    margin: 0px;
    margin-bottom: 25px;;
		}
		#contenido .content-box .txt{
/*			margin-top: 196px;*/
		}
#contenido .content-box img {
    width: 180px;
    margin-top: 5%;
}
#contenido .content-box .box.left {
    background-color: #e52320;
     margin-left: 0px; 
}
	#contenido .content .box-section{
margin-top: 0px;
	}
#contenido .content-box .box {
height:auto;
}

.certificates

{
	display:none;
}
.section-title h1
{
    background: none;
    background-color: transparent!important;
    border: none!important;
    box-shadow: none!important;
    font-size: 30px!important;
    letter-spacing: 0px!important;
    margin-left: 0px!important;
    padding-left: 0px!important;
    padding-bottom: 0px!important;
    padding-top: 0px!important;
    color: white!important;
    font-size: 36px!important;
    margin-right: 0px!important;
    padding-right: 0px!important;
	background-color:none;
	background:transparen;
	
}


	}


	@media only screen and (max-width: 640px) {


		#contenido .content-box .box-login form label{
			width: 100%;
		}
		#contenido .content-box .box-login form input{
			width: 96%;
		}
		#contenido .content-box .box-login form .short{
			width: 96% !important; 
		}
		#contenido .content-box .box-login form .moveleft{
			margin-left: 0%;
			width: 96%;
		}
		#contenido .content-box .box-login form button{
			margin-right: 0%;
			margin-top: 20px;
			padding: 12px 30px;
			font-size: 18px;
		}

	}
	@media only screen and (max-width: 380px) {
		#header .menu-responsive img {
			margin: 0px;
			margin-left: 5px;
		
		}
		#header .menu-responsive .pull img {
			padding-left: 3px;
		}
		#header .menu-responsive .login img {
			margin-top: 0px;
		}
		#header .menu-responsive .login div {
			margin-top: 21px;
		}
		#footer {
  /*  min-height: 680px;*/
}
	}
	
			@media only screen and (max-width: 420px) {
	#header .menu-responsive img{
		    width: 120px;
	}
	#strapline
	{
		display:block!important;
	}
	.strapline {
	display:none!important;
	}
	#bottle,#jumper,#pedalbike,#leaves,#headbike
	{display:none;}
	
	}
.act-desc
{
	color:white;
	padding-left:20px;
	padding-right:20px;
}
#contenido .content-box .box-texto .tit {
padding-bottom:20px!important;
}
#contenido .content-box form,#contenido .content-box input,#contenido .content-box select,#contenido .content-box label,#contenido .content-box h2
{
	text-align:left;
}
#contenido .content-box form,#contenido .content-box input[type="text"],#contenido .content-box form,#contenido .content-box input[type="email"]
{
	width:80%;
}

.standard-btn
{

/*background-color: #004789;
text-decoration: none;
padding: 7px 12px;
/*border-radius: 4px;*/
/*color: #fff;
font-weight: 300;
font-size: 13px;
cursor: pointer;
border: none;*/*/
}
.message
{
	color:#a1bc32;
}
.header-container {
    width: 100%;
    width: 100vw;
    height: 94%;
    height: 94vh;
    max-height: 1000px;
    border-left: none;
    border-right: none;
    position: relative;
    margin-top: 0;
    background-color: #000;
    padding: 10% 0 0 0;
    box-sizing: border-box;
}

.video-container {
    position: absolute;
z-index: -2;
    top: 0;
    left: 0;
height: 500px;
    width: 100%;
    overflow: hidden;
}

video {
    position: absolute;
/*    opacity: 0.78;*/
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -mos-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	z-index:-1;
}
#jumper
{
    position: absolute;
      top: 500px;
    z-index: -10;
    left: 92%;
		   z-index:300;
}
#jumper a img:hover
{
       position: relative;
	   width: 200px; 
	   margin: auto; 
/*	   padding: -60px; */
/*	   background: cyan; */
	   display: block;
       color: black; text-decoration: none;     
   -webkit-transition: .1s all ease-in-out;
   -moz-transition: .1s all ease-in-out;
   -o-transition: .1s all ease-in-out;
   transition: .1s all ease-in-out;
/*   cursor:pointer;*/

    -ms-transform: translate(-7px); /* IE 9 */
    -webkit-transform: translate(-7px); /* Chrome, Safari, Opera */
    transform: translate(-7px);
}
#pedalbike
{
    position: absolute;
    top: 850px;
    left: 90%;
	z-index:0;
}
#pedalbike a img:hover
{
       position: relative;
	  /* width: 200px; */
	   margin: auto; 
/*	   padding: 10px; */
/*	   background: cyan; */
	   display: block;
       color: black; text-decoration: none;     
   -webkit-transition: .1s all ease-in-out;
   -moz-transition: .1s all ease-in-out;
   -o-transition: .1s all ease-in-out;
   transition: .1s all ease-in-out;
/*   cursor:pointer;*/
    -ms-transform: translate(-10px); /* IE 9 */
    -webkit-transform: translate(-10px); /* Chrome, Safari, Opera */
    transform: translate(-10px);
}
#headbike
{
    position: absolute;
    top: 155px;
    z-index: -10;
    left: 93%;
	z-index:300;
}
#headbike a img:hover
{
       position: relative;
	   width: 155px; 
	   margin: auto; 
/*	   padding: 10px; */
/*	   background: cyan; */
	   display: block;
       color: black; text-decoration: none;     
   -webkit-transition: .1s all ease-in-out;
   -moz-transition: .1s all ease-in-out;
   -o-transition: .1s all ease-in-out;
   transition: .1s all ease-in-out;
/*   cursor:pointer;*/
    -ms-transform: translate(-5px); /* IE 9 */
    -webkit-transform: translate(-5px); /* Chrome, Safari, Opera */
    transform: translate(-5px);
}
#leaves
{
    position: absolute;
top: 300px;
    z-index: -10;
    right: 90%;
	   z-index:300;
}

#leaves a img:hover
{
       position: relative;
	   width: 165px; 
	   margin: auto; 
/*	   padding: 10px; */
/*	   background: cyan; */
	   display: block;
       color: black; text-decoration: none;     
   -webkit-transition: .1s all ease-in-out;
   -moz-transition: .1s all ease-in-out;
   -o-transition: .1s all ease-in-out;
   transition: .1s all ease-in-out;
/*   cursor:pointer;*/
    -ms-transform: translate(5px); /* IE 9 */
    -webkit-transform: translate(5px); /* Chrome, Safari, Opera */
    transform: translate(5px);
}
#bottle
{
    position: absolute;
    top: 695px;
    z-index: -10;
    right: 90%;
	z-index:300;
}
#bottle a img:hover
{
       position: relative;
	   width: 83px; 
	   margin: auto; 
/*	   padding: 100px;*/ 
/*	   background: cyan; */

	   display: block;
       color: black; text-decoration: none;     
   -webkit-transition: .1s all ease-in-out;
   -moz-transition: .1s all ease-in-out;
   -o-transition: .1s all ease-in-out;
   transition: .1s all ease-in-out;
/*   cursor:pointer;*/
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
    transform: rotate(5deg);
}


/* modifications */

        .error_info, .error_info_child {
            display: none;
            color: #c00;
            font-size: 16px;
            float: left;
            width: 100%;
            padding-top: 20px;
			padding-bottom:30px;
        }
	   .error_info.white {
		   color:white!important;
		}
		.error_info.white a {
		   text-decoration:underline!important;
		   float:none!important;
		}
        
        #contenido .content-box .box-login form select{
		float: left;
		width: 73%;
		font-size: 16px;
		padding: 6px 2%;
		margin-top: 5px;
		margin-bottom: 5px;
		border: 1px solid #888;
                height: 38px;
            }

        
        #contenido .content-box .step {
                display: none;
        }
        
        
        
        .now-can-form {
            float: left;    
            margin-bottom: 50px;
            width: 100%;
            display: none;
        }                
        .now-can-form .form {
            margin-top: 10px;
            float: left;            
        }
        .now-can-form .form-group {
            float: left;   
            margin-right: 10px;
            width: 100%;
        }
        
        .now-can-form .label {
            font-size: 15px;
        }        
        .now-can-form input {
            border: 2px solid #25346d;
            padding: 5px;
            font-size: 14px;            
        }
        .now-can-form select {
            border: 2px solid #25346d;
            padding: 5px;
            font-size: 14px;   
            width: 200px;
            height: 32px;
        }
        .now-can-form .options {
            float: left;
            width: 100%;
            margin-top: 20px;
        }
        .now-can-confirm {
            float: left;
            display: none;
			    margin-top: 20px;
    margin-bottom: 20px;
    color: #e42612;
        }
        
        
        .now-can-check .select_all {
            color: #25346d;
            font-size: 16px;
        }
        
        
        .section-title .completed {
            float: right;
            margin-top: -100px;
            margin-right: -20px;            
        }
        .section-title .completed img {
            width: 65%;          
        }
        
        .content-box .box .completed {
            background-image: url(../img/tick.png);
            background-position: center center;
            background-repeat:none;
            background-size: cover;
            width: 30px;
            height: 30px;
            float: right;  
            margin-right: 10px;
            margin-top: -10px;
        }
        
.juicer-feed.modern li.feed-item {
    border-radius: 10px!important;
    border-color: black!important;
    border-width: 2px!important;
}    


#tbl_progress {
    width: 100%;
}
#tbl_progress th {
    vertical-align: bottom;    
    padding-bottom: 10px;  
    text-align: right;
}
#tbl_progress th.name {
    width: 40%;    
    text-align: left;
}
#tbl_progress th.prepare a{
    width: 18%;
    font-size: 17px;
    color: #80ba27;
    line-height: 20px;
    padding-right: 2%;
}
#tbl_progress th.balance a{
    width: 18%;
    font-size: 17px;
    color: #20b9dc;
    line-height: 20px;
    padding-right: 2%;
}
#tbl_progress th.pedals a{
    width: 18%;
    font-size: 17px;
    color: #994b97;
    line-height: 20px;
    padding-right: 2%;
}

#tbl_progress td {
    border-bottom: 2px solid #000;
    text-align: right;
    padding-right: 2%;
    padding-top: 10px;
}
#tbl_progress td.name {
    font-size: 20px;
    font-weight: 300;
    text-align: left;
}
#tbl_progress td span.value {
    font-size: 35px;
    font-weight: 600;
    padding-right: 2px; 
	    color: black;
}
#tbl_progress td span.total {
    font-size: 25px;
    font-weight: 600;   
    letter-spacing: 3px;
}
#tbl_progress td span.total .div {
    font-weight: 400;       
}
#tbl_progress td span.total.pre {
    color: #80ba27; 
}
#tbl_progress td span.total.bal {
    color: #20b9dc;
}
#tbl_progress td span.total.ped {
    color: #994b97;
}



#contenido-dash {
    width: 100%;
}
#contenido-dash select {
            border: 2px solid #25346d;
            padding: 5px;
            font-size: 14px;   
            width: 200px;
            height: 32px;
}
#contenido-dash input {
            border: 2px solid #25346d;
            padding: 5px;
            font-size: 14px;            
}
#contenido-dash .cont-data {
    width: 45%;
    float: left;
}
#contenido-dash .cont-tabs {
    width: 55%;
    float: left;
}
#contenido-dash .cont-tabs .tabs ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    float: left;
    margin-top: -2px;    
}
#contenido-dash .cont-tabs .tabs ul li {
    float: left;
    cursor: pointer;
    color: #fff;
    width: 28%;
    height: 50px;
    vertical-align: baseline;
    padding: 5% 0 1% 4%;
    font-size: 16px;
    font-weight: 500;
    font-family: "sofia-pro-soft",sans-serif;
    line-height: 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: 2px solid #000;
    border-right: none;
}

#contenido-dash .cont-tabs .tabs li.tab-3 {
    border-right: 2px solid #000;
}
#contenido-dash .cont-tabs .tab-1 {
    background-color: #80ba27; 
}
#contenido-dash .cont-tabs .tab-2 {
    background-color: #20b9dc;
}
#contenido-dash .cont-tabs .tab-3 {
    background-color: #994b97;
}

#contenido-dash .cont-tabs .tab-content {
    display: none;
    float: left;
    width: 99.5%;
    border: 2px solid #000;
    border-top-right-radius: 8px;
    margin-top: -2px;
    padding-top: 20px;
    font-size: 16px;    
    min-height: 850px;
}
#contenido-dash .cont-tabs .tab-content .totals {
    float: left;
    width: 100%;    
    padding-bottom: 15px;
}
#contenido-dash .cont-tabs .tab-content .totals .txt {
    float: left;
    padding-left: 25px;
    font-weight: 600;
}
#contenido-dash .cont-tabs .tab-content .totals .num {
    float: right;
    padding-right: 25px;
    color: #fff;
    font-size: 24px;
    letter-spacing: 2px;
}
#contenido-dash .cont-tabs .tab-content .totals .num .big {
    font-size: 32px;
}
#contenido-dash .cont-tabs .tab-content table {
    width: 96%;
    float: left;
    color: #fff;  
    margin-left: 4%;
    margin-bottom: 50px;
}
#contenido-dash .cont-tabs .tab-content table a
{
	    color: #fff;  
}
#contenido-dash .cont-tabs .tab-content table td {
    height: 30px;
}
#contenido-dash .cont-tabs .tab-content table .pending {
    color: #000;    
}
#contenido-dash .cont-tabs .tab-content table img {
    width: 25px;
}

#contenido-dash .cont-tabs .tab-content ul.hide-line {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    float: left;
    margin-top: -22px;     
}
#contenido-dash .cont-tabs .tab-content ul.hide-line li {
    float: left;    
    height: 2px;
    margin: 0;
    width: 32.2%;    
}
#contenido-dash .cont-tabs .tab-content ul.hide-line li.no-active {
    background-color: #000;   
}
#contenido-dash .cont-tabs .tab-content ul.hide-line li.tab-2 {
    margin-left: 2px;  
    width: 32.2%;    
}


#certificates .content-box {
    margin-left: 25px;
}
#certificates .content-box .box-3 {
    margin-right: 20px !important;
}

#certificates .content-box .box-texto {
    height: 150px !important;
}


#contenido .content-box .box-login form .checkbox{
    float: left;
    width: 100%;
    margin-top: 15px;
   /* margin-bottom: 15px;*/
}
#contenido .content-box .box-login form .checkbox input{
    float: left;   
    width: 5%;
}
#contenido .content-box .box-login form .checkbox span{
    float: left;   
    font-size: 13px;
    width: 90%;
    padding-top: 3px;
}
#contenido .content-box .box-login form .checkbox a:hover{
    text-decoration: underline !important;
}

.tbl-import {
    font-size: 14px;
    line-height: 16px;
}
.tbl-import td {
    padding: 10px;
}
.tbl-import td.lab {
    font-weight: 600;
}


.lnk-ride,.lnk-balance,.lnk-pedals
{
font-family: "sofia-pro-soft",sans-serif;
font-weight:800;
text-decoration:none;
}
.lnk-ride
{
color:#80ba27;
}
.lnk-balance
{
color:#20b9dc;
}
.lnk-pedals
{
color:#994b97;
}
.lnk_red
{
color:#e42612!important;
font-weight:800;
font-family: "sofia-pro-soft",sans-serif;
}
.lnk_blue
{
color:#004288!important;
font-weight:800;
font-family: "sofia-pro-soft",sans-serif!important;
word-wrap: break-word;
}
.lnk_white
{
color:white!important;
font-weight:800;
font-family: "sofia-pro-soft",sans-serif!important;
word-wrap: break-word;
}
a
{
text-decoration:none!important;	
}
#contenido.row.home
{
/*	margin-top:-30px;*/
}
#strapline
{
	color:#004288;
}
.certificates
{
	padding-top:20px;
	height:390px;

}
.certificates img
{
width:200px;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: black;
margin-right: 5%;
}
.certificates div
{
	width:200px;
	margin-right: 5%;
	display:inline-block;
}


.forgot_psw {
    float: right !important;    
    width: 100%;
    clear: both;
    margin-top: 40px;
    font-size: 13px;
    text-align: right;
}
.forgot_psw a {
    font-size: 13px;
}
.forgot_psw a:hover {
    text-decoration: underline !important;
}
.strapline
{
    width: 83%;
    text-align: left;
    font-size: 16px;
    line-height: 36px;
    padding-bottom: 20px;
    display: inline-block;
    color: white;
    margin-top: -60px;
	letter-spacing:0px;
}


/* survey */

body.survey {
    background-image: none;
    background-color: #fff;
}

#survey-popup {
    padding: 20px;
    text-align: left;
}
#survey-popup .action {
    width: 300px;
    text-align: center;
    padding-top: 50px;
    margin: 0 auto;    
}
#survey-popup .action .standard-btn {
    margin-left: 20px;
    margin-right: 20px;
}

#survey .step {
    display: block;
}
#survey .step textarea {
    width: 90%;
    height: 200px;
    font-size: 14px;
}


.tbl_privacy {
	width: 96%;
	table-layout: fixed;
}
.tbl_privacy th {
    vertical-align: top;    
    padding-bottom: 10px;  
    text-align: left;
	padding-right: 10px;
}
.tbl_privacy th.name {
    width: 40%;    
    text-align: left;
}
.tbl_privacy th.prepare a{
    width: 18%;
    font-size: 17px;
    color: #80ba27;
    line-height: 20px;
    padding-right: 2%;
}
.tbl_privacy th.balance a{
    width: 18%;
    font-size: 17px;
    color: #20b9dc;
    line-height: 20px;
    padding-right: 2%;
}
.tbl_privacy th.pedals a{
    width: 18%;
    font-size: 17px;
    color: #994b97;
    line-height: 20px;
    padding-right: 2%;
}

.tbl_privacy td {
    border-bottom: 2px solid #000;
    text-align: left;
    padding-right: 2%;
    padding-top: 10px;
	vertical-align: top;
	font-family: "HelveticaNeueLTStd-Lt";
	padding-right: 10px;
}
.tbl_privacy td.name {
    font-size: 20px;
    font-weight: 300;
    text-align: left;
}
.tbl_privacy td span.value {
    font-size: 35px;
    font-weight: 600;
    padding-right: 2px; 
	    color: black;
}
.tbl_privacy td span.total {
    font-size: 25px;
    font-weight: 600;   
    letter-spacing: 3px;
}
.tbl_privacy td span.total .div {
    font-weight: 400;       
}
.tbl_privacy td span.total.pre {
    color: #80ba27; 
}
.tbl_privacy td span.total.bal {
    color: #20b9dc;
}
.tbl_privacy td span.total.ped {
    color: #994b97;
}
@media screen and (max-width: 700px) 
{
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {/*background: #f0f0f0; font-weight:bold;font-size:1.3em;*/}
tbody td {display: block;text-align:left;width:100%!important;}
.tbl_privacy.bullet td
{width:80%!important}
tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:left; 
	font-weight:bold;
  }
  
  
#tbl_progress td {
        text-align:left;
}
#tbl_progress td.name {

        text-align:left;
}
}
.terms_notice
{
display: inline-block;
width: 90%;
font-size: 13px;
}
.terms_notice a
{
float:none!important;
text-decoration:underline!important;
}
.section-title h1
{
/*    background: none;
    background-color: transparent!important;
    border: none!important;
    box-shadow: none!important;
    font-size: 30px!important;
    letter-spacing: 0px!important;
    margin-left: 0px!important;
    padding-left: 0px!important;
    padding-bottom: 0px!important;
    padding-top: 0px!important;*/
}
.tit.fun
{
	color:white!important;
	    text-align: center;
			border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: black;
	background-color:#e42612;
	padding:25px;
}
.fun_left
{
    display: inline-block;
    float: left;
    margin-right: 2%;

    min-height: 253px;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: black;
    width: 35%;
    background-size: cover;
}
.fun_left.bike
{
	    background-image: url(../img/fun-bike.jpg);
}
.fun_left.bike.faded,.fun_left.journey.faded
{
	opacity:0.5;
}
.fun_left.journey
{
	    background-image: url(../img/fun-myjourney.jpg);
		    background-position-y: -4px;
}
.fun_left.prize
{
	    background-image: url(../img/fun-prize2.jpg);
		min-height:544px;
background-position-x: -4px;
    background-size: 390px;
}
.fun_right
{
	 border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: black;
	display:inline-block;
    width: 58%;
    padding: 2%;
    min-height: 208px;
}
.fun_right h3
{
	margin-top:0px;
}
@media only screen and (max-width: 1125px)
{
.fun_right
{
    min-height: 0px;
width:auto;
    padding: 25px;

}	
.fun_left.bike,.fun_left.journey,.fun_left.prize
{
/*	background-size: 100% 100%;
	 width:100%;
	 height: 560px;*/
	   background-image: none;
	   	width:100%!important;
    float: none!important;
    margin-right: 0px!important;
    min-height: 0px!important;
	border:none;
	margin-bottom: 12px;
}
.fun_left.bike img,.fun_left.journey img,.fun_left.prize img
{
	display:block!important;
	    width: 99.3%;
		    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: black;


}
.fun_left.journey
{
/*	background-size: 100% 100%;
	 width:100%;
	 height: 560px;*/
	   background-image: none;
}

}
@media only screen and (max-width: 1153px)
{
.app-el1 {
    margin-top: 24px!important;
   /* margin-left: 90px!important;*/
    margin-right: 110px;
}
.app-el2 {
     /*margin-left: 0px!important;*/
/*	 margin-top:50px!important;*/
    width: 50%!important;
}
.app-el2 h1{
/*margin-left:300px;*/
}
.app-btns {

    float: left;
	margin-top:0px!important;
	margin-left:300px;
}
.screen-cont
{

    margin-top: -230px!important;

}
}
@media only screen and (max-width: 887px)
{
.screen-cont {
    margin-left: 4%!important;
}
}
@media only screen and (max-width: 828px)
{
.screen-cont {
    margin-top: -200px;
}
.app-el2  {
    margin-left: 270px!important;
}
.app-btns {
    margin-left: 270px;
}
}
@media only screen and (max-width: 781px)
{
.screen-cont {
    margin-top: -240px!important;
}

}
@media only screen and (max-width: 720px)
{
	.app-el2 {
     float: none!important;
     margin-top: 0px!important;
     margin-left: 0px!important; 
     margin-right: 0px!important;
	 	width:100%!important;
}
	.app-el2 p {
	    width: 90%;
    display: inline-block;
	    margin-top: 0px;
	}
.app-el2 h1 {
     margin-left: 0px!important;
}
.app-btns {
     float: none!important;
     margin-top: 0px!important; 
     margin-left: 0px!important; 
}
.screen-cont {
    width: 100%;
    margin-left: 0px!important;
    margin-top: 0px!important;
    float: none!important;
	display: inline!important;
}
#contenido .content {
    text-align: center;
}
.app-el3 {
     margin-right: 0px!important; 
}
.app-el1 {
    margin-right: auto;
	    margin-left: auto;
		float:none!important;
}
}
.backyellow
{
	background-color:#f4ea3c!important;
	
}
.app-el1
{
float: left;
    width: 210px;
/*    margin-top: 12px;
    margin-left: 90px;*/
}
.app-el2
{
	float: left;
    margin-top: 20px;
	  
    margin-right: 30px;
    width: 340px;
    margin-left: 300px;
	font-weight: bolder;
}
.app-el3
{
	    width: 160px;

		    margin-right: 30px;
}
.app-el4
{
	    width: 170px;

}
.app-btns
{
	    margin-top: 110px;
}
.screen-cont
{
	display: inline-block;
    width: 100%;
    margin-left: 50px;
    margin-top: -160px;
    float: left;
}


/****** Landing pages ******/

.landing h2 {
    color:#004288;
}