/* FONTS */

@font-face {
    font-family: 'cooper_hewittbold_italic';
    src: url('font/cooperhewitt-bolditalic-webfont.eot');
    src: url('font/cooperhewitt-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/cooperhewitt-bolditalic-webfont.woff2') format('woff2'),
         url('font/cooperhewitt-bolditalic-webfont.woff') format('woff'),
         url('font/cooperhewitt-bolditalic-webfont.ttf') format('truetype'),
         url('font/cooperhewitt-bolditalic-webfont.svg#cooper_hewittbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'glacial_indifferenceregular';
    src: url('font/glacialindifference-regular-webfont.eot');
    src: url('font/glacialindifference-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/glacialindifference-regular-webfont.woff2') format('woff2'),
         url('font/glacialindifference-regular-webfont.woff') format('woff'),
         url('font/glacialindifference-regular-webfont.ttf') format('truetype'),
         url('font/glacialindifference-regular-webfont.svg#glacial_indifferenceregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* THE PAGE */

body
{
	background-color: white;
	font-family:"glacial_indifferenceregular";
	letter-spacing:1px;
	text-decoration:none;
	list-style:none;
	color: white;
	margin: 0; padding: 0;
}

ul, li{ margin:0;padding:0;list-style-type:none; /* contre le style liste */
}

#bloc_page
{
    max-width: 100%;
    margin: auto;
}

/*HEADER OK */
header img 
{
	width: 100%;
	top: 0px;
	z-index: 3;
	position: fixed;	
}

table 
{
	margin: 2%;
	top: -2%;
	z-index: 4; 
	position: fixed; 
	width: 95%;
}

td,th
{
	text-align:left;
	height:40px;
	vertical-align:middle; 		
}

li a
{
	text-decoration:none;
	color: white;
	font-size: 120%;	
}

.alignr{text-align:right}
.rouge{color: #FF3366; width:1%}

#logo
{
	margin-top: 5%;
	width: 100%;
}

#body
{
	margin-top: -5%;
	margin-bottom: 20%;
	width: 100%;
	z-index:1;
}

/*CORPS*/

section img
{
		width: 100%;
 
}


section article p
{
			max-width:900px;
			padding:3%;
			margin:0 auto;
			
			line-height:28px;
			font-size:20px;
			color: #FF3366;
			
}

#detail
{	
			position:absolute;
			text-align:justify;
			right: 20%;
			left:20%;
			top:50%;
			z-index:2;		
}

h2
{
			font-family: 'cooper_hewittbold_italic';
			color: #FF3366;
			font-size:25px;
			text-align:center;
}


h1
{
			font-family: 'cooper_hewittbold_italic';
			color: #FF3366;
			font-size:30px;
}

#a_propos
{
			
			position:relative;
			text-align:justify;
			right: 20%;
			left:20%;
			top:85%;
			z-index:2;
			
			
			
}

.joinus
{			
			right: 20%;
			left:20%;
			z-index:2;
			margin: 0 auto;
   			width: 70%;
   			text-align: center; 
   			font-family: 'cooper_hewittbold_italic';
   			 
}
#schedule
{
			position: relative;
			right: 2%;
			left:2%;
			top: 20%;
			z-index:2;
			color: #FF3366;
			border-spacing: 0;
		        overflow-x:auto;	
}

#schedule img
{
	width:100%;
}

#schedule tr th
{
	width: 200px;
}

#schedule a
{ 
  text-decoration: none; 
  color: #FF3366;
}

#schedule th
{
	height: 100px;
	text-align: center;
}

#schedule td
{
	text-align: center;
	border-bottom: 1px solid #ddd;
	padding: 10px;
}

#schedule td:hover
{
	background: #FF3366;
	color: white;
	text-decoration: none;
}

#schedule td:hover a
{
	background: #FF3366;
	color:white;
	text-decoration: none;
}

.col_logo
{ 
	min-width:100px;
}

#schedule td.col_logo:hover
{
	background:none;
}

#upload a
{		
	display: block; 
	font-family: 'cooper_hewittbold_italic';
	text-decoration:none;
	color: #FF3366;
	text-align:center;

}

/*FOOTER*/

footer
{
    padding-top: 25px;
}

footer p
{	padding:3%;
			margin:0 auto;
			text-align:justify;
			line-height:28px;
			font-size:20px;
			color: #FF3366;
}



/* CORRECTIONS OLD_IE

.old_ie nav, .old_ie nav li, .old_ie article,
{
    display: inline;
    zoom: 1;
}

.old_ie footer div, .ie8 footer div
{
    margin-top: 30px;
    background: url('images/background_header.png') repeat-x top;
}
 */

/* MEDIA QUERIES */


@media (max-width: 480px){

table 
{
	margin: 1%;
	top: -2%;
	z-index: 4; 
	position: fixed; 
	width: 95%;	
}

nav
{
			font-size:10px;
}

section article p
{
			max-width:480px;
			padding:3%;
			margin:0 auto;
			text-align:justify;
			line-height:10px;
			font-size: 8px;
}

#a_propos
{
			
			position:absolute;
			right: 17%;
			left: 17%;
			top: 40%;
			z-index: 2;
			font-size: 8px;
}

#schedule
{
	font-size: 8px;

}

@media (min-width:320px){
#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 60%; 
			z-index: 2;
			font-size: 8px;
}
}

} // mobile portrait

@media (min-width:480px){
#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 60%; 
			z-index: 2;
			font-size: 8px;
}
}

@media (min-width:768px){
#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 60%; 
			z-index: 2;
			font-size:10px;
}
}

@media screen and (device-aspect-ratio: 375/667) {
#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 60%; 
			z-index: 2;
			font-size:10px;
}
}


@media screen and (device-aspect-ratio: 40/71) {
#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 90%; 
			z-index: 2;
			font-size:10px;
}
}


@media screen and (device-aspect-ratio: 3/4) {
#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 90%; 
			z-index: 2;
			font-size:10px;
}
}

@media (min-width: 1024px){

#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 80%;
			z-index: 2;
			font-size: 10px;
}
}

@media (min-width: 1111px){

#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 90%;
			z-index: 2;
			font-size: 10px;
}
}

@media (min-width: 1200px){

#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 60%;
			z-index: 2;
			font-size: 12px;
}
}


@media (min-width: 1300px){

#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 125%;
			z-index: 2;
			font-size: 12px;
}
}

@media (min-width: 1600px){

#a_propos
{
			
			position:absolute;
			right: 17%;
			left:17%;
			bottom:5px;
			top: 115%; 
			z-index:2;
			font-size: 12px;
}
}