/* Définition des Web-Font */

@font-face { /* Définition d'une nouvelle police nommée SourceSansPro */
    font-family: 'SourceSansPro';
    src: url('fonts/source-sans-pro/SourceSansPro-Regular.otf');
}

@font-face { /* Définition d'une nouvelle police nommée Meccanica */
    font-family: 'Meccanica';
    src: url('fonts/Meccanica/meccanica-regular.otf');
}


@media only screen and (min-width: 1200px) {

	#background{
		position: absolute;
		height: 100%;
		width: 100%;
		z-index: 1;
		animation: 10s infinite alternate focus;
	}

	@keyframes focus {
	  from {
	    transform: scale(1.05);
		filter: blur(3px);
	  }
	  
	  to {

	  	transform: scale(1.1);
		filter: blur(0px);

	  }
	}

	#logo{

		animation : 1s scale;
		width: 120px;
	}

	#content{

		-webkit-transition: 0.5s; /* Pour Safari V3.1 à V6.0 */
	    transition: 0.5s;
	}

	@keyframes scale {
	  from {
	    width: 30px;
	    height: auto;
	  }
	  
	  to {
	  	width: 120px;
	  	height: auto;
	  }
	}

	@keyframes deploy {
	  0% {
	    opacity: 0;
	    height: 30px;
	    width: 30px;
	  }

	  30% {
	    opacity: 0;
	    height: 30px;
	    width: 30px;
	  }

	  40%{

	  	width: 300px;
	  	height: 30px;
	  }

	  70%{
	  	opacity: 0;
	  }
	  100% {

	  	opacity: 1;
	  	/*transform: scale(1);*/
	  	left: 100px;
	  	height: 180px;
	  }
	}

	body{

		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'Meccanica', Arial;
		height: 100vh;
		color: #616161;
		overflow: hidden;

	}

	#content{

		animation: 3s deploy;
		width: 300px;

	}

}

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

	body{

		background-color: #F7F9F9;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'Meccanica', Arial;
		color: #616161;
		height: 100vh;
		overflow-y: hidden;
	}

	#background{
	display: none;
	}

}

#logo{
	margin-bottom: 50px;
}

#centrage{

	background-color: white;
	padding: 50px;
	-webkit-transition: 1s; /* Pour Safari V3.1 à V6.0 */
    transition: 1s;
    display: flex;
    flex-direction: column;
    align-items: center;
	-moz-box-shadow: 0.5px 0.5px 5px 0px #6F6F6F;
	-webkit-box-shadow: 0.5px 0.5px 5px 0px #6F6F6F;
	-o-box-shadow: 0.5px 0.5px 5px 0px #6F6F6F;
	box-shadow: 0.5px 0.5px 5px 0px #6F6F6F;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#6F6F6F, Direction=134, Strength=5);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	z-index: 5;
}

.block-from input{

	margin-bottom: 5px;
	display: flex;
	align-items: center;
}

.block-from{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#noAccount{
	margin-top: 10px;
	display: flex;
	font-size: 0.9em;
	align-items: center;
}

input[type=submit], input[type=button]{

	background-color: white;
	color: #4d8693;
	border: solid 2px #AED6F1;
	padding: 7px 12px 7px 12px;
	transition: all .2s; /* on prévoit une animation */
	cursor: pointer;
	border-radius: 3px;
	margin: 3px;
}

input[type=submit]:hover, input[type=button]:hover{

	background-color: #5DADE2;
	border: solid 2px #5DADE2;
	color: white;
	-moz-box-shadow: 2px 2px 5px 0px #cfcfcf;
	-webkit-box-shadow: 2px 2px 5px 0px #cfcfcf;
	-o-box-shadow: 2px 2px 5px 0px #cfcfcf;
	box-shadow: 2px 2px 5px 0px #cfcfcf;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=150, Strength=10);
}

input[type=submit]:active, input[type=button]:active{

	background-color: #2980B9;
	border: solid 2px #2980B9;
	color: white;
}

.input-text {
  display: block;
  margin: 0;
  padding: var(--inputPaddingV) var(--inputPaddingH);
  color: inherit;
  width: 100%;
  font-family: inherit;
  font-size: var(--inputFontSize);
  font-weight: inherit;
  line-height: var(--inputLineHeight);
  border-radius: 0.4rem;
  transition: box-shadow var(--transitionDuration);
  -webkit-transition: 1s; /* Pour Safari V3.1 à V6.0 */
  transition: 1s;
  padding: 5px 10px 5px 10px;
  border: solid 1px #B9B9B9;
  background-color: #FCFCFC;
}

.input-text::placeholder {
  color: #B0BEC5;
}

.input-text:focus {
  outline: none;
-moz-box-shadow: 2px 2px 5px 0px #cfcfcf;
-webkit-box-shadow: 2px 2px 5px 0px #cfcfcf;
-o-box-shadow: 2px 2px 5px 0px #cfcfcf;
box-shadow: 2px 2px 5px 0px #cfcfcf;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=150, Strength=10);
border: solid 2px #54C0E2;
}