@charset "UTF-8";
/*** VARIABLES ***/
/*** GENERAL ***/
html {
  background-color: #303030;
  margin: 0px;
  height: 100%;
  width: 100%; }

html.loaded {
  background-image: url(../img/background.jpg);
  background-position: bottom;
  background-size: cover; }

body {
  margin: 0px;
  min-height: 100%;
  width: 100%;
  font-family: "_Montserrat_regular", sans-serif;
  color: white;
  -webkit-transition: opacity .3s ease-in-out;
  -o-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
  background-image: url(../img/background.jpg);
  background-position: center;
  background-size: cover; }

a {
  color: white; }

a:hover {
  text-decoration: none;
  color: #a6a6a6; }

span.red {
  color: #d83a31;
  font-size: 2em;
  line-height: 0em; }

.fade {
  opacity: 0; }

#white_menu {
  padding: 40px 60px 0 60px; }
  #white_menu .logo, 
  #white_menu .logo-menu {
    width: 100px; }
  #white_menu .logo-menu {
    display: none; }
  #white_menu .back {
    float: right;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; }
  #white_menu .burger, 
  .home .burger {
    display: none; }
    #white_menu .back img, 
    .home .back img {
      width: 30px;
      position: relative;
      top: 3px; }
  #white_menu .back:hover, 
  .home .back:hover {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }


   .info_btn {
     width: 15px;
     height: 15px;
     background-image: url(../img/icon_info_grey.png);
     position: relative;
     background-size: contain;
     top: 0.1em;

     display: inline-block;
     cursor: pointer;
     background-repeat: no-repeat; }
     .info_btn:hover {
       background-image: url(/img/icon_info.png); }

   .info_btn_1 {
     left: 3%;
   }

   .info_btn_2 {
     float: right;
     top: 0.5em;
   }

   .info_btn_3 {
      float: right;
     top: 0.5em;
   }

   .info_btn_4 {
     float: right;
     top: 0.5em;
   }

   @media screen and (min-width: 2000px) {
     .info_btn_2, .info_btn_3, .info_btn_4 {
       right: 10%;
      }
   }

   @media screen and (min-width: 2500px) {
     .info_btn_2, .info_btn_3, .info_btn_4 {
       right: 15%;
      }
   }



    .right_column .info_btn {
      float: none;
      left: 20px;
      top: 3px; }

    .sun_ctn .info_btn {
      float: none;
      left: 0;
      top: 10px;
      width: 20px;
      height: 20px; }

    #modal_information {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 40%;
      height: 70%;
      background-color: rgba(255, 255, 255, 0.1);
      overflow: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      #modal_information .close {
        text-align: right;
        padding: 20px 20px  0 0; }
        #modal_information .close img {
          width: 40px;
          height: 40px;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          cursor: pointer; }
      #modal_information .content {
        padding: 6% 5% 0% 5%;
        font-family: "_Montserrat_extra_light", sans-serif;
        font-size: 1.1vw; }
/*** HOME ***/
header.home {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 40px 60px 0 60px;
  font-size: 16px;
  height: 90px; }
  header.home .menu_telechargements {
    width: 220px;
    position: relative;
    top: -9px;
    font-family: "_Montserrat_extra_light", sans-serif;
    cursor: pointer; }
    header.home .menu_telechargements .icon {
      position: relative;
      top: 11px;
      margin-right: 16px;
      display: inline-block;
      width: 31px;
      height: 31px;
      background-image: url(/img/icon_plus.svg);
      background-size: cover; }
    header.home .menu_telechargements .opened {
      background-image: url(/img/icon_moins.png); }
    header.home .menu_telechargements .hidden_menu {
      width: 300px;
      margin-left: 50px;
      margin-top: 30px; }
      header.home .menu_telechargements .hidden_menu a {
        margin-top: 15px;
        display: block;
        font-size: 14px; }
      header.home .menu_telechargements .hidden_menu img {
        width: 20px;
        margin-right: 30px; }
  header.home .switch_langue, 
  .switch_langue {
    width: 220px;
    width: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    top: 6px; }
    header.home .switch_langue .inactive, 
    .switch_langue .inactive {
      color: #777777; }
      header.home .switch_langue .inactive:hover, 
      .switch_langue .inactive:hover {
        color: white; }
    header.home .switch_langue .active:hover, 
    .switch_langue .active:hover {
      color: white; }
  header.home .connexion, 
  .home .connexion {
    text-align: right;
    width: 220px;
    position: relative;
    top: 3px;
    font-family: "_Montserrat_extra_light", sans-serif; }
  #white_menu.home .connexion {
    float: right; }
    header.home .connexion img, 
    .home .connexion img {
      -webkit-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
      width: 30px; }
    header.home .connexion:hover img, 
    .home .connexion:hover img {
      -webkit-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0); }

#center_home .logo {
  position: absolute;
  /* postulat de départ */
  top: 45%;
  left: 50%;
  /* à 50%/50% du parent référent */
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 12%;
  opacity: 0;
  -webkit-animation: fadeIn .5s ease-in-out forwards;
  animation: fadeIn .5s ease-in-out forwards;
  -webkit-animation-delay: .5s;
  animation-delay: .5s; }

#center_home p {
  font-family: "_Montserrat_regular", sans-serif;
  color: #777777;
  margin: 0; }

#center_home .ctn_mots_1 {
  position: absolute;
  top: 44.6%;
  left: 68.6%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 24%;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out; }
  #center_home .ctn_mots_1.out {
    opacity: 0; }

#center_home .mot_1 {
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out; }
  #center_home .mot_1 img {
    width: 115%;
    max-width: unset; }

#center_home .ctn_mots_2 {
  position: absolute;
  top: 43%;
  left: 68.9%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-top: 10%;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out; }
  #center_home .ctn_mots_2.out {
    opacity: 0; }

#center_home .mot_2 {
  font-size: 5.4vw; }

#center_home .mot_3 {
  position: relative;
  top: -1.4em;
  font-size: 5.4vw; }

#center_home .mot_1.in, #center_home .mot_2.in, #center_home .mot_3.in {
  -webkit-animation: flipInX 1s ease-in-out forwards;
  animation: flipInX 1s ease-in-out forwards; }

#center_home .ctn_connected {
  position: absolute;
  /* postulat de départ */
  top: 45%;
  left: 50%;
  /* à 50%/50% du parent référent */
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 5vw; }
  #center_home .ctn_connected .red {
    font-size: 1em; }
  #center_home .ctn_connected .fleche {
    width: .6em;
    height: .6em;
    background-image: url(/img/fleche_right_big.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: contain;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; }
  #center_home .ctn_connected:hover .fleche {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }

#mobile_only .logo {
  margin-top: 10vh;
  margin-bottom: 3vh;
  width: 30%;
  margin-left: 10%; }

#mobile_only p {
  text-align: left;
  font-size: 12vw;
  color: #777777;
  margin-left: 10%; }

#mobile_only a {
  margin-top: 6vh;
  margin-left: 10%; }

/* ANIMATIONS MOTS */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1; } }

#bottom_home {
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 100%; }
  #bottom_home .logos {
    width: 43%; }
  #bottom_home p {
    color: #fff;
    font-family: "_Montserrat_extra_light", sans-serif;
    font-size: 11px; }

#information {
  cursor: pointer;
  position: absolute;
  bottom: 75px;
  right: 50px; }
  #information img {
    width: 30px; }

/****
  CONNEXION
****/
.page_connexion form {
  width: 440px;
  margin: 12vh auto; }
  .page_connexion form:before {
    content: url("/img/main_moins.png");
    position: relative;
    left: -90px;
    top: 23px; }
  .page_connexion form legend {
    font-size: 21px;
    margin-bottom: 30px;
    font-family: "_Montserrat_regular", sans-serif; }
  .page_connexion form .input_box {
    padding: 10px 20px;
    border: 1px solid white; }
    .page_connexion form .input_box.error {
      background-color: rgba(255, 255, 255, 0.4); }
  .page_connexion form .box_2 {
    margin-top: 30px; }
    .page_connexion form .box_2 label {
      float: left; }
    .page_connexion form .box_2 .password_visibility {
      position: relative;
      background: url("/img/eye.png");
      background-size: contain;
      width: 33px;
      height: 20px;
      top: 22px;
      float: right;
      cursor: pointer; }
  .page_connexion form .message {
    font-family: "_Montserrat_extra_light", sans-serif;
    position: relative;
    left: 460px;
    top: -45px;
    font-size: 14px;
    height: 0; }
  .page_connexion form label {
    display: block;
    font-size: 16px;
    cursor: pointer; }
  .page_connexion form input[type="text"], .page_connexion form input[type="password"], .page_connexion form input[type="email"] {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    background-color: transparent;
    border: none;
    color: white;
    font-family: "_Montserrat_extra_light", sans-serif;
    font-size: 16px; }
    .page_connexion form input[type="text"]:focus, .page_connexion form input[type="password"]:focus, .page_connexion form input[type="email"]:focus {
      outline: none; }
  .page_connexion form .connect_zone {
    margin-top: 50px; }
  .page_connexion form input[type="checkbox"]:checked {
    background-image: url("/img/checkbox_bkg.png");
    background-color: initial;
    border-color: white;
    background-size: 100%; }
  .page_connexion form .rc {
    font-family: "_Montserrat_extra_light", sans-serif;
    display: inline-block;
    margin-left: 15px;
    font-size: 16px; }
  .page_connexion form input[type="submit"] {
    float: right;
    background: url("/img/fleche_right.png") no-repeat center center;
    background-size: contain;
    width: 30px;
    height: 30px;
    border: none;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: relative;
    top: -3px;
    outline: none; }
  .page_connexion form input[type="submit"]:hover {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }

/****
  PRECHOICE
****/
.page_prechoice form {
  width: 350px;
  margin: 3vh auto;
  height: 75vh;
  min-height: 540px; }

.page_prechoice .logo_client {
  margin: 0 auto 50px;
  width: 110px;
  height: 110px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; }

.page_prechoice .row {
  border-bottom: 1px solid #777777;
  margin-bottom: 40px; }

.page_prechoice label {
  display: block;
  font-size: 16px;
  cursor: pointer; }

.page_prechoice select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  width: 100%;
  border: none;
  border-radius: 0;
  color: white;
  margin: 10px 0;
  height: 30px;
  padding: 0;
  font-size: 16px;
  font-family: "_Montserrat_extra_light", sans-serif;
  background: url("/img/fleche_select.png") no-repeat 100% 50%;
  line-height: 1.5;
  outline: none; }

  .page_prechoice option {
   color: #000000;
  }

.page_prechoice input[type="submit"] {
  float: right;
  background: url("/img/fleche_right.png") no-repeat center center;
  background-size: contain;
  width: 30px;
  height: 30px;
  border: none;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  outline: none; }

.page_prechoice input[type="submit"]:hover {
  -webkit-transform: translate3d(5px, 0, 0);
  transform: translate3d(5px, 0, 0); }

.page_prechoice #bottom_home {
  margin-top: 50px;
  position: initial; }

/****
  SUN
****/
.main .left_column {
  width: 17%;
  height: 100%;
  padding: 13vh 0 0 60px;
  font-family: "_Montserrat_extra_light", sans-serif;
  font-size: 1.1vw;
  float: left; }
  .main .left_column p {
    margin: 5px 0; }
  .main .left_column ul {
    padding: 0; }
  .main .left_column ul li {
    list-style: none;
    margin-bottom: 7px; }
    .main .left_column ul li:first-child {
      cursor: pointer; }
    .main .left_column ul li:before {
      content: url("../img/tiret.png");
      margin-right: 20px;
      position: relative;
      top: 5px; }
    .main .left_column ul li span {
      font-family: "_Montserrat_bold", sans-serif; }
    .main .left_column ul li.folded:before {
      content: url("../img/tiret_plus.png"); }
  .main .left_column .submenu {
    margin-left: 20px;
    margin-top: 0; }
    .main .left_column .submenu li:before {
      content: ""; }
  .main .left_column .fd_2 {
    cursor: pointer;
    margin-top: 50px; }
    .main .left_column .fd_2 .red {
      font-size: 1.3em; }

@media screen and (min-width: 1800px) {
  .main .left_column {
    font-size: 22px; } }

.main .middle_column {
  float: left;
  width: 57%;
  height: 90vh;
  position: relative; }

  .main .middle_column #age, 
  .main .middle_column #marital {
    padding: 6vh 9vh 0 8vh; }

.main .right_column {
  padding-top: 13vh;
  padding-left: 3.5vh;
  width: 18%;
  float: left;
  height: 500px; }
  .main .right_column .titre {
    position: relative;
    left: -16%;
    font-family: "_Montserrat_bold", sans-serif;
    margin-bottom: 20px;
    font-size: 1.1vw;
    margin-top: 1vh; }
    .main .right_column .titre:before {
      content: '';
      background: url("/img/main_moins.png");
      width: 16%;
      height: 3px;
      display: inline-block;
      position: relative;
      top: -2px;
      left: -6%; }
  .main .right_column .titre .dot {
    color: #cc3930; }
  .main .right_column .profil {
    display: none;
    margin-bottom: 20px;
    font-size: 1.3vw;
    position: relative;
    left: -16%; }
    .main .right_column .profil:before {
      content: '';
      background: url("/img/main_moins.png");
      width: 16%;
      height: 3px;
      display: inline-block;
      position: relative;
      top: -6px;
      left: -6%; }
  .main .right_column .buttons {
    display: flex;
    margin-bottom: 20px; }
    .main .right_column .buttons a {
      width: 50px;
      height: 50px;
      background-repeat: no-repeat;
      background-size: cover;
      margin-right: 15px;
      -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out; }
    .main .right_column .buttons .btn1 {
      display: none;
      }
      .main .right_column .buttons .btn1.btn_377 {
        background-image: url("/img/interest/377.png"); }
      .main .right_column .buttons .btn1.btn_377.active, .main .right_column .buttons .btn1.btn_377:hover {
        background-image: url("/img/interest/377_selected.png"); }
      .main .right_column .buttons .btn1.btn_1 {
        background-image: url("/img/interest/1.png"); }
      .main .right_column .buttons .btn1.btn_1.active, .main .right_column .buttons .btn1.btn_1:hover {
        background-image: url("/img/interest/1_selected.png"); }
      .main .right_column .buttons .btn1.btn_2 {
        background-image: url("/img/interest/2.png"); }
      .main .right_column .buttons .btn1.btn_2.active, .main .right_column .buttons .btn1.btn_2:hover {
        background-image: url("/img/interest/2_selected.png"); }
      .main .right_column .buttons .btn1.btn_63 {
        background-image: url("/img/interest/63.png"); }
      .main .right_column .buttons .btn1.btn_63.active, .main .right_column .buttons .btn1.btn_63:hover {
        background-image: url("/img/interest/63_selected.png"); }
      .main .right_column .buttons .btn1.btn_85 {
        background-image: url("/img/interest/85.png"); }
      .main .right_column .buttons .btn1.btn_85.active, .main .right_column .buttons .btn1.btn_85:hover {
        background-image: url("/img/interest/85_selected.png"); }
      .main .right_column .buttons .btn1.btn_105 {
        background-image: url("/img/interest/105.png"); }
      .main .right_column .buttons .btn1.btn_105.active, .main .right_column .buttons .btn1.btn_105:hover {
        background-image: url("/img/interest/105_selected.png"); }
      .main .right_column .buttons .btn1.btn_112 {
        background-image: url("/img/interest/112.png"); }
      .main .right_column .buttons .btn1.btn_112.active, .main .right_column .buttons .btn1.btn_112:hover {
        background-image: url("/img/interest/112_selected.png"); }
      .main .right_column .buttons .btn1.btn_166 {
        background-image: url("/img/interest/166.png"); }
      .main .right_column .buttons .btn1.btn_166.active, .main .right_column .buttons .btn1.btn_166:hover {
        background-image: url("/img/interest/166_selected.png"); }
      .main .right_column .buttons .btn1.btn_202 {
        background-image: url("/img/interest/202.png"); }
      .main .right_column .buttons .btn1.btn_202.active, .main .right_column .buttons .btn1.btn_202:hover {
        background-image: url("/img/interest/202_selected.png"); }
      .main .right_column .buttons .btn1.btn_221 {
        background-image: url("/img/interest/221.png"); }
      .main .right_column .buttons .btn1.btn_221.active, .main .right_column .buttons .btn1.btn_221:hover {
        background-image: url("/img/interest/221_selected.png"); }
      .main .right_column .buttons .btn1.btn_243 {
        background-image: url("/img/interest/243.png"); }
      .main .right_column .buttons .btn1.btn_243.active, .main .right_column .buttons .btn1.btn_243:hover {
        background-image: url("/img/interest/243_selected.png"); }
      .main .right_column .buttons .btn1.btn_273 {
        background-image: url("/img/interest/273.png"); }
      .main .right_column .buttons .btn1.btn_273.active, .main .right_column .buttons .btn1.btn_273:hover {
        background-image: url("/img/interest/273_selected.png"); }
      .main .right_column .buttons .btn1.btn_324 {
        background-image: url("/img/interest/324.png"); }
      .main .right_column .buttons .btn1.btn_324.active, .main .right_column .buttons .btn1.btn_324:hover {
        background-image: url("/img/interest/324_selected.png"); }
      .main .right_column .buttons .btn1.btn_342 {
        background-image: url("/img/interest/342.png"); }
      .main .right_column .buttons .btn1.btn_342.active, .main .right_column .buttons .btn1.btn_342:hover {
        background-image: url("/img/interest/342_selected.png"); }
      .main .right_column .buttons .btn1.btn_377 {
        background-image: url("/img/interest/377.png"); }
      .main .right_column .buttons .btn1.btn_377.active, .main .right_column .buttons .btn1.btn_377:hover {
        background-image: url("/img/interest/377_selected.png"); }
      .main .right_column .buttons .btn1.btn_392 {
        background-image: url("/img/interest/392.png"); }
      .main .right_column .buttons .btn1.btn_392.active, .main .right_column .buttons .btn1.btn_392:hover {
        background-image: url("/img/interest/392_selected.png"); }
      .main .right_column .buttons .btn1.btn_406 {
        background-image: url("/img/interest/406.png"); }
      .main .right_column .buttons .btn1.btn_406.active, .main .right_column .buttons .btn1.btn_406:hover {
        background-image: url("/img/interest/406_selected.png"); }
      .main .right_column .buttons .btn1.btn_421 {
        background-image: url("/img/interest/421.png"); }
      .main .right_column .buttons .btn1.btn_421.active, .main .right_column .buttons .btn1.btn_421:hover {
        background-image: url("/img/interest/421_selected.png"); }
      .main .right_column .buttons .btn1.btn_430 {
        background-image: url("/img/interest/430.png"); }
      .main .right_column .buttons .btn1.btn_430.active, .main .right_column .buttons .btn1.btn_430:hover {
        background-image: url("/img/interest/430_selected.png"); }
      .main .right_column .buttons .btn1.btn_445 {
        background-image: url("/img/interest/455.png"); }
      .main .right_column .buttons .btn1.btn_445.active, .main .right_column .buttons .btn1.btn_445:hover {
        background-image: url("/img/interest/445_selected.png"); }
      .main .right_column .buttons .btn1.btn_467 {
        background-image: url("/img/interest/467.png"); }
      .main .right_column .buttons .btn1.btn_467.active, .main .right_column .buttons .btn1.btn_467:hover {
        background-image: url("/img/interest/467_selected.png"); }
      .main .right_column .buttons .btn1.btn_480 {
        background-image: url("/img/interest/480.png"); }
      .main .right_column .buttons .btn1.btn_480.active, .main .right_column .buttons .btn1.btn_480:hover {
        background-image: url("/img/interest/480_selected.png"); }
      .main .right_column .buttons .btn1.btn_489 {
        background-image: url("/img/interest/489.png"); }
      .main .right_column .buttons .btn1.btn_489.active, .main .right_column .buttons .btn1.btn_489:hover {
        background-image: url("/img/interest/489_selected.png"); }
      .main .right_column .buttons .btn1.btn_509 {
        background-image: url("/img/interest/509.png"); }
      .main .right_column .buttons .btn1.btn_509.active, .main .right_column .buttons .btn1.btn_509:hover {
        background-image: url("/img/interest/509_selected.png"); }
      .main .right_column .buttons .btn1.btn_526 {
        background-image: url("/img/interest/526.png"); }
      .main .right_column .buttons .btn1.btn_526.active, .main .right_column .buttons .btn1.btn_526:hover {
        background-image: url("/img/interest/526_selected.png"); }
      .main .right_column .buttons .btn1.btn_527 {
        background-image: url("/img/interest/527.png"); }
      .main .right_column .buttons .btn1.btn_527.active, .main .right_column .buttons .btn1.btn_527:hover {
        background-image: url("/img/interest/527_selected.png"); }
      .main .right_column .buttons .btn1.btn_565 {
        background-image: url("/img/interest/565.png"); }
      .main .right_column .buttons .btn1.btn_565.active, .main .right_column .buttons .btn1.btn_565:hover {
        background-image: url("/img/interest/565_selected.png"); }
      .main .right_column .buttons .btn1.btn_606 {
        background-image: url("/img/interest/606.png"); }
      .main .right_column .buttons .btn1.btn_606.active, .main .right_column .buttons .btn1.btn_606:hover {
        background-image: url("/img/interest/606_selected.png"); }

    .main .right_column .buttons .btn2 {
      background-image: url("/img/sexe2.png"); }
    .main .right_column .buttons .btn2.active, .main .right_column .buttons .btn2:hover {
      background-image: url("/img/sexe1.png"); }

    .main .right_column .buttons .btn2.btn2-f {
      background-image: url("/img/sexe-F2.png"); }
    .main .right_column .buttons .btn2.btn2-f.active, .main .right_column .buttons .btn2.btn2-f:hover {
      background-image: url("/img/sexe-F1.png"); }

   .main .right_column .buttons .btn3 {
      display: none;
      background-image: url("/img/marital2.png"); }
   .main .right_column .buttons .btn3.active, .main .right_column .buttons .btn3:hover {
        background-image: url("/img/marital1.png"); }

    .main .right_column .buttons .btn4 {
      background-image: url("/img/icon_sun.png"); }
      .main .right_column .buttons .btn4:hover {
        background-image: url("/img/icon_sun_hover.png"); }

  .main .right_column .text {
    font-size: 1.1vw;
    font-family: "_Montserrat_extra_light", sans-serif;
    line-height: 2em; }
    .main .right_column .text bold, 
    .main .right_column .text strong {
      font-family: "_Montserrat_bold", sans-serif; }

      .page_sun #container {
        position: absolute;
        left: 5%;
        top: -3%;
        right: 0;
        bottom: 0; }

  .page_sun #container.in {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg); }

.page_sun .page_content {
  width: 800px;
  height: 800px;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  position: absolute; }

.page_sun .sun_ctn {
  width: 100px;
  margin: 350px auto; }
  .page_sun .sun_ctn ul {
    width: 150px;
    padding-left: 190px; }
  .page_sun .sun_ctn ul li {
    list-style: none;
    -webkit-transform-origin: -100%;
    -ms-transform-origin: -100%;
    transform-origin: -100%;
    position: absolute;
    width: 180px;
    font-size: 13px;
    line-height: 47px; }
    .page_sun .sun_ctn ul li a.highlight {
      color: white; }
    .page_sun .sun_ctn ul li:hover a {
      color: white;
      -webkit-transition: color 0s ease-in-out !important;
      -o-transition: color 0s ease-in-out !important;
      transition: color 0s ease-in-out !important; }
  .page_sun .sun_ctn ul li a {
    position: absolute;
    color: #777777;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 200px;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    left: -80px;
    opacity: 0; }
    .page_sun .sun_ctn ul li a.in {
      -webkit-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      left: 0;
      opacity: 1; }
  .page_sun .sun_ctn .fa-circle {
    position: relative;
    left: -30px;
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; }
    .page_sun .sun_ctn .fa-circle.in {
      opacity: .7; }
    .page_sun .sun_ctn .fa-circle.dark {
      opacity: .3; }
  .page_sun .sun_ctn .item-0 {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }
  .page_sun .sun_ctn .item-1 {
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg); }
  .page_sun .sun_ctn .item-2 {
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg); }
  .page_sun .sun_ctn .item-3 {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg); }
  .page_sun .sun_ctn .item-4 {
    -webkit-transform: rotate(32deg);
    -ms-transform: rotate(32deg);
    transform: rotate(32deg); }
  .page_sun .sun_ctn .item-5 {
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg); }
  .page_sun .sun_ctn .item-6 {
    -webkit-transform: rotate(48deg);
    -ms-transform: rotate(48deg);
    transform: rotate(48deg); }
  .page_sun .sun_ctn .item-7 {
    -webkit-transform: rotate(56deg);
    -ms-transform: rotate(56deg);
    transform: rotate(56deg); }
  .page_sun .sun_ctn .item-8 {
    -webkit-transform: rotate(64deg);
    -ms-transform: rotate(64deg);
    transform: rotate(64deg); }
  .page_sun .sun_ctn .item-9 {
    -webkit-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    transform: rotate(72deg); }
  .page_sun .sun_ctn .item-10 {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg); }
  .page_sun .sun_ctn .item-11 {
    -webkit-transform: rotate(88deg);
    -ms-transform: rotate(88deg);
    transform: rotate(88deg); }
  .page_sun .sun_ctn .item-12 {
    -webkit-transform: rotate(96deg);
    -ms-transform: rotate(96deg);
    transform: rotate(96deg); }
  .page_sun .sun_ctn .item-13 {
    -webkit-transform: rotate(104deg);
    -ms-transform: rotate(104deg);
    transform: rotate(104deg); }
  .page_sun .sun_ctn .item-14 {
    -webkit-transform: rotate(112deg);
    -ms-transform: rotate(112deg);
    transform: rotate(112deg); }
  .page_sun .sun_ctn .item-15 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg); }
  .page_sun .sun_ctn .item-16 {
    -webkit-transform: rotate(128deg);
    -ms-transform: rotate(128deg);
    transform: rotate(128deg); }
  .page_sun .sun_ctn .item-17 {
    -webkit-transform: rotate(136deg);
    -ms-transform: rotate(136deg);
    transform: rotate(136deg); }
  .page_sun .sun_ctn .item-18 {
    -webkit-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    transform: rotate(144deg); }
  .page_sun .sun_ctn .item-19 {
    -webkit-transform: rotate(152deg);
    -ms-transform: rotate(152deg);
    transform: rotate(152deg); }
  .page_sun .sun_ctn .item-20 {
    -webkit-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    transform: rotate(160deg); }
  .page_sun .sun_ctn .item-21 {
    -webkit-transform: rotate(168deg);
    -ms-transform: rotate(168deg);
    transform: rotate(168deg); }
  .page_sun .sun_ctn .item-22 {
    -webkit-transform: rotate(176deg);
    -ms-transform: rotate(176deg);
    transform: rotate(176deg); }
  .page_sun .sun_ctn .item-23 {
    -webkit-transform: rotate(184deg);
    -ms-transform: rotate(184deg);
    transform: rotate(184deg); }
  .page_sun .sun_ctn .item-24 {
    -webkit-transform: rotate(192deg);
    -ms-transform: rotate(192deg);
    transform: rotate(192deg); }
  .page_sun .sun_ctn .item-25 {
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg); }
  .page_sun .sun_ctn .item-26 {
    -webkit-transform: rotate(208deg);
    -ms-transform: rotate(208deg);
    transform: rotate(208deg); }
  .page_sun .sun_ctn .item-27 {
    -webkit-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    transform: rotate(216deg); }
  .page_sun .sun_ctn .item-28 {
    -webkit-transform: rotate(224deg);
    -ms-transform: rotate(224deg);
    transform: rotate(224deg); }
  .page_sun .sun_ctn .item-29 {
    -webkit-transform: rotate(232deg);
    -ms-transform: rotate(232deg);
    transform: rotate(232deg); }
  .page_sun .sun_ctn .item-30 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg); }
  .page_sun .sun_ctn .item-31 {
    -webkit-transform: rotate(248deg);
    -ms-transform: rotate(248deg);
    transform: rotate(248deg); }
  .page_sun .sun_ctn .item-32 {
    -webkit-transform: rotate(256deg);
    -ms-transform: rotate(256deg);
    transform: rotate(256deg); }
  .page_sun .sun_ctn .item-33 {
    -webkit-transform: rotate(264deg);
    -ms-transform: rotate(264deg);
    transform: rotate(264deg); }
  .page_sun .sun_ctn .item-34 {
    -webkit-transform: rotate(272deg);
    -ms-transform: rotate(272deg);
    transform: rotate(272deg); }
  .page_sun .sun_ctn .item-35 {
    -webkit-transform: rotate(280deg);
    -ms-transform: rotate(280deg);
    transform: rotate(280deg); }
  .page_sun .sun_ctn .item-36 {
    -webkit-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    transform: rotate(288deg); }
  .page_sun .sun_ctn .item-37 {
    -webkit-transform: rotate(296deg);
    -ms-transform: rotate(296deg);
    transform: rotate(296deg); }
  .page_sun .sun_ctn .item-38 {
    -webkit-transform: rotate(304deg);
    -ms-transform: rotate(304deg);
    transform: rotate(304deg); }
  .page_sun .sun_ctn .item-39 {
    -webkit-transform: rotate(312deg);
    -ms-transform: rotate(312deg);
    transform: rotate(312deg); }
  .page_sun .sun_ctn .item-40 {
    -webkit-transform: rotate(320deg);
    -ms-transform: rotate(320deg);
    transform: rotate(320deg); }
  .page_sun .sun_ctn .item-41 {
    -webkit-transform: rotate(328deg);
    -ms-transform: rotate(328deg);
    transform: rotate(328deg); }
  .page_sun .sun_ctn .item-42 {
    -webkit-transform: rotate(336deg);
    -ms-transform: rotate(336deg);
    transform: rotate(336deg); }
  .page_sun .sun_ctn .item-43 {
    -webkit-transform: rotate(344deg);
    -ms-transform: rotate(344deg);
    transform: rotate(344deg); }
  .page_sun .sun_ctn .item-44 {
    -webkit-transform: rotate(352deg);
    -ms-transform: rotate(352deg);
    transform: rotate(352deg); }

.page_sun #interest_details {
  position: absolute;
  text-align: center;
  top: 48%;
  left: 45%;
  -webkit-transform: translate(-50%, -70%);
  -ms-transform: translate(-50%, -70%);
  transform: translate(-50%, -70%); }
  .page_sun #interest_details .pourcentage {
    font-size: 70px;
    font-family: "_Montserrat_bold", sans-serif; }
    .page_sun #interest_details .pourcentage sup {
      font-size: 40%;
      top: -1.04em; }
  .page_sun #interest_details .aiment {
    font-family: "_Montserrat_extra_light", sans-serif;
    margin-bottom: 10px;
    font-size: 14px; }
  .page_sun #interest_details .interet {
    width: 320px;
    font-size: 18px; }

.page_sun #btn_toggle_sun {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  background-image: url("/img/icon_list.png");
  background-size: contain;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  display: none;
  cursor: pointer; }
.page_sun #btn_toggle_sun:hover {
  background-image: url("/img/icon_list_hover.png"); }
  .page_sun #btn_toggle_sun.toggle {
    background-image: url("/img/icon_sun.png"); }
  .page_sun #btn_toggle_sun.toggle:hover {
    background-image: url("/img/icon_sun_hover.png"); }


  .page_sun #container_list {
   left: 0;
   right: 0;
   margin: auto;
   top: 50%;
   position: relative;
   transform: translateY(calc(-50% - 20px));

   width: 62%;
   font-family: "_Montserrat_extra_light", sans-serif;
   font-size: 1.1vw;
   background-color: rgba(255, 255, 255, 0.1);
   padding: 6% 9% 6% 7%;
   line-height: 1em;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
  }
  .page_sun #container_list table {
    width: 100%; }
    .page_sun #container_list table tr {
      cursor: pointer; }
    .page_sun #container_list table tr:hover {
      background-color: white;
      color: black; }
    .page_sun #container_list table .list_pourcentage {
      text-align: right; }


      .page_sun #legende {
        margin-top: 20px;
        text-align: center;
        /*font-family: "_Montserrat_extra_light", sans-serif;*/
        font-size: 13px; }
        .page_sun #legende span {
          display: inline-block;
          margin: 0 20px; }
        .page_sun #legende .line {
          display: inline-block;
          width: 1px;
          height: 35px;
          background-color: #777777;
          position: relative;
          top: 12px; }
        .page_sun #legende .icone_femme {
          width: 20px;
          position: relative;
          top: 7px;
          margin-right: 5px; }
        .page_sun #legende .icone_homme {
          width: 26px;
          position: relative;
          top: -2px; }

  .page_sun #sources, 
  #sources {
    position: absolute;
    bottom: 3vh;
    left: 0;
    width: 100%;
    font-family: "_Montserrat_extra_light", sans-serif;
    font-size: .7vw;
    text-align: center; }

/***
GRAPHIQUE
***/
.page_graphique .middle_column {
  padding: 0 3% 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.page_graphique #myChart {
  margin-top: 10vh; }

.page_graphique #legende {
  margin-top: 20px;
  text-align: center;
  font-family: "_Montserrat_extra_light", sans-serif;
  font-size: 13px; }
  .page_graphique #legende span {
    display: inline-block;
    margin: 0 20px; }
  .page_graphique #legende .line {
    display: inline-block;
    width: 1px;
    height: 35px;
    background-color: #777777;
    position: relative;
    top: 12px; }
  .page_graphique #legende .icone_femme {
    width: 20px;
    position: relative;
    top: 7px;
    margin-right: 5px; }
  .page_graphique #legende .icone_homme {
    width: 26px;
    position: relative;
    top: -2px; }

/***
PANORAMA
***/
.page_panorama .right_column:before {
  top: 10%; }

.page_panorama #gallery_ctn {
  padding: 0 20px;
  max-width: 600px;
  margin: 13vh auto; }
  .page_panorama #gallery_ctn .thumbnails {
    -webkit-transition: -webkit-filter .3s ease-in-out;
    transition: -webkit-filter .3s ease-in-out;
    -o-transition: filter .3s ease-in-out;
    transition: filter .3s ease-in-out;
    transition: filter .3s ease-in-out, -webkit-filter .3s ease-in-out;
    width: 12.6%;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    display: inline-block;
    margin: 1.5%;
    -webkit-box-shadow: 0 0 0 1px #777777;
    box-shadow: 0 0 0 1px #777777;
    height: 50px;
    background-size: cover;
    background-position: center; }
  .page_panorama #gallery_ctn .thumbnails:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    -webkit-box-shadow: 0 0 0 5px white;
    box-shadow: 0 0 0 5px white; }
  .page_panorama #gallery_ctn .flexImages {
    opacity: 0; }

.page_panorama #interest_details .pourcentage {
  font-size: 70px;
  font-family: "_Montserrat_bold", sans-serif;
  font-size: 4vw;
  margin-top: -9px; }
  .page_panorama #interest_details .pourcentage sup {
    font-size: 55%; }

.page_panorama #interest_details .aiment {
  font-family: "_Montserrat_extra_light", sans-serif;
  margin-bottom: 5px;
  font-size: 1.1vw; }

.page_panorama #interest_details .interet {
  width: 320px;
  font-size: 1.2vw; }

.page_panorama #interest_details .photos_count {
  font-family: "_Montserrat_extra_light", sans-serif;
  margin-top: 15px;
  font-size: .8vw; }

/***
CONTACT
***/
.page_contact #center_home {
  position: absolute;
  /* postulat de départ */
  top: 50%;
  left: 50%;
  /* à 50%/50% du parent référent */
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 350px; }

.page_contact .row {
  margin-bottom: 80px;
  font-size: 16px;
  color: #d8d8d8; }

.page_contact .person {
  text-align: center;
  font-family: "_Montserrat_extra_light", sans-serif; }
  .page_contact .person .slash {
    display: inline-block;
    margin: 0 20px; }

.page_contact .line {
  width: 320px;
  height: 1px;
  background-color: #777777;
  margin: 10px auto; }

.page_contact .mail {
  display: block;
  text-align: center;
  font-family: "_Montserrat_extra_light", sans-serif; }
  .page_contact .mail a {
    color: #d8d8d8; }
  .page_contact .mail a:hover {
    color: white; }



/***
New graphs - 06/2020
***/
.txt-color {
  font-size: 2em;
  color: #d83a31; 
}

#white_menu .switch_langue {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
}

.page_graphs a {
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all 0.3s ease 0s;
}

.page_graphs p {
    margin: 0; 
}

.page_graphs .tt-graphs {
  margin: 15px 60px 0;
  font-family: 'Montserrat-SemiBold';
  font-size: 2.6vw;
  color: rgba(255, 255, 255, 0.2);
}

.page_graphs ul {
    padding: 0; 
}

.page_graphs .recap {
  height: 100px;
  margin: 25px 0 0 -32px;
}

  .page_graphs ul li {
    list-style: none;
    padding-left: 32px;
    font-family: "_Montserrat_extra_light", sans-serif;
    font-size: 1.1vw;
    color: #b8b5b5;
  }

  .page_graphs ul li:first-child {
    padding-left: 0;
  }

  .page_graphs .recap li:first-child {
    cursor: pointer;
  }

  .page_graphs .recap li:first-child:before {
    content: '';
    position: relative;
    top: 2px;
    width: 16px;
    height: 16px;
    margin-right: 16px;
    background: url("../img/tiret.png") no-repeat;
    background-size: 16px 16px;
    display: inline-block;
  }

  .page_graphs .recap li:first-child.folded:before {
    background-image: url("../img/tiret_plus.png");
  }

    .page_graphs .recap li span {
      font-family: "_Montserrat_bold", sans-serif;
    }

.d-flex {
  display: flex;
  padding: 0 60px;
}

.graph-bar, 
.graph-age {
  width: 50%; 
}
  
  .graph-bar .recap .list-hashtags {
    padding: 0.4vw 0 0.4vw 32px;
  }

    .graph-bar .recap .list-hashtags .d-flex {
      padding: 0;
    }

      .graph-bar .recap .list-hashtags div div:not(:first-child):before {
        content: '|';
        padding: 0 0.7vw;
      }

  .graph-bar .bars {
    margin-bottom: 3vw; 
  }

    .graph-bar .bars .bar-item {
      display: flex;
      width: 93%;
      height: 2.5vw;
      border: 1px solid transparent;
      margin-bottom: 0.8vw;
      overflow: hidden;
      cursor: pointer;
    }

      .graph-bar .bars .bar-item p, 
      .graph-bar .bars .bar-item div > span {
        padding-bottom: 0.2vw;
        background-color: rgba(255, 255, 255, 0.15);
        font-size: 1vw;
        color: #fff;
        line-height: 2.3vw;
        -webkit-transition: background-color .3s ease 0s;
        -moz-transition: background-color .3s ease 0s;
        -o-transition: background-color .3s ease 0s;
        transition: background-color 0.3s ease 0s;
      }

      .graph-bar .bars .bar-item:hover p, 
      .graph-bar .bars .bar-item:hover div > span {
        background-color: #fff;
        color: #000;
      }

      .graph-bar .bars .bar-item p {
        width: 40%;
        padding-left: 1.4vw;
        font-family: '_Montserrat_light';
      }

      .graph-bar .bars .bar-item div {
        display: flex;
        width: 60%;
      }

        .graph-bar .bars .bar-item div > span {
          position: relative;
          width: 1px;
          padding-right: 0.8vw; 
          font-family: "_Montserrat_bold", sans-serif;
          text-align: right;
          display: inline-block;
        }

        .graph-bar .bars .bar-item div .pointe {
          width: 2.5vw;
          height: 2.5vw;
          background: url(../img/pointe-graph.png) no-repeat;
          background-size: auto 100%;
          display: inline-block;
          opacity: 0.15;
          -webkit-transition: opacity .3s ease 0s;
          -moz-transition: opacity .3s ease 0s;
          -o-transition: opacity .3s ease 0s;
          transition: opacity 0.3s ease 0s;
        }

        .graph-bar .bars .bar-item:hover div .pointe {
          opacity: 1;
        }

  .graph-bar .lk-suite {
    font-family: '_Montserrat_light';
    font-size: 1.1vw;
    text-decoration: underline;
  }

    .graph-bar .lk-suite:before {
      content: '';
      position: relative;
      top: 3px;
      width: 16px;
      height: 16px;
      margin-right: 16px;
      background: url("../img/tiret_plus.png") no-repeat;
      background-size: 16px 16px;
      display: inline-block;
    }

.graph-age {
  padding: 0 0 0 11vw; 
}

  .graph-age .age-legende {
    display: flex;
    justify-content: center;
    height: 77px;
    margin: 48px 0 0 0;
    text-align: center;
  }

    .graph-age .age-legende .femmes, 
    .graph-age .age-legende .hommes {
      position: relative;
      font-family: '_Montserrat_light';
      font-size: 1.1vw;
      color: #b8b5b5;
    }

    .graph-age .age-legende .femmes {
      margin-right: 0.9vw;
      padding-right: 2.9vw;
    }

    .graph-age .age-legende .femmes:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 1.7vw;
      height: 2.5vw;
      background: url(../img/symbole_femme.png) no-repeat;
      background-size: 100% auto;
      display: block;
    }

    .graph-age .age-legende .hommes {
      margin-left: 0.9vw;
      padding-left: 2.9vw;
    }

    .graph-age .age-legende .hommes:before {
      content: '';
      position: absolute;
      top: -0.5vw;
      left: 0;
      width: 2.2vw;
      height: 2.2vw;
      background: url(../img/symbole_homme.png) no-repeat;
      background-size: 100% auto;
      display: block;
    }

  .graph-age .age-line {
    display: flex;
    justify-content: center;
    margin-bottom: 0.8vw;
    font-size: 1vw;
  }

    .graph-age .age-line .age-cat {
      width: 15%;
      text-align: center;
      line-height: 2.3vw;
    }

    .graph-age .age-line .age-left, 
    .graph-age .age-line .age-right {
      display: flex;
      width: 42.5%;
    }

    .graph-age .age-line .age-left {
      justify-content: flex-end;
    }

    .graph-age .age-line .age-right {
      
    }

      .graph-age .age-line div > span {
        position: relative;
        min-width: 11%;
        padding-bottom: 0.2vw;
        line-height: 2.3vw;
        overflow: hidden;
      }

      .graph-age .age-line .age-left > span {
        padding-left: 3%;
        background-color: #fff;
        border: 1px solid #8e8e8e;
        color: #000;
        text-align: left;
      }

      .graph-age .age-line .age-right > span {
        padding-right: 3%;
        background-color: #777;
        border: 1px solid #fff;
        text-align: right;
      }

#sources div {
  display: inline-block;
}

#sources div:not(:first-child):before {
  content: '|';
  padding: 0 0.7vw;
}


/***
Page top 15
***/
.main.page_top15 .middle_column, 
.main.page_gallery .middle_column {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: auto;
  height: auto;
  min-height: 90vh;
}

.page_top15 #container_list {
  position: relative;
  top: auto;
  transform: none;
  width: 35vw;
  padding: 3.4vw 4.4vw;
  font-family: "_Montserrat_extra_light", sans-serif;
  font-size: 1.1vw;
  background-color: rgba(255, 255, 255, 0.1);
  line-height: 1em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/***
Page gallery
***/
.page_gallery .container {
  display: grid;
  grid-template-columns: 7.3% 7.3% 7.3% 7.3% 7.3% 7.3% 7.3% 7.3% 7.3% 7.3% 7.3% 7.3%;
  grid-gap: 0.9vw;
  width: 80.4vw;
  height: 75%;
  margin: 5vh 0;
}

.vignette {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.vignette a, 
.vignette span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
}

.vignette a {
  background: #fff;
}

.vignette span {
  border: 1px solid #b6b5b4;
}

.vignette:hover span {
  border: 2px solid #000;
}

.vignette img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a {
  grid-area: 1 / 1 / 3 / 3;
}

.b {
  grid-area: 1 / 10 / 3 / 12;
}

.c {
  grid-area: 3 / 3 / 5 / 5;
}

.d {
  grid-area: 2 / 6 / 4 / 8;
}

.e {
  grid-area: 3 / 11 / 5 / 13;
}


/***
Menu mobile
***/
.menu-mobile {
  display: none;
}


/***
Texte home
***/
.description-tags {
    display: none;
}


/***
Page slider Tiktok
***/
.page_tiktok .middle_large {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: calc(100vh - 156px);
}

  .page_tiktok .item {
    position: relative;
    padding: 6vw 0;
    display: block;
    transition: all 0.5s ease 0s;
  }

  .page_tiktok .slick-active .item:focus, 
  .page_tiktok .slick-active .item:hover {
    transition: .5s;
    transform: scale(1.4);
    z-index: 100;
  }

  .page_tiktok .item:after {
    content: '';
    position: absolute;
    top: 6vw;
    bottom: 6vw;
    left: 0;
    right: 0.4vw;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 9px;
  }

  .page_tiktok .slick-active .item:after {
    display: none;
  }

    .page_tiktok .item video {
      position: relative;
      width: 97.4%;
      border-radius: 9px;
    }

    .page_tiktok .item video:focus{
      outline :none;
    }
    
    .page_tiktok .slick-active .item video:hover {
      z-index: 10;
    }