/*******************************************************************/
/*==================== Importation des polices ====================*/
@font-face
{
	font-family : 'Sarina';
	src : url('fonts/Sarina.ttf');
}

@font-face
{
	font-family : 'ArchitectsDaughter';
	src : url('fonts/ArchitectsDaughter.ttf');
}
/*==================== Fin de l'importation des polices ====================*/
/****************************************************************************/

/*==================== Corp du document ====================*/
body
{
	margin : 0;
	padding : 0;
	min-width : 800px;
	min-height : 500px;
	width : 100%;
	height : 100%;
	font-weight : 400;
	overflow-y : hidden;
	overflow-x : hidden;
	background-color : #d0d0d0;
	position : absolute;
	transform-style : preserve-3d;
	-webkit-transform-style : preserve-3d;
	-moz-transform-style : preserve-3d;
	-o-transform-style : preserve-3d;
	-ms-transform-style : preserve-3d;
	perspective : 500px;
	-webkit-perspective : 500px;
	-moz-perspective : 500px;
	-o-perspective : 500px;
	-ms-perspective : 500px;
	perspective-origin : 50% 50%;
	-webkit-perspective-origin : 50% 50%;
	-moz-perspective-origin : 50% 50%;
	-o-perspective-origin : 50% 50%;
	-ms-perspective-origin : 50% 50%;
}
.ie7 body
{
	overflow : hidden;
}
/*==================== Fin du corp du document ====================*/
/*******************************************************************/
/*==================== Header ====================*/
header
{
	background-color : transparent;
	text-align : center;
	margin : 0px;
	padding : 0px;
}
/*==================== Fin du Header ====================*/
/*********************************************************/
/*==================== H1 ====================*/
h1
{
	width : auto;
	display : inline-block;
	left : 0;
	text-shadow : 5px 3px 5px #111, 2px 2px 0px #fff;
	color : rgba(200, 200, 200, 0.3);
	margin : 0px;
	padding : 50px;
	font-size : 4em;
	font-family : Sarina;
	font-style : normal;/*italique*/
	font-weight : normal;/*gras*/
	text-decoration : none;/*effet*/
	text-align : left;
}
/*==================== Fin du H1 ====================*/
/***********************************************************/
/*==================== H2 ====================*/
h2
{
	width : auto;
	display : inline-block;
	left : 0;
	margin : 10px 0px 10px 50px;
	padding : 0px;
	color : #b64949;
	font-size : 1.5em;
	font-family : ArchitectsDaughter, Arial, Georgia;
	font-style : normal;/*italique*/
	font-weight : normal;/*gras*/
	text-decoration : none;/*effet*/
	margin : 0px;
	padding : 0px;
}
h2 a img
{
	height : 30px;
	position : relative;
	top : 12px;
}
/*==================== Fin du H2 ====================*/
/***********************************************************/
/*==================== H3 ====================*/
h3
{
	color : #fff;
	text-shadow : black 2px 2px 1px;
	font-size : 2em;
	font-family : Arial, Georgia;
	font-style : normal;/*italique*/
	font-weight : bold;/*gras*/
	text-decoration : none;/*effet*/
}
/*==================== Fin du H3 ====================*/
/***********************************************************/
/*==================== Logo navigation ====================*/
.menu
{
	margin : auto;
	padding : 0px;
	border : none;
	outline : none;
	position : absolute;
	top : 50px;
	right : 50px;
	background-color : transparent;
	cursor : pointer;
	z-index : 10;
}

.menu .bar
{
	width: 27px;
	margin: 3px;
	height: 3px;
	background-color: #ff0;
}
/*==================== Fin du logo navigation ====================*/
/******************************************************************/
/*==================== Barre de navigation ====================*/
nav
{
	position : absolute;
	top : 100px;
	left : 0;
	width : 100%;
	z-index : -1;
	transition : all 0.5s ease-in-out;
	-webkit-transition : all 0.5s ease-in-out;
	-moz-transition : all 0.5s ease-in-out;
	-o-transition : all 0.5s ease-in-out;
	-ms-transition : all 0.5s ease-in-out;
}

nav ul
{
	list-style-type : none;
	margin : 0;
	padding : 0;
	text-align : center;
}

nav ul li
{
	display : inline-block;
}

nav ul li:nth-child(1) > button
{
	transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.1s;
	-webkit-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.1s;
	-moz-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.1s;
	-o-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.1s;
	-ms-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.1s;
}

nav ul li:nth-child(2) > button
{
	transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.2s;
	-webkit-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.2s;
	-moz-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.2s;
	-o-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.2s;
	-ms-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.2s;
}

nav ul li:nth-child(3) > button
{
	transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.3s;
	-webkit-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.3s;
	-moz-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.3s;
	-o-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.3s;
	-ms-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.3s;
}

nav ul li:nth-child(4) > button
{
	transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.4s;
	-webkit-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.4s;
	-moz-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.4s;
	-o-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.4s;
	-ms-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.4s;
}

nav ul li:nth-child(5) > button
{
	transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.5s;
	-webkit-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.5s;
	-moz-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.5s;
	-o-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.5s;
	-ms-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.5s;
}

nav ul li:nth-child(6) > button
{
	transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.6s;
	-webkit-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.6s;
	-moz-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.6s;
	-o-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.6s;
	-ms-transition : all 0.2s cubic-bezier(0.5, 1, 0.5, 1.5) 0.6s;
}

nav ul button
{
	margin : 3px;
	padding : 10px;
	font-size : 20px;
	outline : none;
	border : none;
	color : white;
	cursor : pointer;
	position : relative;
	background-color : #222;
	transform : translateY(-150px);
	-webkit-transform : translateY(-150px);
	-moz-transform : translateY(-150px);
	-o-transform : translateY(-150px);
	-ms-transform : translateY(-150px);
	box-shadow : 0 5px 10px 2px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow : 0 5px 10px 2px rgba(0, 0, 0, 0.6);
	-moz-box-shadow : 0 5px 10px 2px rgba(0, 0, 0, 0.6);
	-o-box-shadow : 0 5px 10px 2px rgba(0, 0, 0, 0.6);
	-ms-box-shadow : 0 5px 10px 2px rgba(0, 0, 0, 0.6);
}

nav ul button::after
{
	height : 3px;
	width : 0;
	left : 50%;
	bottom : 0;
	position : absolute;
	content : " ";
	background-color : #f08;
	transition : all 0.2s ease-in-out;
	-webkit-transition : all 0.2s ease-in-out;
	-moz-transition : all 0.2s ease-in-out;
	-o-transition : all 0.2s ease-in-out;
	-ms-transition : all 0.2s ease-in-out;
}

nav ul button:hover::after
{
	width : 100%;
	left : 0;
}
/*==================== Fin de la barre de navigation ====================*/
/*************************************************************************/
/*====================  ====================*/
.nav__move
{
	z-index : 10;
}

.nav__move button
{
	transform : translateY(0px);
	-webkit-transform : translateY(0px);
	-moz-transform : translateY(0px);
	-o-transform : translateY(0px);
	-ms-transform : translateY(0px);
}
/* Document sans la barre de navigation (qui pivote) */
.body
{
	position : absolute;
	width : 100%;
	height : 100%;
	overflow : auto;
	transform-origin : 50% 50%;
	-webkit-transform-origin : 50% 50%;
	-moz-transform-origin : 50% 50%;
	-o-transform-origin : 50% 50%;
	-ms-transform-origin : 50% 50%;
	transition : all 0.8s ease-in-out;
	-webkit-transition : all 0.8s ease-in-out;
	-moz-transition : all 0.8s ease-in-out;
	-o-transition : all 0.8s ease-in-out;
	-ms-transition : all 0.8s ease-in-out;
	box-shadow : 0 0 30px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow : 0 0 30px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow : 0 0 30px 10px rgba(0, 0, 0, 0.5);
	-o-box-shadow : 0 0 30px 10px rgba(0, 0, 0, 0.5);
	-ms-box-shadow : 0 0 30px 10px rgba(0, 0, 0, 0.5);
}

.body__move
{
	transform : scale(0.8) translateY(50px) rotateX(10deg);
	-webkit-transform : scale(0.8) translateY(50px) rotateX(10deg);
	-moz-transform : scale(0.8) translateY(50px) rotateX(10deg);
	-o-transform : scale(0.8) translateY(50px) rotateX(10deg);
	-ms-transform : scale(0.8) translateY(50px) rotateX(10deg);
}

section
{
	visibility : visible;
	position : absolute;
	transition : all 0.3s ease-in-out 0.3s;
	-webkit-transition : all 0.3s ease-in-out 0.3s;
	-moz-transition : all 0.3s ease-in-out 0.3s;
	-o-transition : all 0.3s ease-in-out 0.3s;
	-ms-transition : all 0.3s ease-in-out 0.3s;
	margin : 0px;
	padding : 0px;
}

 #accueil:first-letter
 {
	 font-weight : bold;
	 font-size : 18px;
	 display : inline-block;
	 padding-left : 30px;
}

#accueil
{
	background-color : rgba(0, 80, 255, .05);
	font-family : ArchitectsDaughter, Arial, Georgia;
	overflow-y : auto;
	position : absolute;
	top : 20%;
	left : 50px;
	right : 50px;
	padding-right : 50px;
	bottom : 110px;
	color : #d3d3d3;
	font-size : 1.1em;
	text-align : justify;
}

/******************************************************************/
/*==================== Pied de page ====================*/
footer
{
	width : 100%;
	position : fixed;
	left : 0px;
	right : 0px;
	bottom : 60px;
	text-align : right;
	margin : 0;
	padding : 0;
}
footer #mail
{
	text-align : right;
	position : relative;
	right : 50px;
	width : 100%;
	height : 100%;
	margin : 2px;
	padding : 0;
	color : #c1e0ff;
	font-size : 1.7em;
}

footer .author{
	text-align : center;
	position : relative;
	width : 100%;
	height : 100%;
	margin : 2px;
	top : 60px;
	padding : 0;
	color : #c1e0ff;
	font-size : 1em;
}

footer .author a{
	text-decoration : none;
	color : #c1e0ff;
	font-size : 1em;
}

footer .author a:hover{
	color : #e0e0ff;
}

/*==================== Fin de Pied de page ====================*/
/***************************************************************/
/*==================== Réseaux Sociaux ====================*/
.radial-menu
{
	bottom : 50px;
	left : 50px;
	position : fixed;
	display : block;
	width : 50px;
	height : 50px;
	background-color : transparent;
	border-radius : 50%;
	z-index : 20;
	-webkit-box-shadow : 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow : 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow : 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.menu-facebook
{
	width : 60%;
	height : 60%;
	background-color : transparent;
	position : absolute;
	color : #c1e0ff;
	text-align : center;
	line-height : 53px;
    top : 15%;
	left : 25%;
	z-index : 19;
	cursor : pointer;
	transition : all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.menu-instagram
{
	width : 60%;
	height : 60%;
	background-color : transparent;
	position : absolute;
	color : #c1e0ff;
	text-align : center;
	line-height : 53px;
    top : 15%;
	left : 25%;
	z-index : 19;
	cursor : pointer;
	transition : all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
}
.menu-twitter
{
	width : 60%;
	height : 60%;
	background-color : transparent;
	position : absolute;
	color : #c1e0ff;
	text-align : center;
	line-height : 53px;
    top : 15%;
	left : 25%;
	z-index : 19;
	cursor : pointer;
	transition : all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;
}
.menu-contact
{
	width : 60%;
	height : 60%;
	background-color : transparent;
	position : absolute;
	color : #c1e0ff;
	text-align : center;
	line-height : 53px;
	top : 15%;
	left : 25%;
	z-index : 19;
	cursor : default;
	transition : all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;
}
.mask
{
	bottom : 50px;
	left : 50px;
	width : 50px;
	height : 50px;
	background : #3b89ff;
	border-radius : 50%;
	position : fixed;
	z-index : 20;
	text-align : center;
	cursor : pointer;
}
.mask i
{
	z-index : 21;
	color : #c1e0ff;
	line-height : 50px;
}
#tel
{
	display : none;
	margin-left : 20px;
	cursor : default;
	font-size : .7em;
}
/*==================== Fin de Réseaux Sociaux ====================*/
/******************************************************************/
/*==================== Page Photos ====================*/
#photos
{
	margin : 0;
	padding : 0;
	width : 100%;
	height : 100%;
	overflow : hidden;
	background : -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background-position : 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
	-webkit-background-origin : padding-box;
	background-origin : padding-box;
	-webkit-background-size : 20px 20px;
	background-size : 20px 20px;
}

#photos header
{
	position : absolute;
	top : 5%;
	width : 100%;
	text-align : center;
	z-index : 10000;
}

#photos header h1
{
	margin : 0;
	padding : 0;
}

#photos header .menu
{
	margin : auto;
	padding : 0px;
	border : none;
	outline : none;
	position : fixed;
	top : 50px;
	right : 50px;
	background-color : transparent;
	cursor : pointer;
	z-index : 10;
	
}

#photos ul
{
	position : absolute;
	margin : 0;
	padding : 0;
	width : 100%;
	height : 100%;
	list-style-type : none;
}

#photos ul li img
{
	position : absolute;
	border : 2px solid #988677;
}

#photos footer
{
	position : absolute;
	bottom : 0;
	margin : 0;
	padding : 0;
	width : 100%;
	z-index : 10000;
	border-top : 1px solid grey;
	background : -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background-position : 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
	-webkit-background-origin : padding-box;
	background-origin : padding-box;
	-webkit-background-size : 20px 20px;
	background-size : 20px 20px;
}

#photos footer #titre
{
	margin : 0;
	padding : 0;
	text-align : center;
	color: #d3d3d3;
	font-family : ArchitectsDaughter, Arial, Georgia;
	font-size : 1.9em;
}

#photos footer #paragraphe
{
	margin : 0;
	margin-top : 5px;
	margin-bottom : 10px;
	padding : 0;
	text-align : center;
	color : #d3d3d3;
	font-family : ArchitectsDaughter, Arial, Georgia;
	font-size : 1.15em;
}
/*==================== Fin de Page Photos ====================*/
/******************************************************************/
/*==================== Page Musique ====================*/
#extraits
{
	overflow : hidden;
	-webkit-box-sizing : content-box;
	-moz-box-sizing : content-box;
	box-sizing : content-box;
	border : none;
	background : -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background-position : 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
	-webkit-background-origin : padding-box;
	background-origin : padding-box;
	-webkit-background-size : 20px 20px;
	background-size : 20px 20px;
}

#canvas
{
	margin : 0;
	padding : 0;
	width : 100%;
	height : 650%;
	background-color : transparent;
}

.rotating-slider ul.slides li:nth-of-type(1)
{
	background : url('../../medias/photos/musique/1.jpg');
}

.rotating-slider ul.slides li:nth-of-type(2)
{
	background : url('../../medias/photos/musique/2.jpg');
}

.rotating-slider ul.slides li:nth-of-type(3)
{
	background : url('../../medias/photos/musique/3.jpg');
}

.rotating-slider ul.slides li:nth-of-type(4)
{
	background : url('../../medias/photos/musique/4.jpg');
}

.rotating-slider ul.slides li:nth-of-type(5)
{
	background : url('../../medias/photos/musique/5.jpg');
}

.rotating-slider ul.slides li:nth-of-type(6)
{
	background : url('../../medias/photos/musique/6.jpg');
}

.rotating-slider ul.slides li .inner
{
	box-sizing : border-box;
	padding : 2em;
	height : 100%;
	width : 100%;
}

.rotating-slider
{
	margin : 5em auto;
    height : 360px;
    position : relative;
    width : 480px;
}

.rotating-slider ul.direction-controls
{
    list-style : none;
    margin : 0;
    padding : 0;
}

.rotating-slider ul.direction-controls li.left-arrow
{
	position : absolute;
	top : 50%;
	right : 100%;
	transform : translateY(-50%);
}

.rotating-slider ul.direction-controls li.play-arrow
{
	position : absolute;
	top : 50%;
	left : 45%;
	transform : translateY(-50%);
}

.rotating-slider ul.direction-controls li.right-arrow
{
	position : absolute;
	top : 50%;
	left : 100%;
	transform : translateY(-50%);
}

.rotating-slider ul.direction-controls li.time
{
	margin : 0;
	padding : 0;
	width : 100%;
	height : auto;
	position : absolute;
	top : -25%;
	color : rgba(208,208,208,1);
	text-shadow : -2px -2px 0 rgba(140,140,140,0.6);
	font-size : 3em;
	font-family : Sarina;
	font-style : normal;
	font-weight : normal;
	text-decoration : none;
}

.rotating-slider ul.direction-controls li #currenttime
{
	margin : 0;
	padding : 50px;
	position : absolute;
	top : 0;
	left : -100%;
}

.rotating-slider ul.direction-controls li #globaltime
{
	margin : 0;
	padding : 50px;
	position : absolute;
	top : 0;
	right : -100%;
}

.canvaBox
{
	background-color : #161616;
	position : absolute;
	height : 1%;
	width : 60%;
	top : 70%;
	left : 20%;
	border : 2px inset black;
	margin : 0;
	padding : 0;
}

.rotating-slider ul.direction-controls li img
{
    background : rgba(0,0,0,0.2);
    border : none;
    cursor : pointer;
    width : 50px;
    transition : background 0.25s;
}

.rotating-slider ul.direction-controls li img:hover
{
    background : rgba(0,0,0,0.6);
}

.rotating-slider ul.slides
{
    border-radius : 50%;
    height : 100%;
    margin : 0;
    overflow : hidden;
    padding : 0;
    position : relative;
	top : 0;
	left : 50%;
    transform : translateX(-50%) rotate(0);
    transform-origin : center center;
    width : 100%;
}

.rotating-slider ul.slides li
{
    background-color : #ecf0f1;
    background-position : center;
    background-size : cover;
    display : block;
    list-style : none;
    position : absolute;
    top : 0;
    left : 50%;
    text-align : center;
    transform-origin : bottom center;
    width : 100%;
}
/*==================== Fin de Page Musique ====================*/
/******************************************************************/
/*==================== Pages Bio & Références ====================*/
#Main_bio, #Main_References
{
	overflow : hidden;
}

#bio, #references
{
	overflow-y : auto;
	position : absolute;
	top : 20%;
	left : 50px;
	right : 0;
	padding-right : 50px;
	bottom : 50px;
	color : #d0d0d0;
	font-family : ArchitectsDaughter, Arial, Georgia;
	font-size : 1.1em;
	text-align : justify;
}

#references h2
{
	color : #b64949;
	font-family : ArchitectsDaughter, Arial, Georgia;
	font-style : normal;/*italique*/
	font-weight : bold;/*gras*/
	text-decoration : none;/*effet*/
	font-size : 1.4em;
}

.refocus header
{
	position : absolute;
	width : 100%;
	text-align : center;
	z-index : 10000;
}

.refocus
{
	margin : 0;
	padding : 0;
	width : 100%;
	height : 100%;
}

.refocus .refocus-img,
.refocus .refocus-img-bg
{
	position : absolute;
	margin-left :-15px;
	margin-top : -15px;
	width : 107%;
	height : 130%;
	background-size : cover;
}

.refocus .refocus-img img
{
	display : none;
	width : 100%;
	height : auto;
}

.refocus .refocus-text-container
{
	position : absolute;
	top : 0;
	width : 100%;
}

.refocus .refocus-text-container
{
 	height : 100%;
}

.refocus .refocus-text
{
	display : block;
}

.refocus .focus-in,
.refocus .focus-out
{
	transition : filter 3s ease 1s;
	-webkit-transition : -webkit-filter 3s ease 0.5s;
}

.refocus .focus-out,
.refocus .refocus-img-bg
{
	filter : blur(8px) opacity(30%);
	-webkit-filter : blur(8px) grayscale(30%);
}

.refocus .focus-in
{
	filter : blur(0);
	-webkit-filter : blur(0);
}

.refocus .focus-in.refocus-img-bg,
.refocus .focus-out.refocus-img-bg
{
	transition : all 0s ease 0s;
}
/*==================== Fin des Pages Bio & Références ====================*/
/******************************************************************/
/*==================== Page Partitions ====================*/
#partitions
{
	min-height : 800px;
	overflow : hidden;
	-webkit-box-sizing : content-box;
	-moz-box-sizing : content-box;
	box-sizing : content-box;
	border : none;
	background : -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background : linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
	background-position : 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
	-webkit-background-origin : padding-box;
	background-origin : padding-box;
	-webkit-background-size : 20px 20px;
	background-size : 20px 20px;
}

.list
{
	position : absolute;
	margin : 0;
	padding : 0;		
	top : 20%;
	left : 0;
	right : 0;
	width : 50%;
}

.affiche
{
	position : absolute;
	margin : 0;
	padding : 0;
	top : 20%;
	height : 100%;
	width : 50%;
	right : 0;
}

.affiche img
{
	position : relative;
	left : 20%;
	margin : 0;
	padding : 0;
	width : 60%;
	height : auto;
}

#partitions ul
{
	list-style-type : none;
	position : relative;
	top : 25px;
	left : 50px;
	margin : 0;
	padding : 0;
	height : auto;
	width : auto;
}

#partitions ul li
{
	position : relative;
	display : block;
	margin : 0;
	padding : 0;
	height : 30px;
	margin-top : 20px;
	font-size : 1.5em;
	border-bottom : 2px solid #3f3fc0;
	border-radius : 0px 0px 10px 0px;
}

.name
{
	font-family : ArchitectsDaughter, Arial, Georgia;
	color : #d3d3d3;
	cursor : pointer;
	display : inline-block;
	position : absolute;
	left : 0;
	width : 100%;
	text-align : left;
	margin : 0;
}

#partitions ul li img
{
	visibility : hidden;
	width : 10px;
}

#partitions ul li a
{
	display : inline-block;
	position : absolute;
	right : 0;
	top : -2px;
	width : auto;
	margin : 0;
	text-decoration : none;
	padding-left : 10px;
	padding-right : 10px;
	text-align : right;
	border-top : 2px solid #3f3fc0;	
	border-right : 2px solid #3f3fc0;
	border-bottom : 2px solid #3f3fc0;
	border-radius : 10px 0px 10px 0px;
	color : #d3d3d3;
}

#li1
{
	border-bottom : 2px solid #c03f3f;
}

#a1
{
	border-top : 2px solid #c03f3f;	
	border-right : 2px solid #c03f3f;
	border-bottom : 2px solid #c03f3f;
}

#partitions ul li a:hover
{
	color : #ffff00;
}

#partitions footer
{
	position : absolute;
	margin : 0;
	left : 5%;
	color : #d3d3d3;
	height : auto;
	width : 40%;
	font-size : 1em;
	text-align : center;
	font-family : ArchitectsDaughter, Arial, Georgia;
	padding : 5px 50px 5px 50px;
	background-color : rgba(63, 63, 192, .15);
	text-align : justify;
	margin-bottom : 25px;
}

#partitions footer img
{
	position : relative;
	height : 30px;
	top : 12px;
	left : 50px;
}
/*==================== Fin de la page Partitions ====================*/
/******************************************************************/