/* Built by David Rousset - http://blogs.msdn.com/davrous - @davrous */
/* Based on this awesome article: http://www.sitepoint.com/css3-starwars-scrolling-text/ from Craig Buckler */

@-webkit-viewport {width: 1366px;height: 768px;}
@-moz-viewport {width: 1366px;height: 768px;}
@-ms-viewport {width: 1366px;height: 768px;}
@-o-viewport {width: 1366px;height: 768px;}
@viewport {width: 1366px;height: 768px;}


@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

/* CSS3 Animations - KEYFRAMES DECLARATIONS */
/* Fadding animation for the very first text */
@keyframes firsttextframes {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Fadding animation for the table list of actors */
@keyframes actorsframes {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Main title logo animation animated from the front to the rear with fadding */
@keyframes logo {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(0.1);
        opacity: 0;
    }
}

/* Mail scrolling animation moving the text like in StarWars intros */
@keyframes scroll {
    0% {
        top: 100%;
    }

    58% {
        opacity: 1.0;
    }

    60% {
        opacity: 0.0;
    }

    100% {
        opacity: 0.0;
        top: -140%;
    }
}

/* Final ship animation. The trick is to play on 3D rotation and Z translation */
/* To mimic again the first Star Destroyer animation */
@keyframes scrollship {
    0% {
        opacity: 0;
        transform: perspective(300px) translateZ(150px) rotateX(-80deg);
    }

    3% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: perspective(300px) translateZ(-4000px) rotateX(-80deg);
    }
}

/* Translating the galaxy image background on the Y axis to again */
/* mimic the StarWars intro */
@keyframes galaxyscrolling {
    0% {
        top: 0%;
    }

    100% {
        top: -100%;
    }
}

/* The video tag is animated in the same time as the galaxy  */
/* to achieve a continuous animation */
@keyframes videoscrolling {
    0% {
        top: 55%;
    }

    100% {
        top: -40%;
    }
}

@keyframes finalfaddingkeyframes {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


* {
    padding: 0;
    margin: 0;
}


body, html {
    width: 100%;
    height: 100%;
    background-color: black;
    font-family: "Droid Sans", arial, verdana, sans-serif;
    font-weight: 700;
    color: #ff6;
    overflow: hidden;
}

/* First image background */
.galaxy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    animation: galaxyscrolling 15s ease-out 111s 1;
    animation-fill-mode: forwards;
}

/* Very first text displayed */
.firsttext {
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    width: 100%;
    font-size: 2.5em;
    position: absolute;
    top: 30%;
    animation: firsttextframes 12s ease-out 0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

    .firsttext p {
        text-align: center;
        margin: 0.8em 0;
    }

/* Table element containing the actors' list */
.actors {
 /*   position: absolute; */
    position: relative;
    overflow: auto;

    width: 100%;
    height: 100%;
    top: 0%;
    font-size: 3em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 0.6em;
    letter-spacing: -0.05em;
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    opacity: 0;
    z-index: 1;
    animation: actorsframes 12s ease-out 12s;

animation: scroll 140s linear 25.5s 1;
    animation-fill-mode: forwards;
}

.actors td {
    width: 50%;
}

.imgActors {
    width: 17%;
}

/* Main logo - here "Coding4Fun" */
h1 {
    position: absolute;
    width: 100%;
    top: 25%;
    font-size: 10em;
    text-align: center;
    line-height: 0.8em;
    letter-spacing: -0.05em;
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    opacity: 0;
    z-index: 1;
    animation: logo 7s ease-out 25s;
}

    h1 sub {
        display: block;
        font-size: 0.3em;
        letter-spacing: 0;
        line-height: 0.8em;
    }

/* the interesting 3D scrolling stuff */
.titles {
    position: absolute;
    width: 18em;
    height: 50em;
    bottom: 0;
    left: 50%;
    margin-left: -9em;
    font-size: 350%;
    text-align: justify;
    overflow: hidden;
    transform-origin: 50% 100%;
    transform: perspective(600px) rotateX(25deg);
}

    .titles:after {
        position: absolute;
        content: ' ';
        left: 0;
        right: 0;
        top: 0;
        bottom: 60%;
    }

    .titles p {
        text-align: justify;
        margin: 0.8em 0;
    }

        .titles p.center {
            text-align: center;
        }

.titlecontent {
    position: absolute;
    top: 100%;
    animation: scroll 140s linear 25.5s 1;
    animation-fill-mode: forwards;
}

.fondvideo {
    position: absolute;
    width: 100%;
    height: 200%;
    top: 55%;
    animation: videoscrolling 15s ease-out 111s 1;
    animation-fill-mode: forwards;
}

.destroyer {
    position: absolute;
    top: -70%;
    opacity: 0;
    transform-origin: 50% 100%;
    width: 100%;
    height: 100%;
    transform: perspective(300px) translateZ(150px) rotateX(-80deg);
    animation: scrollship 120s linear 125s 1;
    animation-fill-mode: forwards;
}

.finalfadding {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: black;
    animation: finalfaddingkeyframes 5s ease-out 140s 1;
    animation-fill-mode: forwards;
}