/********************************/
/*	Céline Demorsy @ CCR Style	*/
/********************************/
@import "font-awesome.css";

/*
	html, body 
*/
html {
    background: rgba(0, 0, 0, 0) url("../images/fond.jpg") no-repeat fixed center center / cover ;
    margin: 0;
    padding: 0;
}
html, body{
	width:100%;
	height:100%;

	font-family: 'Segoe UI', arial, sans-serif;
	font-size:15px;
}
/*
	Bandeau supérieur : logo + titre 
*/
#top{
	height:20%;

}
/* Logo */
#svg-logo { /* DIV contenant le logo */
	margin: 0;
    padding: 0;
    text-align: center;
	height: 100%;
	min-width:15%;
	width:15%;
	float:left;
}
#svg-logo img {
	margin: 0;
    padding: 0;
    height: 90%;
	padding-top:5%;
	padding-left:5%;
}
/* Titre du site */
#title{ /* DIV contenant le titre */
	display: table;
	text-align: center;
	height: 100%;
	width: 84.9%;
	float:left;
}
#title h1{
	display:table-cell;
	vertical-align:middle;
	font-size:26px;
	font-weight:bold;
	color:#1a4298;
	width: 100%;
	margin:auto;
	text-indent:-15%;
}
/* 
	Bandeau vide : clear le float + margin pour form + messages d'erreur
*/
#empty-clear{
	clear:both;
	height:10%;
}
/* 
	Bandeau central : formulaire de connexion ou demande de kit si connecté 
*/
#middle{
	height:55%;
}
#middle>form{
	margin-left:auto;
	margin-right:auto;
	width:30%;
	background-color:#fff;
	padding:20px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	text-align:center;
}
#middle>form input, #middle>form button{
	width:88%;
	border:none;
	background:none;
	color:#1b4298;
	font-size:18px;
}
#middle>form .field{ /* DIV contenant les champs de type input */
	border-bottom:solid 1px #1b4298;
	padding:5px 0px;
	margin-top:10px;
	margin-bottom:10px;
	font-size:18px;
}

#middle>form .label{
	text-align:left;
	color:#1b4298;
	font-size:18px;
}
.margin-top-label{
	margin-top:10%;
}
#middle>form .label span.fa{
	cursor:pointer;
	margin-left:15px;
}
#middle>form div.field span.fa{ /* SPAN contenant l'image devant l'input --> font awesome */
	margin:0;
	padding:0;
	padding-right:5px;
	color:#FABFE2;
	font-size:16px;
}
#middle>form button{
	width:100%;
	background-color:#FABFE2;
	color:#EC008C;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding:10px;
	margin-top:5%;
	transition: all 0.5s ease-out 0s;
	*transition: color 0.5s ease 0s;
	font-weight:bold;
}
#middle>form button:hover{
	color:#FABFE2;
	background-color:#EC008C;
	*transition: background-color 1.5s ease 0s;
	*transition: color 1.0s ease 0s;
	transition: all 0.5s ease-in 0s;
	cursor:pointer;
}
#code{
	text-transform: uppercase;
}
html body div#middle form div.text_expl{
	margin:5px 0 20px 0;
	font-size:18px;
	text-align:justify;
	background-color:#FABFE2;
	color:#1b4298;
	padding:10px;
	border-radius:4px;
}
/*
	Liens vers les mentions légales du CCR
*/
html body div#mentions{
	width:100%;
	height:5%;
	text-align:center;
	color:#f36;
}
html body div#mentions a{
	color:#f36;
	font-size:18px;
	font-weight:bold;
	text-decoration:none;
}
html body div#mentions a:hover{
	color:#1B4298;
}
/*
	Bandeau inférieur : Logos 
*/
#bottom{
	height:15%;
	min-height:15%;
}
#bottom .logo{ /* DIV contenant chaque logo */
	width:25%;
	float:left;
	background-color: rgba(255, 255, 255, 0.5);
	height: 100%;
}
#bottom .logo a{
	display:block;
	width:100%;
	text-align:center;
	height: 100%;
	clear:both;
	display: flex;
}
#bottom .logo a img {
    height: 80%;
	padding-top:5%;
	padding-left:5%;
	margin:auto;
}
.ie9 img[src$=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%; 
  }
}
/* Affichage des messages d'erreur et/ou de confirmation */
#message.admin_message, #field-errors.admin_message{
	width:50%;
}
#field-errors, #message{
	margin-left:auto;
	margin-right:auto;
	width:30%;
	background-color:#fff;
	border:solid 1px #f3375f;
	color:#f3375f;
	padding:20px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	font-size:15px;
}
#message.vert{
	border:solid 1px #1c8;
	color:#1c8;
}
#message.orange{
	border:solid 1px #FF9900;
	color:#FF9900;
}
li.error::before, p.error::before{
	font-family: 'FontAwesome';
	content: "\f06a";
	margin-right:10px;
}
/* Affichage petits écrans */
@media screen and (min-width : 1251px) and (max-width : 1650px){
	#bottom .logo a img{
		height:60%;
	}
	html body div#middle form{
		width:40%;
		font-size:19px;
	}
	#middle > form .label, #middle > form input, #middle > form button, #middle > form div.field span.fa{
		font-size:19px;
	}
	html body div#top div#title h1{
		font-size:24px;
	}
	#field-errors, #message{
		width:40%;
		font-size:16px;
	}
}
@media screen and (min-width : 1025px) and (max-width : 1250px){
	#bottom .logo a img{
		height:60%;
	}
	html body div#middle form{
		width:40%;
		font-size:17px;
	}
	#middle > form .label, #middle > form input, #middle > form button, #middle > form div.field span.fa{
		font-size:17px;
	}
	html body div#top div#title h1{
		font-size:20px;
		text-indent:0%;
	}
	#field-errors, #message{
		width:40%;
		font-size:15px;
	}
}
/* Affichage tablettes */
@media screen and (min-width : 737px) and (max-width : 1024px){
	#bottom .logo a img{
		height:60%;
	}
	html body div#middle form{
		width:60%;
		font-size:17px;
	}
	#middle > form .label, #middle > form input, #middle > form button, #middle > form div.field span.fa{
		font-size:17px;
	}
	html body div#top div#title h1{
		font-size:20px;
		text-indent:0%;
	}
	#field-errors, #message{
		width:60%;
		font-size:15px;
	}
}
/* Affichage smartphones */
@media only screen and (min-device-width : 320px) and (max-device-width : 736px) {
	html body div#top{
		height:100px;
	}
	html body div#empty-clear{
		min-height:70px;
		height:70px;
		float:none;
	}
	html body div#middle{
		height:300px;
		margin:0;
		padding:0;
	}
	html body div#bottom{
		width:100%;
		height:auto;
		margin:0;
		padding:0;
		padding-top:30px;
	}
	html body div#top div#LangSwitcher{
		right:2px;
		top:2px;
	}
	html body div#top div#svg-logo{
		float:none;
	}
	html body div#bottom div.logo{
		float:none;
		width:100%;
		margin:0;
		padding:5px;
		display:block;
		height:150px;
	}
	html body div#bottom div.logo a{
		display:block;
		width:100%;
	}
	html body div#bottom div.logo a img{
		padding:0;
		margin:0;
	}
	
	html body div#middle form{
		width:100%;
		font-size:17px;
		margin:0;
		padding:5px;
	}
	#middle > form .label, #middle > form input, #middle > form button, #middle > form div.field span.fa{
		font-size:17px;
	}
	html body div#top div#title{
		width:100%;
		height:50px;
		float:none;
	}
	html body div#top div#title, html body div#top div#svg-logo{
		float:none;
	}
	html body div#top div#title h1{
		font-size:20px;
		text-indent:0%;
		display:block;
	}
	#field-errors, #message{
		width:100%;
		font-size:16px;
		margin:0;
		padding:5px;
		margin-top:50px;
	}
}