html {
    background: #1f1f1f;
    font-size: 100%;
    overflow-x: hidden;
}

body, html {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    color: white;
}

body::-webkit-scrollbar {  display: none; }

#global {
    width: 100%;
    margin: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

section { display: none; opacity: 0; }
section.active { display: block; opacity: 1; }

a {
    color: #9b9b9b;
    text-decoration: none;
    -webkit-transition: color 0.4s;
    transition: color 0.4s;
}

a:hover {
    color: #ffffff;
}

h1 {
    font-size: 3.7em;
    line-height: 1.3em;
    letter-spacing: 2px;
    margin: 28vh 10% 0 14.28%;
    padding: 0 0 0 0;
    font-weight: 700;
}

.brmob {
    display: none;
}

h1 a:hover, h3 a:hover { color: #ffffff; }

h3 {
    font-size: 2.5em;
    line-height: 1.2em;
}

p {
    font-size: 2em;
    line-height: 1.5em;
    color: #d4d4d4;
}

nav {
    margin: 70px 0 0 14.28%;
    display: inline-block;
}

nav a {
    color: white;
    font-size: 1.25em;
    margin: 0 55px 0 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    cursor: pointer;
}

nav a:hover {
    color: #a9a9a9;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    opacity: 1;
    background: #1f1f1f;
}

iframe {
    margin: 20px auto 0 auto;
    width: 100%;
    max-width: 1200px;
    display: block;
}

#logo {
    float: right;
    width: 40px;
    height: 64px;
    margin: 57px 14.28% 0 0;
}

#logo .path { fill: white; }

.nextpage h3 {
    margin: 660px 0 0 25%;
    width: 84%;
}

.social { margin: 30px 0 300px 25%; }

.right {
    position: relative;
    width: 29.8%;
    margin: 600px 0 0 57.14%;
}

.left {
    position: relative;
    width: 35.71%;
    margin: 400px 0 0 14.28%;
}

.last {
    position: relative;
    width: 35.71%;
    margin: 300px 0 80px 44%;
}

.left p, .left h2, .right p, .right h2, .last p, .last h2 {
    position: relative;
    z-index: 2;
}

img.image {
    position: absolute;
    width: 100%;
    z-index: 0;
    opacity: 1;
}

.right .image {
    top: -160px;
    left: -84%;
}

.left .image {
    width: 83.6%;
    top: -180px;
    left: 116%;
}

.last.image {
    position: relative;
    margin: -370px auto 560px auto;
    width: 70%;
    display: block;
}

p.date {
    font-size: 1.1em;
    margin: 50px auto 0px auto;
    text-align: center;
}

#projet .nextpage h3 {
    margin: 290px 0 0 14.28%;
    width: 84%;
}

#projet .social {
    margin-left: 14.28%;
}

.portfolio .projet {
    position: relative;
    width: 66.6%;
    margin: 200px auto 240px auto;
    -webkit-transition: all 0.4s; /* Safari */
    transition: all 0.4s;
}

.portfolio .projet.play {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.projet video {
    width: 100%;
}

.projet h2 {
    position: absolute;
    bottom: -3.5%;
    left: 8.33%;
    margin: 0 0 0 0;
    z-index: 3;
    font-size: 2em;
    opacity: 1;
    -webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;
    transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
}

.projet.play h2 {
    bottom: -5%;
    opacity: 0;
    -webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
}

#vignette {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: url(../images/vignette.png) no-repeat;
    background-size: 100% 100%;
}

#mc, #scrollto, #plus {
    display: block;
    position: fixed;
    bottom: 60px;
    left: 14.28%;
    color: #9d9d9d;
    font-size: 1.25em;
    text-align: left;
    cursor: pointer;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

#mc:hover, #scrollto:hover, #plus:hover {
    color: #ffffff;
}

#scrollto.hidescroll {
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
	
}
#scrollto{
z-index: 100;
}

#credits {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    background: #1f1f1f;
}

#credits .box {
    margin-top: 50vh;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#credits h2 {
    margin: 2px;
}

#credits p {
    margin: 50px 0 13px 0;
}

#masquevideo {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.6;
    cursor: pointer;
}

::selection { background: rgba(255, 255, 255, 0.1); }
::-moz-selection { background: rgba(255, 255, 255, 0.1); }


/* ------------------------ Animation ------------------------ */

#scrollto, #mc, #plus, iframe {
    transform: translate3d(0, 100px, 0);
    animation: fixedAnim 1s cubic-bezier(0.000, 0.555, 0.080, 0.990);
    animation-timing-function: cubic-bezier(0.000, 0.555, 0.080, 0.990);
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
    -webkit-transform: translate3d(0, 100px, 0);
    -webkit-animation: fixedAnim 1s cubic-bezier(0.000, 0.555, 0.080, 0.990);
    -webkit-animation-timing-function: cubic-bezier(0.000, 0.555, 0.080, 0.990);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 1.5s;
    opacity: 0;
}

@-webkit-keyframes fixedAnim {
    from {transform: translate3d(0, 100px, 0); opacity: 0;}
    to {transform: translate3d(0, 0, 0); opacity: 1;}
}

@keyframes fixedAnim {
    from {transform: translate3d(0, 100px, 0); opacity: 0;}
    to {transform: translate3d(0, 0, 0); opacity: 1;}
}

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

canvas, #vignette {
    opacity: 0;
    animation: canvasAnim 1s cubic-bezier(0.000, 0.555, 0.080, 0.990);
    animation-timing-function: cubic-bezier(0.000, 0.555, 0.080, 0.990);
    animation-fill-mode: forwards;
    -webkit-animation: canvasAnim 1s cubic-bezier(0.000, 0.555, 0.080, 0.990);
    -webkit-animation-timing-function: cubic-bezier(0.000, 0.555, 0.080, 0.990);
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes canvasAnim {
    from {
        transform: scale(1.3, 1.3);
        opacity: 0;
    }
    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}

keyframes canvasAnim {
    from {
        transform: scale(1.3, 1.3);
        opacity: 0;
    }
    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}

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

h1 span {
    display: inline-block;
    opacity: 0;
    animation: titleAnim 1.2s cubic-bezier(0.000, 0.555, 0.080, 0.990);
    animation-timing-function: cubic-bezier(0.000, 0.555, 0.080, 0.990);
    animation-fill-mode: forwards;
    -webkit-animation: titleAnim 1.2s cubic-bezier(0.000, 0.555, 0.080, 0.990);
    -webkit-animation-timing-function: cubic-bezier(0.000, 0.555, 0.080, 0.990);
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes titleAnim {
    from {
        transform: translate3d(0, 30px, 0) scale(1, 0.85);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0px, 0) scale(1, 1);
        opacity: 1;
    }
}

keyframes titleAnim {
from {
    transform: translate3d(0, 30px, 0) scale(1, 0.85);
    opacity: 0;
}
to {
    transform: translate3d(0, 0px, 0) scale(1, 1);
    opacity: 1;
}
}

h1 span:nth-child(1){ animation-delay: 1.00s;		 -webkit-animation-delay: 1.00s;	}
h1 span:nth-child(2){ animation-delay: 1.01s;		 -webkit-animation-delay: 1.01s;	}
h1 span:nth-child(3){ animation-delay: 1.015s;		 -webkit-animation-delay: 1.015s;	}
h1 span:nth-child(4){ animation-delay: 1.02s;		 -webkit-animation-delay: 1.02s;	}
h1 span:nth-child(5){ animation-delay: 1.025s;		 -webkit-animation-delay: 1.025s;	}
h1 span:nth-child(6){ animation-delay: 1.03s;		 -webkit-animation-delay: 1.03s;	}
h1 span:nth-child(7){ animation-delay: 1.035s;		 -webkit-animation-delay: 1.035s;	}
h1 span:nth-child(8){ animation-delay: 1.04s;		 -webkit-animation-delay: 1.04s;	}
h1 span:nth-child(9){ animation-delay: 1.045s;		 -webkit-animation-delay: 1.045s;	}
h1 span:nth-child(10){ animation-delay: 1.05s;		 -webkit-animation-delay: 1.05s;	}
h1 span:nth-child(11){ animation-delay: 1.055s;		 -webkit-animation-delay: 1.055s;	}
h1 span:nth-child(12){ animation-delay: 1.06s;		 -webkit-animation-delay: 1.06s;	}
h1 span:nth-child(13){ animation-delay: 1.065s;		 -webkit-animation-delay: 1.065s;	}
h1 span:nth-child(14){ animation-delay: 1.07s;		 -webkit-animation-delay: 1.07s;	}
h1 span:nth-child(15){ animation-delay: 1.075s;		 -webkit-animation-delay: 1.075s;	}
h1 span:nth-child(16){ animation-delay: 1.08s;		 -webkit-animation-delay: 1.08s;	}
h1 span:nth-child(17){ animation-delay: 1.085s;		 -webkit-animation-delay: 1.085s;	}
h1 span:nth-child(18){ animation-delay: 1.09s;		 -webkit-animation-delay: 1.09s;	}
h1 span:nth-child(19){ animation-delay: 1.095s;		 -webkit-animation-delay: 1.095s;	}
h1 span:nth-child(20){ animation-delay: 1.10s;		 -webkit-animation-delay: 1.10s;	}
h1 span:nth-child(21){ animation-delay: 1.105s;		 -webkit-animation-delay: 1.105s;	}
h1 span:nth-child(22){ animation-delay: 1.11s;		 -webkit-animation-delay: 1.11s;	}
h1 span:nth-child(23){ animation-delay: 1.115s;		 -webkit-animation-delay: 1.115s;	}
h1 span:nth-child(24){ animation-delay: 1.12s;		 -webkit-animation-delay: 1.12s;	}
h1 span:nth-child(25){ animation-delay: 1.125s;		 -webkit-animation-delay: 1.125s;	}
h1 span:nth-child(26){ animation-delay: 1.13s;		 -webkit-animation-delay: 1.13s;	}
h1 span:nth-child(27){ animation-delay: 1.135s;		 -webkit-animation-delay: 1.135s;	}
h1 span:nth-child(28){ animation-delay: 1.14s;		 -webkit-animation-delay: 1.14s;	}
h1 span:nth-child(29){ animation-delay: 1.145s;		 -webkit-animation-delay: 1.145s;	}
h1 span:nth-child(30){ animation-delay: 1.15s;		 -webkit-animation-delay: 1.15s;	}
h1 span:nth-child(31){ animation-delay: 1.155s;		 -webkit-animation-delay: 1.155s;	}
h1 span:nth-child(32){ animation-delay: 1.16s;		 -webkit-animation-delay: 1.16s;	}
h1 span:nth-child(33){ animation-delay: 1.165s;		 -webkit-animation-delay: 1.165s;	}
h1 span:nth-child(34){ animation-delay: 1.17s;		 -webkit-animation-delay: 1.17s;	}
h1 span:nth-child(35){ animation-delay: 1.175s;		 -webkit-animation-delay: 1.175s;	}
h1 span:nth-child(36){ animation-delay: 1.18s;		 -webkit-animation-delay: 1.18s;	}
h1 span:nth-child(37){ animation-delay: 1.185s;		 -webkit-animation-delay: 1.185s;	}
h1 span:nth-child(38){ animation-delay: 1.19s;		 -webkit-animation-delay: 1.19s;	}
h1 span:nth-child(39){ animation-delay: 1.195s;		 -webkit-animation-delay: 1.195s;	}
h1 span:nth-child(40){ animation-delay: 1.20s;		 -webkit-animation-delay: 1.20s;	}
h1 span:nth-child(41){ animation-delay: 1.205s; 	 -webkit-animation-delay: 1.205s;	}
h1 span:nth-child(42){ animation-delay: 1.21s;		 -webkit-animation-delay: 1.21s;	}
h1 span:nth-child(43){ animation-delay: 1.215s;		 -webkit-animation-delay: 1.215s;	}
h1 span:nth-child(44){ animation-delay: 1.22s;		 -webkit-animation-delay: 1.22s;	}
h1 span:nth-child(45){ animation-delay: 1.225s;		 -webkit-animation-delay: 1.225s;	}
h1 span:nth-child(46){ animation-delay: 1.23s;		 -webkit-animation-delay: 1.23s;	}
h1 span:nth-child(47){ animation-delay: 1.235s;		 -webkit-animation-delay: 1.235s;	}
h1 span:nth-child(48){ animation-delay: 1.24s;		 -webkit-animation-delay: 1.24s;	}
h1 span:nth-child(48){ animation-delay: 1.245s;		 -webkit-animation-delay: 1.245s;	}
h1 span:nth-child(49){ animation-delay: 1.25s;		 -webkit-animation-delay: 1.25s;	}
h1 span:nth-child(50){ animation-delay: 1.255s;		 -webkit-animation-delay: 1.255s;	}
h1 span:nth-child(51){ animation-delay: 1.26s;		 -webkit-animation-delay: 1.26s;	}
h1 span:nth-child(52){ animation-delay: 1.265s;		 -webkit-animation-delay: 1.265s;	}
h1 span:nth-child(53){ animation-delay: 1.27s;		 -webkit-animation-delay: 1.27s;	}
h1 span:nth-child(54){ animation-delay: 1.275s;		 -webkit-animation-delay: 1.275s;	}
h1 span:nth-child(55){ animation-delay: 1.28s;		 -webkit-animation-delay: 1.28s;	}
h1 span:nth-child(56){ animation-delay: 1.285s; 	 -webkit-animation-delay: 1.285s; 	}
h1 span:nth-child(57){ animation-delay: 1.29s;		 -webkit-animation-delay: 1.29s;	}
h1 span:nth-child(58){ animation-delay: 1.295s;		 -webkit-animation-delay: 1.295s;	}
h1 span:nth-child(59){ animation-delay: 1.30s;		 -webkit-animation-delay: 1.30s;	}
h1 span:nth-child(60){ animation-delay: 1.305s;		 -webkit-animation-delay: 1.305s;	}
h1 span:nth-child(61){ animation-delay: 1.31s;		 -webkit-animation-delay: 1.31s;	}
h1 span:nth-child(62){ animation-delay: 1.315s;		 -webkit-animation-delay: 1.315s;	}
h1 span:nth-child(63){ animation-delay: 1.32s;		 -webkit-animation-delay: 1.32s;	}
h1 span:nth-child(64){ animation-delay: 1.325s;		 -webkit-animation-delay: 1.325s;	}
h1 span:nth-child(65){ animation-delay: 1.33s;		 -webkit-animation-delay: 1.33s;	}
h1 span:nth-child(66){ animation-delay: 1.335s;		 -webkit-animation-delay: 1.335s;	}
h1 span:nth-child(67){ animation-delay: 1.34s;		 -webkit-animation-delay: 1.34s;	}
h1 span:nth-child(68){ animation-delay: 1.345s;		 -webkit-animation-delay: 1.345s;	}
h1 span:nth-child(69){ animation-delay: 1.35s;		 -webkit-animation-delay: 1.35s;	}
h1 span:nth-child(70){ animation-delay: 1.355s;		 -webkit-animation-delay: 1.355s;	}
h1 span:nth-child(71){ animation-delay: 1.36s;		 -webkit-animation-delay: 1.36s;	}
h1 span:nth-child(72){ animation-delay: 1.365s;		 -webkit-animation-delay: 1.365s;	}
h1 span:nth-child(73){ animation-delay: 1.37s;		 -webkit-animation-delay: 1.37s;	}
h1 span:nth-child(74){ animation-delay: 1.375s;		 -webkit-animation-delay: 1.375s;	}
h1 span:nth-child(75){ animation-delay: 1.38s;		 -webkit-animation-delay: 1.38s;	}
h1 span:nth-child(76){ animation-delay: 1.385s;		 -webkit-animation-delay: 1.385s;	}
h1 span:nth-child(77){ animation-delay: 1.39s;		 -webkit-animation-delay: 1.39s;	}
h1 span:nth-child(78){ animation-delay: 1.395s;		 -webkit-animation-delay: 1.395s;	}
h1 span:nth-child(79){ animation-delay: 1.40s;		 -webkit-animation-delay: 1.40s;	}
h1 span:nth-child(80){ animation-delay: 1.405s;		 -webkit-animation-delay: 1.405s;	}
h1 span:nth-child(81){ animation-delay: 1.41s;		 -webkit-animation-delay: 1.41s;	}
h1 span:nth-child(82){ animation-delay: 1.415s;		 -webkit-animation-delay: 1.415s;	}
-webkit-



/* ------------------------ Media queries ------------------------ */


@media screen and (max-width: 1460px) {
    body { font-size: 90%; }
}

@media screen and (max-width: 1340px) {
    body { font-size: 85%; }
    h1 { font-size: 3.1em; }
}

@media screen and (max-width: 1024px) {
    body { font-size: 85%; }
    h1 { font-size: 2.8em; }
}


@media screen and (max-width: 640px) and (orientation : portrait) {

    body { font-size: 80%; }
    .mention { display: none; }
    #logo { display: none; }

    h1 {
        font-size: 1.3em;
        letter-spacing: normal;
        line-height: 1.6em;
        margin: 40vh 10% 0 10%;
    }

    #collectif h1 {
        margin-bottom: 400px;
    }

    p { font-size: 1em; }
    h2 { font-size: 1.1em; }

    #plus, #mc, #scrollto {
        font-size: 1em;
        left: 10%;
    }

    nav { margin: 40px 0 0 10%; }

    nav a {
        color: white;
        font-size: 1em;
        margin: 0 15px 0 0;
    }

    .nextpage h3 {
        margin: 80px auto 20px 10%;
        font-size: 1.3em;
        line-height: 1.6em;
    }

    .social {
        margin: 20px 0 100px 10%;
    }

    .right, .left, .last {
        width: auto;
        margin: 80px 10% 70px 10%;
    }

    img, .last.image { display: none; }

    .portfolio .projet {
        width: 84%;
        margin: 60px auto 80px auto;
    }

    .projet h2 {
        top: 100%;
        left: 0;
    }

    h3 a { display: block; }

    #credits .box {
        margin-top: 50vh;
        transform: translateY(-60%);
        -webkit-transform: translateY(-60%);
        font-size: 85%;
    }

    #credits p { margin: 40px 0 13px 0; }
    #projet .line.bottom { margin-top: 150px; }
    #mc, #plus, #scrollto { bottom: 40px; }

}

@media screen and (max-height: 640px) and (orientation : landscape) {

    body { font-size: 80%; }
    nav { margin-top: 30px; }
    nav a { margin: 0 15px 0 0; }

    #logo {
        width: 24px;
        margin: 28px 14.28% 0 0;
    }

    h1 {
        font-size: 1.7em;
        letter-spacing: normal;
        margin: 17vh 25% 0 14.28%;
        line-height: 1.45em;
    }

    h2 {
        font-size: 1.2em;
        line-height: 1.45em;
    }

    p { font-size: 1em; }

    #mc, #plus, #scrollto { bottom: 30px; }
    .right { margin: 450px 0 0 57.14%; }
    .left { margin: 200px 0 0 14.28%; }
    .last { margin: 105px 0 80px 44%; }
    .last.image { margin: -276px auto 0px auto; }
    .nextpage h3 { margin: 280px 0 0 25%; }
    .social { margin: 30px 0 90px 25%; margin: 15px 0 90px 25%; }

    h3 {
        font-size: 1.5em;
        line-height: 1.4em;
    }

}


.player{
    width: 100%;
    max-width: 1200px;
}

.image_projet{    
    width: 100%;
    max-width: 1200px;
    margin: 10px auto 0 auto;
    display: block;
}


 h2 {
	text-shadow: 1px 1px black;
}