@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

@import url(http://fonts.googleapis.com/css?family=Loved+by+the+King);

html, body {
position: relative;
height: 100%;
background: black;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: -webkit-radial-gradient(at center bottom, #272762, #000000);
background: radial-gradient(at center bottom, #272762, #000000);
}


/* GENERIQUE*/
.wrapper {
position: absolute;
top: 100%;
left: 50%;
width: 80%;
margin-left: -40%;
font: 300 30px/1 'Open Sans Condensed', sans-serif;
text-align: center;
text-transform: none;
color: #fff;
-moz-animation: 68s credits linear ;
-webkit-animation: 68s credits linear ; /* Chrome, Safari, Opera */
animation: 68s credits linear ;
-moz-animation-delay: 3s;
-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
animation-delay:3s;
z-index:200;
}
@keyframes credits {
0% {
top: 100%;
}
100% {
top: -500%;
}
}
a{
text-decoration:none;
color:brown;
display:block;
position:relative;
z-index:600 !important;
}
.text{
text-align:justify;
width:50%;
margin-left:25%;
font-size:2vh;
line-height:2rem; 
text-transform:none;
padding:0 2vh;
color:rgba(255,255,255,1);
}
.text span{
font-family: 'Loved by the King', cursive;
font-weight:300;
font-size:1.7em;
line-height:1.8em;
text-shadow:1px 2px 1px #000;
}
.text.signature {
color:brown;
font-size:.7em;
text-align:right;
}
.movie {
margin-bottom:6vmin;
font-size: 5vmin;
}
.chiffres{
margin-bottom:6vmin;
font-size: 5vmin;
line-height:6vmin;
font-family:'Loved by the King', cursive;
text-align:center;
}
.job {
margin-bottom: 4vmin;
font-size: 2vmin;
}
.name {
margin-bottom: 5vmin;
font-size: 5vmin;
}




/* PROGRAMMES CONTAINERS */
.container{
display:block;
height:950px;
width:100%;
margin:auto auto 5vh;
position:relative;
z-index:0; 
padding:2vh 1vh 0 1vh;
z-index:300;
}

.container:first-child{
background:rgba(255,255,255,0);
repeat:no-repeat; 
}


/*DATES*/
.bloc{
display:block;
position:absolute;
left:0;
top:0; 
z-index:100;
color:white;
font-family: "Loved by the King", cursive;
font-size:10vh;
line-height:10vh;
width:50%;
margin-left:25%;
margin-top:5%;
}
#date {
text-align:center;
opacity:0;
-moz-animation: anim 6s linear forwards 62s;
-webkit-animation: anim 6s linear forwards 62s;
-o-animation: anim 6s linear forwards 62s;
-ms-animation: anim 6s linear forwards 62s;
animation: anim 6s linear forwards 62s;
}

@-moz-keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}
@keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}

/*CREDIT*/
.footer{
display:block;
position:absolute;
left:0;
bottom:0; 
z-index:100;
color:white;
font-family: "PT sans narrow", cursive;
font-size:1vh;
line-height:1.2vh;
padding:1vh;
letter-spacing:.5vh;
width:50%;
margin-left:25%;
margin-bottom:5%;
}
#credit {
text-align:center;
opacity:0;
-moz-animation: anim 6s linear forwards 68s;
-webkit-animation: anim 6s linear forwards 68s;
-o-animation: anim 6s linear forwards 68s;
-ms-animation: anim 6s linear forwards 68s;
animation: anim 6s linear forwards 68s;
}

@-moz-keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}
@keyframes anim {
0%  {opacity:0;}
100% {opacity:1;}
}

@media screen and (max-width: 56em) {
/* PROGRAMMES CONTAINERS */
.container{
height:600px;
}