/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/** Fin Reset CSS Eric Meyer **/

/** Reset perso **/
body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    color: #262626;
    font-family: 'ChaletBook-Regular', sans-serif;
    font-size: 100%;
    line-height: 1.5;
}

button {
    cursor: pointer;
    padding: 0;
    border: none;
    background-color: transparent;
}

a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    width: auto;
    /* pour IE */
    height: auto;
    /* pour IE */
    -ms-interpolation-mode: bicubic;
    /* lissage pour IE */
}

*:focus {
    outline: 0;
}

@font-face {
    font-family: "Austin-Roman";
    src: url("fonts/austin/roman/Austin-Roman.eot");
    src: url("fonts/austin/roman/Austin-Roman.eot?#iefix") format("embedded-opentype"),
    url("fonts/austin/roman/Austin-Roman.woff2") format("woff2"),
    url("fonts/austin/roman/Austin-Roman.ttf") format("truetype"),
    url("fonts/austin/roman/Austin-Roman.svg#Austin-Roman") format("svg");
}

@font-face {
    font-family: "Austin-Medium";
    src: url("fonts/austin/medium/Austin-Medium.eot");
    src: url("fonts/austin/medium/Austin-Medium.eot?#iefix") format("embedded-opentype"),
    url("fonts/austin/medium/Austin-Medium.woff2") format("woff2"),
    url("fonts/austin/medium/Austin-Medium.ttf") format("truetype"),
    url("fonts/austin/medium/Austin-Medium.svg#Austin-Medium") format("svg");
}

@font-face {
    font-family: "Austin-Bold";
    src: url("fonts/austin/bold/Austin-Bold.eot");
    src: url("fonts/austin/bold/Austin-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/austin/bold/Austin-Bold.woff2") format("woff2"),
    url("fonts/austin/bold/Austin-Bold.ttf") format("truetype"),
    url("fonts/austin/bold/Austin-Bold.svg#Austin-Bold") format("svg");
}

@font-face {
    font-family: "Austin-BoldItalic";
    src: url("fonts/austin/bolditalic/Austin-BoldItalic.eot");
    src: url("fonts/austin/bolditalic/Austin-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("fonts/austin/bolditalic/Austin-BoldItalic.woff2") format("woff2"),
    url("fonts/austin/bolditalic/Austin-BoldItalic.ttf") format("truetype"),
    url("fonts/austin/bolditalic/Austin-BoldItalic.svg#Austin-Bold") format("svg");
}

@font-face {
    font-family: "ChaletBook-Regular";
    src: url("fonts/chaletbook/regular/ChaletBook.eot");
    src: url("fonts/chaletbook/regular/ChaletBook.eot?#iefix") format("embedded-opentype"),
    url("fonts/chaletbook/regular/ChaletBook.woff2") format("woff2"),
    url("fonts/chaletbook/regular/ChaletBook.ttf") format("truetype"),
    url("fonts/chaletbook/regular/ChaletBook.svg#ChaletBook-Regular") format("svg");
}

@font-face {
    font-family: "ChaletBook-Bold";
    src: url("fonts/chaletbook/bold/ChaletBook-Bold.eot");
    src: url("fonts/chaletbook/bold/ChaletBook-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/chaletbook/bold/ChaletBook-Bold.woff2") format("woff"),
    url("fonts/chaletbook/bold/ChaletBook-Bold.ttf") format("truetype"),
    url("fonts/chaletbook/bold/ChaletBook-Bold.svg#ChaletBook-Bold") format("svg");
}

@font-face {
    font-family: "ChaletBook-BoldItalic";
    src: url("fonts/chaletbook/bolditalic/ChaletBook-BoldItalic.eot");
    src: url("fonts/chaletbook/bolditalic/ChaletBook-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("fonts/chaletbook/bolditalic/ChaletBook-BoldItalic.woff2") format("woff"),
    url("fonts/chaletbook/bolditalic/ChaletBook-BoldItalic.ttf") format("truetype"),
    url("fonts/chaletbook/bolditalic/ChaletBook-BoldItalic.svg#ChaletBook-Bold") format("svg");
}
/** End Reset perso **/





/********** GENERAL **********/
.height-auto {
    height: 100vh;
}

.first-section {
    background: url(themes/bg/mobile/bg-triangle-general.svg) center;
    -webkit-background-size: cover;
    background-size: cover;
}

.no-bg {
    background: none;
}

.bg-general {
    background: url(themes/bg/mobile/bg-triangle-general.svg) center;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
}

.comparadise {
    background: url(themes/bg/mobile/bg-triangle-comparadise.svg);
}

.fake-records {
    background: url(themes/bg/mobile/bg-triangle-fake-records.svg);
}

.juicy-garden {
    background: url(themes/bg/mobile/bg-triangle-juicy-garden.svg);
}

.camion-fume {
    background: url(themes/bg/mobile/bg-triangle-camion-fume.svg);
}

.bookster {
    background: url(themes/bg/mobile/bg-triangle-bookster.svg);
}

.seven {
    background: url(themes/bg/mobile/bg-triangle-seven.svg);
}

.resume-bd {
    background: url(themes/bg/mobile/bg-triangle-resume-bd.svg);
}

.next {
    background: url(themes/bg/mobile/bg-triangle-next.svg);
}





/***** HEADER *****/
header {
    position: fixed;
    top: 4.584%;
    left: 6.25%;
    z-index: 300;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    width: 87.5%;
}

.burger,
.close,
.close-portfolio {
    position: absolute;
    right: 0;
    z-index: 500;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
}

.burger span,
.close span,
.close-portfolio span {
    display: inline-block;
    width: 1.125rem;
    height: 0.1875rem;
    background-color: #d41277;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

.burger:hover span,
.burger:focus span,
.close:hover span,
.close:focus span,
.close-portfolio:hover span,
.close-portfolio:focus span {
    background-color: #8b084d;
}



/*** BURGER ***/
.burger span:nth-of-type(2) {
    margin: 0.125rem 0;
}



/*** CLOSES ***/
.close span:first-of-type,
.close-portfolio span:first-of-type {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close span:last-of-type,
.close-portfolio span:last-of-type {
    position: relative;
    bottom: 0.1875rem;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}



/*** CLOSE PORTFOLIO ***/
.close-portfolio {
    z-index: 600;
}



/*** BACK ***/
.back {
    opacity: 0;
    z-index: 500;
    display: inline-block;
    -webkit-transition: opacity .7s;
    -o-transition: opacity .7s;
    transition: opacity .7s;
}

.back a {
    line-height: 0;
}

.back svg {
    width: 23.572%;
}

.back svg .fill {
    fill: #d41277;
    -webkit-transition: fill .7s;
    -o-transition: fill .7s;
    transition: fill .7s;
}

.back svg:hover .fill,
.back svg:focus .fill {
    fill: #8b084d;
}



/*** NAV ***/
nav {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0);
    opacity: 0;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

.open {
    visibility: visible;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

nav ul {
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    width: 15.625rem;
    height: 15.625rem;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 50%;
}

nav ul li a {
    position: relative;
    display: inline-block;
    font-family: 'Austin-Medium', serif;
    color: #d41277;
    text-transform: uppercase;
}

nav ul li:nth-of-type(2) a {
    margin: 50.23% 0;
}

nav ul li a::before {
    content: "";
    position: absolute;
    top: 40%;
    width: 0;
    height: 0.1875rem;
    background-color: #d41277;
    -webkit-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
}

nav ul li a:hover::before,
nav ul li a:focus::before {
    width: 100%;
}

.current::before {
    content: "";
    position: absolute;
    top: 40%;
    width: 100%;
    height: 0.1875rem;
    background-color: #d41277;
}



/*** NAV SUB-PORTFOLIO ***/
nav .sub-portfolio {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    -ms-align-items: flex-start;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    padding: 20% 0 10% 6.25%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0;
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    opacity: 0;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

nav .open.sub-portfolio {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

nav .sub-portfolio li:nth-of-type(2) a {
    margin: 0;
}

nav .sub-portfolio li a {
    position: relative;
    display: inline-block;
    font-family: 'Austin-Medium', serif;
    color: #d41277;
    text-transform: inherit;
}

nav .sub-portfolio li .sub-visuel {
    position: absolute;
    top: 15.0176vh;
    right: 6.25%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    height: 80vh;
}

nav .sub-portfolio li .sub-visuel-general {
    background: url(themes/sub-portfolio/mobile/visuel-sub-general.svg) no-repeat center;
}

nav .sub-portfolio li .sub-visuel-comparadise {
    background: url(themes/sub-portfolio/mobile/visuel-sub-comparadise.svg) no-repeat center;
}

nav .sub-portfolio li .sub-visuel-fake-records {
    background: url(themes/sub-portfolio/mobile/visuel-sub-fake-records.svg) no-repeat center;
}

nav .sub-portfolio li .sub-visuel-juicy-garden {
    background: url(themes/sub-portfolio/mobile/visuel-sub-juicy-garden.svg) no-repeat center;
}

nav .sub-portfolio li .sub-visuel-camion-fume {
    background: url(themes/sub-portfolio/mobile/visuel-sub-camion-fume.svg) no-repeat center;
}

nav .sub-portfolio li .sub-visuel-bookster {
    background: url(themes/sub-portfolio/mobile/visuel-sub-bookster.svg) no-repeat center;
}

nav .sub-portfolio li .sub-visuel-seven {
    background: url(themes/sub-portfolio/mobile/visuel-sub-seven.svg) no-repeat center;
}

nav .sub-portfolio li .sub-visuel-resume-bd {
    background: url(themes/sub-portfolio/mobile/visuel-sub-resume-bd.svg) no-repeat center;
}

nav .sub-portfolio li .sub-visuel-next {
    background: url(themes/sub-portfolio/mobile/visuel-sub-next.svg) no-repeat center;
}



/*** DOWN ***/
@-webkit-keyframes scroll-down01 {
    from {fill: rgba(212, 18, 119, 0.25)}
    50% {fill: rgba(212,18, 119, 1)}
    to {fill: rgba(212, 18, 119, 0.25)}
}
@-o-keyframes scroll-down01 {
    from {fill: rgba(212, 18, 119, 0.25)}
    50% {fill: rgba(212,18, 119, 1)}
    to {fill: rgba(212, 18, 119, 0.25)}
}
@-moz-keyframes scroll-down01 {
    from {fill: rgba(212, 18, 119, 0.25)}
    50% {fill: rgba(212,18, 119, 1)}
    to {fill: rgba(212, 18, 119, 0.25)}
}
@keyframes scroll-down01 {
    from {fill: rgba(212, 18, 119, 0.25)}
    50% {fill: rgba(212,18, 119, 1)}
    to {fill: rgba(212, 18, 119, 0.25)}
}

@-webkit-keyframes scroll-down02 {
    from {fill: rgba(212, 18, 119, 1)}
    50% {fill: rgba(212,18, 119, 0.25)}
    to {fill: rgba(212, 18, 119, 1)}
}
@-o-keyframes scroll-down02 {
    from {fill: rgba(212, 18, 119, 1)}
    50% {fill: rgba(212,18, 119, 0.25)}
    to {fill: rgba(212, 18, 119, 1)}
}
@-moz-keyframes scroll-down02 {
    from {fill: rgba(212, 18, 119, 1)}
    50% {fill: rgba(212,18, 119, 0.25)}
    to {fill: rgba(212, 18, 119, 1)}
}
@keyframes scroll-down02 {
    from {fill: rgba(212, 18, 119, 1)}
    50% {fill: rgba(212,18, 119, 0.25)}
    to {fill: rgba(212, 18, 119, 1)}
}

.down {
    position: absolute;
    bottom: 4.584%;
    left: 45%;
    width: 10%;
}

.down svg .fill01 {
    animation: scroll-down01 1.5s infinite;
}

.down svg .fill02 {
    animation: scroll-down02 1.5s infinite;
}










/********** 404 **********/
.main-404 h1 {
    font-size: 7rem;
    line-height: 1;
}

.main-404 strong {
    font-size: 1.25rem;
}









/********** HOME **********/
/***** MAIN *****/
main {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

.main-circle {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    width: 15.625rem;
    height: 15.625rem;
    margin: 0 auto;
    font-family: 'Austin-Roman', serif;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
}

main img {
    width: 66%;
}

main h1 {
    font-size: 1.875rem;
}

main strong {
    font-size: 0.9375rem;
    text-transform: uppercase;
}





/***** SECTIONS HOME *****/
.home-section {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}

.home-section h2 {
    position: relative;
    z-index: 100;
    display: inline-block;
    width: 90.164%;
    padding: 1.8125rem 0;
    font-family: 'Austin-Bold', serif;
    font-size: 2.8125rem;
    text-align: center;
    background: url(themes/circles/circle.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

.home-section.comparadise h2:hover,
.home-section.comparadise h2:focus {
    background: url(themes/circles/circle-comparadise.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.home-section.fake-records h2:hover,
.home-section.fake-records h2:focus {
    background: url(themes/circles/circle-fake-records.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.home-section.juicy-garden h2:hover,
.home-section.juicy-garden h2:focus {
    background: url(themes/circles/circle-juicy-garden.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.home-section.camion-fume h2:hover,
.home-section.camion-fume h2:focus {
    background: url(themes/circles/circle-camion-fume.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.home-section.bookster h2:hover,
.home-section.bookster h2:focus {
    background: url(themes/circles/circle-bookster.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.home-section.seven h2:hover,
.home-section.seven h2:focus {
    background: url(themes/circles/circle-seven.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.home-section.resume-bd h2:hover,
.home-section.resume-bd h2:focus {
    background: url(themes/circles/circle-resume-bd.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.home-section.next h2:hover,
.home-section.next h2:focus {
    background: url(themes/circles/circle-next.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}










/********** WHO **********/
.who,
.qualities,
.skills,
.tasks,
.passions {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.qualities .list-qualities,
.skills .list-skills,
.tasks .list-tasks,
.passions .list-passions {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 87.5%;
    margin: 0 auto;
}

.who h1,
h2 {
    font-family: 'Austin-Bold', serif;
    font-size: 2.8125rem;
}





/***** INTRO *****/
.who h1 {
    margin-bottom: 0.625rem;
}

.main-who img {
    width: 78.125%;
}

.who .img {
    margin-top: 4.6875rem;
    -webkit-clip-path: circle(42% at center);
    -o-clip-path: circle(42% at center);
    clip-path: circle(42% at center);
}

.who section {
    position: relative;
    bottom: 5.3125rem;
    width: 87.5%;
    padding: 0.9375rem;
    background-color: rgba(255, 255, 255, 0.75);
}





/***** QUALITÉS *****/
.qualities h2 {
    margin-top: 0.9375rem;
}

.qualities section {
    width: 87.5%;
}

.qualities .list-qualities {
    padding: 0.9375rem 0.3125rem;
    background-color: rgba(255, 255, 255, 0.75);
}

.qualities .list-qualities figure {
    width: 33%;
}

.list-qualities figure:first-of-type,
.list-qualities figure:nth-of-type(2),
.list-qualities figure:nth-of-type(3) {
    margin-bottom: 1.25rem;
}

.qualities .list-qualities figure img {
    width: 70.8%;
}

.qualities aside {
    position: relative;
    bottom: 0.9375rem;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
    width: 87.5%;
    margin: 0 auto;
}

.qualities aside img {
    width: 38%;
    padding: 0.625rem;
    background-color: rgba(230, 190, 137, 0.75);
    border-radius: 50%;
}

.qualities aside article {
    width: 58%;
    padding: 0.625rem 0.3125rem;
    background-color: rgba(230, 190, 137, 0.75);
}

.qualities aside article h3 {
    font-family: 'Austin-Bold', serif;
    font-size: 1.25rem;
}

.qualities aside article h3 span {
    font-family: 'ChaletBook-Bold', sans-serif;
}

.qualities aside article p {
    text-align: left;
}

.qualities aside article p span {
    font-family: 'ChaletBook-Bold', sans-serif;
}





/***** COMPÉTENCES *****/
.softwares {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
    width: 62%;
    padding: 0.625rem 0.3125rem;
    background-color: rgba(255, 255, 255, 0.75);
}

.softwares figure {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

.softwares figure img {
    width: 25.74%;
    margin-right: 0.625rem;
}

.computing {
    width: 36%;
    padding: 0.625rem 0.3125rem;
    background-color: rgba(255, 255, 255, 0.75);
}

.computing figure {
    margin-bottom: 0.625rem;
}

.computing figure:last-of-type {
    margin-bottom: 0;
}

.computing figure img {
    width: 46.48%;
}





/***** TÂCHES *****/
.tasks figure {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
    width: 32%;
    height: 5.9375rem;
    margin-bottom: 1.25rem;
    padding: 0.625rem 0.3125rem;
    background-color: rgba(255, 255, 255, 0.75);
}





/***** PASSIONS *****/
.passions {
    position: relative;
}

.passions section {
    width: 87.5%;
}

.list-passions {
    padding: 0.9375rem 0.3125rem;
    background-color: rgba(255, 255, 255, 0.75);
}

.list-passions figure {
    width: 33%;
}

.list-passions figure:first-of-type,
.list-passions figure:nth-of-type(2),
.list-passions figure:nth-of-type(3) {
    margin-bottom: 1.25rem;
}

.list-passions figure img {
    width: 70.8%;
}



/*** TOP ***/
.top {
    position: absolute;
    bottom: 4.584%;
    left: 45%;
    display: inline-block;
    width: 10%;
}

.top a {
    line-height: 0;
}

.top svg {
    width: 100%;
}

.top svg .fill {
    fill: #d41277;
    -webkit-transition: fill .7s;
    -o-transition: fill .7s;
    transition: fill .7s;
}

.top svg:hover .fill,
.top svg:focus .fill {
    fill: #8b084d;
}










/********** PROJETS **********/
.light-veil {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    padding: 0 6.25%;
    background-color: rgba(255, 255, 255, 0.90);
}

.light-veil figure {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

.light-veil figure img {
    margin-bottom: 1.25rem;
}

.project h1 {
    width: 90.164%;
    padding: 1.8125rem 0;
    font-family: 'Austin-Bold', serif;
    font-size: 2.8125rem;
    text-align: center;
    background: url(themes/circles/circle.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.mid-height-auto {
    height: 50vh;
}

.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

.previous-project,
.next-project {
    position: relative;
    display: inline-block;
    width: 90.164%;
    padding: 1.8125rem 0;
    font-family: 'Austin-Bold', serif;
    font-size: 2.8125rem;
    text-align: center;
    background: url(themes/circles/circle.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

.desc-logo-base {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    width: 87.5%;
    margin: 0 auto;
}

.desc-buttons {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    width: 87.5%;
}

.desc-logo .desc-logo-base img {
    margin-bottom: 1.25rem;
}

.desc-logo .desc-logo-base button {
    padding: 0.5rem 0;
    font-family: 'Austin-Bold', serif;
    font-size: 1.375rem;
    text-transform: uppercase;
    background-color: #fff;
    border: solid 0.1875rem #d41277;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

.desc-logo .desc-logo-base button:first-of-type {
    margin-bottom: 0.625rem;
}

.desc-logo .desc-logo-base button:hover,
.desc-logo .desc-logo-base button:focus {
    color: #fff;
    background-color: #d41277;
    border: solid 0.1875rem #8b084d;
}

.desc {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

.desc img {
    margin-bottom: 0.625rem;
}

.desc article {
    position: relative;
    padding: 0.5rem;
    background-color: #fff;
    border: solid 0.1875rem #8b084d;
}

.desc h3 {
    font-family: 'Austin-Bold', serif;
    font-size: 1.375rem;
    text-transform: uppercase;
    text-align: center;
}

.desc.desc-concept h3 {
    text-transform: none;
}

.close-desc {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 1.375rem;
    right: 0.5rem;
}

.close-desc span {
    display: inline-block;
    width: 1.125rem;
    height: 0.1875rem;
    background-color: #d41277;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

.close-desc:hover span,
.close-desc:focus span {
    background-color: #8b084d;
}

.close-desc span:first-of-type,
.close-desc span:first-of-type {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-desc span:last-of-type,
.close-desc span:last-of-type {
    position: relative;
    bottom: 0.1875rem;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.owl-carousel .owl-dots {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    width: 35%;
    margin: 1.25rem auto;
}

.owl-carousel button.owl-dot {
    width: 1rem;
    height: 1rem;
    background-color: #fff;
    border: solid 0.1875rem #d41277;
    border-radius: 50%;
    -webkit-transition: background-color .7s;
    -o-transition: background-color .7s;
    transition: background-color .7s;
}

.owl-carousel button.owl-dot:hover,
.owl-carousel button.owl-dot:focus,
.owl-carousel button.owl-dot.active {
    background-color: #d41277;
}

.links {
    font-family: 'ChaletBook-Bold', sans-serif;
    color: #d41277;
}





/***** COMPARADISE *****/
.bg-comparadise {
    z-index: 10;
    position: relative;
    background: url(themes/bg-projets/bg-comparadise.jpg) no-repeat -20.4375rem;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-comparadise::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
}

.comparadise-emailings img {
    width: 90.164%;
}

.comparadise-data img {
    width: 82%;
}

.comparadise-previous {
    background: url(themes/bg/mobile/bg-triangle-next.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.comparadise-next {
    background: url(themes/bg/mobile/bg-triangle-fake-records.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.comparadise-previous h2:hover,
.comparadise-previous h2:focus {
    background: url(themes/circles/circle-next.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.comparadise-next h2:hover,
.comparadise-next h2:focus {
    background: url(themes/circles/circle-fake-records.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}





/***** FAKE RECORDS *****/
.bg-fake-records {
    z-index: 10;
    position: relative;
    background: url(themes/bg-projets/bg-fake-records.jpg) no-repeat -5.5625rem;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-fake-records::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
}

.fake-records-previous {
    background: url(themes/bg/mobile/bg-triangle-comparadise.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.fake-records-next {
    background: url(themes/bg/mobile/bg-triangle-juicy-garden.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.fake-records-previous h2:hover,
.fake-records-previous h2:focus {
    background: url(themes/circles/circle-comparadise.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.fake-records-next h2:hover,
.fake-records-next h2:focus {
    background: url(themes/circles/circle-juicy-garden.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}





/***** JUICY GARDEN *****/
.bg-juicy-garden {
    z-index: 10;
    position: relative;
    background: url(themes/bg-projets/bg-juicy-garden.jpg) no-repeat -10rem;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-juicy-garden::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
}

.juicy-garden-concept img {
    width: 50%;
    margin-bottom: 0.625rem;
}

.juicy-garden-flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    justify-content: space-around;
}

.juicy-garden-flex figcaption {
    font-family: 'Austin-Bold', serif;
    text-align: center;
}

.juicy-garden-recipes figure:nth-of-type(2) br,
.juicy-garden-profile figure br,
.juicy-garden-last figure br {
    display: none;
}

.juicy-garden-previous {
    background: url(themes/bg/mobile/bg-triangle-fake-records.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.juicy-garden-next {
    background: url(themes/bg/mobile/bg-triangle-camion-fume.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.juicy-garden-previous h2:hover,
.juicy-garden-previous h2:focus {
    background: url(themes/circles/circle-fake-records.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.juicy-garden-next h2:hover,
.juicy-garden-next h2:focus {
    background: url(themes/circles/circle-camion-fume.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}





/***** LE CAMION QUI FUME *****/
.bg-camion-fume {
    z-index: 10;
    position: relative;
    background: url(themes/bg-projets/bg-camion-fume.jpg) no-repeat center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-camion-fume::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
}

.camion-fume-mockup {
    padding: 0;
    background: url(themes/mockups/camion-fume-mockup.jpg) no-repeat -14.3125rem;
    -webkit-background-size: cover;
    background-size: cover;
}

.camion-fume-mockup::after {
    content: "";
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 25%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 25%);
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 25%);
}

.camion-fume-double-height-auto {
    height: 200vh;
}

.camion-fume-triple-height-auto {
    height: 300vh;
}

.camion-fume-previous {
    background: url(themes/bg/mobile/bg-triangle-juicy-garden.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.camion-fume-next {
    background: url(themes/bg/mobile/bg-triangle-bookster.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.camion-fume-previous h2:hover,
.camion-fume-previous h2:focus {
    background: url(themes/circles/circle-juicy-garden.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.camion-fume-next h2:hover,
.camion-fume-next h2:focus {
    background: url(themes/circles/circle-bookster.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}





/***** BOOKSTER *****/
.bg-bookster {
    z-index: 10;
    position: relative;
    background: url(themes/bg-projets/bg-bookster.jpg) no-repeat center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-bookster::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
}

.bookster-concept img {
    width: 40%;
    margin-bottom: 0.625rem;
}

.bookster-concept .desc-concept {
    -ms-align-items: flex-start;
    align-items: flex-start;
}

.bookster-typo img {
    margin-bottom: 1.25rem;
}

.bookster-typo .desc-typo {
    -ms-align-items: flex-start;
    align-items: flex-start;
}

.bookster-mockup {
    padding: 0;
}

.bookster-mockup01 {
    background: url(themes/mockups/bookster-mockup01.jpg) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
}

.bookster-mockup02 {
    background: url(themes/mockups/bookster-mockup02.jpg) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
}

.bookster-previous {
    background: url(themes/bg/mobile/bg-triangle-camion-fume.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.bookster-next {
    background: url(themes/bg/mobile/bg-triangle-seven.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.bookster-previous h2:hover,
.bookster-previous h2:focus {
    background: url(themes/circles/circle-camion-fume.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.bookster-next h2:hover,
.bookster-next h2:focus {
    background: url(themes/circles/circle-seven.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}





/***** SEVEN *****/
.bg-seven {
    z-index: 10;
    position: relative;
    background: url(themes/bg-projets/bg-seven.jpg) no-repeat center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-seven::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    background: -o-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    background: linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}

.seven-concept figcaption span {
    font-family: 'ChaletBook-BoldItalic', sans-serif;
}

.seven-mockup {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    justify-content: space-between;
}

.seven-mockup img {
    width: 45%;
}

.seven-previous {
    background: url(themes/bg/mobile/bg-triangle-bookster.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.seven-next {
    background: url(themes/bg/mobile/bg-triangle-resume-bd.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.seven-previous h2:hover,
.seven-previous h2:focus {
    background: url(themes/circles/circle-bookster.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.seven-next h2:hover,
.seven-next h2:focus {
    background: url(themes/circles/circle-resume-bd.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}





/***** RESUME BD *****/
.bg-resume-bd {
    z-index: 10;
    position: relative;
    background: url(themes/bg-projets/bg-resume-bd.jpg) no-repeat center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-resume-bd::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
    background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
}

.resume-bd-concept img,
.resume-bd-synopsis img {
    width: 50%;
}

.resume-bd-concept figcaption span {
    font-family: 'ChaletBook-BoldItalic', sans-serif;
}

.resume-bd-synopsis img {
    margin-bottom: 1.25rem;
}

.resume-bd-synopsis h3 {
    text-transform: none;
}

.resume-bd-synopsis h3 span {
    font-family: 'Austin-BoldItalic', serif;
}

.resume-bd-extraits {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.resume-bd-extraits figure {
    -ms-align-items: center;
    align-items: center;
    width: 48%;
}

.resume-bd-extraits figure:last-of-type {
    margin: 0 auto;
}

.resume-bd-extraits figcaption {
    font-family: 'Austin-Bold', serif;
    font-size: 0.9375rem;
    text-align: center;
}

.resume-bd-mockup img {
    position: relative;
    left: 3.5%;
}

.resume-bd-previous {
    background: url(themes/bg/mobile/bg-triangle-seven.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.resume-bd-next {
    background: url(themes/bg/mobile/bg-triangle-next.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.resume-bd-previous h2:hover,
.resume-bd-previous h2:focus {
    background: url(themes/circles/circle-seven.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.resume-bd-next h2:hover,
.resume-bd-next h2:focus {
    background: url(themes/circles/circle-next.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}





/***** NEXT *****/
.bg-next {
    z-index: 10;
    position: relative;
    background: url(themes/bg-projets/bg-next.jpg) no-repeat center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

.bg-next::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    background: -webkit-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    background: -o-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
    background: linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}

.next-logos figcaption,
.next-shooting p {
    font-family: 'Austin-Bold', serif;
}

.next-logos figure {
    width: 80%;
}

.next-logos figure:first-of-type {
    margin-bottom: 1.25rem;
}

.next-shooting div {
    margin-bottom: 1.25rem;
}

.next-shooting div img {
    width: 60%;
}

.next-mockup {
    padding: 0;
    background: url(themes/mockups/next-mockup.jpg) no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
}

.next-previous {
    background: url(themes/bg/mobile/bg-triangle-resume-bd.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.next-next {
    background: url(themes/bg/mobile/bg-triangle-comparadise.svg) repeat center #fff;
    -webkit-background-size: contain;
    background-size: contain;
}

.next-previous h2:hover,
.next-previous h2:focus {
    background: url(themes/circles/circle-resume-bd.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}

.next-next h2:hover,
.next-next h2:focus {
    background: url(themes/circles/circle-comparadise.svg) no-repeat;
    -webkit-background-size: 7.8125rem;
    background-size: 7.8125rem;
    background-position: center;
}










/********** CONTACT **********/
.contact-height {
    padding-top: 20.8333vh;
}

.contact {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    width: 95%;
    margin: 0 auto;
}

.contact h1 {
    margin-bottom: 2.5rem;
    font-family: 'Austin-Bold', serif;
    font-size: 2.8125rem;
    line-height: 1;
    text-align: center;
}

.contact .article a {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.1875rem 0;
    background: url('themes/circles/circle-contact.svg') no-repeat center;
    -webkit-background-size: 100%;
    background-size: 100%;
    -webkit-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;
}

.contact .article a:hover,
.contact .article a:focus {
    background: url('themes/circles/circle-contact-hover.svg') no-repeat center;
}

.contact .article a svg .fill-change {
    -webkit-transition: fill .7s;
    -o-transition: fill .7s;
    transition: fill .7s;
}

.contact .article a:hover svg .fill-change,
.contact .article a:focus svg .fill-change {
    fill: #fff;
}

.contact .article a:hover svg .fill-change-reverse,
.contact .article a:focus svg .fill-change-reverse {
    fill: #d41277;
}

.contact .article:first-of-type {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

.contact .article:first-of-type figure {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    width: 7.8125rem;
    height: 7.8125rem;
    padding: 1.625rem 0;
    background: url('themes/circles/circle-contact.svg') no-repeat center;
    -webkit-background-size: 100%;
    background-size: 100%;
    -webkit-transition: color .7s;
    -o-transition: color .7s;
    transition: color .7s;
}

.contact .article:first-of-type a figure {
    color: #d41277;
    background: transparent;
}

.contact .article:first-of-type a:hover figure,
.contact .article:first-of-type a:focus figure {
    color: #fff;
}

.contact .article:first-of-type figure:nth-of-type(2) {
    margin: 1.25rem 0;
}

.contact .article:first-of-type figure svg {
    width: 40%;
    margin-bottom: 0.3125rem;
}

.contact .article:first-of-type figure a {
    width: 7.8125rem;
}

.contact .article:first-of-type a svg {
    width: 100%;
}

.contact .article:last-of-type {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
    width: 12.5rem;
    margin: 2.5rem auto 20.8333vh auto;
}

.contact .article:last-of-type a {
    width: 5.46875rem;
}

.contact .article:last-of-type a:first-of-type,
.contact .article:last-of-type a:nth-of-type(2) {
    margin-bottom: 1.25rem;
}

.contact article:last-of-type a img {
    width: 55.23%;
}










/********************* MEDIA QUERIES ********************/
@media screen and (min-width: 340px) {
    .camion-fume-mockup {
        padding: 0;
        background: url(themes/mockups/camion-fume-mockup.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
    }
}



@media screen and (min-width: 354px) {
    .juicy-garden-recipes figure:nth-of-type(2) br {
        display: block;
    }
}



@media screen and (min-width: 356px) {
    .juicy-garden-recipes figure:first-of-type br,
    .juicy-garden-recipes figure:nth-of-type(2) br {
        display: none;
    }
}



@media screen and (min-width: 374px) {
    .juicy-garden-profile figure:first-of-type br {
        display: block;
    }
}



@media screen and (min-width: 387px) {
    .juicy-garden-profile figure:nth-of-type(2) br {
        display: block;
    }
}



@media screen and (min-width: 390px) {
    /***** COMPARADISE *****/
    .bg-comparadise {
        background: url(themes/bg-projets/bg-comparadise.jpg) no-repeat center;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }
}



@media screen and (min-width: 455px) {
    .juicy-garden-last figure:first-of-type br {
        display: block;
    }
}



@media screen and (min-width: 467px) {
    .juicy-garden-last figure:nth-of-type(2) br {
        display: block;
    }
    
    .juicy-garden-profile figure:first-of-type br,
    .juicy-garden-profile figure:nth-of-type(2) br {
        display: none;
    }
}



@media screen and (min-width: 526px) {
    .juicy-garden-last figure:first-of-type br,
    .juicy-garden-last figure:nth-of-type(2) br {
        display: none;
    }
}



@media screen and (min-width: 580px) {
    /********** GENERAL **********/
    .bg-general {
        -webkit-background-size: contain;
        background-size: contain;
    }
    
    
    
    
    
    /***** QUALITÉS *****/
    .qualities h2 {
        margin-top: 0;
    }

    .qualities aside {
        top: 0.9375rem;
    }

    .qualities aside img {
        width: 28%;
    }

    .qualities aside article {
        width: 68%;
    }
}



@media screen and (min-width: 630px) {
    /***** FAKE RECORDS *****/
    .bg-fake-records {
        background: url(themes/bg-projets/bg-fake-records.jpg) no-repeat center;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }
}



@media screen and (min-width: 768px) {
    /********** GENERAL **********/
    .first-section {
        background: url(themes/bg/tablet/bg-triangle-general.svg) center;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .no-bg {
        background: none;
    }

    .bg-general {
        background: url(themes/bg/tablet/bg-triangle-general.svg) center;
        -webkit-background-size: cover;
        background-size: cover;
        background-attachment: fixed;
    }

    .comparadise {
        background: url(themes/bg/tablet/bg-triangle-comparadise.svg);
    }

    .fake-records {
        background: url(themes/bg/tablet/bg-triangle-fake-records.svg);
    }

    .juicy-garden {
        background: url(themes/bg/tablet/bg-triangle-juicy-garden.svg);
    }

    .camion-fume {
        background: url(themes/bg/tablet/bg-triangle-camion-fume.svg);
    }

    .bookster {
        background: url(themes/bg/tablet/bg-triangle-bookster.svg);
    }

    .seven {
        background: url(themes/bg/tablet/bg-triangle-seven.svg);
    }

    .resume-bd {
        background: url(themes/bg/tablet/bg-triangle-resume-bd.svg);
    }

    .next {
        background: url(themes/bg/tablet/bg-triangle-next.svg);
    }
      
    br.hide {
        display: none;
    }
    
    
    
    
    
    
    
    
    
    /********** 404 **********/
    .main-404 h1 {
        font-size: 10rem;
    }

    .main-404 strong {
        font-size: 1.75rem;
    }
    
    
    
    
    
    
    
    
    
    
    /********** HEADER **********/
    header {
        top: 3vh;
        z-index: 500;
        width: 87.5%;
    }
    
    
    
    /*** BURGER ***/
    .burger {
        visibility: hidden;
    }
    
    
    
    /*** BACK ***/
    .back {
        width: 16.24%;
    }

    .back svg {
        width: 100%;
    }
    
    
    
    /*** NAV ***/
    nav {
        visibility: visible;
        position: relative;
        right: 0;
        z-index: 500;
        width: 84.78%;
        height: inherit;
        opacity: 1;
    }

    nav ul {
        position: inherit;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        justify-content: flex-end;
        width: 100%;
        height: inherit;
        margin: 0;
        background-color: transparent;
        border-radius: 0;
    }

    nav ul li a {
        font-size: 1.5rem;
    }

    nav ul li:nth-of-type(2) a {
        margin: 0 2.1875rem;
    }

    nav ul li a::before {
        height: 0.3125rem;
    }

    .current::before {
        height: 0.3125rem;
    }

    /*** NAV SUB-PORTFOLIO ***/
    nav .sub-portfolio {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        padding: 10% 6.25% 5%;
        background: rgba(255, 255, 255, 0.95);
    }

    nav .sub-portfolio li .sub-visuel {
        top: 18vh;
        width: 55%;
        height: 70vh;
    }

    nav .sub-portfolio li .sub-visuel-general {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-general.svg) no-repeat center;
    }

    nav .sub-portfolio li .sub-visuel-comparadise {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-comparadise.svg) no-repeat center;
    }

    nav .sub-portfolio li .sub-visuel-fake-records {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-fake-records.svg) no-repeat center;
    }

    nav .sub-portfolio li .sub-visuel-juicy-garden {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-juicy-garden.svg) no-repeat center;
    }

    nav .sub-portfolio li .sub-visuel-camion-fume {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-camion-fume.svg) no-repeat center;
    }

    nav .sub-portfolio li .sub-visuel-bookster {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-bookster.svg) no-repeat center;
    }

    nav .sub-portfolio li .sub-visuel-seven {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-seven.svg) no-repeat center;
    }

    nav .sub-portfolio li .sub-visuel-resume-bd {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-resume-bd.svg) no-repeat center;
    }

    nav .sub-portfolio li .sub-visuel-next {
        background: url(themes/sub-portfolio/desktop-tablet/visuel-sub-next.svg) no-repeat center;
    }
    
    
    
    /*** DOWN ***/
    .down {
        left: 46.5%;
        width: 7%;
    }

    
    
    
    
    
    /***** MAIN *****/
    .main-circle {
        width: 20.8333333rem;
        height: 20.8333333rem;
    }

    main img {
        width: 68%;
    }

    main h1 {
        font-size: 2.75rem;
    }

    main strong {
        font-size: 1.375rem;
    }
    
    
    
    
    
    /***** SECTIONS HOME *****/
    .home-section {
        background-position: center;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .home-section h2 {
        width: 82.471%;
        padding: 7.28125rem 0;
        font-size: 7.1875rem;
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
        background-position: center;
    }

    .home-section.comparadise h2:hover,
    .home-section.comparadise h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .home-section.fake-records h2:hover,
    .home-section.fake-records h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .home-section.juicy-garden h2:hover,
    .home-section.juicy-garden h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .home-section.camion-fume h2:hover,
    .home-section.camion-fume h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .home-section.bookster h2:hover,
    .home-section.bookster h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .home-section.seven h2:hover,
    .home-section.seven h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .home-section.resume-bd h2:hover,
    .home-section.resume-bd h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .home-section.next h2:hover,
    .home-section.next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    
    
    
    
    
    
    
    
    
    /********** WHO **********/
    .qualities .list-qualities,
    .skills .list-skills,
    .tasks .list-tasks,
    .passions .list-passions {
        width: 90.885417%;
    }

    .who h1,
    h2 {
        font-size: 5.9375rem;
    }
    
    
    
    
    
    /***** INTRO *****/
    .who h1 {
        margin-bottom: 0.9375rem;
    }
    
    .main-who img {
        width: 65.105%;
    }

    .who .img {
        -webkit-clip-path: circle(38% at center);
        -o-clip-path: circle(38% at center);
        clip-path: circle(38% at center);
        margin-top: 8.125rem;
    }

    .who section {
        bottom: 8.125rem;
        width: 90.885417%;
        padding: 1.875rem;
        font-size: 2rem;
    }
    
    
    
    
    
    /***** QUALITÉS *****/
    .qualities h2 {
        margin-top: 1.875rem;
    }

    .qualities section {
        width: 90.885417%;
    }

    .qualities .list-qualities {
        padding: 3.125rem;
    }

    .qualities .list-qualities figure {
        width: 33%;
    }

    .list-qualities figure:first-of-type,
    .list-qualities figure:nth-of-type(2),
    .list-qualities figure:nth-of-type(3) {
        margin-bottom: 1.5625rem;
    }

    .qualities .list-qualities figure img {
        width: 52%;
    }

    .qualities .list-qualities figure figcaption {
        font-size: 2rem;
    }

    .qualities aside {
        top: -1.875rem;
        width: 90.885417%;
    }

    .qualities aside img {
        width: 36%;
        padding: 2.78rem;
    }

    .qualities aside article {
        width: 62%;
        padding: 3.125rem;
    }

    .qualities aside article h3 {
        font-size: 4.375rem;
    }

    .qualities aside article p {
        font-size: 2rem;
    }
    
    
    
    
    
    /***** COMPÉTENCES *****/
    .skills .list-skills figure figcaption {
        font-size: 2rem;
    }

    .softwares {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-align-items: center;
        align-items: center;
        width: 55%;
        padding: 3.125rem 0.375rem;
    }

    .softwares figure {
        display: inline-block;
        width: 50%;
    }

    .softwares figure img {
        width: 57.9%;
        margin-right: 0;
    }

    .computing {
        width: 43%;
        padding: 3.125rem;
    }

    .computing figure {
        margin-bottom: 1.5625rem;
    }

    .computing figure img {
        width: 41.181%;
    }
    
    
    
    
    
    /***** TÂCHES *****/
    .tasks .list-tasks figure figcaption {
        font-size: 2rem;
    }

    .tasks figure {
        height: 14.0625rem;
        margin-bottom: 1.5625rem;
        padding: 1.5625rem;
    }

    .tasks figure img {
        width: 62.14%;
    }
    
    
    
    
    
    /***** PASSIONS *****/
    .passions .list-passions figure figcaption {
        font-size: 2rem;
    }

    .passions section {
        width: 90.885417%;
    }

    .list-passions {
        padding: 0.9375rem 0.3125rem;
        background-color: rgba(255, 255, 255, 0.75);
    }

    .list-passions figure {
        width: 50%;
    }

    .list-passions figure:first-of-type,
    .list-passions figure:nth-of-type(2),
    .list-passions figure:nth-of-type(3) {
        margin-bottom: 1.25rem;
    }

    .list-passions figure img {
        width: 31.142%;
    }
    
    
    
    /*** TOP ***/
    .top {
        position: absolute;
        bottom: 2.584%;
        left: 46.5%;
        width: 7%;
    }
    
    
    
    
    
    
    
    
    
    
    /********** PROJETS **********/
    .light-veil figure img {
        margin-bottom: 2.5rem;
    }
    
    .light-veil figure figcaption {
        font-size: 2rem;
    }

    .project h1 {
        width: 82.471%;
        padding: 7.28125rem 0;
        font-size: 7.1875rem;
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
        background-position: center;
    }
    
    .previous-project,
    .next-project {
        width: 82.471%;
        padding: 7.28125rem 0;
        font-size: 7.1875rem;
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
        background-position: center;
    }
    
    .desc-buttons {
       width: 75%;
    }

    .desc-logo .desc-logo-base img {
        margin-bottom: 2.5rem;
    }

    .desc-logo .desc-logo-base button {
        padding: 1.5rem 0;
        font-size: 2.375rem;
        border: solid 0.3125rem #d41277;
    }
    
    .desc-logo .desc-logo-base button:hover,
    .desc-logo .desc-logo-base button:focus {
        border: solid 0.3125rem #8b084d;
    }

    .desc-logo .desc-logo-base button:first-of-type {
        margin-bottom: 1.25rem;
    }

    .desc img {
        margin-bottom: 1.25rem;
    }

    .desc article {
        padding: 1.5rem;
    }

    .desc h3 {
        font-size: 2.375rem;
    }
    
    .desc p {
        font-size: 2rem;
    }

    .close-desc {
        top: 2.375rem;
        right: 1.5rem;
    }
    
    .close-desc span {
        width: 2.125rem;
        height: 0.3125rem;
    }
    
    .close-desc span:last-of-type,
    .close-desc span:last-of-type {
        bottom: 0.3125rem;
    }
    
    .poster img {
        width: 85%;
    }

    .owl-carousel .owl-dots {
        width: 30%;
        margin: 2.5rem auto;
    }

    .owl-carousel button.owl-dot {
        width: 2rem;
        height: 2rem;
        border: solid 0.3125rem #d41277;
    }




    
    /***** COMPARADISE *****/
    .comparadise-emailings img {
        width: 80.164%;
    }

    .comparadise-data img {
        width: 62%;
    }

    .comparadise-previous {
        background: url(themes/bg/tablet/bg-triangle-next.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .comparadise-next {
        background: url(themes/bg/tablet/bg-triangle-fake-records.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .comparadise-previous h2:hover,
    .comparadise-previous h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .comparadise-next h2:hover,
    .comparadise-next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    
    
    
    
    
    /***** FAKE RECORDS *****/
    .fake-records-previous {
        background: url(themes/bg/tablet/bg-triangle-comparadise.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .fake-records-next {
        background: url(themes/bg/tablet/bg-triangle-juicy-garden.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .fake-records-previous h2:hover,
    .fake-records-previous h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .fake-records-next h2:hover,
    .fake-records-next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    
    
    
    
    /***** JUICY GARDEN *****/
    .juicy-garden-concept img {
        width: 50%;
        margin-bottom: 1.25rem;
    }
    
    .juicy-garden-profile figure:first-of-type br {
        display: block;
    }
    
    .juicy-garden-previous {
        background: url(themes/bg/tablet/bg-triangle-fake-records.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .juicy-garden-next {
        background: url(themes/bg/tablet/bg-triangle-camion-fume.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .juicy-garden-previous h2:hover,
    .juicy-garden-previous h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .juicy-garden-next h2:hover,
    .juicy-garden-next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    .juicy-garden-next .next-project {
        padding: 5.28125rem 0;
    }
    
    
    
    
    
    /***** LE CAMION QUI FUME *****/
    .camion-fume-mockup {
        background: url(themes/mockups/camion-fume-mockup.jpg) no-repeat -28rem;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .camion-fume-double-height-auto {
        height: 250vh;
    }

    .camion-fume-triple-height-auto {
        height: 350vh;
    }
    
    .camion-fume-previous {
        background: url(themes/bg/tablet/bg-triangle-juicy-garden.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .camion-fume-next {
        background: url(themes/bg/tablet/bg-triangle-bookster.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .camion-fume-previous h2:hover,
    .camion-fume-previous h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .camion-fume-next h2:hover,
    .camion-fume-next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    
    
    
    
    /***** BOOKSTER *****/
    .bookster-previous {
        background: url(themes/bg/tablet/bg-triangle-camion-fume.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .bookster-next {
        background: url(themes/bg/tablet/bg-triangle-seven.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .bookster-previous h2:hover,
    .bookster-previous h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .bookster-next h2:hover,
    .bookster-next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    
    
    
    
    /***** SEVEN *****/
    .seven-previous {
        background: url(themes/bg/tablet/bg-triangle-bookster.svg) repeat center #fff;
        -webkit-background-size: contain;
        background-size: contain;
    }

    .seven-next {
        background: url(themes/bg/tablet/bg-triangle-resume-bd.svg) repeat center #fff;
        -webkit-background-size: contain;
        background-size: contain;
    }

    .seven-previous h2:hover,
    .seven-previous h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .seven-next h2:hover,
    .seven-next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    
    
    
    
    /***** RESUME BD *****/
    .resume-bd-previous {
        background: url(themes/bg/tablet/bg-triangle-seven.svg) repeat center #fff;
        -webkit-background-size: contain;
        background-size: contain;
    }

    .resume-bd-next {
        background: url(themes/bg/tablet/bg-triangle-next.svg) repeat center #fff;
        -webkit-background-size: contain;
        background-size: contain;
    }

    .resume-bd-previous h2:hover,
    .resume-bd-previous h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .resume-bd-next h2:hover,
    .resume-bd-next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    
    
    
    
    /***** NEXT *****/
    .next-concept p,
    .next-logos figcaption,
    .next-shooting p {
        font-size: 2rem;
    }
    
    .next-shooting img {
        width: 50%;
    }

    .next-previous {
        background: url(themes/bg/tablet/bg-triangle-resume-bd.svg) repeat center #fff;
        -webkit-background-size: contain;
        background-size: contain;
    }

    .next-next {
        background: url(themes/bg/tablet/bg-triangle-comparadise.svg) repeat center #fff;
        -webkit-background-size: contain;
        background-size: contain;
    }

    .next-previous h2:hover,
    .next-previous h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }

    .next-next h2:hover,
    .next-next h2:focus {
        -webkit-background-size: 18.75rem;
        background-size: 18.75rem;
    }
    
    
    
    
    
    
    
    
    
    
    /********** CONTACT **********/
    .contact {
        width: 90.885417%;
    }

    .contact h1 {
        margin-bottom: 2rem;
        font-size: 5.9375rem;
    }

    .contact .article a {
        padding: 2.5rem 0;
    }

    .contact .article figcaption {
        font-size: 1.5rem;
    }

    .contact .article:first-of-type {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .contact .article:first-of-type figure {
        justify-content: center;
        width: 17.1875rem;
        height: 17.1875rem;
        padding: 0;
        background: url('themes/circles/circle-contact.svg') no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    .contact .article:first-of-type figure:nth-of-type(2) {
        margin: 0;
    }

    .contact .article:first-of-type figure svg {
        width: 36.364%;
        margin-bottom: 0.625rem;
    }

    .contact .article:first-of-type a {
        margin: 0 auto;
    }

    .contact .article:first-of-type figure a {
        width: 17.1875rem;
    }

    .contact .article:first-of-type a svg {
        width: 36.364%;
    }

    .contact .article:last-of-type {
        width: 25rem;
        margin: 2.5rem auto 20.8333vh auto;
    }

    .contact .article:last-of-type a {
        width: 43.75%;
    }

    .contact .article:last-of-type a:first-of-type,
    .contact .article:last-of-type a:nth-of-type(2) {
        margin-bottom: 1.25rem;
    }

    .contact .article:last-of-type a svg {
        width: 55.23%;
    }
}



@media screen and (min-width: 773px) {
    .juicy-garden-profile figure:nth-of-type(2) br {
        display: block;
    }
}
    
    

@media screen and (min-width: 909px) {
    .juicy-garden-last figure:first-of-type br {
        display: block;
    }
}

    
    
@media screen and (min-width: 923px) {
    /********** CONTACT **********/
    .contact .article:first-of-type figure {
        width: 19.6875rem;
        height: 19.6875rem;
    }
}



@media screen and (min-width: 934px) {
    .juicy-garden-profile figure:first-of-type br,
    .juicy-garden-profile figure:nth-of-type(2) br {
        display: none;
    }
    
    .juicy-garden-last figure:nth-of-type(2) br {
        display: block;
    }
}
    
    

@media screen and (min-width: 1024px) {
    /********** GENERAL **********/
    .first-section {
        background: url(themes/bg/desktop/bg-triangle-general.svg) center;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .no-bg {
        background: none;
    }

    .bg-general {
        background: url(themes/bg/desktop/bg-triangle-general.svg) center;
        -webkit-background-size: cover;
        background-size: cover;
        background-attachment: fixed;
    }

    .comparadise {
        background: url(themes/bg/desktop/bg-triangle-comparadise.svg);
    }

    .fake-records {
        background: url(themes/bg/desktop/bg-triangle-fake-records.svg);
    }

    .juicy-garden {
        background: url(themes/bg/desktop/bg-triangle-juicy-garden.svg);
    }

    .camion-fume {
        background: url(themes/bg/desktop/bg-triangle-camion-fume.svg);
    }

    .bookster {
        background: url(themes/bg/desktop/bg-triangle-bookster.svg);
    }

    .seven {
        background: url(themes/bg/desktop/bg-triangle-seven.svg);
    }

    .resume-bd {
        background: url(themes/bg/desktop/bg-triangle-resume-bd.svg);
    }

    .next {
        background: url(themes/bg/desktop/bg-triangle-next.svg);
    }
    
    
    
    
    
    
    
    
    /********** 404 **********/
    .main-404 h1 {
        font-size: 15rem;
    }

    .main-404 strong {
        font-size: 2.5rem;
    }
    
    
    
    
    
    /***** HEADER *****/
    /*** BACK ***/
    .back {
        width: 16.254%;
    }

    /*** NAV ***/
    nav {
        width: 83.746%;
    }

    nav ul li a {
        font-size: 2.125rem;
    }

    nav ul li:nth-of-type(2) a {
        margin: 0 3.125rem;
    }
    
    
    
    /*** TOP ***/
    .top {
        width: 8%;
    }
    
    
    
    
    
    /***** MAIN *****/
    .main-circle {
        width: 31.25rem;
        height: 31.25rem;
    }

    main h1 {
        font-size: 4.125rem;
    }

    main strong {
        font-size: 2.0625rem;
    }
    
    
    
    
    
    /***** SECTIONS HOME *****/
    .home-section {
        background-position: center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    
    
    
    
    
    /********** PROJETS **********/
    .light-veil figure img {
        margin-bottom: 3.125rem;
    }
    
    .desc.desc-concept h3 br {
        display: none;
    }





    /***** COMPARADISE *****/
    .bg-comparadise {
        background: url(themes/bg-projets/bg-comparadise.jpg) no-repeat -5rem;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .comparadise-data img {
        width: 72%;
    }

    .comparadise-previous {
        background: url(themes/bg/desktop/bg-triangle-next.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .comparadise-next {
        background: url(themes/bg/desktop/bg-triangle-fake-records.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    /***** FAKE RECORDS *****/
    .bg-fake-records {
        background: url(themes/bg-projets/bg-fake-records.jpg) no-repeat -15rem;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .fake-records-previous {
        background: url(themes/bg/desktop/bg-triangle-comparadise.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .fake-records-next {
        background: url(themes/bg/desktop/bg-triangle-juicy-garden.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    /***** JUICY GARDEN *****/
    .bg-juicy-garden {
        background: url(themes/bg-projets/bg-juicy-garden.jpg) no-repeat -25rem;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .juicy-garden-flex figcaption {
        font-size: 2rem;
    }
    
    .juicy-garden-comment br {
        display: none;
    }

    .juicy-garden-previous {
        background: url(themes/bg/desktop/bg-triangle-fake-records.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .juicy-garden-next {
        background: url(themes/bg/desktop/bg-triangle-camion-fume.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    /***** LE CAMION QUI FUME *****/
    .camion-fume-previous {
        background: url(themes/bg/desktop/bg-triangle-juicy-garden.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .camion-fume-next {
        background: url(themes/bg/desktop/bg-triangle-bookster.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    /***** BOOKSTER *****/
    .bookster-previous {
        background: url(themes/bg/desktop/bg-triangle-camion-fume.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .bookster-next {
        background: url(themes/bg/desktop/bg-triangle-seven.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    /***** SEVEN *****/
    .seven-previous {
        background: url(themes/bg/desktop/bg-triangle-bookster.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .seven-next {
        background: url(themes/bg/desktop/bg-triangle-resume-bd.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    /***** RESUME BD *****/
    .resume-bd-previous {
        background: url(themes/bg/desktop/bg-triangle-seven.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .resume-bd-next {
        background: url(themes/bg/desktop/bg-triangle-next.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    /***** NEXT *****/
    .next-previous {
        background: url(themes/bg/desktop/bg-triangle-resume-bd.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .next-next {
        background: url(themes/bg/desktop/bg-triangle-comparadise.svg) no-repeat center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    
    
    
    
    
    /********** CONTACT **********/
    .contact {
        width: 90.885417%;
    }
    
    .contact h1 {
        margin-bottom: 1.5rem;
    }

    .contact .article a {
        padding: 2.5rem 0;
    }

    .contact .article figcaption {
        font-size: 2rem;
    }

    .contact .article:first-of-type {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .contact .article:first-of-type figure {
        width: 17.1875rem;
        height: 17.1875rem;
    }

    .contact .article:first-of-type a {
        margin: 0;
    }

    .contact .article:last-of-type {
        width: 53.125rem;
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .contact .article:last-of-type a {
        width: 20.59%;
    }

    .contact .article:last-of-type a svg {
        width: 57.15%;
    }
}



@media screen and (min-width: 1052px) {
    .juicy-garden-last figure:first-of-type br,
    .juicy-garden-last figure:nth-of-type(2) br {
        display: none;
    }
}



@media screen and (min-width: 1260px) {
    .camion-fume-mockup {
        background: url(themes/mockups/camion-fume-mockup.jpg) no-repeat top center;
        -webkit-background-size: cover;
        background-size: cover;
        height: 150vh;
    }
    
    .camion-fume-mockup::after {
        height: 150vh;
    }
}



@media screen and (min-width: 1280px) {
    /********** HEADER **********/
    /*** TOP ***/
    .top {
        left: 47%;
        width: 4%;
    }
    
    
    
    /*** DOWN ***/
    .down {
        bottom: 3.584%;
        left: 47%;
        width: 4%;
    }
    
    
    
    
    
    
    
    
    
    
    /********** WHO **********/
    .who {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
    }

    .qualities .list-qualities,
    .skills .list-skills,
    .tasks .list-tasks,
    .passions .list-passions {
        width: 90.885417%;
    }
    
    .who h1,
    h2 {
        font-size: 3.8125rem;
    }
    
    
    
    
    
    /***** INTRO *****/
    .who h1 {
        margin-bottom: 1.5625rem;
    }
    
    .main-who img {
        width: 100%;
    }

    .who .img {
        width: 50%;
        margin-top: 0;
        margin-left: 9.0625rem;
        -webkit-clip-path: circle(48% at center);
        -o-clip-path: circle(48% at center);
        clip-path: circle(48% at center);
    }

    .who section {
        bottom: 0;
        right: 9.0625rem;
        width: 51.58%;
        padding: 3.125rem 1.25rem;
        font-size: 1.5rem;
    }
    
    
    
    
    
    /***** QUALITÉS *****/
    .qualities h2 {
        margin-top: -0.9375rem;
    }

    .qualities section {
        width: 90.885417%;
    }

    .qualities .list-qualities {
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding: 1.5625rem 0;
    }

    .qualities .list-qualities figure {
        width: 100%;
    }

    .list-qualities figure:first-of-type,
    .list-qualities figure:nth-of-type(2),
    .list-qualities figure:nth-of-type(3) {
        margin-bottom: 0;
    }

    .qualities .list-qualities figure img {
        width: 80.7%;
    }
    
    .qualities .list-qualities figure figcaption {
        font-size: 1.5rem;
    }

    .qualities aside {
        top: -0.9375rem;
        width: 63.5416667%;
    }

    .qualities aside img {
        width: 26%;
        padding: 1.5625rem;
    }

    .qualities aside article {
        width: 72%;
        padding: 0.9375rem;
    }
    
    .qualities aside article h3 {
        font-size: 3.375rem;
    }

    .qualities aside article p {
        font-size: 1.5rem;
    }
    
    
    
    
    
    /***** COMPÉTENCES *****/
    .skills .list-skills figure figcaption {
        font-size: 1.5rem;
    }
    
    .softwares {
        padding: 1.5625rem 0;
    }

    .softwares figure {
        width: 33%;
    }

    .softwares figure img {
        width: 56.13%;
    }

    .computing {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-align-items: center;
        align-items: center;
        justify-content: space-between;
        padding: 0.9375rem 0;
    }

    .computing figure {
        width: 50%;
        margin-bottom: 0;
    }

    .computing figure img {
        width: 41.181%;
    }
    
    
    
    
    
    /***** TÂCHES *****/
    .tasks .list-tasks figure figcaption {
        font-size: 1.5rem;
    }
    
    .tasks figure {
        height: 13.625rem;
        padding: 0.9375rem;
    }

    .tasks figure img {
        width: 41.582%;
    }
    
    
    
    
    
    /***** PASSIONS *****/
    .passions .list-passions figure figcaption {
        font-size: 1.5rem;
    }
    
    .passions section {
        width: 90.885417%;
    }

    .passions .list-passions {
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        -o-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding: 1.5625rem 0;
    }

    .list-passions figure {
        width: 100%;
    }

    .list-passions figure:first-of-type,
    .list-passions figure:nth-of-type(2),
    .list-passions figure:nth-of-type(3) {
        margin-bottom: 0;
    }

    .list-passions figure img {
        width: 73.711%;
    }
    
    
    
    
    
    
    
    
    
    
    /********** PROJETS **********/
    .light-veil.flex-horizontal figure {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .light-veil.flex-horizontal figure img {
        width: 45%;
        margin-bottom: 0;
    }
    
    .light-veil.flex-horizontal figure figcaption {
        width: 50%;
    }
    
    .light-veil figure img {
        margin-bottom: 0.625rem;
    }
    
    .mid-height-auto {
        height: 100vh;
    }
    
    .double-height-auto {
        height: 200vh;
    }
    
    .flex-horizontal {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }
    
    .previous-project,
    .next-project {
        padding: 4.9375rem 0;
        font-size: 5.9375rem;
    }
    
    .desc-logo {
        -ms-align-items: initial;
        align-items: initial;
    }
    
    .desc-logo-base,
    .desc {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .desc.desc-concept,
    .desc.desc-synopsis {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        -ms-align-items: flex-start;
        align-items: flex-start;
    }
    
    .desc.desc-concept h3 {
        text-align: left;
    }
    
    .desc-logo .desc-logo-base img,
    .desc-logo .desc img {
        width: 50%;
        margin-bottom: 0;
    }
    
    .desc-buttons,
    .desc article {
        width: 45%;
    }
    
    .slider {
        -webkit-flex-direction: row-reverse;
        -moz-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        -o-flex-direction: row-reverse;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    
    .slider .owl-carousel {
        width: 40%;
    }
    
    .slider .desc {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        -ms-align-items: flex-start;
        align-items: flex-start;
        width: 55%;
    }
    
    .slider .desc h3 {
        text-align: left;
        margin-bottom: 1.25rem;
    }
    
    .owl-carousel button.owl-dot {
        width: 1.5rem;
        height: 1.5rem;
    }





    /***** COMPARADISE *****/
    .bg-comparadise {
        background: url(themes/bg-projets/bg-comparadise.jpg) no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .comparadise-emailings img {
        width: 90.164%;
    }

    .comparadise-data img {
        width: 82%;
    }
    
    .comparadise-previous {
        background: url(themes/bg/desktop/bg-triangle-next.svg) no-repeat right center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .comparadise-next {
        background: url(themes/bg/desktop/bg-triangle-fake-records.svg) no-repeat left center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .comparadise-previous,
    .comparadise-next {
        width: 50%;
    }
    
    
    
    
    
    /***** FAKE RECORDS *****/
    .bg-fake-records {
        background: url(themes/bg-projets/bg-fake-records.jpg) no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .fake-records-papeterie img {
        width: 55%;
    }
    
    .fake-records-previous {
        background: url(themes/bg/desktop/bg-triangle-comparadise.svg) no-repeat right center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .fake-records-next {
        background: url(themes/bg/desktop/bg-triangle-juicy-garden.svg) no-repeat left center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .fake-records-previous,
    .fake-records-next {
        width: 50%;
    }
    
    
    
    
    
    /***** JUICY GARDEN *****/
    .bg-juicy-garden {
        background: url(themes/bg-projets/bg-juicy-garden.jpg) no-repeat center;
        background-attachment: fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .juicy-garden-concept {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .juicy-garden-concept img {
        width: 21%;
    }
    
    .juicy-garden-concept article {
        width: 74%;
    }
    
    .juicy-garden-flex img {
        width: 75%;
    }
    
    .juicy-garden-previous {
        background: url(themes/bg/desktop/bg-triangle-fake-records.svg) no-repeat right center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .juicy-garden-next {
        background: url(themes/bg/desktop/bg-triangle-camion-fume.svg) no-repeat left center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .juicy-garden-previous,
    .juicy-garden-next {
        width: 50%;
    }
    
    
    
    
    
    /***** LE CAMION QUI FUME *****/
    .camion-fume-double-height-auto {
        height: 400vh;
    }
    
    .camion-fume-triple-height-auto {
        height: 600vh;
    }
    
    .camion-fume-double-height-auto img,
    .camion-fume-triple-height-auto img {
        width: 75%
    }
    
    .camion-fume-previous {
        background: url(themes/bg/desktop/bg-triangle-juicy-garden.svg) no-repeat right center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .camion-fume-next {
        background: url(themes/bg/desktop/bg-triangle-bookster.svg) no-repeat left center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .camion-fume-previous,
    .camion-fume-next {
        width: 50%;
    }
    
    
    
    
    
    /***** BOOKSTER *****/
    .bookster-concept,
    .bookster-typo {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .bookster-concept img {
        width: 25%;
    }
    
    .bookster-concept article {
        width: 70%;
    }
    
    .bookster-typo img {
        width: 45%;
    }
    
    .bookster-typo article {
        width: 50%;
    }
    
    .bookster-typo .desc-typo {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
    }
    
    .bookster-previous {
        background: url(themes/bg/desktop/bg-triangle-camion-fume.svg) no-repeat right center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .bookster-next {
        background: url(themes/bg/desktop/bg-triangle-seven.svg) no-repeat left center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .bookster-previous,
    .bookster-next {
        width: 50%;
    }
    
    
    
    
    
    /***** SEVEN *****/
    .seven-orange-mockup {
        background: url(themes/mockups/seven-gluttony-temperance-mockup.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .seven-yellow-mockup {
        background: url(themes/mockups/seven-greed-charity-mockup.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .seven-cyan-mockup {
        background: url(themes/mockups/seven-sloth-courage-mockup.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .seven-navy-mockup {
        background: url(themes/mockups/seven-lust-prudence-mockup.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .seven-purple-mockup {
        background: url(themes/mockups/seven-pride-faith-mockup.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .seven-green-mockup {
        background: url(themes/mockups/seven-envy-hope-mockup.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .seven-red-mockup {
        background: url(themes/mockups/seven-wrath-justice-mockup.jpg) no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .seven-previous {
        background: url(themes/bg/desktop/bg-triangle-bookster.svg) no-repeat right center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .seven-next {
        background: url(themes/bg/desktop/bg-triangle-resume-bd.svg) no-repeat left center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .seven-previous,
    .seven-next {
        width: 50%;
    }
    
    
    
    
    
    /***** RESUME BD *****/
    .light-veil.flex-horizontal.resume-bd-concept figure img {
        width: 40%;
    }
    
    .resume-bd-synopsis {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .resume-bd-synopsis img {
        width: 21%;
        margin-bottom: 0;
    }
    
    .resume-bd-synopsis article {
        width: 74%;
    }
    
    .resume-bd-extraits figure {
        width: 32%;
    }
    
    .resume-bd-extraits figure:last-of-type {
        margin: 0;
    }
    
    .resume-bd-extraits figure img {
        width: 85%;
    }
    
    .resume-bd-extraits .resume-bd-extraits-flex {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-around;
        margin: 0 auto;
    }
    
    .resume-bd-extraits .resume-bd-extraits-flex figure {
        width: 48%;
    }
    
    .resume-bd-mockup-desktop {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
    }
    
    .resume-bd-mockup-desktop img {
        width: 35%;
    }
    
    .resume-bd-final img {
        width: 70%;
    }
    
    .resume-bd-previous {
        background: url(themes/bg/desktop/bg-triangle-seven.svg) no-repeat right center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .resume-bd-next {
        background: url(themes/bg/desktop/bg-triangle-next.svg) no-repeat left center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .resume-bd-previous,
    .resume-bd-next {
        width: 50%;
    }
    
    
    
    
    
    /***** NEXT *****/
    .next-logos {
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .next-logos figure {
        width: 45%;
    }
    
    .next-shooting div {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-between;
    }
    
    .next-shooting div img {
        width: 32%;
        height: 100%;
    }
    
    .next-previous {
        background: url(themes/bg/desktop/bg-triangle-resume-bd.svg) no-repeat right center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .next-next {
        background: url(themes/bg/desktop/bg-triangle-comparadise.svg) no-repeat left center #fff;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    .next-previous,
    .next-next {
        width: 50%;
    }
    
    
    
    
    
    
    
    
    
    
    /********** CONTACT **********/
    .contact h1 {
        font-size: 3.8125rem;
    }
}



@media screen and (min-width: 1440px) {
    /********** HOME **********/
    /***** SECTIONS HOME *****/
    .home-section h2 {
        width: 72%;
        padding: 6.75rem 0;
        font-size: 11.875rem;
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }

    .home-section.comparadise h2:hover,
    .home-section.comparadise h2:focus {
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }

    .home-section.fake-records h2:hover,
    .home-section.fake-records h2:focus {
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }

    .home-section.juicy-garden h2:hover,
    .home-section.juicy-garden h2:focus {
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }

    .home-section.camion-fume h2:hover,
    .home-section.camion-fume h2:focus {
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }

    .home-section.bookster h2:hover,
    .home-section.bookster h2:focus {
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }

    .home-section.seven h2:hover,
    .home-section.seven h2:focus {
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }

    .home-section.resume-bd h2:hover,
    .home-section.resume-bd h2:focus {
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }

    .home-section.next h2:hover,
    .home-section.next h2:focus {
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }
    
    
    
    
    
    
    
    
    
    
    /********** WHO **********/
    .qualities .list-qualities,
    .skills .list-skills,
    .tasks .list-tasks,
    .passions .list-passions {
        width: 86.111111%;
    }
    
    .who h1,
    h2 {
        font-size: 5.9375rem;
    }
    
    
    
    
    
    /***** INTRO *****/
    .who h1 {
        margin-bottom: 1.5625rem;
    }

    /* !!! PROVISOIRE !!! */
    .who .img {
        margin-top: 0;
        margin-left: 9.0625rem;
    }

    .who section {
        bottom: 0;
        right: 9.0625rem;
        width: 51.58%;
        padding: 3.125rem 1.25rem;
        font-size: 2rem;
    }
    
    
    
    
    
    /***** QUALITÉS *****/
    .qualities aside article h3 {
        font-size: 4.375rem;
    }

    .qualities aside article p {
        font-size: 2rem;
    }
    
    
    
    
    
    /***** COMPÉTENCES *****/
    .skills .list-skills figure figcaption {
        font-size: 2rem;
    }
    
    
    
    
    
    /***** TÂCHES *****/
    .tasks .list-tasks figure figcaption {
        font-size: 2rem;
    }
    
    .tasks figure {
        height: 15.625rem;
    }
    
    
    
    
    
    /***** PASSIONS *****/
    .passions .list-passions figure figcaption {
        font-size: 2rem;
    }
    
    
    
    
    
    
    
    
    
    
    /********** PROJETS **********/
    .project h1 {
        width: 72%;
        padding: 6.75rem 0;
        font-size: 11.875rem;
        -webkit-background-size: 31.25rem;
        background-size: 31.25rem;
    }
    
    
    
    
    
    /***** FAKE RECORDS *****/
    .poster img {
        width: 55%;
    }
    
    
    
    
    
    /***** JUICY GARDEN *****/
    .juicy-garden-flex img {
        width: 90%;
    }
    
    
    
    
    
    /***** SEVEN *****/
    .seven-yellow-mockup {
        background: url(themes/mockups/seven-greed-charity-mockup.jpg) no-repeat top center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    
    
    
    
    
    
    
    
    
    
    /********** CONTACT **********/
    .contact h1 {
        font-size: 5.9375rem;
    }
}










/********************* CLASSES JAVASCRIPT - JQUERY ********************/
.reveal {
    opacity: 1;
    -webkit-transition: opacity .7s;
    -o-transition: opacity .7s;
    transition: opacity .7s;
}