@charset "UTF-8";

@media all {

    body {

        font-family: 'Puritan', sans-serif;
    }

    section {

        color: #fff;
        padding-top: 125px;
    }

    h1 {

        background: url('../../../frontend/assets/images/separation.png') left bottom no-repeat;
        padding-bottom: 15px;
    }

    #navigation {

        background: url('../../../frontend/assets/images/menu-bg.png') center -134px repeat-x;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1000;

        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }

    #navigation.is-top {

        background: url('../../../frontend/assets/images/menu-bg.png') center 0px repeat-x;
        height: 134px;
    }

    #navigation ul {

        margin: 0;
        padding-left: 0;
        text-align: center;
    }

    #navigation li {

        display: inline-block;
        list-style: none;
        margin-left: -4px;
    }

    #navigation a {

        color: #496b7f;
        display: block;
        font-family:'bradbunr', 'Luckiest Guy', Sans-Serif;
        font-size: 120%;
        letter-spacing: 0.05em;
        padding: 0;
        text-decoration: none;
        text-transform: uppercase;

        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }

    #navigation img {

        width: 75px;
    }

    #navigation.is-top a {

        color: #fff;
    }

    #navigation span {

        display: block;
        margin-top: -10px;
    }

    #navigation a:hover img {

        opacity: 0.8;
    }

    #navigation img {

        display: block;
    }

    #title {

        background: url('../../../frontend/assets/images/title-bg.jpg') top center repeat-x;
        background-size: cover;
        height: 900px;
        padding-top: 125px;
        position: relative;
        text-align: center;
    }

    #title-inner {

        position: relative;
    }

    #title-inner img {

        max-width: 90%;
    }

    #title-slogan {

        margin-top: 25px;
    }

    #title-soon {

        color: #496b7f;
        font-size: 200%;
        padding-bottom: 15px;
    }

    #title-distribution {

        margin-top: 35px;
        text-align: center;
    }

    #title-distribution img {

        margin-bottom: 5px;
    }

    #social {

        bottom: -100px;
        position: absolute;
        right: 0;
        width: 100%;
        z-index: 500;
    }

    #social ul {

        padding: 0;
    }

    #social li {

        display: inline-block;
        list-style-type: none;
        text-align: center;
    }

    #social a {

        display: block;
        line-height: 55px;
        padding: 10px;
    }

    #social a:hover img {

        opacity: 0.8;
    }

    #trailer {

        background: #293947;
        padding-bottom: 35px;
        text-align: center;
    }

    #trailer h1 {

        font-family:'bradbunr', 'Luckiest Guy', Sans-Serif;
        font-size: 250%;
        text-align: left;
    }

    #trailer-video {

        height: 288px;
        width: 512px;
        margin: auto auto 50px auto;
        max-width: 100%;
    }

    #features {

        color: #373737;
        min-height: 1153px;
        position: relative;
    }

    #features-inner ul {

        font-family:'bradbunr', 'Luckiest Guy', Sans-Serif;
        font-size: 200%;
        letter-spacing: 0.05em;
        margin: auto;
        max-width: 100%;
        width: 600px;
    }

    #features-inner li {

        margin-top: 10px;

        -webkit-transform: rotateZ(-0.5deg);
        -moz-transform: rotateZ(-0.5deg);
        -ms-transform: rotateZ(-0.5deg);
        -o-transform: rotateZ(-0.5deg);
        transform: rotateZ(-0.5deg);
    }

    #features-inner li:nth-child(1),
    #features-inner li:nth-child(3) {

        -webkit-transform: rotateZ(0.5deg);
        -moz-transform: rotateZ(0.5deg);
        -ms-transform: rotateZ(0.5deg);
        -o-transform: rotateZ(0.5deg);
        transform: rotateZ(0.5deg);
    }

    #features-hills {

        background: url('../../../frontend/assets/images/collines.png') bottom center no-repeat;
        height: 800px;
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    #features-slider .slider {

        margin-top: 40px;
        max-width: 80%;
    }

    #features-slider img {

        max-width: 100%;
    }

    #press {

        background: #293947;
        position: relative;
        z-index: 150;
    }

    #prizes {

        background: url('../../../frontend/assets/images/footer-bg.jpg') bottom center repeat-x;
        padding: 80px 0 100px 0;
        text-align: center;
    }

    #prizes-links {

        margin-bottom: 35px;
    }

    #credits {

        background: #293947;
        color: #fff;
        padding: 35px;
        text-align: center;
    }

    #separation-1,
    #separation-5 {

        background: url('../../../frontend/assets/images/top-bar-01.png') center center repeat-x;background: url('../../../frontend/assets/images/top-bar-01.png') center center repeat-x;
        height: 82px;
        margin: -82px auto 0 auto;
        position: relative;
        z-index: 100;
    }

    #separation-2 {

        background: url('../../../frontend/assets/images/bot-bar-01.png') center center repeat-x;
        height: 37px;
        margin: 0 auto -37px auto;
        position: relative;
        z-index: 100;
    }

    #separation-3 {

        background: url('../../../frontend/assets/images/top-bar-02.png') center center repeat-x;
        height: 85px;
        margin: -85px auto 0 auto;
        position: relative;
        z-index: 150;
    }

    #separation-4 {

        background: url('../../../frontend/assets/images/bot-bar-02.png') center center repeat-x;
        height: 78px;
        margin: 0 auto -78px auto;
        position: relative;
        z-index: 100;
    }

    /*---------------------------------------------------------*/

    /** Comments */

    .description {

        color: #dedede;
        font-size: 150%;
        margin-bottom: 35px;
    }

    .comment {

        color: #459F95;
        font-size: 150%;
        font-style: italic;
    }

    .author {

        color: #fff;
        display: inline-block;
        font-style: italic;
        font-weight: bold;
        font-size: 140%;
        margin-top: 5px;
        margin-bottom: 35px;
        text-align: right;
    }

    .also-seen {

        font-size: 140%;
    }

    .button,
    .button:focus,
    .button:visited {

        background: #EE7E21;
        border-radius: 3px;
        color: #161616;
        display: inline-block;
        font-size: 125%;
        margin-bottom: 15px;
        padding: 15px 45px 15px 45px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .button:hover,
    .button:active {

        color: #161616;
        opacity: 0.9;
        text-decoration: none;
    }

    /*---------------------------------------------------------*/

    /** Highlighted text */

    .highlight-blue {

        color: #428bca;
    }

    .highlight-orange {

        color: #F0922A;
    }
    /*---------------------------------------------------------*/

    /** Badges */

    .badges {
        text-align: center;
    }
    .badges img {
        display: inline-block;
        margin: 10px;
    }


    /*---------------------------------------------------------*/

    /** Video */

    .video {
        background: #293947;
        position: relative;
    }

    .video-inner {

        height: 100%;
    }

    .video-inner:hover {
        cursor: pointer;
    }

    .video-preview {

        background: url('../../../frontend/assets/images/video-preview.jpg') center center;
        background-size: cover;
        display: block;

        height: 100%;
        max-width: 100%;
        opacity: 1;
        z-index: 100;

        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }

    .video-play {

        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 100;

        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }

    .video-play-hidden {
        opacity: 0;
    }

    .video-play-visible {
        opacity: 1;
    }

    .video-icon {

        background: url('../../../frontend/assets/images/btn-play.png') center center no-repeat;
        background-size: 64px 64px;
        height: 100%;
        width: 100%;
    }

    .video-inner:hover .video-icon {


    }

    .video-preview-hidden {

        opacity: 0;
    }

    .video-player {

        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 50;
    }

    /*---------------------------------------------------------*/

    /** Slider */

    .slider {
        margin-bottom: 25px;
        margin: auto;
        position: relative;
        width: 400px;

        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    .slider-arrow {
        background-position: center center;
        background-size: cover;
        height: 43px;
        margin-top: -22px;
        position: absolute;
        top: 50%;
        width: 53px;
        z-index: 500;
        -webkit-transition: all .15s ease;
        -moz-transition: all .15s ease;
        -ms-transition: all .15s ease;
        -o-transition: all .15s ease;
        transition: all .15s ease;
    }

    .slider-arrow:hover {
        cursor: pointer;
    }

    .slider-arrow-big {
        height: 40px;
        margin-top: -20px;
        width: 49px;
    }

    .slider-arrow-left {
        background-image: url('../../../frontend/assets/images/arrow-left.png');
        left: -10%;
    }

    .slider-arrow-right {
        background-image: url('../../../frontend/assets/images/arrow-right.png');
        right: -10%;
    }

    .slider-slides img:first-child {
        position: relative;
    }

    .slider-slides img {
        left: 0;
        position: absolute;
        top: 0;
        width: 400px;
        z-index: 100;

        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }

    .slider-slides-shadow img {
        box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
    }

    .slider-image-visible {
        opacity: 1;

        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -o-transform: scale(1,1);
        transform: scale(1,1);
    }

    .slider-image-hidden {
        opacity: 0;
        z-index: -100;

        -webkit-transform: scale(1.05,1.05);
        -moz-transform: scale(1.05,1.05);
        -ms-transform: scale(1.05,1.05);
        -o-transform: scale(1.05,1.05);
        transform: scale(1.05,1.05);
    }

    .slider-rotate .slider-image-visible {
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        -o-transform: rotateZ(0);
        transform: rotateZ(0);
    }

    .slider-rotate .slider-image-hidden {
        -webkit-transform: rotateZ(-10deg);
        -moz-transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -o-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
    }
}

@media ( min-width:768px ) {

    #title-slogan {

        margin-right: -400px;
    }

    #navigation img {

        width: auto;
    }

    #title {
        height: 800px;
        padding-top: 200px;
    }

    #title-distribution {

        margin-top: 35px;
    }

    #social {

        background: url('../../../frontend/assets/images/social-bg.png') center center no-repeat;
        bottom: auto;
        height: 321px;
        right: 0;
        top: -205px;
        width: 68px;
    }

    #social ul {

        margin: 85px 0 0 3px;
    }

    #social li {

        display: block;
    }

    #social a {

        padding: 0;
    }
}

@media ( min-width:992px ) {

    #navigation span {

        visibility: hidden;
    }

    #navigation a:hover span {

        visibility: visible;
    }

    #trailer-video {

        height: 576px;
        width: 1024px;
    }

    #navigation a {

        font-size: 200%;
        padding: 0 15px 0 15px;
    }

    #features-slider {

        background: url('../../../frontend/assets/images/screenshots-ant.png') bottom left no-repeat;
        margin: 0 auto 0 auto;
        position: relative;
        width: 800px;
    }
}

@media ( max-width:1200px ) {}