html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering: optimizeLegibility;

    color: #FFF;
    font-family: 'Noto Sans', sans-serif;
}

html {
	background: #071427 url(../styles-client/bg.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
	
}

body, html {
    font-size: 15px;
}
ol, ul, li {
    list-style: none;
    padding: 0px;
    margin: 0px;
} 
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

#main {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-bottom: 50px;
	
}

form,
.container {
	margin-top: 50px;
	padding: 20px 70px 100px 70px ;
	box-sizing: border-box;
	background: #040a16;
	zoom:1;
	box-shadow: 0px 0px 5px 0px rgba(24, 28, 38, 0.95);
	border-radius: 20px;
	width: 100%;
}

.container {
	text-align: center;
}

.credits {
	text-align: center;
	padding: 20px;
	position: absolute;
	bottom: 10px;
	font-size: 0.65em;
	text-transform: uppercase;
	color: #4b586a;
	width: 100%;
	box-sizing: border-box;
}

.credits a {
	color:  #4b586a;
}

.btn-retour {
	width: 100%;
	display: block;
	font-family: 'Bebas Neue', cursive;
	cursor: pointer;
	border-bottom: none;
	padding: 15px 5px;
	color: rgba(21, 20, 24);
	text-align: center;
	font-size: 1.4em;
	background-image: url(carte-hover.svg);
	background-position: right -70px center;
	background-repeat: no-repeat ;
	background-size: auto 40px;
	margin-top: 50px;
}

.btn-retour.retour-site {
	background-color: #FFF;
}

form input {
	background-color: #0d1e3d;
	border: 0px;
	border-bottom: solid 2px rgba(97, 98, 103, 0.3);
	padding: 10px 5px;
	width: 100%;
	font-size: 1.3em;
	color: #FFF;
	font-weight: 400;
	transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;
	box-sizing: border-box;
}

form input:focus {
	background-color: rgba(18, 18, 18, 0.95);
}

form p > label {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family: 'Bebas Neue', cursive;
	color: #fff;
	display: block;
	margin-bottom: 5px;
	width: 100%;
}

p.securise {
	font-size: 0.7em;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 0px;
}

a {
	text-decoration: none;
	transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;
}

form input[type="submit"] {
	font-family: 'Bebas Neue', cursive;
	cursor: pointer;
	border-bottom: none;
	padding: 15px 5px;
	color: rgba(21, 20, 24);
	text-align: center;
	font-size: 1.4em;
	background-image: url(carte-hover.svg);
	background-position: right -70px center;
	background-repeat: no-repeat ;
	background-size: auto 40px;
}

form input[type="submit"]:hover {
	background-position: right 10px center;
}

span.carte-paiement {
	background-image: url(cartes.svg);
	width: 100%;
	height: 70px;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

form p {
	margin-bottom: 30px;
	position: relative;
}

form p.no-margin {
	margin-bottom: inherit;
}

form p.submit {
	margin-bottom: 0px;
	margin-top: 50px;
}

form p span {
	position: absolute;
	width: 20px;
	height: 20px;
	right: 0px;
	bottom: 15px;
	font-size: 1.5em;
	color: rgba(93, 93, 93, 1);
}

.form-input-select {
	color: #000;
	display: block;
	border-radius: 0;
	box-shadow: none;
	margin-top: 9px;
	margin-bottom: 15px;
	width: 100%;
	background-color: rgba(18, 18, 18, 0.2);
}

.form-input-select:before,
.form-input-select:after {
	content: '';
	display: block;
	position: absolute;
	pointer-events: none; 
	border: 1px solid transparent;
	width: 0;
	height: 0;
	right: 16px;
}

.form-input-select:hover select {
	box-shadow: 0 2px 3px rgba(204,167,114, 0.1) inset;
	border-color: #cca772;
}  

.form-input-select:hover select:focus {
	outline-color: transparent;
}

.form-input-select select {
	width: 100%;
	border: 0px solid #cca772;
	border-radius: 0;
	font-weight: 400;
	color: inherit;
	padding: 11px 15px;
	line-height: normal;
	transition: border-color 0.2s ease, outline 0.2s ease;
	background-color: #0d1e3d;
	color: #FFF;
	font-size: 1.3em;
}

.form-input-select select:focus {
	box-shadow: 0 3px 4px rgba(15, 54, 57, 0.3) inset;
}
  
.form-input-select select[disabled], 
.form-input-select select:disabled{
	opacity: 0.4;
	cursor: not-allowed;
}
  
.form-input-select select:not(:focus):invalid {
	color: red;
}

#logo {
	width: 170px;
	height: 170px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../styles-client/logo-olivier-pere-et-fils.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center; 
	margin-bottom: 50px;
	margin-top: 20px;
}

@media screen and (max-width: 1500px) {
  
  #main {
	  width: 500px;
  }
  
  form {
	  padding: 20px 50px 100px 50px;
  }
  
}

@media screen and (max-width: 1024px) {
  
 	form input {
	 	font-size: 1.2em;
 	}
  
}


@media screen and (max-width: 768px) {
  
	#main {
		width: 90%;
	}
	
}


@media screen and (max-width: 480px) {
  	
	#main {
		width: 100%;
		margin-bottom: 0px;
	}
	
	#logo {
		width: 100%;
		height: 120px;
		margin-bottom: 20px;
	}
	
	form {
	    padding: 20px 20px 100px 20px;
	    margin-top: 0px;
	    border-radius: 0px;
	}
	
	form input {
		font-size: 1em;
		border-bottom: solid 2px rgba(93, 93, 93, 1);
	}
	
	.credits {
		font-size: 0.5em;
	}
	
	form p > label {
		color: #fff;
		font-size: 0.8em;
	}
	
	form p span {
		color: rgba(93, 93, 93, 1);
	}
	
}


@media screen and (max-width: 320px) {
  	
  	
  	#logo {
		width: 100%;
		height: 80px;
		margin-bottom: 20px;
	}
	
	form input {
		font-size: 0.9em;
	}
	
  	

}




/* POUR IE */

@media screen and (min-width:0\0) {
    body form,
	body .container {
		background-color: #151418;
		box-shadow: 0px 0px 5px 0px #151418;
	}
	
	form input[type="submit"] {
	    
	    background-image: none;
	    color: #151418;
	}
	
	form p span {
		color: #4b586a;
	}
	
	.credits {
		color: #4b586a;
	}

	.credits a {
		color: #4b586a;
	}
	
	form input {
	border-bottom: solid 2px #3c3d41;
	}

	form input:focus {
		background-color: #000;
	}

	form p > label {
		color: #FFF;
	}

	form input[type="submit"] {
		color: #151418;
	}
	
}