/* Scss file */
@font-face {
  font-family: "archivo-narrow";
  src: url("../fonts/archivonarrow-regular-webfont.woff2") format("woff2"), url("../fonts/archivonarrow-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivo-regular-webfont.woff2") format("woff2"), url("../fonts/archivo-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivo-bold-webfont.woff2") format("woff2"), url("../fonts/archivo-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivo-semibold-webfont.woff2") format("woff2"), url("../fonts/archivo-semibold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivo-italic-webfont.woff2") format("woff2"), url("../fonts/archivo-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "archivo";
  src: url("../fonts/archivoblack-regular-webfont.woff2") format("woff2"), url("../fonts/archivoblack-regular-webfont.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}
/* # MAGIK */
.btn-inline {
  display: inline-block !important;
}

.btn-fullwidth {
  width: 100% !important;
  text-align: center;
}

@media (min-width: 1000px) {
  .btn-larger {
    padding-left: 55px;
    padding-right: 55px;
  }
}
.btn-noborder {
  border: 0 !important;
  padding-left: 22px !important;
}

.nectar-button.small.has-icon .icon-button-arrow {
  top: 5px !important;
}

.text-white p, .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
  color: #fff;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

@media (min-width: 1200px) {
  .text-right--lg {
    text-align: right;
  }
}
/* # SALIENT */
/* no underline on buttons in header */
#header-outer[data-lhe=animated_underline] .nectar-header-text-content a.nectar-button:after {
  display: none !important;
}

#slide-out-widget-area .secondary-header-text, body #slide-out-widget-area .inner-wrap .inner .nectar-header-text-content {
  background-color: transparent;
}

/* tjrs trop haut */
body #header-outer[data-lhe=animated_underline] #top nav > ul > li:not([class*=button_]) > a .menu-title-text:after,
body #header-secondary-outer[data-lhe=animated_underline] nav > .sf-menu > li:not([class*=button_]) > a .menu-title-text:after,
body #header-outer[data-lhe=animated_underline] .nectar-header-text-content a:after, .sf-menu li ul li a .menu-title-text:after {
  bottom: -10px;
}

.bg-contain .row-bg {
  background-size: contain !important;
}

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

/* salient overrides */
/* layout */
body.material .nectar-button.large {
  padding: 22px 56px;
  font-size: 16px;
}

small {
  font-size: 12px;
}

.text-uppercase {
  text-transform: uppercase;
}

@media (min-width: 1000px) {
  .text-right-md {
    text-align: right;
  }
}
.text-lead {
  font-family: "Suez One", sans-serif;
  text-transform: uppercase;
  line-height: 1.2;
  font-size: 22px;
}

.text-accent {
  font-family: "Suez One", sans-serif;
  text-transform: uppercase;
  line-height: 1.2;
}

.title-h1 p {
  font-size: 30px;
  font-family: "archivo", sans-serif;
  text-transform: uppercase;
  line-height: 32px;
  font-weight: 800;
}

/* the following code is for the very very large headers
 * large menus, that have lots of words... well. this helps 
 * bless you */
@media (min-width: 1000px) {
  header#top .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
body #slide-out-widget-area .inner-wrap .inner .nectar-header-text-content {
  background-color: transparent !important;
}

.nectar-button.header-button {
  padding-left: 25px !important;
  padding-right: 25px !important;
}
.nectar-button.header-button span {
  color: #fff !important;
}

@media (max-width: 1200px) {
  .nectar-button.header-button {
    display: none !important;
  }
}
.nectar-header-text-content,
#header-outer.transparent #top nav > ul > li a {
  opacity: 1 !important;
}

#header-outer.transparent #top nav > ul > li.current-menu-item > a,
#header-outer.transparent #top nav > .sf-menu > li.current-menu-item > a,
#header-outer.transparent #top nav > .sf-menu > li:hover > a {
  color: #6a1f74 !important;
}

/* rotate the logo */
#header-outer .col.span_3 a {
  -webkit-animation: rotating 10s linear infinite;
  -moz-animation: rotating 10s linear infinite;
  -ms-animation: rotating 10s linear infinite;
  -o-animation: rotating 10s linear infinite;
  animation: rotating 10s linear infinite;
}

/* no underline */
body #header-outer[data-lhe=animated_underline] #top nav > ul > li:not([class*=button_]) > a .menu-title-text:after {
  display: none !important;
}

.magik-wpml {
  display: inline-block;
  border: 2px solid #000;
  text-transform: uppercase;
  font-family: "archivo", sans-serif;
  font-weight: 800;
  padding: 8px;
  vertical-align: middle;
  margin-right: 20px;
}
.magik-wpml a {
  display: inline-block;
}
.magik-wpml a:after {
  display: none !important;
}
.magik-wpml a.active {
  color: #6a1f74 !important;
}
.magik-wpml a:first-child {
  padding-right: 7px !important;
  border-right: 2px solid #000;
}
.magik-wpml a:last-child {
  padding-left: 7px;
}

.mobile-only .magik-wpml a.active {
  color: #fff !important;
}

html[lang=en-CA] #logo {
  opacity: 0;
}

.footer-global .img-with-aniamtion-wrap {
  display: inline-block;
}

.footer-logos {
  padding-top: 30px;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-logos {
    padding-top: 0;
  }
}
.footer-logos .img-with-aniamtion-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  margin-right: 15px;
}
.footer-logos .img-with-aniamtion-wrap img {
  height: auto !important;
}
@media (max-width: 1000px) {
  .footer-logos .img-with-aniamtion-wrap img {
    margin-bottom: 30px !important;
  }
}

.footer-last-row {
  margin-bottom: -1.5rem !important;
}

.footer-info .img-with-aniamtion-wrap {
  display: inline-block;
  vertical-align: middle;
}
.footer-info .wpb_text_column {
  vertical-align: middle;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .footer-info .wpb_text_column {
    display: inline-block;
    margin-top: 0;
    margin-left: 20px;
  }
}
.footer-info .wpb_text_column h2 {
  margin-bottom: 0;
}
.footer-info .wpb_text_column a {
  color: #fff !important;
  text-transform: uppercase;
}

.logo-footer {
  width: 113px;
  height: auto !important;
}

.logo-strass {
  width: 153px;
  height: auto !important;
}

.img-footer-mrc {
  width: 91px;
}

.img-footer-police {
  width: 60px;
}

.img-footer-sq {
  width: 64px;
}

.img-footer-ciusss {
  width: 117px;
}

.img-footer-relais {
  width: 81px;
}

.img-footer-zonelibre {
  width: 85px;
}

.img-footer-etsb {
  width: 165px;
}

.img-footer-cssommets {
  width: 121px;
}

.img-footer-ruche {
  width: 63px;
}

.footer-menu ul, .footer-menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1000px) {
  .footer-menu {
    text-align: center;
  }
}
.footer-menu li.current-menu-item a {
  color: #ef6949;
}
.footer-menu a {
  font-family: "archivo";
  font-weight: 800;
  text-transform: uppercase;
}
.footer-menu a:hover {
  color: #ef6949 !important;
}

/* modules */
/*! * * * * * * * * * * * * * * * * * * * *\  
  CSShake :: Package
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake, .shake-little, .shake-slow, .shake-hard, .shake-horizontal, .shake-vertical, .shake-rotate, .shake-opacity, .shake-crazy, .shake-chunk {
  display: inherit;
  transform-origin: center center;
}

.shake-freeze,
.shake-constant.shake-constant--hover:hover,
.shake-trigger:hover .shake-constant.shake-constant--hover {
  animation-play-state: paused;
}

.shake-freeze:hover,
.shake-trigger:hover .shake-freeze, .shake:hover,
.shake-trigger:hover .shake, .shake-little:hover,
.shake-trigger:hover .shake-little, .shake-slow:hover,
.shake-trigger:hover .shake-slow, .shake-hard:hover,
.shake-trigger:hover .shake-hard, .shake-horizontal:hover,
.shake-trigger:hover .shake-horizontal, .shake-vertical:hover,
.shake-trigger:hover .shake-vertical, .shake-rotate:hover,
.shake-trigger:hover .shake-rotate, .shake-opacity:hover,
.shake-trigger:hover .shake-opacity, .shake-crazy:hover,
.shake-trigger:hover .shake-crazy, .shake-chunk:hover,
.shake-trigger:hover .shake-chunk {
  animation-play-state: running;
}

@keyframes shake {
  2% {
    transform: translate(0.5px, -0.5px) rotate(0.5deg);
  }
  4% {
    transform: translate(2.5px, 1.5px) rotate(1.5deg);
  }
  6% {
    transform: translate(2.5px, 0.5px) rotate(0.5deg);
  }
  8% {
    transform: translate(0.5px, -0.5px) rotate(0.5deg);
  }
  10% {
    transform: translate(-0.5px, -1.5px) rotate(1.5deg);
  }
  12% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }
  14% {
    transform: translate(-1.5px, 1.5px) rotate(1.5deg);
  }
  16% {
    transform: translate(2.5px, 1.5px) rotate(1.5deg);
  }
  18% {
    transform: translate(0.5px, -0.5px) rotate(-0.5deg);
  }
  20% {
    transform: translate(0.5px, 1.5px) rotate(0.5deg);
  }
  22% {
    transform: translate(2.5px, -0.5px) rotate(0.5deg);
  }
  24% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }
  26% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg);
  }
  28% {
    transform: translate(0.5px, 0.5px) rotate(-0.5deg);
  }
  30% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }
  32% {
    transform: translate(0.5px, 0.5px) rotate(0.5deg);
  }
  34% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg);
  }
  36% {
    transform: translate(1.5px, 2.5px) rotate(1.5deg);
  }
  38% {
    transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
  }
  40% {
    transform: translate(0.5px, -0.5px) rotate(1.5deg);
  }
  42% {
    transform: translate(2.5px, -1.5px) rotate(-0.5deg);
  }
  44% {
    transform: translate(-1.5px, -1.5px) rotate(0.5deg);
  }
  46% {
    transform: translate(1.5px, 0.5px) rotate(0.5deg);
  }
  48% {
    transform: translate(0.5px, -0.5px) rotate(-0.5deg);
  }
  50% {
    transform: translate(0.5px, 1.5px) rotate(0.5deg);
  }
  52% {
    transform: translate(0.5px, -0.5px) rotate(0.5deg);
  }
  54% {
    transform: translate(2.5px, 0.5px) rotate(1.5deg);
  }
  56% {
    transform: translate(-1.5px, -1.5px) rotate(0.5deg);
  }
  58% {
    transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
  }
  60% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }
  62% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }
  64% {
    transform: translate(0.5px, 2.5px) rotate(0.5deg);
  }
  66% {
    transform: translate(0.5px, 0.5px) rotate(1.5deg);
  }
  68% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }
  70% {
    transform: translate(-1.5px, 1.5px) rotate(1.5deg);
  }
  72% {
    transform: translate(-0.5px, 2.5px) rotate(1.5deg);
  }
  74% {
    transform: translate(1.5px, 2.5px) rotate(-0.5deg);
  }
  76% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }
  78% {
    transform: translate(1.5px, -1.5px) rotate(0.5deg);
  }
  80% {
    transform: translate(-0.5px, 2.5px) rotate(0.5deg);
  }
  82% {
    transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }
  84% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }
  86% {
    transform: translate(0.5px, -0.5px) rotate(-0.5deg);
  }
  88% {
    transform: translate(-1.5px, 2.5px) rotate(-0.5deg);
  }
  90% {
    transform: translate(1.5px, 0.5px) rotate(0.5deg);
  }
  92% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }
  94% {
    transform: translate(0.5px, -1.5px) rotate(1.5deg);
  }
  96% {
    transform: translate(0.5px, 1.5px) rotate(-0.5deg);
  }
  98% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake:hover,
.shake-trigger:hover .shake, .shake.shake-freeze, .shake.shake-constant {
  animation-name: shake;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-little {
  2% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  4% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  6% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  8% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  10% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  12% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  14% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  16% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  18% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  20% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  22% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  24% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  26% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  28% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  30% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  32% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  34% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  36% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  38% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  40% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  42% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  44% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  46% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  48% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  50% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  52% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  54% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  56% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  58% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  60% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  62% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  64% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  66% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  68% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  70% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  72% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  74% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  76% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  78% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  80% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  82% {
    transform: translate(1px, 0px) rotate(0.5deg);
  }
  84% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  86% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  88% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  90% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  92% {
    transform: translate(0px, 1px) rotate(0.5deg);
  }
  94% {
    transform: translate(0px, 0px) rotate(0.5deg);
  }
  96% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  98% {
    transform: translate(1px, 1px) rotate(0.5deg);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-little:hover,
.shake-trigger:hover .shake-little, .shake-little.shake-freeze, .shake-little.shake-constant {
  animation-name: shake-little;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-slow {
  2% {
    transform: translate(6px, -2px) rotate(3.5deg);
  }
  4% {
    transform: translate(5px, 8px) rotate(-0.5deg);
  }
  6% {
    transform: translate(6px, -3px) rotate(-2.5deg);
  }
  8% {
    transform: translate(4px, -2px) rotate(1.5deg);
  }
  10% {
    transform: translate(-6px, 8px) rotate(-1.5deg);
  }
  12% {
    transform: translate(-5px, 5px) rotate(1.5deg);
  }
  14% {
    transform: translate(4px, 10px) rotate(3.5deg);
  }
  16% {
    transform: translate(0px, 4px) rotate(1.5deg);
  }
  18% {
    transform: translate(-1px, -6px) rotate(-0.5deg);
  }
  20% {
    transform: translate(6px, -9px) rotate(2.5deg);
  }
  22% {
    transform: translate(1px, -5px) rotate(-1.5deg);
  }
  24% {
    transform: translate(-9px, 6px) rotate(-0.5deg);
  }
  26% {
    transform: translate(8px, -2px) rotate(-1.5deg);
  }
  28% {
    transform: translate(2px, -3px) rotate(-2.5deg);
  }
  30% {
    transform: translate(9px, -7px) rotate(-0.5deg);
  }
  32% {
    transform: translate(8px, -6px) rotate(-2.5deg);
  }
  34% {
    transform: translate(-5px, 1px) rotate(3.5deg);
  }
  36% {
    transform: translate(0px, -5px) rotate(2.5deg);
  }
  38% {
    transform: translate(2px, 7px) rotate(-1.5deg);
  }
  40% {
    transform: translate(6px, 3px) rotate(-1.5deg);
  }
  42% {
    transform: translate(1px, -5px) rotate(-1.5deg);
  }
  44% {
    transform: translate(10px, -4px) rotate(-0.5deg);
  }
  46% {
    transform: translate(-2px, 2px) rotate(3.5deg);
  }
  48% {
    transform: translate(3px, 4px) rotate(-0.5deg);
  }
  50% {
    transform: translate(8px, 1px) rotate(-1.5deg);
  }
  52% {
    transform: translate(7px, 4px) rotate(-1.5deg);
  }
  54% {
    transform: translate(10px, 8px) rotate(-1.5deg);
  }
  56% {
    transform: translate(-3px, 0px) rotate(-0.5deg);
  }
  58% {
    transform: translate(0px, -1px) rotate(1.5deg);
  }
  60% {
    transform: translate(6px, 9px) rotate(-1.5deg);
  }
  62% {
    transform: translate(-9px, 8px) rotate(0.5deg);
  }
  64% {
    transform: translate(-6px, 10px) rotate(0.5deg);
  }
  66% {
    transform: translate(7px, 0px) rotate(0.5deg);
  }
  68% {
    transform: translate(3px, 8px) rotate(-0.5deg);
  }
  70% {
    transform: translate(-2px, -9px) rotate(1.5deg);
  }
  72% {
    transform: translate(-6px, 2px) rotate(1.5deg);
  }
  74% {
    transform: translate(-2px, 10px) rotate(-1.5deg);
  }
  76% {
    transform: translate(2px, 8px) rotate(2.5deg);
  }
  78% {
    transform: translate(6px, -2px) rotate(-0.5deg);
  }
  80% {
    transform: translate(6px, 8px) rotate(0.5deg);
  }
  82% {
    transform: translate(10px, 9px) rotate(3.5deg);
  }
  84% {
    transform: translate(-3px, -1px) rotate(3.5deg);
  }
  86% {
    transform: translate(1px, 8px) rotate(-2.5deg);
  }
  88% {
    transform: translate(-5px, -9px) rotate(2.5deg);
  }
  90% {
    transform: translate(2px, 8px) rotate(0.5deg);
  }
  92% {
    transform: translate(0px, -1px) rotate(1.5deg);
  }
  94% {
    transform: translate(-8px, -1px) rotate(0.5deg);
  }
  96% {
    transform: translate(-3px, 8px) rotate(-1.5deg);
  }
  98% {
    transform: translate(4px, 8px) rotate(0.5deg);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-slow:hover,
.shake-trigger:hover .shake-slow, .shake-slow.shake-freeze, .shake-slow.shake-constant {
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-hard {
  2% {
    transform: translate(-9px, 9px) rotate(2.5deg);
  }
  4% {
    transform: translate(2px, -4px) rotate(-0.5deg);
  }
  6% {
    transform: translate(7px, 1px) rotate(-1.5deg);
  }
  8% {
    transform: translate(10px, -8px) rotate(0.5deg);
  }
  10% {
    transform: translate(-5px, 10px) rotate(-2.5deg);
  }
  12% {
    transform: translate(6px, -9px) rotate(3.5deg);
  }
  14% {
    transform: translate(8px, 5px) rotate(3.5deg);
  }
  16% {
    transform: translate(-1px, -6px) rotate(2.5deg);
  }
  18% {
    transform: translate(3px, 3px) rotate(-2.5deg);
  }
  20% {
    transform: translate(-2px, 8px) rotate(-0.5deg);
  }
  22% {
    transform: translate(-7px, 3px) rotate(-2.5deg);
  }
  24% {
    transform: translate(-4px, -4px) rotate(-0.5deg);
  }
  26% {
    transform: translate(4px, -9px) rotate(-2.5deg);
  }
  28% {
    transform: translate(2px, 5px) rotate(3.5deg);
  }
  30% {
    transform: translate(8px, -1px) rotate(2.5deg);
  }
  32% {
    transform: translate(-7px, 7px) rotate(3.5deg);
  }
  34% {
    transform: translate(-3px, -1px) rotate(1.5deg);
  }
  36% {
    transform: translate(10px, 4px) rotate(3.5deg);
  }
  38% {
    transform: translate(-4px, -3px) rotate(-2.5deg);
  }
  40% {
    transform: translate(8px, 8px) rotate(2.5deg);
  }
  42% {
    transform: translate(-2px, 1px) rotate(1.5deg);
  }
  44% {
    transform: translate(4px, 2px) rotate(1.5deg);
  }
  46% {
    transform: translate(-1px, -7px) rotate(2.5deg);
  }
  48% {
    transform: translate(6px, -3px) rotate(-1.5deg);
  }
  50% {
    transform: translate(10px, -8px) rotate(0.5deg);
  }
  52% {
    transform: translate(1px, -2px) rotate(2.5deg);
  }
  54% {
    transform: translate(8px, 2px) rotate(-2.5deg);
  }
  56% {
    transform: translate(10px, 8px) rotate(0.5deg);
  }
  58% {
    transform: translate(8px, 3px) rotate(-0.5deg);
  }
  60% {
    transform: translate(6px, -2px) rotate(3.5deg);
  }
  62% {
    transform: translate(-6px, 1px) rotate(2.5deg);
  }
  64% {
    transform: translate(8px, 6px) rotate(-0.5deg);
  }
  66% {
    transform: translate(2px, -3px) rotate(-0.5deg);
  }
  68% {
    transform: translate(8px, -7px) rotate(-1.5deg);
  }
  70% {
    transform: translate(5px, 5px) rotate(0.5deg);
  }
  72% {
    transform: translate(2px, 1px) rotate(2.5deg);
  }
  74% {
    transform: translate(-3px, -4px) rotate(3.5deg);
  }
  76% {
    transform: translate(-1px, -7px) rotate(-1.5deg);
  }
  78% {
    transform: translate(9px, 2px) rotate(1.5deg);
  }
  80% {
    transform: translate(-3px, 9px) rotate(-1.5deg);
  }
  82% {
    transform: translate(8px, -7px) rotate(2.5deg);
  }
  84% {
    transform: translate(-6px, 10px) rotate(1.5deg);
  }
  86% {
    transform: translate(1px, -1px) rotate(2.5deg);
  }
  88% {
    transform: translate(-7px, -1px) rotate(0.5deg);
  }
  90% {
    transform: translate(-3px, 5px) rotate(-0.5deg);
  }
  92% {
    transform: translate(6px, 8px) rotate(-2.5deg);
  }
  94% {
    transform: translate(4px, 0px) rotate(1.5deg);
  }
  96% {
    transform: translate(2px, 5px) rotate(-1.5deg);
  }
  98% {
    transform: translate(-8px, 2px) rotate(-1.5deg);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-hard:hover,
.shake-trigger:hover .shake-hard, .shake-hard.shake-freeze, .shake-hard.shake-constant {
  animation-name: shake-hard;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-horizontal {
  2% {
    transform: translate(1px, 0) rotate(0);
  }
  4% {
    transform: translate(-5px, 0) rotate(0);
  }
  6% {
    transform: translate(-5px, 0) rotate(0);
  }
  8% {
    transform: translate(-9px, 0) rotate(0);
  }
  10% {
    transform: translate(-7px, 0) rotate(0);
  }
  12% {
    transform: translate(4px, 0) rotate(0);
  }
  14% {
    transform: translate(1px, 0) rotate(0);
  }
  16% {
    transform: translate(7px, 0) rotate(0);
  }
  18% {
    transform: translate(9px, 0) rotate(0);
  }
  20% {
    transform: translate(-8px, 0) rotate(0);
  }
  22% {
    transform: translate(-2px, 0) rotate(0);
  }
  24% {
    transform: translate(-9px, 0) rotate(0);
  }
  26% {
    transform: translate(2px, 0) rotate(0);
  }
  28% {
    transform: translate(-4px, 0) rotate(0);
  }
  30% {
    transform: translate(-2px, 0) rotate(0);
  }
  32% {
    transform: translate(0px, 0) rotate(0);
  }
  34% {
    transform: translate(1px, 0) rotate(0);
  }
  36% {
    transform: translate(-9px, 0) rotate(0);
  }
  38% {
    transform: translate(-4px, 0) rotate(0);
  }
  40% {
    transform: translate(-7px, 0) rotate(0);
  }
  42% {
    transform: translate(2px, 0) rotate(0);
  }
  44% {
    transform: translate(6px, 0) rotate(0);
  }
  46% {
    transform: translate(3px, 0) rotate(0);
  }
  48% {
    transform: translate(-3px, 0) rotate(0);
  }
  50% {
    transform: translate(-3px, 0) rotate(0);
  }
  52% {
    transform: translate(6px, 0) rotate(0);
  }
  54% {
    transform: translate(-8px, 0) rotate(0);
  }
  56% {
    transform: translate(-8px, 0) rotate(0);
  }
  58% {
    transform: translate(7px, 0) rotate(0);
  }
  60% {
    transform: translate(4px, 0) rotate(0);
  }
  62% {
    transform: translate(1px, 0) rotate(0);
  }
  64% {
    transform: translate(8px, 0) rotate(0);
  }
  66% {
    transform: translate(-9px, 0) rotate(0);
  }
  68% {
    transform: translate(9px, 0) rotate(0);
  }
  70% {
    transform: translate(7px, 0) rotate(0);
  }
  72% {
    transform: translate(2px, 0) rotate(0);
  }
  74% {
    transform: translate(7px, 0) rotate(0);
  }
  76% {
    transform: translate(3px, 0) rotate(0);
  }
  78% {
    transform: translate(-9px, 0) rotate(0);
  }
  80% {
    transform: translate(-5px, 0) rotate(0);
  }
  82% {
    transform: translate(0px, 0) rotate(0);
  }
  84% {
    transform: translate(-5px, 0) rotate(0);
  }
  86% {
    transform: translate(7px, 0) rotate(0);
  }
  88% {
    transform: translate(-8px, 0) rotate(0);
  }
  90% {
    transform: translate(-9px, 0) rotate(0);
  }
  92% {
    transform: translate(6px, 0) rotate(0);
  }
  94% {
    transform: translate(0px, 0) rotate(0);
  }
  96% {
    transform: translate(-9px, 0) rotate(0);
  }
  98% {
    transform: translate(9px, 0) rotate(0);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-horizontal:hover,
.shake-trigger:hover .shake-horizontal, .shake-horizontal.shake-freeze, .shake-horizontal.shake-constant {
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-vertical {
  2% {
    transform: translate(0, 1px) rotate(0);
  }
  4% {
    transform: translate(0, -8px) rotate(0);
  }
  6% {
    transform: translate(0, 1px) rotate(0);
  }
  8% {
    transform: translate(0, 0px) rotate(0);
  }
  10% {
    transform: translate(0, 6px) rotate(0);
  }
  12% {
    transform: translate(0, 6px) rotate(0);
  }
  14% {
    transform: translate(0, 2px) rotate(0);
  }
  16% {
    transform: translate(0, -8px) rotate(0);
  }
  18% {
    transform: translate(0, -4px) rotate(0);
  }
  20% {
    transform: translate(0, -1px) rotate(0);
  }
  22% {
    transform: translate(0, -3px) rotate(0);
  }
  24% {
    transform: translate(0, 7px) rotate(0);
  }
  26% {
    transform: translate(0, -3px) rotate(0);
  }
  28% {
    transform: translate(0, 1px) rotate(0);
  }
  30% {
    transform: translate(0, 9px) rotate(0);
  }
  32% {
    transform: translate(0, 1px) rotate(0);
  }
  34% {
    transform: translate(0, -6px) rotate(0);
  }
  36% {
    transform: translate(0, 7px) rotate(0);
  }
  38% {
    transform: translate(0, 0px) rotate(0);
  }
  40% {
    transform: translate(0, 6px) rotate(0);
  }
  42% {
    transform: translate(0, 6px) rotate(0);
  }
  44% {
    transform: translate(0, 9px) rotate(0);
  }
  46% {
    transform: translate(0, -9px) rotate(0);
  }
  48% {
    transform: translate(0, 1px) rotate(0);
  }
  50% {
    transform: translate(0, 10px) rotate(0);
  }
  52% {
    transform: translate(0, -8px) rotate(0);
  }
  54% {
    transform: translate(0, -8px) rotate(0);
  }
  56% {
    transform: translate(0, 1px) rotate(0);
  }
  58% {
    transform: translate(0, 5px) rotate(0);
  }
  60% {
    transform: translate(0, 5px) rotate(0);
  }
  62% {
    transform: translate(0, 8px) rotate(0);
  }
  64% {
    transform: translate(0, -6px) rotate(0);
  }
  66% {
    transform: translate(0, 1px) rotate(0);
  }
  68% {
    transform: translate(0, 4px) rotate(0);
  }
  70% {
    transform: translate(0, 4px) rotate(0);
  }
  72% {
    transform: translate(0, -1px) rotate(0);
  }
  74% {
    transform: translate(0, 10px) rotate(0);
  }
  76% {
    transform: translate(0, 9px) rotate(0);
  }
  78% {
    transform: translate(0, -8px) rotate(0);
  }
  80% {
    transform: translate(0, -3px) rotate(0);
  }
  82% {
    transform: translate(0, -6px) rotate(0);
  }
  84% {
    transform: translate(0, 2px) rotate(0);
  }
  86% {
    transform: translate(0, 3px) rotate(0);
  }
  88% {
    transform: translate(0, -8px) rotate(0);
  }
  90% {
    transform: translate(0, 8px) rotate(0);
  }
  92% {
    transform: translate(0, -4px) rotate(0);
  }
  94% {
    transform: translate(0, -2px) rotate(0);
  }
  96% {
    transform: translate(0, -1px) rotate(0);
  }
  98% {
    transform: translate(0, -5px) rotate(0);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-vertical:hover,
.shake-trigger:hover .shake-vertical, .shake-vertical.shake-freeze, .shake-vertical.shake-constant {
  animation-name: shake-vertical;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-rotate {
  2% {
    transform: translate(0, 0) rotate(-3.5deg);
  }
  4% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  6% {
    transform: translate(0, 0) rotate(4.5deg);
  }
  8% {
    transform: translate(0, 0) rotate(6.5deg);
  }
  10% {
    transform: translate(0, 0) rotate(7.5deg);
  }
  12% {
    transform: translate(0, 0) rotate(7.5deg);
  }
  14% {
    transform: translate(0, 0) rotate(4.5deg);
  }
  16% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  18% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  20% {
    transform: translate(0, 0) rotate(-3.5deg);
  }
  22% {
    transform: translate(0, 0) rotate(-0.5deg);
  }
  24% {
    transform: translate(0, 0) rotate(-1.5deg);
  }
  26% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  28% {
    transform: translate(0, 0) rotate(-1.5deg);
  }
  30% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  32% {
    transform: translate(0, 0) rotate(3.5deg);
  }
  34% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  36% {
    transform: translate(0, 0) rotate(-5.5deg);
  }
  38% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  40% {
    transform: translate(0, 0) rotate(-4.5deg);
  }
  42% {
    transform: translate(0, 0) rotate(-4.5deg);
  }
  44% {
    transform: translate(0, 0) rotate(6.5deg);
  }
  46% {
    transform: translate(0, 0) rotate(3.5deg);
  }
  48% {
    transform: translate(0, 0) rotate(-4.5deg);
  }
  50% {
    transform: translate(0, 0) rotate(3.5deg);
  }
  52% {
    transform: translate(0, 0) rotate(-2.5deg);
  }
  54% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  56% {
    transform: translate(0, 0) rotate(-4.5deg);
  }
  58% {
    transform: translate(0, 0) rotate(7.5deg);
  }
  60% {
    transform: translate(0, 0) rotate(6.5deg);
  }
  62% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  64% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  66% {
    transform: translate(0, 0) rotate(-0.5deg);
  }
  68% {
    transform: translate(0, 0) rotate(-4.5deg);
  }
  70% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  72% {
    transform: translate(0, 0) rotate(1.5deg);
  }
  74% {
    transform: translate(0, 0) rotate(0.5deg);
  }
  76% {
    transform: translate(0, 0) rotate(-2.5deg);
  }
  78% {
    transform: translate(0, 0) rotate(-6.5deg);
  }
  80% {
    transform: translate(0, 0) rotate(-2.5deg);
  }
  82% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  84% {
    transform: translate(0, 0) rotate(-2.5deg);
  }
  86% {
    transform: translate(0, 0) rotate(-5.5deg);
  }
  88% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  90% {
    transform: translate(0, 0) rotate(3.5deg);
  }
  92% {
    transform: translate(0, 0) rotate(-1.5deg);
  }
  94% {
    transform: translate(0, 0) rotate(2.5deg);
  }
  96% {
    transform: translate(0, 0) rotate(-5.5deg);
  }
  98% {
    transform: translate(0, 0) rotate(-0.5deg);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-rotate:hover,
.shake-trigger:hover .shake-rotate, .shake-rotate.shake-freeze, .shake-rotate.shake-constant {
  animation-name: shake-rotate;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-opacity {
  10% {
    transform: translate(1px, -1px) rotate(1.5deg);
    opacity: 0.95;
  }
  20% {
    transform: translate(-3px, 0px) rotate(-1.5deg);
    opacity: 0.25;
  }
  30% {
    transform: translate(0px, 1px) rotate(1.5deg);
    opacity: 0.55;
  }
  40% {
    transform: translate(3px, 5px) rotate(0.5deg);
    opacity: 0.2;
  }
  50% {
    transform: translate(-2px, -2px) rotate(0.5deg);
    opacity: 0.44;
  }
  60% {
    transform: translate(1px, -3px) rotate(-1.5deg);
    opacity: 0.78;
  }
  70% {
    transform: translate(0px, -4px) rotate(-0.5deg);
    opacity: 0.62;
  }
  80% {
    transform: translate(5px, 2px) rotate(-1.5deg);
    opacity: 0.03;
  }
  90% {
    transform: translate(-1px, -2px) rotate(2.5deg);
    opacity: 0.17;
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-opacity:hover,
.shake-trigger:hover .shake-opacity, .shake-opacity.shake-freeze, .shake-opacity.shake-constant {
  animation-name: shake-opacity;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-crazy {
  10% {
    transform: translate(-11px, 16px) rotate(-1deg);
    opacity: 0.14;
  }
  20% {
    transform: translate(-2px, -1px) rotate(10deg);
    opacity: 0.02;
  }
  30% {
    transform: translate(9px, 6px) rotate(-8deg);
    opacity: 0.59;
  }
  40% {
    transform: translate(7px, -14px) rotate(-9deg);
    opacity: 0.48;
  }
  50% {
    transform: translate(-15px, 17px) rotate(1deg);
    opacity: 0.82;
  }
  60% {
    transform: translate(5px, 0px) rotate(10deg);
    opacity: 0.55;
  }
  70% {
    transform: translate(-8px, 4px) rotate(-2deg);
    opacity: 0.43;
  }
  80% {
    transform: translate(5px, -12px) rotate(-6deg);
    opacity: 0.93;
  }
  90% {
    transform: translate(-10px, 1px) rotate(-4deg);
    opacity: 0.3;
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-crazy:hover,
.shake-trigger:hover .shake-crazy, .shake-crazy.shake-freeze, .shake-crazy.shake-constant {
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-chunk {
  2% {
    transform: translate(2px, 15px) rotate(9deg);
  }
  4% {
    transform: translate(1px, 14px) rotate(-11deg);
  }
  6% {
    transform: translate(0px, 14px) rotate(-12deg);
  }
  8% {
    transform: translate(-14px, 8px) rotate(-8deg);
  }
  10% {
    transform: translate(-1px, 10px) rotate(15deg);
  }
  12% {
    transform: translate(-3px, 5px) rotate(2deg);
  }
  14% {
    transform: translate(-9px, 2px) rotate(14deg);
  }
  16% {
    transform: translate(-13px, 1px) rotate(-4deg);
  }
  18% {
    transform: translate(-1px, 1px) rotate(14deg);
  }
  20% {
    transform: translate(8px, 6px) rotate(15deg);
  }
  22% {
    transform: translate(-12px, -3px) rotate(3deg);
  }
  24% {
    transform: translate(-11px, 15px) rotate(-8deg);
  }
  26% {
    transform: translate(1px, -8px) rotate(-2deg);
  }
  28% {
    transform: translate(8px, 9px) rotate(9deg);
  }
  30% {
    transform: translate(-10px, 7px) rotate(9deg);
  }
  32% {
    transform: translate(-11px, -10px) rotate(12deg);
  }
  34% {
    transform: translate(-2px, -6px) rotate(-1deg);
  }
  36% {
    transform: translate(1px, 5px) rotate(-1deg);
  }
  38% {
    transform: translate(9px, 12px) rotate(-13deg);
  }
  0%, 40%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
.shake-chunk:hover,
.shake-trigger:hover .shake-chunk, .shake-chunk.shake-freeze, .shake-chunk.shake-constant {
  animation-name: shake-chunk;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake-grow {
  50% {
    transform: scale(1.1);
  }
  0%, 100% {
    transform: scale(1) translate(0, 0) rotate(0);
  }
}
.shake-grow:hover, .shake-grow.shake-constant {
  animation-name: shake-grow;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* pages */
.bulle .column-image-bg {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center !important;
}
@media (min-width: 768px) {
  .bulle .column-image-bg {
    background-position: top left !important;
  }
}
.bulle:hover .img-with-aniamtion-wrap {
  animation-name: shake-slow;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.bulle:hover .text-lead {
  color: #6a1f74;
}
.bulle .img-with-aniamtion-wrap,
.bulle .text-lead {
  display: inline-block;
  vertical-align: middle;
}
.bulle .img-with-aniamtion-wrap img {
  height: 150px;
  width: auto;
}
.bulle .text-lead {
  padding-left: 20px;
}
.bulle.gauche .img-with-aniamtion-wrap {
  margin-right: 20px;
}
.bulle.droite .img-with-aniamtion-wrap {
  margin-left: 20px;
}

@media (max-width: 768px) {
  .home-bulles .bulle .vc_column-inner > .wpb_wrapper {
    padding: 80px;
  }
}
@media (min-width: 768px) {
  .home-bulles {
    min-height: 660px;
  }
  .home-bulles .wpb_row {
    position: absolute;
    width: 50%;
  }
  .home-bulles .bulle-1 {
    z-index: 5;
  }
  .home-bulles .bulle-1 .vc_column-inner {
    padding-top: 120px;
    padding-left: 255px;
    height: 420px;
    width: 670px;
  }
  .home-bulles .bulle-2 {
    z-index: 6;
    margin-top: 220px;
    margin-left: 440px;
  }
  .home-bulles .bulle-2 .vc_column-inner {
    height: 420px;
    width: 540px;
    padding-top: 120px;
    padding-left: 50px;
  }
  .home-bulles .bulle-3 {
    z-index: 1;
    margin-top: 240px;
    margin-left: 100px;
  }
  .home-bulles .bulle-3 .vc_column-inner {
    height: 420px;
    width: 670px;
    padding-top: 170px;
    padding-left: 30px;
  }
}
.bulles-desktop,
.hero-desktop {
  display: none;
}
@media (min-width: 768px) {
  .bulles-desktop,
.hero-desktop {
    display: block;
  }
}

@media (min-width: 768px) {
  .hero-mobile,
.bulles-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .home-bulles > .row_col_wrap_12 > .wpb_column > .vc_column-inner {
    margin-left: -210px;
  }
}
@media (min-width: 1000px) {
  .home-bulles > .row_col_wrap_12 > .wpb_column > .vc_column-inner {
    margin-left: -40px;
  }
}
@media (min-width: 1200px) {
  .home-bulles > .row_col_wrap_12 > .wpb_column > .vc_column-inner {
    margin-left: 120px;
  }
}

.bulle-mobile {
  padding: 40px !important;
}
.bulle-mobile .img-with-aniamtion-wrap img {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
.bulle-mobile .img-with-aniamtion-wrap,
.bulle-mobile .text-lead {
  display: inline-block;
  vertical-align: middle;
}

.home-videos .nectar-video-box img {
  border: 10px solid #fff;
  cursor: pointer;
  transition: all 0.3s;
}
.home-videos .nectar-video-box:hover img {
  filter: brightness(125%);
}
.home-videos .nectar-video-box .play_button_2 {
  opacity: 0;
  display: none !important;
}

@media (max-width: 1000px) {
  .row-quiz-bg {
    padding-top: 100px !important;
  }
}
@media (min-width: 1000px) {
  .row-quiz-bg .row-bg {
    background-size: 70% auto;
  }
}
@media (max-width: 768px) {
  body.page-template-page-quiz .container.main-content {
    max-width: 100% !important;
  }
}
.quiz__top-icon {
  transform: translateY(-100px) !important;
  width: 160px;
  margin-bottom: -100px !important;
}
.quiz__intro-text {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 22px;
}
.quiz .divider-border {
  height: 15px !important;
}

.quiz-inner {
  position: relative;
  min-height: 800px;
}

.quiz-question,
.quiz-option-question {
  padding: 12px 15px;
  background-color: #fdb1b8;
  cursor: pointer;
  margin-bottom: 24px;
  width: 100%;
}
.quiz-question.active .fake-input::after, .quiz-question:hover .fake-input::after,
.quiz-option-question.active .fake-input::after,
.quiz-option-question:hover .fake-input::after {
  opacity: 1;
}
.quiz-question .fake-input,
.quiz-question .text,
.quiz-option-question .fake-input,
.quiz-option-question .text {
  display: inline-block;
  vertical-align: middle;
}
.quiz-question .fake-input,
.quiz-option-question .fake-input {
  position: relative;
  display: none;
  border-radius: 100%;
  height: 40px;
  width: 40px;
  background-color: #fff;
}
.quiz-question .fake-input::after,
.quiz-option-question .fake-input::after {
  opacity: 0;
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 100%;
  height: 20px;
  width: 20px;
  background-color: #ef6949;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  .quiz-question .fake-input,
.quiz-option-question .fake-input {
    display: inline-block;
  }
}
.quiz-question .text,
.quiz-option-question .text {
  padding-left: 12px;
  width: 100%; /* ouin */
  display: inline-block;
  font-family: "Suez One", sans-serif;
  font-size: 22px;
}
.quiz-question .text small,
.quiz-option-question .text small {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .quiz-question .text,
.quiz-option-question .text {
    width: 80%;
  }
}

.quiz-option-question {
  background-color: #e0ded5;
}

.quiz-answer {
  margin-bottom: 24px;
}
.quiz-answer img, .quiz-answer div {
  display: inline-block;
  vertical-align: top;
}
@media (min-width: 1000px) {
  .quiz-answer .image {
    width: 20%;
  }
  .quiz-answer .text {
    width: 78%;
    padding-left: 20px;
  }
}
.quiz-answer p {
  font-size: 18px;
}

.quiz-option {
  background-color: #f5b5b9;
  display: inline-block;
  font-family: "Suez One", sans-serif;
  font-size: 22px;
  width: 100%;
  padding: 12px 15px;
  cursor: pointer;
  margin-bottom: 24px;
  text-align: center;
}
.quiz-option:hover {
  background-color: #ef6949;
}
.quiz-option.static {
  cursor: default;
}
.quiz-option.static:hover {
  background-color: #f5b5b9;
}

.quiz-option-answer {
  margin-bottom: 24px;
}
.quiz-option-answer h4 {
  color: #ef6949;
  font-family: "Suez One", sans-serif;
  font-size: 24px;
}
.quiz-option-answer p {
  font-family: "Suez One", sans-serif;
  font-size: 22px;
}

.popup-ressources {
  z-index: 9999;
  position: absolute;
  top: 0;
  width: 100%;
}
.popup-ressources__inner {
  background-color: #f7d54b;
  z-index: 5;
  color: #000;
  text-align: center;
  position: relative;
  width: 100%;
  margin-left: 20px;
  border: 10px solid #000;
  padding: 80px 20px 20px;
}
@media (min-width: 1000px) {
  .popup-ressources__inner {
    padding: 20px;
  }
}
.popup-ressources__content {
  font-size: 21px;
  height: 300px;
  min-height: 80vh;
  overflow: scroll;
}
.popup-ressources__content p {
  padding-bottom: 1em;
}
.popup-ressources__content span {
  font-weight: bold;
}
.popup-ressources__close {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  border: 2px solid #000;
  text-align: center;
  cursor: pointer;
  width: 44px;
  height: 44px;
}
.popup-ressources__close img {
  display: inline-block;
  width: 20px !important;
  margin-bottom: 0 !important;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-44 {
  margin-bottom: 44px;
}

/* etoiles */
.etoile-small {
  position: absolute !important;
  width: 80px;
}
.etoile-small-authentique {
  top: -220px;
}
.etoile-small-buts {
  right: -210px;
  top: -20px;
}
.etoile-small-controle {
  right: -170px;
  top: -100px;
}
.etoile-small-roue {
  width: 50px;
  z-index: 1500;
  height: auto;
  right: 40px;
}
.etoile-small-roue-2 {
  width: 50px;
  z-index: 1500;
  height: auto;
  left: 0;
  bottom: 0;
}
.etoile-big {
  position: absolute !important;
  width: 150px;
}
.etoile-big-authentique {
  left: -170px;
  top: -110px;
}
.etoile-big-buts {
  top: -180px;
  left: -50px;
}
.etoile-big-controle {
  top: 310px;
  left: -170px;
}
.etoile-big-roue {
  width: 100px;
  z-index: 150;
  height: auto;
  left: 0px;
}
@media (min-width: 1000px) {
  .etoile-big-roue {
    left: -40px;
  }
}

.etoile-big,
.etoile-small {
  display: none !important;
}
@media (min-width: 768px) {
  .etoile-big,
.etoile-small {
    display: block !important;
  }
}

body.overlay-open {
  overflow: hidden !important;
  height: 100vh !important;
}

.overlay {
  z-index: 9999;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: none;
}
.overlay .overlay-blur {
  background-color: #f7d54b;
  position: absolute;
  height: 100%;
  width: 100%;
}
.overlay .overlay-modal {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  color: #000;
  text-align: center;
}
.overlay .overlay-instructions {
  position: relative;
  z-index: 15;
  text-align: center;
  margin-top: 50px;
  padding: 0 40px;
}
@media (min-width: 1000px) {
  .overlay .overlay-instructions {
    margin-top: 60px;
  }
}
.overlay .overlay-instructions p {
  font-family: "Suez One", sans-serif;
  text-transform: uppercase;
  font-size: 18px;
}
.overlay .overlay-form {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  color: #000;
  text-align: center;
}

.overlay-controls {
  position: absolute;
  z-index: 100;
  top: 30px;
  right: 30px;
}
@media (min-width: 1000px) {
  .overlay-controls {
    top: 60px;
    right: 60px;
  }
}

.overlay-close {
  cursor: pointer;
}

.main-wheel {
  position: relative;
  margin-top: 20px;
  width: calc(100vw - 40px);
  height: calc(100vw - 40px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1000px) {
  .main-wheel {
    width: 65vh;
    height: 65vh;
  }
}

.wheel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all ease 4s;
  z-index: 15;
}
.wheel img {
  width: 100%;
  height: auto;
}

.main-wheel::after {
  content: "";
  display: block;
  position: absolute;
  top: 40px;
  background-repeat: no-repeat;
  right: -300px;
  z-index: 1;
  height: 60vh;
  width: 60vh;
  background-image: url(../img/bg-wheel.jpg);
  background-size: contain;
}

.no-wheel {
  display: none;
  font-family: "Suez One", sans-serif;
  text-transform: uppercase;
}

.wheel-ticker {
  background-image: url(../img/wheel-ticker.png);
  display: block;
  width: 26px;
  height: 52px;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 20;
  top: -33px;
  left: 50%;
  transform: translate(-50%, 0);
}