@charset "utf-8";
/* CSS Document */

* {
	font-family: 'Lato', sans-serif;
	margin:0;
	padding:0;
}
body {
    background-color: #ddd;
    color: #999;
    text-align: center;
}
div#head {
    margin: auto;
    padding: 20px;
}
div#cont {
    background: linear-gradient(225deg, #223158, #0a0f2a);
    margin: 2% auto;
    max-width: 1000px;
    padding: 2%;
    box-shadow: 0 5px 15px -10px #000;
}
div#sous_info {
    margin: 0 auto 5%;
}a {
    color: #a2387b;
}
#logo {
    position: relative;
    width: 100%;
    height: 50vh;
}
#elem01 { position:absolute;
background:url(/img/logo01.png) no-repeat center;
    width: 100%;
    height: 100%;
transform: rotate(180deg);
	opacity: 0;
transition: all 4.5s ease 4000ms;}
#elem02 { position:absolute;
background:url(/img/logo02-ext) no-repeat center;
    width: 100%;
    height: 100%;
transform: rotate(650deg);
	opacity: 0;
transition: all 8.5s ease 3000ms; }
#elem03 { position:absolute;
background:url(/img/logo03-int) no-repeat center;
    width: 100%;
    height: 100%;
transform: rotate(20deg);
	opacity: 0;
transition: all 3.5s ease 1200ms; }


.loaded #elem01 { 
transform: rotate(0deg);
	opacity: 1;
transition: all 4.5s ease 4000ms;}
.loaded #elem02 { 
transform: rotate(0deg);
	opacity: 1;
transition: all 8.5s ease 3000ms; }
.loaded #elem03 { 
transform: rotate(0deg);
	opacity: 1;
transition: all 3.5s ease 1200ms; }

.loaded .isover #elem01 { 
transform: rotate(-25deg);
	opacity: 1;
transition: all 8s ease 500ms;}
.loaded .isover #elem02 { 
transform: rotate(10deg);
	opacity: 1;
transition: all 8s ease 300ms; }
.loaded .isover #elem03 { 
transform: rotate(-10deg);
	opacity: 1;
transition: all 8s ease 200ms; }


#nomlogo {
    position: relative;
    background: url(/img/nom-logo.png) no-repeat center;
    width: 100%;
    height: 250px;
}