html, body {
    max-width: 1920px; 
    max-height: 1080px;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    overflow: hidden;
}

#musicLien{
    position: absolute;
    padding:7px;
    z-index: 100;
}

#planete {
    position: relative;
    background-image: url(../images/galaxie.png);
    background-repeat:no-repeat;
    color: #2A2A2A;
    width: 100%; 
    height: 100%;
    cursor:pointer;
}

div p {
    display: inline-block;
    font-family: 'Anton', sans-serif;
    font-size: 150px;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    margin: 0 10px;
    margin-top: 400px;
    float: left;
    opacity: 0.0;
    animation: port 3s 1 forwards;
    -webkit-animation: port 3s 1 forwards;
    text-align: center;
}

div p:nth-of-type(2){
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}

div p:nth-of-type(3){
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

div p:nth-of-type(4){
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}

div p:nth-of-type(5){
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

div p:nth-of-type(6){
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

div p:nth-of-type(7){
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

div p:nth-of-type(8){
    animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
}

div p:nth-of-type(9){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(10){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(11){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(12){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
div p:nth-of-type(13){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(14){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(15){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(16){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(17){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(18){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(19){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(20){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(21){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(22){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

div p:nth-of-type(23){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
div:hover p {
    /*animation: reset 1s 1;
    -webkit-animation: reset 1s 1 ;*/
}

@keyframes port {
    0%{
        transform: rotateY(90deg) translateY(25%);
        opacity: 0.0;
    }
    100%{
        transform: rotateY(0deg) translateY(0%);
        opacity: 1.0;
    }
}

@-webkit-keyframes port {
    0%{
        -webkit-transform: rotateY(90deg) translateY(25%);
        opacity: 0.0;
    }
    100%{
        -webkit-transform: rotateY(0deg) translateY(0%);
        opacity: 1.0;
    }
}

@keyframes reset {
    0%{}
    100%{}
}

@-webkit-keyframes reset {
    0%{}
    100%{}
}



/*********EFFET TITRE 24H***********/

#titre{
    background-color: #303030;
    width: 1920px; 
    height: 1080px;
}

#text {
    text-align:center;
    position:absolute;
    background-color: #b6adad;
    width:1300px;
    top:150px;
    border-radius:20px;
    left:50%;
    margin: 100px 0 0 -650px;
    animation: border-flicker 2s linear infinite;
}

h1 {
    color: #ea0b0b;
    font-family: 'Anton', sans-serif;
    font-size:120px;
    letter-spacing:10px;
    animation: text-flicker 3s linear infinite;
}

#offset {
    animation: letter-flicker 2s linear infinite;
}

@keyframes text-flicker {
    0% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42,  1);
    }

    2% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42,  1);
    }
    8% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
    9% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
    12% {
        opacity:0.1;
        text-shadow: 0px 0px rgba(44, 42, 42, 1);
    }
    20% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1)
    }
    25% {
        opacity:0.3;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1)
    }
    30% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1)
    }

    70% {
        opacity:0.7;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1)
    }

    72% {
        opacity:0.2;
        text-shadow:0px 0px 29px rgba(44, 42, 42, 1)
    }

    77% {
        opacity:.9;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1)
    }
    100% {
        opacity:.9;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1)
    }
}

@keyframes border-flicker {
    0% {
        opacity:0.1;
        -webkit-box-shadow: 0px 0px 78px 4px rgba((44, 42, 42, 0.73));
        -moz-box-shadow: 0px 0px 78px 4px rgba((44, 42, 42, 0.73));
        box-shadow: 0px 0px 78px 4px rgba((44, 42, 42, 0.73));
    }
    2% {
        opacity:1;
        -webkit-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        -moz-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
    }
    4% {
        opacity:0.1;
        -webkit-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        -moz-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
    }

    8% {
        opacity:1;
        -webkit-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        -moz-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
    }
    70% {
        opacity:0.7;
        -webkit-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        -moz-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
    }
    100% {
        opacity:1;
        -webkit-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        -moz-box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
        box-shadow: 0px 0px 78px 4px rgba(44, 42, 42, 0.73);
    }
}

@keyframes letter-flicker {
    0% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
    2% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
    4% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }


    19% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
    21% {
        opacity:0.1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
    23% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }

    80% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
    83% {
        opacity:0.4;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
    87% {
        opacity:1;
        text-shadow: 0px 0px 29px rgba(44, 42, 42, 1);
    }
}

.button {
    background: #ea0b0b;
    border-radius: 5px;
    padding: 20px 60px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    font-size: 1.45em;
    margin: 0 15px;
    cursor: pointer;
}

/* Hover state animation applied here */
.button:hover {
    -webkit-animation: hover 1200ms linear 2 alternate;
    animation: hover 1200ms linear 2 alternate;
}

/* Active state animation applied here */
.button:active {
    -webkit-animation: active 1200ms ease 1 alternate;
    animation: active 1200ms ease 1 alternate;
    background: #5F9BE0;
}
.gray { background: #D2D2D2; }
.gray:active { background: #b9b9b9; }

/* Active state animation keyframes below */

@-webkit-keyframes active {
    0% {-webkit-transform: scale(1,1);transform: scale(1,1);}
    90% {-webkit-transform: scale(.9,.88);transform: scale(.9,.88);}
    100% {-webkit-transform: scale(.92,.9);transform: scale(.92,.9);}
}

@keyframes active {
    0% {-webkit-transform: scale(1,1);transform: scale(1,1);}
    90% {-webkit-transform: scale(.9,.88);transform: scale(.9,.88);}
    100% {-webkit-transform: scale(.92,.9);transform: scale(.92,.9);}
}

/* Hover state animation keyframes below */

@-webkit-keyframes hover {
    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    1.8% { -webkit-transform: matrix3d(1.016, 0, 0, 0, 0, 1.037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.016, 0, 0, 0, 0, 1.037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    3.5% { -webkit-transform: matrix3d(1.033, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.033, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    4.7% { -webkit-transform: matrix3d(1.045, 0, 0, 0, 0, 1.129, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.045, 0, 0, 0, 0, 1.129, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    5.31% { -webkit-transform: matrix3d(1.051, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.051, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    7.01% { -webkit-transform: matrix3d(1.068, 0, 0, 0, 0, 1.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.068, 0, 0, 0, 0, 1.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    8.91% { -webkit-transform: matrix3d(1.084, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.084, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    9.41% { -webkit-transform: matrix3d(1.088, 0, 0, 0, 0, 1.132, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.088, 0, 0, 0, 0, 1.132, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    10.71% { -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.097, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    12.61% { -webkit-transform: matrix3d(1.108, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.108, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    14.11% { -webkit-transform: matrix3d(1.114, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.114, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    14.41% { -webkit-transform: matrix3d(1.115, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.115, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    16.32% { -webkit-transform: matrix3d(1.119, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.119, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    18.12% { -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    18.72% { -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    20.02% { -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    21.82% { -webkit-transform: matrix3d(1.119, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.119, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    24.32% { -webkit-transform: matrix3d(1.115, 0, 0, 0, 0, 1.11, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.115, 0, 0, 0, 0, 1.11, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    25.53% { -webkit-transform: matrix3d(1.113, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.113, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    29.23% { -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    29.93% { -webkit-transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    35.54% { -webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.098, 0, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    36.64% { -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.097, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    41.04% { -webkit-transform: matrix3d(1.096, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.096, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    44.04% { -webkit-transform: matrix3d(1.096, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.096, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    51.45% { -webkit-transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    52.15% { -webkit-transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    58.86% { -webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    63.26% { -webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    66.27% { -webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    73.77% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    81.18% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    85.49% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    88.59% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    96% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes hover {
    0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    1.8% { -webkit-transform: matrix3d(1.016, 0, 0, 0, 0, 1.037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.016, 0, 0, 0, 0, 1.037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    3.5% { -webkit-transform: matrix3d(1.033, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.033, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    4.7% { -webkit-transform: matrix3d(1.045, 0, 0, 0, 0, 1.129, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.045, 0, 0, 0, 0, 1.129, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    5.31% { -webkit-transform: matrix3d(1.051, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.051, 0, 0, 0, 0, 1.142, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    7.01% { -webkit-transform: matrix3d(1.068, 0, 0, 0, 0, 1.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.068, 0, 0, 0, 0, 1.158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    8.91% { -webkit-transform: matrix3d(1.084, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.084, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    9.41% { -webkit-transform: matrix3d(1.088, 0, 0, 0, 0, 1.132, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.088, 0, 0, 0, 0, 1.132, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    10.71% { -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.097, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    12.61% { -webkit-transform: matrix3d(1.108, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.108, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    14.11% { -webkit-transform: matrix3d(1.114, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.114, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    14.41% { -webkit-transform: matrix3d(1.115, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.115, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    16.32% { -webkit-transform: matrix3d(1.119, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.119, 0, 0, 0, 0, 1.077, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    18.12% { -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    18.72% { -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    20.02% { -webkit-transform: matrix3d(1.121, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.121, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    21.82% { -webkit-transform: matrix3d(1.119, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.119, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    24.32% { -webkit-transform: matrix3d(1.115, 0, 0, 0, 0, 1.11, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.115, 0, 0, 0, 0, 1.11, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    25.53% { -webkit-transform: matrix3d(1.113, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.113, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    29.23% { -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    29.93% { -webkit-transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    35.54% { -webkit-transform: matrix3d(1.098, 0, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.098, 0, 0, 0, 0, 1.105, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    36.64% { -webkit-transform: matrix3d(1.097, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.097, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    41.04% { -webkit-transform: matrix3d(1.096, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.096, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    44.04% { -webkit-transform: matrix3d(1.096, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.096, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    51.45% { -webkit-transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    52.15% { -webkit-transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.099, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    58.86% { -webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    63.26% { -webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    66.27% { -webkit-transform: matrix3d(1.101, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.101, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    73.77% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    81.18% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    85.49% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    88.59% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    96% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
    100% { -webkit-transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}



/************FIN EFFET 24H********/

#non {
    font-family: 'Anton', sans-serif;
    font-size: 600px;
    color: #ea0b0b;
    text-align: center;
}

#robinet {
    position: relative;
    background-image: url(../images/robinet.jpg);
    background-repeat: no-repeat;
    width: 100%; 
    height: 100%;
    cursor:pointer;
}

/*********Page ATTENTION**********/


@font-face {
    font-family: "VCR OSD MONO";
    src: url('fonts/VCR_OSD_MONO.ttf');
}


/********END***********/

#logo{
    text-align: center;
    margin-top: 250px;
}