body{
background: #f4f2dd; /*couleur fond écran*/
font-family: 'Open Sans', sans-serif; /*police*/
}

#container{
width: 30%; /*taille du contenant du formulaire de connexion*/
position: relative;
margin:0 auto;/*centre sur l'écran */
margin-top: 10%;/* position par rapport au haut de l'écran*/
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}

#container form {
width: 100%;
margin: 0 auto;
padding: 10%;
border: 1px solid #f1f1f1;
background: #fff;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.24);
}

#container h1 {
	width: 38%;
	margin: 0 auto;
	padding-bottom: 10px;
	font-size: 2vw;
}

input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 1.5vw;
}

label {
font-size:1.5vw;
}

input[type=submit] {
background-color: #53af57;
color: white;
padding: 14px 20px;
margin: 7px 0;
border: none;
cursor: pointer;
width: 100%;
font-size: 1.5vw;
}

#bloc_img {
width: 50%;
display: flex;
flex-direction: column;
position: absolute;
top: -25%;
left: -20%;
z-index: 1;
}

.credit {
font-size: 0.5vh;
}

@media screen and (max-width: 479px){
	#container{
		width: 70%; /*taille du contenant du formulaire de connexion*/
		margin-top: 20%;/* position par rapport au haut de l'écran*/
	}
	#container form {
		width: 80%;
	}
	#container h1 {
		font-size: 4vw;
	}
	label, input[type=text], input[type=password], input[type=submit] {
		font-size: 3vw;
	}
#bloc_img {
		width: 50%;
		top: -15%;
		left: -15%;
	}	
}
@media screen and (min-width:480px) and (max-width: 768px){
	#container{
		width: 50%; /*taille du contenant du formulaire de connexion*/
		margin-top: 3%;/* position par rapport au haut de l'écran*/
	}
	#container form {
		width: 80%;
	}
	#container h1 {
		font-size: 3vw;
	}
	label, input[type=text], input[type=password], input[type=submit] {
		font-size: 2vw;
	}
	#bloc_img {
		width: 40%;
		top: -5%;
		left: -10%;
	}	
}
@media screen and (min-width:769px) and (max-width: 1024px){
	#bloc_img {
		width: 60%;
		top: -20%;
		left: -20%;
	}	
}
@media screen and (min-width:1025px) and (max-width: 1679px){
	
}