/* CSS Document */

html, body { margin:0; padding:0; text-align:center; font-family: 'Roboto Condensed', sans-serif; color:#5D5D5D; font-weight:300; min-height:100%; }
input, select { font-family: 'Roboto Condensed', sans-serif; font-size:inherit; font-weight:inherit; }
html { position:relative; }
body { padding-bottom:100px; min-height:100%; }

strong { font-weight:700; }

a { color:#5B8DAF; }

.header { background-color:#5C8EB0; }
.contenu { max-width:990px; text-align:left; margin:auto; }


.header .menu ul { margin:0; padding:0; list-style:none; }
.header .menu li { display:block; border-right:1px solid #9FB7C8; padding:0; float:left; }
.header .menu li a { font-size:20px; font-weight:300; padding:30px 10px; color:#FFFFFF; display:inline-block; text-decoration:none; }
.header .menu li a:hover, .header .menu li a.selected { background-color:#407091; }
.header .menu li a.my3dsecure { background-image:url("/enreg/app/javax.faces.resource/images/shared/3d-secure.png"); background-repeat:no-repeat; background-position:10px center; padding-left:50px; border-left:1px solid #9FB7C8; }
.header .menu .my3dsecure { }

.header #bDeconnexion { font-size:16px; font-weight:300; margin-top:30px; margin-right:10px; padding:0px 10px; color:#FFFFFF; display:inline-block; text-decoration:none; float:right; vertical-align:middle; border-right:1px solid #9FB7C8; }
.header #bDeconnexion img { vertical-align:middle; margin-left:10px; }
.header #bDeconnexion:hover { background-color:#407091; }

.header .langs { float:right; font-size:16px; font-weight:300; color:#FFFFFF; text-transform:uppercase; margin-top:30px; position:relative; }
.header .langs .court { display:none; }

.header .langs #bOpenLangue {
	bottom: 0;
	cursor: pointer;
	display: inline-block;
	position: absolute;
	right: 0;
	vertical-align: middle;
	z-index: 0;
}

.header .langs .langs_all { position:absolute; background-color:#5C8EB0; border:1px solid #9FB7C8; display:none; right:0; }
.header .langs .langs_all ul { margin:0; padding:0; list-style:none; }
.header .langs .langs_all ul li a { color:#FFFFFF; text-decoration:none; padding:5px 10px; display:block; }
.header .langs .langs_all ul li a:hover { background-color:#407091; }
 
h1 {
	font-size: 40px;
	color: #5B8DAF;
	font-weight: 300;
}

.cards-logos { float:right; text-align:right; }
.card-logos { margin-left:20px; }

.gris {
	background-image: url("/enreg/app/javax.faces.resource/images/shared/ombre-gris.png");
	background-position: bottom left;
	background-repeat: repeat-x;
	background-color: #F3F3F3;
	padding: 40px 0;
}

.colonne2 { width:46%; padding:0 2%; float:left; text-align:center; }
.bleu { background-color:#D4E7F3; border-radius:4px; padding:20px; vertical-align: middle }
.colonne2 .bleu {  display:table; min-width:calc(100% - 40px); min-height:46px; line-height:46px;  }
.bleu h3 { color:#515659; font-size:18px; font-weight:normal; margin:0; padding:0; vertical-align:middle; line-height:normal; }
.colonne2 .bleu h3 { display:inline-block; }


.bouton { font-weight:300; font-size:20px; color:#FFF; text-decoration:none; border-radius:4px !important; padding:10px 30px; display:inline-block; text-align:center; cursor:pointer;-webkit-appearance: none; }
.bouton-vert {  background-color:#70A20F; border:0; border-bottom:2px solid #5A820C; margin-bottom:20px; }
.bouton-vert:hover {  background-color:#84b328; border-bottom:2px solid #6f9b1a; }
.bouton-orange {  background-color:#fca215; border:0; border-bottom:2px solid #ca8000; margin-bottom:20px; }
.bouton-orange:hover {  background-color:#ca8000; border-bottom:2px solid #fca215; }
.bouton-rouge {  background-color:#e44349; border:0; border-bottom:2px solid #a43337; margin-bottom:20px; }
.bouton-rouge:hover {  background-color:#ec5c61; border-bottom:2px solid #ca4146; }
.bouton-small { font-size:16px; padding:5px 10px; border-radius:2px; }

.bleu form { margin-top:10px; }
.bleu input[type=text], .bleu input[type=tel] { border:0; border-radius:4px; font-size:18px; font-weight:300; width:48px; padding:5px 10px; letter-spacing:3px; vertical-align:middle; margin-right:5px; }
.bleu input[type=password] { border:0; border-radius:4px; font-size:18px; font-weight:300; width:48px; padding:5px 10px; letter-spacing:3px; vertical-align:middle; margin-right:5px; }
.bleu .information  { border:0; border-radius:4px; font-size:18px; font-weight:300; width:300px; padding:5px 10px; vertical-align:middle; margin-right:5px; display:inline-block; }
.bleu label { font-size:16px; font-weight:300; padding:5px 10px; vertical-align:middle; margin-right:5px; }
.bleu select { border:0; border-radius:4px; font-size:16px; font-weight:300;padding:5px 10px; vertical-align:middle; margin-right:5px; }

.bleu input[type=text].meduim { width:130px; }
.bleu input[type=text].big { width:300px; }
.bleu input[type=text].text { letter-spacing:0; }
.bleu input[type=password].code,.bleu input[type=text].code, .bleu input[type=tel].code { letter-spacing:0; width:14px; padding :5px 8px ; }

#espace3dsecure .bleu { margin-bottom:20px; }

#photo > .contenu > p.juri { font-size:14px; color:#000; }

#demande-code .colonne2 p { min-height:100px; }
#photo>.contenu>p { margin-bottom:40px; font-size:20px; max-width:70%; }
#saisie-token #photo>.contenu>p { margin-bottom:0px; font-size:18px; max-width:70%; }
#saisie-token #photo>.contenu>ul { margin:0; }
#saisie-token #photo>.contenu>ul>li { font-size:18px; max-width:70%; }
#saisie-token .bleu { margin-top:40px; }
.bleu.token label { width:200px; display:inline-block; }

#photo { background-image:url("/enreg/app/javax.faces.resource/images/photo.png"); background-position:top right; background-repeat:no-repeat; min-height:291px; }
#photo .border {
	border-top: 1px solid #C9C9C9;
    padding-top: 20px;
}
#photo>.contenu>p.carte-fond { background-image:url("/enreg/app/javax.faces.resource/images/icones/carte-arriere.png"); background-position:top left; background-repeat:no-repeat; padding-left:140px; text-align:left; font-size:16px; font-weight:normal; min-height:57px; max-width:380px; }

.erreur { color:#C00; font-size:18px !important; }
.erreur ul { margin-top:0; }

ul.banques { margin:auto; padding:5px; list-style:none; text-align:center; }
ul.banques li { display:inline-block; padding:5px 20px; }

.footer { background-color:#5C8EB0; min-height:96px; width:100%; position:absolute; bottom:0; }

@media screen and (max-width: 990px) {
	.header .langs { margin-right:10px; }
	.contenu.marginpetit {margin:0 20px; }
	
}

@media screen and (max-width: 753px) {
	#photo>.contenu>p { max-width:100%; }
	#saisie-token #photo>.contenu>p { max-width:100%; }
	#saisie-token #photo>.contenu>ul>li { max-width:100%; }
	#photo { background:none; min-height:0; }
}


@media screen and (max-width: 518px) {
	.bouton-small { font-size:14px; padding:2px 5px; border-radius:2px; }
	.bleu input[type=text], .bleu input[type=tel] { border:0; border-radius:4px; font-size:16px; font-weight:300; width:45px; padding:2px 5px; letter-spacing:3px; vertical-align:middle; margin-right:5px; margin-bottom:10px; }
	.bleu select {  font-size:16px; font-weight:300; padding:2px 5px; margin-bottom:10px; }
	.bleu label {  font-size:16px; font-weight:300; padding:2px 5px; margin-bottom:10px; }
	.bleu input[type=text].code, .bleu input[type=tel].code { width:12px; margin-right:2px;  }
}


@media screen and (max-width: 335px) {
	#bienvenue .bleu { text-align:center; }
	.bleu input[type=text] { width:35px; letter-spacing:0px; }
}

@media screen and (max-width: 770px) {
	#demande-code .colonne2 .bleu { min-height:	70px; line-height:70px; }	
}
@media screen and (max-width: 647px) {
	#demande-code .colonne2 p { min-height:	150px; }	
}

@media screen and (max-width: 620px) {
	.colonne2 { width:96%; margin-bottom:20px; }
	#demande-code .colonne2 .bleu, .colonne2 .bleu { min-height:0; line-height:normal; }	
	#demande-code .colonne2 p, .colonne2 p { min-height:0; }	

}
@media screen and (max-width: 600px) {
	.cards-logos { max-width:100px; }
}

@media screen and (max-width: 570px) {
	.bleu .information { width:100%; }
}

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

	.header .langs .long { display:none; }
	.header .langs .court { display:inline; }

}
@media screen and (max-width: 440px) {
	.bleu.token label { width:auto; }
}
@media screen and (max-width: 430px) {
	h1 { font-size:28px; }
	.card-logos { height:30px; }
	#photo>.contenu>p.carte-fond {  background-position:top center; padding-left:0px; padding-top:70px; text-align:center; }
}

@media screen and (max-width: 365px) {
	.bleu input[type=text].code, .bleu input[type=tel].code { margin-right:1px; }
}

@media screen and (max-width: 303px) {
	.bleu input[type=text].code, .bleu input[type=tel].code { margin-right:0px; padding:2px; border-radius:2px; }
}

@media screen and (max-width: 508px) {
	.espace3dsecure .header #bDeconnexion span { display:none; }
	.espace3dsecure .header #bDeconnexion img { margin:0; }
}

@media screen and (max-width: 470px) {
	.espace3dsecure .header .menu li a { font-size:16px; padding:10px 10px; }
	.espace3dsecure .header .menu li a.my3dsecure { padding-left:50px; }
	.espace3dsecure .header .langs { margin-top:5px; }
	.espace3dsecure .header #bDeconnexion { margin-top:5px; }
}

@media screen and (max-width: 415px) {
	.espace3dsecure .header .menu li a.my3dsecure { background-image:none; padding-left:10px; }
}
@media screen and (max-width: 400px) {
	.header .menu li a { font-size:16px; padding:10px 10px; }
	.header .langs { margin-top:5px; }
	.card-logos { height:25px; margin-bottom:5px; }
	.bleu input[type=text].big { width:95%; }
}

@media screen and (max-width: 335px) {
	.espace3dsecure .header .menu li a, .header .menu li a { padding:10px 5px; }
	.espace3dsecure .header #bDeconnexion { margin-right:5px; padding-right:5px; }
}
	
@media screen and (max-width: 315px) {
	.header .menu li a.my3dsecure { background-image:none; padding-left:10px; }

}

.centered {
    color: white;
    transform: translateY(200%);
}