@charset "UTF-8";
@font-face {
  font-family: "CarbonD-Bold";
  src: url("CarbonD-Bold.otf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Futura-CondensedLight";
  src: url("Futura-CondensedLight.otf") format("truetype"), url("futura-condensedlight-webfont.woff2") format("woff2"), url("futura-condensedlight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/*
***************************Variables***************************
**/
/*
***************************Resets***************************
**/
* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

body {
  line-height: 1;
}

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;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

a:hover,
button:hover {
  cursor: pointer;
}

/*
*************************Typography*************************
**/
@media screen and (min-width: 75em) {
  :root {
    font-size: 1em;
  }
}

@media screen and (min-width: 30em) and (max-width: 75em) {
  :root {
    font-size: calc(0.45em + 0.88vw);
  }
}

@media screen and (max-width: 30em) {
  :root {
    font-size: 0.65em;
  }
}

/*
***************************Layout***************************
**/
@media screen and (max-width: 48em) {
  body {
    height: auto;
  }
}

header {
  height: 10rem;
  padding: 2rem 1rem;
  margin: auto;
}

@media screen and (max-width: 48em) {
  header {
    height: 18rem;
    padding: 3rem 1rem;
  }
}

.main {
  height: 54rem;
  margin: auto;
  padding: 7rem 18rem 18rem 23rem;
}

@media screen and (max-width: 48em) {
  .main {
    height: 66rem;
    padding: 16rem 4rem 4rem 13rem;
  }
}

@media screen and (max-width: 30em) {
  .main {
    padding: 16rem 4rem 4rem 10rem;
  }
}

footer {
  margin: auto;
  padding: 7rem 2rem 0.5rem 0.5rem;
}

@media screen and (max-width: 48em) {
  footer {
    padding: 0.5rem 2rem;
  }
}

/*
***************************Layout***************************
**/
html {
  scroll-behavior: smooth;
}

/*************************************/
body {
  background: -webkit-gradient(linear, left bottom, left top, from(#075dc6), color-stop(17.89%, #1389bd), color-stop(31.83%, #1ba5b7), color-stop(39.95%, #1eafb5), color-stop(48.4%, #28baa5), color-stop(63.55%, #37ca8e), color-stop(73.12%, #3dd086), color-stop(77.35%, #42d189), color-stop(82.45%, #51d591), color-stop(87.99%, #69dc9f), color-stop(93.85%, #8be4b3), color-stop(99.91%, #b6f0cc), to(#b7f0cc));
  background: linear-gradient(0deg, #075dc6 0%, #1389bd 17.89%, #1ba5b7 31.83%, #1eafb5 39.95%, #28baa5 48.4%, #37ca8e 63.55%, #3dd086 73.12%, #42d189 77.35%, #51d591 82.45%, #69dc9f 87.99%, #8be4b3 93.85%, #b6f0cc 99.91%, #b7f0cc 100%);
}

#bg1 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

#bg1 svg {
  width: 100%;
  height: 100%;
}

/*********************************************************/
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*
  #menu.isActive {
    background: url(../icons/m_Icon_Cross_Menu.svg);
    .menu-btn-burger {
      transform: translateX(-1.4rem);
      background: transparent;
    }
    .menu-btn-burger::before {
      transform: rotate(45deg) translate(1rem, -1rem); //scaleX(1);
    }
    .menu-btn-burger::after {
      transform: rotate(-45deg) translate(1rem, 1rem); //scaleX(1);
    }
  }
  //*/
}

header #logo {
  font-family: "CarbonD-Bold", "Lucida Sans";
  width: 7rem;
  z-index: 1;
}

header .logo-img {
  margin: auto;
  height: 4rem;
  width: 4rem;
  margin-top: -0.5rem;
  background: url(../icons/Icon_CD.svg);
  background-size: 100% 100%;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

header .logo-img:hover {
  background: url(../icons/Icon_CD-hover.svg);
  -webkit-transform: rotateZ(360deg) scale(1.1);
          transform: rotateZ(360deg) scale(1.1);
  cursor: pointer;
}

header h2 {
  font-size: 1.7rem;
  color: #fff;
  margin-top: 0.5rem;
}

header #menu {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
  height: 3rem;
  width: 3rem;
  background: url(../icons/m_Icon_Burger_Menu.svg);
  background-size: 100% 100%;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  margin-right: 1rem;
  cursor: pointer;
}

header #menu:hover {
  -webkit-transform: scale(1.2) perspective(1px);
          transform: scale(1.2) perspective(1px);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

header .menu-btn-burger {
  width: 1.8rem;
  height: 0.188rem;
  border-radius: 20px;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  background-color: #fff;
}

header .menu-btn-burger::before, header .menu-btn-burger::after,
header .menu-btn-burger .fourth-before,
header .menu-btn-burger .fourth-after {
  content: "";
  position: absolute;
  width: 1.78rem;
  height: 0.2rem;
  border-radius: 20px;
  background-color: #fff;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  display: block;
}

header .menu-btn-burger::before,
header .menu-btn-burger .fourth-before {
  -webkit-transform: translateY(-0.5rem);
          transform: translateY(-0.5rem);
}

header .menu-btn-burger::after,
header .menu-btn-burger .fourth-after {
  -webkit-transform: translateY(0.5rem);
          transform: translateY(0.5rem);
}

header #menu.isActive {
  z-index: 3;
  background: url(../icons/m_Icon_Cross_Menu.svg);
}

header #menu.isActive .menu-btn-burger {
  -webkit-transform: translateX(-1.4rem);
          transform: translateX(-1.4rem);
  background: transparent;
}

header #menu.isActive .menu-btn-burger::before {
  width: 0.9rem;
  -webkit-transform: rotate(45deg) translate(0.7rem, -1.3rem);
          transform: rotate(45deg) translate(0.7rem, -1.3rem);
}

header #menu.isActive .fourth-before {
  width: 0.9rem;
  -webkit-transform: rotate(45deg) translate(1.9rem, -1.3rem);
          transform: rotate(45deg) translate(1.9rem, -1.3rem);
}

header #menu.isActive .menu-btn-burger::after {
  width: 0.9rem;
  -webkit-transform: rotate(-45deg) translate(1.9rem, 1.3rem);
          transform: rotate(-45deg) translate(1.9rem, 1.3rem);
}

header #menu.isActive .fourth-after {
  width: 0.9rem;
  -webkit-transform: rotate(-45deg) translate(0.7rem, 1.3rem);
          transform: rotate(-45deg) translate(0.7rem, 1.3rem);
}

/*********************************************************/
.main .planet {
  width: 3rem;
  height: 3rem;
  background-size: 100% 100%;
  cursor: pointer;
  -webkit-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
}

.main .planet a {
  display: block;
  width: 100%;
  height: 100%;
}

.main .dune {
  background: url("../icons/Icon_Carbon_Dune.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 11rem;
  margin-left: auto;
}

.main .dune:hover {
  background: url("../icons/Icon_Carbon_Dune-hover.png") no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.main .dezign {
  background: url("../icons/Icon_Carbon_Dezign.png") no-repeat;
  background-size: 100% 100%;
  margin-right: auto;
  margin-top: 7rem;
}

.main .dezign:hover {
  background: url("../icons/Icon_Carbon_Dezign-hover.png") no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.main .dab {
  margin-left: auto;
  margin-top: 13rem;
  background: url("../icons/Icon_Carbon_Dab.png") no-repeat;
  background-size: 100% 100%;
}

.main .dab:hover {
  background: url("../icons/Icon_Carbon_Dab-hover.png") no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/***************************************************************/
/***************************************************************/
/**********************The slick slider "Menu" css ********************/
.slick-prev,
.slick-next {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: auto;
  bottom: 2rem;
}

.slick-prev::before,
.slick-next::before {
  color: transparent;
}

.slick-next {
  right: calc(50% - 3rem);
  background: url(../icons/Icon_Arrow-right-Desktop.svg) no-repeat;
  background-size: 100% 100%;
}

@media screen and (max-width: 36em) {
  .slick-next {
    right: calc(50% - 3rem);
  }
}

.slick-next:focus {
  background: url(../icons/Icon_Arrow-right-Desktop.svg) no-repeat;
  background-size: 100% 100%;
}

.slick-next:hover, .slick-next:active {
  background: url(../icons/Icon_Arrow-right-Desktop-onclik.svg) no-repeat;
  background-size: 100% 100%;
}

.slick-next[disabled] {
  background: url(../icons/Icon_Arrow-right-Desktop.svg) no-repeat;
  background-size: 100% 100%;
}

.slick-next[disabled]:hover {
  background: url(../icons/Icon_Arrow-right-Desktop.svg) no-repeat;
  background-size: 100% 100%;
}

.slick-prev {
  right: calc(50% + 1rem);
  left: auto;
  background: url(../icons/Icon_Arrow-left-Desktop.svg) no-repeat;
  background-size: 100% 100%;
}

@media screen and (max-width: 36em) {
  .slick-prev {
    right: calc(50% + 1rem);
  }
}

.slick-prev:focus {
  background: url(../icons/Icon_Arrow-left-Desktop.svg) no-repeat;
  background-size: 100% 100%;
}

.slick-prev:hover, .slick-prev:active {
  background: url(../icons/Icon_Arrow-left-Desktop-onclik.svg) no-repeat;
  background-size: 100% 100%;
}

.slick-prev[disabled] {
  background: url(../icons/Icon_Arrow-left-Desktop.svg) no-repeat;
  background-size: 100% 100%;
}

.slick-prev[disabled]:hover {
  background: url(../icons/Icon_Arrow-left-Desktop.svg) no-repeat;
  background-size: 100% 100%;
}

/***************************************************************/
.mod-menu ul li {
  display: block;
  text-align: center;
  margin-bottom: 2rem;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  padding: 0.15rem 1rem;
}

.mod-menu ul li:hover {
  color: rgba(255, 255, 255, 0.842);
  cursor: pointer;
  border-radius: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#237c64), color-stop(4.42%, #14deb7), color-stop(12.24%, #0fb3aa), color-stop(20.68%, #0b8c9e), color-stop(29.63%, #086c94), color-stop(39.24%, #05528d), color-stop(49.75%, #033d87), color-stop(61.64%, #012f82), color-stop(76.05%, #002780), to(#00247f));
  background: linear-gradient(180deg, #237c64 0%, #14deb7 4.42%, #0fb3aa 12.24%, #0b8c9e 20.68%, #086c94 29.63%, #05528d 39.24%, #033d87 49.75%, #012f82 61.64%, #002780 76.05%, #00247f 100%);
}

/*****************************************************************/
.mod-apropos,
.mod-langue,
.mod-aide {
  text-align: center;
}

.mod-apropos ul,
.mod-langue ul,
.mod-aide ul {
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.mod-apropos ul li,
.mod-langue ul li,
.mod-aide ul li {
  margin-top: 1.5rem !important;
}

.mod-apropos ul li span,
.mod-langue ul li span,
.mod-aide ul li span {
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}

.mod-apropos ul li:hover span,
.mod-langue ul li:hover span,
.mod-aide ul li:hover span {
  margin-left: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.mod-apropos ul,
.mod-langue ul,
.mod-aide ul {
  width: 18rem;
}

.mod-apropos ul li,
.mod-langue ul li,
.mod-aide ul li {
  color: #444;
  margin-top: 0.5rem;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition: all 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-right: 0.3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.mod-apropos ul li img,
.mod-langue ul li img,
.mod-aide ul li img {
  opacity: 0;
  height: 1em;
  width: 1em;
  -webkit-transition: opacity 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition: opacity 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}

.mod-apropos ul li:hover,
.mod-langue ul li:hover,
.mod-aide ul li:hover {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: rgba(255, 255, 255, 0.842);
  cursor: pointer;
  padding-left: 0.5em;
  border-radius: 20px;
  background: -webkit-gradient(linear, left bottom, left top, from(#237c64), color-stop(4.42%, rgba(20, 222, 183, 0.7)), color-stop(12.24%, rgba(15, 179, 170, 0.7)), color-stop(20.68%, rgba(11, 140, 158, 0.7)), color-stop(29.63%, rgba(8, 108, 148, 0.7)), color-stop(39.24%, rgba(5, 82, 141, 0.7)), color-stop(49.75%, rgba(3, 61, 135, 0.7)), color-stop(61.64%, rgba(1, 47, 130, 0.7)), color-stop(76.05%, rgba(0, 39, 128, 0.7)), to(rgba(0, 36, 127, 0.7)));
  background: linear-gradient(0deg, #237c64 0%, rgba(20, 222, 183, 0.7) 4.42%, rgba(15, 179, 170, 0.7) 12.24%, rgba(11, 140, 158, 0.7) 20.68%, rgba(8, 108, 148, 0.7) 29.63%, rgba(5, 82, 141, 0.7) 39.24%, rgba(3, 61, 135, 0.7) 49.75%, rgba(1, 47, 130, 0.7) 61.64%, rgba(0, 39, 128, 0.7) 76.05%, rgba(0, 36, 127, 0.7) 100%);
}

.mod-apropos ul li:hover img,
.mod-langue ul li:hover img,
.mod-aide ul li:hover img {
  opacity: 1;
}

.mod-aide ul {
  width: 19rem;
}

.mod-aide ul:hover {
  width: 19rem;
}

/***********************************************/
.mod-faq {
  font-size: 1.5rem;
  max-width: 50rem;
}

.mod-faq h4 {
  text-align: center;
}

.mod-faq form {
  display: none;
}

.mod-faq .resultats {
  max-height: 32rem;
}

.mod-faq .resultat {
  margin-bottom: 2rem;
  margin-right: 4rem;
  font-size: 1.3rem;
}

.mod-faq .question {
  position: relative;
}

.mod-faq .question .image {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  background: url(../icons/Icon_Minus.svg) no-repeat;
  background-size: 100% 100%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  cursor: pointer;
}

.mod-faq .question .image.isClosed {
  background: url(../icons/Icon_Plus.svg) no-repeat;
}

.mod-faq .question .image.isOpened {
  background: url(../icons/Icon_Minus.svg) no-repeat;
}

.mod-faq .reponse {
  padding-right: 2rem;
  padding-top: 1rem;
  -webkit-transform-origin: top;
          transform-origin: top;
  height: 0;
  -webkit-transition: -webkit-transform 300ms ease-out;
  transition: -webkit-transform 300ms ease-out;
  transition: transform 300ms ease-out;
  transition: transform 300ms ease-out, -webkit-transform 300ms ease-out;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.form-search {
  width: calc(100% - 4rem);
  margin-top: 3rem;
  position: relative;
}

.form-search button {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  background: url(../icons/Icon_Research.svg) no-repeat;
  background-size: 100% 100%;
  width: 1rem;
  height: 1rem;
}

.input {
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#237c64), color-stop(4.42%, rgba(20, 222, 183, 0.6)), color-stop(12.24%, rgba(15, 179, 170, 0.6)), color-stop(20.68%, rgba(11, 140, 158, 0.6)), color-stop(29.63%, rgba(8, 108, 148, 0.6)), color-stop(39.24%, rgba(5, 82, 141, 0.6)), color-stop(49.75%, rgba(3, 61, 135, 0.6)), color-stop(61.64%, rgba(1, 47, 130, 0.6)), color-stop(76.05%, rgba(0, 39, 128, 0.6)), to(rgba(0, 36, 127, 0.6)));
  background: linear-gradient(180deg, #237c64 0%, rgba(20, 222, 183, 0.6) 4.42%, rgba(15, 179, 170, 0.6) 12.24%, rgba(11, 140, 158, 0.6) 20.68%, rgba(8, 108, 148, 0.6) 29.63%, rgba(5, 82, 141, 0.6) 39.24%, rgba(3, 61, 135, 0.6) 49.75%, rgba(1, 47, 130, 0.6) 61.64%, rgba(0, 39, 128, 0.6) 76.05%, rgba(0, 36, 127, 0.6) 100%);
  padding: 0.3rem 0 0.3rem 0.8rem;
  border-radius: 20px;
  background-color: none;
  font-size: 0.8em;
  color: #fff;
  font-family: inherit;
}

/**
**************** Le cas de la scrollbar personalisée ******************
*/
.scrollbar {
  padding: 5px 0px 5px 10px;
  height: 20rem;
  margin-top: 40px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.simplebar-scrollbar {
  background: -webkit-gradient(linear, left top, right top, from(#00257f), color-stop(23.99%, #002880), color-stop(38.42%, #013082), color-stop(50.32%, #033e87), color-stop(60.85%, #05538d), color-stop(70.47%, #086d95), color-stop(79.44%, #0b8d9e), color-stop(87.89%, #0fb4aa), color-stop(95.73%, #14dfb7), to(#17fabf));
  background: linear-gradient(90deg, #00257f 0%, #002880 23.99%, #013082 38.42%, #033e87 50.32%, #05538d 60.85%, #086d95 70.47%, #0b8d9e 79.44%, #0fb4aa 87.89%, #14dfb7 95.73%, #17fabf 100%);
  width: 10px;
  opacity: 1 !important;
  right: 1px;
}

.simplebar-track {
  background: -webkit-gradient(linear, right top, left top, from(#00247f), color-stop(12.1%, #023685), color-stop(36.53%, #076793), color-stop(70.68%, #0fb3aa), to(#17fabf));
  background: linear-gradient(-90deg, #00247f 0%, #023685 12.1%, #076793 36.53%, #0fb3aa 70.68%, #17fabf 100%);
  border-radius: 5px;
}

.simplebar-track.vertical {
  margin-right: 2px;
  top: 7px;
}

.simplebar-track.horizontal {
  display: none;
}

/*
* *************************************
*/
.mod-dslemonde {
  background: url(../images/MapDesktop_CDWorld.svg) no-repeat;
  background-size: 100% 100%;
  width: 40rem;
  height: 30rem;
}

.mod-dslemonde h4 {
  text-align: center;
}

.mod-dslemonde ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.mod-dslemonde ul li {
  margin-right: 1rem;
}

.mod-dslemonde ul img {
  width: 2rem;
  height: 2rem;
}

.mod-dslemonde .pays {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: 3rem;
  margin-top: 1rem;
}

.line {
  margin-top: 2rem;
}

/******************************************/
.mod-informations {
  width: 40rem;
}

.mod-informations h4 {
  text-align: center;
}

.mod-informations ul {
  font-size: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 2rem;
}

@media screen and (max-width: 36em) {
  .mod-informations ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: auto;
    width: 95%;
  }
  .mod-informations ul li {
    width: 100% !important;
    margin-top: 1.5rem;
  }
  .mod-informations ul li span {
    margin-left: 0.5rem;
  }
}

.mod-informations ul img {
  width: 2rem;
  height: 2rem;
}

.mod-informations ul li {
  width: 50%;
}

.mod-informations ul li p {
  margin-top: 0.5rem;
  margin-left: 2rem;
}

.mod-informations ul li p img {
  margin-left: 0.5rem;
}

.mod-informations ul .li-multiline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mod-informations .map {
  background: url(../images/Map_Informations.svg) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 21rem;
  height: 15rem;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 36em) {
  .mod-informations .map {
    background: url(../icons/Icon_Globe.svg) no-repeat;
    width: 16rem;
    height: 16rem;
    margin-top: 0rem;
    font-size: 1.3rem;
    background-size: 80% 80%;
    background-position: center;
  }
}

.mod-informations .map .title-map {
  font-family: "CarbonD-Bold", "Lucida Sans";
  color: #fff;
  margin-top: auto;
}

.mod-informations .map .title-map img {
  width: 2rem;
  height: 2rem;
}

/***************************************/
.mod-contact {
  width: 45rem;
}

@media screen and (max-width: 36em) {
  .mod-contact {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1.5rem;
  }
}

.mod-contact h4 {
  text-align: center;
}

.mod-contact .desc {
  margin-top: 2rem;
  text-align: center;
  font-size: 1.5rem;
}

.mod-contact .alert-success {
  border-radius: 10px;
  border: 2px solid #1b7546;
  padding: 5px;
}

.mod-contact .alert-danger {
  border-radius: 10px;
  border: 2px solid crimson;
  padding: 5px;
}

.mod-contact form {
  display: block;
  margin-top: 2rem;
}

.mod-contact form button {
  display: block;
  width: 15rem;
  margin: auto;
  border-radius: 5px;
  font-size: 1em;
  padding: 0.15rem 0.5rem;
  background: -webkit-gradient(linear, left bottom, left top, from(#00247f), color-stop(12.1%, #023685), color-stop(36.53%, #076793), color-stop(70.68%, #0fb3aa), to(#17fabf));
  background: linear-gradient(0deg, #00247f 0%, #023685 12.1%, #076793 36.53%, #0fb3aa 70.68%, #17fabf 100%);
  color: #fff;
  font-family: inherit;
}

.mod-contact ul {
  font-size: 1.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1rem;
}

@media screen and (max-width: 36em) {
  .mod-contact ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .mod-contact ul li {
    margin-top: 1rem;
    width: 100% !important;
  }
}

.mod-contact ul li {
  width: 20rem;
}

.mod-contact ul li input,
.mod-contact ul li textarea,
.mod-contact ul li button {
  font-size: 1em;
  font-family: inherit;
  display: block;
  width: 100%;
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  background: -webkit-gradient(linear, left bottom, left top, from(#00247f), color-stop(12.1%, #023685), color-stop(36.53%, #076793), color-stop(70.68%, #0fb3aa), to(#17fabf));
  background: linear-gradient(0deg, #00247f 0%, #023685 12.1%, #076793 36.53%, #0fb3aa 70.68%, #17fabf 100%);
  color: #fff;
}

.mod-contact ul li.large {
  width: 100%;
}

.alert-success {
  border-radius: 10px;
  border: 2px solid #1b7546;
  padding: 5px;
}

.alert-danger {
  border-radius: 10px;
  border: 2px solid crimson;
  padding: 5px;
}

/******************************************/
.mod-recherche {
  width: 45rem;
}

@media screen and (max-width: 48em) {
  .mod-recherche {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.mod-recherche form {
  position: relative;
  display: block;
  width: 95%;
  margin-left: 2%;
}

.mod-recherche form input {
  display: block;
  width: 100%;
  height: 2rem;
  border-radius: 25px;
  padding: 1.1rem 1rem;
  font-size: 1.2rem;
  color: white;
  font-family: inherit;
  background: -webkit-gradient(linear, left top, left bottom, from(#237c64), color-stop(4.42%, rgba(20, 222, 183, 0.7)), color-stop(12.24%, rgba(15, 179, 170, 0.7)), color-stop(20.68%, rgba(11, 140, 158, 0.7)), color-stop(29.63%, rgba(8, 108, 148, 0.7)), color-stop(39.24%, rgba(5, 82, 141, 0.7)), color-stop(49.75%, rgba(3, 61, 135, 0.7)), color-stop(61.64%, rgba(1, 47, 130, 0.7)), color-stop(76.05%, rgba(0, 39, 128, 0.7)), to(rgba(0, 36, 127, 0.7)));
  background: linear-gradient(180deg, #237c64 0%, rgba(20, 222, 183, 0.7) 4.42%, rgba(15, 179, 170, 0.7) 12.24%, rgba(11, 140, 158, 0.7) 20.68%, rgba(8, 108, 148, 0.7) 29.63%, rgba(5, 82, 141, 0.7) 39.24%, rgba(3, 61, 135, 0.7) 49.75%, rgba(1, 47, 130, 0.7) 61.64%, rgba(0, 39, 128, 0.7) 76.05%, rgba(0, 36, 127, 0.7) 100%);
}

.mod-recherche form input::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
}

.mod-recherche form input:-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

.mod-recherche form input::-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

.mod-recherche form input::placeholder {
  color: #fff;
  opacity: 1;
}

.mod-recherche form input:focus::-webkit-input-placeholder {
  color: transparent;
}

.mod-recherche form input:focus:-ms-input-placeholder {
  color: transparent;
}

.mod-recherche form input:focus::-ms-input-placeholder {
  color: transparent;
}

.mod-recherche form input:focus::placeholder {
  color: transparent;
}

.mod-recherche form .button {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(../icons/Icon_Research.svg) no-repeat;
  background-size: 100% 100%;
  height: 1.3rem;
  width: 1.3rem;
  cursor: pointer;
}

.mod-recherche form #clear-box {
  position: absolute;
  top: 50%;
  right: 2.7rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 1.5rem;
  cursor: pointer;
  display: none;
}

.mod-recherche form .effacer {
  display: inline-block;
  margin-right: 0rem;
  width: 1.5rem;
}

.mod-recherche form svg {
  width: 100%;
  height: 100%;
  fill: #ddd;
  display: block;
}

.mod-recherche form .vertical-divider {
  border-left: 1px solid #dfe1e5;
  height: 100%;
  display: inline-block;
}

.mod-recherche .resultats {
  background: url(../images/MapDesktop_CDWorld.svg) no-repeat;
  background-size: 100% 100%;
  max-height: 30rem;
  font-size: 1.3rem;
  margin-bottom: 2rem;
}

.mod-recherche .resultat {
  display: none;
  margin-bottom: 2rem;
  margin-right: 2rem;
}

.mod-recherche .question {
  color: lawngreen;
}

.mod-recherche .reponse {
  padding-right: 1rem;
}

/******************************************/
.mod-notre_histoire {
  width: 54rem;
}

@media screen and (max-width: 54em) {
  .mod-notre_histoire {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.mod-notre_histoire h4 {
  text-align: center;
}

.mod-notre_histoire .cdfont {
  font-family: "CarbonD-Bold", "Lucida Sans";
  text-align: center;
  margin-top: 1rem;
}

.mod-notre_histoire .cdfont h1 {
  font-size: 4rem;
  height: 3.5rem;
}

.mod-notre_histoire .cdfont h3 {
  font-size: 1.5rem;
}

.mod-notre_histoire .cdfont p {
  color: black;
  font-size: 1rem;
}

.mod-notre_histoire .resultats {
  margin-top: 1rem;
  height: 18rem;
}

.mod-notre_histoire .resultat {
  padding-right: 4rem;
  text-align: justify;
  font-size: 1.5rem;
}

.mod-notre_histoire .logo-blue {
  font-family: "CarbonD-Bold", "Lucida Sans";
  color: #1b1464;
}

.mod-notre_histoire .green-slogan {
  color: #00ff00;
}

.mod-notre_histoire .blue-slogan {
  color: #1b1464;
}

/**************************************************/
/**************************************************/
/*** JQuery PopUp, Fenetre modale et CUBE
/**************************************************/
/**************************************************/
.blocker {
  background-color: rgba(0, 0, 0, 0.6);
}

.blocker::before {
  height: 15%;
}

.modal {
  max-width: none;
  width: auto;
  padding: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.modal a.close-modal {
  all: initial;
}

.modal a.close-modal * {
  all: unset;
}

.modal a.close-modal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  background: url(../icons/Icon_Cross_Menu.svg) no-repeat;
  background-size: 100% 100%;
  font-size: 0;
}

.pop-up {
  font-family: "Futura-CondensedLight", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Geneva";
  color: #fff;
  background: linear-gradient(225deg, rgba(0, 36, 127, 0.8) 0%, rgba(2, 54, 133, 0.8) 12.1%, rgba(7, 103, 147, 0.8) 36.53%, rgba(15, 179, 170, 0.8) 70.68%, rgba(23, 250, 191, 0.8) 100%);
  font-size: 1.5rem;
  z-index: 2;
  border-radius: 5px;
}

.pop-up .close-button {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  background: url(../icons/Icon_Cross_Menu.svg) no-repeat;
  background-size: 100% 100%;
  font-size: 0;
}

div[id^="legal-x"] {
  display: none;
}

.fenetre-modale {
  font-family: "Futura-CondensedLight", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Geneva";
  color: #fff;
  background: linear-gradient(225deg, rgba(0, 36, 127, 0.8) 0%, rgba(2, 54, 133, 0.8) 12.1%, rgba(7, 103, 147, 0.8) 36.53%, rgba(15, 179, 170, 0.8) 70.68%, rgba(23, 250, 191, 0.8) 100%);
  padding-top: 5rem;
  padding-bottom: 5rem;
  font-size: 1.7rem;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin-top: 0;
  border-radius: 0;
}

.fenetre-modale-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#home-modale {
  display: none;
}

.scene {
  width: 50rem;
  height: 32rem;
  -webkit-perspective: 1000000px;
          perspective: 1000000px;
}

@media screen and (max-width: 50em) {
  .scene {
    width: 90%;
    height: 40rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    overflow-x: hidden;
  }
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform-style: flat;
          transform-style: flat;
  -webkit-transform-origin: 50% 50% -16rem;
          transform-origin: 50% 50% -16rem;
}

.cube__face {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 2rem;
  -webkit-box-shadow: inset 0px 0px 20px rgba(159, 232, 255, 0.3);
          box-shadow: inset 0px 0px 20px rgba(159, 232, 255, 0.3);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 50% 50% -25rem;
          transform-origin: 50% 50% -25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cube__face--front {
  -webkit-transform: perspective(1000000px) rotateX(0deg) rotateY(0deg);
          transform: perspective(1000000px) rotateX(0deg) rotateY(0deg);
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.cube__face--right {
  -webkit-transform: perspective(1000000px) rotateX(0deg) rotateY(90deg);
          transform: perspective(1000000px) rotateX(0deg) rotateY(90deg);
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.cube__face--back {
  -webkit-transform: perspective(1000000px) rotateX(0deg) rotateY(180deg);
          transform: perspective(1000000px) rotateX(0deg) rotateY(180deg);
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.cube__face--left {
  -webkit-transform: perspective(1000000px) rotateX(0deg) rotateY(-90deg);
          transform: perspective(1000000px) rotateX(0deg) rotateY(-90deg);
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.pop-up {
  /*
  .mod-contact,
  .mod-notre_histoire {
    @media screen and (max-width: 60em) {
      margin: 5rem 1rem;
    }
  }
  */
}

.pop-up .mod-faq,
.pop-up .mod-contact,
.pop-up .mod-notre_histoire,
.pop-up .mod-informations {
  margin: 4rem 2.5rem;
}

@media screen and (max-width: 48em) {
  .pop-up .mod-faq,
  .pop-up .mod-contact,
  .pop-up .mod-notre_histoire,
  .pop-up .mod-informations {
    width: 90%;
    margin: 5rem auto;
  }
}

.pop-up .mod-faq h4,
.pop-up .mod-contact h4,
.pop-up .mod-notre_histoire h4,
.pop-up .mod-informations h4 {
  font-size: 1.7rem;
}

.pop-up .mod-informations ul {
  font-size: 1.3rem;
}

/***************************************************/
.mod-newsletter {
  display: none;
  text-align: center;
  width: 24rem;
  padding: 1rem 1.5rem 2rem 1.5rem;
}

@media screen and (max-width: 20em) {
  .mod-newsletter {
    width: 20rem;
  }
}

.mod-newsletter h4 {
  margin: 3rem 0rem;
  font-size: 2.5rem;
}

.mod-newsletter .title {
  margin-bottom: 3rem;
}

.mod-newsletter .body {
  margin-bottom: 2rem;
}

.mod-newsletter form > * {
  margin-bottom: 3rem;
}

.mod-newsletter input,
.mod-newsletter button {
  font-size: 1em;
  font-family: inherit;
  display: block;
  width: 100%;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  color: #fff;
}

.mod-newsletter input {
  background: -webkit-gradient(linear, left top, left bottom, from(#00247f), color-stop(12.1%, #023685), color-stop(36.53%, #076793), color-stop(70.68%, #0fb3aa), to(#17fabf));
  background: linear-gradient(180deg, #00247f 0%, #023685 12.1%, #076793 36.53%, #0fb3aa 70.68%, #17fabf 100%);
  padding-left: 1rem;
}

.mod-newsletter button {
  background: -webkit-gradient(linear, left bottom, left top, from(#00247f), color-stop(12.1%, #023685), color-stop(36.53%, #076793), color-stop(70.68%, #0fb3aa), to(#17fabf));
  background: linear-gradient(0deg, #00247f 0%, #023685 12.1%, #076793 36.53%, #0fb3aa 70.68%, #17fabf 100%);
}

.mod-newsletter .warning {
  font-size: 0.9rem;
}

.mod-newsletter .warning a {
  text-decoration: underline;
  cursor: pointer;
}

.logo {
  font-family: "CarbonD-Bold", "Lucida Sans";
}

/**********************************************************/
.mod-planetes,
.mod-copyright {
  /*
  @media screen and (max-width: 60em) {
    width: 90vw;
    padding-left: 2rem;
    padding-right: 5rem;
  }
  */
  text-align: center;
  width: 60rem;
  padding: 2rem 7rem 1rem 4rem;
  margin-bottom: 3rem;
}

@media screen and (max-width: 60em) {
  .mod-planetes,
  .mod-copyright {
    width: 90%;
    padding-left: 0rem;
    padding-right: 3rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.mod-planetes .text,
.mod-copyright .text {
  text-align: justify;
}

#carbon-dab,
#carbon-dezign,
#carbon-dune,
#mod-planetes,
#mod-newsletter {
  display: none;
}

#planetBar,
#scrollBar-x {
  margin-right: -4.5rem;
  height: 20.5rem;
}

@media screen and (max-width: 60em) {
  #planetBar,
  #scrollBar-x {
    margin-right: -2.7rem;
  }
}

.planete,
.cond-gen {
  padding-bottom: 2rem;
  margin-right: 3.5rem;
}

@media screen and (max-width: 60em) {
  .planete,
  .cond-gen {
    margin-right: 2rem;
  }
}

@-webkit-keyframes ripple {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0, 0);
            transform: translate(-50%, -50%) scale(0, 0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1, 1);
            transform: translate(-50%, -50%) scale(1, 1);
  }
}

@keyframes ripple {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0, 0);
            transform: translate(-50%, -50%) scale(0, 0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1, 1);
            transform: translate(-50%, -50%) scale(1, 1);
  }
}

@-webkit-keyframes ripple0 {
  from {
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
    opacity: 0.2;
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes ripple0 {
  from {
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
    opacity: 0.2;
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
}

.link {
  display: inline-block;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
  position: relative;
  width: 7rem;
  height: 7rem;
  -webkit-animation: ripple0 2s infinite;
          animation: ripple0 2s infinite;
}

.link .img-bubble {
  border-radius: 50%;
  width: 7rem;
  height: 7rem;
  display: inline-block;
  position: relative;
  text-align: center;
  background: radial-gradient(circle farthest-corner at center, rgba(23, 250, 191, 0.95) 0%, rgba(0, 36, 127, 0.95) 100%);
  z-index: 2;
  /****** Le code suivant permet d'ajouter 2 cercles supplémentaires à l'effet de sonde
    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(
        circle farthest-corner at center,
        rgba(23, 250, 191, 0.6) 0%,
        rgba(0, 36, 127, 0.6) 100%
      );
      animation: ripple 1s infinite;
      z-index: 3;
    }

    &::before {
      content: "";
      position: absolute;
      display: block;
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(
        circle farthest-corner at center,
        rgba(23, 250, 191, 0.8) 0%,
        rgba(0, 36, 127, 0.8) 100%
      );
      animation: ripple 3.5s infinite;
      z-index: 1;
    }
    //*/
}

.link img {
  display: inline-block;
  width: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 4;
}

.cond-gen {
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.cond-gen .titre {
  margin-bottom: 2rem;
}

/*********************************************************/
footer {
  font-family: "Futura-CondensedLight", "Lucida Sans", "Lucida Sans Regular",
 "Lucida Grande", "Geneva";
  font-size: 1.3rem;
  color: #fff;
  background: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(28.51%, rgba(0, 13, 45, 0.71)), color-stop(60.56%, rgba(0, 25, 89, 0.39)), color-stop(85.47%, rgba(0, 33, 117, 0.15)), to(rgba(0, 36, 127, 0)));
  background: linear-gradient(0deg, black 0%, rgba(0, 13, 45, 0.71) 28.51%, rgba(0, 25, 89, 0.39) 60.56%, rgba(0, 33, 117, 0.15) 85.47%, rgba(0, 36, 127, 0) 100%);
}

#socialnetwork2 {
  display: none;
}

#socialnetwork1 {
  display: block;
}

#contact {
  padding: 2rem 2rem 2rem 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (min-width: 48em) {
  #contact div#email label {
    display: inline-block;
    width: 14rem;
  }
}

#contact div#email span {
  position: relative;
  display: inline-block;
}

#contact div#email span #zone-mail {
  background: -webkit-gradient(linear, left bottom, left top, from(#237c64), color-stop(4.42%, rgba(20, 222, 183, 0.7)), color-stop(12.24%, rgba(15, 179, 170, 0.7)), color-stop(20.68%, rgba(11, 140, 158, 0.7)), color-stop(29.63%, rgba(8, 108, 148, 0.7)), color-stop(39.24%, rgba(5, 82, 141, 0.7)), color-stop(49.75%, rgba(3, 61, 135, 0.7)), color-stop(61.64%, rgba(1, 47, 130, 0.7)), color-stop(76.05%, rgba(0, 39, 128, 0.7)), to(rgba(0, 36, 127, 0.7)));
  background: linear-gradient(0deg, #237c64 0%, rgba(20, 222, 183, 0.7) 4.42%, rgba(15, 179, 170, 0.7) 12.24%, rgba(11, 140, 158, 0.7) 20.68%, rgba(8, 108, 148, 0.7) 29.63%, rgba(5, 82, 141, 0.7) 39.24%, rgba(3, 61, 135, 0.7) 49.75%, rgba(1, 47, 130, 0.7) 61.64%, rgba(0, 39, 128, 0.7) 76.05%, rgba(0, 36, 127, 0.7) 100%);
  width: 17rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  border: 0;
  padding-left: 1rem;
  color: #fff !important;
  text-decoration: none;
  font-family: "Futura-CondensedLight", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Geneva";
  font-size: 1.3rem;
}

#contact div#email span ::-webkit-input-placeholder {
  opacity: 1;
}

#contact div#email span :-ms-input-placeholder {
  opacity: 1;
}

#contact div#email span ::-ms-input-placeholder {
  opacity: 1;
}

#contact div#email span ::placeholder {
  opacity: 1;
}

#contact div#email span .submit {
  position: absolute;
  border: none;
  top: 0;
  bottom: 0;
  right: 0;
  height: 2.5rem;
  width: 2.5rem;
  background: url("../icons/Icon_Plane.svg") no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 400ms ease-in-out;
  transition: -webkit-transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}

#contact div#email span .submit:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

div.socialnetwork-ft {
  margin-left: auto;
}

div.socialnetwork-ft span {
  display: inline-block;
  width: 2.2rem;
  height: 2.2rem;
  margin-left: 0.2rem;
  -webkit-transform: scale(1) perspective(1000px);
          transform: scale(1) perspective(1000px);
  -webkit-transition: -webkit-transform 300ms ease-in-out;
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

div.socialnetwork-ft span img {
  opacity: 0.8;
  -webkit-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
  width: 100%;
  height: 100%;
}

div.socialnetwork-ft span .sn-shadow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotateY(-89deg);
          transform: rotateY(-89deg);
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

div.socialnetwork-ft span:hover {
  -webkit-transform: scale(1.1) perspective(1000px);
          transform: scale(1.1) perspective(1000px);
}

div.socialnetwork-ft span:hover img {
  opacity: 1;
}

div.socialnetwork-ft span:hover .sn-shadow {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

#foot-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0rem 3% 2rem 5%;
  margin-bottom: 4rem;
}

#foot-menu .box {
  width: 15rem;
}

#foot-menu .box h3 {
  font-size: 1.1rem;
}

#foot-menu .box h3 img {
  display: none;
}

#foot-menu .box ul {
  width: 90%;
}

#foot-menu .box ul li {
  color: #444;
  margin-top: 0.5rem;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition: all 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-right: 0.3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#foot-menu .box ul li img {
  opacity: 0;
  height: 1em;
  width: 1em;
  -webkit-transition: opacity 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition: opacity 0.3s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}

#foot-menu .box ul li:hover {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: rgba(255, 255, 255, 0.842);
  cursor: pointer;
  padding-left: 0.5em;
  border-radius: 20px;
  background: -webkit-gradient(linear, left bottom, left top, from(#237c64), color-stop(4.42%, rgba(20, 222, 183, 0.7)), color-stop(12.24%, rgba(15, 179, 170, 0.7)), color-stop(20.68%, rgba(11, 140, 158, 0.7)), color-stop(29.63%, rgba(8, 108, 148, 0.7)), color-stop(39.24%, rgba(5, 82, 141, 0.7)), color-stop(49.75%, rgba(3, 61, 135, 0.7)), color-stop(61.64%, rgba(1, 47, 130, 0.7)), color-stop(76.05%, rgba(0, 39, 128, 0.7)), to(rgba(0, 36, 127, 0.7)));
  background: linear-gradient(0deg, #237c64 0%, rgba(20, 222, 183, 0.7) 4.42%, rgba(15, 179, 170, 0.7) 12.24%, rgba(11, 140, 158, 0.7) 20.68%, rgba(8, 108, 148, 0.7) 29.63%, rgba(5, 82, 141, 0.7) 39.24%, rgba(3, 61, 135, 0.7) 49.75%, rgba(1, 47, 130, 0.7) 61.64%, rgba(0, 39, 128, 0.7) 76.05%, rgba(0, 36, 127, 0.7) 100%);
}

#foot-menu .box ul li:hover img {
  opacity: 1;
}

#foot-menu .box ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

#copyright {
  margin: 0 0.8% 0 0.5%;
  padding-bottom: 0.5rem;
  position: relative;
}

#copyright li.copyitem {
  display: inline-block;
  border-right: 2px solid white;
  font-size: 1rem;
  padding-right: 0.7rem;
  padding-left: 0.7rem;
}

#copyright li.copyitem a {
  color: grey;
}

#copyright li.copyitem a:hover {
  color: #333;
  text-decoration: underline;
}

#copyright li.copyitem:first-child {
  color: #fff;
  font-size: 0.8rem;
}

#copyright li.copyitem:first-child span {
  font-family: "CarbonD-Bold", "Lucida Sans";
}

#copyright li.copyitem:first-child a {
  color: #fff;
  padding-left: 0.5rem;
}

#copyright li.copyitem:first-child a:hover {
  color: #333;
}

#copyright div#logofooter {
  position: absolute;
  bottom: 0.3rem;
  right: 0;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  -webkit-transform: scale(1);
          transform: scale(1);
  background: url(../icons/Icon_CD-Footer.svg) no-repeat;
  background-size: 100% 100%;
  -webkit-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
}

#copyright div#logofooter:hover {
  cursor: pointer;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  background: url(../icons/Icon_CD-footer-hover.svg) no-repeat;
  opacity: 1;
}

#hidden-msg {
  top: 40%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#hidden-msg-box {
  margin: 6rem 7rem 4rem 7rem;
  padding: 1rem 2rem;
}

/*************************************/
@media screen and (max-width: 48em) {
  footer #contact {
    padding-left: 0;
    border-top: 2px solid aqua;
  }
  footer #contact div#email form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  footer #contact div#email form label {
    margin-left: 0.5rem;
  }
  footer #contact div#email form span {
    margin-left: 0;
    margin-top: 1rem;
  }
  footer #socialnetwork1 {
    display: none;
  }
  footer #socialnetwork2 {
    display: block;
  }
  footer #foot-menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 2rem;
    padding-top: 1rem;
    padding-left: 0;
    padding-bottom: 0rem;
    border-top: 2px solid aqua;
    border-bottom: 2px solid aqua;
  }
  footer #foot-menu .box {
    margin-bottom: 2rem;
    width: 100%;
  }
  footer #foot-menu .box h3 {
    font-size: 1.3rem;
    border-radius: 20px;
    padding: 0.5rem 0.3rem 0.5rem 0.7rem;
    background: -webkit-gradient(linear, left bottom, left top, from(#237c64), color-stop(4.42%, rgba(20, 222, 183, 0.7)), color-stop(12.24%, rgba(15, 179, 170, 0.7)), color-stop(20.68%, rgba(11, 140, 158, 0.7)), color-stop(29.63%, rgba(8, 108, 148, 0.7)), color-stop(39.24%, rgba(5, 82, 141, 0.7)), color-stop(49.75%, rgba(3, 61, 135, 0.7)), color-stop(61.64%, rgba(1, 47, 130, 0.7)), color-stop(76.05%, rgba(0, 39, 128, 0.7)), to(rgba(0, 36, 127, 0.7)));
    background: linear-gradient(0deg, #237c64 0%, rgba(20, 222, 183, 0.7) 4.42%, rgba(15, 179, 170, 0.7) 12.24%, rgba(11, 140, 158, 0.7) 20.68%, rgba(8, 108, 148, 0.7) 29.63%, rgba(5, 82, 141, 0.7) 39.24%, rgba(3, 61, 135, 0.7) 49.75%, rgba(1, 47, 130, 0.7) 61.64%, rgba(0, 39, 128, 0.7) 76.05%, rgba(0, 36, 127, 0.7) 100%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  footer #foot-menu .box h3 img {
    display: inline-block;
    height: 1.4rem;
    width: 1.4rem;
    cursor: pointer;
  }
  footer #foot-menu .box li {
    margin-top: 1rem;
  }
  footer #foot-menu .box #aide-links,
  footer #foot-menu .box #about-links {
    height: 0;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
  }
  footer #copyright ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  footer #copyright ul li.copyitem {
    border: none;
    margin-top: 2rem;
  }
}

@media screen and (max-width: 30em) {
  footer {
    font-size: 1.5rem;
  }
}
/*# sourceMappingURL=style.css.map */