/*--------------------------------------------------------------------------------------------------
* CSS Fatix - Responsive design
* Dernière Modifs 31/01/2013
*
* Copyright 2013, Matthieu LIGIER
--------------------------------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------------------------------
   CSS Reset
--------------------------------------------------------------------------------------------------*/
   html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,
   dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,
   time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}


/*--------------------------------------------------------------------------------------------------
   HTML5 display-role reset for older browsers
--------------------------------------------------------------------------------------------------*/
   article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
   body{line-height:1;}
   li{display:block;}
   ol,ul{list-style:none;}
   blockquote,q{quotes:none;}
   blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
   table{border-collapse:collapse;border-spacing:0;}
   hr{background:none;border:none;height:1px;margin:0 auto;padding:0;}
   /* Always force a scrollbar to prevent content shifting */
   html{overflow-y:scroll;}



/*--------------------------------------------------------------------------------------------------
   Style site internet écran suppérieur à 1200 pixels
--------------------------------------------------------------------------------------------------*/


html, body 			{background: #000000;-webkit-font-smoothing: antialiased;}
body				{letter-spacing: 0px;font-family:"Lato", "Verdana", "Arial", "sans-serif";font-size: 14px;line-height: 20px;color: #FFFFFF;}
.full				{width: 100%;}
.extralarge			{width: 90%;}
.large				{width: 70%;}
.medium				{width: 50%;}
.small				{width: 30%;}
.tiny				{width: 10%;}
a 					{color: #FFF;text-decoration: none;}
a:hover				{color:#F00;}
.clear 				{clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}

.container{
	width: 80%;
	margin: 0px auto;
	padding: 0px;
	
}

#accueil{
	height: auto;
	width: 100%;
	text-align: center;
}

#accueil h1{
	display: none;
}

#accueil img{
	margin-top: 15%;
	width: 60%;
}

.pepperoni{
	width: 50%;
	float: left;
	text-align: center;
	margin: 80px -100px 0px 0px;
	position: relative;
}

.pepperoni img{
	width: 100%;
	max-width: 425px;
	margin-left: 40px;
}

.pepperoni p{
	position: absolute;
	top: 58%;
	width: 100%;
	color: #FFF;
	font-size: 22px;
}

.incline-left{
    transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -khtml-transform: rotate(20deg);
}

.incline-right{
    transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -khtml-transform: rotate(-20deg);
}

h1{
	font-size: 36px;
	margin: 50px 0px 50px 0px;
	border-bottom: 2px solid #F00;
	line-height: 1.5;
}

.contenu{
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: 40px;
	display: block;
}

.lien-accueil{
	width: 100%;
	text-align: center;
	display: block;
	color: #FFF;
	margin-bottom: 75px;
	font-size: 22px;
	font-weight: bold;
	transition:color .35s ease-in-out;
	-moz-transition:color .35s ease-in-out;
    -webkit-transition:color .35s ease-in-out;
    -o-transition:color .35s ease-in-out;
    -ms-transition:color .35s ease-in-out;
}

.lien-accueil:hover{
	color: #F00;
}

.album{
	float: left;
	margin: 15px;
}

.titre-album{
	text-align: center;
	font-size: 16px;
}

.nbphoto{
	text-align: center;
	font-style: italic;
	font-size: 14px;
}

.photo-album{
	float: left;
	margin: 0px 40px 40px 0px;
}

/*--------------------------------------------------------------------------------------------------
   Style site internet écran inferieur ou égal à 1250 pixels
--------------------------------------------------------------------------------------------------*/

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

	.pepperoni img {width: 80%;}
	.pepperoni p {font-size: 18px;}

}



/*--------------------------------------------------------------------------------------------------
   Style pour les tablette en mode portrait
--------------------------------------------------------------------------------------------------*/

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

	.pepperoni p {font-size: 14px;top: 55%;}

}



/*--------------------------------------------------------------------------------------------------
   Styles pour les mobiles en mode paysage
--------------------------------------------------------------------------------------------------*/

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

	.pepperoni {width: 100%;margin: 40px 0px 0px 0px;}
	.pepperoni p {font-size: 18px;}
	.contenu {font-size: 16px;line-height: 1.5;}
	h1 {font-size: 24px;margin: 50px 0px 40px 0px;}


}



/*--------------------------------------------------------------------------------------------------
   Styles pour les mobiles en mode portrait
--------------------------------------------------------------------------------------------------*/

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

	.pepperoni p {font-size: 18px;}

}



/*--------------------------------------------------------------------------------------------------
   Styles pour les impressions
--------------------------------------------------------------------------------------------------*/

@media print {
 	


}



/*--------------------------------------------------------------------------------------------------
   Styles pour les sélections
--------------------------------------------------------------------------------------------------*/

::selection {
	color:#333;
	background:#CCC;
}

::-webkit-selection {
	color:#333;
	background:#CCC;
}

::-moz-selection {
	color:#333;
	background:#CCC;
}