@font-face { /* Définition d'une nouvelle police nommée quigley */
    font-family: 'underwood';
    src: url('polices/underwood.eot');
    src: local('x'),
	     url('polices/underwood.woff') format('woff'),
         url('polices/underwood.ttf') format('truetype'),
         url('polices/underwood.svg#underwood') format('svg');
}

@font-face { /* Définition d'une nouvelle police nommée quigley */
    font-family: 'lobstertwo';
    src: url('polices/lobstertwo.eot');
    src: local('x'),
         url('polices/lobstertwo.woff') format('woff'),
         url('polices/lobstertwo.ttf') format('truetype'),
         url('polices/lobstertwo.svg#lobstertwo') format('svg');
}

body
{
	background: #000000;
	width:100%;
	height:100%;
	margin:auto;
}

.entete 
{
    position:absolute;
	width:60%;
	height:auto;
    overflow:hidden;
	left:22%;
}
.topentete
{
    position:absolute;
	top:0px;
    transition: top 0.7s;
}
.entete:hover .topentete
{
    top:-90px;
}

.messageg
{
	position:absolute;
	top:0%;
	left:2%;
	font-family: 'underwood', Arial, serif;
	font-size: 90%;
	text-align:left;
	color:#ffffff;
}

.messaged
{
	position:absolute;
	top:0%;
	right:2%;
	font-family: 'underwood', Arial, serif;
	font-size: 90%;
	text-align:right;
	color:#ffffff;
}

.apropos
{
    position:absolute;
	width: 16%;
    overflow:hidden;
	display:inline-block;
	z-index:8;
	top:21%;
	left:2%;
	/*text-indent:15px;*/
}
.topapropos 
{
    position:absolute;
	left:0px;
	transition: transform 1s;
}
.apropos:hover .topapropos
{
	transform:  translate(210px,-200px) rotate(360deg);
	-moz-transform: translate(210px,-200px) rotate(360deg) ;
	-ms-transform: translate(210px,-200px) rotate(360deg) ;
	-webkit-transform: translate(210px,-200px) rotate(360deg) ;
}

.compo
{
    position:absolute;
	width: 16%;
    overflow:hidden;
	display:inline-block;
	z-index:7;
	top:48%;
	left: 9%;
}
.topcompo
{
    position:absolute;
    left:0px;
    transition: transform 1s;
}
.compo:hover .topcompo 
{
	transform:  translate(-250px,0px) rotate(-360deg);
	-moz-transform: translate(-250px,0px) rotate(-360deg) ;
	-ms-transform: translate(-250px,0px) rotate(-360deg) ;
	-webkit-transform: translate(-250px,0px) rotate(-360deg) ;
}

.photo
{
    position:absolute;
	width: 16%;
    overflow:hidden;
	display:inline-block;
	z-index:6;
	top:33%;
	left:23%;
}
.topphoto
{
    position:absolute;
	left:0px;
    transition: transform 1s;
}
.photo:hover .topphoto 
{
	transform:  translate(210px,200px) rotate(360deg);
	-moz-transform: translate(210px,200px) rotate(360deg) ;
	-ms-transform: translate(210px,200px) rotate(360deg) ;
	-webkit-transform: translate(210px,200px) rotate(360deg) ;
}

.peint
{
    position:absolute;
	width: 16%;
    overflow:hidden;
	display:inline-block;
	z-index:5;
	top:20%;
	left:38%;
}
.toppeint
{
    position:absolute;
    left:0px;
    transition: transform 1s;
}
.peint:hover .toppeint 
{
	transform:  translate(-230px,-200px) rotate(360deg);
	-moz-transform: translate(-230px,-200px) rotate(360deg) ;
	-ms-transform: translate(-230px,-200px) rotate(360deg) ;
	-webkit-transform: translate(-230px,-200px) rotate(360deg) ;
}

.graph
{
    position:absolute;
	width: 16%;
    overflow:hidden;
	display:inline-block;
	z-index:4;
	top:48%;
	left:50%;
}
.topgraph
{
    position:absolute;
	left:0px;
    transition: transform 1s;
}
.graph:hover .topgraph 
{
	transform:  translate(210px,270px) rotate(-360deg);
	-moz-transform: translate(210px,270px) rotate(-360deg) ;
	-ms-transform: translate(210px,270px) rotate(-360deg) ;
	-webkit-transform: translate(210px,270px) rotate(-360deg) ;
}
	
.diaporama
{
    position:absolute;
	width: 16%;
    overflow:hidden;
	display:inline-block;
	z-index:3;
	top:15%;
	left:60%;
}
.topdiaporama
{
    position:absolute;
	left:0px;
    transition: transform 1s;
}
.diaporama:hover .topdiaporama 
{
    transform:  translate(0px,-220px) rotate(360deg);
	-moz-transform: translate(0px,-220px) rotate(360deg) ;
	-ms-transform: translate(0px,-220px) rotate(360deg) ;
	-webkit-transform: translate(0px,-220px) rotate(360deg) ;
}

.actu
{
    position:absolute;
	width: 16%;
    overflow:hidden;
	display:inline-block;
	z-index:2;
	top:48%;
	left:70%;
}
.topactu
{
    position:absolute;
	left:0px;
    transition: transform 1s;
}
.actu:hover .topactu 
{
    transform:  translate(210px,0px) rotate(360deg);
	-moz-transform: translate(210px,0px) rotate(360deg) ;
	-ms-transform: translate(210px,0px) rotate(360deg) ;
	-webkit-transform: translate(210px,0px) rotate(360deg) ;
}
	
.info
{
    position:absolute;
	width: 20%;
    overflow:hidden;
	display:inline-block;
	z-index:1;
	top:25%;
	left:80%;
}
.topinfo
{
    position:absolute;
	left:0px;
    transition: transform 1s;
}
.info:hover .topinfo
{
    transform:  translate(300px,220px) rotate(-360deg);
	-moz-transform: translate(300px,220px) rotate(-360deg) ;
	-ms-transform: translate(300px,220px) rotate(-360deg) ;
	-webkit-transform: translate(300px,220px) rotate(-360deg) ;
}

.pied
{
	position:absolute;
	width:40%;
	height:auto;
	left:31%;
	bottom:0%;
}