@charset "utf-8";

@font-face { font-family: OpenSans; src: url("/fonts/OpenSans-Regular.ttf") format("truetype"),url("/fonts/OpenSans-Regular.woff") format("woff"),url("/fonts/OpenSans-Regular.eot") format("embedded-opentype")}
@font-face { font-family: OpenSans-Semibold; src: url('/fonts/OpenSans-SemiBold.ttf') format("truetype"),url("/fonts/OpenSans-SemiBold.woff") format("woff"),url("/fonts/OpenSans-SemiBold.eot") format("embedded-opentype")}
@font-face { font-family: OpenSans-Light; src: url('/fonts/OpenSans-Light.ttf') format("truetype"),url("/fonts/OpenSans-Light.woff") format("woff"),url("/fonts/OpenSans-Light.eot") format("embedded-opentype")}
@font-face { font-family: OpenSans-Italic; src: url('/fonts/OpenSans-Italic.ttf') format("truetype"),url("/fonts/OpenSans-Italic.woff") format("woff"),url("/fonts/OpenSans-Italic.eot") format("embedded-opentype")}
@font-face { font-family: OpenSans-Bold; src: url('/fonts/OpenSans-Bold.ttf') format("truetype"),url("/fonts/OpenSans-Bold.woff") format("woff"),url("/fonts/OpenSans-Bold.eot") format("embedded-opentype")}


header, #page, bloc						{	width:900px; margin: auto; font-family: 'OpenSans' }
header .header-logo img					{	width:100% 	}
header .header-logo img.mobi			{	visibility: hidden; display:none 	}

@media (max-width: 1200px){
}

@media (max-width: 992px){
header, #page, bloc						{	width:100%}
}

@media (max-width: 768px){
header .header-logo 					{	text-align: center; overflow:hidden 	}
header .header-logo img.large			{	visibility: hidden; display:none 	}
header .header-logo img.mobi			{	visibility: visible; display:block 	}
}

@media (max-width: 480px){

}

.connexion								{ min-height: 80%; background-color:#082458; padding:30% 0; box-sizing:border-box; text-align:center; font-size: 14px }
.connexion a							{ color: #65C1D8; font-size: 14px; letter-spacing: 4px; text-transform:uppercase }
.connexion a:hover						{ color: #FFF }

.connexion-form							{ width: 500px; margin:  20px auto; padding-bottom: 20px; border:solid 1px #BAB3AC; background-color:#082458; font-size: 14px;  color:#FFF; font-family: 'OpenSans' }
.connexion-form	.bandeau				{ width: 100%; background-color: #FFF; text-align:center}
.connexion-form	.bandeau img			{ width: 400px; height: auto; padding: 25px; box-sizing:border-box}
.connexion-form	form					{ padding: 25px}
.connexion-form	form input				{ width: 100%; height: 30px; margin-top: 5px; text-align: center; font-size:14px}
.connexion-form	form input[type=submit]	{ height: 32px; background-color: #65C1D8; color:#082458;  }
.connexion-form	p						{ text-transform:uppercase; letter-spacing: 2px }
.connexion-form	.oubli					{ padding:20px; text-align:center; border-top: 1px dashed #CCC; margin-top: 1%}
.connexion-form	.oubli	a				{ color:#65C1D8; text-transform:uppercase }
.connexion-form	.oubli	a:hover			{ color: #FFF }
.connexion-form .connexion-contact		{ text-align:center }
.connexion-form .connexion-contact img	{ padding: 5px }

@media (max-width: 500px){
.connexion								{ min-height: 350px}
.connexion-form							{ width: 95% }
.connexion-form	.bandeau img			{ width: 100%; padding: 10% 1%}
}


#sommaire		{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px }
#sommaire td	{ text-align: center; color: #082458 }
#sommaire td.on	{ color: #FFFFFF; background-color: #082458}



#albums  		 	{	text-align:left;	margin-left:20px;	line-height: 15px;	font-size:11px;	padding-top: 40px}
#albums a		 	{ font-weight: bold; color: #95D9D8; text-decoration:none }
#albums a:hover 	{ color: #FFFFFF }

.bandeau						{ width: 100%; background-color: #FFF; text-align:center}
.bandeau img					{ width: 400px; height: auto; padding-top: 25px}
.legal							{ width: 600px; margin:  20px auto; padding: 25px; box-sizing:border-box; border:solid 1px #BAB3AC; background-color:#082458; font-size: 14px;  color:#FFF; font-family: 'OpenSans' }
.legal h1						{ text-transform: uppercase; font-size: 12px; letter-spacing: 2px; color: #B9C3D3 }

@media (max-width: 500px){
.legal							{ width: 100%; padding: 2% }
.bandeau img					{ width: 100%; padding-top: 1%}
}

#pied				{	width:900px; margin: auto; color:#000; 	font-size: 13px; font-family: 'OpenSans' }

#piedpage			{  clear:both; width:900px; margin:auto; text-transform:uppercase;  }
#piedpage td 		{ font-family: "Century Gothic"; color:#000; 	font-size: 13px }
#piedpage a         { font-family: "Century Gothic"; color:#000; 	font-size: 13px }
#piedpagehp         { clear:both; background-color:#082458; width:900px; margin:auto; color:#FFF  }
#piedpagehp a      { color:#E4F3F8 }

@media (max-width: 1200px){
}

@media (max-width: 992px){
#pied							{	width:100%}
}

@media (max-width: 600px){
#piedpage a         { font-size: 13px }
}