body.compensate-for-scrollbar{overflow:hidden}.fancybox-active{height:auto}.fancybox-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancybox-container{-webkit-backface-visibility:hidden;backface-visibility:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;height:100%;left:0;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-webkit-transform:translateZ(0);transform:translateZ(0);width:100%;z-index:99992}.fancybox-container *{box-sizing:border-box}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancybox-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancybox-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.87;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s,visibility 0s linear .25s;visibility:hidden;z-index:99997}.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;transition:opacity .25s,visibility 0s;visibility:visible}.fancybox-infobar{color:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;text-align:center;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-toolbar{right:0;top:0}.fancybox-stage{direction:ltr;overflow:visible;-webkit-transform:translateZ(0);z-index:99994}.fancybox-is-open .fancybox-stage{overflow:hidden}.fancybox-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;white-space:normal;width:100%;z-index:99994}.fancybox-slide:before{content:"";display:inline-block;height:100%;margin-right:-.25em;vertical-align:middle;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--next{z-index:99995}.fancybox-slide--image{overflow:visible;padding:44px 0}.fancybox-slide--image:before{display:none}.fancybox-slide--html{padding:6px 6px 0}.fancybox-slide--iframe{padding:44px 44px 0}.fancybox-content{background:#fff;display:inline-block;margin:0 0 6px;max-width:100%;overflow:auto;padding:0;padding:24px;position:relative;text-align:left;vertical-align:middle}.fancybox-slide--image .fancybox-content{-webkit-animation-timing-function:cubic-bezier(.5,0,.14,1);animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;margin:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;-webkit-transform-origin:top left;transform-origin:top left;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancybox-can-zoomOut .fancybox-content{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-content{cursor:zoom-in}.fancybox-can-drag .fancybox-content{cursor:-webkit-grab;cursor:grab}.fancybox-is-dragging .fancybox-content{cursor:-webkit-grabbing;cursor:grabbing}.fancybox-container [data-selectable=true]{cursor:text}.fancybox-image,.fancybox-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancybox-spaceball{z-index:1}.fancybox-slide--html .fancybox-content{margin-bottom:6px}.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--video .fancybox-content{height:100%;margin:0;overflow:visible;padding:0;width:100%}.fancybox-slide--video .fancybox-content{background:#000}.fancybox-slide--map .fancybox-content{background:#e5e3df}.fancybox-slide--iframe .fancybox-content{background:#fff;height:calc(100% - 44px);margin-bottom:44px}.fancybox-iframe,.fancybox-video{background:transparent;border:0;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancybox-iframe{vertical-align:top}.fancybox-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancybox-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancybox-button{background:rgba(30,30,30,.6);border:0;border-radius:0;cursor:pointer;display:inline-block;height:44px;margin:0;outline:none;padding:10px;transition:color .2s;vertical-align:top;width:44px}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:focus,.fancybox-button:hover{color:#fff}.fancybox-button.disabled,.fancybox-button.disabled:hover,.fancybox-button[disabled],.fancybox-button[disabled]:hover{color:#888;cursor:default}.fancybox-button svg{display:block;overflow:visible;position:relative;shape-rendering:geometricPrecision}.fancybox-button svg path{fill:transparent;stroke:currentColor;stroke-linejoin:round;stroke-width:3}.fancybox-button--pause svg path:nth-child(1),.fancybox-button--play svg path:nth-child(2){display:none}.fancybox-button--play svg path,.fancybox-button--share svg path,.fancybox-button--thumbs svg path{fill:currentColor}.fancybox-button--share svg path{stroke-width:1}.fancybox-navigation .fancybox-button{height:38px;opacity:0;padding:6px;position:absolute;top:50%;width:38px}.fancybox-show-nav .fancybox-navigation .fancybox-button{transition:opacity .25s,visibility 0s,color .25s}.fancybox-navigation .fancybox-button:after{content:"";left:-25px;padding:50px;position:absolute;top:-25px}.fancybox-navigation .fancybox-button--arrow_left{left:6px}.fancybox-navigation .fancybox-button--arrow_right{right:6px}.fancybox-close-small{background:transparent;border:0;border-radius:0;color:#555;cursor:pointer;height:44px;margin:0;padding:6px;position:absolute;right:0;top:0;width:44px;z-index:10}.fancybox-close-small svg{fill:transparent;opacity:.8;stroke:currentColor;stroke-width:1.5;transition:stroke .1s}.fancybox-close-small:focus{outline:none}.fancybox-close-small:hover svg{opacity:1}.fancybox-slide--iframe .fancybox-close-small,.fancybox-slide--image .fancybox-close-small,.fancybox-slide--video .fancybox-close-small{color:#ccc;padding:5px;right:-12px;top:-44px}.fancybox-slide--iframe .fancybox-close-small:hover svg,.fancybox-slide--image .fancybox-close-small:hover svg,.fancybox-slide--video .fancybox-close-small:hover svg{background:transparent;color:#fff}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small{display:none}.fancybox-caption{bottom:0;color:#fff;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:25px 44px;right:0}.fancybox-caption:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC);background-repeat:repeat-x;background-size:contain;bottom:0;content:"";display:block;left:0;pointer-events:none;position:absolute;right:0;top:-25px;z-index:-1}.fancybox-caption:after{border-bottom:1px solid hsla(0,0%,100%,.3);content:"";display:block;left:44px;position:absolute;right:44px;top:0}.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited{color:#ccc;text-decoration:none}.fancybox-caption a:hover{color:#fff;text-decoration:underline}.fancybox-loading{-webkit-animation:a .8s infinite linear;animation:a .8s infinite linear;background:transparent;border:6px solid hsla(0,0%,39%,.5);border-radius:100%;border-top-color:#fff;height:60px;left:50%;margin:-30px 0 0 -30px;opacity:.6;padding:0;position:absolute;top:50%;width:60px;z-index:99999}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.fancybox-fx-slide.fancybox-slide--next{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.fancybox-fx-slide.fancybox-slide--current{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{opacity:0;-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5)}.fancybox-fx-zoom-in-out.fancybox-slide--next{opacity:0;-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5)}.fancybox-fx-zoom-in-out.fancybox-slide--current{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.fancybox-fx-rotate.fancybox-slide--previous{opacity:0;-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}.fancybox-fx-rotate.fancybox-slide--next{opacity:0;-webkit-transform:rotate(1turn);transform:rotate(1turn)}.fancybox-fx-rotate.fancybox-slide--current{opacity:1;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.fancybox-fx-circular.fancybox-slide--previous{opacity:0;-webkit-transform:scale3d(0,0,0) translate3d(-100%,0,0);transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancybox-fx-circular.fancybox-slide--next{opacity:0;-webkit-transform:scale3d(0,0,0) translate3d(100%,0,0);transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancybox-fx-circular.fancybox-slide--current{opacity:1;-webkit-transform:scaleX(1) translateZ(0);transform:scaleX(1) translateZ(0)}.fancybox-fx-tube.fancybox-slide--previous{-webkit-transform:translate3d(-100%,0,0) scale(.1) skew(-10deg);transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{-webkit-transform:translate3d(100%,0,0) scale(.1) skew(10deg);transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}.fancybox-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancybox-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancybox-share p{margin:0;padding:0}.fancybox-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancybox-share__button:link,.fancybox-share__button:visited{color:#fff}.fancybox-share__button:hover{text-decoration:none}.fancybox-share__button--fb{background:#3b5998}.fancybox-share__button--fb:hover{background:#344e86}.fancybox-share__button--pt{background:#bd081d}.fancybox-share__button--pt:hover{background:#aa0719}.fancybox-share__button--tw{background:#1da1f2}.fancybox-share__button--tw:hover{background:#0d95e8}.fancybox-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancybox-share__button svg path{fill:#fff}.fancybox-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancybox-thumbs{background:#fff;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:transparent;top:0;width:212px;z-index:99995}.fancybox-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs>ul{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancybox-thumbs-x>ul{overflow:hidden}.fancybox-thumbs-y>ul::-webkit-scrollbar{width:7px}.fancybox-thumbs-y>ul::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y>ul::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs>ul>li{-webkit-backface-visibility:hidden;backface-visibility:hidden;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancybox-thumbs-loading{background:rgba(0,0,0,.1)}.fancybox-thumbs>ul>li{background-position:50%;background-repeat:no-repeat;background-size:cover}.fancybox-thumbs>ul>li:before{border:4px solid #4ea7f9;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancybox-thumbs .fancybox-thumbs-active:before{opacity:1}@media (max-width:800px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs>ul>li{max-width:calc(100% - 10px)}} /* latin */ @font-face { font-family: 'Caveat Brush'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Caveat-Brush.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Montserrat v23 sur Google Fonts est maintenant variable et non-compatible avec text-stroke Version locale provenant de : https://github.com/JulietaUla/Montserrat/tree/master/fonts/webfonts */ /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Montserrat-Medium.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Montserrat-Bold.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/Montserrat-ExtraBold.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/Montserrat-Black.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Modius'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/modius-bold-webfont.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Modius'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/modius-webfont.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } [x-cloak]{display: none !important;} /*********************************RESET******************************/ *{margin:0;padding:0;box-sizing:border-box;} .clear{ clear:both;} .cfix:after, .container:after, .row:after {clear: both;} .cfix:before, .cfix:after, .container:before, .container:after, .row:before, .row:after {content: "";display: table;} img a{ border:none; } img{ display:block; max-width:100%; } a, button{text-decoration:none;color:inherit;transition: all .25s ease-in-out;} a:hover,a:focus,a:active,button.btn:focus, button.btn:hover {outline:none;text-decoration:none;cursor:pointer;} input:focus, button:focus, textarea:focus, select:focus{outline:none;transition: all .25s ease-in-out;} h1,h2,h3,h4{font-weight:400} p{ line-height:1.6; } ul{ list-style:none;} li{ list-style:none; } strong{font-weight:700;} .mce-content-body{ padding: 1em; } /* fonts font-family: 'Caveat Brush', cursive; 400 font-family: 'Montserrat', sans-serif; 500-700-800-900 */ :root { --main:#70a333; --mainhvr:#77b224; --light:#f5f5f5; --dark:#222; --grey:#848484; } /*********************************BASE******************************/ body{ background:url(../images/pattern-dark.png) 0 0 repeat var(--dark); color:#fff; font-family: 'Montserrat', sans-serif; font-size:18px; font-weight:500; line-height:1; overflow-x:hidden; } body.blocked{ overflow:hidden; } /*form*/ input, textarea, select, .input { font-family: 'Montserrat', sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;color:var(--dark);transition: all .25s ease-in-out; } ::placeholder{ color:var(--dark); } .input{ border:3px solid #efefef; border-radius:0; padding:20px 40px; width:100%; } .input:focus{ border-color:#e0e0e0; } .select-outer{ position:relative; } .form-row+.form-row{ margin-top:15px; } .form-row.bottom{ margin-top:40px; } .form-row .text-danger{ margin-top:5px; font-weight:700; color:#d00; display:block; } .alert-success{ margin-bottom:30px; padding:30px; border-radius:10px; font-weight:700; color:#fff; background:var(--main); } .alert-danger{ margin-bottom:30px; padding:30px; border-radius:10px; font-weight:700; color:#fff; background: #d00; } .form-row.file{ position:relative; } .form-row.file [type=file]{position:absolute;opacity:0;width:100%;} .form-row.file [type=file] + label{background:url(../images/icn/file.png) right 40px center / 28px 26px no-repeat;cursor:pointer;position:relative;display:block;} .form-row.file [type=file] + label:hover{background-color:#efefef;} /*----*/ h1,h2,h3,h4,h5,.f-title{ font-weight:900; line-height:1; letter-spacing:1px; text-transform:uppercase; } .dot{ color:var(--main); } .t-br{ display:block; } .center{ text-align:center; } p{ font-family: 'Roboto', sans-serif; } p a{ text-decoration:underline; color: #8ec640; font-weight: 600;} p a:hover{ opacity:0.6; text-decoration:underline; } sup{ vertical-align: super; font-size: smaller; } .underline{ text-decoration:underline; } .hard{ white-space:nowrap; } a:hover{ } .container{ margin:0 auto; position:relative; max-width:1560px; width:100%; padding:0 30px; } .container:after{ clear: both; content: ""; display: block; height: 0; line-height: 0; visibility: hidden; } b, strong, .strong{ font-weight:700; } button, .btn{ border:0; font-family: 'Montserrat', sans-serif; font-weight:700; background:none; } /*magnetic btn*/ .outer-mag-btn{display:flex;margin:-10px} .outer-mag-btn .btn>span{ margin:10px; } /*------------*/ .btn{position:relative;display:inline-block;text-align:center;cursor:pointer;} .btn>span{position:relative;color:#FFF;display:flex;align-items:center;justify-content:center;background:var(--main);font-family:'Roboto', sans-serif;font-size:16px;font-weight:800; letter-spacing: .05em; min-width:240px;padding:22px 40px;transition: all .25s ease-in-out;overflow:hidden; text-transform: uppercase; text-align: left; } .btn:hover>span, .btn.plus:hover>span{color:var(--dark); } .btn.plus:hover svg path { fill: var(--dark); } /*propriete outline utilisee pour avoir le outline-offset - bug safari ne suit pas le border-radius*/ .btn>span:before{content:"";border-radius:200px;position:absolute;top:50%;left:50%;padding:50% 0;width:100%;min-height:100%;background:#fff;transform:scale(0) translate(-50%,-50%);transform-origin:center bottom;transition:transform .4s linear} .btn:hover>span:before{transform:scale(1) translate(-50%,-50%)} .btn>span>span{position:relative} .btn>span svg{position:relative;width:22px;flex-shrink:0;margin:0 5px 0 20px;color:#fff;transition:color .4s linear, margin .25s ease-in-out} .btn:hover>span svg{margin:0 0 0 25px;} .btn>span svg polygon { fill: #fff; } .btn:hover>span svg polygon { fill: var(--dark); } .btn.light>span{background:var(--light);color:#1c1c1c;} .btn.light:hover>span{color:var(--dark); } .btn.light>span:before{background:var(--main);} .btn.light>span svg polygon { fill: var(--dark); } .btn.light:hover>span svg{color:var(--light)} .btn.dark>span{background:var(--dark);color:#fff;} .btn.dark:hover>span{color:var(--dark); } .btn.dark>span:before{background:#fff;} .btn.dark>span svg{color:var(--main);} .btn.dark:hover>span svg{color:var(--dark)} .btn.plus>span{outline:3px solid var(--main);outline-offset:-3px;color:#fff;min-width:160px;padding:18px 30px; } .btn.plus>span svg{width:18px;margin:0 15px 0 0;} .btn.plus>span svg.minus{ display:none; } .open .btn.plus>span svg.minus{ display:block; } .open .btn.plus>span svg.plus{ display:none; } .btn.plus>span svg.minus path, .btn.plus>span svg.plus path { fill: var(--dark); } .btn.plus:hover>span svg{margin:0 15px 0 0;color:#fff;} @media (max-width: 1679px) { } @media (max-width: 1359px) { } @media (max-width: 1279px) { } @media (max-width: 1019px) { } @media (max-width: 819px) { } @media (max-width: 619px) { body{ font-size:16px; } input, textarea, select, .input{ font-size:16px; } .input{ padding:15px 20px; } .form-row.file [type=file] + label{background:url(../images/icn/file.png) right 20px center / 22px 20px no-repeat;} h1,h2,h3,h4,.f-title{ letter-spacing:normal; } .btn>span{ font-size:14px; padding:20px 30px; } } /*LAYOUT*/ .wrap{ display:flex; flex-flow:row wrap; } .wrap-alt, .wrap-alt-2{ display:flex; flex-flow:row wrap; flex-direction:row-reverse; } .wrap-center{ display:flex; flex-flow: row wrap; justify-content: center;} @media (max-width: 1279px) { .wrap-alt-2{ flex-direction:row; } } @media (max-width: 1019px) { .wrap-alt{ flex-direction:row; } } /*PAGE LOADING*/ #page-loading{ display:flex; justify-content:center; align-items:center; position:fixed; top:0; right:0; bottom:0; left:0; background:url(../images/pattern-dark.png) 0 0 repeat var(--dark); z-index:999; transition: all 0.5s ease-in-out; } #page-loading img{ width:85px; animation:circle 2s ease-in-out infinite; } #loading-question { height: 350px; } @media (max-width: 500px) { #page-loading lottie-player { width: 200px !important; height: 200px !important; } } /* LOGO */ .logo svg .st0 { fill:#FFF } .logo.dark svg .st0 { fill:#222 } /*HEADER*/ body.open{ width:100%; overflow-y:hidden; } .main-header{ position: absolute; width:100%; top:0; left:0; z-index:52; transition: all 0.5s ease-in-out; } .main-header.scroll{ top:-140px; } body.open .main-header{ height:100%; } .main-header .outer{ position:relative; } body.open .main-header .outer{ height:100%; overflow-y:hidden; } body.open .main-header .outer>div{ height:100%; overflow-y:auto; } .main-header .menu-bar{ padding: 20px; position:relative; z-index:53; } .main-header .menu-bar>.wrap{ justify-content:space-between; align-items:center; } /*.main-header .menu-bar .logo{ transition: all .25s ease-in-out; } .main-header.scroll .menu-bar .logo{ opacity:0; visibility:hidden; }*/ body.open .main-header .menu-bar .logo{ opacity:1; visibility:visible; } body.open .main-header .menu-bar .logo svg .st0{ fill:#FFF; } .main-header .menu-bar .logo svg.desktop-version{ width: 360px; display:block; } .main-header .menu-bar .logo svg.mobile-version { display: none; height: 80px; } .main-header .content{ display:flex; flex-direction:column; justify-content:center; align-items:flex-end; width:calc(100% - 360px); } .main-header .content .inner{ display:flex; justify-content:center; align-items:center; height:100%; } .main-header .content .inner nav{ opacity:0; color:#fff; transition: all .25s ease-in-out; } .main-header .content .inner nav.open{ opacity:1; } /*.main-header.scroll .content .inner nav{ opacity:0; visibility:hidden; }*/ .main-header .content .inner nav ul{ display:flex; align-items:center; } .main-header .content .inner nav li{ margin-right:40px; } .main-header .content .inner nav a{ font-size:15px; font-weight:800; text-transform:uppercase; display:block; padding:5px 0; } .main-header .content .inner nav a:hover{ color:var(--main); padding:0 0 10px; } .main-header .content .inner nav .active a{ color:var(--main); } .main-header .content .menu-btn{ position:relative; margin-top: -3px;} .main-header .content .menu-btn a{ display:flex; flex-direction:column; justify-content:center; align-items:center; height:80px; width:80px; transition: transform 0.15s linear; position:relative; overflow:hidden; background: #fff; } .main-header .content .menu-btn a:hover:before{transform:scale(1) translate(-50%,-50%)} .main-header .content .menu-btn .menu-btn-icn{width:44px;height:34px;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer} .main-header .content .menu-btn .menu-btn-icn span{display:block;position:absolute;height:4px;width:100%;background:#222;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out} .main-header .content .menu-btn .menu-btn-icn span:nth-child(1){top:3px;width:60%;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center} .main-header .content .menu-btn a:hover .menu-btn-icn span:nth-child(1){width:100%} .main-header .content .menu-btn .menu-btn-icn span:nth-child(2){top:15px;width:90%;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center} .main-header .content .menu-btn a:hover .menu-btn-icn span:nth-child(2){width:100%} .main-header .content .menu-btn .menu-btn-icn span:nth-child(3){top:28px;width:30%;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center} .main-header .content .menu-btn a:hover .menu-btn-icn span:nth-child(3){width:100%} .main-header .content .menu-btn a .menu-btn-icn.open span:nth-child(1){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:0px;left:8px;width:100%} .main-header .content .menu-btn a .menu-btn-icn.open span:nth-child(2){width:0;opacity:0} .main-header .content .menu-btn a .menu-btn-icn.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:31px;left:7px;width:100%;} @media (max-width: 1679px) { /* .main-header .menu-bar{ padding:30px; } */ } @media (max-width: 1279px) { .main-header .menu-bar .logo img{ height:60px; } .main-header .content .inner nav{ display:none; } } @media (max-width: 900px) { .main-header .content { width: calc(100% - 530px); } .main-header .menu-bar .logo svg .st0 { fill: #fff; } /* .main-header .content .menu-btn a { width: 84px; height: 84px; } */ } @media (max-width: 619px) { .main-header .menu-bar .logo img{ height:50px; } .main-header .menu-bar .logo svg.desktop-version { display: none; } .main-header .menu-bar .logo svg.mobile-version { display: block; } } @media (max-width: 400px) { .main-header .menu-bar { padding: 10px; } .main-header .content .menu-btn { position: absolute; margin-top: 0; top: 10px; right: 10px; } } .menu-panel{ position:absolute; top:0; width:100%; transition: all .5s ease-in-out; z-index:52; transform: translateX(-102vw); margin-top: -120px; } .menu-panel.open{ position:static; transform:translateX(0); color:#fff; overflow-y:auto; background: #222; } .menu-panel .content{ display:flex; flex-direction:column; justify-content:center; align-items:center; width:calc(100% - 750px); padding:100px; height:calc(100vh + 3px); /*+3 pour laisser la scrollbar au open*/ min-height:700px; position:relative; z-index:2; } .menu-panel .content>div{ width:100%; max-width:1000px; } .menu-panel .content nav li{ transform:translateX(-10px); opacity:0; transition: all .5s ease-in-out; } .menu-panel .content nav.open li{ transform:translateX(0); opacity:1; margin-bottom: 12px; } .menu-panel .content nav li:nth-child(1){ transition-delay:100ms; } .menu-panel .content nav li:nth-child(2){ transition-delay:300ms; } .menu-panel .content nav li:nth-child(3){ transition-delay:500ms; } .menu-panel .content nav li:nth-child(4){ transition-delay:700ms; } .menu-panel .content nav li:nth-child(5){ transition-delay:900ms; } .menu-panel .content nav.closing li{ transition-delay:0ms; } /*.menu-panel .content nav li+li{ margin-top:40px; }*/ .menu-panel .content nav li a{ font-size:39px; padding:15px 0; font-weight:800; letter-spacing:4px; color:#fff; display:inline-block; transform:translateX(-102vw); position:relative; font-family: 'Modius', sans-serif; } .menu-panel .content nav li a .num{ position:absolute; font-weight: 500; top:10px; left:0; font-size:17px; letter-spacing:0; color:#fff; -webkit-text-stroke:0; opacity:0; transition: all .25s ease-in-out; } .menu-panel.open .content nav li a{ transform:translateX(0); } .menu-panel .content nav li a:hover{ color:#fff; opacity:1; -webkit-text-stroke-color:transparent; padding-left:40px; } .menu-panel .content nav li a:hover .num{ opacity:1; top:0; } .menu-panel .content .bottom{ padding-top:50px; margin-top:50px; border-top:2px solid var(--main); color:#fff; display:flex; justify-content:space-between; width:100%; opacity:0; transition: all .5s ease-in-out; transition-delay:1300ms; } .menu-panel .content .bottom.open{ opacity:1; } .menu-panel .content .bottom.closing{ transition-delay:0ms; } .menu-panel .content .bottom a{ font-size:22px; font-weight:700; padding:5px 0; display:block; } .menu-panel .content .bottom a:hover{ color:var(--main); padding:0 0 10px; } .menu-panel .img{ width:750px; transform:translateX(-460px); opacity:0; background:url(../images/img-menu-panel-illust-inactive.jpg) center center / cover no-repeat #ffffff10; position:relative; transition: all .5s ease-in-out; } .menu-panel .img.open{ transform:translateX(0); opacity:1; } /* .menu-panel .img.open.hover {background-image:none; } */ /* .menu-panel .img>.menu-img{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/img-menu-panel-illust-inactive.jpg) center center / cover no-repeat ; opacity:0; transition: all .25s ease-in-out; } */ /* .menu-panel .img>.menu-img.open{ opacity:1; } */ /* .menu-panel .img .img-1{ background-image:url(../images/img-menu-panel-illust-siteweb.png); } .menu-panel .img .img-2{ background-image:url(../images/img-menu-panel-illust-boutique.png); } .menu-panel .img .img-3{ background-image:url(../images/img-menu-panel-illust-referencement.png); } .menu-panel .img .img-4{ background-image:url(../images/img-menu-panel-illust-googleads.png); } .menu-panel .img .img-5{ background-image:url(../images/img-menu-panel-illust-seo.png); } */ /* .menu-panel .img:after{ content:""; display:block; height:100%; width:100%; position:absolute; top:0; left:0; background:url(../images/pattern-dark.png) 0 0 repeat; opacity:0.8; } */ .menu-panel .img .cta{ position:absolute; bottom:0; left:0; width:100%; z-index:60; } .menu-panel .img .cta a{ position:relative; display:flex; justify-content:space-between; align-items:center; width:100%; padding:60px; font-size:24px; font-weight:800; text-transform:uppercase; background:var(--main); overflow:hidden; letter-spacing: 0.6em; line-height: 1.1; } .menu-panel .img .cta a:before{content:"";border-radius:50%;position:absolute;top:50%;margin-top:-30px;right:70px;width:60px;height:60px;background:#fff;transform-origin:center center;transition:transform .4s linear} .menu-panel .img .cta a:hover:before{transform:scale(50);} .menu-panel .img .cta a:hover{ color:var(--dark); /*background:#fff;*/ } .menu-panel .img .cta .txt{ max-width:500px; padding-right:30px; position:relative; font-family: 'Modius', sans-serif; letter-spacing: .08em; } .menu-panel .img .cta .icn{ display:flex; flex-shrink:0; justify-content:center; align-items:center; height:70px; width:70px; background:#fff; color:var(--dark); transition: all .25s ease-in-out; } .menu-panel .img .cta .icn svg { transform:rotate(45deg); width: 25px;} .menu-panel .img .cta a:hover .icn{ transform:rotate(0); } @media (max-width: 1679px) { .menu-panel .content{ width:calc(100% - 450px); } .menu-panel .img{ width:450px; transform:translateX(-460px); } .menu-panel .img .cta a{ font-size:25px; padding:60px 40px; } .menu-panel .img .cta a:before{ right:50px; } } @media (max-height: 800px) { .menu-panel .content{ padding:60px; } /*.menu-panel .content nav li+li{ margin-top:20px; }*/ } @media (max-width: 1279px) { .menu-panel{ margin-top:-130px; } .menu-panel .content{ width:100%; padding:100px; } .menu-panel .img{ display:none; } } @media (max-width: 1019px) { .menu-panel .content{ padding:100px 60px; } .menu-panel .content nav li a{ font-size:40px; letter-spacing:3px; color:#fff; -webkit-text-stroke:0; opacity:1; } } @media (max-width: 800px) { .menu-panel .content nav li a { font-size: 29px; } } @media (max-width: 619px) { .menu-panel{ margin-top:-110px; } .menu-panel .content{ padding:120px 30px 60px; } .menu-panel .content nav li+li{ margin-top:20px; } .menu-panel .content nav li a{ font-size:25px; padding:5px 0; letter-spacing:1px; } .menu-panel .content .bottom{ display:block; padding-top:30px; margin-top:30px; } .menu-panel .content .bottom a{ font-size:18px; } .menu-panel .content .bottom a+a{ margin-top:10px; } } @media (max-width: 400px) { .menu-panel .content nav li a { font-size: 19px; } } /*FOOTER*/ .main-footer{ padding:100px 0; } .main-footer .container{ max-width:1300px; } .main-footer .top .wrap{ justify-content:space-between; } .main-footer .contact{ display:flex; flex-direction:column; align-items:center; width:230px; padding:20px 0 60px; text-align:center; } .main-footer .contact .logo{ margin-bottom:30px; } .main-footer .contact .logo a:hover{ opacity:0.6; } .main-footer .contact .logo svg{ width:160px; } .main-footer .contact .cta{ font-size:25px; font-weight:800; margin:10px 0; display:block; } .main-footer .contact .cta:hover{ color:var(--main); } .main-footer .contact .address{ font-size:13px; line-height:1.3; margin:20px 0; opacity:0.3; } .main-footer .contact .social{ display:flex; } .main-footer .contact .social a:hover{ opacity:0.6; } .main-footer .contact .social a+a{ margin-left:10px; } .main-footer .contact .social img{ width:30px; } .main-footer .site{ display:flex; flex-direction:column; width:calc(100% - 260px); max-width:750px; } .main-footer .site .career{ border-bottom:3px solid #ffffff10; margin-bottom:30px; } .main-footer .site .career a{ font-size:30px; font-weight:900; text-transform:uppercase; padding:30px 0; display:flex; justify-content:space-between; } .main-footer .site .career a:hover{ color:var(--main); } .main-footer .site .career a svg{ width:28px; height:30px; margin:0 5px 0 35px; color:var(--main); transition:all .25s ease-in-out} .main-footer .site .career a svg polygon { fill: #fff; } .main-footer .site .career a:hover svg{margin:0 0 0 40px; color:#fff;} .main-footer .site .col{ display:flex; flex-direction:column; width:50%; } .main-footer .site .menu li{ margin-bottom:10px; } .main-footer .site .menu .lg{ margin-bottom:20px; } .main-footer .site .menu a{ font-size:16px; color:#ffffff30; } .main-footer .site .menu .lg a{ font-weight:800; text-transform:uppercase; color:#fff; } .main-footer .site .menu a:hover{ color:var(--main); } .main-footer .bottom{ padding-top:15px; border-top:3px solid #ffffff10; } .main-footer .bottom .wrap{ justify-content:space-between; align-items:center; } .main-footer .bottom .copy{ font-size:12px; font-weight:800; text-transform:uppercase; opacity:0.3; } .main-footer .bottom .partners>div{ display:flex; } .main-footer .bottom .partners .logo{ margin-left:30px; opacity:0.3; } .main-footer .bottom .partners a:hover{ opacity:0.6; } .main-footer .bottom .partners img{ height:60px; } @media (max-width: 1019px) { .main-footer .contact{ width:100%; } .main-footer .site{ width:100%; max-width:750px; } .main-footer .site .career{ border-top:3px solid #ffffff10; margin:0; } .main-footer .site .career a{ font-size:25px; line-height:1.3; display:block; padding:60px 0 50px; text-align:center; } .main-footer .site .career a span{ display:block; } .main-footer .site .career a svg{ width:36px; height:28px; margin:10px 0 0;} .main-footer .site .career a:hover svg{margin:0; } .main-footer .site .menu{ padding:60px 0; } .main-footer .bottom .wrap{ display:block; } .main-footer .bottom .partners>div{ justify-content:center; padding:15px 0 60px; } .main-footer .bottom .partners .logo{ margin:0 15px; } .main-footer .bottom .copy{ text-align:center; } } @media (max-width: 619px) { .main-footer .site .menu{ text-align:center; } .main-footer .site .col{ width:100%; } .main-footer .site .col+.col{ margin-top:30px; } .main-footer .bottom .partners img{ height:40px; } .main-footer .bottom .copy{ font-size:10px; } } /*SCROLLUP*/ .scrollup{ display:flex; justify-content:center; align-items:center; height:60px; width:60px; background:var(--main); border-radius:50%; position:fixed; right:30px; bottom:30px; transform:rotate(180deg); z-index:99; opacity:0; } .scrollup.active{ opacity:1; } .scrollup:hover{ background:#fff; color:var(--main); } .scrollup svg{ width:18px; } @media (max-width: 619px) { .scrollup{ height:50px; width:50px; right:50%; margin-right:-25px; bottom:20px; } .scrollup svg{ width:16px; } } /*Webinaires*/ .webinarpill{ display:flex; justify-content:center; align-items:center; height:60px; width:60px; background:var(--main); position:fixed; right:30px; bottom:30px; z-index:99; opacity:1; } .webinarpill svg{ width:10px; } .webinarpill svg path{ fill: #fff; transition: fill 0.2s ease-in; } .webinarpill:hover{ background:#fff; color:var(--main); } .webinarpill:hover svg path{ fill:var(--main); } @media (max-width: 619px) { .webinarpill{ height:50px; width:50px; right:50%; margin-right:-25px; bottom:20px; } } .webinarwindow{ text-align: left; background-color: #fff; position: fixed; bottom: 105px; right: 30px; border-radius: 5px; color: var(--dark); padding: .75em 1em; z-index: 8000 } .webinarwindow:after{ content: ''; position: absolute; bottom: -10px; right: 20px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; } .webinarwindow .webinarwindow-title{ font-size: 24px; font-weight: 900; text-transform: uppercase; margin-bottom: 0.5em; } .webinarwindow > a{ display:flex; align-items: center; justify-content: flex-start; gap: 5px; font-size: 18px; font-weight: 600; } .webinarwindow > a > svg{ width: 20px; height: 20px; } .webinarwindow .webinarwindow-close{ cursor:pointer; position: absolute; top: -15px; right: -15px; background: #8cc43f; border-radius: 100%; height: 30px; width: 30px;} .webinarwindow .webinarwindow-close > svg{ height: 20px; width: 20px; margin-top: 2px;} .webinarwindow .webinarwindow-close > svg path{ fill: var(--dark); } @media (max-width: 619px) { .webinarwindow > a{ justify-content: center; } .webinarwindow{ text-align:center; bottom: 95px; right: 0;left: 0;margin: 0 20px; } .webinarwindow .webinarwindow-title{ font-size: 20px; } .webinarwindow:after{ display:none; } } /*HOME*/ .home-hero { padding: 170px 30px 80px 10%; overflow: hidden; background: #fff; position: relative; min-height: 90vh; display: flex; align-items: center; } .home-hero:after { content:''; background: url(../images/pattern-dark.png) 0 0 repeat var(--dark); width: 27%; height: 100%; position: absolute; right: -9%; top: 0; } /* .home-hero .content{ max-width:1480px; margin:0 auto; position:relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } */ .home-hero .title{ position:relative; z-index:2; width: calc(100% - 700px); } .home-hero .title-1{ font-size:65px; color:#222; line-height: 1.1; font-family:'Modius', sans-serif; } .home-hero .title-1:after { content: ''; background-image: url(../images/homebanner-shape.svg); background-size: contain; background-repeat: no-repeat; width: 460px; height: 32px; position: absolute; left: -30px; bottom: -50px;} .home-hero .img{ width: auto; z-index:1; position: absolute; right: 8%; bottom: 0; height: 100%; } .home-hero .img img { max-width: 101%; height: 100%; } @media (max-width: 1600px) { .home-hero { padding: 170px 30px 80px 50px; } .home-hero:after { width: 28%;} .home-hero .img { right: 2%; } } @media (max-width: 1400px) { .home-hero .title-1 { font-size: 58px; } } @media (max-width: 1300px) { .home-hero .img { right: -10%; } .home-hero:after { width: 15%; } } @media (max-width: 1100px) { .home-hero { min-height: 600px; } .home-hero .img { width: 550px; } .home-hero .title-1 { font-size: 46px; } } @media (max-height: 800px) { .home-hero{ padding:200px 30px; } } @media (max-width: 900px) { .home-hero { padding-bottom: 70px; padding-top: 280px; } .home-hero:after { width: 100%; left: 0; right: auto; } .home-hero .title { padding-left: 0; width: 100%; } .home-hero .title-1 { color: #fff; } .home-hero .img { position: absolute; right: -130px; bottom: -70px; opacity: .3; max-width: 800px; width: 500px; height: auto; } } @media (max-width: 619px) { .home-hero { padding-top: 380px; padding-left: 40px; } .home-hero .title-1:after { width: 300px; } .home-hero .title-1 { font-size: 40px; } } @media (max-width: 450px) { .home-hero { padding-left: 10px; padding-right: 10px; } .home-hero .title-1 { font-size: 30px; } .home-hero .img { width: 480px; height: auto; right: -190px; } } @media (max-width: 350px) { .home-hero .title-1 { font-size: 28px; } } .cs-1 { padding-top: 180px; } .cs-1 .content{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; } .cs-1 .content div { display: flex; align-items: center; flex-wrap: wrap; } .cs-1 .sentence .wrap { display: flex; justify-content: center; } .cs-1 .sentence .content { width: 100%; max-width: 960px; } .cs-1 .sentence h1 { font-size: 28px; font-weight: 500; font-family: 'Modius', sans-serif; text-align: center; line-height: 1.3; margin-bottom: 120px; } .cs-1 .sentence h1 span { font-size: 42px; font-weight: 800; } .cs-1 h2{ font-size:40px; padding-left: 25px; width: calc(100% - 105px); } .cs-1 .sm { font-weight: 500; font-size: 20px; display: block; margin-bottom: 5px; } .cs-1 .outer-mag{ width:max-content; margin:-10px; } .cs-1 .mag>span{ display:flex; justify-content:center; align-items:center; height:105px; width:105px; outline:3px solid #ffffff10; outline-offset:-3px; margin:10px; color:#fff;transition:transform .15s linear;overflow:hidden;position:relative; } .cs-1 .mag>span:before{content:"";position:absolute;top:100%;left:0;width:150%;height:150%;background:var(--main);transition: .4s linear;} .cs-1 .mag:hover>span:before{ top: 0; } .cs-1 .mag svg{ height:36px; } .cs-1 .mag svg polygon { fill: #70a333; } .cs-1 .mag:hover svg{ animation:down 1s ease-in-out forwards; } .cs-1 .mag:hover svg polygon { fill: #fff; } @media (max-width: 1679px) { .cs-1 .img{ padding-right:30px; width: 50%; } } @media (max-width: 1200px) { .cs-1 .sm { font-size: 15px; } } @media (max-width: 1019px) { .cs-1 .sentence h1 { font-size: 20px; } .cs-1 .sentence h1 span { font-size: 32px; } } @media (max-width: 850px) { .cs-1 { padding-top: 140px; background: var(--light); color: var(--dark); } .cs-1 .mag>span { border: 3px solid #d9d9d9; } } @media (max-width: 800px) { .cs-1 .content { width: 100%; padding-bottom: 40px; } .cs-1 .content div { justify-content: center; } .cs-1 .img { display: none; } .cs-1 h2 { text-align: center; width: 100%; padding-left: 0; font-size: 22px; margin-bottom: 30px; } .cs-1 h2 .sm { font-size: 14px; margin-bottom: 6px; } .cs-1 .content .cta { order: 2; } .cs-1 .mag>span { width: 70px; height: 70px; } .cs-1 .mag svg { height: 24px; } } @media (max-width: 619px) { .cs-1{ padding-bottom:30px; } .cs-1 .content{ width:100%; text-align:center; } .cs-1 h2 .outline{ font-size:40px; } .cs-1 .outer-mag{ margin:-10px auto; } .cs-1 .img{ align-items:center; width:100%; padding:0 0 30px 0; } .cs-1 .img img{ max-width:80%; transform:none; } } @media (max-width: 500px) { .cs-1 .sentence h1 { font-size: 16px; } .cs-1 .sentence h1 span { font-size: 25px; } } .cs-2{ color:var(--dark); } .cs-2 h2{ font-size:40px; margin-bottom:30px; } .cs-2 h2.lg{ font-size:60px; text-align:center; max-width:580px; margin:0 auto 30px; } .cs-2 h2.lg .sm{ font-size:20px; font-weight:700px; display:block; margin-bottom:10px; } .cs-2 .note{ display:flex; margin-top:24px; align-items: center; flex-wrap: wrap; } .cs-2 .note .left { font-size: 16px; font-family:'Montserrat', sans-serif; font-weight: 800; line-height: 1.1; text-transform: uppercase; width:132px; border-right:3px solid #FFF; letter-spacing:0.06em;} .cs-2 .note .right { width:265px; margin-left: 16px; font-size: 16px; line-height: 1.2; } .cs-2 .cta{ margin-top:30px; } .cs-2 .content-1{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; padding:150px 100px; background:var(--main); } .cs-2 .content-1>div{ max-width:580px; } .cs-2 .content-2{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; padding:150px 100px; background:#ffffff10; color: #fff; position:relative; } .cs-2 .content-2.light{ background:var(--light); color: var(--dark); } .cs-2 .content-2 .sep{ position:absolute; left:0; top:0; height:100%; width:40px; } .cs-2 .content-2>div{ max-width:680px; } .cs-2.alt .content-1{ padding:200px 60px; } .cs-2.alt .content-2{ padding:200px 60px; } @media (max-width: 1679px) { .cs-2 h2.lg{ font-size:50px; } } @media (max-width: 1359px) { .cs-2 .content-1{ padding:150px 60px; } .cs-2 .content-2{ padding:150px 60px 150px 100px; } } @media (max-width: 1019px) { .cs-2 .content-1{ width:100%; padding:150px 60px; } .cs-2 .content-1>div{ max-width:650px; } .cs-2 .content-2{ width:100%; padding:150px 60px; } .cs-2 .content-2:before{ height:40px; width:100%; background-image:url(../images/sep-1-alt.png); } .cs-2 .content-2>div{ max-width:650px; } } @media (max-width: 619px) { .cs-2 h2{ font-size:30px; } .cs-2 h2.lg{ font-size:30px; } .cs-2 .content-1{ padding:100px 30px; } .cs-2 .content-2{ padding:140px 30px 100px; } .cs-2.alt .content-1{ padding:150px 30px; } .cs-2.alt .content-2{ padding:150px 30px; } .cs-2 .note { display: block; } .cs-2 .note .left { width: 100%; border-bottom: 2px solid #FFF; border-right: none; padding-bottom: 8px; margin-bottom: 8px; } .cs-2 .note .right { width: 100%; margin-left: 0; } } .cs-3{ background:#fff; color:var(--dark); } .cs-3 .container{ max-width:1400px; } .cs-3 .content{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:flex-start; padding:200px 0 150px; } .cs-3 h2{ font-size:40px; margin-bottom:30px; } .cs-3 .cta{ margin-top:30px; } .cs-3 .img{ display:flex; flex-direction:column; width:50%; justify-content:flex-end; align-items:center; padding:60px 0 0; } @media (max-width: 1019px) { .cs-3 .content{ width:100%; align-items:center; padding:150px 0 60px; } .cs-3 .content>div{ max-width:650px; } .cs-3 .img{ width:100%; padding:0; } } @media (max-width: 619px) { .cs-3 .content{ padding:100px 0 60px; } .cs-3 h2{ font-size:30px; } } .cs-4{ overflow-x:hidden; } .cs-4 .top{ padding:350px 30px 300px; background:url(../images/bg-home-humains.jpg) center center no-repeat; display: flex; justify-content: center; } .cs-4 h2{ font-size:100px; max-width:1200px; margin:0 auto; position:relative; z-index:2; font-family: 'Modius', sans-serif; } .cs-4 h2 .sm{ font-size:26px; margin-bottom:10px; font-weight: 500; } .cs-4 h2 .sr-right{ margin-left:300px; margin-top:10px; text-align: right;} .cs-4 h2 .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; } .cs-4 .bottom{ padding-bottom:150px; padding-top: 150px; text-align:center; position:relative; } .cs-4 .bottom .dots{ width:420px; position:absolute; top:-400px; left:0; z-index:1; animation:float 5s ease-in-out infinite; } .cs-4 .bottom .container{ max-width:1400px; z-index:2; } .cs-4 .bottom .content{ max-width:950px; margin:0 auto 60px; } .cs-4 .bottom h3{ font-size:35px; line-height:1.3; margin-bottom:30px; } .cs-4 .bottom .items .wrap{ margin:0 -30px; } .cs-4 .bottom .item{ display:flex; flex-direction:column; width:25%; align-items:center; padding:30px; } .cs-4 .bottom .item img{ width:80px; margin:0 auto 30px; } .cs-4 .bottom .item h4{ font-size:20px; font-weight:700; line-height:1.3; text-transform:none; } @media (max-width: 1279px) { .cs-4 h2{ font-size:70px; } .cs-4 h2 .sr-right{ margin-left:300px; } } @media (max-width: 1019px) { .cs-4 h2 .sm{ font-size:30px; } .cs-4 h2 .sr-right{ margin-left:20vw; } .cs-4 .bottom .container{ max-width:700px; } .cs-4 .bottom .dots{ width:300px; top:-400px; left:0; } .cs-4 .bottom .item{ width:50%; } } @media (max-width: 900px) { .cs-4 h2 { font-size: 62px; } .cs-4 h2 .sm { font-size: 20px; } .cs-4 h2 .sr-right { text-align: left; margin-left: 0; } } @media (max-width: 700px) { .cs-4 h2 { font-size: 38px; } .cs-4 h2 .sm { font-size: 18px; } } @media (max-width: 619px) { .cs-4 .top{ padding:150px 30px 150px;} .cs-4 .bottom .dots{ width:180px; top:-250px; left:-30px; } .cs-4 .bottom h3{ font-size:25px; } .cs-4 .bottom .item{ width:100%; padding:30px 50px; } } @media (max-width: 420px) { .cs-4 h2 { font-size: 32px; } .cs-4 h2 .sr-right { margin-left: 0; margin-top: 3px; } } .cs-5{ padding:200px 0; background:#fff; color:var(--dark); position:relative; } .cs-5 .shape-1{ width:200px; position:absolute; top:-200px; right:0; z-index:1; animation:float 4s ease-in-out infinite; } .cs-5 .shape-2{ width:570px; position:absolute; bottom:-80px; left:0; z-index:1; animation:float 5s ease-in-out infinite; } .cs-5 .container{ z-index:2; } .cs-5 .content{ max-width:800px; } .cs-5.no-slider .content{ margin:0 auto; text-align:center; } .cs-5 h2{ font-size:60px; margin-bottom:30px; } .cs-5 h2 .sm{ font-size:40px; display:block; } .cs-5 .content .cta{ margin-top:30px; } .cs-5 .outer-slider{ position:relative; margin-top:60px; } .cs-5 .bx-viewport{ overflow:visible !important; } .cs-5 .slider [aria-hidden="true"] .inner{ opacity:0.7; } .cs-5 .slider [aria-hidden="true"] .inner .desc{ opacity:0; } .cs-5 .bx-controls a{ display:flex; justify-content:center; align-items:center; height:100px; width:100px; border:3px solid #97979760; position:absolute; top:50%; margin-top:-50px; } .cs-5 .bx-controls a svg{ width:28px; } .cs-5 .bx-controls a:hover svg polygon { fill: #fff; } .cs-5 .bx-controls a.bx-prev{ transform:rotate(-180deg); left:-50px; } .cs-5 .bx-controls a.bx-next{ right:-20px; } .cs-5 .bx-controls a.disabled{ opacity:0; } .cs-5 .bx-controls a:hover{ border-color:var(--dark); background:var(--dark); color:#fff; } .cs-5 .outer-slider .inner{ transition: all .25s ease-in-out; } .cs-5 .outer-slider .inner .img{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:flex-start; } .cs-5 .outer-slider .inner .desc{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:flex-start; padding:60px 100px 60px 80px; transition: all .25s ease-in-out; } .cs-5 .outer-slider .inner .note{ font-size: 16px; font-family: 'Montserrat', sans-serif; color: #70a333; text-transform: uppercase; font-weight: 700; padding: 0; margin-bottom: 20px; } .cs-5 .outer-slider .inner .note .year{ font-size:30px; margin-left:20px; display:block; } .cs-5 .outer-slider .inner h3{ font-size:40px; margin-bottom:30px; } .cs-5 .outer-slider .inner .cta{ margin-top:30px; } @media (max-width: 1679px) { .cs-5 .bx-controls a.bx-prev{ left:-20px; } } @media (max-width: 1019px) { .cs-5 .shape-1{ width:150px; top:-100px; } .cs-5 .shape-2{ width:400px; bottom:35%; left:0; } .cs-5.no-slider .shape-2{ bottom:-80px; } .cs-5 h2{ font-size:40px; } .cs-5 h2 .sm{ font-size:30px;} .cs-5 .bx-viewport{ overflow:hidden !important; } .cs-5 .bx-controls a{ top:100%; margin-top:0; background:var(--main); } .cs-5 .bx-controls a.bx-prev{ left:80px; } .cs-5 .bx-controls a.bx-next{ right:80px; } .cs-5 .outer-slider .inner .img{ width:100%; } .cs-5 .outer-slider .inner .desc{ width:100%; padding:60px 100px; } } @media (max-width: 619px) { .cs-5{ padding:100px 0 200px; } .cs-5 .shape-1{ display:none; } .cs-5 .shape-2{ width:200px; bottom:auto; top:50%; left:-50px; } .cs-5.no-slider .shape-2{ width:250px; bottom:-50px; top:auto; left:0; } .cs-5 .content .btn>span{ font-size:20px; } .cs-5 .content .btn>span svg{ width:22px; } .cs-5 .bx-controls a{ height:60px; width:60px; } .cs-5 .bx-controls a svg{ width:22px; } .cs-5 .bx-controls a.disabled{ opacity:1; } .cs-5 .outer-slider .inner .desc{ padding:60px 0; } .cs-5 .outer-slider .inner h3{ font-size:30px; } } .cs-6{ padding:150px 0 50px;} .cs-6 .content{ max-width:900px; margin:0 auto; text-align:center; position:relative;} .cs-6 .content p.small-text{ font-size:14px; position: absolute; top: 100px; right:30px; width:385px; text-align:left; color:#bebebe} .cs-6 .content p.big-text { font-family:'Modius', sans-serif; font-size: 90px; font-weight: 800; line-height:86px; background: url('/images/souris.png') no-repeat left bottom; padding-bottom:65px;} .cs-6 .content p.big-text span { display: block; text-align:left;} .cs-6 .content p.big-text span:last-child { margin-left:310px;} .cs-6 .content p.support-text { font-family: 'Montserrat', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: .02em; max-width: 410px; text-transform: uppercase; margin: 24px auto; line-height: 1.2;} .cs-6 .content .cta{ } .cs-6 .content .btn>span{ padding:22px 60px; text-transform:none; font-size:24px; text-align:left; color:#fff; background:transparent; border:3px solid #ffffff20; text-transform: uppercase; font-weight: 800; } .cs-6 .content .btn:hover>span{ color:var(--dark); } .cs-6 .content .btn>span>span{ margin-right:80px; } .cs-6 .content .btn>span .sm{ font-size:14px; font-weight:600; margin-top:5px; line-height: 18px; line-height: 1.1; color:#bebebe; transition: all .25s ease-in-out;} .cs-6 .content .btn:hover>span .sm { color: var(--main); } .cs-6 .content .btn>span svg{ width:28px; } .cs-6 .content .btn>span svg path { fill: var(--main); } @media (max-width: 960px) { .cs-6 .content{ max-width:600px; } .cs-6 .content p.big-text { font-size: 60px; line-height:60px; background-size:205px auto; padding-bottom:40px;} .cs-6 .content p.big-text span:last-child { margin-left:201px;} .cs-6 .content p.small-text{ top:30px; right:0; text-align:right;} } @media (max-width: 619px) { .cs-6{ padding-top:100px; } .cs-6 .content p.small-text{ position:static; width:100%; text-align:center; margin-bottom: 30px;} .cs-6 .content p.big-text { font-size: 30px; line-height:32px; background:none; padding-bottom:0;} .cs-6 .content p.big-text span { display: inline;} .cs-6 .content p.big-text span:last-child { margin-left:0;} .cs-6 .content .cta{ margin-top:30px; } .cs-6 .content .btn>span{ padding:20px 40px; font-size:18px; } .cs-6 .content .btn>span>span{ margin-right:10px; } .cs-6 .content .btn>span .sm{ font-size:14px; } .cs-6 .content .btn>span svg{ width:22px; } .cs-6 .content p.support-text { font-size: 15px; } } .cs-hero{ padding:360px 0 260px 0; text-align:center; position:relative; background-size: cover; background-position: center center; background-repeat: no-repeat; } .cs-hero .container{ z-index:3; } .cs-hero h1{ font-size:60px; line-height:1.1; font-family: 'Modius', sans-serif; padding: 0 50px; } .cs-hero.seo h1{ font-size:50px; } .cs-hero.carriere h1{ font-size:50px; } .cs-hero.equipe .container { max-width: fit-content; padding: 0; } .cs-hero.equipe h1{ font-size:45px; } .cs-hero.equipe h1 .sm { margin-bottom: 30px; } .cs-hero.test-intro { padding: 260px 0 100px; } .container-scroll-text { position: relative; width:100vw; overflow: hidden; } .scrolling-text { display: inline-block; transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83); will-change: transform; backface-visibility: hidden; } .scrolling-text .scrolling-text-content { font-size: 55px; font-family: 'Modius', sans-serif; white-space: nowrap; transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83); line-height: 1em; margin: 10px 0;} .cs-hero h1 .sm{ font-size: 24px; font-weight: 800; letter-spacing: .09em;display:block; margin-bottom:20px; font-family: 'Montserrat', sans-serif; opacity: .5; } .cs-hero p{ font-size:20px; margin:30px auto 0; max-width:950px; } .cs-hero p.sm{ max-width:750px; } .cs-hero p .lg{ font-size:25px; font-weight:700; display:block; } .cs-hero .img-1{ width:280px; position:absolute; right:0; top:120px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero .img-2{ width:330px; position:absolute; left:0; top:120px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero .img-3{ width:340px; position:absolute; right:0; bottom:0; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero .img-4{ width:290px; position:absolute; right:0; bottom:0; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero .img-5{ width:350px; position:absolute; right:0; bottom:0; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero .img-6{ width:420px; position:absolute; left:0; bottom:0; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero .img-7{ width:300px; position:absolute; left:0; top:120px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero .img-8{ width:450px; position:absolute; left:0; bottom:-100px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero.carriere .img-1{ width:200px; position:absolute; left:0; top:100px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-hero .cta-circle{ margin:60px auto 0; width:180px; } .cs-hero .cta-circle .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; color:var(--main); } .cs-hero .cta-circle .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-appel-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-hero .cta-circle a:hover .btn-circle:before{ animation-play-state:paused; } .cs-hero .cta-circle .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-hero .cta-circle .btn-circle svg polygon { fill: var(--main); } .cs-hero .cta-circle a:hover .btn-circle svg{ transform:scale(1.2); } .cs-hero .cta{ margin:50px 0 40px; display:flex; justify-content:center; } .cs-hero .outer-mag{ width:max-content; margin:-10px; } .cs-hero .mag>span{ display:flex; justify-content:center; align-items:center; height:90px; width:90px; outline:3px solid #ffffff10; outline-offset:-3px; margin:10px; color:#fff;transition:transform .15s linear;overflow:hidden;position:relative; } .cs-hero .mag:hover>span{ } .cs-hero .mag>span:before{content:"";border-radius:200px;position:absolute;top:50%;left:50%;width:150%;height:150%;background:var(--main);transform:scale(0) translate(-50%,-50%);transform-origin:center bottom;transition:transform .4s linear} .cs-hero .mag:hover>span:before{transform:scale(1) translate(-50%,-50%)} /*.cs-35 .mag svg{ width:30px; transform:rotate(90deg); }*/ .cs-hero .mag svg{ height:30px; } .cs-hero .mag svg polygon { fill: var(--light); } .cs-hero .mag:hover svg{ animation:down 1s ease-in-out forwards; } @media (max-width: 1019px) { .cs-hero h1{ font-size:42px; padding: 0; } .cs-hero h1.mobile-sm{ font-size:40px; } .cs-hero.seo h1{ font-size:36px; } .cs-hero.carriere h1{ font-size:40px; } .cs-hero.equipe h1{ font-size:30px; } .cs-hero h1 .sm{ font-size:20px; } .cs-hero .img-2{ left:-100px; } .cs-hero .img-4{ display:none; } .cs-hero .img-8{ width:350px; bottom:0; } } @media (max-width: 619px) { .cs-hero{ padding:260px 0 200px 0; overflow-x:hidden; } .cs-hero h1{ font-size:35px; } .cs-hero h1.mobile-sm{ font-size:30px; } .cs-hero.seo h1{ font-size:25px; } .cs-hero.carriere h1{ font-size:32px; } .cs-hero.equipe h1{ font-size:25px; } .scrolling-text .scrolling-text-content { font-size: 38px; } .cs-hero h1 .sm{ font-size:18px; } .cs-hero p{ font-size:18px; } .cs-hero p .lg{ font-size:20px; } .cs-hero .img-1{ width:200px; right:-60px; } .cs-hero .img-3{ width:200px; } .cs-hero .img-5{ width:200px; } .cs-hero .img-6{ width:220px; } .cs-hero .img-7{ width:200px; } .cs-hero .img-8{ width:250px; } .cs-hero.carriere .img-1{ width:150px; } } @media (max-width: 500px) { .cs-hero .container { padding: 0 10px; } .cs-hero h1{ font-size:24px; } .cs-hero.carriere h1{ font-size:30px; } .cs-hero.seo h1 { font-size: 20px; } .cs-hero h1 .sm { font-size: 14px; font-weight: 600; } } .cs-hero-2{ padding:200px 0 20px; } .cs-hero-2 .content{ display:flex; flex-direction:column; justify-content:center; width:55%; } .cs-hero-2 .title{ max-width:780px; } .cs-hero-2 h1{ font-size:80px; margin-bottom:20px; font-family: 'Modius', sans-serif; } .cs-hero-2 h1 .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; } .cs-hero-2 .f-title{ font-size:25px; max-width: 600px; font-weight: 800; line-height: 1.1; opacity: .5; } .cs-hero-2 .img{ display:flex; flex-direction:column; justify-content:center; align-items:center; width:55%; margin-left:-10%; } .cs-hero-2 .img img{ animation:float 4s ease-in-out infinite; } @media (max-width: 1200px) { .cs-hero-2 h1 { font-size: 68px; } .cs-hero-2 .f-title { max-width: 500px; } } @media (max-width: 1019px) { .cs-hero-2 .img{ display: none; } .cs-hero-2{ padding:280px 0 20px; } } @media (max-width: 619px) { .cs-hero-2{ padding:280px 0 80px; } .cs-hero-2 .content{ width:100%; } .cs-hero-2 h1{ font-size:42px; } .cs-hero-2 .f-title { font-size: 21px; } .cs-hero-2 .img{ width:100%; margin:30px 0 0 0; } } .cs-blog-list{ padding:150px 0; } .cs-blog-list .top{ margin-bottom:30px; } .cs-blog-list .top .inner{ display:flex; justify-content:space-between; align-items:center; } .cs-blog-list .top .input{ font-size:15px; color:#fff; padding-right:100px; border-color:#ffffff10; border-radius:100px; background:transparent; } .cs-blog-list .top .input::placeholder{ color:#fff; } .cs-blog-list .top .input:focus{ border-color:#ffffff30; } .cs-blog-list .top .search{ width:550px; position:relative; } .cs-blog-list .top .search button{ position:absolute; top:50%; margin-top:-23px; right:20px; padding:10px; color:var(--main); cursor:pointer; } .cs-blog-list .top .search button:hover{ color:#fff; } .cs-blog-list .top .search button svg{ height:26px; } .cs-blog-list .top .filter{ width:400px; position:relative; } .cs-blog-list .top .filter select.input{ -webkit-appearance: none; position:relative; z-index:2; } .cs-blog-list .top .filter svg{ height:14px; position:absolute; top:50%; margin-top:-7px; right:30px; color:var(--main); z-index:1; } .cs-blog-list .items>.wrap{ margin:0 -30px; } .cs-blog-list .item{ display:flex; flex-direction:column; align-items:center; width:33.333333%; padding:30px; } .cs-blog-list .item a{ display:block; } .cs-blog-list .item .img{ width:100%; transition: all .25s ease-in-out; filter: grayscale(1); } .cs-blog-list .item a:hover .img{ opacity:0.6; } .cs-blog-list .item .meta{ display:flex; align-items:center; padding:20px 0; font-size:15px; font-weight:900; text-transform:uppercase; } .cs-blog-list .item .cat{ display:flex; align-items:center; margin-right:50px; color:var(--main); } .cs-blog-list .item .cat img{ width:23px; margin-right:10px; } .cs-blog-list .item .date{ color:var(--grey); } .cs-blog-list .item h2{ font-size:21px; line-height:1.3; padding-bottom:30px; transition: all .25s ease-in-out; } .cs-blog-list .item a:hover h2{ color:var(--main); } .cs-blog-list .pager{ margin-top:60px; } .cs-blog-list .pager .inner{ display:flex; justify-content:center; align-items:center; } .cs-blog-list .pager .control{ display:flex; justify-content:center; align-items:center; height:60px; width:60px; border:3px solid #ffffff10; color:var(--main); border-radius:50%; } .cs-blog-list .pager .control:hover{ background:var(--main); color:#fff; } .cs-blog-list .pager .control.inactive{ color:#ffffff10; background:none; cursor:default; } .cs-blog-list .pager .control.prev{ margin-right:30px; transform:rotate(-180deg); } .cs-blog-list .pager .control.next{ margin-left:30px; } .cs-blog-list .pager .control svg{ width:20px; } .cs-blog-list .pager .num{ display:flex; padding:0 10px; margin:0 5px; font-size:25px; font-weight:800; color:#ffffff10; } .cs-blog-list .pager .num:hover{ color:#fff; } .cs-blog-list .pager .num.current{ color:var(--main); } @media (max-width: 1679px) { .cs-blog-list .item h2{ font-size:20px; } } @media (max-width: 1279px) { .cs-blog-list .item{ width:50%; } } @media (max-width: 1019px) { .cs-blog-list { padding-top: 60px; } .cs-blog-list .top .search{ width:50%; } .cs-blog-list .top .filter{ width:40%; } } @media (max-width: 619px) { .cs-blog-list{ padding:0 0 100px; } .cs-blog-list .top .inner{ display:block; } .cs-blog-list .top .search{ width:100%; } .cs-blog-list .top .filter{ width:100%; margin-top:15px; } .cs-blog-list .item{ width:100%; } .cs-blog-list .item .cat{ margin-right:30px; } .cs-blog-list .pager .control.prev{ margin-right:10px; } .cs-blog-list .pager .control.next{ margin-left:10px; } .cs-blog-list .pager .num{ padding:0 10px; margin:0; font-size:18px; } } .cs-featured-blog{ padding:150px 0; background:#fff; color:var(--dark); } .cs-featured-blog .items>.wrap{ margin:-80px -30px 0; } .cs-featured-blog .item{ display:flex; flex-direction:column; align-items:center; width:33.333333%; padding:30px; } .cs-featured-blog .item a{ display:block; } .cs-featured-blog .item .img{ width:100%; transition: all .25s ease-in-out; filter: grayscale(1); } .cs-featured-blog .item a:hover .img{ opacity:0.6; } .cs-featured-blog .item .meta{ display:flex; align-items:center; padding:20px 0; font-size:15px; font-weight:800; text-transform:uppercase; } .cs-featured-blog .item .cat{ display:flex; align-items:center; margin-right:50px; font-weight: 900; } .cs-featured-blog .item .cat img{ width:23px; margin-right:10px; } .cs-featured-blog .item .date{ color:var(--grey); } .cs-featured-blog .item h2{ font-size:21px; line-height:1.1; padding-bottom:30px; transition: all .25s ease-in-out; } .cs-featured-blog .item a:hover h2{ color:var(--main); } @media (max-width: 1679px) { .cs-featured-blog .item h2{ font-size:20px; } } @media (max-width: 1279px) { .cs-featured-blog .item{ width:50%; } } @media (max-width: 1019px) { .cs-featured-blog .top .search{ width:50%; } .cs-featured-blog .top .filter{ width:40%; } } @media (max-width: 619px) { .cs-featured-blog{ padding:100px 0; } .cs-featured-blog .items>.wrap{ margin:-30px -30px 0; } .cs-featured-blog .item{ width:100%; } .cs-featured-blog .item .cat{ margin-right:30px; } } .cs-article-top{ padding:200px 0 100px; position:relative; } .cs-article-top .back{ margin-bottom:30px; } .cs-article-top .back-btn{ display:inline-flex; align-items:center; font-size:14px; font-weight:600; text-transform:uppercase; color:#ffffff30; letter-spacing: .04em; } .cs-article-top .back-btn:hover{ color:#fff; } .cs-article-top .back-btn .icn{ display:flex; justify-content:center; align-items:center; height:50px; width:50px; border:3px solid #ffffff10; color:var(--main); margin-right:20px; transform:rotate(-180deg); transition: all .25s ease-in-out; } .cs-article-top .back-btn:hover .icn{ background:var(--main); color:#fff; } .cs-article-top .back-btn .icn svg { width: 18px; } .cs-article-top .back-btn .icn svg polygon { fill: #fff; } .cs-article-top .title .meta{ display:flex; align-items:center; padding:20px 0; font-size:15px; font-weight:800; letter-spacing: .04em; text-transform:uppercase; } .cs-article-top .title .cat{ display:flex; align-items:center; margin-right:50px; color:var(--main); } .cs-article-top .title .cat img{ width:23px; margin-right:10px; } .cs-article-top .title .date{ color:var(--grey); } .cs-article-top .title h1{ font-size:60px; max-width:1100px; } .cs-article-top .intro{ margin-top:100px; } .cs-article-top .intro .content{ display:flex; flex-direction:column; justify-content:center; width:55%; padding-right:100px; } .cs-article-top .intro .content p{ font-size:22px; font-weight:700; } .cs-article-top .intro .img{ display:flex; flex-direction:column; width:45%; } .cs-article-top .intro .img img{ width:100%; filter: grayscale(1); } .cs-article-top .img-1{ width:140px; position:absolute; left:0; bottom:250px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 1679px) { .cs-article-top .img-1{ display:none; } } @media (max-width: 1019px) { .cs-article-top .intro{ margin-top:60px; } .cs-article-top .intro .content{ width:100%; padding:0 0 60px; } .cs-article-top .title h1{ font-size:50px; } .cs-article-top .intro .img{ width:100%; } } @media (max-width: 619px) { .cs-article-top{ padding:50px 0; } .cs-article-top .back-btn{ font-size:13px; } .cs-article-top .back-btn .icn{ height:50px; width:50px; margin-right:10px; } .cs-article-top .back-btn .icn svg{ width:18px; } .cs-article-top .intro{ margin-top:30px; } .cs-article-top .title .cat{ margin-right:30px; } .cs-article-top .title h1{ font-size:35px; } .cs-article-top .intro .content p{ font-size:18px; } } .cs-article-main{ padding:200px 0; background:#fff; color:var(--dark); position:relative; } .cs-article-main .content{ display:flex; flex-direction:column; justify-content:center; width:calc(100% - 300px); padding-right:60px; } .cs-article-main .content>div{ max-width:1000px; } /*text editor*/ .cs-article-content-editor { background:#fff; color:var(--dark); } .cs-article-content-editor h2{ font-size:32px; font-weight: 900; padding-bottom:50px; border-bottom:3px solid #00000010; margin-bottom:60px; color:var(--dark); } .cs-article-content-editor h2 strong { font-weight: 900; } .cs-article-content-editor h3{ font-size:24px; padding-bottom:15px; } .cs-article-content-editor p+h2{ margin-top:120px; } .cs-article-content-editor p+h3{ margin-top:60px; } .cs-article-content-editor p+p{ margin-top:15px; } .cs-article-content-editor ul{ list-style: disc; margin-left: 1em; } .cs-article-content-editor li{ list-style: disc; line-height: 1.6; } .cs-article-content-editor p a{ font-weight:800; color:var(--main); } /*-----------*/ .cs-article-main .side{ display:flex; flex-direction:column; align-items:center; width:300px; } .cs-article-main .share{ padding:30px 0; top:30px; position:sticky; } .cs-article-main .share .f-title{ font-size:16px; } .cs-article-main .share .inner{ display:flex; justify-content:center; margin-top:30px; } .cs-article-main .share a{ display:flex; justify-content:center; align-items:center; height:60px; width:60px; border:3px solid #00000010; color:var(--main); transition: all .25s ease-in-out; } .cs-article-main .share a:hover{ border-color:var(--main); background:var(--main); color:#fff; } .cs-article-main .share a+a{ margin-left:15px; } .cs-article-main .share a svg{ height:22px; } .cs-article-main .img-1{ width:350px; position:absolute; right:0; top:-80px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1279px) { .cs-article-main .content{ width:calc(100% - 200px); } .cs-article-main .side{ width:200px; } } @media (max-width: 1019px) { .cs-article-main .content{ width:calc(100% - 150px); } .cs-article-main .content h2{ font-size:40px; } .cs-article-main .side{ width:150px; } } @media (max-width: 619px) { .cs-article-main{ padding:150px 0 100px; } .cs-article-main .content{ width:100%; padding:0 0 30px; } .cs-article-main .content h2{ font-size:30px; padding-bottom:20px; margin-bottom:30px; } .cs-article-main .content h3{ font-size:20px; } .cs-article-main .content p+h2{ margin-top:60px; } .cs-article-main .content p+h3{ margin-top:40px; } .cs-article-main .side{ width:100%; text-align:center; } .cs-article-main .img-1{ width:200px; top:-30px; } } .cs-7{ padding:0 0 150px; position:relative; } .cs-7 .box{ display:flex; flex-direction:column; align-items:center; width:33.333333%; padding:20px; text-align:center; } .cs-7 .box>div{ padding:60px 40px; height:100%; background:#ffffff10; } .cs-7 .box img{ width:80px; margin:0 auto 30px; } .cs-7 .box h2{ font-size:35px; margin-bottom:30px; } .cs-7 .img-1{ width:330px; position:absolute; left:0; top:-150px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 1679px) { .cs-7 .box{ padding:15px; } .cs-7 .img-1{ left:-60px; } } @media (max-width: 1359px) { .cs-7 .box h2{ font-size:30px; } } @media (max-width: 1279px) { .cs-7 .box{ width:100%; padding:15px 0; } } @media (max-width: 1019px) { .cs-7 .box{ width:100%; padding:15px 0; } } @media (max-width: 619px) { .cs-7{ padding:100px 0; } .cs-7 .box h2{ font-size:25px; } .cs-7 .img-1{ width:250px; left:0; top:-50px; } } .cs-8 .cta a{ position:relative; display:block; width:100%; padding:150px 30px; background:var(--main); color:var(--dark); text-align:center; overflow:hidden; } .cs-8 .cta a:before{content:"";border-radius:50%;position:absolute;bottom:170px;left:50%;margin-left:-30px;width:60px;height:60px;background:#fff;transform-origin:center center;transition:transform .4s linear} .cs-8 .cta a:hover:before{transform:scale(50);} .cs-8 .cta a:hover{ color:var(--main); } .cs-8 .cta .txt{ font-size:50px; font-weight:900; text-transform:uppercase; max-width:740px; margin:0 auto; position:relative; } .cs-8 .cta .txt.lg{ max-width:900px; } .cs-8 .cta .txt.outline{ -webkit-text-stroke:1.5px var(--dark); color:transparent; margin-bottom:15px; } .cs-8 .cta .note{ font-size: 18px; font-family:'Roboto', sans-serif; margin-top: 20px; position:relative; font-weight: 600; } .cs-8 .cta .icn{ display:flex; flex-shrink:0; justify-content:center; align-items:center; height:80px; width:80px; margin:50px auto 0; background:#fff; color:var(--dark); position:relative; transition: all .25s ease-in-out; } .cs-8 .cta a:hover .icn{ color:var(--main); transform:rotate(0); } .cs-8 .cta .icn svg{ width:28px; } .cs-8 .cta .icn svg polygon { fill:var(--dark); } @media (max-width: 619px) { .cs-8 .cta .txt{ font-size:40px; } .cs-8 .cta .txt.mobile-sm{ font-size:30px; } .cs-8 .cta .note{ font-size:16px; } } .cs-marquee-1{padding:0;max-width:100vw;overflow:hidden} .cs-marquee-1 .infinite-text{display:inline-block;font-size:110px;-webkit-text-stroke:0.5px #fff;color:transparent;overflow:hidden;white-space:nowrap;margin-left:-30px;transition:all .25s linear} @media (max-width: 619px) { .cs-marquee-1 .infinite-text{ font-size:80px; } } .cs-marquee-2{padding:0;max-width:100vw;overflow:hidden} .cs-marquee-2 .infinite-text{display:inline-block;font-size:110px;-webkit-text-stroke:0.5px var(--main);color:transparent;overflow:hidden;white-space:nowrap;margin-left:-50vh;transition:all .25s linear} .cs-marquee-2.lg .infinite-text{font-size:150px; } @media (max-width: 619px) { .cs-marquee-2 .infinite-text{ font-size:80px; } .cs-marquee-2.lg .infinite-text{ font-size:100px; } } .cs-marquee-3{padding:0;max-width:100vw;overflow:hidden} .cs-marquee-3 .infinite-text{display:inline-block;font-size:100px;line-height:1.3; color: var(--dark); font-family: 'Modius', sans-serif; overflow:hidden;white-space:nowrap;margin-left:-30vh;transition:all .25s linear} @media (max-width: 619px) { .cs-marquee-3 .infinite-text{ font-size:60px; } } /*marquee v2*/ .marquee{position:relative;overflow:hidden;--offset:20vw;--move-initial:calc(-25% + var(--offset));--move-final:calc(-50% + var(--offset)); font-family: 'Modius', sans-serif; } .marquee-inner{width:fit-content;display:flex;position:relative;transform:translate3d(var(--move-initial),0,0);animation:marquee 8s linear infinite;animation-play-state:running} .marquee span{font-size:5vw;padding:0 2vw} .marquee-main{ color:#fff;white-space:nowrap; } .marquee-white{ color:#fff;white-space:nowrap; } .marquee-dark.carriere { padding: 70px 0; background: #fff; } .marquee-dark{ color:var(--dark);white-space:nowrap; } @media (max-width: 619px) { .marquee span{font-size:10vw;padding:0 10vw} } @keyframes marquee { 0% { transform: translate3d(var(--move-initial), 0, 0); } 100% { transform: translate3d(var(--move-final), 0, 0); } } .cs-9{ padding:150px 0; } .cs-9 .content{ max-width:1300px; margin:0 auto 0; text-align:center; } .cs-9 .content .logo{ width:85px; margin:0 auto 30px; } .cs-9 .content p{ font-size:35px; font-weight:800; } .cs-9 .content .note{ font-size:35px; font-family:'Caveat Brush', cursive; margin-top:30px; } .cs-9 .content .note>span{ color:var(--main); } @media (max-width: 619px) { .cs-9{ padding:100px 0; } .cs-9 .content p{ font-size:25px; } } .cs-10 a{ display:flex; justify-content:center; align-items:center; padding:300px 30px; background:url(../images/bg-video-carriere.jpg) center center / cover no-repeat var(--dark); position:relative; } .cs-10 a:before{ content:""; display:block; height:100%; width:100%; background:#000; position:absolute; top:0; left:0; opacity:0.2; transition: all .25s ease-in-out; } .cs-10 a:hover:before{ opacity:0.6; } .cs-10 .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; } .cs-10 .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-video-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-10 a:hover .btn-circle:before{ animation-play-state:paused; } .cs-10 a .btn-circle svg { width:28px; transition: all .25s ease-in-out; } .cs-10 a .btn-circle svg polyline { fill: #fff; transition: .4s ease-in-out; } .cs-10 a:hover .btn-circle svg{ transform:scale(1.2); } .cs-10 a:hover .btn-circle svg polyline { fill: var(--main); } @media (max-height: 800px) { .cs-10 a{ padding:200px 30px; } } @media (max-width: 619px) { .cs-10 a{ padding:150px 30px; } } .cs-11{ padding:200px 0; background:#fff; color:var(--dark); } .cs-11 .container{ max-width:1200px; } .cs-11 .content{ max-width:950px; margin:0 auto 60px; text-align:center; overflow:hidden; } .cs-11 h2{ font-size: 80px; font-family: 'Modius', sans-serif; } .cs-11 h2 .off-right{ padding-right:100px; } .cs-11 h2 .off-left{ padding-left:50px; margin-top:10px; } .cs-11 h2 .outline{ -webkit-text-stroke:2px var(--dark); color:transparent; padding-left:250px; background:url(../images/shape-7.png) left center / 180px 50px no-repeat; } .cs-11 .content p{ font-size:20px; font-weight:700; margin-top:50px; } .cs-11 .items .wrap{ margin:0 -30px; justify-content:space-between; } .cs-11 .item{ display:flex; flex-direction:column; width:33.333333%; max-width:350px; align-items:center; padding:30px 20px; text-align:center; } .cs-11 .item img{ width:100px; margin:0 auto 30px; } .cs-11 .item h3{ font-size:22px; font-weight:700; line-height:1.3; text-transform:none; } .cs-11 .bottom{ margin-top:60px; text-align:center; } .cs-11 .bottom .note{ font-size:28px; font-weight: 800; line-height: 1.1; } @media (max-width: 1019px) { .cs-11 h2{ font-size:60px; } .cs-11 h2 .off-right{ padding-right:50px; } .cs-11 h2 .off-left{ padding-left:50px; } .cs-11 h2 .outline{ padding-left:200px; } .cs-11 .content p{ font-size:18px; } .cs-11 .item h3{ font-size:20px; } } @media (max-width: 619px) { .cs-11{ padding:100px 0; } .cs-11 h2{ font-size:40px; } .cs-11 h2 .off-right{ padding-right:0; } .cs-11 h2 .off-left{ padding-left:0; } .cs-11 h2 .outline{ -webkit-text-stroke:1px var(--dark); padding-left:80px; background-size:60px 25px; } .cs-11 .items .wrap{ justify-content:center; } .cs-11 .item{ width:100%; } .cs-11 .item img{ margin:0 auto 20px; } .cs-11 .bottom .note{ font-size:26px; } } @media (max-width: 400px) { .cs-11 h2 { font-size: 33px; } } .cs-12{ padding:100px 0; } .cs-12 .content{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:flex-start; padding-left:60px; } .cs-12 .f-title{ font-size:30px; } .cs-12 .f-title>div+div{ font-size:50px; margin-top:10px; } .cs-12 .f-title .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; } .cs-12 .soon{ font-size:35px; font-family:'Caveat Brush', cursive; display:flex; justify-content:flex-start; align-items:center; } .cs-12 .soon img{ width:30px; margin:0 5px; } .cs-12 .ou { font-size:30px; font-weight: 800; color:#fff; margin:30px 0; opacity: .5; } .cs-12 .img{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; } @media (max-width: 1019px) { .cs-12{ padding:150px 0; } .cs-12 .content{ width:100%; padding:0 0 60px; } .cs-12 .content>div{ max-width:650px; margin:0 auto; } .cs-12 .img{ width:100%; } } @media (max-width: 619px) { .cs-12{ padding:100px 0; } .cs-12 .f-title{ font-size:20px; } .cs-12 .f-title>div+div{ font-size:30px; } .cs-12 .soon{ font-size:30px; } .cs-12 .ou{ font-size:30px; } } .cs-13{ padding:100px 0 200px; overflow-x:hidden; } .cs-13 .content{ max-width:1200px; margin:0 auto 100px; text-align:center; position:relative; z-index:2; } .cs-13 .content p{ font-size:30px; font-weight:800; } .cs-13 .content p>span{ white-space:nowrap; padding-bottom:10px; background:url(../images/line-2.png) center bottom / 310px 16px no-repeat; position:relative; } .cs-13 .content p>span .note{ position:absolute; top:-70px; left:40%; padding:0 0 10px 50px; display:block; font-size:20px; font-family:'Caveat Brush', cursive; font-weight:400; line-height:1.1; text-align:left; background:url(../images/note-arrow-2.png) left bottom / 42px 34px no-repeat } .cs-13 .items{ position:relative; } .cs-13 .items .wrap{ margin:0 -20px; } .cs-13 .box{ display:flex; flex-direction:column; width:50%; padding:20px; position:relative; } .cs-13 .box>div{ padding:80px 60px; height:100%; background:#ffffff10; } .cs-13 .box h2{ font-size:30px; margin-bottom:30px; } .cs-13 .box p+p{ margin-top:15px; } .cs-13 .box .more{ height:0; overflow:hidden; transition: all .25s ease-in-out; } .cs-13 .box .more .inner{ padding-top:15px; } .cs-13 .box .more p{ margin:0 0 15px; } .cs-13 .box ul{ padding-left:20px; margin:0 0 15px; } .cs-13 .box li{ padding:10px 0; font-weight:700; line-height:1.1; list-style:disc; color:var(--main); } .cs-13 .box li>span{ color:#fff; } .cs-13 .box .cta{ margin-top:30px; } .cs-13 .box .cv{ padding:20px 0 30px; width:180px; } .cs-13 .box .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; color:var(--main); } .cs-13 .box .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-cv-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-13 .box a:hover .btn-circle:before{ animation-play-state:paused; } .cs-13 .box .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-13 .box .btn-circle svg polygon { fill: var(--main); } .cs-13 .box a:hover .btn-circle svg{ transform:scale(1.2); } .cs-13 .img-1{ width:380px; position:absolute; left:0; top:-160px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-13 .img-2{ width:200px; position:absolute; right:0; bottom:-160px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1019px) { .cs-13 .content p>span .note{ display:none; } .cs-13 .box{ width:100%; } .cs-13 .img-1{ left:-100px; } } @media (max-width: 619px) { .cs-13{ padding:100px 0; } .cs-13 .content p{ font-size:25px; } .cs-13 .box>div{ padding:60px 30px; } .cs-13 .box h2{ font-size:20px; } .cs-13 .img-1{ width:250px; top:-80px; } .cs-13 .img-2{ width:150px; bottom:-100px; } } .cs-14{ padding:150px 0; background:#fff; color:var(--dark); position:relative; } .cs-14 .img-1{ width:240px; position:absolute; left:0; bottom:0; z-index:1; animation:float 5s ease-in-out infinite; } .cs-14 .content{ display:flex; flex-direction:column; width:50%; align-items:flex-start; padding:30px 100px 30px 0; position:relative; z-index:2; } .cs-14 .f-title{ font-size:35px; } .cs-14 .f-title>div+div{ font-size:70px; margin-top:10px; } .cs-14 .f-title .outline{ -webkit-text-stroke:2px var(--dark); color:transparent; } .cs-14 .form{ display:flex; flex-direction:column; width:50%; position:relative; z-index:2; } @media (max-width: 1679px) { .cs-14 .content{ padding:30px 60px 30px 0; } .cs-14 .f-title{ font-size:35px; } .cs-14 .f-title>div+div{ font-size:70px; } } @media (max-width: 1019px) { .cs-14 .img-1{ display:none; } .cs-14 .content{ width:100%; padding:0 0 60px; } .cs-14 .content>div{ max-width:650px; } .cs-14 .form{ width:100%; } } @media (max-width: 619px) { .cs-14{ padding:100px 0; } .cs-14 .f-title{ font-size:25px; } .cs-14 .f-title>div+div{ font-size:40px; } .cs-14 .f-title .outline{ -webkit-text-stroke:1px var(--dark); } } .cs-15{ padding:200px 0; background:var(--main); color:var(--dark); text-align:center; } .cs-15 .content.sm{ max-width:750px; margin:0 auto; } .cs-15 h2{ font-size:50px; line-height:1.1; margin-bottom:30px; } .cs-15 .f-title{ font-size:30px; line-height:1.3; } .cs-15 .f-title div>span{ display:block; } .cs-15 .f-title .outline{ font-size:80px; margin-top:10px; -webkit-text-stroke:2px var(--dark); color:transparent; } .cs-15 .content p{ font-weight:700; } .cs-15 .cta{ margin-top:60px; } .cs-15 .btn{ margin:10px; max-width:380px; text-align:left; } .cs-15 .btn{ margin:10px; max-width:450px; text-align:left; } .cs-15 .btn>span svg{ height:50px; width:auto; margin:0 20px 0 0; } .cs-15 .btn .white{ color:#fff; } .cs-15 .btn:hover .white{ color:var(--dark); } @media (max-width: 1279px) { .cs-15 .f-title{ font-size:20px; } .cs-15 .f-title .outline{ font-size:70px; line-height:1; } } @media (max-width: 1019px) { } @media (max-width: 619px) { .cs-15{ padding:100px 0; } .cs-15 h2{ font-size:35px; } .cs-15 .f-title{ font-size:18px; } .cs-15 .f-title div>span{ display:inline; } .cs-15 .f-title .outline{ font-size:40px; -webkit-text-stroke:1px var(--dark); } .cs-15 .cta{ margin-top:30px; } .cs-15 .btn>span{ font-size:16px; padding:20px 40px; } .cs-15 .btn>span svg{ height:40px; } } .cs-16{ padding:150px 0; position:relative; } .cs-16 .container{ z-index:2; } .cs-16 .content{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:flex-start; padding:0 0 100px 100px; } .cs-16 .content h2{ font-size:50px; line-height:1.1; margin-bottom:30px; } .cs-16 .content h2 .sm{ font-size:30px; display:block; } .cs-16 .img{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; } .cs-16 .img-1{ width:260px; position:absolute; right:0; top:-160px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1679px) { .cs-16 .content{ width:60%; padding:0 0 0 100px; } .cs-16 .img{ width:40%; } } @media (max-width: 1279px) { .cs-16 .content{ width:100%; padding:0 0 60px; } .cs-16 .img{ width:100%; } } @media (max-width: 619px) { .cs-16{ padding:100px 0; } .cs-16 .content h2{ font-size:30px; } .cs-16 .content h2 .sm{ font-size:25px; } .cs-16 .img-1{ width:180px; top:-100px;} } .cs-17{ padding:150px 0; } .cs-17 .content{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:flex-end; padding-right:60px; } .cs-17 .content>div{ max-width:600px; } .cs-17 .content h2{ font-size:30px; line-height:1.1; margin-bottom:30px; } .cs-17 .content h2 .outline{ font-size:48px; display:block; } .cs-17 .content h2 .sm { font-weight: 800; font-size: 25px; letter-spacing: .08em; line-height: 1.2; display: block; margin-top: 15px; } .cs-17 .img{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; } .cs-17 .img a{ position:relative; } .cs-17 .img a .guide{ transition: all .25s ease-in-out; } .cs-17 .img a:hover .guide{ opacity:0.6; } .cs-17 .cta{ position:absolute; top:-125px; left: 50%; transform: translateX(-50%); } .cs-17 .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; } .cs-17 .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-pdf-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-17 a:hover .btn-circle:before{ animation-play-state:paused; } .cs-17 .btn-circle .download{ width:30px; transition: all .25s ease-in-out; } .cs-17 a:hover .btn-circle .download{ transform:scale(1.2); } @media (max-width: 1359px) { .cs-17 .content h2 .outline{ font-size:60px; } } @media (max-width: 1279px) { .cs-17 .content{ width:100%; align-items:flex-start; padding:0 0 150px; } .cs-17 .img{ width:100%; } } @media (max-width: 619px) { .cs-17{ padding:100px 0; } .cs-17 .content h2{ font-size:25px; } .cs-17 .content h2 .outline{ font-size:36px; letter-spacing: 0.1em;} .cs-17 .content h2 .sm { font-size: 18px; margin-top: 6px; } } .cs-18{ color:var(--dark); position:relative; } .cs-18 .content-1{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; padding:150px 100px; background:#fff; } .cs-18 .content-1>div{ max-width:600px; position:relative; z-index:2; } .cs-18 .content-1 img{ position:absolute; top:-70px; left:65%; width:160px; } .cs-18 .content-1 h2{ font-size:90px; margin-bottom:30px; position:relative; } .cs-18 .content-1 h2 .outline{ font-size:27px; font-weight: 800; display:block; margin-bottom: 10px; } .cs-18 .content-1 p+p{ margin-top:15px; } .cs-18 .content-2{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; padding:150px 100px; background:var(--light); } .cs-18 .content-2 h2{ font-size:30px; margin-bottom:30px; } .cs-18 .content-2>div{ max-width:600px; } .cs-18 .content-2 li{ padding:5px 0 5px 50px; font-weight:700; line-height:1.3; background:url(../images/icn/list-plus.png) 0 0 / 30px 30px no-repeat; } .cs-18 .content-2 li+li{ margin-top:15px; } .cs-18 .img-1{ width:270px; position:absolute; left:0; top:-100px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1359px) { .cs-18 .content-1{ padding:150px 60px; } .cs-18 .content-1 h2{ font-size:80px; } .cs-18 .content-2{ padding:150px 60px; } } @media (max-width: 1019px) { .cs-18 .content-1{ width:100%; padding:150px 60px; } .cs-18 .content-2{ width:100%; padding:150px 60px; } } @media (max-width: 619px) { .cs-18 .content-1{ padding:100px 30px; } .cs-18 .content-1 img{ top:-60px; left:auto; right:5vw; width:120px; } .cs-18 .content-1 h2{ font-size:50px; } .cs-18 .content-1 h2 .outline{ font-size:30px; } .cs-18 .content-2{ padding:100px 30px; } .cs-18 .content-2 h2{ font-size:25px; } .cs-18 .img-1{ width:150px; top:-60px; } } .cs-19{ padding:200px 0; } .cs-19 .intro{ max-width:1100px; margin:0 auto 100px; text-align:center; } .cs-19 .intro h2{ font-size:60px; margin-bottom:50px; } .cs-19 .items{ margin-top: 100px; position:relative; } .cs-19 .items .wrap{ margin:0 -20px; } .cs-19 .box{ display:flex; flex-direction:column; width:50%; padding:20px; position:relative; } .cs-19 .box>div{ padding:80px 60px; height:100%; background:#ffffff10; } .cs-19 .box h2{ font-size:30px; margin-bottom:30px; } .cs-19 .box p+p{ margin-top:15px; } .cs-19 .box ul{ padding-left:20px; margin-top:30px; } .cs-19 .box li{ padding:10px 0; font-weight:700; line-height:1.1; list-style:disc; color:var(--main); } .cs-19 .box li>span{ color:#fff; } .cs-19 .box .cta{ max-width:350px; margin-top:30px; } .cs-19 .box .cta .btn>span{ color:#fff; text-align:left; } .cs-19 .box .cta .btn>span svg{ height:30px; margin:0 20px 0 0; color:var(--main); } .cs-19 .box .cta .btn:hover>span{ color:var(--dark); } .cs-19 .box .cta .btn:hover>span svg{ color:var(--dark); } .cs-19 .img-1{ width:200px; position:absolute; left:-60px; top:-100px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-19 .img-2{ width:200px; position:absolute; right:0; bottom:-160px; z-index:1; animation:float 5s ease-in-out infinite; } .cs-19 .box.special>div{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:none; padding-bottom: 0;} .cs-19 .box.special>div.cta-zone { height: auto; } .cs-19 .box.special .img{ width:250px; margin:0 0 30px; } .cs-19 .box.special .f-title{ font-size:22px; line-height:1.3; max-width: 500px; } .cs-19 .box.special .f-title .lg{ font-size:43px; } .cs-19 .box.special .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; color:var(--main); } .cs-19 .box.special .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-contact-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-19 .box.special a:hover .btn-circle:before{ animation-play-state:paused; } .cs-19 .box.special .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-19 .box.special .btn-circle svg polygon { fill: var(--main); } .cs-19 .box.special a:hover .btn-circle svg{ transform:scale(1.2); } @media (max-width: 1019px) { .cs-19 .box{ width:100%; } } @media (max-width: 619px) { .cs-19{ padding:100px 0; } .cs-19 .intro h2{ font-size:35px; } .cs-19 .box>div{ padding:60px 30px; } .cs-19 .box h2{ font-size:20px; } .cs-19 .img-2{ display:none; } .cs-19 .box.special .f-title .lg{ font-size:40px; } } .cs-20{ padding:200px 0; background: #fff; color:var(--dark); position:relative; } .cs-20 .container{ z-index:2; } .cs-20 .title{ display:flex; flex-direction:column; width:50%; } .cs-20 .title h2{ font-size:70px; max-width: 450px; margin-bottom:30px; position:relative; } .cs-20 .title h2 .outline{ font-size:70px; -webkit-text-stroke:1px var(--dark); color:transparent; display:block; } .cs-20 .img-1{ width:460px; position:absolute; left:0; top:500px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-20 .content{ display:flex; flex-direction:column; width:50%; } .cs-20 .faq .item{ } .cs-20 .faq .item+.item{ border-top:3px solid #00000010; } .cs-20 .faq .t-item{ padding:50px 100px 50px 30px; cursor:pointer; position:relative; transition: all .25s ease-in-out; } .cs-20 .faq .t-item h3{ font-size:25px; line-height:1.1; transition: all .25s ease-in-out; } .cs-20 .faq .t-item:hover h3{ color:var(--main); } .cs-20 .faq .t-item .icn{ position:absolute; top:50%; right:30px; margin-top:-11px; display:block; width:22px; height:22px; background:url(../images/icn/plus.svg) 0 0 no-repeat; background-size:22px 22px; transition:all 0.4s ease; } .cs-20 .faq .t-item.open .icn{ background-image:url(../images/icn/minus.svg); transform:rotate(180deg); } .cs-20 .faq .c-item{ height:0; overflow:hidden; transition:all 0.4s ease; } .cs-20 .faq .c-item.open{ } .cs-20 .faq .c-item>div{ padding:0 30px 50px; } .cs-20 .faq .c-item p+p{ margin-top:15px; } .cs-20 .faq .c-item ul{ padding-left:20px; margin-top:30px; } .cs-20 .faq .c-item li{ padding:10px 0; font-weight:700; line-height:1.1; list-style:disc; color:var(--main); } .cs-20 .faq .c-item li>span{ color:var(--dark); } @media (max-width: 1019px) { .cs-20 .title{ width:100%; padding-bottom:40px; } .cs-20 .content{ width:100%; } } @media (max-width: 619px) { .cs-20{ padding:150px 0 100px; } .cs-20 .title h2{ font-size:48px; } .cs-20 .title h2 .outline{ font-size:40px; } .cs-20 .img-1{ width:300px; top:350px; } .cs-20 .faq .t-item{ padding:40px 50px 40px 0;} .cs-20 .faq .t-item h3{ font-size:18px; } .cs-20 .faq .t-item .icn{ right:10px; } } .cs-21{ padding:150px 0; background:#fff; } .cs-21 .logos{ margin-top:150px; display:flex; justify-content:center; } .cs-21 .logos a{ display:flex; max-width:25%; margin:0 20px; opacity:0.7; } .cs-21 .logos a:hover{ opacity:1; } .cs-21 .logos img{ width:320px; } @media (max-width: 619px) { .cs-21{ padding:100px 0; } .cs-21 .logos{ margin-top:60px; flex-wrap:wrap; } .cs-21 .logos a{ width:60%; max-width:100%; margin:20px 0; } } .cs-22{ padding:150px 0; background:#fff; color:var(--dark); text-align:center; position:relative; } .cs-22 .container{ z-index:2; } .cs-22 .title .f-title{ font-size:60px; margin-bottom:60px; position:relative; } .cs-22 .title .f-title .outline{ -webkit-text-stroke:1px var(--dark); color:transparent; } .cs-22 .items .wrap{ margin:0 -30px; justify-content:center; } .cs-22 .item{ display:flex; flex-direction:column; width:33.333333%; padding:0 30px; } .cs-22 .item img{ width:80px; margin:0 auto 30px; } .cs-22 .item h2{ font-size:30px; margin-bottom:30px; } .cs-22 .img-1{ width:290px; position:absolute; right:0; top:-200px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 1019px) { .cs-22 .item{ width:100%; max-width:500px; padding:30px; } .cs-22 .img-1{ display:none; } } @media (max-width: 619px) { .cs-22{ padding:100px 0; } .cs-22 .title .f-title{ font-size:40px; line-height:1.1; } } .cs-23{ padding:250px 30px; overflow:hidden; position:relative; } .cs-23>div{ position:relative; z-index:3; } .cs-23 .f-title.sm{ font-size:22px; font-weight:800; text-align:center; margin-bottom:50px; color:var(--main); letter-spacing: .12em; } .cs-23 h2{ font-size:60px; max-width:1200px; margin:0 auto; position:relative; z-index:2; font-family: 'Modius', sans-serif; } .cs-23 h2 .sr-right{ margin-left:460px; margin-top:10px; } .cs-23 h2 .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; } .cs-23 .img-1{ height:300px; position:absolute; right:0; top:80px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1679px) { .cs-23 .img-1{ height:250px; right:-100px; } } @media (max-width: 1279px) { .cs-23{ padding:150px 30px; text-align:center; } .cs-23 h2{ font-size:50px; } .cs-23 h2 .sr-right{ margin-left:300px; } .cs-23 .img-1{ display:none; } } @media (max-width: 1019px) { .cs-23 h2{ font-size:50px; } .cs-23 h2 .sr-right{ margin-left:200px; } } @media (max-width: 900px) { .cs-23 h2 { font-size: 35px; } .cs-23 h2 .sr-right { margin-left: 0; text-align: center; } } @media (max-width: 700px) { .cs-23 h2 { font-size: 35px; } } @media (max-width: 619px) { .cs-23{ padding:100px 30px; } .cs-23 h2{ font-size:30px; } .cs-23 h2 .sr-right{ margin-left:0; } } @media (max-width: 400px) { .cs-23 h2 { font-size: 26px; } } .cs-24{ padding:100px 0 200px; position:relative; } .cs-24 .title h2{ font-size:50px; line-height:1.3; text-align:center; margin-bottom:50px; position:relative; z-index:2; } .cs-24 .title h2 .sm{ color: #fff; display:block; opacity: .5; font-size: 23px; font-weight: 800; letter-spacing: .08em; margin-bottom: 8px; } .cs-24 .items .wrap{ margin:0 -20px; } .cs-24 .box{ display:flex; flex-direction:column; width:33.333333%; padding:20px; } .cs-24 .box>div{ padding:40px 30px; background:#ffffff10; } .cs-24 .box .f-title.sm{ font-size:14px; font-weight:800; margin-bottom:15px; color:var(--main); } .cs-24 .box h3{ font-size:25px; min-height:100px; } .cs-24 .box .more{ height:0; overflow:hidden; transition: all .25s ease-in-out; } .cs-24 .box .more .inner{ padding-top:15px; } .cs-24 .box .cta{ margin-top:20px; } .cs-24 .box .btn-sm.plus{ display:flex; justify-content:center; align-items:center; width:65px; height:65px; border:2px solid #ffffff54; } .cs-24 .box .btn-sm.plus:hover{ border-color:var(--main); background:var(--main); } .cs-24 .box .btn-sm.plus svg{ width:20px; } .cs-24 .box .btn-sm.plus svg.minus{ display:none; } .cs-24 .box .btn-sm.plus svg path { fill: #fff; } .cs-24 .box.open .btn-sm.plus svg.minus{ display:block; } .cs-24 .box.open .btn-sm.plus svg.plus{ display:none; } .cs-24 .img-1{ width:400px; position:absolute; left:0; top:60px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 1679px) { .cs-24 .img-1{ left:-100px; top:20px; } } @media (max-width: 1359px) { .cs-24 .box h3{ min-height:130px; } } @media (max-width: 1019px) { .cs-24 .box{ width:100%; } .cs-24 .box h3{ min-height:0; } } @media (max-width: 619px) { .cs-24{ padding:100px 0; } .cs-24 .title h2{ font-size:30px; margin-bottom:30px; } .cs-24 .box h3{ font-size:20px; } .cs-24 .img-1{ width:200px; left:-50px; top:0; } } .cs-25{ padding:150px 0; background:var(--light); position:relative; } .cs-25 .container{ z-index:2; } .cs-25 .outer-slider{ margin-top:50px; position:relative; } .cs-25 .bx-viewport{ overflow:visible !important; } .cs-25 .slider [aria-hidden="true"] .inner{ opacity:0.7; } .cs-25 .slider [aria-hidden="true"] .inner .desc{ opacity:0; } .cs-25 .bx-controls a{ display: flex; justify-content: center; align-items: center; height: 100px; width: 100px; border: 3px solid #97979760; position: absolute; top: 50%; margin-top: -50px; } .cs-25 .bx-controls a svg{ width:28px; } .cs-25 .bx-controls a svg polygon { fill: var(--dark); } .cs-25 .bx-controls a:hover svg polygon { fill: #fff; } .cs-25 .bx-controls a.bx-prev{ transform:rotate(-180deg); left:-50px; } .cs-25 .bx-controls a.bx-next{ right:-20px; } .cs-25 .bx-controls a.disabled{ opacity:0; } .cs-25 .bx-controls a:hover{ border-color:var(--dark); background:var(--dark); color:#fff; } .cs-25 .outer-slider .inner{ background:#fff; color:var(--dark); margin-right:30px; transition: all .25s ease-in-out; } .cs-25 .outer-slider .inner .img{ display:flex; flex-direction:column; width:580px; justify-content:bottom; align-items:center; padding:30px 30px 0; } .cs-25 .outer-slider .inner .desc{ display:flex; flex-direction:column; width:calc(100% - 580px); justify-content:center; align-items:flex-start; padding:60px 150px 60px 0; transition: all .25s ease-in-out; } .cs-25 .outer-slider .inner h2{ font-size:40px; margin-bottom:10px; } .cs-25 .outer-slider .inner h3{ font-size:16px; margin-bottom:30px; color:var(--main); font-weight: 800; } .cs-25 .outer-slider .inner p{ font-size:16px; } .cs-25 .outer-slider .inner p+p{ margin-top:20px; } .cs-25 .img-1{ height:320px; position:absolute; right:0; top:-180px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-25 .img-2{ height:300px; position:absolute; left:0; bottom:40px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 1679px) { .cs-25 .bx-controls a.bx-prev{ left:-20px; } } @media (max-width: 1019px) { .cs-25 .bx-viewport{ overflow:hidden !important; } .cs-25 .bx-controls a{ top:35%; } .cs-25 .outer-slider .inner .img{ width:100%; } .cs-25 .outer-slider .inner .desc{ width:100%; padding:60px 100px; } } @media (max-width: 619px) { .cs-25{ padding:100px 0; } .cs-25 .outer-slider{ margin-top:0; } .cs-25 .bx-controls a{ height:60px; width:60px; top:25%; } .cs-25 .bx-controls a svg{ width:22px; } .cs-25 .outer-slider .inner{ margin:0; } .cs-25 .outer-slider .inner .desc{ padding:60px 30px; } .cs-25 .outer-slider .inner h2{ font-size:25px; } .cs-25 .outer-slider .inner h3{ font-size:18px; } .cs-25 .outer-slider .inner p{ font-size:14px; } .cs-25 .img-1{ height:220px; top:-140px; } .cs-25 .img-2{ display:none; } } .contact-hero{ padding:150px 0; } .contact-hero .img{ display:flex; flex-direction:column; width:50%; align-items:center; } .contact-hero .img img{ animation:float 4s ease-in-out infinite; } .contact-hero .content{ display:flex; flex-direction:column; width:calc(50% + 60px); justify-content:center; padding-top:100px; margin-left:-60px; } .contact-hero .content>div{ max-width:750px; } .contact-hero .content h1{ font-size:70px; margin-bottom:50px; } .contact-hero .content h1 .outline{ font-size:50px; -webkit-text-stroke:0.5px #ffffff; color:transparent; display:block; } .contact-hero .content p+p{ margin-top:15px; } @media (max-width: 1019px) { .contact-hero{ padding:100px 0 0; } .contact-hero .img{ width:100%; } .contact-hero .img img{ max-width:80%; } .contact-hero .content{ width:100%; padding:0 0 100px; margin:0; } } @media (max-width: 619px) { .contact-hero .content h1{ font-size:50px; } .contact-hero .content h1 .outline{ font-size:30px; } } .cs-contact{ padding:0 0 100px; } .cs-contact .content{ display:flex; flex-direction:column; width:45%; align-items:flex-end; } .cs-contact .content>div{ max-width:650px; padding:100px 130px 100px 30px; } .cs-contact .content .item{ margin-bottom:50px; } .cs-contact .content .item.bottom{ margin:50px 0 0; padding-top:50px; border-top:3px solid #ffffff10; } .cs-contact .content .icn{ display:flex; flex-direction:column; width:60px; } .cs-contact .content .icn img{ width:60px; } .cs-contact .content .desc{ display:flex; flex-direction:column; width:calc(100% - 60px); justify-content:center; font-size:18px; font-weight:800; padding-left:30px; line-height:1.3; } .cs-contact .content .desc a{ font-size:30px; font-weight:900; } .cs-contact .content .desc a:hover{ color:var(--main); } .cs-contact .content .desc .dt-lg{ font-size:25px; font-weight:900; padding-top:14px; } .cs-contact .content .desc .dt{ margin-top:20px; color:var(--main); } .cs-contact .content .desc .dd{ font-size:16px; font-weight:500; } .cs-contact .form{ display:flex; flex-direction:column; width:55%; background:#fff; } .cs-contact .form>div{ max-width:830px; padding:100px 30px 100px 100px; } .cs-contact .form select.input{ -webkit-appearance: none; position:relative; z-index:2; } .cs-contact .form .select-outer svg{ height:14px; position:absolute; top:50%; margin-top:-7px; right:30px; color:var(--main); z-index:1; } .cs-contact .content .item.protection-renseignements { background: rgb(255 255 255 / 6%); padding: 20px; margin-top: 50px; } .cs-contact .content .item.protection-renseignements .top { display: flex; align-items: center; border-bottom: 3px solid #ffffff10; padding-bottom: 10px; margin-bottom: 12px; } .cs-contact .content .item.protection-renseignements .icn { width: 42px; } .cs-contact .content .item.protection-renseignements .title { font-weight: 800; text-transform: uppercase; font-size: 17px; line-height: 1.05; width: calc(100% - 42px); padding-left: 14px; } .cs-contact .content .item.protection-renseignements .infos { font-size: 16px; } .cs-contact .content .item.protection-renseignements .infos .name { display: block; margin-bottom: 5px; font-weight: 600; } .cs-contact .content .item.protection-renseignements .infos .contact-links { font-size: 14px; } .cs-contact .content .item.protection-renseignements .infos .contact-links .email { border-right: 3px solid var(--main); padding-right: 10px; margin-right: 8px; } @media (max-width: 1359px) { .cs-contact .content>div{ padding:100px 100px 100px 30px; } } @media (max-width: 1019px) { .cs-contact .content{ width:100%; align-items:flex-start; } .cs-contact .content>div{ padding:100px 30px; } .cs-contact .form{ width:100%; } .cs-contact .form>div{ padding:100px 30px; } } @media (max-width: 619px) { .cs-contact{ padding:50px 0; } .cs-contact .content .desc{ font-size:16px; } .cs-contact .content .desc a{ font-size:25px; } .cs-contact .content .desc .dt-lg{ font-size:20px; } } @media (max-width: 350px) { .cs-contact .content .item.protection-renseignements .top { display: block; } .cs-contact .content .item.protection-renseignements .title { width: 100%; padding: 0; margin-top: 8px; } .cs-contact .content .item.protection-renseignements .infos .contact-links .email { border-right:none; padding-right: 0; margin-right: 0; display: block; margin-top: 8px;} .cs-contact .content .item.protection-renseignements .infos .contact-links .phone { display: block; margin-top: 5px; } } .cs-26{ padding:0 0 150px; } .cs-26 .content{ display:flex; flex-direction:column; width:45%; justify-content:center; padding-right:100px; } .cs-26.alt .content{ padding:0 60px; } .cs-26 .content .f-title{ font-size:40px; margin-bottom:60px; } .cs-26 .content .item+.item{ margin-top:40px; } .cs-26 .content .icn{ display:flex; flex-direction:column; width:60px; justify-content:center; } .cs-26 .content .icn img{ width:60px; } .cs-26 .content .desc{ display:flex; flex-direction:column; width:calc(100% - 60px); justify-content:center; font-size:28px; font-weight:700; padding-left:30px; line-height:1.3; } .cs-26 .img{ display:flex; flex-direction:column; width:55%; justify-content:center; align-items:center; } .cs-26 .img img{ animation:float 5s ease-in-out infinite; } @media (max-width: 1359px) { .cs-26 .content{ padding-right:60px; } } @media (max-width: 1279px) { .cs-26 .content{ width:50%; } .cs-26 .img{ width:50%; } } @media (max-width: 1019px) { .cs-26 .content{ width:100%; padding:0 0 60px; } .cs-26.alt .content{ width:100%; padding:0 0 60px; } .cs-26 .img{ width:100%; } } @media (max-width: 619px) { .cs-26{ padding:0 0 100px; } .cs-26 .content .f-title{ font-size:30px; } .cs-26 .content .desc{ font-size:20px; } } .cs-27{ padding:200px 0; background:#fff; color:var(--dark); position:relative; } .cs-27 .container{ max-width:1200px; z-index:2; } .cs-27 .content{ text-align:center; } .cs-27 h2{ font-size:60px; line-height:1.1; } .cs-27 h2 .lg{ font-size:80px; } .cs-27 h2 .outline{ -webkit-text-stroke:2px var(--dark); color:transparent; } .cs-27 .content p{ font-size:20px; font-weight:700; max-width:950px; margin:50px auto 0; } .cs-27 .items{ overflow:hidden; } .cs-27 .items .wrap{ margin:0 -40px; justify-content:center; } .cs-27 .item{ display:flex; flex-direction:column; width:50%; max-width:500px; align-items:center; padding:100px 40px 0; text-align:center; } .cs-27 .item img{ width:80px; margin:0 auto 30px; } .cs-27 .item h3{ font-size:30px; margin-bottom:30px; } .cs-27 .img-1{ width:540px; position:absolute; left:0; top:-120px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1019px) { .cs-27 h2{ font-size:40px; } } @media (max-width: 619px) { .cs-27{ padding:150px 0 100px; } .cs-27 h2{ font-size:30px; } .cs-27 h2 .lg{ font-size:40px; } .cs-27 .item{ width:100%; padding:60px 40px 0; } .cs-27 .item h3{ font-size:25px; } .cs-27 .img-1{ width:270px; top:-20px; } } .cs-28{ padding:200px 0; } .cs-28 .items{ margin-top: 100px; position:relative; } .cs-28 .items .wrap{ margin:0 -20px; } .cs-28 .box{ display:flex; flex-direction:column; width:50%; padding:20px; position:relative; } .cs-28 .box>div{ padding:80px 60px; height:100%; background:#ffffff10; position:relative; } .cs-28 .box .title{ padding-right:100px; position:relative; } .cs-28 .box h2{ font-size:30px; margin-bottom:10px; } .cs-28 .box h3{ font-size:20px; margin-bottom:10px; color:var(--main); } .cs-28 .box p+p{ margin-top:15px; } .cs-28 .box .more{ height:0; overflow:hidden; transition: all .25s ease-in-out; } .cs-28 .box .more .inner{ padding-top:15px; } .cs-28 .box .cta{ position:absolute; top:50%; margin-top:-32px; right:0; } .cs-28 .box .btn-sm.plus{ display:flex; justify-content:center; align-items:center; width:65px; height:65px; border:3px solid #fff; border-radius:50%; } .cs-28 .box .btn-sm.plus:hover{ border-color:var(--main); background:var(--main); } .cs-28 .box .btn-sm.plus svg{ width:20px; } .cs-28 .box .btn-sm.plus svg.minus{ display:none; } .cs-28 .box .btn-sm.plus svg path { fill: #fff; } .cs-28 .box.open .btn-sm.plus svg.minus{ display:block; } .cs-28 .box.open .btn-sm.plus svg.plus{ display:none; } .cs-28 .box .overview{ padding-top:50px; } .cs-28 .box .overview .wrap{ margin:0; } .cs-28 .box .overview .price{ display:flex; flex-direction:column; justify-content:center; width:150px; font-size:25px; font-weight:900; } .cs-28 .box .overview .price>div{ display:flex; justify-content:center; align-items:center; height:120px; width:120px; border:3px solid #ffffff10; border-radius:50%; } .cs-28 .box .overview .desc{ display:flex; flex-direction:column; justify-content:center; width:calc(100% - 150px); font-size:25px; font-weight:900; } .cs-28 .box .overview .desc>div{ padding:20px 20px 20px 50px; font-size:16px; font-weight:700; background:url(../images/icn/form-duree.png) 10px center / 26px 26px no-repeat; } .cs-28 .box .overview .desc>div+div{ border-top:3px solid #ffffff10; background-image:url(../images/icn/form-mode.png); } .cs-28 .box .bottom-cta{ background:none; padding:15px 0 0; height:auto; } .cs-28 .box .bottom-cta .btn{ display:block; } .cs-28 .box .bottom-cta .btn>span{ font-size:18px; padding:30px 40px; border-radius:0; color:#fff; } .cs-28 .box .bottom-cta .btn:hover>span { color: var(--dark); } .cs-28 .box .bottom-cta .btn:hover>span svg polygon { fill: var(--main); } .cs-28 .box .bottom-cta .btn>span svg{ width:30px; } @media (max-width: 1359px) { .cs-28 .box>div{ padding:80px 40px; } .cs-28 .box h2{ font-size:25px; } } @media (max-width: 1019px) { .cs-28 .box{ width:100%; } } @media (max-width: 619px) { .cs-28{ padding:100px 0; } .cs-28 .box>div{ padding:60px 30px 30px; } .cs-28 .box .title{ padding:0; } .cs-28 .box h3{ font-size:16px; } .cs-28 .box .more{ height:auto; } .cs-28 .box .cta{ display:none; } .cs-28 .box .overview .price{ width:100%; font-size:30px; } .cs-28 .box .overview .price>div{ height:auto; width:auto; display:block; border:none; margin-bottom:30px; } .cs-28 .box .overview .desc{ width:100%; } .cs-28 .box .bottom-cta{ background:none; padding:15px 0 0; height:auto; } .cs-28 .box .bottom-cta .btn>span{ font-size:16px; padding:30px 20px; } .cs-28 .box .bottom-cta .btn>span svg{ width:22px; } } .cs-29{ padding: 150px 0 150px; } .cs-29 .content{ display:flex; flex-direction:column; width:65%; justify-content:center; padding-left:100px; } .cs-29 .content .f-title{ font-size:50px; line-height:1.1; max-width:850px; } .cs-29 .content .f-title .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; } .cs-29 .content .f-title .sm{ font-size:30px; margin-top:20px; } .cs-29 .img{ display:flex; flex-direction:column; width:35%; justify-content:center; align-items:center; } .cs-29 .img img{ animation:float 5s ease-in-out infinite; } @media (max-width: 1359px) { .cs-29 .content{ padding-left:60px; } } @media (max-width: 1019px) { .cs-29 .content .f-title{ font-size:40px; } .cs-29 .content .f-title .sm{ font-size:20px; } } @media (max-width: 619px) { .cs-29{ padding:0 0 100px; } .cs-29 .content{ width:100%; padding:60px 0; } .cs-29 .content .f-title{ font-size:30px; } .cs-29 .content .f-title .sm{ font-size:18px; } .cs-29 .img{ width:100%; } } .cs-30{ padding:200px 0; background:#fff; color:var(--dark); position:relative; } .cs-30 .container{ max-width:1200px; z-index:2; } .cs-30 .title{ text-align:center; } .cs-30 .title h2{ font-size:55px; margin-bottom:30px; position:relative; } .cs-30 .title h2 .outline{ font-size:60px; -webkit-text-stroke:1px var(--dark); color:transparent; display:block; margin-bottom:15px; } .cs-30 .content{ } .cs-30 .faq .item{ } .cs-30 .faq .item+.item{ border-top:3px solid #00000010; } .cs-30 .faq .t-item{ padding:50px 100px 50px 30px; cursor:pointer; position:relative; transition: all .25s ease-in-out; } .cs-30 .faq .t-item h3{ font-size:25px; line-height:1.1; transition: all .25s ease-in-out; } .cs-30 .faq .t-item:hover h3{ color:var(--main); } .cs-30 .faq .t-item .icn{ position:absolute; top:50%; right:30px; margin-top:-11px; display:block; width:22px; height:22px; background:url(../images/icn/plus.svg) 0 0 no-repeat; background-size:22px 22px; transition:all 0.4s ease; } .cs-30 .faq .t-item.open .icn{ background-image:url(../images/icn/minus.svg); transform:rotate(180deg); } .cs-30 .faq .c-item{ height:0; overflow:hidden; transition:all 0.4s ease; } .cs-30 .faq .c-item.open{ } .cs-30 .faq .c-item>div{ padding:0 30px 50px; } .cs-30 .faq .c-item p+p{ margin-top:15px; } .cs-30 .faq .c-item ul{ padding-left:20px; margin-top:30px; } .cs-30 .faq .c-item li{ padding:10px 0; font-weight:700; line-height:1.1; list-style:disc; color:var(--main); } .cs-30 .faq .c-item li>span{ color:var(--dark); } .cs-30 .img-1{ width:360px; position:absolute; right:0; top:-100px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-30 .img-2{ width:210px; position:absolute; left:0; bottom:70px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 1679px) { .cs-30 .img-2{ display:none; } } @media (max-width: 1019px) { .cs-30 .faq .t-item h3{ font-size:20px; } } @media (max-width: 619px) { .cs-30{ padding:150px 0 100px; } .cs-30 .title h2{ font-size:35px; } .cs-30 .title h2 .outline{ font-size:25px; } .cs-30 .img-1{ width:300px; } .cs-30 .faq .t-item{ padding:40px 50px 40px 0;} .cs-30 .faq .t-item h3{ font-size:18px; } .cs-30 .faq .t-item .icn{ right:10px; } } .cs-31{ padding:100px 0; text-align:center; } .cs-31 .content{ display:flex; flex-direction:column; width:37%; justify-content:center; align-items:center; } .cs-31 .f-title{ font-size:50px; line-height:1.1; } .cs-31 .f-title .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; } .cs-31 .f-title .sm{ font-size:25px; margin-bottom:10px; display:block; } .cs-31 .img{ display:flex; flex-direction:column; width:26%; justify-content:center; align-items:center; padding:0 30px; } .cs-31 .img img{ animation:float 4s ease-in-out infinite; } @media (max-width: 1359px) { .cs-31 .f-title{ font-size:40px; } } @media (max-width: 1019px) { .cs-31 .container{ max-width:600px; } .cs-31 .content{ width:100%; } .cs-31 .img{ width:100%; padding:60px 30px; } } @media (max-width: 619px) { .cs-31 .f-title{ font-size:30px; } .cs-31 .f-title .sm{ font-size:20px; } .cs-31 .img img{ max-width:70%; } } .cs-32{ padding:150px 0; text-align:center; } .cs-32 .container{ max-width:1400px; z-index:2; } .cs-32 .content{ max-width:1000px; margin:0 auto 60px; } .cs-32 h2{ font-size:40px; line-height:1.1; margin-bottom:30px; } .cs-32 h2 .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; display:block; margin-bottom:10px; } .cs-32 .content p+p{ margin-top:15px; } .cs-32 .items .wrap{ margin:0 -30px; } .cs-32 .item{ display:flex; flex-direction:column; width:25%; align-items:center; padding:30px; } .cs-32 .item img{ width:90px; margin:0 auto 30px; } .cs-32 .item h3{ font-size:22px; font-weight:700; line-height:1.3; text-transform:none; margin-bottom:15px; } @media (max-width: 1019px) { .cs-32 .item{ width:50%; } } @media (max-width: 619px) { .cs-32{ padding:100px 0; } .cs-32 h2{ font-size:30px; } .cs-32 .item{ width:100%; } } .cs-33{ padding:200px 0 0; background:#fff; color:var(--dark); } .cs-33 .wrap{ justify-content:center; margin-top:-200px; } .cs-33 .content{ display:flex; flex-direction:column; width:550px; padding:300px 0 100px; margin-right:-10vw; } .cs-33 .content .f-title{ font-size:70px; line-height:1.1; } .cs-33 .cta{ margin-top:30px; } .cs-33 .btn{ margin:10px; max-width:380px; text-align:left; } .cs-33 .btn>span{ font-size:20px; text-transform:none; padding:20px 60px; } .cs-33 .btn>span svg{ height:50px; width:auto; margin:0 20px 0 0; color:var(--main); } .cs-33 .btn:hover>span svg{ color:var(--dark); } .cs-33 .btn>span svg .bulle { fill: var(--dark); } .cs-33 .btn .dot{ color:var(--light); } .cs-33 .btn:hover .dot{ color:var(--main); } .cs-33 .img{ display:flex; flex-direction:column; width:calc(100% - 550px); justify-content:flex-end; align-items:flex-end; } @media (max-width: 1359px) { .cs-33{ padding:150px 0 0; } } @media (max-width: 1019px) { .cs-33 .wrap{ margin:0; } .cs-33 .content{ width:100%; max-width:550px; padding:100px 0; margin:0; } .cs-33 .img{ width:100%; } } @media (max-width: 619px) { .cs-33{ padding:100px 0 0; } .cs-33 .content{ padding:60px 0; } .cs-33 .content .f-title{ font-size:40px; } .cs-33 .cta{ margin-top:30px; } .cs-33 .btn>span{ font-size:16px; padding:20px 40px; } .cs-33 .btn>span svg{ height:40px; } } .cs-34{ padding:200px 0 300px; position:relative; overflow:hidden; } .cs-34 .content{ display:flex; flex-direction:column; width:50%; justify-content:center; } .cs-34 .content>div{ max-width:650px; } .cs-34 h2{ font-size:56px; margin-bottom:30px; } .cs-34 h2 .outline{ font-size:90px; -webkit-text-stroke:0.5px #ffffff; color:transparent; display:block; } .cs-34 .slider-offset{ display:flex; flex-direction:column; width:calc(50% + 20vw); justify-content:center; margin-right:-20vw; } .cs-34 .outer-slider{ padding-left:5vw; } .cs-34 .inner{ padding:50px 40px; min-height:350px; margin-right:30px; background:#fff; color:var(--dark); } .cs-34 .inner .f-title{ font-size:25px; line-height:1.1; padding:0 10px 30px; border-bottom:3px solid #00000010; margin-bottom:30px; } .cs-34 .inner .f-title.sm{ font-size:22px; } .cs-34 .inner .stat{ display:flex; flex-direction:column; width:50%; align-items:center; padding:0 30px; text-align:center; } .cs-34 .inner .num{ font-size:40px; font-weight:900; -webkit-text-stroke:1px var(--main); color:transparent; margin-bottom:10px; } .cs-34 .inner .desc{ font-weight:800; } .cs-34 .bx-controls a{ display:flex; justify-content:center; align-items:center; height:100px; width:100px; background:var(--main); position:absolute; top:50%; margin-top:-50px; color:var(--dark); } .cs-34 .bx-controls a svg{ width:28px; } .cs-34 .bx-controls a svg polygon { fill: #fff;} .cs-34 .bx-controls a.bx-prev{ display:none; } .cs-34 .bx-controls a.bx-next{ right:30px; } .cs-34 .bx-controls a.disabled{ opacity:0; } .cs-34 .bx-controls a:hover{ background:var(--dark); color:#fff; } .cs-34 .img-1{ width:380px; position:absolute; left:-50px; bottom:0; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1359px) { .cs-34 h2{ font-size:50px; } .cs-34 .inner{ padding:50px 30px; } } @media (max-width: 1279px) { .cs-34 .content{ width:100%; } .cs-34 .slider-offset{ width:100%; margin:60px 0 0; } .cs-34 .outer-slider{ padding-left:0; position:relative; } .cs-34 .bx-controls a.bx-next{ right:0; } } @media (max-width: 619px) { .cs-34{ padding:100px 0 200px; } .cs-34 h2{ font-size:30px; } .cs-34 h2 .outline{ font-size:50px; } .cs-34 .inner{ margin-right:0; } .cs-34 .bx-controls a.bx-next{ right:50%; bottom:-50px; top:auto; margin:0 -50px 0 0; } .cs-34 .img-1{ width:240px; } } .cs-35 { padding:50px 0 100px; } .cs-35 .content{ display:flex; flex-direction:column; width:100%; justify-content:center; align-items:center; } .cs-35 h2{ font-size:50px; text-align:center; max-width: 650px; line-height: 1.1; } .cs-35 h2 .outline{ font-size:50px; -webkit-text-stroke:0.5px #ffffff; color:transparent; display:block; } .cs-35 .cta{ margin:50px 0 40px; } .cs-35 .outer-mag{ width:max-content; margin:-10px; } .cs-35 .mag>span{ display:flex; justify-content:center; align-items:center; height:90px; width:90px; outline:3px solid #ffffff10; outline-offset:-3px; margin:10px; color:#fff;transition:transform .15s linear;overflow:hidden;position:relative; } .cs-35 .mag>span svg polygon { fill: var(--light); } .cs-35 .mag:hover>span{ } .cs-35 .mag>span:before{content:"";border-radius:200px;position:absolute;top:50%;left:50%;width:150%;height:150%;background:var(--main);transform:scale(0) translate(-50%,-50%);transform-origin:center bottom;transition:transform .4s linear} .cs-35 .mag:hover>span:before{transform:scale(1) translate(-50%,-50%)} /*.cs-35 .mag svg{ width:30px; transform:rotate(90deg); }*/ .cs-35 .mag svg{ height:30px; } .cs-35 .mag:hover svg{ animation:down 1s ease-in-out forwards; } .cs-35 .img{ display:flex; flex-direction:column; width:50%; } .cs-35 .img img{ transform:translateY(40px); } @media (max-width: 1019px) { .cs-35 h2{ font-size:50px; } } @media (max-width: 619px) { .cs-35{ padding-bottom:30px; } .cs-35 .content{ width:100%; text-align:center; } .cs-35 h2 .outline{ font-size:40px; } .cs-35 .outer-mag{ margin:-10px auto; } } .cs-real-list{ padding:150px 0; background:#fff; position:relative; } .cs-real-list .container{ max-width:1480px; } .cs-real-list .real-filters .btns{display:flex;justify-content:space-between;margin:0 55px 30px} .cs-real-list .real-filters .btns .btn-filter{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;background:var(--dark);padding:15px 10px;border-radius:50px;text-align:center;margin:5px;font-size:12px;cursor:pointer;} .cs-real-list .real-filters .btns .btn-filter:hover{ background:var(--mainhvr); } .cs-real-list .real-filters .btns .btn-filter.active{ background:var(--main); color:var(--dark); } .cs-real-list .real-filters .dropdown{display:none} .stories>main>.pictures .show{display:block} .cs-real-list .items>.wrap{ margin:0 -30px; } .cs-real-list .item{ display:flex; flex-direction:column; align-items:center; width:50%; padding:30px; } .cs-real-list .item.hidden{ display:none; } .cs-real-list .item a{ display:flex; justify-content:center; align-items:center; background:var(--dark); overflow:hidden; position:relative; } .cs-real-list .item .img{ width:100%; opacity:0.4; transition: all .25s ease-in-out; } .cs-real-list .item a:hover .img{ opacity:0.2; transform:scale(1.1); } .cs-real-list .item .logo{ position:absolute; top:50%; left:50%; margin:-60px 0 0 -190px; transition: all .25s ease-in-out; } .cs-real-list .item a:hover .logo{ opacity:0; } .cs-real-list .item .hover{ position:absolute; top:50%; left:50%; margin:-75px 0 0 -75px; opacity:0; transition: all .25s ease-in-out; } .cs-real-list .item a:hover .hover{ opacity:1; } .cs-real-list .item .btn-circle{ display:flex; justify-content:center; align-items:center; height:150px; width:150px; position:relative; color:var(--main); } .cs-real-list .item .btn-circle:before{ content:""; display:block; height:150px; width:150px; background:url(../images/icn/btn-site-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:paused; } .cs-real-list .item a:hover .btn-circle:before{ animation-play-state:running; } .cs-real-list .item .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-real-list .item a:hover .btn-circle svg{ transform:scale(1.2); } .cs-real-list .img-1{ width:400px; position:absolute; right:0; top:-100px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1279px) { .cs-real-list .items>.wrap{ margin:0 -15px; } .cs-real-list .item{ padding:15px; } .cs-real-list .item .logo{ width:280px; margin:-44px 0 0 -140px; } } @media (max-width: 1019px) { .cs-real-list .real-filters .btns{display:none} .cs-real-list .real-filters .dropdown{display:block;margin-bottom:35px;position:relative} .cs-real-list .real-filters .dropdown .dropbtn{align-items:center;background:var(--main);border:none;color:#fff;cursor:pointer;display:flex;font-size:14px;justify-content:center;padding:15px;position:relative;text-transform:uppercase;width:100%} .cs-real-list .real-filters .dropdown .dropbtn img{margin-right:25px;width:22px} .cs-real-list .real-filters .dropdown .dropbtn:focus,.cs-real-list .real-filters .dropdown .dropbtn:hover{background-color:var(--mainhvr)} .cs-real-list .real-filters .dropdown .dropdown-content{background-color:#fff;box-shadow:0 8px 16px 0 rgba(0,0,0,.1);max-height:0;overflow:hidden;transition:all .5s ease;z-index:1} .cs-real-list .real-filters .dropdown .dropdown-content button{background:#fff;border-bottom:2px solid var(--light);border-right:none;color:var(--grey);display:block;padding:21px 16px;position:relative} .cs-real-list .real-filters .dropdown .dropdown-content button:before{background:var(--main);bottom:-2px;content:"";height:calc(100% + 4px);left:0;opacity:0;position:absolute;top:-2px;transition:all .5s ease;width:7px} .cs-real-list .real-filters .dropdown .dropdown-content button.active{color:var(--dark);font-weight:900} .cs-real-list .real-filters .dropdown .dropdown-content button.active:before{opacity:1} .cs-real-list .real-filters .dropdown .dropdown-content button:hover:before{background:var(--main);bottom:-2px;content:"";height:calc(100% + 4px);left:0;opacity:1;position:absolute;top:-2px;transition:all .5s ease;width:7px} .cs-real-list .real-filters .dropdown .dropdown-content.show{max-height:700px} } @media (max-width: 819px) { .cs-real-list .item{ width:100%; } } @media (max-width: 619px) { .cs-real-list{ padding:100px 0; } .cs-real-list .item .logo{ width:190px; margin:-30px 0 0 -95px; } .cs-real-list .item a:hover .logo{ opacity:1; } .cs-real-list .item .hover{ display:none; } .cs-real-list .img-1{ width:260px; } } .cs-36{ padding:50px 0; } .cs-36.pb{ padding:150px 0 150px; } .cs-36 .container{ max-width:1300px; } .cs-36 .content{ display:flex; flex-direction:column; width:60%; justify-content:center; padding-right:100px; } .cs-36 .content h2{ font-size:50px; line-height:1.1; margin-bottom:30px; } .cs-36 .content .cta{ margin-top:10px; } .cs-36 .content .btn{ margin:20px 20px 0 0; } .cs-36 .content .btn>span{ color:#fff; } .cs-36 .content .btn>span>span{ text-align:left; font-size: 14px; text-transform: uppercase; } .cs-36 .content .btn .lg{ font-size:25px; display:block; } .cs-36 .content .btn.scroll-to>span svg{ transform:rotate(90deg); } .cs-36 .content .btn.scroll-to:hover>span svg{ margin: 0 5px 0 20px; } .cs-36 .img{ display:flex; flex-direction:column; width:40%; justify-content:center; align-items:center; } .cs-36 .img.floating img{ animation:float 5s ease-in-out infinite; } @media (max-width: 1279px) { .cs-36 .content{ width:65%; padding-right:60px; } .cs-36 .img{ width:35%; } } @media (max-width: 1019px) { .cs-36 .content{ width:100%; padding:0 0 60px; } .cs-36 .img{ display:none; } } @media (max-width: 619px) { .cs-36.pb{ padding:50px 0; } .cs-36 .content h2{ font-size:40px; } .cs-36 .content h2.md{ font-size:25px; } } .cs-37{ padding:100px 0 150px; position:relative; overflow:hidden; } .cs-37 .outer-box{ padding:80px; background:#ffffff10; } .cs-37 .outer-box+.outer-box{ margin-top:100px; } .cs-37 .outer-box>div{ position:relative; z-index:3; } .cs-37 .content{ display:flex; flex-direction:column; width:calc(100% - 500px); padding:0 100px 50px 0; } .cs-37 .content h3{ font-size:35px; margin-bottom:30px; } .cs-37 .box{ display:flex; flex-direction:column; width:500px; position:relative; } .cs-37 .box>div{ padding:40px; background:#fff; color:var(--dark); position:relative; z-index:2; } .cs-37 .box h4{ font-size:22px; } .cs-37 .box ul{ margin:30px 0 0 30px; } .cs-37 .box li{ font-weight:700; color:var(--main); list-style:disc; } .cs-37 .box li+li{ margin-top:15px; } .cs-37 .box li>span{ color:var(--dark); } .cs-37 .box li .sm{ font-size:14px; } .cs-37 .box .img-1{ width:140px; position:absolute; right:-70px; top:-30px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-37 .box .img-2{ width:220px; position:absolute; left:-80px; top:-40px; z-index:1; animation:float 4s ease-in-out infinite; } .cs-37 .middle h4{ font-size:30px; margin:30px 0; } .cs-37 .faq .item:first-child{ border-top:3px solid #ffffff10; } .cs-37 .faq .item{ border-bottom:3px solid #ffffff10; } .cs-37 .faq .t-item{ padding:30px 100px 30px 20px; cursor:pointer; position:relative; transition: all .25s ease-in-out; } .cs-37 .faq .t-item h5{ font-size:20px; line-height:1.1; display:flex; align-items:center; transition: all .25s ease-in-out; } .cs-37 .faq .t-item:hover h5{ color:var(--main); } .cs-37 .faq .t-item h5 .num{ font-size:35px; display:block; width:120px; -webkit-text-stroke:0.5px #ffffff; color:transparent; opacity:0.2; } .cs-37 .faq .t-item h5 .txt{ width:calc(100% - 120px); } .cs-37 .faq .t-item .icn{ position:absolute; top:50%; right:30px; margin-top:-11px; display:block; width:22px; height:22px; background:url(../images/icn/plus.svg) 0 0 no-repeat; background-size:22px 22px; filter: brightness(100); transition:all 0.4s ease; } .cs-37 .faq .t-item.open .icn{ background-image:url(../images/icn/minus.svg); transform:rotate(180deg); } .cs-37 .faq .c-item{ height:0; overflow:hidden; transition:all 0.4s ease; } .cs-37 .faq .c-item.open{ } .cs-37 .faq .c-item>div{ padding:0 30px 50px; } .cs-37 .faq .c-item p+p{ margin-top:15px; } .cs-37 .bottom{ padding:80px 0 30px; } .cs-37 .bottom .wrap{ justify-content:center; align-items:center; flex-flow:row; } .cs-37 .bottom .num{ display:flex; flex-direction:column; font-size:60px; font-weight:900; color:var(--main); } .cs-37 .bottom .cta{ /*max-width:650px; margin:0 auto;*/ text-align:center; } .cs-37 .bottom .txt{ display:flex; flex-direction:column; max-width:700px; padding-left:20px; font-size:20px; line-height:1.3; font-weight:800; font-style:italic; } .cs-37 .bottom .btn:hover>span{ color:var(--dark); } .cs-37 .bottom .btn>span>span{ margin-right:20px; } .cs-37 .bottom .btn>span svg{ width:28px; } .cs-37 .img-3{ width:330px; position:absolute; left:0; top:40%; z-index:1; animation:float 5s ease-in-out infinite; } .cs-37 .img-4{ width:400px; position:absolute; right:0; bottom:100px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 1679px) { .cs-37 .img-3{ left:-130px;} .cs-37 .img-4{ bottom:30px; } } @media (max-width: 1279px) { .cs-37 .content{ width:100%; padding:0 0 50px 0; } .cs-37 .box{ max-width:500px; padding-bottom:30px; } .cs-37 .box .img-1{ right:-70px; top:-10px; } .cs-37 .img-3{ display:none; } .cs-37 .img-4{ right:-150px; bottom:0; } } @media (max-width: 1019px) { .cs-37 .faq .t-item h5 .num{ width:80px; } .cs-37 .faq .t-item h5 .txt{ width:calc(100% - 80px); } } @media (max-width: 619px) { .cs-37 .outer-box{ padding:60px 30px; } .cs-37 .outer-box+.outer-box{ margin-top:30px; } .cs-37 .content h3{ font-size:25px; } .cs-37 .box>div{ padding:40px 20px; } .cs-37 .box .img-1{ right:-50px; top:-10px; } .cs-37 .box .img-2{ width:160px; left:-50px; top:-20px; } .cs-37 .middle h4{ font-size:25px; } .cs-37 .faq .t-item{ padding:30px 50px 30px 0; } .cs-37 .faq .t-item h5{ font-size:12px; } .cs-37 .faq .t-item h5 .num{ font-size:25px; width:50px; } .cs-37 .faq .t-item h5 .txt{ width:calc(100% - 50px); } .cs-37 .faq .t-item .icn{ right:10px; } .cs-37 .faq .c-item>div{ font-size:12px; padding:0 10px 30px; } .cs-37 .bottom .wrap{ display:block; text-align:center; } .cs-37 .bottom .num{ font-size:50px; } .cs-37 .bottom .txt{ padding:15px 0 0; font-size:16px; } .cs-37 .bottom .btn>span{ padding:20px 40px; font-size:14px; } .cs-37 .bottom .btn>span>span{ margin-right:10px; } .cs-37 .bottom .btn>span svg{ width:22px; } .cs-37 .img-4{ width:250px; right:-100px; bottom:0; } } .cs-38{ padding:150px 0 0; background:#fff; color:var(--dark); } .cs-38 .wrap{ justify-content:center; margin-top:-200px; } .cs-38 .content{ display:flex; flex-direction:column; width:55%; padding:300px 100px 100px 0; } .cs-38 .content .note{ font-size:25px; font-family:'Caveat Brush', cursive; padding:0 0 15px 50px; margin-bottom:5px; background:url(../images/note-arrow-2.png) left bottom / 42px 34px no-repeat } .cs-38 .content h2{ font-size:50px; line-height:1.1; margin-bottom:30px; } .cs-38 .content h2.md{ font-size:40px; } .cs-38 .content h2 .sm{ font-size:25px; display:block; margin-top:10px; } .cs-38 .content .f-title.over{ font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--main); letter-spacing: .12em; } .cs-38 .content p+p{ margin-top:15px; } .cs-38 .cta{ margin-top:30px; } .cs-38 .img{ display:flex; flex-direction:column; width:45%; justify-content:flex-end; align-items:flex-end; } @media (max-width: 1679px) { .cs-38 .content h2{ font-size:40px; } } @media (max-width: 1359px) { .cs-38 .content{ padding-right:60px; } } @media (max-width: 1019px) { .cs-38 .wrap{ margin:0; } .cs-38 .content{ width:100%; max-width:650px; padding:100px 0; margin:0; } .cs-38 .img{ width:100%; display:none; } } @media (max-width: 619px) { .cs-38{ padding:100px 0 0; } .cs-38 .content{ padding:60px 0; } .cs-38 .content .note{ font-size:22px; } .cs-38 .content h2{ font-size:35px; } .cs-38 .content h2.md{ font-size:35px; } .cs-38 .content h2 .sm{ font-size:20px; } .cs-38 .content .f-title.over{ font-size:15px; } } .cs-39{ padding:200px 0; background:var(--light); color:var(--dark); } .cs-39 .container{ max-width:1300px; } .cs-39.wide .container{ max-width:1560px; } .cs-39 h2{ font-size:90px; text-align:center; margin-bottom:30px; font-family: 'Modius', sans-serif; } .cs-39 h2 .outline{ -webkit-text-stroke:1.5px var(--dark); color:transparent; } .cs-39 .img{ display:flex; flex-direction:column; width:460px; justify-content:center; align-items:center; padding:0 30px; } .cs-39.wide .img{ width:760px; } .cs-39 .content{ display:flex; flex-direction:column; width:100%; justify-content:center; } .cs-39.wide .content{ width:calc(100% - 760px); } .cs-39 .faq { margin-top: 80px; } .cs-39 .faq .item{ } .cs-39 .faq .item+.item{ border-top:3px solid #00000010; } .cs-39 .faq .t-item{ padding:50px 100px 50px 30px; cursor:pointer; position:relative; transition: all .25s ease-in-out; } .cs-39 .faq .t-item h3{ font-size:25px; line-height:1.1; transition: all .25s ease-in-out; } .cs-39 .faq .t-item:hover h3{ color:var(--main); } .cs-39 .faq .t-item .icn{ position:absolute; top:50%; right:30px; margin-top:-11px; display:block; width:22px; height:22px; background:url(../images/icn/plus.svg) 0 0 no-repeat; background-size:22px 22px; transition:all 0.4s ease; } .cs-39 .faq .t-item.open .icn{ background-image:url(../images/icn/minus.svg); transform:rotate(180deg); } .cs-39 .faq .c-item{ height:0; overflow:hidden; transition:all 0.4s ease; } .cs-39 .faq .c-item.open{ } .cs-39 .faq .c-item>div{ padding:0 30px 50px; } @media (max-width: 1679px) { .cs-39 .img{ width:360px; padding:60px 30px; } .cs-39.wide .img{ width:560px; padding:60px 30px; } .cs-39.wide .content{ width:calc(100% - 560px); } } @media (max-width: 1019px) { .cs-39 h2{ font-size:70px; } .cs-39 .content{ padding:0; } .cs-39.wide .img{ width:100%; padding:0 10vw 30px; } .cs-39.wide .content{ width:100%; } } @media (max-width: 619px) { .cs-39{ padding:100px 0; } .cs-39 h2{ font-size:42px; } .cs-39 .img{ width:100%; padding:0 20vw 30px; } .cs-39 .content{ width:100%; } .cs-39 .faq .t-item{ padding:40px 50px 40px 0;} .cs-39 .faq .t-item h3{ font-size:18px; } .cs-39 .faq .t-item .icn{ right:10px; } } @media (max-width: 400px) { .cs-39 h2{ font-size:34px; } } .cs-40{ padding:200px 0; background:var(--main); color:var(--dark); } .cs-40 .content{ display:flex; flex-direction:column; width:calc(100% - 460px); justify-content:center; } .cs-40 .content>div{ max-width:750px; } .cs-40 .content h2{ font-size:50px; margin-bottom:30px; } .cs-40 .content h2 .sm{ font-size:25px; display:block; margin-bottom:10px; } .cs-40 .content p{ font-weight:700; } .cs-40 .cta{ display:flex; flex-direction:column; width:460px; justify-content:center; align-items:flex-end; } .cs-40 .btn{ margin:10px; max-width:400px; text-align:left; } .cs-40 .btn>span svg{ height:50px; width:auto; margin:0 20px 0 0; } .cs-40 .btn .white{ color:#fff; } .cs-40 .btn:hover .white{ color:var(--dark); } @media (max-width: 1279px) { .cs-40 .content{ width:100%; align-items:center; text-align:center; padding-bottom:60px; } .cs-40 .cta{ width:100%; align-items:center; } } @media (max-width: 619px) { .cs-40{ padding:100px 0; } .cs-40 .content h2{ font-size:40px; } .cs-40 .content h2 .sm{ font-size:20px; } .cs-40 .btn>span{ font-size:16px; padding:20px 40px; } .cs-40 .btn>span svg{ height:40px; } } .cs-41{ padding:200px 0; position:relative; overflow:hidden; } .cs-41 .container{ max-width:1200px; } .cs-41 .title{ } .cs-41 h2{ font-size:70px; padding-bottom:100px; } .cs-41 h2 .off-left{ padding-left:0; margin-top:10px; } .cs-41 h2 .outline{ -webkit-text-stroke:1px #fff; color:transparent; padding-left:250px; background:url(../images/shape-7.png) left center / 180px 50px no-repeat; } .cs-41 .faq .item:first-child{ border-top:3px solid #ffffff10; } .cs-41 .faq .item{ border-bottom:3px solid #ffffff10; } .cs-41 .faq .t-item{ padding:50px 100px 50px 30px; cursor:pointer; position:relative; transition: all .25s ease-in-out; } .cs-41 .faq .t-item h3{ font-size:20px; line-height:1.1; transition: all .25s ease-in-out; } .cs-41 .faq .t-item:hover h3{ color:var(--main); } .cs-41 .faq .t-item .icn{ position:absolute; top:50%; right:30px; margin-top:-11px; display:block; width:22px; height:22px; background:url(../images/icn/plus.svg) 0 0 no-repeat; background-size:22px 22px; filter: brightness(100); transition:all 0.4s ease; } .cs-41 .faq .t-item.open .icn{ background-image:url(../images/icn/minus.svg); transform:rotate(180deg); } .cs-41 .faq .c-item{ height:0; overflow:hidden; transition:all 0.4s ease; } .cs-41 .faq .c-item.open{ } .cs-41 .faq .c-item>div{ padding:0 30px 50px; } .cs-41 .img-1{ width:210px; position:absolute; left:-30px; top:40%; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1679px) { .cs-41 .img-1{ display:none; } } @media (max-width: 1279px) { .cs-41 h2{ font-size:80px; } } @media (max-width: 1019px) { .cs-41 h2{ font-size:70px; } .cs-41 h2 .outline{ padding-left:200px; } } @media (max-width: 619px) { .cs-41{ padding:100px 0; } .cs-41 h2{ font-size:35px; } .cs-41 h2 .off-left{ padding-left:0; } .cs-41 h2 .outline{ -webkit-text-stroke:1px #ff0.5; padding-left:80px; background-size:60px 25px; } .cs-41 .faq .t-item{ padding:40px 50px 40px 0;} .cs-41 .faq .t-item h3{ font-size:16px; } .cs-41 .faq .t-item .icn{ right:10px; } } .cs-42{ padding:100px 0 200px; } .cs-42 .container{ max-width:1300px; } .cs-42 .content{ display:flex; flex-direction:column; width:calc(100% - 300px); justify-content:center; } .cs-42 .content>div{ max-width:800px; } .cs-42 .content h2{ font-size:60px; margin-bottom:30px; } .cs-42 .content h2 .sm{ font-size:25px; display:block; margin-bottom:10px; } .cs-42 .content h2 .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; } .cs-42 .content p{ max-width:650px; } .cs-42 .cta{ display:flex; flex-direction:column; width:300px; justify-content:center; align-items:flex-end; } .cs-42 .cta .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; color:var(--main); } .cs-42 .cta .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-test-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-42 .cta a:hover .btn-circle:before{ animation-play-state:paused; } .cs-42 .cta .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-42 .cta .btn-circle svg polygon { fill: var(--main); } .cs-42 .cta a:hover .btn-circle svg{ transform:scale(1.2); } @media (max-width: 1279px) { .cs-42 .content{ width:100%; align-items:center; text-align:center; padding-bottom:60px; } .cs-42 .cta{ width:100%; align-items:center; } } @media (max-width: 619px) { .cs-42{ padding:100px 0; } .cs-42 .content h2{ font-size:40px; } .cs-42 .content h2 .sm{ font-size:16px; } } .cs-43{ padding:250px 0 150px; background:#fff; color:var(--dark); position:relative; } .cs-43 .title h2{ font-size:60px; text-align:center; } .cs-43 .title h2>span{ white-space:nowrap; padding-bottom:20px; background:url(../images/line-3.png) center bottom / 430px 35px no-repeat; position:relative; } .cs-43 .logos{ margin-top:100px; display:flex; flex-flow:row wrap; justify-content:center; } .cs-43 .logos>div{ display:flex; flex-direction:column; align-items:center; width:25%; padding:30px 20px; } .cs-43 .logos a{ filter:grayscale(1); } .cs-43 .logos a:hover{ filter:grayscale(0); } .cs-43 .logos img{ width:300px; } .cs-43 .img-1{ width:290px; position:absolute; right:-60px; top:-150px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1279px) { .cs-43{ padding:150px 0; } .cs-43 .img-1{ display:none; } } @media (max-width: 619px) { .cs-43{ padding:100px 0; } .cs-43 .title h2{ font-size:40px; } .cs-43 .title h2>span{ background-size:100% auto; } .cs-43 .logos>div{ width:50%; padding:20px; } } .cs-44{ padding:150px 0 0; } .cs-44 .img{ display:flex; flex-direction:column; width:50%; justify-content:flex-end; } .cs-44 .content{ display:flex; flex-direction:column; width:50%; justify-content:center; padding:60px 30px 60px 100px; } .cs-44 .content>div{ max-width:700px; } .cs-44 .content .f-title{ font-size:50px; margin-bottom:30px; } .cs-44 .content p{ max-width:550px; } .cs-44 .content .outer-slider{ margin-top:30px; } .cs-44 .content .outer-slider .pager-col{ display:flex; flex-direction:column; width:150px; } .cs-44 .content .outer-slider .pager-col .circle{ height:120px; width:120px; border-radius:50%; background:#ffffff10; } .cs-44 .content .outer-slider .pager-col svg{position:relative;width:120px;height:120px;transform:rotate(90deg)} .cs-44 .content .outer-slider .pager-col svg circle{width:100%;height:100%;fill:none;stroke:#191919;stroke-width:3;stroke-linecap:round;transform:translate(5px,5px)} .cs-44 .content .outer-slider .pager-col svg circle:nth-child(2){stroke-dashoffset:calc(350 - (350 * 10) / 100);stroke:var(--main);stroke-dasharray:350;transition:all .25s ease-in-out} .cs-44 .content .outer-slider .pager-col .percent{position:relative;width:120px;height:120px;border-radius:50%} .cs-44 .content .outer-slider .pager-col .percent .number{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:50%} .cs-44 .content .outer-slider .pager-col .percent .number .f-title{font-size:40px;-webkit-text-stroke:1px #fff;color:transparent;margin:0} .cs-44 .content .outer-slider .pager-col .circle{ height:120px; width:120px; border-radius:50%; background:#ffffff10; } .cs-44 .content .outer-slider .slider-col{ display:flex; flex-direction:column; width:calc(100% - 150px); justify-content:center; } .cs-44 .content .outer-slider .inner{ font-size:22px; font-weight:800; text-transform:uppercase; max-width:500px; } @media (max-width: 1679px) { .cs-44 .img{ width:45%; } .cs-44 .content{ width:55%; } } @media (max-width: 1279px) { .cs-44 .img{ width:100%; padding-right:8vw; } .cs-44 .content{ width:100%; align-items:center; padding:0 30px 100px; } } @media (max-width: 619px) { .cs-44 .content .f-title{ font-size:35px; } } .cs-45{ padding:200px 0; position:relative; overflow:hidden; } .cs-45 .container{ max-width:1200px; z-index:2; } .cs-45 .title{ padding-bottom:100px; } .cs-45 h2{ font-size:90px; padding-bottom:100px; font-family: 'Modius', sans-serif; } .cs-45 h2 .off-left{ padding-left:0; margin-top:10px; } .cs-45 h2 .outline{ -webkit-text-stroke:1px #fff; color:transparent; padding-left:250px; background:url(../images/shape-7.png) left center / 180px 50px no-repeat; } .cs-45 .title .wrap{ justify-content:space-between; align-items:center; } .cs-45 .title p{ font-size:20px; font-weight:700; max-width:600px; width:calc(100% - 250px); } .cs-45 .title .cta{ display:flex; flex-direction:column; width:180px; justify-content:center; align-items:flex-end; } .cs-45 .title .cta .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; color:var(--main); } .cs-45 .title .cta .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-site-quoi-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-45 .title .cta a:hover .btn-circle:before{ animation-play-state:paused; } .cs-45 .title .cta .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-45 .title .cta a:hover .btn-circle svg{ transform: scale(1.2); } .cs-45 .title .cta .btn-circle svg polygon { fill: var(--main); } .cs-45 .faq .item:first-child{ border-top:3px solid #ffffff10; } .cs-45 .faq .item{ border-bottom:3px solid #ffffff10; } .cs-45 .faq .t-item{ padding:30px 100px 30px 20px; cursor:pointer; position:relative; transition: all .25s ease-in-out; } .cs-45 .faq .t-item h3{ font-size:20px; line-height:1.1; display:flex; align-items:center; transition: all .25s ease-in-out; } .cs-45 .faq .t-item:hover h3{ color:var(--main); } .cs-45 .faq .t-item h3 .num{ font-size:35px; display:block; width:120px; -webkit-text-stroke:0.5px #ffffff; color:transparent; opacity:0.2; } .cs-45 .faq .t-item h3 .icon{ width:50px; margin-right:30px; } .cs-45 .faq .t-item h3 .txt{ width:calc(100% - 200px); } .cs-45 .faq .t-item .icn{ position:absolute; top:50%; right:30px; margin-top:-11px; display:block; width:22px; height:22px; background:url(../images/icn/plus.svg) 0 0 no-repeat; background-size:22px 22px; filter: brightness(100); transition:all 0.4s ease; } .cs-45 .faq .t-item.open .icn{ background-image:url(../images/icn/minus.svg); transform:rotate(180deg); filter: invert(1); } .cs-45 .faq .c-item{ height:0; overflow:hidden; transition:all 0.4s ease; } .cs-45 .faq .c-item.open{ } .cs-45 .faq .c-item>div{ padding:0 30px 50px; } .cs-45 .faq .c-item p+p{ margin-top:15px; } .cs-45 .img-1{ width:250px; position:absolute; left:55%; top:200px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1679px) { .cs-45 .img-1{ display:none; } } @media (max-width: 1279px) { .cs-45 h2{ font-size:80px; } } @media (max-width: 1019px) { .cs-45 h2{ font-size:55px; } .cs-45 h2 .outline{ padding-left:200px; } .cs-45 .faq .t-item h3 .num{ width:80px; } .cs-45 .faq .t-item h3 .txt{ width:calc(100% - 160px); } } @media (max-width: 700px) { .cs-45 h2 { font-size: 40px; } } @media (max-width: 619px) { .cs-45{ padding:100px 0; } .cs-45 h2{ font-size:30px; padding-bottom:50px; } .cs-45 h2 .off-left{ padding-left:0; } .cs-45 h2 .outline{ -webkit-text-stroke:1px #ff0.5; padding-left:80px; background-size:60px 25px; } .cs-45 .title .wrap{ justify-content:center; } .cs-45 .title p{ font-size:16px; width:100%; margin-bottom:30px; } .cs-45 .title .cta{ justify-content:center; align-items:center; width:100%; } .cs-45 .faq .t-item{ padding:30px 50px 30px 0; } .cs-45 .faq .t-item h3{ font-size:12px; } .cs-45 .faq .t-item h3 .num{ font-size:25px; width:50px; } .cs-45 .faq .t-item h3 .icon{ width:30px; margin-right:15px; } .cs-45 .faq .t-item h3 .txt{ width:calc(100% - 95px); } .cs-45 .faq .t-item .icn{ right:10px; } .cs-45 .faq .c-item>div{ font-size:12px; padding:0 10px 30px; } } @media (max-width: 400px) { .cs-45 h2 { font-size: 24px; } } .cs-46{ padding:250px 0; background:url(../images/bg-video-experts.jpg) center center / cover no-repeat; } .cs-46 .container{ max-width:1200px; z-index:2; } .cs-46 .content{ display:flex; flex-direction:column; width:calc(100% - 250px); padding-right: 40px; } .cs-46 .content>div{ max-width:650px; } .cs-46 .content h2{ font-size:60px; margin-bottom:30px; font-family: 'Modius', sans-serif; } .cs-46 .content h2 .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; } .cs-46 .cta{ display:flex; flex-direction:column; width:180px; justify-content:center; align-items:flex-end; } .cs-46 .cta .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; color:var(--main); } .cs-46 .cta .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-equipe-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-46 .cta a:hover .btn-circle:before{ animation-play-state:paused; } .cs-46 .cta .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-46 .cta .btn-circle svg polygon { fill: var(--main); } .cs-46 .cta a:hover .btn-circle svg{ transform:scale(1.2); } @media (max-width: 750px) { .cs-46{ padding:150px 0; } .cs-46 .wrap{ justify-content:center; } .cs-46 .content{ font-size:18px; width:100%; margin-bottom:60px; text-align: center; padding: 0; } .cs-46 .content h2{ font-size:40px; } .cs-46 .cta{ justify-content:center; align-items:center; width:100%; } } .cs-47{ padding:200px 0; position:relative; overflow:hidden; } .cs-47 .container{ z-index:2; } .cs-47 .content{ max-width:950px; margin:0 auto 60px; text-align:center; } .cs-47 .content h2{ font-size:110px; margin-bottom:30px; font-family: 'Modius', sans-serif; } .cs-47 .content h2 .sm{ font-size:40px; color: #fff; display:block; } .cs-47 .outer-slider{ padding-left:20vw; margin-right:-50vw; position:relative; z-index:2; } .cs-47 .outer-slider .inner{ padding:30px; margin-right:30px; min-height:300px; background:#fff; color:var(--dark); } .cs-47 .outer-slider .inner .num{ font-size:40px; font-weight:900; -webkit-text-stroke:1px var(--main); color:transparent; text-align:right; margin-bottom:20px; } .cs-47 .outer-slider .inner .icon{ width:50px; } .cs-47 .outer-slider .inner h3{ font-size:18px; margin:10px 0; } .cs-47 .outer-slider .inner h3 .sm{ font-size:13px; font-weight:700; margin-bottom:5px; display:block; } .cs-47 .outer-slider .inner p{ font-size:15px; line-height:1.3; } .cs-47 .bx-controls{ display:flex; width:230px; margin:30px auto 0; justify-content:space-between; position:relative; z-index:2; } .cs-47 .bx-controls a{ display:flex; justify-content:center; align-items:center; height:100px; width:100px; border:3px solid #97979760; } .cs-47 .bx-controls a svg{ width:28px; } .cs-47 .bx-controls a svg polygon { fill: var(--light); } .cs-47 .bx-controls a.bx-prev{ transform:rotate(-180deg); } .cs-47 .bx-controls a.disabled{ opacity:0; } .cs-47 .bx-controls a:hover{ border-color:var(--main); background:var(--main); color:#fff; } .cs-47 .img-1{ width:420px; position:absolute; left:-50px; bottom:100px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1019px) { .cs-47 .content h2{ font-size:80px; } .cs-47 .content h2 .sm{ font-size:32px; } .cs-47 .outer-slider{ margin-right:-30vw; } } @media (max-width: 619px) { .cs-47{ padding:100px 0; } .cs-47 .content h2{ font-size:40px; } .cs-47 .content h2 .sm{ font-size:17px; font-weight: 500; margin-top: 6px; } .cs-47 .outer-slider{ padding-left:10vw; margin-right:-40vw; } .cs-47 .outer-slider .inner{ padding:30px 20px; min-height:300px; } .cs-47 .img-1{ width:300px; } } .cs-48{ padding:150px 0; } .cs-48 .content{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:flex-end; padding-right:60px; } .cs-48 .content>div{ max-width:700px; } .cs-48 .content h2{ font-size:50px; line-height:1.1; margin-bottom:30px; } .cs-48 .content h2 .outline{ -webkit-text-stroke:0.5px #ffffff; color:transparent; display:block; } .cs-48 .content .cta{ margin-top:40px; } .cs-48 .img{ display:flex; flex-direction:column; width:50%; justify-content:center; align-items:center; padding-right:60px; } .cs-48 .img a{ position:relative; } .cs-48 .img a .guide{ transition: all .25s ease-in-out; } .cs-48 .img a:hover .guide{ opacity:0.6; } .cs-48 .img .cta{ position:absolute; top:0; right:-60px; } .cs-48 .img .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; } .cs-48 .img .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-pdf-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-48 .img a:hover .btn-circle:before{ animation-play-state:paused; } .cs-48 .img .btn-circle .download{ width:30px; transition: all .25s ease-in-out; } .cs-48 .img a:hover .btn-circle .download{ transform:scale(1.2); } .cs-48 .img .note{ padding:20px 0 0 60px; background:url(../images/note-arrow-3.png) 0 center / 46px 32px no-repeat; max-width:330px; margin-left:30px; text-transform: uppercase; font-size: 16px; letter-spacing: .03em; line-height: 1.1; font-weight: 800; margin-top: 10px; } @media (max-width: 1359px) { .cs-48 .content h2 .outline{ } } @media (max-width: 1279px) { .cs-48 .content{ width:100%; align-items:flex-start; padding:0 0 150px; } .cs-48 .img{ width:100%; } } @media (max-width: 619px) { .cs-48{ padding:100px 0; } .cs-48 .content h2{ font-size:35px; } .cs-48 .content .btn>span{ padding:25px 40px; font-size:18px; } .cs-48 .content .btn>span>span{ margin-right:10px; } .cs-48 .content .btn>span svg{ width:22px; } } .cs-49{ padding:0 0 150px; position:relative; } .cs-49 .items{ margin-top: 100px; position:relative; } .cs-49 .items .wrap.boxes{ margin:0 -20px; } .cs-49 .box{ display:flex; flex-direction:column; width:50%; padding:20px; position:relative; } .cs-49 .box>div{ padding:80px 60px; height:100%; background:#ffffff10; position:relative; } .cs-49 .box .title{ position:relative; } .cs-49 .box h2{ font-size:18px; margin-bottom:10px; color:var(--main); } .cs-49 .box h3{ font-size:30px; margin-bottom:30px; line-height: 1.1; } .cs-49 .box p+p{ margin-top:15px; } .cs-49 .box .bottom{ margin-top:50px; } .cs-49 .box .sep{ font-size:18px; font-weight:900; text-transform:uppercase; margin-bottom:20px; position:relative; } .cs-49 .box .sep:before{ content:""; display:block; height:4px; width:calc(100% - 140px); background:#ffffff10; position:absolute; top:50%; margin-top:-2px; right:0; } .cs-49 .box .bottom .content{ display:flex; flex-direction:column; width:calc(100% - 150px); justify-content:center; padding-right:30px; } .cs-49 .box .bottom .item{ padding:10px 0; } .cs-49 .box .bottom .img{ display:flex; flex-direction:column; width:95px; justify-content:center; } .cs-49 .box .bottom .desc{ display:flex; flex-direction:column; width:calc(100% - 95px); justify-content:center; padding-left:25px; } .cs-49 .box .bottom .desc h4{ font-size:20px; margin-bottom:5px; } .cs-49 .box .bottom .desc h5{ font-size:12px; font-weight:800; color:var(--main); } .cs-49 .box .bottom .cta{ display:flex; flex-direction:column; width:150px; justify-content:center; align-items:center; } .cs-49 .box .bottom .btn-circle{ display:flex; justify-content:center; align-items:center; height:150px; width:150px; position:relative; color:var(--main); } .cs-49 .box .bottom .btn-circle:before{ content:""; display:block; height:150px; width:150px; background:url(../images/icn/btn-insc-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-49 .box .bottom a:hover .btn-circle:before{ animation-play-state:paused; } .cs-49 .box .bottom .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-49 .box .bottom .btn-circle svg polygon { fill: var(--main); } .cs-49 .box .bottom a:hover .btn-circle svg{ transform:scale(1.2); } .cs-49 .box .img-2{ width:160px; position:absolute; right:-20px; top:-30px; z-index:1; animation:float 5s ease-in-out infinite; } .cs-49 .img-1{ width:250px; position:absolute; left:0; bottom:0; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1359px) { .cs-49 .box>div{ padding:80px 40px; } .cs-49 .box h2{ font-size:25px; } } @media (max-width: 1019px) { .cs-49 .box{ width:100%; } } @media (max-width: 619px) { .cs-49{ padding:0 0 150px; } .cs-49 .box>div{ padding:60px 30px 30px; } .cs-49 .box .title{ padding:0; } .cs-49 .box h2{ font-size:14px; } .cs-49 .box h3{ font-size:20px; } .cs-49 .box .bottom .content{ width:100%; padding:0 0 30px; } .cs-49 .box .bottom .cta{ width:100%; } .cs-49 .box .bottom .img{ width:70px; } .cs-49 .box .bottom .desc{ width:calc(100% - 70px); padding-left:15px; } .cs-49 .box .bottom .desc h4{ font-size:16px; } .cs-49 .box .bottom .desc h5{ font-size:11px; } .cs-49 .box .img-2{ right:-10px; top:-50px; } .cs-49 .img-1{ width:200px; } } .cs-50{ padding:150px 0; background:#fff; color:var(--dark); position:relative; } .cs-50 .cs-marquee-3{ margin-bottom:100px; } .cs-50 .marquee-dark{ margin-bottom:100px; } .cs-50 .img-1{ width:240px; position:absolute; left:0; bottom:0; z-index:1; animation:float 5s ease-in-out infinite; } .cs-50 .content{ display:flex; flex-direction:column; width:50%; align-items:flex-start; padding:30px 100px 30px 0; position:relative; z-index:2; } .cs-50 .content .f-title{ font-size:60px; } .cs-50 .content .f-title .sm{ font-size:25px; color:var(--main); margin-bottom:10px; } .cs-50 .content .note{ font-size:20px; font-family:'Montserrat', sans-serif; margin-top:10px; position:relative; display: inline-flex; align-items: center; flex-wrap: wrap; } .cs-50 .content .note img{ width:30px; display:inline-block; margin-left: 8px; margin-right: 2px; } .cs-50 .form{ display:flex; flex-direction:column; width:50%; position:relative; z-index:2; } .cs-50 .form select.input{ -webkit-appearance: none; position:relative; z-index:2; border-color:var(--dark); } .cs-50 .form .select-outer svg{ height:14px; position:absolute; top:50%; margin-top:-7px; right:30px; color:var(--main); z-index:1; } .cs-50 .form .checkbox-outer{display:block;position:relative;padding-left:35px;padding-top:5px;margin-top:30px;cursor:pointer;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .cs-50 .form .checkbox-outer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0} .cs-50 .form .checkmark{position:absolute;top:0;left:0;height:25px;width:25px;background-color:#efefef} .cs-50 .form .checkbox-outer:hover input ~ .checkmark{background-color:#e0e0e0} .cs-50 .form .checkbox-outer input:checked ~ .checkmark{background-color:var(--main)} .cs-50 .form .checkmark:after{content:"";position:absolute;display:none} .cs-50 .form .checkbox-outer input:checked ~ .checkmark:after{display:block} .cs-50 .form .checkbox-outer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)} @media (max-width: 1679px) { .cs-50 .content{ padding:30px 60px 30px 0; } .cs-50 .content .f-title{ font-size:50px; } } @media (max-width: 1019px) { .cs-50 .img-1{ display:none; } .cs-50 .content{ width:100%; padding:0 0 60px; } .cs-50 .content>div{ max-width:650px; } .cs-50 .form{ width:100%; } } @media (max-width: 619px) { .cs-50{ padding:100px 0; } .cs-50 .content .f-title{ font-size:40px; } .cs-50 .content .f-title .sm{ font-size:20px; } } .cs-51{ padding:150px 0 150px; position:relative; } .cs-51 .img{ display:flex; flex-direction:column; width:450px; justify-content:center; align-items:center; } .cs-51 .img img{ animation:float 4s ease-in-out infinite; } .cs-51 .content{ display:flex; flex-direction:column; width:calc(100% - 450px); justify-content:center; padding-left:60px; } .cs-51 .content p{ font-size:24px; font-weight:700; } .cs-51 .img-1{ width:330px; position:absolute; left:0; top:-200px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 1019px) { .cs-51 .img{ width:100%; } .cs-51 .content{ width:100%; padding:60px 10vw 0; } } @media (max-width: 619px) { .cs-51{ padding:0 0 100px; } .cs-51 .content{ width:100%; padding:60px 30px 0; } .cs-51 .content p{ font-size:18px; } .cs-51 .img-1{ width:250px; left:0; top:-50px; } } .cs-52{ padding:150px 0; } .cs-52 .title .container{ max-width:1200px; } .cs-52 .title .f-title{ font-size:73px; line-height:1; text-transform:none; text-align:right; margin: 0 auto 100px; max-width: 1020px; font-family: 'Modius', sans-serif; } .cs-52 .title .f-title .lg { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: auto; } .cs-52 .title .f-title .sm{ font-size:17px; line-height: 1.4; margin-bottom:10px; font-weight: 500; max-width: 390px; margin-left: 60px; text-align: left; letter-spacing: .08em; } .cs-52 .items>.container>.wrap{ justify-content:center; } .cs-52 .item{ display:flex; flex-direction:column; align-items:center; width:25%; padding:30px; } .cs-52 .item a{ display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; } .cs-52 .item .name{ display:flex; flex-direction:column; justify-content:center; align-items:center; padding:17px; margin:0 30px; width:100%; max-width:350px; color: #fff; transition: all .25s ease-in-out; } .cs-52 .item .name .f-title{ font-size:15px; line-height: 1.2; text-align:center; font-weight: 800; letter-spacing: .08em; } .cs-52 .item .name .f-title .alias{ display:block; } .cs-52 .item .modal-content{ display:none; } .cs-52 .item .photo { position: relative; } .cs-52 .item .photo .show-hover { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; } .cs-52 .item .photo .hide-hover { opacity: 1; transition: .3s ease; } .cs-52 .item .photo:hover .hide-hover { opacity: 0; } @media (max-width: 1400px) { .cs-52 .item { padding: 12px;} } @media (max-width: 1200px) { .cs-52 .item .name .f-title{ font-size:13px; } } @media (max-width: 1100px) { .cs-52 .title .f-title { font-size: 55px; max-width: 730px; } .cs-52 .title .f-title .sm { margin-left: 0; } } @media (max-width: 1019px) { .cs-52 .item{ width:33.333333333%; } } @media (max-width: 800px) { .cs-52 .item{ width:50%; } .cs-52 .title .f-title { font-size: 38px; max-width: 508px; margin-bottom: 50px; } .cs-52 .title .f-title .sm { font-size: 15px; max-width: 370px; } } @media (max-width: 619px) { .cs-52{ padding:100px 0; } .cs-52 .item{ width:100%; } .cs-52 .title .f-title, .cs-52 .title .f-title .sm { text-align: center; } .cs-52 .title .f-title .sm { max-width: 360px; margin: 0 auto 10px; } .cs-52 .title .f-title .lg { display: block; } } @media (max-width: 400px) { .cs-52 .title .f-title .sm { font-size: 14px; } .cs-52 .title .f-title .lg { font-size: 31px; } } .cs-53{ padding:180px 0; background:var(--main); color:#fff; position:relative; } .cs-53 .container{ z-index:3; } .cs-53 .f-title{ font-size:23px; font-weight: 800; line-height:1.1; max-width:900px; margin:0 auto; text-align:center; } .cs-53 .f-title .lg { font-family: 'Modius'; font-size: 110px; margin-bottom: 20px; } .cs-53 .f-title .outline{ font-size:160px; -webkit-text-stroke:1px #ffffff; color:transparent; display:block; } .cs-53 .img-1{ width:240px; position:absolute; left:0; bottom:-70px; z-index:1; animation:float 5s ease-in-out infinite; } @media (max-width: 619px) { .cs-53{ padding:150px 0; } .cs-53 .f-title{ font-size:25px; } .cs-53 .f-title .outline{ font-size:100px; } .cs-53 .f-title .lg { font-size: 70px; } .cs-53 .img-1{ width:120px; } } @media (max-width: 500px) { .cs-53 .f-title { font-size: 19px; } } .cs-54{ padding:50px 0 0; background:#fff; color:var(--dark); } .cs-54 .container{ max-width:1400px; } .cs-54 .content{ display:flex; flex-direction:column; width:55%; padding:300px 60px 100px 0; } .cs-54 .content h2{ font-size:50px; line-height:1.1; margin-bottom:30px; } .cs-54 .content p+p{ margin-top:15px; } .cs-54 .cta{ margin-top:30px; } .cs-54 .img{ display:flex; flex-direction:column; width:45%; justify-content:flex-end; align-items:center; } @media (max-width: 1679px) { .cs-54 .content h2{ font-size:40px; } } @media (max-width: 1019px) { .cs-54 .content{ width:100%; max-width:650px; padding:100px 0; margin:0; } .cs-54 .img{ width:100%; } } @media (max-width: 619px) { .cs-54{ padding:100px 0 0; } .cs-54 .content{ padding:60px 0; } .cs-54 .content h2{ font-size:35px; } } .cs-55{ padding:200px 0; position:relative; overflow:hidden; } .cs-55 .container{ max-width:1200px; } .cs-55 .title{ } .cs-55 h2{ font-size:60px; padding-bottom:100px; text-align:center; } .cs-55 h2 .outline{ font-size:80px; -webkit-text-stroke:1px #fff; color:transparent; display:block; margin-top:10px; } .cs-55 .faq .item:first-child{ border-top:3px solid #ffffff10; } .cs-55 .faq .item{ border-bottom:3px solid #ffffff10; } .cs-55 .faq .t-item{ padding:30px 100px 30px 20px; cursor:pointer; position:relative; transition: all .25s ease-in-out; } .cs-55 .faq .t-item h3{ font-size:23px; line-height:1.1; display:flex; align-items:center; transition: all .25s ease-in-out; } .cs-55 .faq .t-item:hover h3{ color:var(--main); } .cs-55 .faq .t-item h3 .num{ font-size:35px; display:block; width:120px; -webkit-text-stroke:0.5px #ffffff; color:transparent; opacity:0.2; } .cs-55 .faq .t-item h3 .txt{ width:calc(100% - 120px); } .cs-55 .faq .t-item .icn{ position:absolute; top:50%; right:30px; margin-top:-11px; display:block; width:22px; height:22px; background:url(../images/icn/plus.svg) 0 0 no-repeat; background-size:22px 22px; filter: brightness(100); transition:all 0.4s ease; } .cs-55 .faq .t-item.open .icn{ background-image:url(../images/icn/minus.svg); transform:rotate(180deg); } .cs-55 .faq .c-item{ height:0; overflow:hidden; transition:all 0.4s ease; } .cs-55 .faq .c-item.open{ } .cs-55 .faq .c-item>div{ padding:0 30px 50px; } .cs-55 .faq .c-item p+p{ margin-top:15px; } .cs-55 .faq .c-item ul{ margin:30px 0 0 30px; } .cs-55 .faq .c-item li{ font-weight:700; color:var(--main); list-style:disc; } .cs-55 .faq .c-item li+li{ margin-top:15px; } .cs-55 .faq .c-item li>span{ color:#fff; } .cs-55 .cta-circle .btn-circle{ margin-top:30px; display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; color:var(--main); } .cs-55 .cta-circle .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-analyse-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-55 .cta-circle a:hover .btn-circle:before{ animation-play-state:paused; } .cs-55 .cta-circle .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-55 .cta-circle a:hover .btn-circle svg{ transform:scale(1.2); } .cs-55 .faq .outer-box{ padding-right:450px; position:relative; } .cs-55 .faq .box{ display:flex; flex-direction:column; width:380px; position:absolute; top:0; right:0; } .cs-55 .faq .box>div{ padding:40px; background:#fff; color:var(--dark); position:relative; z-index:2; } .cs-55 .faq .box h4{ font-size:22px; } .cs-55 .faq .box ul{ margin:30px 0 0 30px; } .cs-55 .faq .box li{ font-weight:700; color:var(--main); list-style:disc; } .cs-55 .faq .box li+li{ margin-top:15px; } .cs-55 .faq .box li>span{ color:var(--dark); } .cs-55 .faq .box li .sm{ font-size:14px; } @media (max-width: 1279px) { .cs-55 h2{ font-size:80px; } } @media (max-width: 1019px) { .cs-55 h2{ font-size:60px; } .cs-55 h2.outline{ font-size:60px; } .cs-55 .faq .t-item h3 .num{ width:80px; } .cs-55 .faq .t-item h3 .txt{ width:calc(100% - 80px); } .cs-55 .faq .outer-box{ padding-right:0; } .cs-55 .faq .box{ position:static; margin-top:30px;} } @media (max-width: 619px) { .cs-55{ padding:100px 0; } .cs-55 h2{ font-size:30px; padding-bottom:60px; } .cs-55 h2 .outline{ font-size:30px; -webkit-text-stroke:0.5px #fff; } .cs-55 .faq .t-item{ padding:30px 50px 30px 0; } .cs-55 .faq .t-item h3{ font-size:18px; } .cs-55 .faq .t-item h3 .num{ font-size:25px; width:50px; } .cs-55 .faq .t-item h3 .txt{ width:calc(100% - 50px); } .cs-55 .faq .t-item .icn{ right:10px; } .cs-55 .faq .c-item>div{ font-size:12px; padding:0 10px 30px; } .cs-55 .faq .box h4{ font-size:18px; } } #modal{ visibility:hidden; position:fixed; top:0; bottom:0; left:0; right:0; background:#1c1c1c80; z-index:99; transition: all .25s ease-in-out; } #modal.active{ visibility:visible; background:rgba(0,0,0,0.9); } #modal .outer{ display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; max-height:100vh; padding:30px; overflow-y:scroll; } #modal .box{ max-width:1200px; background:#171717; position:relative; transform:translateY(-30px); opacity:0; transition: all .25s ease-in-out; } #modal.active .box{ transform:translateY(0); opacity:1; } #modal .inner{ position:relative; z-index:103; } #modal .modal-img{ display:flex; justify-content:flex-start; align-items:center; width:40%; padding-top:30px; } #modal .modal-content{ display:flex; flex-direction:column; justify-content:center; width:60%; padding:100px 100px 100px 0; color:var(--dark); } #modal .modal-content h2{ font-size:30px; margin-bottom:30px; color: #fff; letter-spacing: .08em; } #modal .modal-content h2 .sm{ font-size:15px; margin-top:8px; font-weight:700; color:var(--main); } #modal .modal-content h2 .alias{ font-size:18px; } #modal .modal-content .f-title{ font-size:20px; margin:40px 0 10px; color: #fff; } #modal .modal-content p { color: #fff; } #close-modal{ display:block; width:70px; height:70px; position:absolute; top:20px; right:20px; background:url(../images/icn/close.svg) center center / 18px 18px no-repeat; border: 3px solid rgb(255 255 255 / 10%); z-index:105; } #close-modal:hover{ background-color: rgb(255 255 255 / 10%); border: 3px solid rgb(255 255 255 / 0%); } #modal .img-1{ width:600px; position:absolute; left:-100px; bottom:0; z-index:100; } @media (max-width: 1279px) { #modal .modal-content{ padding:60px 60px 60px 0; } } @media (max-width: 1019px) { #modal .modal-img{ width:100%; padding:0 30px; } #modal .modal-content{ width:100%; padding:100px 30px 30px; } } @media (max-width: 619px) { #modal .outer{ justify-content:flex-start; padding:30px 15px; } #modal .modal-content h2{ font-size:30px; } #modal .modal-content h2 .sm{ font-size:18px; } #modal .modal-content h2 .alias{ font-size:16px; } } #modal-download{ visibility:hidden; position:fixed; top:0; bottom:0; left:0; right:0; background:#1c1c1c80; z-index:99; transition: all .25s ease-in-out; } #modal-download.active{ visibility:visible; background:rgba(0,0,0,0.9); } #modal-download .outer{ display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; max-height:100vh; padding:30px; overflow-y:scroll; } #modal-download .box{ overflow: hidden; max-width:1200px; background:#fff; position:relative; transform:translateY(-30px); opacity:0; transition: all .25s ease-in-out; } #modal-download.active .box{ transform:translateY(0); opacity:1; } #modal-download .inner{ padding:180px 60px 90px 60px; max-width:450px; background: url(../images/shape-8.png) -30px -0 / 240px 152px no-repeat; position:relative; z-index:103; } #modal-download .content{ max-width:300px;margin-bottom:20px;font-size:16px;color:var(--dark);} #modal-download .content .f-title{ font-size:20px; margin-bottom:10px; } #modal-download .input{ font-size:14px; padding:20px 30px; } #modal-download .btn{ width:100%; } #close-modal-download{ display:block; width:70px; height:70px; position:absolute; top:20px; right:20px; background:url(../images/icn/close.svg) center center / 18px 18px no-repeat; border:3px solid var(--main); border-radius:50%; z-index:105; } #close-modal-download:hover{ background-color:var(--main); } @media (max-width: 619px) { #modal-download .outer{ justify-content:flex-start; padding:30px 15px; } #modal-download .inner{ padding:180px 30px 60px 30px; } } /*TEST*/ .cs-test-intro{ padding:150px 0; position:relative; } .cs-test-intro .container{ z-index:3; } .cs-test-intro h1{ font-size:60px; line-height:1.1; text-align:center; } .cs-test-intro h1 .sm{ font-size:35px; display:block; } .cs-test-intro h1 .outline{ font-size:50px; -webkit-text-stroke:0.5px #ffffff; color:transparent; display:block; margin-bottom:10px; } .cs-test-intro .bottom{ margin-top:100px; } .cs-test-intro .bottom .container{ max-width:1300px; } .cs-test-intro .txt{ display:flex; flex-direction:column; width:calc(100% - 420px); justify-content:center; padding-right:60px; } .cs-test-intro .txt>div{ max-width:650px; } .cs-test-intro .txt p>span{ white-space:nowrap; position:relative; } .cs-test-intro .txt p>span .note{ position:absolute; top:-40px; left:30%; padding:0 0 10px 40px; display:block; font-size:20px; font-family:'Caveat Brush', cursive; font-weight:400; line-height:1.1; text-align:left; background:url(../images/note-arrow-2.png) left bottom / 30px 24px no-repeat } .cs-test-intro .cta{ width:180px; margin-top:30px; } .cs-test-intro .cta .btn-circle{ display:flex; justify-content:center; align-items:center; height:180px; width:180px; position:relative; color:var(--main); } .cs-test-intro .cta .btn-circle:before{ content:""; display:block; height:180px; width:180px; background:url(../images/icn/btn-test-outer.png) center center / cover no-repeat; position:absolute; top:0; left:0; animation:circle 5s linear infinite forwards; animation-play-state:running; } .cs-test-intro .cta a:hover .btn-circle:before{ animation-play-state:paused; } .cs-test-intro .cta .btn-circle svg{ width:34px; transition: all .25s ease-in-out; } .cs-test-intro .cta a:hover .btn-circle svg{ transform:scale(1.2); } .cs-test-intro .img{ display:flex; flex-direction:column; width:420px; justify-content:center; align-items:center; } .cs-test-intro .img-1{ width:400px; position:absolute; left:0; top:60px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 1019px) { .cs-test-intro h1{ font-size:50px; } .cs-test-intro h1 .outline{ font-size:40px; } .cs-test-intro .txt{ width:60%; } .cs-test-intro .txt p>span .note{ display:none; } .cs-test-intro .img{ width:40%; } } @media (max-width: 619px) { .cs-test-intro{ padding:100px 0; overflow-x:hidden; } .cs-test-intro h1{ font-size:30px; } .cs-test-intro h1 .sm{ font-size:20px; } .cs-test-intro h1 .outline{ font-size:25px; } .cs-test-intro .txt{ width:100%; padding:0 0 60px; text-align:center; } .cs-test-intro .cta{ margin:30px auto 0; } .cs-test-intro .img{ width:100%; } .cs-test-intro .img-1{ width:200px; left:-100px; top:250px; } } .cs-test-questions{ padding:280px 0 170px; position:relative; } .cs-test-questions .container{ max-width:1200px; z-index:3; } .cs-test-questions .question{ text-align:center; } .cs-test-questions .question .f-title{ font-size:40px; line-height:1.1; } .cs-test-questions .question .f-title .outline{ font-size:21px; font-weight: 800; letter-spacing: .07em; color:#fff; opacity: .5; display:block; margin-bottom:20px; } .cs-test-questions .question p{ max-width:900px; margin:30px auto 0; } .cs-test-questions .action>div{ display:flex; justify-content:center; margin-top:30px; } .cs-test-questions .action a{ display:block; padding:20px; width:200px; border:4px solid var(--main); margin:15px; color:#fff; font-size:24px; font-weight:800; text-transform:uppercase; text-align:center; } .cs-test-questions .action a:hover{ background:var(--main); } .cs-test-questions .img-1{ width:350px; position:absolute; right:0; top:100px; z-index:1; animation:float 4s ease-in-out infinite; } @media (max-width: 619px) { .cs-test-questions{ padding:100px 0; } .cs-test-questions .question .f-title{ font-size:25px; } .cs-test-questions .question .f-title .outline{ font-size:20px; } .cs-test-questions .action a{ width:150px; border:3px solid var(--main); font-size:20px; } } .cs-test-resultats{ padding:150px 0; background:#fff; color:var(--dark); position:relative; text-align:center; } .cs-test-resultats .container{ max-width:1200px; } .cs-test-resultats .img img{ margin:0 auto 60px; animation:float 4s ease-in-out infinite; } .cs-test-resultats .f-title{ font-size:70px; line-height:1.1; margin-bottom:30px; } .cs-test-resultats .f-title .sm{ font-size:30px; } .cs-test-resultats .img-1{ width:260px; position:absolute; left:0; top:-100px; z-index:1; animation:float 5s ease-in-out infinite; } .cs-hero-test-resultat .content{display:flex;flex-direction:column;width:100%;max-width:800px;justify-content:center;margin:auto;} .cs-hero-test-resultat .content .question{text-align:center} .cs-hero-test-resultat .img{display:flex;flex-direction:column;width:40%;justify-content:center;align-items:center} .cs-hero-test-resultat .img .img-1{position:relative;width:auto;right:auto;top:auto} @media (max-width: 1019px) { .cs-test-resultats .img-1{ width:200px; } .cs-hero-test-resultat .content { padding-left: 2em; } } @media (max-width: 800px) { .cs-hero-test-resultat .content { padding-left: 0; width: 100%; } .cs-hero-test-resultat .content .question { text-align: center; } .cs-hero-test-resultat .img { width: 100%; } .cs-hero-test-resultat .img .img-1 { max-width: 100%; width: 320px; margin-bottom: 30px; } } @media (max-width: 619px) { .cs-hero-test-resultat { padding: 100px 0; } .cs-test-resultats{ padding:100px 0; } .cs-test-resultats .img img{ max-width:60%; } .cs-test-resultats .f-title{ font-size:40px; } .cs-test-resultats .f-title .sm{ font-size:20px; } .cs-test-resultats .img-1{ display:none; } } /*ANIMATIONS*/ @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0px); } } @keyframes down { 0% { transform: translatey(0px); opacity:1; } 50% { transform: translatey(100px); opacity:1; } 51% { transform: translatey(-100px); opacity:0; } 100% { transform: translatey(0px); opacity:1; } } @keyframes circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /** Fix outline+border-radius Safari */ @media not all and (min-resolution: 0.001dpcm) { .btn>span{outline:none; border:4px solid var(--main);} .btn:hover>span{ background:var(--main); border-color:var(--main); } .btn>span:before{display:none;} .btn.dark>span{outline:none; border:4px solid var(--dark);} .btn.dark:hover>span{ background:#fff; border-color:#fff; } .btn.plus>span{outline:none; border:3px solid var(--main);} .main-header .content .menu-btn a{outline:none; border:2px solid var(--main);transition:all .15s linear;} .main-header .content .menu-btn a:hover{ background:var(--main); } .main-header .content .menu-btn a:before{display:none;} .cs-1 .mag>span{outline:none; border:3px solid #ffffff10;transition:all .15s linear;} .cs-1 .mag>span:before{display:none;} .cs-hero .mag>span{outline:none; border:3px solid #ffffff10;transition:all .15s linear;} .cs-hero .mag>span:before{display:none;} .cs-35 .mag>span{outline:none; border:3px solid #ffffff10;transition:all .15s linear;} .cs-35 .mag>span:before{display:none;} } /*Loading buttons forms*/ .ld-ball, .ld-ring, .ld-hourglass, .ld-loader, .ld-cross, .ld-square, .ld-pie, .ld-spinner {width: 1em;height: 1em;position: relative;color: inherit;display: inline-block;box-sizing: content-box;}.ld-ball:after, .ld-ring:after, .ld-hourglass:after, .ld-loader:after, .ld-cross:after, .ld-square:after, .ld-pie:after, .ld-spinner:after {content: " ";display: block;width: 2em;height: 2em;box-sizing: border-box;transform-origin: 0 0;transform: translateZ(0) scale(0.5);-webkit-backface-visibility: hidden;backface-visibility: hidden;}.ld-ring:after {border-radius: 50%;border: 0.3em solid currentColor;border-left-color: transparent;}@-webkit-keyframes ld-spin {0% {-webkit-animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);transform: rotate(0);}100% {transform: rotate(360deg);}}@keyframes ld-spin {0% {-webkit-animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);transform: rotate(0);}100% {transform: rotate(360deg);}}.ld.ld-spin {-webkit-animation: ld-spin 1s infinite linear;animation: ld-spin 1s infinite linear;}.ld-ext-right, .ld-ext-left, .ld-ext-bottom, .ld-ext-top, .ld-over, .ld-over-inverse, .ld-over-full, .ld-over-full-inverse {position: relative;transition: all 0.3s;transition-timing-function: ease-in;}.ld-ext-right > .ld, .ld-ext-left > .ld, .ld-ext-bottom > .ld, .ld-ext-top > .ld, .ld-over > .ld, .ld-over-inverse > .ld, .ld-over-full > .ld, .ld-over-full-inverse > .ld {position: absolute;top: 50%;left: 50%;width: 1em;height: 1em;margin: -0.5em;opacity: 0;z-index: -1;transition: all 0.3s;transition-timing-function: ease-in;}.ld-ext-right > .ld > *, .ld-ext-left > .ld > *, .ld-ext-bottom > .ld > *, .ld-ext-top > .ld > *, .ld-over > .ld > *, .ld-over-inverse > .ld > *, .ld-over-full > .ld > *, .ld-over-full-inverse > .ld > * {width: 1em;height: 1em;position: absolute;top: 50%;left: 50%;transform: translate(-0.5em, -0.5em);}.ld-ext-right.running > .ld, .ld-ext-left.running > .ld, .ld-ext-bottom.running > .ld, .ld-ext-top.running > .ld, .ld-over.running > .ld, .ld-over-inverse.running > .ld, .ld-over-full.running > .ld, .ld-over-full-inverse.running > .ld {opacity: 1;z-index: auto;visibility: visible;}.ld-ext-right.running {padding-right: 2.5em !important;}.ld-ext-right > .ld {top: 50%;left: auto;right: 1.25em;}.ld-ext-left.running {padding-left: 2.5em !important;}.ld-ext-left > .ld {top: 50%;right: auto;left: 1.25em;}.ld-ext-bottom.running {padding-bottom: 2.5em !important;}.ld-ext-bottom > .ld {top: auto;left: 50%;bottom: 1.25em;}.ld-ext-top.running {padding-top: 2.5em !important;}.ld-ext-top > .ld {bottom: auto;left: 50%;top: 1.25em;}.ld-over:before, .ld-over-inverse:before, .ld-over-full:before, .ld-over-full-inverse:before {content: " ";display: block;opacity: 0;position: absolute;z-index: -1;top: 0;left: 0;width: 100%;height: 100%;transition: all 0.3s;transition-timing-function: ease-in;background: rgba(240, 240, 240, 0.8);}.ld-over.running > .ld, .ld-over-inverse.running > .ld, .ld-over-full.running > .ld, .ld-over-full-inverse.running > .ld {z-index: 4001;}.ld-over.running:before, .ld-over-inverse.running:before, .ld-over-full.running:before, .ld-over-full-inverse.running:before {opacity: 1;z-index: 4000;display: block;}.ld-over-full.running > .ld, .ld-over-full-inverse.running > .ld, .ld-over-full.running:before, .ld-over-full-inverse.running:before {position: fixed;}.ld-over-full > .ld {color: rgba(0, 0, 0, 0.8);}.ld-over-full:before, .ld-over-full-inverse:before {background: rgba(255, 255, 255, 0.8);}.ld-over-inverse > .ld {color: rgba(255, 255, 255, 0.8);}.ld-over-inverse:before {background: rgba(0, 0, 0, 0.6);}.ld-over-full-inverse > .ld {color: rgba(255, 255, 255, 0.8);}.ld-over-full-inverse:before {background: rgba(0, 0, 0, 0.6);}