/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 0.9em;
    line-height: 1.2;
	background-color:#A2A2A2;
}



/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* Chargement des polices de caractère*/

			
			/*paragraphe*/
			p {
				color: #000000;
				font-family: arial;
				font-weight: regular;
				font-size: 1em;
				line-height: 1.5em;
				padding-left : 8%;
				padding-right : 9%;
			}
			/*Sous Titre*/
			
		    h2 {
				color: #000000;
				font-family: arial;
				font-weight: bold;
				font-size: 1.5em;
				line-height: 1.25em;
				padding-left : 8%;
				padding-right : 8%;
			}	
			
			
			/*Citations*/
			h3 {
				color: #000000;
				font-family: arial;
				font-weight: regular;
				font-style: italic;
				font-size: 1.1em;
				line-height: auto;
				padding-right:12%;
				padding-left:12%;
				text-align:center;
				
			}
			
			h4 {color: #000000;
				font-family: arial;
				font-style: italic;
				line-height: auto;
				padding-right:12%;
				padding-left:12%;
				text-align:center;}
				
			/*Credit citation*/
			.credit {
				font-family: arial;
				font-weight: regular;
				font-style: normal; 
				font-weight: 100; 
				font-size: 0.80em;}
			
			/*Crédits finaux*/
			h6 {
				color: #fff;
				font-family: arial;
				font-weight: normal;
				font-size: 1.1em;
				line-height: auto;
			}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

#largeurpage {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#fff;}



/* Slide Video */

#video {height:auto;
		padding-left:8%;
		padding-right:8%;}

/* Slide intro */
#slide1 {height: auto; 
		background-color: #fff;
		padding-bottom:30px;
		padding-top: 20px;
		text-align:justify;
		}
#slide1	img {width:100%;
padding-bottom:30px;
padding-top:30px;}

#slide1 a {color:#e29500;}	


/* Slide 14 */
#slide-14 {
		height: auto; 
		background-color:#000; 
		color:#fff;
		padding-bottom:30px;
		padding-top: 20px;
		padding-left : 10%;
		padding-right : 10%;
		text-align:justify;
		}
#slide-14 a {color:#FEC36C;}	

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}



/* CSS du Menu idem Wordpress */


#menulogo{
	display: block; 
	position: fixed; 
	top: 0px !important; 
	width: 100%; 
	height: auto !important;
background-color: #efefef;
z-index: 1;
text-align:center;
    margin-left: -8px;
}
	
	
#menulogoimage {border: 0px; height:50px; margin-top: 0px;}
	
#menulogo a{
	font-size: 2Opx;
}




/*Le bandeau noir sur les images*/ 
.bandeauimage1 {
position:relative; overflow:hidden;
} 
.bandeauimage1 .textbox {
width:100%; 
height:15%; 
position:absolute; 
top:85%; 
left:0; 
margin-top:400px; 
background-color: rgba(0,0,0,0.75); 
-webkit-box-shadow: inset rgba(255,255,255,.75); 
box-shadow: inset rgba(255,255,255,.75);
} 
.bandeauimage1:hover .textbox {
margin-top:0;
} 
.text {
margin-top: 8px;
text-align:center;
color: #fff;
font-size:0.7em
} 
.textbox {
-webkit-transition: all 0.4s ease; 
transition: all 0.4s ease;
}
/*Le bandeau noir sur les images*/ 
.bandeauimagedroite {
position:relative; overflow:hidden;
} 
.bandeauimagedroite .textbox {
width:100%; 
height:15%; 
position:absolute; 
top:85%; 
left:0; 
margin-top:400px; 
background-color: rgba(0,0,0,0.75); 
-webkit-box-shadow: inset rgba(255,255,255,.75); 
box-shadow: inset rgba(255,255,255,.75);
} 
.bandeauimagedroite:hover .textbox {
margin-top:0;
}


.bandeauimage0 {
position:relative; overflow:hidden;
} 
.bandeauimage0 .textbox0 {
width:100%; 
height:100%;

position:absolute; 
top:0%; 
left:0; 
margin-top: 90%; 
background-color: rgba(0,0,0,0.6); 
-webkit-box-shadow: inset rgba(255,255,255,.6); 
box-shadow: inset rgba(255,255,255,.6);
} 
.bandeauimage0:hover .textbox0 {
margin-top:0;
}

.text0 {
margin-top: 31%;
text-align:center;
color: #fff;
font-size:0.9em
} 
.textbox0 {
-webkit-transition: all 0.9s ease; 
transition: all 0.9s ease;
}

@media (max-width: 640px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

    element1,
    element2 {
        float: none;
        width: auto;
    }
    
    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé */

}

@media (min-width: 640px) {

#largeurpage {
	width:600px;
	margin-left:auto;
	margin-right:auto;
	background-color:#fff;
	}