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

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

/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
  display: none;
}

body {
  line-height: 1;
}

menu, ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

script {
  display: none !important;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */
q {
  quotes: "“" "”" "‘" "’";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 9, 2015 */
@font-face {
  font-family: "roboto";
  src: url("../css/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.eot");
  src: url("../css/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../css/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.woff") format("woff"), url("../css/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.ttf") format("truetype"), url("../css/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.svg#roboto_regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 9, 2015 */
@font-face {
  font-family: "roboto";
  src: url("../css/fonts/roboto/roboto_thin_macroman/Roboto-Thin-webfont.eot");
  src: url("../css/fonts/roboto/roboto_thin_macroman/Roboto-Thin-webfont.eot?#iefix") format("embedded-opentype"), url("../css/fonts/roboto/roboto_thin_macroman/Roboto-Thin-webfont.woff") format("woff"), url("../css/fonts/roboto/roboto_thin_macroman/Roboto-Thin-webfont.ttf") format("truetype"), url("../css/fonts/roboto/roboto_thin_macroman/Roboto-Thin-webfont.svg#roboto_regular") format("svg");
  font-weight: 100;
  font-style: normal;
}
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 9, 2015 */
@font-face {
  font-family: "roboto";
  src: url("../css/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.eot");
  src: url("../css/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../css/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.woff") format("woff"), url("../css/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.ttf") format("truetype"), url("../css/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.svg#roboto_regular") format("svg");
  font-weight: 300;
  font-style: normal;
}
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 9, 2015 */
@font-face {
  font-family: "roboto";
  src: url("../css/fonts/roboto/roboto_bold_macroman/Roboto-Bold-webfont.eot");
  src: url("../css/fonts/roboto/roboto_bold_macroman/Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../css/fonts/roboto/roboto_bold_macroman/Roboto-Bold-webfont.woff") format("woff"), url("../css/fonts/roboto/roboto_bold_macroman/Roboto-Bold-webfont.ttf") format("truetype"), url("../css/fonts/roboto/roboto_bold_macroman/Roboto-Bold-webfont.svg#roboto_regular") format("svg");
  font-weight: bold;
  font-style: normal;
}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  animation: lds-roller 3s linear infinite;
}

.lds-roller div {
  animation: lds-roller 2s cubic-bezier(0.5, 0, 0.4, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:nth-child(1) {
  --nth-child:1;
}

.lds-roller div:nth-child(2) {
  --nth-child:2;
}

.lds-roller div:nth-child(3) {
  --nth-child:3;
}

.lds-roller div:nth-child(4) {
  --nth-child:4;
}

.lds-roller div:nth-child(5) {
  --nth-child:5;
}

.lds-roller div:nth-child(6) {
  --nth-child:6;
}

.lds-roller div:nth-child(7) {
  --nth-child:7;
}

.lds-roller div:nth-child(8) {
  --nth-child:8;
}

.lds-roller div {
  animation-delay: calc(var(--nth-child) * -0.1s);
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000000;
  margin: -4px 0 0 -4px;
  transition: all 1.5s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: calc(var(--nth-child) * -0.1s);
}

.hide .lds-roller div:after, .of .lds-roller div:after {
  width: 0px;
  height: 0px;
}

.lds-roller div:nth-child(1):after {
  --nth-child:1;
  top: 63px;
  left: 63px;
}

.lds-roller div:nth-child(2):after {
  --nth-child:2;
  top: 68px;
  left: 56px;
}

.lds-roller div:nth-child(3):after {
  --nth-child:3;
  top: 71px;
  left: 48px;
}

.lds-roller div:nth-child(4):after {
  --nth-child:4;
  top: 72px;
  left: 40px;
}

.lds-roller div:nth-child(5):after {
  --nth-child:5;
  top: 71px;
  left: 32px;
}

.lds-roller div:nth-child(6):after {
  --nth-child:6;
  top: 68px;
  left: 24px;
}

.lds-roller div:nth-child(7):after {
  --nth-child:7;
  top: 63px;
  left: 17px;
}

.lds-roller div:nth-child(8):after {
  --nth-child:8;
  top: 56px;
  left: 12px;
}

/*
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}

.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}

.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}

.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}

.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(8) {
  animation-delay: calc(var(--nth-child) * lds-roller-delay );
}
 */
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
a.edit-link {
  position: absolute;
  display: block;
  right: 0;
  padding: 10px;
  background-color: #ededed;
  border-radius: 5px;
  color: #000;
  z-index: 500;
  font-weight: bolder;
  text-decoration: none;
}
a.edit-link:hover {
  background-color: coral;
  color: white;
}

a.node-edit-link {
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 1000;
}

.actu a.edit-link {
  top: 10px;
  right: initial;
  left: 10px;
}
.actu.pined a.edit-link {
  top: 10px;
  right: initial;
  left: 10px;
}

#equipe .item a.edit-link {
  top: 80px;
  right: 30px;
}

.job a.edit-link {
  right: 100px;
  top: 20px;
}

nav#block-edition {
  width: 100%;
  max-width: 700px;
  margin-top: 20px;
  font-weight: 700;
}

.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 20000;
  background-color: white;
  opacity: 1;
  transition-delay: 0s;
}
.preloader.form {
  background-color: #0e67b2;
}

.preloader.hide {
  opacity: 0;
  pointer-events: none;
  -moz-transition: opacity 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: opacity 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: opacity 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0.8s;
}
.preloader.hide .lds-roller {
  transform: scale(0);
  -moz-transition: transform 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: transform 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: transform 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: transform 1s cubic-bezier(0.645, 0.05, 0.355, 1);
}

* {
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

body ::-webkit-scrollbar {
  width: 0 !important;
}

body {
  overflow: -moz-scrollbars-none;
}

body {
  -ms-overflow-style: none;
}

html, body {
  position: relative;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "roboto";
  font-weight: 300;
  letter-spacing: 0.02em;
  text-rendering: geometricPrecision;
}

html.fix {
  overflow: hidden;
}
body.no-scroll {
  height: 100vh;
  overflow: hidden;
}

nav.menus-overlay.on {
  height: 100%;
}

nav.menu-overlay.of,
.form-overlay.of,
.overlay.of {
  pointer-events: none;
}

nav.menus-overlay {
  display: flex;
  position: fixed;
  width: 100%;
  height: 0vh;
  bottom: 0;
  z-index: 20000;
  background-color: #0e67b2;
  overflow: hidden;
}
nav.menus-overlay ul li {
  list-style: none;
}

.overlay, .form-overlay {
  position: fixed;
  padding: 0;
  margin: 0;
  left: 100vw;
  text-align: center;
  width: 100%;
  height: 100vh;
  /* mobile viewport bug fix */
  top: 0;
  overflow: scroll;
  z-index: 19999;
  background-color: white;
}
.overlay .button.close, .form-overlay .button.close {
  position: sticky;
  width: 100%;
  z-index: 5;
  background-image: url(../assets/cross-x_blue.svg);
  background-color: white;
}
.overlay .scroll-container, .form-overlay .scroll-container {
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  text-align: center;
  /*
  &:after{
    margin-top: 100px;
    margin-bottom: 100px;
    content: "";
    display: flex;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    height: 2px;
    background-color: $color_1;
  }
  */
}
.overlay .scroll-container .footer, .form-overlay .scroll-container .footer {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay .scroll-container .footer .button.back, .form-overlay .scroll-container .footer .button.back {
  color: white;
  position: relative;
  width: 80px;
  height: 80px;
  background-color: #045ca7;
  border-radius: 50%;
  display: flex;
  /* align-content: center; */
  justify-content: center;
  padding-top: 24px;
  cursor: pointer;
}
.overlay .scroll-container .footer .button.back:after, .form-overlay .scroll-container .footer .button.back:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background-image: url(../assets/arrow_long_white_left.svg);
  background-repeat: no-repeat;
  background-position: center 20px;
  background-size: 20px 20px;
}
.overlay .scroll-container .footer .logo, .form-overlay .scroll-container .footer .logo {
  height: 30px;
  width: 60px;
  position: absolute;
  bottom: 50px;
}

.form-overlay {
  left: 0vw;
  top: inherit;
  height: 100%;
  bottom: 100vh;
  background-color: #0e67b2;
}
.form-overlay .button.close {
  background-image: url(../assets/cross-x_white.svg);
  background-color: transparent;
}
.form-overlay .scroll-container {
  height: calc(100vh - 50px);
}
.form-overlay .scroll-container:after {
  display: none;
}

form#user-login-form {
  max-width: 250px;
}
form#user-login-form input {
  margin: 0;
  margin-bottom: 10px;
}
form#user-login-form .description {
  display: block;
  margin-bottom: 20px;
  text-align: left;
}

form {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: space-between;
  max-width: 700px;
  text-align: left;
}
form div {
  display: contents;
}
form #ajax-wrapper {
  display: contents;
}
form .form-item {
  display: contents;
}
form .form-managed-file {
  display: block;
  width: 100%;
}
form .form-item-curriculum-vitae {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border: 1px #cdcdcd solid;
  border-radius: 5px;
  margin-bottom: 20px;
}
form ul {
  padding: 0px;
  margin: 0px;
  margin-bottom: 20px;
}
form label {
  display: none;
}
form .managed-file-placeholder {
  display: none;
}
form label.button {
  display: inline-flex;
  text-decoration: none;
  padding: 6px;
  color: #ccc;
  margin: 0;
}
form label.button:visited {
  color: white;
}
form label.button.blue {
  background-color: #045ca7;
  color: white;
  border: none;
}
form label.button.arrow-upload {
  padding-right: 60px;
  position: relative;
}
form label.button.arrow-upload:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 100%;
  background-image: url(../assets/arrow_long_blue_upload.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
}
form input, form textarea {
  padding: 15px;
  border: 1px #cdcdcd solid;
  background: transparent;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 20px;
}
form input.error, form textarea.error {
  border: 1px #ff9a9a solid;
}
form input::placeholder, form textarea::placeholder {
  color: #cdcdcd;
  font-weight: 100;
}
form .button-container {
  width: 100%;
  text-align: right;
}
form .form-actions {
  display: block;
  width: 100%;
  text-align: right;
}
form .form-actions input.form-submit {
  font-family: "futura-pt";
  font-size: 14px;
  width: auto;
  padding-right: 60px;
  padding-left: 40px;
  background-image: url(../assets/arrow_long_blue_right.svg);
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 21px 10px;
  text-transform: uppercase;
}
form input[name=curriculum_vitae_remove_button] {
  font-family: "roboto";
  padding: 0;
  margin: 0;
  height: 50px;
  width: auto;
  border: none;
  padding-left: 40px;
  background-image: url(../assets/cross-x_blue.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 50px;
}

.iframe form input, .iframe form textarea {
  border: 1px white solid;
  color: white;
}
.iframe form input.error, .iframe form textarea.error {
  border: 1px #ff9a9a solid;
}
.iframe form input::placeholder, .iframe form textarea::placeholder {
  color: #cdcdcd;
  font-weight: 100;
}
.iframe form input.form-submit {
  width: auto;
  border: none;
}
.iframe form #edit-name, .iframe form #edit-email, .iframe form #edit-subject,
.iframe form textarea, .iframe form #edit-submitted-nom, .iframe form #edit-submitted-email {
  color: white;
}
.iframe form #edit-name::placeholder, .iframe form #edit-email::placeholder, .iframe form #edit-subject::placeholder,
.iframe form textarea::placeholder, .iframe form #edit-submitted-nom::placeholder, .iframe form #edit-submitted-email::placeholder {
  color: #e1e1e1;
}
.iframe form label.button {
  color: white;
}
.iframe form label.button.arrow-upload:before {
  background-image: url(../assets/arrow_long_white_upload.svg);
}
.iframe form #edit-actions input.form-submit {
  background-image: url(../assets/arrow_long_white_right.svg);
  box-shadow: 0px 0px 20px #0c518d;
}
.iframe form input[name=curriculum_vitae_remove_button] {
  background-image: url(../assets/cross-x_white.svg);
}

.menu {
  position: fixed;
  display: flex;
  align-items: center;
  z-index: 500;
  height: 50px;
  width: 100%;
  background-color: white;
}
.menu .logo {
  height: 30px;
}
.menu .logo svg {
  height: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.iframe h1 {
  color: #fff;
}
.iframe .message {
  text-align: center;
}
.iframe .message h1, .iframe .message h2, .iframe .message h3 {
  color: #fff;
  text-align: center;
}
.iframe main {
  padding-top: 0px;
  min-height: 100%;
  color: white;
}

main {
  position: relative;
  overflow: hidden;
  padding-top: 50px;
  min-height: 100vh;
  /* mobile viewport bug fix */
  width: 100%;
  text-align: center;
}
main.message {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
main header {
  position: relative;
  width: 100%;
  height: 75vw;
  overflow: hidden;
  color: white;
  text-align: center;
}
main header.title {
  height: 40vh;
}
main header.title h1 {
  font-size: 6em;
}
main header video {
  /*
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
footer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  /* mobile viewport bug fix */
}
footer .content {
  width: 100%;
  min-height: 100vh;
  /* mobile viewport bug fix */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.layer {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

*:active {
  outline-style: none;
}

img:focus {
  outline: 0;
}

.lds-roller div:after {
  background: #0e67b2;
}

.form .lds-roller div:after {
  background: white;
}

.invert {
  display: flex;
  flex-direction: column-reverse;
}

.menus-overlay {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}
.menus-overlay a, .menus-overlay a:visited {
  color: white;
  text-decoration: none;
}
.menus-overlay ul {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
}
.menus-overlay ul.menu_first {
  font-family: "futura-pt";
  text-transform: uppercase;
  font-size: 2em;
  line-height: 1.5em;
}
.menus-overlay ul.menu_second, .menus-overlay ul.menu_edition {
  margin-top: 30px;
  line-height: 1.5em;
}

a {
  position: relative;
}
a.icon-linkedin:after, a.icon-youtube:after {
  content: "";
  position: absolute;
  left: 100px;
  top: 2px;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
}
a.icon-linkedin:after {
  background-image: url(../assets/icon-linkedin-white.svg);
}
a.icon-youtube:after {
  background-image: url(../assets/icon-youtube-white.svg);
}

.menus-overlay a.icon-linkedin:after, .menus-overlay a.icon-youtube:after {
  top: 4px;
}

.logo_background {
  zoom: 20;
  position: fixed;
}

body, html {
  color: #2f2f2f;
  font-size: 14px;
}

.text-container ul {
  list-style: disc;
}

div#sliding-popup {
  background-color: coral;
}

.eu-cookie-compliance-content {
  height: 100px;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.eu-cookie-compliance-content p, .eu-cookie-compliance-content ul {
  padding: 0;
  font-size: 10px;
}
.eu-cookie-compliance-content .eu-cookie-compliance-message {
  float: none;
  margin: 0;
  max-width: initial;
}
.eu-cookie-compliance-content .eu-cookie-compliance-message button {
  padding: 0;
  font-size: 11px;
}
.eu-cookie-compliance-content .eu-cookie-compliance-buttons {
  margin: 5px 0 0 0 !important;
  float: none;
  margin: 0;
  max-width: initial;
}
.eu-cookie-compliance-content .agree-button, .eu-cookie-compliance-content .decline-button {
  margin: 10px 20px 10px 20px !important;
  border: none;
  text-shadow: none;
  -webkit-appearance: none;
  padding: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: white;
}

time {
  display: block;
  font-size: 0.7em;
  color: lightslategrey;
}

img {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.01);
  -ms-transform: translateZ(0) scale(1.01);
  transform: translateZ(0) scale(1.01);
}

h1, h2, h3, h4, h1.h2, h2.h1 {
  font-family: "futura-pt";
  font-weight: 700;
  font-style: normal;
  margin: 0;
  text-transform: uppercase;
  text-align: left;
  padding: 0 20px 0 20px;
  color: #000;
}
h1.center, h2.center, h3.center, h4.center, h1.h2.center, h2.h1.center {
  text-align: center;
}
h1.titre-moyen, h2.titre-moyen, h3.titre-moyen, h4.titre-moyen, h1.h2.titre-moyen, h2.h1.titre-moyen {
  font-size: 2em;
}

h1, h2.h1 {
  font-size: 2em;
}

h2, h1.h2 {
  font-size: 1em;
}

p, ul {
  max-width: 700px;
  padding: 0 20px 0 20px;
  text-align: left;
  line-height: 1.8em;
  margin-bottom: 5px;
}

p.big {
  font-size: 1.2em;
  max-width: 900px;
}

ul {
  margin-bottom: 5px;
}
b, strong {
  font-weight: 400;
  color: #000;
}

.titre-big {
  display: inline-block;
  flex-direction: column;
  margin-top: 15vh;
  margin-bottom: 10vh;
  margin-right: 20vw;
  text-align: left;
  font-size: 9vw;
  line-height: 1em;
}

.titre-medium {
  display: inline-block;
  flex-direction: column;
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: left;
  font-size: 8vw;
}

.titre-normal {
  display: inline-block;
  flex-direction: column;
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: left;
  font-size: 7vw;
}

.button-container {
  width: 100%;
  text-align: center;
}

.button#WTJ-job-button {
  position: absolute;
  right: 0;
  margin-top: -86px;
  margin-right: 20px;
}

.button#WTJ-job-button,
.button#WTJ-job-button2,
.button#WTJ-job-button3 {
  display: inline-flex;
  background-color: rgb(255, 205, 0);
}
.button#WTJ-job-button:hover,
.button#WTJ-job-button2:hover,
.button#WTJ-job-button3:hover {
  background-color: rgb(253, 211, 61);
  cursor: pointer;
}
.button#WTJ-job-button a,
.button#WTJ-job-button2 a,
.button#WTJ-job-button3 a {
  display: inline-flex;
  font-family: "futura-pt";
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px;
  border-radius: 5px;
  color: black;
}
.button#WTJ-job-button a:visited,
.button#WTJ-job-button2 a:visited,
.button#WTJ-job-button3 a:visited {
  color: black;
}
.button#WTJ-job-button a.arrow-right,
.button#WTJ-job-button2 a.arrow-right,
.button#WTJ-job-button3 a.arrow-right {
  padding-right: 60px;
  position: relative;
}
.button#WTJ-job-button a.arrow-right:before,
.button#WTJ-job-button2 a.arrow-right:before,
.button#WTJ-job-button3 a.arrow-right:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 100%;
  background-image: url(../assets/arrow_long_white_right.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

.button#WTJ-job-button3 {
  position: absolute;
  right: 0px;
  height: 100%;
}
.button#WTJ-job-button3 a {
  padding: 0 30px 0 30px;
  font-size: 14px;
  text-align: center;
  margin: auto;
}

a.button {
  display: inline-flex;
  font-family: "futura-pt";
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px;
  border: 1px #e4e4e4 solid;
  border-radius: 5px;
  color: #045ca7;
  margin: 40px auto 40px auto;
}
a.button:visited {
  color: #045ca7;
}
a.button.blue {
  background-color: #045ca7;
  color: white;
  border: none;
}
a.button.arrow-right {
  padding-right: 60px;
  position: relative;
}
a.button.arrow-right:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 60px;
  height: 100%;
  background-image: url(../assets/arrow_long_white_right.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

a.bloc {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

a:visited {
  color: black;
}

.button.close {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  display: block;
  background-image: url(../assets/cross-x_white.svg);
  background-repeat: no-repeat;
}

#strip {
  display: block;
  align-self: center;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: -9px;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#strip-arrow {
  display: block;
  margin: 10px auto 10px auto;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.break {
  border-bottom: 1px dashed #0e67b2;
  margin-left: auto;
  margin-right: auto;
}

video.mobile {
  display: block;
}
video.desktop {
  display: none;
}

.media.video {
  background-color: #0e67b2;
}

figure {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0e67b2;
  width: 100%;
  height: 100%;
}
figure picture {
  height: 100%;
  width: 100%;
}
figure img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.marge.demi {
  display: block;
  height: 20px;
}

.marge.simple {
  display: block;
  height: 40px;
}

.marge.double {
  display: block;
  height: 80px;
}

.marge.triple {
  display: block;
  height: 120px;
}

.marge.quadruple {
  display: block;
  height: 160px;
}

.first-content {
  position: relative;
}
.first-content header {
  position: relative;
  width: 100%;
  height: 75vw;
  overflow: hidden;
  color: white;
  text-align: center;
}
.first-content header.title {
  height: 40vh;
}
.first-content header.title h1 {
  font-size: 9vw;
}
.first-content header .media {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
.first-content header figure {
  height: 100%;
  width: 100%;
}
.first-content header figure img {
  width: 100%;
}
.first-content .content {
  padding-top: 40px;
}
.first-content .content h1.h2 {
  margin-bottom: 20px;
}
.first-content .content h2 {
  margin-bottom: 20px;
}
.first-content .content h2.h1 {
  margin: 0;
}

.content-centered {
  max-width: 700px;
  display: inline-block;
}
.content-centered .header {
  margin-bottom: 80px;
}
.content-centered h1 {
  font-size: 3em;
  margin-top: 80px;
  margin-bottom: 40px;
}
.content-centered h2 {
  font-size: 1.5em;
  margin-bottom: 20px;
}
.slide {
  height: 100%;
  width: 100%;
}
.slide .bloc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.slide .bloc h1, .slide .bloc h2, .slide .bloc h3 {
  text-align: center;
  color: white;
}
.slide .bloc h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.slide .bloc h1 span {
  color: white;
  overflow: hidden;
  line-height: 40px;
}
.slide .animation-container {
  display: inline-block;
  overflow: hidden;
  margin-bottom: 0px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

header .layer.title.blue {
  background-color: #045ca7;
}
header .layer.title.blue h1, header .layer.title.blue h2 {
  color: white;
}
header .layer.white {
  background-color: white;
  opacity: 0;
}
header .layer.mixed-text-image {
  flex-direction: column-reverse;
}
header .layer.mixed-text-image figure {
  height: 75vw;
  width: 100vw;
}
header .layer.mixed-text-image .text-container {
  color: black;
  padding-top: 0px;
}
header .layer.mixed-text-image .text-container .titres {
  margin-bottom: 20px;
}
header .titre-big {
  margin: 0;
}

.mask-container .video_masked {
  position: absolute;
}
.mask-container .video_masked video {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
.mask-container .video_masked #svg_mask {
  position: absolute;
}

.list-references {
  column-count: 1;
  max-width: 700px;
  padding: 0 20px 0 20px;
  text-align: center;
  margin-bottom: 80px;
}
.list-references .element {
  display: inline-block;
  width: 100%;
  font-size: 0.7em;
  line-height: 2em;
  font-weight: 400;
  margin-bottom: 15px;
}
.list-references .element h3 {
  font-family: "roboto";
  font-weight: 100;
  font-size: 12px;
  text-transform: none;
  text-align: center;
  padding: 0;
}

.case-collection {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1600px;
  margin-bottom: 80px;
}
.case-collection .square {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  background-color: #fafafa;
  width: 100vw;
  height: auto;
}
.case-collection .square.text {
  padding-top: 40px;
  padding-bottom: 40px;
}
.case-collection .square .bg {
  height: 100%;
}
.case-collection .square h1, .case-collection .square h2, .case-collection .square h3 {
  font-size: 2.5em;
  margin-bottom: 20px;
}
.case-collection .square h1, .case-collection .square h2, .case-collection .square h3, .case-collection .square h4, .case-collection .square p {
  padding: 0;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
}
.case-collection .square h4 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 20px;
}
.case-collection .square .button {
  margin-top: 20px;
  margin-bottom: 0px;
  background-color: white;
}

#contact footer {
  min-height: inherit;
  height: auto;
  margin-top: 40px;
}
#contact footer .content {
  min-height: auto;
}
#contact footer .content .agences {
  padding: 0;
  margin: 0;
}

footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #0e67b2;
  font-size: 0.8em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
footer a, footer a:visited {
  color: white;
  text-decoration: none;
}
footer .content {
  z-index: 1;
}
footer .content #block-footernavigationgroup {
  margin-bottom: 12vh;
}
footer .content #block-footernavigationgroup ul {
  padding: 0 40px 0 40px;
}
footer .content #block-footernavigationgroup ul li {
  position: relative;
  font-weight: 400;
  list-style-position: inside;
  list-style-image: none;
  list-style: none;
}
footer .content #block-footernavigationgroup ul li:before {
  content: "";
  position: absolute;
  width: 21px;
  height: 100%;
  left: -30px;
  background-image: url("../assets/arrow_long_white_right.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 12px 5px;
}
footer .content .agences {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 0.8em;
  line-height: 1.2em;
  text-align: left;
  margin-bottom: 12vh;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
footer .content .agences address {
  max-width: 250px;
  width: 25%;
  min-height: 120px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
footer .content .agences address h3 {
  text-align: left;
  padding: 0;
  color: white;
}
footer .content .agences address a {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  color: white;
  font-weight: 400;
}
footer .content .agences address a:before {
  content: "";
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  left: -13px;
  top: 2px;
  background-image: url(../assets/phone-white.svg);
  background-repeat: no-repeat;
  background-size: 12px;
}
footer .content .opqibi {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 60px;
  width: 90px;
  overflow: hidden;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 40px;
}
footer .content .credits {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 20px;
  color: #ffffff;
  font-size: 9px;
}
footer .content .credits .logo {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 56px;
  height: 25px;
  margin-bottom: 10px;
}
footer .content .credits .logo span {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  background-image: url(../assets/eaks_logo-badge-white.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
footer .content .credits a {
  position: relative;
  color: #ffffff;
  font-weight: bold;
  padding-left: 20px;
}
footer .content .credits a:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 5px;
  background-image: url(../assets/arrows.png);
  background-repeat: no-repeat;
  background-position: 0px -20px;
  left: 4px;
  top: 4px;
}
footer .content .credits a:visited {
  color: #ffffff;
}
footer .logo-bg {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
footer .logo-bg .svg-bg-color {
  fill: #0d6ebf;
}
footer .logo-bg .svg-background {
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
footer .logo-bg .img-background {
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
footer .logo-bg .img-background img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.text-container {
  width: 100%;
}

footer#new-footer {
  color: black;
  background-color: #f9fafb;
}
footer#new-footer a, footer#new-footer a:visited {
  color: black;
  text-decoration: none;
}
footer#new-footer .content #block-footernavigationgroup ul li:before {
  background-image: url("../assets/arrow_long_blue_right.svg");
}
footer#new-footer .content .agences address h3 {
  color: black;
}
footer#new-footer .content .agences address a {
  color: black;
}
footer#new-footer .content .agences address a:before {
  background-image: url(../assets/phone-blue.svg);
}
footer#new-footer .content .opqibi {
  background-color: white;
}
footer#new-footer .content .credits {
  color: black;
}
footer#new-footer .content .credits .logo {
  width: 162px;
  height: 50px;
}
footer#new-footer .content .credits .logo span {
  background-image: url(../assets/GuillaumeManteau-logo.svg);
}
footer#new-footer .content .credits a {
  color: black;
}
footer#new-footer .content .credits a:before {
  background-image: url(../assets/arrows.png);
  background-position: 0px 0px;
}
footer#new-footer .content .credits a:visited {
  color: black;
}
footer#new-footer .logo-bg .svg-bg-color {
  fill: #fff;
}
.text-container {
  margin-bottom: 20px;
}
.text-container p, .text-container ul {
  font-size: 1.2em;
}
.text-container p a, .text-container ul a {
  color: inherit;
  font-weight: bolder;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 6px;
  text-decoration-color: coral;
  text-decoration-thickness: 1px;
}
.text-container ol {
  list-style-type: decimal;
}
.text-container ol, .text-container ul {
  list-style-position: inside;
  text-align: left;
}
.text-container ol h1, .text-container ol h2, .text-container ol h3, .text-container ol h4, .text-container ol h5, .text-container ul h1, .text-container ul h2, .text-container ul h3, .text-container ul h4, .text-container ul h5 {
  display: inline;
  margin: 0;
  padding: 0;
}
.text-container ol li, .text-container ul li {
  text-align: left;
}
.text-container .titre-1 {
  font-size: 24px !important;
}
.text-container .titre-2 {
  font-size: 20px !important;
}
.text-container .titre-3 {
  font-size: 16px !important;
}

.screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  /* mobile viewport bug fix */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 100px 0px 60px 0px;
  /*
  p{
    font-size: 1em;
    max-width: 900px;
    line-height: 1.8em;
  }
  */
}
.screen.height-100 {
  min-height: 100vh;
}
.screen.height-90 {
  min-height: 90vh;
}
.screen.height-80 {
  min-height: 80vh;
}
.screen.height-70 {
  min-height: 70vh;
}
.screen.height-60 {
  min-height: 60vh;
}
.screen.height-50 {
  min-height: 50vh;
}
.screen.height-40 {
  min-height: 40vh;
}
.screen.height-30 {
  min-height: 30vh;
}
.screen.height-25 {
  min-height: 25vh;
}
.screen .text blockquote {
  position: relative;
  font-size: 1.2em;
}
.screen .text blockquote:before {
  content: "“";
  position: absolute;
  font-size: 4em;
  top: 0;
  left: 0;
}
.screen .text blockquote:after {
  content: "”";
  position: absolute;
  font-size: 4em;
  bottom: -30px;
  right: 0;
}
.screen .text blockquote p {
  font-family: "futura-pt";
  font-size: 1.2em;
  max-width: 960px;
}
.screen .text p, .screen .text ul {
  font-size: 1.2em;
  list-style: none;
}
.screen .text p ul, .screen .text ul ul {
  display: block;
  font-size: 1em;
  list-style: disc;
}
.screen .text p a, .screen .text ul a {
  color: inherit;
  font-weight: bolder;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 6px;
  text-decoration-color: coral;
  text-decoration-thickness: 1px;
}
.screen .text ol {
  list-style-type: decimal;
}
.screen .text ol, .screen .text ul {
  list-style-position: inside;
  text-align: left;
}
.screen .text ol h1, .screen .text ol h2, .screen .text ol h3, .screen .text ol h4, .screen .text ol h5, .screen .text ul h1, .screen .text ul h2, .screen .text ul h3, .screen .text ul h4, .screen .text ul h5 {
  display: inline;
  margin: 0;
  padding: 0;
}
.screen .text ol li, .screen .text ul li {
  margin-left: 30px;
  text-align: left;
  position: relative;
  /*
  &:before{
    content: "";
    position: absolute;
    width: 24px;
    height: 30px;
    left: -30px;
    background-image: url(/themes/custom/cdvia_theme/assets/arrow_long_blue_right.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px 8px;
  }

   */
}
.screen .text .titre-1 {
  font-size: 24px !important;
}
.screen .text .titre-2 {
  font-size: 20px !important;
}
.screen .text .titre-3 {
  font-size: 16px !important;
}

.animation-container.title {
  overflow: hidden;
  color: black;
  margin-bottom: 40px;
}

.titre-big {
  font-family: "futura-pt";
  text-align: center;
  margin: 0;
}

.bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/*
#slider_panel{
  max-height:375px;
  figure.panel_header{

  }
}
*/
.slider-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.slider-main .slider-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.slider-main .slider-container #slide-transition {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffa3f5;
  translate: -100% 0 0;
}
.slider-main .slider-container article {
  width: 100%;
  height: 100%;
}
.slider-main .slider-container .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;
}
.slider-main .slider-container .slide article {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.slider-main .slider-container .slide article .text-container {
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 20px;
}
.slider-main .slider-container .slide article .text-container .time-elapsed {
  display: block;
  max-width: 700px;
  margin-top: 10px;
  margin-bottom: 15px;
  margin-right: auto;
  margin-left: auto;
}
.slider-main .slider-container .slide article .text-container time .button.more-date {
  position: absolute;
}
.slider-main .slider-container .slide article .text-container .button {
  margin-bottom: 50px;
  margin-top: 15px;
}
.slider-main .slider-container .slide article figure img {
  opacity: 0;
}
.slider-main .slider-container .slide.on {
  left: 0;
}
.slider-main .slider-container .slide.on article figure img {
  opacity: 1;
  transition: opacity 2000ms ease-out;
}
.slider-main .slider-controls {
  position: absolute;
  bottom: 0;
  height: 40px;
  line-height: initial;
  width: 100%;
  border-radius: 15px 15px 0px 0px;
}
.slider-main .slider-controls .prev, .slider-main .slider-controls .next, .slider-main .slider-controls .counter {
  display: inline-block;
}

#journal {
  position: relative;
  text-align: center;
  margin: 0px 0px 60px 0px;
}
#journal.full h1 {
  display: none;
}
#journal.full .content {
  margin-top: 15px;
}
#journal.last-news h2 {
  font-size: 12px;
  text-align: center;
}
#journal.last-news .content .actu {
  padding: 0;
}
#journal .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px 0 10px;
  margin-top: 40px;
  margin-bottom: 60px;
}
#journal .content .actu {
  position: relative;
  width: 100%;
  height: 80px;
  color: black;
  text-align: left;
  background-color: white;
  margin-bottom: 10px;
}
#journal .content .actu .bloc {
  color: black;
}
#journal .content .actu .bloc:visited {
  color: black;
}
#journal .content .actu .bloc:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  right: -10px;
  width: 50px;
  height: 50px;
  background-image: url("../assets/cross_blue.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
#journal .content .actu .bloc figure, #journal .content .actu .bloc .no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 120px;
  height: 80px;
  color: white;
  text-align: center;
  font-family: "futura-pt";
}
#journal .content .actu .bloc .no-image {
  background-color: #0e67b2;
  font-family: "futura-pt";
  font-size: 0.8em;
}
#journal .content .actu .bloc .text {
  position: absolute;
  left: 120px;
  right: 40px;
  line-height: 1.2em;
  padding: 0 10px 10px 10px;
  height: 80px;
  overflow: hidden;
}
#journal .content .actu .bloc .text h3 {
  font-size: 0.85em;
  padding: 0;
  margin-bottom: 2px;
  text-align: left;
  text-transform: uppercase;
}
#journal .content .actu .bloc .text h4, #journal .content .actu .bloc .text h2.h4 {
  font-family: "roboto";
  font-weight: 300;
  padding: 0;
  font-size: 0.8em;
  margin-bottom: 5px;
  text-align: left;
  color: #000;
  text-transform: initial;
}
#journal .content .actu .bloc .text .summary {
  display: none;
}

#services {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
  margin: 0px 0px 60px 0px;
  text-align: center;
}
#services input#filter {
  all: unset;
  max-width: 250px;
  width: 100%;
  height: 40px;
  border-radius: 25px;
  border: 1px #888888 solid;
  margin-top: 50px;
  margin-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;
  text-align: left;
}
#services input#filter::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 43%, #000 45%, #000 55%, rgba(0, 0, 0, 0) 57%, rgba(0, 0, 0, 0) 100%), linear-gradient(135deg, transparent 0%, transparent 43%, #000 45%, #000 55%, transparent 57%, transparent 100%);
}
#services.full h1 {
  display: none;
}
#services.full .content {
  margin-top: 15px;
}
#services .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px 0 10px;
  margin-top: 40px;
  margin-bottom: 60px;
  max-width: 1420px;
  margin-right: 40px;
  margin-left: 40px;
}
#services .content .service {
  position: relative;
  width: 50%;
  height: 130px;
  color: black;
  text-align: left;
  background-color: white;
  margin-bottom: 10px;
  border: 1px transparent solid;
}
#services .content .service a.bloc {
  padding: 10px;
  border: 1px transparent solid;
  border-radius: 5px;
}
#services .content .service a.bloc:visited {
  color: black;
}
#services .content .service a.bloc:before {
  background-image: url("../assets/cross_blue.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
#services .content .service a.bloc:hover {
  border: 1px #e4e4e4 solid;
}
#services .content .service .bloc {
  padding: 10px;
  box-sizing: border-box;
  color: black;
}
#services .content .service .bloc:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 50px;
  height: 50px;
}
#services .content .service .bloc figure, #services .content .service .bloc .no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 120px;
  height: 80px;
  color: white;
  text-align: center;
  font-family: "futura-pt";
}
#services .content .service .bloc .no-image {
  background-color: #0e67b2;
  font-family: "futura-pt";
  font-size: 0.8em;
}
#services .content .service .bloc .text {
  position: absolute;
  line-height: 1.2em;
  height: 80px;
  overflow: hidden;
}
#services .content .service .bloc .text h3 {
  font-size: 10px;
  padding: 0;
  margin-bottom: 2px;
  text-align: left;
  text-transform: uppercase;
}
#services .content .service .bloc .text h4, #services .content .service .bloc .text h2.h4 {
  font-family: "roboto";
  font-weight: 300;
  padding: 0;
  font-size: 0.8em;
  margin-bottom: 5px;
  text-align: left;
  color: #000;
  text-transform: initial;
}
#services .content .service .bloc .text .summary {
  font-size: 8px;
  line-height: 14px;
}

#filter-target.on .item {
  display: none;
}
#filter-target.on .item.selected {
  display: block;
}
#filter-target.empty .item {
  display: none;
}
#filter-target.empty .empty-message {
  display: block;
}
#filter-target .empty-message {
  display: none;
}

#equipe {
  position: relative;
  text-align: center;
  margin: 0px 0px 60px 0px;
}
#equipe h1 {
  font-size: 12px;
  text-align: center;
  margin: 20px auto 15px auto;
}
#equipe p {
  margin: 40px auto 40px auto;
}
#equipe .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
}
#equipe .content .item {
  position: relative;
  width: 30vw;
}
#equipe .content .item .bloc .square-container {
  position: relative;
  width: 30vw;
  height: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#equipe .content .item .bloc .square-container .layer.white {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: white;
}
#equipe .content .item .bloc .square-container figure, #equipe .content .item .bloc .square-container .initials {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  border-radius: 50vw;
  overflow: hidden;
}
#equipe .content .item .bloc .square-container .initials {
  font-family: "futura-pt";
  color: white;
  background-color: #0e67b2;
  letter-spacing: -2px;
}
#equipe .content .item .bloc .text {
  overflow: hidden;
  color: #000;
}
#equipe .content .item .bloc .text h3 {
  font-size: 0.7em;
  padding: 5px;
  text-align: center;
}
#equipe .content .item .bloc .text h4 {
  font-size: 0.7em;
}

.onload .first-content.people img, .onload .first-content.people .initials span {
  transform: scale(1);
  transition: transform 0s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}

.people .initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2em;
  font-family: "futura-pt";
  font-size: 12em;
  color: white;
  background-color: #0e67b2;
}
.people img, .people .initials span {
  transform: scale(1.03);
  transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#jobs {
  position: relative;
  text-align: center;
  margin: 0px 0px 0px 0px;
}
#jobs .content .job-collection header {
  display: none;
}
#jobs .content .job-collection .list {
  width: 100%;
}
#jobs .content .job-collection .list .job {
  position: relative;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*
  &:visited{
    &:nth-child(odd){
      background-color: $color_9;
    }
    &:nth-child(even){
      background-color: $color_7;
    }
  }
  */
}
#jobs .content .job-collection .list .job:nth-child(odd) {
  background-color: #1997FF;
}
#jobs .content .job-collection .list .job:nth-child(even) {
  background-color: #57B3FF;
}
#jobs .content .job-collection .list .job:before {
  content: "";
  display: block;
  position: absolute;
  right: 20px;
  width: 60px;
  height: 60px;
  background-image: url("../assets/cross_white.svg");
  background-repeat: no-repeat;
}
#jobs .content .job-collection .list .job a.zone {
  position: absolute;
  display: flex;
  color: white;
  text-decoration: none;
  padding-left: 15px;
  line-height: 1.1em;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  width: 100%;
  height: 100%;
}
#jobs .content .job-collection .list .job a.zone h1, #jobs .content .job-collection .list .job a.zone h2, #jobs .content .job-collection .list .job a.zone h3, #jobs .content .job-collection .list .job a.zone h4 {
  color: white;
  padding: 0;
}
#jobs .content .job-collection .list .job a.zone .poste {
  font-weight: 600;
  font-size: 0.9em;
  text-align: left;
}
#jobs .content .job-collection .list .job a.zone .lieu, #jobs .content .job-collection .list .job a.zone .type, #jobs .content .job-collection .list .job a.zone .experience {
  font-size: 0.7em;
}
#jobs .content table {
  table-layout: fixed;
  width: 100%;
  text-align: left;
}
#jobs .content table thead {
  display: none;
}
#jobs .content table th, #jobs .content table td {
  display: block;
  padding-left: 15px;
  font-weight: 100;
}
#jobs .content table th:nth-child(1) {
  padding-left: 15px;
}
#jobs .content table tbody {
  color: white;
}
.job-detail {
  display: inline-block;
}
.job-detail h1 {
  max-width: 600px;
  font-size: 1.6em;
  line-height: 1.1em;
  margin-top: 40px;
  margin-bottom: 40px;
}
#job-apply {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 15px;
}
#job-apply .content {
  max-width: 450px;
  margin-right: auto;
  margin-left: auto;
}
#job-apply .content h1 {
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

.iframe #job-apply .content h1 {
  color: #fff;
}

#contact {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 15px;
}
#contact .content {
  max-width: 450px;
  margin-right: auto;
  margin-left: auto;
}
#contact .content h1 {
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

.iframe #contact,
.form-overlay #contact {
  color: white;
}
.iframe #contact .content h1,
.form-overlay #contact .content h1 {
  color: #fff;
}

.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}

.onScrollDown .titre-big.is-viewport.inViewport, .onScrollDown .titre-normal.is-viewport.inViewport, .onBottom .titre-big.is-viewport.inViewport, .onBottom .titre-normal.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: translate3D(0, 0, 0);
  -ms-transform: translate3D(0, 0, 0);
  transform: translate3D(0, 0, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollDown .titre-big.is-viewport.outViewport, .onScrollDown .titre-normal.is-viewport.outViewport, .onBottom .titre-big.is-viewport.outViewport, .onBottom .titre-normal.is-viewport.outViewport {
  opacity: 0;
  -webkit-transform: translate3D(0, -100px, 0);
  -ms-transform: translate3D(0, -100px, 0);
  transform: translate3D(0, -100px, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollDown #journal .button.is-viewport.outViewport, .onBottom #journal .button.is-viewport.outViewport {
  opacity: 0;
  -webkit-transform: scale(0.8) translateZ(0);
  -ms-transform: scale(0.8) translateZ(0);
  transform: scale(0.8) translateZ(0);
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.onScrollDown #journal .button.is-viewport.inViewport, .onBottom #journal .button.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: scale(1) translateZ(0);
  -ms-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollDown .screen .is-viewport.outViewport:not(.button), .onBottom .screen .is-viewport.outViewport:not(.button) {
  opacity: 0;
  -webkit-transform: translate3D(0, 100px, 0);
  -ms-transform: translate3D(0, 100px, 0);
  transform: translate3D(0, 100px, 0);
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.onScrollDown .screen .button.is-viewport.outViewport, .onBottom .screen .button.is-viewport.outViewport {
  opacity: 0;
  -webkit-transform: scale(0.8) translateZ(0);
  -ms-transform: scale(0.8) translateZ(0);
  transform: scale(0.8) translateZ(0);
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.onScrollDown .screen .animation-container.is-viewport.outViewport p,
.onScrollDown .screen .animation-container.is-viewport.outViewport ul, .onBottom .screen .animation-container.is-viewport.outViewport p,
.onBottom .screen .animation-container.is-viewport.outViewport ul {
  opacity: 0;
  -webkit-transform: translate3D(0, 100px, 0);
  -ms-transform: translate3D(0, 100px, 0);
  transform: translate3D(0, 100px, 0);
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.onScrollDown .screen .animation-container.is-viewport.inViewport p,
.onScrollDown .screen .animation-container.is-viewport.outViewport ul, .onBottom .screen .animation-container.is-viewport.inViewport p,
.onBottom .screen .animation-container.is-viewport.outViewport ul {
  opacity: 1;
  -webkit-transform: translate3D(0, 0px, 0);
  -ms-transform: translate3D(0, 0px, 0);
  transform: translate3D(0, 0px, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollDown .titre-big.is-viewport.inViewport, .onScrollDown .titre-normal.is-viewport.inViewport, .onBottom .titre-big.is-viewport.inViewport, .onBottom .titre-normal.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: translate3D(0, 0, 0);
  -ms-transform: translate3D(0, 0, 0);
  transform: translate3D(0, 0, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollDown p.is-viewport.inViewport,
.onScrollDown ul.is-viewport.inViewport, .onBottom p.is-viewport.inViewport,
.onBottom ul.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: translate3D(0, 0, 0);
  -ms-transform: translate3D(0, 0, 0);
  transform: translate3D(0, 0, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 40ms;
}
.onScrollDown .button.is-viewport.inViewport, .onBottom .button.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: scale(1) translateZ(0);
  -ms-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 80ms;
}

.onScrollUp .titre-big.is-viewport.inViewport, .onScrollUp .titre-normal.is-viewport.inViewport, .onTop .titre-big.is-viewport.inViewport, .onTop .titre-normal.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: translate3D(0, 0, 0);
  -ms-transform: translate3D(0, 0, 0);
  transform: translate3D(0, 0, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollUp .titre-big.is-viewport.outViewport, .onScrollUp .titre-normal.is-viewport.outViewport, .onTop .titre-big.is-viewport.outViewport, .onTop .titre-normal.is-viewport.outViewport {
  opacity: 0;
  -webkit-transform: translate3D(0, 100px, 0);
  -ms-transform: translate3D(0, 100px, 0);
  transform: translate3D(0, 100px, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollUp #journal .button.is-viewport.outViewport, .onTop #journal .button.is-viewport.outViewport {
  opacity: 0;
  -webkit-transform: scale(0.8) translateZ(0);
  -ms-transform: scale(0.8) translateZ(0);
  transform: scale(0.8) translateZ(0);
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.onScrollUp #journal .button.is-viewport.inViewport, .onTop #journal .button.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: scale(1) translateZ(0);
  -ms-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollUp .screen .is-viewport.outViewport:not(.button), .onTop .screen .is-viewport.outViewport:not(.button) {
  opacity: 0;
  -webkit-transform: translate3D(0, -100px, 0);
  -ms-transform: translate3D(0, -100px, 0);
  transform: translate3D(0, -100px, 0);
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.onScrollUp .screen .button.is-viewport.outViewport, .onTop .screen .button.is-viewport.outViewport {
  opacity: 0;
  -webkit-transform: scale(0.8) translateZ(0);
  -ms-transform: scale(0.8) translateZ(0);
  transform: scale(0.8) translateZ(0);
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.onScrollUp .screen .animation-container.is-viewport.outViewport p,
.onScrollUp .screen .animation-container.is-viewport.outViewport ul, .onTop .screen .animation-container.is-viewport.outViewport p,
.onTop .screen .animation-container.is-viewport.outViewport ul {
  opacity: 0;
  -webkit-transform: translate3D(0, -100px, 0);
  -ms-transform: translate3D(0, -100px, 0);
  transform: translate3D(0, -100px, 0);
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.onScrollUp .screen .animation-container.is-viewport.inViewport p,
.onScrollUp .screen .animation-container.is-viewport.outViewport ul, .onTop .screen .animation-container.is-viewport.inViewport p,
.onTop .screen .animation-container.is-viewport.outViewport ul {
  opacity: 1;
  transform: translate3D(0, 0px, 0);
  -webkit-transform: translate3D(0, 0px, 0);
  -ms-transform: translate3D(0, 0px, 0);
  transform: translate3D(0, 0px, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}
.onScrollUp .titre-big.is-viewport.inViewport, .onScrollUp .titre-normal.is-viewport.inViewport, .onTop .titre-big.is-viewport.inViewport, .onTop .titre-normal.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: translate3D(0, 0px, 0);
  -ms-transform: translate3D(0, 0px, 0);
  transform: translate3D(0, 0px, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 80ms;
}
.onScrollUp p.is-viewport.inViewport,
.onScrollUp ul.is-viewport.inViewport, .onTop p.is-viewport.inViewport,
.onTop ul.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: translate3D(0, 0px, 0);
  -ms-transform: translate3D(0, 0px, 0);
  transform: translate3D(0, 0px, 0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 40ms;
}
.onScrollUp .button.is-viewport.inViewport, .onTop .button.is-viewport.inViewport {
  opacity: 1;
  -webkit-transform: scale(1) translateZ(0);
  -ms-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  -moz-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -o-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  -webkit-transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
  transition: all 640ms cubic-bezier(0.645, 0.05, 0.355, 1);
}

.slide .animated {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translate3D(0, 100px, 0);
  -ms-transform: translate3D(0, 100px, 0);
  transform: translate3D(0, 100px, 0);
}
.slide.on h1 .animation-container:nth-child(1) .animated, .slide.on h2 .animation-container:nth-child(1) .animated, .slide.on h3 .animation-container:nth-child(1) .animated {
  --nth-child:1 ;
}
.slide.on h1 .animation-container:nth-child(2) .animated, .slide.on h2 .animation-container:nth-child(2) .animated, .slide.on h3 .animation-container:nth-child(2) .animated {
  --nth-child:2 ;
}
.slide.on h1 .animation-container:nth-child(3) .animated, .slide.on h2 .animation-container:nth-child(3) .animated, .slide.on h3 .animation-container:nth-child(3) .animated {
  --nth-child:3 ;
}
.slide.on h1 .animation-container:nth-child(4) .animated, .slide.on h2 .animation-container:nth-child(4) .animated, .slide.on h3 .animation-container:nth-child(4) .animated {
  --nth-child:4 ;
}
.slide.on .animated {
  display: inline-block;
  animation: 4s showtext;
  animation-delay: calc(var(--nth-child) * 80ms);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.onSystemLoad .layer.media.video video {
  opacity: 0;
}

.layer.media.video video {
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.645, 0.05, 0.355, 1);
}

@keyframes opacityFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showtext {
  0% {
    -webkit-transform: translate3D(0, 100px, 0);
    -ms-transform: translate3D(0, 100px, 0);
    transform: translate3D(0, 100px, 0);
    opacity: 0;
  }
  10% {
    -webkit-transform: translate3D(0, 0, 0);
    -ms-transform: translate3D(0, 0, 0);
    transform: translate3D(0, 0, 0);
    opacity: 1;
  }
  90% {
    -webkit-transform: translate3D(0, 0, 0);
    -ms-transform: translate3D(0, 0, 0);
    transform: translate3D(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3D(0, -100px, 0);
    -ms-transform: translate3D(0, -100px, 0);
    transform: translate3D(0, -100px, 0);
    opacity: 0;
  }
}
main {
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0.5s;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.on-overlay main {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}

.overlay {
  top: 0;
  left: 100vw;
  width: 100vw;
  height: 100vh;
  transition: left 0.8s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.overlay .button.close {
  -webkit-transform: translate3D(20px, 0, 0);
  -ms-transform: translate3D(20px, 0, 0);
  transform: translate3D(20px, 0, 0);
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}
.overlay.on {
  width: 100vw;
  left: 0vw;
  transition: left 1.2s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0ms;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.overlay.on .button.close {
  opacity: 1;
  transform: translate3D(0, 0, 0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0.4s;
}
.overlay.onload .scroll-container {
  opacity: 0;
  transition: opacity 0s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}
.overlay.onload .scroll-container:after {
  opacity: 0;
  transition: opacity 0s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}
.overlay .scroll-container {
  opacity: 1;
  transition: opacity 2s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}
.overlay .scroll-container:after {
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}

.form-overlay {
  transition: bottom 0.8s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.form-overlay.on {
  bottom: 0vh;
  transition: bottom 0.8s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0ms;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.form-overlay.on .button.close {
  opacity: 1;
  -webkit-transform: translate3D(0, 0, 0);
  -ms-transform: translate3D(0, 0, 0);
  transform: translate3D(0, 0, 0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0.4s;
}

nav.menus-overlay {
  bottom: 0;
  height: 0vh;
  transition: height 0.8s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
nav.menus-overlay .menu_first, nav.menus-overlay .menu_second, nav.menus-overlay .button.close {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0ms;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
nav.menus-overlay.on {
  height: 100%;
  transition: height 0.8s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0ms;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
nav.menus-overlay.on .menu_first, nav.menus-overlay.on .menu_second {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0.5s;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
nav.menus-overlay.on .button.close {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0.8s;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

#equipe .content article .square-container.outViewport .layer.white,
#equipe .content article .square-container.outViewport .layer.white {
  opacity: 1;
  transition: opacity 0s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}
#equipe .content article .square-container.outViewport img, #equipe .content article .square-container.outViewport span,
#equipe .content article .square-container.outViewport img,
#equipe .content article .square-container.outViewport span {
  transform: scale(1);
  transition: transform 0s cubic-bezier(0.645, 0.05, 0.355, 1), opacity 0s cubic-bezier(0.645, 0.05, 0.355, 1);
  transition-delay: 0s;
}
#equipe .content article .text.outViewport h3, #equipe .content article .text.outViewport h4,
#equipe .content article .text.outViewport h3,
#equipe .content article .text.outViewport h4 {
  -webkit-transform: translate3D(0, 50px, 0);
  -ms-transform: translate3D(0, 50px, 0);
  transform: translate3D(0, 50px, 0);
  transition: transform 0s cubic-bezier(0.645, 0.05, 0.355, 1);
}
#equipe .content article .square-container.inViewport .layer.white {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.65, 0, 0.35, 1);
}
#equipe .content article .square-container.inViewport img, #equipe .content article .square-container.inViewport span {
  opacity: 1;
  transform: scale(1.1);
  -webkit-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
  transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
#equipe .content article .text.inViewport h3, #equipe .content article .text.inViewport h4 {
  -webkit-transform: translate3D(0, 0px, 0);
  -ms-transform: translate3D(0, 0px, 0);
  transform: translate3D(0, 0px, 0);
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}
#equipe .content article {
  opacity: 0;
}
#equipe .content article:nth-child(3n-2) {
  opacity: 1;
}
#equipe .content article:nth-child(3n-2) .square-container.inViewport .layer.white,
#equipe .content article:nth-child(3n-2) .square-container.inViewport img, #equipe .content article:nth-child(3n-2) .square-container.inViewport span {
  transition-delay: 0.1s;
}
#equipe .content article:nth-child(3n-2) .text.inViewport h3 {
  transition-delay: 0.1s;
}
#equipe .content article:nth-child(3n-2) .text.inViewport h4 {
  transition-delay: 0.3s;
}
#equipe .content article:nth-child(3n-1) {
  opacity: 1;
}
#equipe .content article:nth-child(3n-1) .square-container.inViewport .layer.white,
#equipe .content article:nth-child(3n-1) .square-container.inViewport img, #equipe .content article:nth-child(3n-1) .square-container.inViewport span {
  transition-delay: 0.3s;
}
#equipe .content article:nth-child(3n-1) .text.inViewport h3 {
  transition-delay: 0.3s;
}
#equipe .content article:nth-child(3n-1) .text.inViewport h4 {
  transition-delay: 0.5s;
}
#equipe .content article:nth-child(3n) {
  opacity: 1;
}
#equipe .content article:nth-child(3n) .square-container.inViewport .layer.white,
#equipe .content article:nth-child(3n) .square-container.inViewport img, #equipe .content article:nth-child(3n) .square-container.inViewport span {
  transition-delay: 0.5s;
}
#equipe .content article:nth-child(3n) .text.inViewport h3 {
  transition-delay: 0.5s;
}
#equipe .content article:nth-child(3n) .text.inViewport h4 {
  transition-delay: 0.7s;
}

@media only screen and (min-width: 768px) {
  time {
    font-size: 0.8em;
    margin-bottom: 5px;
  }
  .list-references {
    column-count: 3;
    text-align: left;
  }
  .list-references .element {
    display: inline-block;
    width: 100%;
    font-size: 0.7em;
    line-height: 2em;
    font-weight: 400;
    margin-bottom: 15px;
  }
  .list-references .element h3 {
    font-family: "roboto";
    font-weight: 100;
    font-size: 12px;
    text-transform: none;
    text-align: left;
    padding: 0;
  }
  video.mobile {
    display: none;
  }
  video.desktop {
    display: block;
  }
  .case-collection {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .case-collection .square {
    width: 50%;
    height: 50vw;
    max-width: 800px;
    max-height: 500px;
  }
  .case-collection .square.text {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .case-collection:nth-child(even) {
    flex-direction: row;
  }
  .case-collection:nth-child(odd) {
    flex-direction: row-reverse;
  }
  footer .content .agences {
    font-size: 1em;
    max-width: 850px;
  }
  .titre-big {
    font-size: 5.5vw;
    line-height: 1.2em;
  }
  .titre-medium {
    font-size: 4.5vw;
  }
  .titre-normal {
    font-size: 3.5vw;
  }
  #journal.last-news {
    text-align: center;
  }
  #journal.last-news h2 {
    font-size: 14px;
  }
  #journal.last-news .content {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 40px;
  }
  #journal.last-news .content .actu {
    width: 25%;
    height: 25vw;
    min-height: 250px;
    max-width: 400px;
    max-height: 400px;
    border-bottom: 1px #e4e4e4 solid;
  }
  #journal.last-news .content .actu.pined {
    position: absolute;
    height: 28vw;
    right: 10px;
    top: max(-420px, min(-290px, -28vw - 40px));
    padding: 10px;
    max-height: 380px;
  }
  #journal.last-news .content .actu.pined .text {
    padding: 0;
  }
  #journal.last-news .content .actu .bloc {
    flex-direction: column;
  }
  #journal.last-news .content .actu .bloc figure, #journal.last-news .content .actu .bloc .no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
    width: 100%;
    height: 12.2222222222vw;
    max-height: 250px;
    color: white;
    text-align: center;
    font-size: 1.4em;
  }
  #journal.last-news .content .actu .bloc .text {
    position: relative;
    left: inherit;
    right: inherit;
    padding: 0;
    padding-right: 10px;
    height: auto;
  }
  #journal.last-news .content .actu .bloc .text h3 {
    font-size: 0.8em;
    margin-bottom: 5px;
  }
  #journal.last-news .content .actu .bloc .text h4, #journal.last-news .content .actu .bloc .text h2.h4 {
    font-size: 0.7em;
  }
  #journal.full h1 {
    display: inline-block;
    margin-top: 15vh;
    margin-bottom: 10vh;
    margin-right: 20vw;
  }
  #journal.full .content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
  }
  #journal.full .content .actu {
    max-width: 320px;
    height: 410px;
    margin: 15px;
    border-bottom: 1px #e4e4e4 solid;
  }
  #journal.full .content .actu:nth-child(1) {
    height: 410px;
    margin: 15px;
  }
  #journal.full .content .actu:nth-child(1) .bloc .text h4, #journal.full .content .actu:nth-child(1) .bloc .text h2.h4 {
    font-size: 0.8em;
  }
  #journal.full .content .actu:nth-child(1) .bloc .text .summary {
    font-size: 0.9em;
    letter-spacing: 0.05em;
    line-height: 1.5em;
  }
  #journal.full .content .actu .bloc:before {
    bottom: 0px;
  }
  #journal.full .content .actu .bloc figure, #journal.full .content .actu .bloc .no-image {
    position: relative;
    width: 100%;
    height: 170px;
    font-size: 1.4em;
  }
  #journal.full .content .actu .bloc .text {
    position: relative;
    left: inherit;
    right: inherit;
    padding: 20px 0px 15px 0px;
    margin-bottom: 30px;
    height: auto;
  }
  #journal.full .content .actu .bloc .text h3 {
    font-size: 1em;
    line-height: 1.2em;
    padding-right: 10px;
  }
  #journal.full .content .actu .bloc .text h4, #journal.full .content .actu .bloc .text h2.h4 {
    font-size: 0.8em;
    line-height: 1.6em;
    margin-bottom: 15px;
    max-height: 34px;
    overflow: hidden;
  }
  #journal.full .content .actu .bloc .text .summary {
    letter-spacing: 0.05em;
    display: block;
    font-size: 0.9em;
    line-height: 1.5em;
    font-weight: 100;
    overflow: hidden;
  }
  #services input#filter {
    max-width: 400px;
  }
  #services.full h1 {
    display: inline-block;
    margin-top: 15vh;
    margin-bottom: 10vh;
    margin-right: 20vw;
  }
  #services.full .content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
  }
  #services.full .content .service {
    max-width: 320px;
    height: 200px;
    margin: 15px;
  }
  #services.full .content .service .bloc:before {
    bottom: 0px;
  }
  #services.full .content .service .bloc figure, #services.full .content .service .bloc .no-image {
    position: relative;
    width: 100%;
    height: 170px;
    font-size: 1.4em;
  }
  #services.full .content .service .bloc .text {
    position: relative;
    left: inherit;
    right: inherit;
    padding: 20px 0px 15px 0px;
    margin-bottom: 30px;
    height: auto;
  }
  #services.full .content .service .bloc .text h3 {
    font-size: 1em;
    line-height: 1.2em;
    padding-right: 10px;
  }
  #services.full .content .service .bloc .text h4, #services.full .content .service .bloc .text h2.h4 {
    font-size: 0.8em;
    line-height: 1.6em;
    margin-bottom: 15px;
    max-height: 34px;
    overflow: hidden;
  }
  #services.full .content .service .bloc .text .summary {
    letter-spacing: 0.05em;
    display: block;
    font-size: 0.9em;
    line-height: 1.5em;
    font-weight: 100;
    overflow: hidden;
  }
  #equipe h1 {
    font-size: 22px;
  }
  #equipe .content .item .bloc .square-container .initials {
    font-size: 4em;
  }
  #equipe .content .item .bloc .text h3 {
    font-size: 1.6em;
  }
  /*
  #equipe{
    &.full{
      h1{
        display: inline-block;
        margin-top: 15vh;
        margin-bottom: 10vh;
        margin-right: 20vw;
      }
      .content{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: center;
        width: 100%;
        .actu{
          max-width: 320px;
          height: 410px;
          margin: 15px;
          border-bottom: 1px #e4e4e4 solid;
          &:nth-child(1){
            height: 410px;
            margin: 15px;
            .bloc{
              figure{

              }
              .text{

                h3{

                }
                h4{
                  font-size: .8em;
                }
                .summary{
                  font-size: .9em;
                  letter-spacing: .05em;
                  line-height: 1.5em;
                }
              }
            }
          }
          &.pined{
          }
          .bloc{
            &:before{
              bottom: 0px;
            }
            figure{
              position: relative;
              width: 100%;
              height: 170px;
            }
            .text{
              position: relative;
              left: inherit;
              right: inherit;
              padding: 20px 0px 15px 0px;
              margin-bottom: 30px;
              h3{
                font-size: 1em;
                line-height: 1.2em;
                padding-right: 10px;
              }
              h4{
                font-size: .8em;
                line-height: 1.2em;
                margin-bottom: 15px;
              }
              .summary{
                letter-spacing: .05em;
                display: block;
                font-size: .9em;

                line-height: 1.5em;
                height: 64px;
                font-weight: 100;
                overflow: hidden;
                margin-bottom: 20px;
              }
            }
          }
        }
      }


    }
    }
   */
  .content table {
    table-layout: fixed;
    width: 100%;
    text-align: left;
  }
  .content table thead th:nth-child(1) {
    width: 40%;
  }
  .content table thead th:nth-child(2) {
    width: 20%;
  }
  .content table thead th:nth-child(3) {
    width: 15%;
  }
  .content table thead th:nth-child(4) {
    width: 35%;
  }
  .content table th, .content table td {
    height: 60px;
    vertical-align: middle;
  }
  .content form #edit-nom, .content form #edit-prenom, .content form #edit-email, .content form #edit-telephone,
  .content form input[data-drupal-selector=edit-nom], .content form input[data-drupal-selector=edit-prenom],
  .content form input[data-drupal-selector=edit-email], .content form input[data-drupal-selector=edit-telephone] {
    width: calc(50% - 10px);
    margin-bottom: 20px;
  }
  .onScrollDown #journal .content .actu:nth-child(1), .onBottom #journal .content .actu:nth-child(1) {
    --nth-child: 1 ;
  }
  .onScrollDown #journal .content .actu:nth-child(2), .onBottom #journal .content .actu:nth-child(2) {
    --nth-child: 2 ;
  }
  .onScrollDown #journal .content .actu:nth-child(3), .onBottom #journal .content .actu:nth-child(3) {
    --nth-child: 3 ;
  }
  .onScrollDown #journal .content .actu:nth-child(4), .onBottom #journal .content .actu:nth-child(4) {
    --nth-child: 4 ;
  }
  .onScrollDown #journal .content .actu:nth-child(5), .onBottom #journal .content .actu:nth-child(5) {
    --nth-child: 5 ;
  }
  .onScrollDown #journal .content .actu.is-viewport.outViewport, .onBottom #journal .content .actu.is-viewport.outViewport {
    opacity: 0;
    -webkit-transform: translate(0, 100px) scale(0.8);
    -ms-transform: translate(0, 100px) scale(0.8);
    transform: translate(0, 100px) scale(0.8);
    transition: none;
  }
  .onScrollDown #journal .content .actu.is-viewport.inViewport, .onBottom #journal .content .actu.is-viewport.inViewport {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    transition: all 500ms cubic-bezier(0.645, 0.05, 0.355, 1);
    transition-delay: calc(var(--nth-child) * 40ms);
  }
  .onScrollUp #journal .content .actu:nth-child(1), .onTop #journal .content .actu:nth-child(1) {
    --nth-child: 1 ;
  }
  .onScrollUp #journal .content .actu:nth-child(2), .onTop #journal .content .actu:nth-child(2) {
    --nth-child: 2 ;
  }
  .onScrollUp #journal .content .actu:nth-child(3), .onTop #journal .content .actu:nth-child(3) {
    --nth-child: 3 ;
  }
  .onScrollUp #journal .content .actu:nth-child(4), .onTop #journal .content .actu:nth-child(4) {
    --nth-child: 4 ;
  }
  .onScrollUp #journal .content .actu:nth-child(5), .onTop #journal .content .actu:nth-child(5) {
    --nth-child: 5 ;
  }
  .onScrollUp #journal .content .actu.is-viewport.outViewport, .onTop #journal .content .actu.is-viewport.outViewport {
    opacity: 0;
    -webkit-transform: translate(0, -100px) scale(0.8);
    -ms-transform: translate(0, -100px) scale(0.8);
    transform: translate(0, -100px) scale(0.8);
    transition: none;
  }
  .onScrollUp #journal .content .actu.is-viewport.inViewport, .onTop #journal .content .actu.is-viewport.inViewport {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    transition: all 500ms cubic-bezier(0.645, 0.05, 0.355, 1);
    transition-delay: calc(var(--nth-child) * 80ms);
  }
  #contact .content form #edit-name, #contact .content form #edit-email,
  #contact .content form #edit-submitted-nom, #contact .content form #edit-submitted-email {
    width: calc(50% - 10px);
    margin-bottom: 20px;
  }
  p, ul {
    font-size: 1.2em;
  }
  .actu a.edit-link {
    top: 10px;
    right: 10px;
    left: initial;
  }
  .actu.pined a.edit-link {
    top: 20px;
    right: 20px;
    left: initial;
  }
}
@media only screen and (min-width: 1080px) {
  #journal.last-news .content .actu.pined {
    right: 20px;
  }
  #journal.last-news .content .actu .bloc .text h3 {
    font-size: 1em;
  }
  #journal.last-news .content .actu .bloc .text h4, #journal.last-news .content .actu .bloc .text h2.h4 {
    font-size: 0.8em;
  }
  #services.last-news .content .service.pined {
    right: 20px;
  }
  #services.last-news .content .service .bloc .text h3 {
    font-size: 1em;
  }
  #services.last-news .content .service .bloc .text h4, #services.last-news .content .service .bloc .text h2.h4 {
    font-size: 0.8em;
  }
}
@media only screen and (orientation: landscape) {
  main header {
    height: calc(100vh - 100px 20);
  }
  main header.title {
    height: 50vh;
  }
  main header.title h1 {
    font-size: 6em;
  }
  main .header-full-width {
    flex-direction: column;
    height: auto;
    align-items: center;
  }
  main .header-full-width header {
    width: 100%;
    height: calc(100vh - 150px 20);
  }
  main .header-full-width header.title {
    height: 50vh;
  }
  .marge {
    display: block;
    height: 40px;
  }
  .first-content {
    display: flex;
    flex-direction: row-reverse;
    margin: 0;
    height: 50vw;
  }
  .first-content.header-full-width {
    flex-direction: column;
    height: auto;
    align-items: center;
  }
  .first-content.header-full-width header {
    width: 100%;
    height: calc(100vh - 150px 20);
  }
  .first-content.header-full-width header.title {
    height: 50vh;
  }
  .first-content.header-full-width header.title h1 {
    font-size: 6em;
  }
  .first-content.header-full-width .text-container {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
  }
  .first-content.people {
    height: calc(100vh - 50px);
  }
  .first-content header {
    width: 50%;
    height: 100%;
  }
  .first-content header figure {
    width: 100%;
    height: 100%;
  }
  .first-content .content {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
  }
}