#principal {
	
	display: flex;
	justify-content: center;
	width:900px;
	height:500px;
}

.flotteur {
	
	width:380px;
	height:100%;
	position:relative;
	margin-left:50px;
}

.titre {
	letter-spacing:3px;
	text-align:center;
	height:10%;
	line-height:40px;
}

.conteneur {
	
	width:100%;
	background-color:white;
	padding:15%;
	box-sizing:border-box;
	font-size:15px;
	color:#555555;
	height:89%;
	
}

.conteneur a {
	
	font-size:15px;
	color:#555555;
	text-decoration:underline;
}

.conteneur .text_conteneur {
	
	text-align:center;
	height:100%;
	vertical-align:middle;
}


.conteneur_element {
	
	vertical-align:middle;
	width:100%;
	margin-bottom:20px;
	position:relative;
	/*border:1px solid red;*/
	height:50px;
	text-align:left;
}


.expanded {
	
	width:100%;
	transform:scale(100%);
	transition:0.5s;
	transform-origin:0 0;
}

.minimized {
	
	transform:scale(75%);
	transform-origin:0 0;
	transition:0.5s;
}

.conteneur_element .faux_placeholder {
	
	left:0px;
	top:0px;
	position:absolute;
	z-index:0;
	font-size:13px;
	line-height:50px;
}

.conteneur_element input[type='text'], .conteneur_element input[type='password'] {
	
	left:0px;
	bottom:0px;
	position:absolute;
	z-index:1;
	font-size:13px;
	width:100%;
	background:transparent;
	border:none;
	border-bottom: 1px solid #D3D3D3;
	height:50%;
}

.conteneur_element input[type='text']:focus, .conteneur_element input[type='password']:focus {
	 outline: none;
	border:none;
	box-shadow:none;
}

#password {
	width:90%;
}

.conteneur_element .fa-eye {
	
	position:absolute;
	right:0;
	top:15px;
	cursor:pointer;
}

input[type='submit'] {
	
	background-color:rgba(11,154,203,1);
  font-size: 20px;
	text-align:center;
	border-radius:25px;
	border:none;
	color:white;
	padding:10px 15px;
	position:absolute;
	bottom:30px;
	left: calc(50% - 100px);
	min-width:200px;
	cursor:pointer;
}

input[type='submit']:hover {
	
	background-color:rgba(41,184,233,1);
}


.btns_retour {
	
	margin-top:30px;
	height:50px;
	line-height:50px;
	background-color:white;
	padding:5px 10px;
	width:280px;
	text-align:left;
	letter-spacing: 3px;
	cursor:pointer;
}

.btns_retour:hover {
	
	background-color:#F5F5F5;
}

.btns_retour img {
	
	height:40px;
	vertical-align:middle;
}

ul {list-style: none}
li::before {
  content: '\2713';
  color: green;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.fa-sad-tear, .fa-laugh-beam {
	font-size:30px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}


@media only screen and (max-width: 430px) {
	
	body, html {
		padding:0;
		margin:0;
	}
	
	h2 {
		display:block;
		width:100%;
		color:white;
		background-color:rgba(11,154,203,1);
		margin-top:0;
		padding:5px 0px;
	}
	
	#center_main {
		width:100%;
	}
	
	#principal {
		
		margin:0;
		padding:0;
		display: block !important;
		width:100%;
		height:auto;
	}
	
	.flotteur {
		
		width:100%;
		margin-left:0;
		margin-top:20px;
	}
	
	.conteneur .text_conteneur {
		
		min-height:250px;
		vertical-align:middle;
	}
	
	input[type='submit'] {
		position:inherit;
		margin-top:20px;
	}
	
}