body {
	width: 100%;
	font-family: "Hammersmith One", Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

h1 {
	font-family: "Coming Soon", Arial;
	color: #fff;
	font-size: 55px;
	font-weight: normal;
	margin: 10;
	padding: 0;
	
}

h2 {
	font-family: Chewy, Arial;
	color: #fff;
	font-size: 40px;
	font-weight: normal;
	text-align: center;
}

h3 {
	position: relative;
	font-family: Arial;
	font-weight: normal;
	font-size: 16px;
	text-align: center;
}

p {
	margin: 10px;
	padding-bottom: 20px;
}


/***************************** 
	HEADER & NAVIGATION 
******************************/

header {
	position: fixed;
	width: 100%;
	margin-top: 0px;
	background-color: #5f00cc;
	z-index: 10;
}

.header-container {
	position: relative;
	margin: 0 auto;
	height: 80px;
	width: 960px;
}

#logo a {
	float: left;
	line-height: 80px;
	font-family: Lobster, Arial;
	color: #fff;
	font-size: 50px;
	font-weight: bold;
	text-decoration: none;
	outline: none;
}

#nav-princ {
	float: right;
	line-height: 80px;
}

#nav-princ ul {
	display: block;
	list-style: none;
	margin: 0;
}

#nav-princ li {
	float: left;
	padding-left: 30px;
}

#nav-princ li a {
	font-family: Montserrat, Arial;
	font-size: 16px;
	color: #fff;
	opacity: 0.6;
	text-decoration: none;
	outline: none;
	
}

#nav-princ li a:hover {
	color: #fff;
	opacity: 1;
}

#nav-princ li a.active {
	color: #fff;
	opacity: 1;
	border-bottom: 2px solid #fff;
}




/*************************** 
	SECTION ACCUEIL  
***************************/

#accueil {
	position: relative;
	background-color: #00cebe;
	color: #fff;
	height: 500px;
	margin: 0 auto;
	padding: 200px 0;
}

#accueil h1 {
	text-align: center;
}

/******************************
    AUTRES SECTIONS
*******************************/

#content-voyage, #content-twitch{
	position: relative;
	color: #fff;
	height: 500px;
	margin: 0 auto;
	padding: 150px 0 300px 0;
}

#content-moianimal,  #content-passion {
	position: relative;
	color: #333;
	height: 500px;
	margin: 0 auto;
	padding: 150px 0 300px 0;
}

#content-moianimal {background-color: #ffb809;}
#content-passion {background-color: #88d8c0}
#content-voyage {background-color: #cb87ff}
#content-twitch {background-color: #6441a5;}

#content-voyage h3, #content-voyage p {
	color: #333;
	opacity: 1.0 !important;
}



/************************************ 
	CONTENT / CONTENU DES SLIDES 
*************************************/
.content {
	position: relative;
	margin: 0 auto;
	width: 900px;
	padding: 20px 30px;
}	

.content h3 {
	font-family: "Coming Soon", Arial;
	font-size: 30px;
	font-weight: normal;
	text-align: left;
	margin: 40px 0;
}

#content-twitch img { margin-bottom: 20px;}

/******************************
    SECTION - ARTICLE - ASIDE
*******************************/

section > article, section > aside {
	display: inline-block;
	vertical-align: top;
	
}

section > aside {
	position: relative;
	width: 300px;
	padding: 0 10px;
}

section > article {
	width: 500px;
	text-align: justify;
	margin-left: 50px;
}

/*********************************
	PHOTOS ENTRE LES SAISONS
*********************************/

.slide-photo {
	position: relative;
	background-attachment: fixed; 
	height: 450px;
	background-position: 50% 0;
	background-repeat: no-repeat;
	box-shadow: inset 0px 10px 10px rgba(0,0,0,0.3);
}

h1.slide-titre {
	position: absolute;
	bottom: 10px;
	left: 20px;
	display: block;
	font-family: "bangers", helvetica, arial;
	font-size: 48px;
	font-style: normal;
	color: #00afd4;
	text-shadow: 0 2px 0 #000, 0 0 10px #000; 
}

#slide-moianimal h2, #slide-passion h2, #slide-voyage h2, #slide-twitch h2 {
	position: absolute;
	right: 40px;
	top: 200px;
	font-size: 35px;
	background-color: rgba(51,51,51,0.3);
	padding: 15px;
	color: #ff8de0;
	text-align: right;
	
}

#slide-moianimal {
	background: url(../images/slide/tigres.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

#slide-passion {
	background: url(../images/slide/girls-generation.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

#slide-voyage {
	background: url(../images/slide/drapeaux.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

#slide-twitch {
	background: url(../images/slide/twitch-logo.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

/*********************************
	Flèche prochaine diapositive
*********************************/
a.button {
	position: absolute;
	bottom: 0px;
	left: 50%;
	background-image: url(../images/main.png);
	width: 50px;
	height: 45px;
	display: block;
	background-color: rgba(95,0,204,0.3);
	border-radius: 5px 5px 0 0;
	outline: none;
	z-index: 5;
}

a.button:hover {
	cursor: pointer;
	background-color: rgba(95,0,204,0.3);
}


/****************************** 
	RETOUR AU HAUT DE PAGE 
*******************************/

#scroll-up a {
	position: fixed;
	bottom: 10px;
	right:  2%;
	height: 50px;
	width: 50px;
	cursor: pointer;
	background: url(../images/main-haut.png) no-repeat;
	text-indent: -9999px;
	background-color: rgba(95,0,204,0.3);
	border-radius: 10px;
	outline: none;
	opacity: 0.6;
	z-index: 40;
}	

#scroll-up a:hover {
	opacity: 1;
	background-color: rgba(95,0,204,0.7);
}


/******************************** 
	        FOOTER 
*********************************/

#copyright {
	width: 100%;
	background-color: #5f00cc;
	font-family: 'madison', Arial;
	font-size: 32px;
	color: #fff;
	height: 60px;
	text-align: center;
	line-height: 60px;	
}

#copyright a {
	text-decoration: none;
	color: #fff;
	outline: none;
}


/**************************LES CLASSES****************************/

.center {text-align: center;}

.shadow {box-shadow: 0px 10px 10px rgba(0,0,0,0.3);}

/********************font-face**************************/

@font-face {
    font-family: 'madison';
    src: url('../fonts/_font_kpop__pink_memory___apink_by_hakuta2310-d9bizy3--webfont.eot');
    src: url('../fonts/_font_kpop__pink_memory___apink_by_hakuta2310-d9bizy3-.eot?#iefix') format('embedded-opentype'),
         url('../fonts/_font_kpop__pink_memory___apink_by_hakuta2310-d9bizy3-webfont.ttf') format('truetype'),
         url('../fonts/_font_kpop__pink_memory___apink_by_hakuta2310-d9bizy3--webfont.svg#madison') format('svg');
    font-weight: normal;
    font-style: normal;
}