/* ----------------------------------------------------------------
     [ 01 Star Banner video ]
-----------------------------------------------------------------*/
/* Banner */

#banner {
    background-image: url("../../img/Accueil/Video/picture.png");
    align-items: center;
    display: flex;
    justify-content: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-top: 0;
    min-height: 100vh;
    height: 100vh !important;
    width: 100%;
    position: relative;
    text-align: center;
    overflow: hidden;
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
}

    #banner .inner {
        transform: scale(1.0);
        transition: opacity 1s ease, transform 1s ease;
        opacity: 1;
        position: relative;
        z-index: 2;
        -moz-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -moz-transition: opacity 1s ease, -moz-transform 1s ease;
        -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
        -ms-transition: opacity 1s ease, -ms-transform 1s ease;
    }

        #banner h1 {
            font-size: 14vmin;
            margin-bottom: 1rem;
            color: #FFF;
            font-family: 'Gotham', sans-serif;
            font-weight: bold;
        }

        #banner p {
            color: #fff;
            font-size: 3vmin;
            margin-bottom: 3rem;
            text-transform: uppercase;
            font-family: 'Gotham', sans-serif;
            font-weight: bold;
        }

    #banner video {
        transform: translateX(50%) translateY(50%);
        position: absolute;
        bottom: 50%;
        right: 50%;
        width: auto;
        height: auto;
        min-width: 100%;
        min-height: 100%;
        overflow: hidden;
        -moz-transform: translateX(50%) translateY(50%);
        -webkit-transform: translateX(50%) translateY(50%);
        -ms-transform: translateX(50%) translateY(50%);
    }

    #banner:before {
        -moz-transition: opacity 3s ease;
        -webkit-transition: opacity 3s ease;
        -ms-transition: opacity 3s ease;
        transition: opacity 3s ease;
        -moz-transition-delay: 1.25s;
        -webkit-transition-delay: 1.25s;
        -ms-transition-delay: 1.25s;
        transition-delay: 1.25s;
        content: '';
        display: block;
        background-color: rgba(0, 0, 0, 0.75);
        height: 100%;
        left: 0;
        opacity: 0.6;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .text {
        /*background-color: rgba(0,0,0,.5); peut être video*/
        background-color: #0c1c4f;
        /*opacity: 0.5;*/
        width: 100%;
        height: auto;
        position: absolute;
        bottom: 0px;
    }

        .text h2 {
            text-align: center;
            margin: auto;
            padding-top: 12px;
            padding-bottom: 12px;
            color: #fff;
            text-transform: uppercase;
            font-size: 4vmin;
            font-style: italic;
            color: #fff;
        }

    /*@media screen and (max-width: 1280px) {

        #banner video {
            display: none;
        }

    }

    @media screen and (max-width: 736px) {

        #banner {
            min-height: 0;
            height: auto !important;
            padding: 6rem 2rem 8rem 2rem;
        }

            #banner .inner {
                width: 100%;
            }

            #banner h1 {
                font-size: 1.75em;
                margin-bottom: 0.5em;
                padding-top: 42px;
                padding-bottom: 0;
            }

            #banner p {
                font-size: 1.25em;
            }

            #banner br {
                display: none;
            }

    }

    @media screen and (max-width: 480px) {

        #banner p {
            font-size: 1em;
        }

    }*/

    body.is-loading #banner .inner {
        -moz-transform: scale(0.99);
        -webkit-transform: scale(0.99);
        -ms-transform: scale(0.99);
        transform: scale(0.99);
        opacity: 0;
    }

    body.is-loading #banner:before {
        opacity: 1;
    }

/* ----------------------------------------------------------------
     [ 01 End Banner video ]
-----------------------------------------------------------------*/