/** * @license * MyFonts Webfont Build ID 3576098, 2018-05-07T04:45:44-0400 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: Stolzl-Thin by The Northern Block Ltd * URL: https://www.myfonts.com/fonts/northernblock/stolzl/thin/ * * Webfont: Stolzl-Medium by The Northern Block Ltd * URL: https://www.myfonts.com/fonts/northernblock/stolzl/medium/ * * Webfont: Stolzl-Light by The Northern Block Ltd * URL: https://www.myfonts.com/fonts/northernblock/stolzl/light/ * * Webfont: Stolzl-Book by The Northern Block Ltd * URL: https://www.myfonts.com/fonts/northernblock/stolzl/book/ * * Webfont: Stolzl-Regular by The Northern Block Ltd * URL: https://www.myfonts.com/fonts/northernblock/stolzl/regular/ * * Webfont: Stolzl-Bold by The Northern Block Ltd * URL: https://www.myfonts.com/fonts/northernblock/stolzl/bold/ * * * License: https://www.myfonts.com/viewlicense?type=web&buildid=3576098 * Licensed pageviews: 10,000 * Webfonts copyright: Copyright (c) 2015 by Mariya Pigoulevskaya. All rights reserved. * * © 2018 MyFonts Inc */ @import url("//hello.myfonts.net/count/369122"); @font-face {font-family: 'Stolzl-Thin';src: url('../fonts/369122_0_0.eot');src: url('../fonts/369122_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/369122_0_0.woff2') format('woff2'),url('../fonts/369122_0_0.woff') format('woff'),url('../fonts/369122_0_0.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'Stolzl-Medium';src: url('../fonts/369122_1_0.eot');src: url('../fonts/369122_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/369122_1_0.woff2') format('woff2'),url('../fonts/369122_1_0.woff') format('woff'),url('../fonts/369122_1_0.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'Stolzl-Light';src: url('../fonts/369122_2_0.eot');src: url('../fonts/369122_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/369122_2_0.woff2') format('woff2'),url('../fonts/369122_2_0.woff') format('woff'),url('../fonts/369122_2_0.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'Stolzl-Book';src: url('../fonts/369122_3_0.eot');src: url('../fonts/369122_3_0.eot?#iefix') format('embedded-opentype'),url('../fonts/369122_3_0.woff2') format('woff2'),url('../fonts/369122_3_0.woff') format('woff'),url('../fonts/369122_3_0.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'Stolzl-Regular';src: url('../fonts/369122_4_0.eot');src: url('../fonts/369122_4_0.eot?#iefix') format('embedded-opentype'),url('../fonts/369122_4_0.woff2') format('woff2'),url('../fonts/369122_4_0.woff') format('woff'),url('../fonts/369122_4_0.ttf') format('truetype');font-weight: normal;font-style: normal;} @font-face {font-family: 'Stolzl-Bold';src: url('../fonts/369122_5_0.eot');src: url('../fonts/369122_5_0.eot?#iefix') format('embedded-opentype'),url('../fonts/369122_5_0.woff2') format('woff2'),url('../fonts/369122_5_0.woff') format('woff'),url('../fonts/369122_5_0.ttf') format('truetype');font-weight: normal;font-style: normal;} /*! * pagepiling.js 1.5.5 * * https://github.com/alvarotrigo/pagePiling.js * @license MIT licensed * * Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo */body,html{overflow:hidden;margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.pp-section{height:100%;position:absolute;width:100%}.pp-easing{-webkit-transition:all 1s cubic-bezier(.55,.085,0,.99);-moz-transition:all 1s cubic-bezier(.55,.085,0,.99);-o-transition:all 1s cubic-bezier(.55,.085,0,.99);transition:all 1s cubic-bezier(.55,.085,0,.99);-webkit-transition-timing-function:cubic-bezier(.55,.085,0,.99);-moz-transition-timing-function:cubic-bezier(.55,.085,0,.99);-o-transition-timing-function:cubic-bezier(.55,.085,0,.99);transition-timing-function:cubic-bezier(.55,.085,0,.99)}#pp-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1}#pp-nav.right{right:17px}#pp-nav.left{left:17px}.pp-section.pp-table{display:table}.pp-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%}.pp-slidesNav{position:absolute;z-index:4;left:50%;opacity:1}.pp-slidesNav.bottom{bottom:17px}.pp-slidesNav.top{top:17px}#pp-nav ul,.pp-slidesNav ul{margin:0;padding:0}#pp-nav li,.pp-slidesNav li{display:block;width:14px;height:13px;margin:7px;position:relative}.pp-slidesNav li{display:inline-block}#pp-nav li a,.pp-slidesNav li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none}#pp-nav li .active span,.pp-slidesNav .active span{background:#333}#pp-nav span,.pp-slidesNav span{top:2px;left:2px;width:8px;height:8px;border:1px solid #000;background:rgba(0,0,0,0);border-radius:50%;position:absolute;z-index:1}.pp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;white-space:nowrap;max-width:220px}.pp-tooltip.right{right:20px}.pp-tooltip.left{left:20px}.pp-scrollable{overflow-y:auto;height:100%} /****************** COMMON ***********************/ * {margin:0;padding:0;} *, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} html, body {height:100%;} body {margin:0;padding:0;font-family: 'Stolzl-Book', Arial, sans-serif;font-size:16px;font-weight:400;background:#fff;color:#1d1d1b;} .clearfix:after {content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} #wrap {opacity:0;width:100%;} img {display:block;max-width:100%;} .green {color:#b7d060;} .hidden {display:none !important;} div.section {background:#fff;visibility:hidden;} div.section.sidebar {padding-left:240px;} div.content {display:flex;width:100%;height:100%;align-items:center;justify-content:center;} div.content.wrap {position:relative;max-width:1200px;margin:0 auto;padding:0 20px;} div.content.fs {align-items:flex-start;justify-content:flex-start;height:auto;min-height:100%;} #loader {position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;z-index:999999;display:none;} body.preload {overflow:hidden;} body.preload #loader {display:block;} #mobile {display:none;} svg.icon-close {position:absolute;width:30px;height:30px;top:20px;right:20px;fill:#666;cursor:pointer;z-index:99999;} svg.icon-close:hover {fill:#000;} /****************** INTRO ***********************/ #intro {} #intro div.content {justify-content:left;} #intro div.content div {font-size:25px;line-height:30px;background_:#eee;} #intro div.content div.txt {display:none;} #intro div.content div.anim {min-height:360px;} #intro div.content strong {font-family:'Stolzl-Medium';} #intro #skip {position:absolute;bottom:40px;left:40px;color:#1d1d1b;text-decoration:none;} #intro #skip:after {position:absolute;bottom:-3px;left:0;content:'';background:#b7d060;width:0%;height:1px;transition:width 1s ease;} #intro #skip:hover {color:#b7d060;} #intro #skip:hover:after {width:100%;} #typeWriter span {display:block;} #typeWriter :last-child::after {content:'|';display:inline-block;animation:blink 1s step-end infinite;} #typeWriter #init::after {display:none;} #typeWriter span.typewriter-item::before {content:'';display:inline-block;margin-right:10px;} @keyframes blink {from, to{opacity:0;} 50% {opacity:1;}} /****************** LOGO SVG ***********************/ .st0 {fill:#B7CF5F;} .st1 {font-family:'Stolzl-Medium';} .st2 {font-size:110px;} .st3 {letter-spacing:-2;} .st4 {letter-spacing:-3;} .st5 {font-family:'Stolzl-Bold';} .st6 {font-size:120px;} .st7 {letter-spacing:-4;} /****************** ASK ***********************/ #ask {} #ask div.content {justify-content:space-between;} #ask div.content div {display:flex;align-items:flex-end;width:50%;height:500px;} #ask div.content svg {width:100%;max-width:580px;} #ask div.content p {font-family:'Stolzl-Medium';font-size:100px;line-height:90px;color:#b7d060;} #ask div.content p strong {font-family:'Stolzl-Medium';font-size:110px;line-height:90px;color:#1d1d1b;} #ask div.buttons {justify-content:flex-end;padding-right:30px;} #ask div.buttons a {position:relative;display:inline-block;font-family:'Stolzl-Bold';font-size:70px;margin-left:50px;color:#1d1d1b;text-decoration:none;} #ask div.buttons a span {position:relative;z-index:1;} #ask div.buttons a:after {position:absolute;bottom:0;left:15px;content:'';background:#1d1d1b;width:100%;height:5px;transition:left, width, height 1s ease;} #ask div.buttons a:hover:after {bottom:0;left:-10px;width:calc( 100% + 30px );background:#b7d060;height:30px;} /****************** OUPS ***********************/ #oups {background:#1d1d1b;} #oups div.content {justify-content:space-between;} #oups div.content > div {display:flex;align-items:flex-end;height:400px;} #oups div.content p {font-family:'Stolzl-Bold';font-size:20px;line-height:26px;color:#fff;} #oups div.content p strong {display:block;font-family:'Stolzl-Bold';font-size:120px;line-height:120px;margin-bottom:80px;} #oups div.content p span {color:#b7d060;} #oups div.content div.buttons {padding-top:100px;flex-wrap:wrap;} #oups div.content div.buttons div {width:100%;margin:50px 0 10px;} #oups div.content div.buttons a {position:relative;display:inline-block;font-family:'Stolzl-Bold';font-size:30px;color:#fff;text-decoration:none;background_:red;} #oups div.content div.buttons a span {position:relative;z-index:1;} #oups div.content div.buttons a:after {position:absolute;bottom:-10px;left:0;content:'';background:#fff;width:100%;height:5px;transition:left, width, height 1s ease;} #oups div.content div.buttons a:hover:after {bottom:-10px;left:0;background:#b7d060;height:30px;} /****************** HOME ***********************/ #home {background:#eff5ea;padding-left:0;height:100%;overflow-x:hidden;} #home div.picture {position:relative;right:-200%;width:70%;z-index:2;transition:right 1s ease;transition-delay:.7s;} #home div.picture.on {right:0;} #home div.inner {position:relative;right:0;width:30%;} #home div.inner h2 {position:relative;z-index:3;left:-25%;width:125%;font-family:'Stolzl-Book';font-size:18px;line-height:22px;margin-bottom:60px;opacity:0;bottom:-20px;transition:all 2s ease;transition-delay:2s;} #home div.inner h2.on {opacity:1;bottom:0;} #home div.inner h2 a {color:#1d1d1b;} #home div.scroll {position:relative;height:58px;background:url('../img/scroll.gif') no-repeat top left;padding-left:80px;margin-bottom:40px;left:-100%;opacity:0;transition:all 1s ease;transition-delay:5s;} #home div.scroll p {font-family:'Stolzl-Bold';font-size:12px;line-height:18px;text-transform:uppercase;padding-top:10px;} #home div.scroll.on {left:0;opacity:1;} /****************** SIDEBAR ***********************/ #sidebar {position:fixed;top:0;left:-240px;width:240px;height:100%;background:#fff;border-right:1px solid #ababab;z-index:9999;transition:left 1s ease;} #sidebar.visible {left:0;} #sidebar #logo {display:block;padding:10% 30px 10% 10px;} #sidebar #logo svg {width:100%;width:170px;} #sidebar #nav {position:absolute;top:190px;bottom:0;display:flex;flex-direction:column;justify-content:space-between;z-index:9999999999;} #sidebar ul {list-style:none;padding:10% 15px 10px 45px;} #sidebar a {color:#1d1d1b;text-decoration:none;} #sidebar div.unapei {padding:10% 50px;border-top:1px solid #ababab;} #sidebar div.unapei img {display:block;width:140px;margin:0 auto;} #sidebar ul.main li {margin-bottom:4vh;} #sidebar ul.main li a {display:inline-block;font-family:'Stolzl-Bold';font-size:18px;line-height:33px;} #sidebar ul.main li a.falc {background:url('../img/falc.png') no-repeat right center;padding-right:40px; color: #7D7B7B; font-size:14px; line-height: 15px} #sidebar ul.more li {margin-bottom:15px;} #sidebar ul.more li a {font-family:'Stolzl-Book';font-size:18px;line-height:18px;} ul.more li.share a {display:inline-block;width:30px;height:30px;background-repeat:no-repeat;background-position:center;margin:10px 5px 5px 0;opacity:.7;} ul.more li.share a:hover {opacity:1;} ul.more li.share a.twitter {background-image:url('../img/twitter.png');} ul.more li.share a.facebook {background-image:url('../img/facebook.png');} ul.more li.share a.linkedin {background-image:url('../img/linkedin.png');} #sidebar li a:hover {color:#b7d060;} #sidebar li a.active {color:#b7d060;cursor:default;} #burger {position:absolute;top:30px;right:20px;display:flex;display:none;width:40px;height:40px;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform 330ms ease-out;} #sidebar.open #burger {transform:rotate(-45deg);} #burger .line-menu {background:#b7d060;border-radius:2px;width:100%;height:5px;} #burger .line-menu.half {width:50%;} #burger .line-menu.start {transition:transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);transform-origin:right;} #sidebar.open #burger .line-menu.start{transform:rotate(-90deg) translateX(3px);} #burger .line-menu.end {align-self:flex-end;transition:transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);transform-origin:left;} #sidebar.open #burger .line-menu.end{transform:rotate(-90deg) translateX(-3px);} /****************** PROGRESSBAR ***********************/ #progressbar {position:fixed;bottom:0;left:40px;right:40px;height:80px;z-index:999;background_:#fff;display:none;} #progressbar.on {display:block;} #progressbar div.bgline {position:absolute;top:50%;width:100%;height:3px;background:#e2e9ea;} #progressbar div.line {position:absolute;top:0;left:0;height:3px;background:#1d1d1b;width:0;} #progressbar div.links {position:absolute;bottom:0;left:0;right:0;width:100%;} #progressbar div.links a {float:left;width:16.6666%;text-align:center;font-family:'Stolzl-Bold';font-size:12px;line-height:36px;color:#ccc;text-decoration:none;text-transform:uppercase;} #progressbar div.links a.on {color:#1d1d1b;} /****************** TEMOIGNAGE ***********************/ div.temoignage {padding:40px 40px 80px;width:100%;height:100%;margin:0;overflow:auto;} div.temoignage div.box {position:absolute;z-index:0;top:40px;left:40px;width:calc( 50% - 40px );height:calc( 100% - 120px );background:#f9dc8f;} div.temoignage div.border {position:absolute;z-index:0;top:40px;right:40px;width:calc( 50% - 40px );height:calc( 100% - 120px );border:1px solid #e2e9ea;} div.temoignage div.prez {position:absolute;top:50%;left:25%;transform:translate(-50%, -50%);z-index:3;display:flex;align-items:center;justify-content:center;width:auto;height:auto;text-align:center;color:#fff;} div.temoignage div.prez p span {display:none;font-size:11px;font-style:italic;} div.temoignage span.legend {position:absolute;bottom:52px;left:40px;font-size:11px;font-style:italic;color:#000;} div.temoignage div.buttons {margin-top:50px;} div.temoignage div.buttons a {display:inline-block;width:30px;height:30px;background-repeat:no-repeat;background-position:center;margin:7px;} div.temoignage div.buttons a.option {margin:7px 2px;opacity:.3;display:none;transition:all 1s ease;} div.temoignage div.buttons a.option:hover{opacity:1;} div.temoignage div.buttons a.option.on {display:inline-block;} div.temoignage div.buttons a.sound {background-image:url('../img/sound.png');} div.temoignage div.buttons a.share {background-image:url('../img/share.png');} div.temoignage div.buttons a.share.on {border-right:1px solid #fff;padding-right:10px;width:40px;background-position:left center;} div.temoignage div.buttons a.twitter {background-image:url('../img/twitter.png');} div.temoignage div.buttons a.facebook {background-image:url('../img/facebook.png');} div.temoignage div.buttons a.linkedin {background-image:url('../img/linkedin.png');} div.temoignage div.article {position:absolute;z-index:2;width:calc(50% - 40px);height:calc(100% - 120px);overflow:hidden;top:40px;left:50%; opacity: 0;} /*div.temoignage div.article div.inner {display:flex;justify-content:center;align-items:center;min-height:calc( 100vh - 120px );padding:100px;}*/ div.temoignage div.article div.anim {max-width:340px;} div.temoignage div.article div p {font-size:14px;margin-bottom:20px;} #temoignage1 div.box {background:#5bbc64;} #temoignage2 div.box {background:#fcba63;} #temoignage3 div.box {background:#d8c6b8;} #temoignage4 div.box {background:#1ab2c5;} #temoignage5 div.box {background:#ed1c24;} div.temoignage div.article div.gif-container { display: none; width: 100%; height: auto; margin: 0 auto; } div.temoignage .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; width: 512px; height: 600px; font-family: 'Stolzl-Regular'; font-size: 11pt; line-height: 19pt; letter-spacing: 0.025em; color: #1D1D1B; } div.temoignage .container::before { position: absolute; content: ""; top: 0; height: 50%; width: 200%; left: 50%; background-color: white; transform: translate(-50%, -180%); z-index: 10; } div.temoignage .container::after { position: absolute; content: ""; top: 0; height: 50%; width: 200%; left: 50%; background-image: -webkit-linear-gradient(-90deg, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100%); background-image: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100%); background-image: linear-gradient(180deg, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100%); background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; transform: translate(-50%, -80%); z-index: 10; } div.temoignage strong { font-family: 'Stolzl-Bold'; } div.temoignage .cb { float: none; clear: both; position: relative; } div.temoignage .animation-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 5%; } div.temoignage .red { color: #ED3A44; font-family: 'Stolzl-Bold'; font-size: 11pt; line-height: 19pt; letter-spacing: 0.025em; text-transform: uppercase; } div.temoignage .column-container { position: relative; } div.temoignage .column-container .column { float: left; width: 45%; } div.temoignage .column-container .column-2 { margin-left: 10%; } div.temoignage .column-item { position: relative; margin-top: 20px; } div.temoignage svg.icon-check { width: 34px; height: 30px; position: absolute; top: -15px; left: -20px; } div.temoignage svg.icon-circle { width: 240px; height: 130px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } div.temoignage svg.icon-line { height: 130px; width: 25px; position: absolute; top: 50%; left: -10px; transform: translate(-50%, -50%); z-index: 0; } div.temoignage span.text { position: relative; z-index: 2; } div.temoignage p { margin: 0; } div.temoignage .blur { filter: blur(4px); } div.temoignage .text { margin-top: 40px; } div.temoignage .text:first-child { margin-top: 0; } div.temoignage .up { font-size: 14pt; line-height: 22pt; } div.temoignage.animation-02 #svg-text { position: absolute; top: 355px; width: 460px; left: -64px; height: 1040px; } div.temoignage.animation-04 #svg-top { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); width: 460px; height: 113px; } div.temoignage.animation-04 #svg-center { opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 230px; } div.temoignage.animation-04 #svg-bottom { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 20%); width: 460px; height: 119px; } div.temoignage.animation-04 #svg-shape { opacity: 1; position: absolute; left: 50%; top: -400px; transform: translate(-50%, 0); width: 600px; } /****************** EQUALIZER ***********************/ .equalizer {position:relative;display:inline-block;width:27px;top:-6px;} .equalizer span {position:absolute;display:inline-block;width:3px;background:#fff;bottom:0;} @keyframes kf_eq1 {0% {height:15px} 50% {height: 5px} 100% {height: 15px}} @-webkit-keyframes kf_eq1 {0% {height: 15px} 50% {height: 5px} 100% {height: 15px}} @keyframes kf_eq2 {0% {height:30px} 50% {height: 20px} 100% {height: 30px}} @-webkit-keyframes kf_eq2 {0% {height: 30px} 50% {height: 20px} 100% {height: 30px}} @keyframes kf_eq3 {0% {height:20px} 50% {height: 5px} 100% {height: 20px}} @-webkit-keyframes kf_eq3 {0% {height: 20px} 50% {height: 5px} 100% {height: 20px}} .equalizer.on span {animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;} .equalizer span.eq1 {height:15px;left:0;} .equalizer span.eq2 {height:30px;left:6px;bottom:-5px;} .equalizer span.eq3 {height:20px;left:12px;} .equalizer span.eq4 {height:15px;left:18px;bottom:-5px;} .equalizer span.eq5 {height:15px;left:24px;} .equalizer.on span.eq1 {animation-name:kf_eq1;-webkit-animation-name:kf_eq1;animation-delay:0s;-webkit-animation-delay:0s;} .equalizer.on span.eq2 {animation-name:kf_eq2;-webkit-animation-name:kf_eq2;animation-delay:0.15s;-webkit-animation-delay:0.15s;} .equalizer.on span.eq3 {animation-name:kf_eq3;-webkit-animation-name:kf_eq3;animation-delay:0.3s;-webkit-animation-delay:0.3s;} .equalizer.on span.eq4 {animation-name:kf_eq1;-webkit-animation-name:kf_eq1;animation-delay:0.45s;-webkit-animation-delay:0.45s;} .equalizer.on span.eq5 {animation-name:kf_eq1;-webkit-animation-name:kf_eq1;animation-delay:0.6s;-webkit-animation-delay:0.6s;} /****************** FINAL ***********************/ #conclusion div.outer {position:relative;height:100%;background:#b7d060;border:solid #fff;border-width:40px 40px 80px;} #conclusion div.content div.inner {display:flex;width:100%;justify-content:space-between;align-items:flex-end;background_:yellow;height_:500px;} #conclusion div.content p {font-family:'Stolzl-Bold';font-size:20px;line-height:26px;color:#1d1d1b;} #conclusion div.content p a {color:#1d1d1b;} #conclusion div.content div.buttons {display_:block;padding-top:100px;} #conclusion div.content div.buttons a {position:relative;flex:2;display:inline-block;font-family:'Stolzl-Bold';font-size:60px;color:#1d1d1b;text-decoration:none;margin-top:60px;background_:red;} #conclusion div.content div.buttons a span {position:relative;z-index:1;} #conclusion div.content div.buttons a:after {position:absolute;bottom:-10px;left:0;content:'';background:#1d1d1b;width:100%;height:5px;transition:left, width, height 1s ease;} #conclusion div.content div.buttons a:hover:after {bottom:-10px;left:0;background:#fff;height:30px;} /****************** CHOICES ***********************/ div.choices {position:fixed;top:0;left:-240px;display:flex;flex-direction:column;width:240px;height:100%;z-index:9998;transition:left 1s ease;} div.choices.on {left:240px;} div.choice {position:relative;display:flex;flex:1;overflow:hidden;background:#eff5ea;} div.choice a {display:flex;flex:1;flex-direction:column;justify-content:center;color:#1d1d1b;text-decoration:none;padding:15px;border-top:1px solid #c6cdcd;height:100%;} div.choice:first-child a {border:0;} div.choice a p {position:relative;z-index:2;font-size:14px;} div.choice:before {position:absolute;left:0;z-index:1;content:'';display:block;width:100%;height:100%;left:-100%;background:#b7d060;transition:left 1s ease;} div.choice:hover {background:#fff;} div.choice.on:before {left:0;} /****************** ENGAGE ***********************/ div.engage {background:#b7d060;} div.engage div.choice {display:none;} div.engage div.result {position:absolute;top:0;left:480px;display:flex;min-height:100vh;background:#b7d060;transition:top 1s ease;transition-delay:1s;display:none;} div.engage div.inner {max-width:960px;padding:60px 100px;} div.engage div.title {position:relative;font-family:'Stolzl-Bold';font-size:68px;line-height:78px;color:#fff;margin-bottom:60px;padding-bottom:60px;} div.engage div.title:before {position:absolute;content:'';top:0;right:0;width:40px;height:1px;background:#1D1D1B;} div.engage div.title:after {position:absolute;content:'';bottom:0;left:0;width:40px;height:5px;background:#fff;} div.engage div.actions {clear:both;padding-bottom:30px;} div.engage div.actions h4 {font-family:'Stolzl-Bold';font-size:24px;color:#1d1d1b;} div.engage div.actions div.links {display:flex;justify-content:space-between;} div.engage div.actions div.links > div {max-width:45%;} div.engage div.actions div.links div div{position:relative;padding-left:40px;margin-top:40px;} div.engage div.actions a.link {position:relative;display:inline-block;font-family:'Stolzl-Bold';font-size:16px;color:#1d1d1b;padding-left:20px;display:none;} div.engage div.actions a.link span {position:absolute;top:4px;left:0;width:16px;height:16px;background:url('../img/link.png') no-repeat 0 0;} div.engage div.actions a.link:hover {color:#fff;} div.engage div.actions a.link:hover span{background-position:0 -16px;} div.engage div.actions div.linksfalc {justify-content:space-between;} div.engage div.actions div.linksfalc > div {max-width:100%;} div.engage div.actions div.linksfalc div div{position:relative;padding-left:40px;margin-top:40px;} div.engage div.actions a.linkfalc {position:relative;display:inline-block;font-family:'Stolzl-Bold';font-size:16px;color:#1d1d1b;padding-left:20px;display:none;} div.engage div.actions a.linkfalc span {position:absolute;top:4px;left:0;width:16px;height:16px;background:url('../img/link.png') no-repeat 0 0;} div.engage div.actions a.linkfalc:hover {color:#fff;} div.engage div.actions a.linkfalc:hover span{background-position:0 -16px;} div.engage div.actions span.num {position:absolute;top:0;left:0;font-family:'Stolzl-Bold';font-size:16px;color:#1d1d1b;} div.engage div.buttons {float:right;text-align:right;padding-bottom:40px;margin:40px 0;} div.engage div.buttons p {font-family:'Stolzl-Bold';font-size:17px;color:#1d1d1b;} div.engage div.buttons a {position:relative;display:inline-block;font-family:'Stolzl-Bold';font-size:17px;color:#1d1d1b;text-decoration:none;text-align:right;} div.engage div.buttons a span {position:relative;z-index:1;} div.engage div.buttons a:after {position:absolute;bottom:-10px;left:0;content:'';background:#1d1d1b;width:100%;height:5px;transition:left, width, height 1s ease;} div.engage div.buttons a:hover:after {bottom:-10px;left:0;background:#fff;height:30px;} div.engage div.intro {padding:100px 100px 100px 300px;} div.engage div.intro p {position:relative;font-family:'Stolzl-Medium';font-size:16px;line-height:1.3;color:#000;margin-bottom:20px;} /****************** MANIFEST ***********************/ #manifeste {background:#b7d060;} #manifeste div.inner {width:560px;padding-bottom:100px;padding-top:100px;margin:0 auto;} #manifeste div.inner p {position:relative;/*bottom:-20px;*/font-family:'Stolzl-Medium';font-size:18px;line-height_:22px;color:#000;margin-bottom:20px;/*opacity:0;transition:all 2s ease;*/} #manifeste div.inner p.first {font-size:16px;line-height:1.3;} #manifeste div.inner p.last {font-family:'Stolzl-Bold';font-size:16px;} #manifeste div.inner p.on {opacity:1;bottom:0 !important;left_:0;color:#1d1d1b;} #manifeste ul.more {float:left;list-style:none;padding:50px 0;display:none;} #manifeste div.buttons {float:right;padding-bottom:40px;} #manifeste div.buttons a {position:relative;flex:2;display:inline-block;font-family:'Stolzl-Bold';font-size:17px;color:#1d1d1b;text-decoration:none;text-align:right;margin:40px 0;} #manifeste div.buttons a span {position:relative;z-index:1;} #manifeste div.buttons a:after {position:absolute;bottom:-10px;left:0;content:'';background:#1d1d1b;width:100%;height:5px;transition:left, width, height 1s ease;} #manifeste div.buttons a:hover:after{bottom:-10px;left:0;background:#fff;height:30px;} /****************** PAGES ANNEXES ***********************/ div.annexe {background:#b7d060;} div.annexe div.inner {padding:100px;} div.annexe div.inner div {margin-bottom:40px;} div.annexe div.title {font-family:'Stolzl-Bold';font-size:70px;line-height:80px;color:#fff;} div.annexe div.inner div.condition {position:relative;/*border-left:1px solid #fff;padding-left:20px;*//*margin-left:40px;margin-right:40px;*/margin:60px 40px 40px;} div.annexe div.inner div.condition:after {position:absolute;content:'';bottom:-15px;width:40px;height:2px;background:#fff;} div.annexe p {font-size:14px;line-height:20px;} div.annexe a {color:#fff;} div.annexe a:hover {text-decoration:none;} @media (max-width:1239px){ #home div.inner h2 {font-size:16px;line-height:20px;margin-bottom:50px;} div.choice a {padding:10px;} div.choice a p {font-size:14px;} div.engage div.inner {max-width:100%;padding:50px;} div.engage div.title {font-size:50px;line-height:60px;} div.engage div.buttons p, div.engage div.buttons a {font-size:14px;} div.engages div.actions > div {float:none;width:auto;padding-right:0;} div.engage div.actions div.links {flex-direction:column;} div.engage div.actions div.links > div {max-width:100%;} div.temoignage svg.icon-close {position:fixed;top:9px;right:32px;} } @media (max-width:992px){ #mobile {display:block;} div.content.wrap {max-width:100%;padding:10px;} div.section.sidebar {padding-left:0;padding-top:100px;} #sidebar {top:-100px;left:0;width:100%;height:100px;border:0;transition:top 0s ease;} #sidebar.visible {top:0;} #sidebar #logo {display:block;width:100px;height:100px;padding:10px;} #sidebar #logo svg {width:100%;height:100%;} #sidebar #nav {position:absolute;top:100px;bottom:auto;width:100%;background:#fff;display:none;} #sidebar.open #nav {display:block;} #sidebar ul {padding:0;} #sidebar ul li {margin-bottom:0 !important;} #sidebar ul li a {display:block !important;border-top:1px solid #eee;padding:10px 30px;font-size:14px !important;line-height:18px !important;} #sidebar li.link a:hover, #sidebar li.link a.on {background:#b7d060;color:#fff;} #sidebar a br {display:none;} #sidebar div.unapei {padding:10px 0;border:0;border-top:1px solid #b7d060;border-bottom:1px solid #b7d060;} #sidebar ul li.share {display:flex !important;justify-content:center;align-items:center;border-top:1px solid #eee;padding:10px;} #sidebar ul li.share a {border-top:0;} #burger {display:flex;} #progressbar {display:none !important;} #intro div.content div {font-size:18px;line-height:24px;} #ask {flex-direction:column;} #ask div.content {justify-content:center;flex-direction:column;} #ask div.content div {width:100%;height:auto;} #ask div.content svg {width:100%;} #ask div.content p {font-size:40px;line-height:44px;margin-bottom:50px;} #ask div.content p strong {font-size:34px;line-height:38px;} #ask div.buttons {margin-top:20%;} #ask div.buttons a {font-size:40px;margin-left:50px;} #oups div.content {justify-content:center;flex-direction:column;} #oups div.content > div {width:100%;height:auto;} #oups div.content p {font-family:'Stolzl-Bold';font-size:14px;line-height:20px;color:#fff;} #oups div.content p strong {display:block;font-family:'Stolzl-Bold';font-size:40px;line-height:60px;margin-bottom:30px;} #oups div.content div.buttons {display_:block;padding-top:0px;flex-wrap:wrap;} #oups div.content div.buttons div {width:100%;margin:50px 0 10px;} #oups div.content div.buttons a {position:relative;display:inline-block;font-family:'Stolzl-Bold';font-size:14px;color:#fff;text-decoration:none;background_:red;} #oups div.content div.buttons a span {position:relative;z-index:1;} #oups div.content div.buttons a:after {position:absolute;bottom:-10px;left:0;content:'';background:#fff;width:100%;height:5px;transition:left, width, height 1s ease;} #oups div.content div.buttons a:hover:after {bottom:-10px;left:0;background:#b7d060;height:30px;} #home {display:block;} #home div.content {display:block;} #home div.picture {left:auto;width:auto;height:auto;width:100%;} #home div.picture img {} #home div.inner {position:relative;right:auto;width:100%;padding-bottom:40px;} #home div.inner > div {display:block;max-width:260px;margin:40px auto;} #home div.inner h2 {left:auto;font-size:14px;line-height:18px;width:auto;} div.temoignage {padding:20px;width:auto;height:auto;} div.temoignage div.box {display:none;} div.temoignage div.border {display:none;} div.temoignage div.prez {position:relative;top:auto;left:auto;transform:none;background:#f9dc8f;padding:20px;} #temoignage1 div.prez {background:#ed3a44;} #temoignage2 div.prez {background:#fbbe5e;} #temoignage3 div.prez {background:#dfcebf;} #temoignage4 div.prez {background:#89c082;} #temoignage5 div.prez {background:#1cc5c3;} div.temoignage div.buttons {margin-top:20px;} div.temoignage div.article {padding-left:0;width:calc(100% - 40px) !important; height: calc(100vh - 187px); left:20px; top:187px;} div.temoignage div.article div.inner {display:flex;justify-content:center;align-items:center;min-height:auto;padding:20px;} div.temoignage div.article div.anim {max-width:100%;} div.temoignage svg.icon-close {display:none;} div.temoignage div.prez p span {display:block;} div.temoignage span.legend {display:none;} #conclusion div.outer {border-width:0px;} #conclusion div.content div.inner {justify-content:center;align-items:center;flex-direction:column;height:100%;} #conclusion div.content divs {width:100%;} #conclusion div.content div.buttons {padding-top:20px;} #conclusion div.content div.buttons a {font-size:30px;margin-top:30px;} #choices {display:none;} div.choice {display:none;} div.section.active div.choice {display:block;} div.choice a p {font-size:13px;} div.engage {padding-top:100px;} div.engage div.choice {display:block;height:90px;} div.engage div.choice a {font-size:14px;} div.engage div.inner {max-width:100%;padding:20px;} div.engage div.title {font-size:32px;line-height:34px;} div.engage div.result {position:relative;top:auto;left:auto;display:block;min-height:auto;display:none;} div.engage div.inner {max-width:100%;padding:20px;overflow:hidden;} div.engage div.title {font-size:32px;line-height:34px;} div.engage div.actions div.links {flex-direction:column;} div.engage div.actions div.links > div {max-width:100%;} div.annexe div.inner {padding:20px;} div.annexe div.title {font-size:32px;line-height:34px;} div.annexe div.inner div.condition {margin-left:10px;margin-right:0;} div.annexe p {font-size:13px;line-height:17px;} div.annexe a {color:#fff;} div.engage div.intro {padding:100px 10px;} div.engage div.intro br.lb {display:none;} } #scroll-tip { opacity: 0; display: none; position: absolute; top: 50%; left: calc(75% - 20px); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 7000; } #scroll-tip .icon { fill: black; width: 22px; height: 36px; -webkit-animation: scroll alternate-reverse infinite 0.6s; -o-animation: scroll alternate-reverse infinite 0.6s; animation: scroll alternate-reverse infinite 0.6s; } @keyframes scroll { from { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } to { -webkit-transform: translate(0, 50%); -moz-transform: translate(0, 50%); -ms-transform: translate(0, 50%); -o-transform: translate(0, 50%); transform: translate(0, 50%); } } }