.c-h2 {
    font-size:1.7em;
    line-height:1em;
}
.c-h2--big {
    font-size:2.3em;
    line-height:1em;
}
.c-topnav {
    box-sizing:border-box;
    position:absolute;
    max-width:1400px;
    text-align:center;
    top:13px;
    left:0;
    right:0;
    z-index:2;
    margin:0 auto;
    .hamburger {
        position:absolute;
        z-index:2;
        left:0;
    }
}
.o-header__logo {
    position:relative;
    z-index:2;
    top:.6em;
    display:inline-block;
    max-width:140px;
    text-align:center;
    .c-h1 { margin:0; }
}
.c-topnav__menu {
    box-sizing:border-box;
    position:fixed;
    top:0;left:-100vw;right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    height:100vh;
    width:100vw;
    padding-top:.6em;
    background:rgba($bluegreen, .8);
    font-size:2em;
    font-weight:300;
    transition:left .3s ease-in-out;
    background: -moz-linear-gradient(0deg, rgba(#6cf388,.9) 0%, rgba(#40d89f,.9) 100%);
    background: -webkit-linear-gradient(0deg, rgba(#6cf388,.9) 0%, rgba(#40d89f,.9) 100%);
    background: linear-gradient(0deg, rgba(#6cf388,.9) 0%, rgba(#40d89f,.9) 100%);
    &.s-menu-is-open {
        left:0;
    }
    .c-button--round, .c-button--empty {
        font-size:.7em;
    }
}
.c-topnav__el {
    padding:4.5vh 0;
    margin:0 1em;
    &.c-topnav__el--btn {
        padding:.8em 0 .5em;
    }
}
.c-pane {
    padding:2% 0;
    box-sizing:border-box;
    background:#fff;
    color:$dark;
    &.c-pane--small {
        padding:5% 2em;
    }
}
.c-pane--green {
    color:#fff;
}
.c-pane--big {
	height:100vh;
    padding:0;
    &:after {
        position:absolute;
        bottom:10px;
        left:8%;
        display:block;
        content:"";
        height:36px;
        width:12px;
        background:url('/images/stripe-dot.svg') left top no-repeat;
        animation:wobble 5s ease-in-out 7s infinite normal;
        color:#fff;
    }
}
.c-pane--first {
    .c-button--goto {
        margin:0 auto;
    }
}
@keyframes wobble {
    0% {
        bottom:10px;
    }
    10% {
        bottom:-5px;
    }
    20% {
        bottom:10px;
    }
    100% {
        bottom:10px;
    }
}
.c-pane--big__wrapper {
    box-sizing:border-box;
    padding:5%;
    width:100%;
    height:100%;
    border:5px solid #fff;
}
.c-pane--green.c-pane--first {
    background: #40d89f;
    background: -moz-linear-gradient(-45deg, #40d89f 0%, #6cf388 100%);
    background: -webkit-linear-gradient(-45deg, #40d89f 0%,#6cf388 100%);
    background: linear-gradient(135deg, #40d89f 0%,#6cf388 100%);
}
.c-content {
    text-align:center;
    position:relative;
    z-index:1;
    margin-top:18%;
}
.l-pane-grid__item--image {
    margin-top:9%;
}
.c-image-circle {
	max-width:200px;
    position:relative;
    display:flex;
    justify-content:center;
    margin:0 auto;
    &:before {
        display:block;
        position:absolute;
        align-self:center;
        content:"";
        border-radius:100%;
        animation:.7s cubic-bezier(0.07, 0.24, 0.18, 1.38) 1s 1 normal forwards bubble;
    }
    img {
        max-height:90vh;
        z-index:1;
        align-self:center;
    }
}
@keyframes bubble {
    from {
        width:20px;
        height:20px;
        border:2px solid #fff;
    }
    to {
        width:150px;
        height:150px;
        border:8px solid #fff;
    }
}
.c-h3--small {
    font-size:1.2em;
}
.c-stripeback {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100%;
}
.c-bar {
    position:absolute;
    top:0;
    padding:0 1.5%;
    box-sizing:content-box;
}
@for $i from 1 through 11 {
    .c-bar-#{$i} {
        left: percentage($i * (1/12)) - 1.5%;
    }
}
.c-bar__line {
    height:calc(100vh - 20px);
    opacity:.16;
    background:#fff;
    width:1px;
}
$dot-size: 5px;
.c-bar__dot {
    position:absolute;
    left:calc(50% - 2px);
    background:#fff;
    height:$dot-size;
    width:$dot-size;
    top:-#{$dot-size};
    border-radius:100%;
    animation-duration:1s;
    animation-iteration-count:1;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
}
$positions: 60% 70% 76% 77% 72% 60% 50% 42% 38% 33% 30%;
@for $i from 1 through length($positions) {
    .c-bar-#{$i} .c-bar__dot {
        animation-name:arrive-#{$i};
        animation-delay:$i / 4 + 2s;
    }
    @keyframes arrive-#{$i} {
        0% { top:-#{$dot-size}; }
        100% { top:nth($positions, $i); }
    }
}
.c-pane--second {
    text-align:center;
    background:#fff;
    .c-flex-wrapper {
        width:100%;
    }
}
.c-imgtxt {
    text-align:center;
    margin:0 auto;
    max-width:250px;
}
.c-imgtxt__title {
    color:$bluegreen;
    font-weight:300;
    margin:0 0 .3em;
    &:before {
        content:"";
        margin:0 auto 1.4em;
        display:block;
        width:100px;
        height:100px;
        background:#fff center bottom no-repeat;
        padding:0 .7em;
    }
}
.c-imgtxt--browser {
    .c-imgtxt__title:before {
        background-image:url('../svgs/icon-download.svg');
    }
}
.c-imgtxt--tech {
    .c-imgtxt__title:before {
        background-image:url('../svgs/icon-gear.svg');
    }
}
.c-imgtxt--free {
    .c-imgtxt__title:before {
        background-image:url('../svgs/icon-free.svg');
    }
}
.c-imgtxt__body {
    color:#C7C7C7;
    font-weight:400;
    font-size:1.05em;
    line-height:1.3;
}
.c-pane--small {
    text-align:center;
    justify-content:center;
}
.c-pane--small .l-pane-grid {
    flex-grow:1;
    max-width:1300px;
}
.c-pane--small .l-pane-grid__item {
    display:flex;
    flex-direction:column;
}
.c-pane--small__number {
    margin:.3em 0;
    color:$bluegreen;
    font-size:4em;
    font-weight:100;
}
.c-pane--small__title {
    font-weight:300;
    margin-top:0;
    margin-bottom:.8em;
}
.c-pane__body {
    font-size:1.06em;
    line-height:1.3;
    color:#979797;
}
.c-pane--realtime {
    background:#f9f9f9;
}
.c-pane--green {
    background: -moz-linear-gradient(150deg, #40d89f 0%, #6cf388 100%);
    background: -webkit-linear-gradient(150deg, #40d89f 0%,#6cf388 100%);
    background: linear-gradient(-30deg, #40d89f 0%,#6cf388 100%);
    .c-pane--small__number,
    .c-pane--small__title,
    .c-pane__body {
        color:#fff;
    }
}
.c-separator {
    padding:3% 0;
    height:155px;
    background:#fff url('/images/separator.svg') center center no-repeat;
    background-size:100%;
}
.c-pane--about {
    text-align:center;
}
.c-pane--about__wrapper {
    width:100%;
    .l-pane-grid__item {
        flex-grow:1;
        justify-content:center;
    }
}
.c-person {
    margin:2em 0;
    padding:3.2em 0 0;
    font-size:1.4em;
    background:transparent center top no-repeat;
    &.c-person--bertrand {
        background-image:url('/images/icon-tag.svg');
    }
    &.c-person--guillaume {
        background-image:url('/images/icon-typo.svg');
    }
}
.c-person__occupation {
    color:#979797;
}
.c-person__separator {
    display:block;
    background:$lighter;
    height:1px;
    width:70px;
    margin:1em auto;
}
.c-person__name {
    font-weight:700;
    color:$lighter;
}
.c-person__social {
    display:flex;
    justify-content:center;
    margin-top:1.6em;
}
.c-person__social-el {
    padding:0 .42em;
}
.c-pane--tour {
    padding:2%;
    background:transparent url('/images/insitu-dashboard-small.jpg') center center no-repeat;
    background-size:cover;
    height:100vh;
    display:flex;
    .c-content {
        align-self:center;
        color:#fff;
    }
}
.c-chapter__wrapper {
    padding:2% 0 3em;
    text-align:center;
    position:relative;
    &:after {
        content:"";
        display:block;
        position:absolute;
        bottom:0;
        width:100%;
        height:1px;
        background:$softwhite;
    }
}
.c-chapter--app {
    .c-chapter__wrapper {
        padding-bottom:0;
    }
    .l-pane-grid {
        justify-content:space-around;
    }
    .l-pane-grid__item {
        line-height:0;
    }
}
.c-chapters {
    display:flex;
    align-items:baseline;
    width:100%;
    max-width:900px;
    justify-content:space-around;
    font-size:.85em;
    font-weight:600;
    margin-top:1.2em;
}
.c-chapters__el {
    text-align:center;
}
.c-chapters__link {
    display:flex;
    flex-direction:column;
    text-transform:uppercase;
    padding-top:4em;
    padding-bottom:1.2em;
    color:#C7C7C7;
    border-bottom:1px solid #fff;
    transition:border .3s ease;
    background:transparent center top no-repeat;
    &:hover {
        color:$bluegreen;
        border-bottom:1.5px solid $bluegreen;
    }
}
.c-chapters__link--start {
    background-image:url('/images/chapter-start.svg');
}
.c-chapters__link--first {
    background-image:url('/images/chapter-check.svg');
}
.c-chapters__link--install {
    background-image:url('/images/chapter-app.svg');
}
.c-chapters__link--notifs {
    background-image:url('/images/chapter-notif.svg');
}
.c-chapter__title {
    font-size:2.2em;
    background:transparent center top no-repeat;
    background-size:58px;
    padding-top:2.8em;
    margin-bottom:2.8em;
}
.c-chapter__title--start {
    background-image:url('/images/chapter-start.svg');
}
.c-chapter__title--first {
    background-image:url('/images/chapter-check.svg');
}
.c-chapter__title--app {
    background-image:url('/images/chapter-app.svg');
}
.c-chapter__title--notifs {
    background-image:url('/images/chapter-notif.svg');
}
.c-dashboard-tuto__captions {
    display:none;
}
.c-chapter__body, .creation-step {
    max-width:750px;
    margin:0 auto;
    padding:1em 0;
    text-align:left;
    color:$lighter;
    font-size:1.25em;
    line-height:1.6;
    img {
        display:block;
        margin:1.7em auto;
    }
}
.creation-step__title {
    font-weight:700;
    &:after {
        content:": ";
    }
}
.c-pane--try {
    background:$bluegreen;
    .c-h2 {
        margin-bottom:1.2em;
    }
    .c-pane__body {
        margin-bottom:2em;
    }
    .c-button--round {
        border-radius:30px;
    }
}
.c-footer {
    padding:5%;
    background:#fff;
    line-height:1.6;
    color:#c7c7c7;
    text-align:center;
    .l-pane-grid {
        align-items:flex-start;
    }
}
.c-footer__nav {
    padding:6% 0 4%;
}
.c-footernav__el {
    padding:0 0 1.5em;
}
