body {
    font-family:'Montserrat',sans-serif;
    font-weight:500;
    font-size:19px;
    background-color:#21212a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
ul {
    padding:0;
    margin:0
}
li {
    list-style-type:none
}
.anim {
    -webkit-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}
figure {
    margin:0;
    overflow:hidden
}
.center {
    text-align:center
}
a {
    text-decoration:none
}
.c1 {
    color:#fff
}
.c2 {
    color:#61616f
}
.c3 {
    color:#ffcfa4
}
.c4 {
    color:#88d6e3
}
.c5 {
    color:#9696ac
}
h1 {
    font-family:'Playfair Display',serif;
    font-size:36px;
    line-height: 45px;
    color:#fff;
    display:inline-block;
    margin:0;
    font-weight:normal
}
h2 {
    font-family:'Playfair Display',serif;
    font-size:47px;
    font-weight:bold;
    color:#fff;
    margin:0
}
h3 {
    font-family:'Playfair Display',serif;
    font-size:24px;
    font-weight:bold;
    color:#85d0dc;
    display:inline-block;
    margin:0
}

h4 {
    font-family:'Playfair Display',serif;
    font-size:20px;
    font-weight:bold;
    display:inline-block;
    margin:0
}

.ss-title p {
    font-size:16px;
    position:relative;
    z-index:200;
    margin:0
}
.ss-title span {
    background-color:#ffcfa469;
    width:48px;
    height:12px;
    position:relative;
    z-index:100;
    opacity:.6;
    top:-21px;
    left:-15px;
    display:block
}
.img-legend {
    font-size: 14px !important;
    margin: 10px 0 0 0 !important;
    text-align: center;
    width: 100%;
}
.title-home {
    padding:110px 0;
    background-size:94%;
    background-repeat:no-repeat;
    background-position:center 61px
}
.title-home.hello {
    background-image:url(../img/hello.png)
}
.title-home.folio {
    background-image:url(../img/book.png)
}
.title-home.merci {
    background-image:url(../img/merci.png);
    margin:80px 0 0
}
.animsition-loading {
    background-color:transparent;
    border-top:2px solid #88d6e3;
    border-right:2px solid #88d6e3;
    border-bottom:2px solid #88d6e3;
    border-left:2px solid #08080b
}
.animsition-loading,.animsition-loading:after {
    width:40px;
    height:40px
}
.badge-container {
    width:100%;
    position:absolute
}
.badge-container .badge {
    display:block;
    width:99%;
    position:fixed;
    z-index:900
}
.badge a #logo {
    position:relative;
    z-index:900;
    -webkit-transition:-webkit-transform 3s;
    -moz-transition:-moz-transform 3s;
    -o-transition:-o-transform 3s;
    -ms-transition:-ms-transform 3s;
    transition:transform 3s
}
.badge a:hover #logo {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg)
}
.badge svg {
    width:114px;
    height:114px;
    margin:20px 0 0
}
.badge #ls {
    position:relative;
    left:120px
}


nav {
    height:60px;
    min-height:100%;
    z-index:100000000
}
#sidebar {
    background-color:#1d1d26;
    color:#fff;
    width:100%;
    position:fixed;
    float:left;
    padding:18px 40px 26px;
    z-index:100000000;
    -webkit-transform:translateY(-100px);
    transform:translateY(-100px);
    -webkit-transition:all .8s;
    transition:all .8s;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
#sidebar.loaded {
    -webkit-transform:translateY(0px);
    transform:translateY(0px)
}
#sidebar .sidetitle {
    display:none
}
#sidebar .network {
    float:right;
    position:relative;
    top:5px
}
#sidebar .network ul li {
    display:inline-block;
    margin:0 30px 0 0
}
#sidebar .network ul li:last-child {
    margin:0
}
.network .social {
    fill:#61616f;
}
.network .social:hover {
    fill:#fff
}
#sidebar .hamburger {
    float:left;
    position:absolute
}
.hamburger .line,.hamburger .line-small {
    height:2px;
    background-color:#ffcfa4;
    display:block;
    margin:0 0 5px;
    border-radius:90px;
    margin:5px 0
}
.hamburger .line {
    width:16px
}
.hamburger .line-small {
    width:8px
}
.hamburger:hover {
    cursor:pointer
}
.hamburger.is-active .line:nth-child(1) {
    -webkit-transform:translateY(13px) rotate(45deg);
    transform:translateY(13px) rotate(45deg);
    margin:0
}
.hamburger.is-active .line:nth-child(2) {
    opacity:0
}
.hamburger.is-active .line:nth-child(3) {
    -webkit-transform:translateY(-13px) rotate(-45deg);
    transform:translateY(-13px) rotate(-45deg);
    margin:17px 0
}
.content-sidebar,.sidebar-overlay {
    -webkit-transition:all .8s;
    -webkit-transition:all .8s;
    transition:all .8s;
    -webkit-transform:translateY(-160%);
    transform:translateY(-160%)
}
.content-sidebar {
    background:#1d1d26 url(../img/pattern-aqua.png);
    background-size:10%;
    background-blend-mode:overlay;
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    position:relative;
    z-index:1000;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding:54px 0 8px
}
.sidebar-overlay {
    background-color:#16161d;
    opacity:.9;
    width:100%;
    height:100%;
    position:fixed;
    z-index:1000
}
.content-sidebar.expanded {
    -webkit-transform:translateY(14%);
    transform:translateY(14%);
    position:fixed;
    z-index:1100
}
.sidebar-overlay.expanded {
    -webkit-transform:translateY(3.8%);
    transform:translateY(3.8%)
}
.content-sidebar ul {
    margin:auto
}
.content-sidebar ul li {
    margin:0 0 30px
}
.content-sidebar ul li a {
    color:#fff;
    text-decoration:none;
    opacity:.1;
    display:block
}
.content-sidebar ul li .actif,.content-sidebar ul li a:hover {
    opacity:1
}
.content-sidebar ul li a span {
    display:block
}
.content-sidebar ul li .text {
    font-family:'Playfair Display',serif;
    font-size:30px;
    color:#fff;
    font-weight:bold
}
.content-sidebar ul li .number {
    font-size:14px;
    color:#88d6e3;
    margin:0 0 4px
}
.container-fluid {
    padding-right:2rem;
    padding-left:2rem
}
.project {
    width:100%;
    position:relative;
    text-decoration:none;
    margin:80px 0 96px 0;
    display:inline-block
}
.project .btn {
    font-size:15px;
    margin:50px 0 0 0;
    font-weight:600
}
.project .scene {
    height:auto;
    margin:0 0 60px;
    -webkit-box-shadow:#161622 0 2px 42px 0;
    box-shadow:#161622 0 2px 42px 0
}
.project .scene img {
    transition:transform 1s,filter 1s ease-in-out;
    transform-origin:center center;
    filter:brightness(75%)
}
.project:hover .scene img {
    filter:brightness(100%);
    transform:scale(1.05)
}
.project.left .scene {
    border-radius: 6px 100px 6px 6px;
}
.project.right .scene {
    border-radius: 100px 6px 6px 6px;
}
.project.left .scene:after,.project.right .scene:after {
    content:"";
    display:block;
    width:62%;
    height:274px;
    position:absolute;
    z-index:-1;
    left:45%;
    bottom:257px
}
.project .scene:after,.project-detail .detail.joly:before {
    background:url(../img/pattern-waves.png);
    background-size:99px;
    opacity:.20
}
.project .scene.btw:after,.project-detail .detail.btw:before {
    background:url(../img/pattern-cross.png);
    background-size:138px;
    opacity:.22
}
.project .scene.whirly:after,.project-detail .detail.whirly:before {
    background:url(../img/pattern-blue.png);
    background-size:138px;
    opacity:.22
}

.project .scene.feuch:after,.project-detail .detail.feuch:before {
    background:url(../img/pattern-yellow.png);
    background-size:109px;
    opacity:.20
}

.project .scene.bayard:after,.project-detail .detail.bayard:before {
    background:url(../img/pattern-triangle.png);
    background-size:269px;
    opacity:.15
}

.ss-title.right span {
    background-color:#0f0f14
}

.project .title .ss-title {
    margin:0 0 0 16px
}

.project .title .name {
   margin: 20px 0;
}

.project .title .tags ul li {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    background-color: #88d6e32b;
    border-radius: 90px;
    padding: 10px 14px;
    margin: 22px 0 0;
}
.project .title h3 {
    color:#fff;
    font-weight:bold;
    font-size:42px
}
.title-projet {
    font-size:35px
}
#about2021 {
    margin-top: 40px;
    transform:none
}

#about2021 .intro {
    margin:24px 0 20px;
}
#about2021 p {
    line-height:32px
}
#about2021 ul {
    margin:42px 0 0 0
}

#about2021 .btn {
    font-size: 15px;
    width: 317px !important;
}
.about {
    margin:70px 0;
    position:relative;
    z-index:800;
    opacity:0;
    -webkit-transition:all 2s;
    transition:all 2s
}
.about.loaded {
    opacity:1
}
.project-detail h1 {
    line-height:57px;
    margin:24px 0 0;
    font-weight:bold
}
.content-frame {
    margin:0 0 230px;
    width:340px;
    height:357px
}
.content-frame .frame .border {
    display:block;
    background-color:#ffcfa4;
    width:2px;
    margin:0 auto;
    position:relative;
    top:365px;
    border-radius:90px;
    animation-name:scroll;
    animation-duration:2s;
    animation-direction:top;
    animation-iteration-count:1;
    animation-delay:2s;
    animation-fill-mode:forwards
}
@keyframes scroll {
    0% {
        height:0
    }
    100% {
        height:74px
    }
}
.content-frame:after {
    content:"";
    background:url(../img/pattern-aqua-blue.png);
    background-size:46px;
    display:block;
    opacity:.6;
    width:65%;
    height:370px;
    position:relative;
    z-index:-1;
    bottom:105%;
    left:125px
}
.content-frame .frame {
    background:url(../img/profil-ls.png) no-repeat center;
    height:484px;
    background-size:80%
}
.profil p {
    line-height:30px;
    margin:65px 0
}
.btn {
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:600;
    display:block;
    text-decoration:none;
    text-transform:uppercase;
    margin:0 0 30px
}
.btn.see {
    margin:0
}
.btn .link {
    display:inline-block
}
.btn .arrow {
    margin:0 0 0 10px;
    vertical-align:middle
}
.btn:hover .arrow {
    margin:0 0 0 20px
}
.btn.see .link {
    font-size:16px;
    text-transform:none
}
.btn.see .arrow {
    vertical-align:-2px;
    margin:0
}
.btn.see:hover .arrow {
    margin:0 0 0 8px
}
.service {
    margin:50px 0
}

.service .item-content {
    display: grid;
}
.service .item, .project-section .item{
    background-color:#15151e;
    padding:30px;
    border-radius:10px;
    text-align:center;
    margin:0 0 30px 0;
}

.project-section .item{
    text-align:left;
    padding: 23px;
}

.project-section .item h4{
    margin: 0 0 15px;
}

.project-section .item p{
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

.service .item span {
    display:block;
    margin:0 0 20px
}
.service .item ul {
    margin:20px 0 0;
    font-size:16px;
    line-height:35px
}

.service .item.item-projet {
    background-color:transparent;
    padding:0;
    margin:40px 0 0 0;
}

.service.projet .item {
    text-align:left;
}
.service.projet .item ul {
    line-height: 26px;
}
.service.projet .item ul li {
    margin: 0 0 20px;
}
.quote {
    text-align:center;
    margin:0 0 60px
}
.quote .text-quote {
    font-size:28px;
    line-height:40px
}
.quote p {
    line-height:30px
}
#book .title-home {
    margin:0
}
.header-scroll {
    background-size:cover;
    width:100%;
    height:100%;
    position:fixed;
    z-index:auto;
    pointer-events:none
}
.header-scroll.jolyhead {
    background:#21212a url(../img/projects/joly2018/header-joly.png) no-repeat top center
}
.project-detail {
    margin:70px 0 0
}
.project-detail .intro {
    font-size:19px;
    line-height:32px;
    margin:50px 0
}
.project-detail .detail {
    max-width:270px;
    margin:0 0 80px
}
.project-detail .detail:before {
    content:'';
    display:block;
    position:absolute;
    width:235px;
    height:308px
}
.project-detail .detail.jolypro span {
    color:#3d66b3
}
.project-detail .detail.feuch li span {
    color:#ebbb45
}
.project-detail .detail.bayard li span {
    color:#94dfce
}
.project-detail .detail.btw li span {
    color:#f54c2d
}
.project-detail .detail.whirly li span {
    color:#7A99E0
}
.project-detail .detail ul {
    padding:30px 40px
}
.project-detail .detail ul li {
    margin:0 0 30px
}
.project-detail .detail ul li a {
    display:block;
    text-decoration:none;
    font-size:14px
}
.project-detail .detail p {
    margin:5px 0 0;
    font-size:14px
}
.project-detail .detail span {
    text-transform:uppercase;
    font-size:11px;
    font-weight:bold
}
.project-section.top-scroll {
    margin:0 0 130px
}
.legend {
    display:none
}
.project-section img,.project-section video {
    width:100%;
    border-radius:10px
}
.project-section .sticker {
    width:auto;
    position:absolute;
    padding:30px
}
.styleguide-section,.project-section {
    margin:0 0 200px
}
.styleguide-section h2,.project-section h2 {
    display:inherit;
    margin:0 0 40px
}
.styleguide-section p,.project-section p {
    font-size:19px;
    line-height:32px;
    margin:0 0 80px
}
.styleguide-section .typo {
    margin:17px 0 0
}
.styleguide-section img {
    width:100%;
}

.styleguide-section ul li, .project-section ul li {
    margin: 0 0 10px;
    line-height: 32px;
}
.styleguide-section .info, .project-section .info, #mark .info {
    width: 67%;
    margin: 0 auto;
}
.styleguide-section .info p {
    margin:0;
}
.styleguide-section .colors {
    margin:0 0 80px 0
}
.styleguide-section .colors p {
    margin:18px 0 0 8px
}
.styleguide-section .rounded,.styleguide-section .rounded-color {
    border-radius:90px;
    height:55px;
    width:55px
}
.styleguide-section .rounded {
    border:1px solid #1a1a22;
    padding:20px
}
.styleguide-section.job p {
    margin:30px 0 0 0
}
.styleguide-section.job .rounded {
    margin:100px auto 0
}
.styleguide-section .logos img {
    width:67%;
    margin:60px 0 0
}
.rounded-color.corail {
    background-color:#fe6146
}
.rounded-color.lagon {
    background-color:#3fb7b6
}
.rounded-color.jeans {
    background-color:#3c5a98
}
.rounded-color.trueblue {
    background-color:#0d61e3
}
.rounded-color.portland {
    background-color:#f54b2c
}
.rounded-color.indian {
    background-color:#ddb456
}
.rounded-color.orange {
    background-color:#fa8823ff
}
.rounded-color.green {
    background-color:#5b9900ff
}
.rounded-color.yellow {
    background-color:#f0c700ff
}
.rounded-color.purple {
    background-color:#8c4f93ff
}
.project-section .center-slider {
    cursor:-webkit-grab
}
.project-section .app figure {
    margin:0 40px
}
.project-section .app img {
    border-radius:10px;
    opacity:.3;
    -webkit-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}

.center-slider .slick-center img {
    opacity:1
}

.beer-reveal {
    border-right: 1px solid #88d6e3;
}

.beer-handle {
    background: #88d6e3 !important;
    box-shadow: 0 0 0 6px rgb(255 255 255), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.beer-reveal[data-beer-label]:after, .beer-slider[data-beer-label]:after {
    display: none !important;
}

.pagination {
    background-color:#1f1f27;
    padding:70px 0
}

.pagination a {
    font-weight:bold;
    text-decoration:none;
    display:block
}
.pagination .pagi-text {
    font-size:14px;
    display:block;
    font-weight: 500;
}
.pagination .pagi-item {
    font-family:'Playfair Display',serif;
    font-size:32px
}
.pagination .prev {
    margin:0 0 40px
}
.pagination .arrow {
    position:relative
}
.pagination .prev .arrow,.pagination .next .arrow {
    float:right;
    top:16px
}
.scroll {
    display:block;
    background-color:#ffcfa4;
    width:2px;
    margin:0 auto;
    position:absolute;
    top:75px;
    border-radius:90px;
    animation-name:scroll;
    animation-duration:2s;
    animation-direction:bottom;
    animation-iteration-count:1;
    animation-delay:0;
    animation-fill-mode:forwards;
    left:50%
}
.link-contact {
    color:#fff;
    text-decoration:none;
    display:block;
    position:relative;
    top:-19px
}
.link-contact::before {
    content:'';
    position:relative;
    top:47px;
    left:0;
    width:329px;
    height:16px;
    background:#7bc0cc4d;
    display:block;
    -webkit-transform-origin:right top;
    -ms-transform-origin:right top;
    transform-origin:right top;
    -webkit-transform:scale(0,1);
    -ms-transform:scale(0,1);
    transform:scale(0,1);
    -webkit-transition:transform .4s cubic-bezier(1,0,0,1);
    transition:transform .4s cubic-bezier(1,0,0,1);
    margin:0 auto
}
.link-contact:hover::before {
    -webkit-transform-origin:left top;
    -ms-transform-origin:left top;
    transform-origin:left top;
    -webkit-transform:scale(1,1);
    -ms-transform:scale(1,1);
    transform:scale(1,1)
}
.projet-contact {
    margin:-200px 0 120px;
}

footer .contact-link {
    text-align:center;
    margin:0 0 160px
}
footer .contact-link li {
    display:block;
    margin:0;
}
footer p {
    line-height:30px;
    margin:90px 0 0
}
.button {
    pointer-events:auto;
    cursor:pointer;
    background:#15151e;
    border:0;
    padding:1.5rem;
    margin:0 0 10px;
    font-family:inherit;
    font-size:inherit;
    position:relative;
    display:block;
    text-decoration:none;
    width:auto;
}
.button::before,.button::after {
    position:absolute;
    top:-1px;;
    left:0;
    width:100%;
    height:100%
}
.button.swipe {
    overflow:hidden;
    font-size:16px;
    border-radius:10px;
    color:#7bc0cc
}
.button.swipe span {
    display:block;
    position:relative;
    mix-blend-mode:difference;
    z-index:10
}
.button.swipe:hover span {
    animation:MoveScaleUpInitial .10s forwards,MoveScaleUpEnd .10s forwards .10s
}
@keyframes MoveScaleUpInitial {
    to {
        transform:translate3d(0,-105%,0) scale3d(1,2,1);
        opacity:0
    }
}
@keyframes MoveScaleUpEnd {
    from {
        transform:translate3d(0,100%,0) scale3d(1,2,1);
        opacity:0
    }
    to {
        transform:translate3d(0,0,0);
        opacity:1
    }
}
.button.swipe::before {
    content:'';
    background:#2e3943;
    width:120%;
    height:0;
    padding-bottom:120%;
    top:-110%;
    left:-10%;
    border-radius:50%;
    transform:translate3d(0,68%,0) scale3d(0,0,0)
}
.button.swipe:hover::before {
    transform:translate3d(0,0,0) scale3d(1,1,1);
    transition:transform .4s cubic-bezier(0.1,0,0.3,1)
}
.button.swipe::after {
    content:'';
    background:#2e3943;
    transform:translate3d(0,-100%,0);
    transition:transform .4s cubic-bezier(0.1,0,0.3,1)
}
.button.swipe:hover::after {
    transform:translate3d(0,0,0);
    transition-duration:.05s;
    transition-delay:.4s;
    transition-timing-function:linear
}
.button svg {
    margin:0 10px 0 0;
    vertical-align:text-top
}
.animsition-overlay-slide {
    background-color:#1d1d26;
    z-index:3000
}
.fade {
    opacity:0;
    -webkit-transition:all 2s;
    transition:all 2s
}
.fade.loaded {
    opacity:1
}
.fadein {
    opacity:0
}
.slick-list {
    padding:0!important
}
.slick-dots {
    text-align:center;
    margin:80px 0 0
}
.slick-dots li {
    position:relative;
    display:inline-block;
    width:20px;
    height:20px;
    padding:0;
    cursor:pointer
}
.slick-dots li button {
    font-size:0;
    line-height:0;
    display:block;
    width:20px;
    height:20px;
    padding:5px;
    cursor:pointer;
    color:transparent;
    border:0;
    outline:0;
    background:transparent
}
.slick-dots li button:before {
    font-family:'slick';
    font-size:30px;
    line-height:20px;
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
    content:'•';
    text-align:center;
    opacity:.25;
    color:#5a5a69;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.slick-dots li.slick-active button:before {
    opacity:.75;
    color:#14151b
}
.reveal {
    -webkit-transition:all .65s;
    transition:all .65s;
    opacity:0
}
.active,.reveal:first-child {
    opacity:1
}

#mark {
    margin: 0 0 100px;
}

#mark .info {
    width: 85%;
    margin: 0 auto;
}

#mark .logo-max {
    width: 113px;
}

#mark .logo-min {
    width: 133px; !important;
}


@media(min-width:768px) {
    .title-home.merci {
        margin:60px 0 0
    }
    .title-home {
        background-position:center 37px;
        background-size:65%
    }
    h1 {
        font-size:46px;
        line-height: 54px;
    }
    .title-home.hello {
        margin:345px 0 90px
    }
    #about2021 ul {
        display:inline-flex
    }
    .content-frame {
        width:407px
    }
    .content-frame:after {
        width:78%;
        height:430px
    }
    #book .title-home {
        margin:60px 0 120px
    }
    .content-frame {
        margin:0 auto
    }
    .content-frame .frame .border {
        top:397px
    }
    nav {
        height:auto
    }
    #sidebar {
        width:10px;
        height:100%;
        -webkit-transform:translateX(-111px);
        transform:translateX(-111px);
        padding:40px 40px;
        display:grid;
        -webkit-box-sizing:inherit;
        box-sizing:inherit
    }
    #sidebar.loaded {
        -webkit-transform:translateX(0px);
        transform:translateX(0px)
    }
    #sidebar:after {
        content:'';
        background-color:#ffcfa4;
        width:2px;
        height:175px;
        position:absolute;
        display:inline;
        left:90px;
        top:0
    }
    #sidebar .hamburger {
        position:initial
    }
    #sidebar .hamburger,#sidebar .network ul li {
        float:none
    }
    #sidebar .sidetitle {
        color:#61616f;
        font-size:14px;
        width:352px;
        display:block;
        position:absolute;
        left:42%;
        top:63%;
        margin-top:-70px;
        -webkit-transform:rotate(-90deg);
        transform:rotate(-90deg);
        -webkit-transform-origin:left top 0;
        transform-origin:left top 0
    }
    #sidebar .network {
        position:absolute;
        left:42%;
        top:79%
    }
    #sidebar .network ul li {
        display:block;
        margin:0 0 30px
    }
    .content-sidebar,.sidebar-overlay {
        height:100%;
        -webkit-transform:translateX(-100%);
        transform:translateX(-100%)
    }
    .content-sidebar {
        width:500px;
        height:100%;
        position:fixed;
        padding:0
    }
    .content-sidebar.expanded {
        -webkit-transform:translateX(17%);
        transform:translateX(17%)
    }
    .sidebar-overlay.expanded {
        -webkit-transform:translateX(3.33%);
        transform:translateX(3.33%)
    }
    .container-fluid {
        margin-right:6vh;
        margin-left:17vh;
        padding-right:2rem;
        padding-left:2rem
    }
    .content-sidebar ul li .text {
        font-size:50px
    }
    .content-sidebar ul li {
        margin:0 0 60px
    }
    .project {
        margin:133px 0 180px
    }
    .project .scene,.project .scene:before {
        height:418px;
        width:100%
    }
    .about .profil {
        height:72vh
    }
    .project-section .content-project {
        border:1px solid #36363f;
        border-radius:10px;
        padding:20px
    }
    .project.right .scene:after {
        width: 30%;
        height: 624px;
        left: 52%;
        bottom: 232px;
    }
    .project.left .scene:after {
        width: 30%;
        height: 624px;
        left: 52%;
        bottom: 232px;
    }
    
    footer .contact-link li {
        display:inline-block;
        margin:0 6px 0
    }
    .button {
        width:155px;;
    }
    
    #mark .info {
        width: 85%;
        margin: 0 auto;
    }

    #mark .logo-max {
        width: 140px;
    }

    #mark .logo-min {
        width: 170px; !important;
    }
    }
@media(min-width:1200px) {
    .container-fluid {
        margin-right:14vh;
        margin-left:25vh
    }
    .badge #ls {
        left:170px
    }
    .badge svg {
        width:164px;
        height:164.75px;
        margin:70px 0 0
    }
    footer p {
        margin:40px 200px 0
    }
    footer .contact-link {
        margin:0 0 160px;
    }
    .border-bottom {
        top:190px
    }
    .title-home.merci {
        margin:200px 0 0
    }
    .title-home {
        background-size:auto;
        background-position:center 19px
    }
    #book {
        margin:200px 0 0
    }
    #book .title-home {
        margin:0 0 110px
    }
    .quote {
        text-align:left
    }
    .service {
        margin:160px 0 80px
    }
     .service.projet {
        margin:-160px 0 160px
    }
    .title-home.hello {
        margin:-55px 0 0;
        background-size:auto
    }
    #about2021 {
        margin:52vh 0 12vh;
        transform:translateY(-60%)
    }
    .content-frame {
        margin:0 auto
    }
    .content-frame .frame {
        background-size:auto
    }
    .content-frame:after {
        width:86%;
        height:475px
    }
    .content-frame .frame .border {
        top:450px
    }
    h1 {
        font-size:46px
    }
    .badge img {
        width:164px;
        height:164px;
        margin:70px 0 0
    }
    .project {
        margin:133px 0 280px
    }
    .project .title {
        position:absolute;
        top:79px
    }
    .project.left .title {
        left:64%
    }
    .project .scene {
        margin:0;
        max-width:596px
    }
    .project.right .scene {
        float:right
    }
    .project.right .scene:after {
        width: 19%;
        height: 554px;
        left: 73%;
        bottom: -69px
;
    }
    .project.left .scene:after {
        width: 19%;
        height: 554px;
        left: 25%;
        bottom: -69px;
    }
    .project .arrow {
        display: block;
        margin: 0 0 0 57px;
        position: absolute;
        bottom: -2px;
        left: 20%;
    }
    .project:hover .arrow {
        margin:0 0 0 70px
    }
    .about .profil {
        margin:0
    }
    .about .profil a:last-child {
        margin:0
    }
    .bg-left {
        background-color:#191921;
        width:30%;
        height:100%;
        position:fixed;
        z-index:700;
        -webkit-transform:translateY(-3000px);
        transform:translateY(-3000px);
        -webkit-transition:all 2s;
        transition:all 2s
    }
    .bg-left.loaded {
        -webkit-transform:translateY(0px);
        transform:translateY(0px)
    }
    .project-detail .detail {
        padding:20px;
        margin:0
    }
    .project-section.top-scroll {
        margin:37px 0 200px
    }
    .project-section.top-scroll .flow figure,.project-section .flow figure {
        overflow:scroll
    }
    .project-section .flow figure {
        height:37vw
    }
    .project-section.top-scroll .flow figure {
        height:35vw
    }
    .project-detail .detail:before {
        height:480px
    }
    .project-detail .detail ul {
        padding:45px 45px 0;
        position:relative
    }
    .styleguide-section .colors {
        margin:0
    }
    .project-section.scroll {
        margin:-50px 0 200px 0
    }
    .legend {
        font-family:'Playfair Display',serif;
        font-size:14px;
        text-transform:uppercase;
        display:block;
        position:relative;
        left:103%;
        top:158px;
        margin-top:-70px;
        -webkit-transform:rotate(-90deg);
        transform:rotate(-90deg);
        -webkit-transform-origin:left top 0;
        transform-origin:left top 0
    }
    .legend.print {
        top:138px
    }
    .legend.print:after {
        left:-142%
    }
    .legend:after {
        content:'';
        display:block;
        background-color:#ffcfa4;
        width:65px;
        height:2px;
        position:relative;
        top:-9px;
        left:-102%
    }
    .pagination .prev {
        text-align:right;
        margin:0
    }
    .pagination .prev .arrow {
        float:left;
        top:11px;
        right:0;
        transform:rotate(-180deg);
        -webkit-transform:rotate(-180deg)
    }
    .pagination .prev:hover .arrow {
        right:20px
    }
    .pagination .next .arrow {
        float:right;
        top:18px;
        left:0
    }
    .pagination .next:hover .arrow {
        left:20px
    }
    .pagination .pagi-item {
        font-size:38px
    }
}
@media(min-width:1540px) {
    h1 {
        font-size:50px;
        line-height: 60px;
    }
    .project .scene {
        max-width:780px
    }
}
@media(min-width:1940px) {
    .container-fluid {
        margin-right:26vh;
        margin-left:38vh
    }
}