/*	CSS pour OFINA by PITI & DIGICREA
	Dev : Chris CLAVERIE
	URL : http://www.digicrea.com
	VERSION : 1.0
	LICENSE : GPL */
	
/* Base commune */
body { background-color: #FFFFFF; font-family: 'Oswald', sans-serif; font-weight: 300; }

/* Fonds */
.bg-compte { background: url(../images/bg-main.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-mdp { background: url(../images/bg-interrogation.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

/* Titres */
h1.titre { font-family: 'Oswald', sans-serif; font-weight: 300; color: #FFFFFF; font-size: 24px; text-transform: uppercase; text-align: center; margin-right: auto; margin-left: auto; display:block; }

/* Contenus */
p.annonce { font-family: 'Oswald', sans-serif; font-weight: 300; color: #FFFFFF; font-size: 16px; }
.txt-rouge { color: #c51f35; font-family: 'Oswald', sans-serif; font-size: 18px; }
.txt-gris { color: #5e5e5e; font-family: 'Oswald', sans-serif; font-size: 16px; }
.txt-union a, .txt-jcb a, .txt-amex a { color: #1a62aa; text-decoration: none; }
.txt-union a:hover, .txt-jcb a:hover, .txt-amex a:hover { color: #c51f35; }

/* Effets */
.shadow1 { text-shadow: 2px 2px 3px rgba(40, 40, 40, 1); }
.txt-union, .txt-jcb, .txt-amex { display: none; }
.union:hover, .jcb:hover, .amex:hover { background-color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6); border: 4px solid #a9a9a9; border-radius: 15px; }
.union:hover .txt-union { display : block; }
.jcb:hover .txt-jcb { display : block; }
.amex:hover .txt-amex { display : block; }

/* Formulaires */
.login { background-color: rgba(255, 255, 255, 0.6); border: 4px solid #a9a9a9; border-radius: 15px; padding: 15px; display: table; margin-right: auto; margin-left: auto; width: 250px; -webkit-box-shadow: 10px 10px 30px -10px rgba(0,0,0,0.76); -moz-box-shadow: 10px 10px 30px -10px rgba(0,0,0,0.7); box-shadow: 10px 10px 30px -10px rgba(0,0,0,0.7);}
.input { position: relative; margin: 15px auto;}
.input span { position: absolute; display: block; color: #bab8b8; left: 0; top: 0; font-size: 20px; border: 1px solid #908f8e; width: 36px; height: 36px; line-height: 36px; text-align: center; }
.input input { width: 100%; height: 36px; padding-left: 40px; display: block; border: 1px solid #908f8e; transition: 0.2s ease-out; color: #a1a1a1;font-family: 'Open Sans', sans-serif;font-weight: 300; font-size:15px;}
.submit { display: block; background: #009bdc;border-radius: 6px 6px 6px 6px;-moz-border-radius: 6px 6px 6px 6px;-webkit-border-radius: 6px 6px 6px 6px;border: 0px solid #009bdc; color: #FFF; font-size: 14px; padding: 5px 25px; transition: 0.2s ease-out;cursor: pointer; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:14px;}
.submit:hover, .submit:focus { background: #fff; color: #009bdc; outline: 0; }
.quit { display: block; background: #9a9a9a;border-radius: 6px 6px 6px 6px;-moz-border-radius: 6px 6px 6px 6px;-webkit-border-radius: 6px 6px 6px 6px;border: 0px solid #9a9a9a; color: #FFF; font-size: 14px; padding: 5px 25px; transition: 0.2s ease-out;cursor: pointer; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:14px;}
.quit:hover, .quit:focus { background: #555555; color: #fff; outline: 0; }
.mdpo {font-family: 'Open Sans', sans-serif;font-weight: 300; font-size:12px;}
.mdpo a:hover{color: #c51f35; text-decoration:none;}

.erreur-box { background-color: rgba(255, 42, 44, 0.5); border: 4px solid #a9a9a9; border-radius: 15px; padding: 15px; display: table; margin-right: auto; margin-left: auto; width: 250px; -webkit-box-shadow: 10px 10px 30px -10px rgba(0,0,0,0.76); -moz-box-shadow: 10px 10px 30px -10px rgba(0,0,0,0.7); box-shadow: 10px 10px 30px -10px rgba(0,0,0,0.7); font: 300 14px 'Open Sans', sans-serif; color: #FFF; }
.erreur-box p {line-height:14px;}

.legend {font: 300 14px 'Open Sans', sans-serif; color: #505050;}

/* Small devices (tablets, 768px and up) */
@media (min-width: 480px) {
h1.titre { text-align: left; font-size: 36px; }
p.annonce { color: #FFFFFF; text-align: left; font-size: 24px; }
.login { margin-right: 0; margin-left: 0; width: 350px; }
.frofina {float:none;}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.frofina {float:right;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}