/**
* Front classes
*
* @author splitfire - http://splitfire.fr
* @version 1.0
*
*/


/* Surcharge front
---------------------------------------*/
.error-form
{
	display: none;
	padding-top: 8px;
}

/* Box de connexion utilisé:
	- pour s'authentifier
	- mot de passe perdu
	- réinitialisation du mot de passe
---------------------------------------*/

/*.login
{
	display: table;
	table-layout: fixed;
	width: $widthContainer/3;
	height: 100%;
	margin:0 auto;
	vertical-align: middle;
}
	
.login_wrapper
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.login-lost
{
	@extend .login;
	width: $widthContainer;
	@include mq(false, tablet){width: 100%;}

}*/

//lien vers mdp perdu sur la box de connexion 
.link_lost--password
{
	@include mq($to:phone)
	{
		margin-top:10px;
		display: inline-block;
	}
}

//positionnement du formulaire et de la selection de l'abnnement
.register_button
{
	margin:40px 0 0 0;
}

@include mq($to:phone)
{
	.row-fluid
	{	
		.register
		{
			//@include flex();
			//@include flex-v ();
			display: flex;
			flex-direction: column;
		}
		.register_subscription
		{	
			//-webkit-order: 1;
			//-webkit-box-ordinal-group: 1;
			order:1;
			float: none;
			width: auto;
			margin:0;
			text-align: center;
			& > img
			{
				max-width: 100%;
			}
		}
		
		.register_form
		{
			//-webkit-order: 2;
			//-webkit-box-ordinal-group: 2;
			order:2;
			float: none;
			width: auto;
		}
	}
		
}

/* Section baseline comportant les images de la page d'accueil
---------------------------------------------------------------*/
.baseline_section
{
	margin:20px auto;
	& .baseline_img
	{
		width: 150px;
		height: 150px;
		line-height: 150px;
		margin:0 auto;
		text-align: center;
		border-radius:50%;
		background-color:#40B2D8;
		transition : background-color 0.3s linear;
		
		& img
		{
			width: 100px;
			vertical-align: middle;
		}
	}
	//Modifie le background de baseline_img 
	.no-touch & > *:hover .baseline_img
	{
		background-color:$toolbarActionColor;
	}
	.no-touch & > *:hover .baseline_txt h2
	{
		color:$toolbarActionColor;
	}
	.no-touch & > *:hover .baseline_txt p
	{
		color:$headerColor;
	}
	& .baseline_txt
	{
		height: 100px;
		@include mq($to:phone){ height: auto;}
		@include mq(phone,tablet) {height: 160px;}
		text-align: center;
		& h2
		{
			font-weight: lighter;
			font-size: 1.4em;
			margin-bottom: 0;
			transition : color 0.3s linear;
		}
		& p
		{
			padding:0 10px 0 10px;
			font-size: 1em;
			line-height: 1.3em;
			overflow: hidden;
			@include text();
			text-align: justify;
			transition : color 0.3s linear;
		}
	}
}

/*Partie "essayer gratuitement" de la home
----------------------------------------------------*/
.try_section
{

	@include rem((
		line-height: $fontSize * 2.15
	
	));
	
	@include mq($to:tablet){ box-sizing : border-box; line-height: normal}
	margin: 10px auto; 
	//border-top: solid 1px #D7D7D7; 
	padding: 40px 0;
	text-align: center;
	& h2
	{
		display:inline-block; 
		margin:0 15px 0 15px;
		font-size: 2.3em;
		font-weight: lighter;
		vertical-align: middle;
		transition : color 1s linear;
		// animation clignotement
		animation: anim-color 6s ease;
		animation-delay: 0s;
		animation-iteration-count:infinite;
		animation-fill-mode:forwards;
	}
	& .sprite-home-gift
	{
		margin:0 0 10px 0;
	}
}


/* Partie "présentation des differents device" de la home*/

.device_section
{
	background-color:$toolbarActionColor;
	text-align: center;
	padding: 20px 0 10px;
	@include mq($to:phone){box-sizing : border-box;}
	& .device_section--title
	{
		color: #fff;
		font-weight: lighter;
		text-shadow: 0 0 2px rgba(0, 0, 0, 0.75);
		margin: 8px 0 16px 0;
	}
	& .device_section--item
	{
		display: inline-block;
		@include mq($to:phone){display: block};
		
		& span
		{
			transition :all 0.2s linear 0s;
		}
		.no-touch & &:hover
		{			
			& span
			{
				transform : scale(1.1);
			}
		}
	}
}


/* Footer
------------*/
.footer
{
	box-sizing : border-box;
	background-color: $headerColor;
	box-shadow :  0 -3px 3px rgba(0, 0, 0, 0.1);
	padding: 0 10px;
	& .footer_wrapper
	{
		height:70px;
		line-height: 70px;
		font-size:.9em;
		@include mq($to:phone)
		{
			height: auto; 
			line-height: normal;
		} 
		@include after();
		& a
		{
			display:inline-block; 
			margin:0 15px 0 0;
			color: #fff;
			
			@include mq($to:phone)
			{
				display: block;
				box-sizing : border-box;
				padding:10px;
				text-align: center;
				margin:0;
			}
		}
	}
}