@import 'fonts/stylesheet.css';

  // rose : rgb(255, 84, 153)

  *{
    box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

  .small{
    display:none;
    transition: all 0.5s ease;
  }

  .destkop{
    display:flex;
    transition: all 0.5s ease;
  }


  body{
    margin:0;
    overflow: hidden;
    font-family: "directrice", sans-serif;
  }

  body.suprise-113{
    background: rgb(255, 84, 153);
    animation: blinking 1s linear ; 
  }

  body.suprise-202{
    background-image: url("virginia-bichro.jpg");
    background-size: cover; 
    background-repeat: no-repeat;
  }

  body.suprise-202 .prenoms li{
    background: rgba(255, 255, 255, 0.5);
    padding: 2px 5px;
  }

  body.suprise-220{
    background-image: url("collage-images.jpg");
    background-size: cover; 
    background-repeat: no-repeat;
  }

  body.suprise-220 .prenoms li{
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    padding: 2px 5px;
  }

  body.suprise-220 .prenoms li a{
    color: #FFF;
  }

  body.suprise-113 main a:hover{
    color: #FFF;
  }

  body.suprise-1020, body.suprise-2020, body.suprise-2017{
    background: rgb(255, 84, 153);
  }

  @-webkit-keyframes blinking {
  0%    { background-color: rgb(255, 84, 153);}
  25%   { background-color: #FFF;}
  50%   { background-color: rgb(255, 84, 153);}
  75%   { background-color: #FFF;}
  100%   { background-color: rgb(255, 84, 153);}
}

body.suprise-2017 .falling-maud{
  display:block;
}

.falling-maud{
  display:none;
}

.falling img{
  max-width: 100%;
}
.falling{
  width: 64px;
  position:fixed;top:-10%;z-index:99;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.falling:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.falling:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.falling:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.falling:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.falling:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.falling:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.falling:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.falling:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.falling:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.falling:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.falling:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.falling:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

@-webkit-keyframes snowflakes-fall{
  0%{top:-10%}
  100%{top:100%}
}

@-webkit-keyframes snowflakes-shake{
  0%,100%{
    -webkit-transform:translateX(0);
    transform:translateX(0)
  }
  50%{
    -webkit-transform:translateX(80px);
    transform:translateX(80px)}
  }

  @keyframes snowflakes-fall{
    0%{top:-10%}
    100%{top:100%}
  }

  @keyframes snowflakes-shake{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(80px)}}



  h1, h2, h3{
    font-weight: normal;
  }

  a{
    color: #000; 
    text-decoration: underline;
  }

  a:hover{
    color: rgb(255, 84, 153);
  }

  header{
    height: 40px; 
    background: #FFF; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right:0; 
    z-index: 100;
    padding: 15px; 
    border-bottom: 1px solid #000; 
    display: flex;
    // width: 100%;
  }

  .header-right{
    display:flex;
    justify-content: flex-end;
    width: 40%;
    margin-right: 5px;
    // padding-top:6px;
  }

  // .header-right > div{
  //   padding-right: 15px;
  //   padding-left: 15px;
  //   cursor: pointer; 
  // }

  // .header-right > div:hover{
  //   color: rgb(255, 84, 153);
  // }

  .header-right .participez{
    font-size: 1.5em;
    color: rgb(255, 84, 153);
    cursor: pointer;
    border: 2px solid rgb(255, 84, 153);
    padding: 9px 50px;
    line-height: 0.8;
  }

  .header-right .participez:hover{
    color: #000; 
    background: rgb(255, 84, 153);
  }

  header h1{
    font-weight: normal;
    font-size: 1.2em;
    margin: 0;
    width: 60%;
  }

  header h1 a{
    text-decoration:none;
    font-size: 1.3em;
  }

  main{
    padding-top: 60px;
    width: calc(100% - 100px);
    height: calc(100vh - 70px);
    position: relative;
  }

  .mandatory{
    color: rgba(255, 84, 153);
  }

  .credits{
    font-size: 1.5em;
    margin-left: 15px; 
    cursor: pointer; 
    padding-top: 0.3em;
  }

  .credits:hover{
    color: rgb(255, 84, 153);
  }

  .credits-window h2{
    margin-bottom:0px;
    margin-top: 30px;
  }

  .form-window, .credits-window{
    position: absolute;
    z-index: 1000; 
    background: rgba(255, 84, 153, 0.5);
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    display: none;
  }

  .form-window.is-active, .credits-window.is-active{
    display:block;
  }

  .form-window-inner, .credits-window-inner{
    position: absolute;
    width: 50%;
    background: #FFF; 
    border: 1px solid #000; 
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; 
    min-width: 280px; 
  }

  .form-window-inner h2{
    margin-top: 0;
    margin-bottom: 30px; 
    // color: rgb(255, 84, 153);
    font-size: 1.5em;
  }

   .form-window-inner .infos{
      color: rgb(255, 84, 153);
      font-size: 0.8em;
      display: block;
      margin-bottom: 20px;
      padding-top: 5px;
      max-width: 60%;
      margin: auto;
   }

  .form-window-inner label{
    font-size: 1.2em;
    display:block;
    margin-bottom: 10px;
  }

  .form-window-inner input{
    
    width: 50%;
    height: 30px;
    border: 1px solid #000; 
  }



  .form-window-inner input[type='submit']{
    font-size: 1.2em;
    background: #000;
    color: #FFF;
    font-family: inherit;
    cursor: pointer; 
    width: auto;
    padding: 5px 20px;

  }

  .form-window-inner input[type='submit']:hover{
    color: rgb(255, 84, 153);
    background: #FFF;
    border-color: rgb(255, 84, 153);
  }

  .close-window{
    position: absolute;
    right: 10px; 
    top: 10px;
    font-size: 1.5em;
    cursor: pointer;
  }

  .form-window-inner .empty{
    display:none;
  }



  .soeurs{ 
    text-align: center; 
    font-size: 80px;
    position: fixed; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    opacity: 0;
    transition: all 2s ease;
    line-height: 1;
  }

  .soeurs.active{
    font-size: 140px;
    opacity: 1;
    line-height: 1;
  }

  .bonne-annee{
    text-align: center; 
    font-size: 40px;
    position: fixed; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    opacity: 0;
    transition: all 2s ease;
    line-height: 1;
  }

  .bonne-annee.active{
    font-size: 80px;
    opacity: 1;
    line-height: 1;
  }

  .explications{
    text-align: center; 
    font-size: 40px;
    position: fixed; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 2s ease;
    line-height: 1;
  }

  .explications.active{
    font-size: 80px;
    opacity: 1;
    line-height: 1;
  }


  .prenoms li{
    opacity: 0;
    font-size: 15px;
    position: absolute; 
    transition: all 0.5s ease;
    list-style: none;
  }

  .prenoms li.active{
    opacity: 1;
  }

  .prenoms li[data-tag="ateliers"], .prenoms li[data-tag="equipe"]{
    z-index: 100; 
  }

  .counter{
    position: fixed; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 140px;
    font-weight: bold;
    color: pink;
    opacity: 0.4;
    pointer-events: none;

  }

  .sidebar{
    width: 100px;
    background: #FFF;
    // border:1px solid #000; 
    padding-top: 60px;
    height: calc(100vh - 60px);
    position:fixed;
    right: 0;
    text-align: center; 
    font-size: 15px;
    overflow: scroll;
    z-index: 99;
    // color: rgb(255, 84, 153);
  }

  .sidebar .target{
    width: 10px; 
    height: 10px; 
    background: #000;
    border-radius: 100%;
    margin: auto;
    cursor: pointer; 
  }

  .sidebar .target.active{
    background: rgb(255, 84, 153);
  }

  .sidebar .nombre{
    // background: #FFF;
    // padding-top: 2px;
    // padding-bottom: 2px;
    position: relative;
    left: -60px;
    top: -12px;
    text-align: right;
  }

  .sidebar .target-nombre{
    height: 12.1vh;
  }

  .sidebar .target-nombre.target-nombre-0{
    height:auto;
  }

  .sidebar .progress-bar{
    width: 5px; 
    height: 73vh; 
    background: #000;
    position: absolute;
    left: calc(50% - 2px);
    z-index: -1;
  }

  .sidebar .progress-bar .bar{
    background: rgb(255, 84, 153);
    height: 0%; 
    width: 100%;
    position: absolute; 
    bottom: 0;
    transition: all 0.1s linear;
  }

  .target-nombre.is-active .target{
    background: rgb(255, 84, 153);
  }

  .target-nombre.is-active .nombre{
    color: rgb(255, 84, 153);
  }



@media (min-width: 320px) and (max-width: 800px) {
  .small{
    display: flex;
    transition: all 0.5s ease;
  }
  .destkop{
    display:none;
    transition: all 0.5s ease;
  }

  header{
    height: 30px;
    padding:15px 10px; 
  }

  header h1{
    padding-top: 5px;
  }

  .header-right .participez{
    font-size: 1.35em;
    padding: 5px 10px;
  }

}