/* styles pour anim vss */

#block-bandeauaccueil {
  position: relative;
}

@font-face {
    font-family: 'ES Rebond Grotesque';
    src: url('../fonts/ESRebondGrotesque-Extrabold.eot');
    src: url('../fonts/ESRebondGrotesque-Extrabold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ESRebondGrotesque-Extrabold.woff2') format('woff2'),
        url('../fonts/ESRebondGrotesque-Extrabold.woff') format('woff'),
        url('../fonts/ESRebondGrotesque-Extrabold.svg#ESRebondGrotesque-Extrabold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.overlay_bg {
  position: absolute;
  width: calc(100% + 100px);
  height: 100%;
  top:0;
  left: -50px;
  background: rgba(256,256,256,0.8);
  z-index: 1000;
}

.fermer {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 32px;
  height: 32px;
  opacity: 1;
  z-index: 1009;
}

.fermer:hover:before,.fermer:hover:after {
  background-color: #000;
}
.fermer:before, .fermer:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 5px;
  background-color: #fff;
}
.fermer:before {
  transform: rotate(45deg);
}
.fermer:after {
  transform: rotate(-45deg);
}

.gif-anime {
  width: auto;
  width: 100%;
  height: 570px;
  background: #f386a1;
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
}

.gif-anime.delit {
  background: #7eba96;
}

.gif-anime.page-interne {
  position: static;
  height: 470px
}

.texte-animation.stop {
  opacity: 0;
} 
.texte-animation:not(.stop) {
  opacity: 1 !important;
}

.texte-animation {
  line-height: 1.2;
  padding: 50px 0 0 0;
  position: relative;
  font-family: 'ES Rebond Grotesque';
  font-size: 3.4vw;
  color: #fff;
  width: 90%;
  margin: 0 auto;
  letter-spacing: 0.05vw; 
}

.delit .texte-animation {
  padding: 20px 0 0 0;
}

.page-interne .texte-animation {
  font-size: 2.5vw;
}



.rejouer,.arreter {
  font-family: arial,sans-serif;
  font-size: 0.8vw;
  position: absolute;
  bottom: 120px;
  right: 40px;
  transition: opacity 2s ease;
  text-decoration: none;
  margin-top: 2vw;
  background: #ed217c;
  border-radius: .5vw;
  padding: 10px 15px;
  color: #fff !important;
  text-decoration: none!important;
}

.delit .rejouer,.delit .arreter {
  background: #699477;
}

.rejouer:hover,.arreter:hover {
  background: #000;
  text-decoration: none;
}

.texte-animation.fondu,.texte-animation.fondu .oui {
  /*transition: color .5s ease;*/
}

.texte-animation.fondu,.texte-animation.fondu .oui {
  /*color: #f386a1;*/
}

.delit .texte-animation.fondu,.delit .texte-animation.fondu .oui {
  /*color: #7eba96;*/
}

.texte-animation.fondu .rejouer {
  opacity: 1;
  color: #fff;
}

.texte-noir {
  color:#000;
  display: block;
}

.delit .texte-noir {
  color:#000;
  display: inline;
}

.pied-animation {
  position: absolute;
  height: 100px;
  background: #ed217c;
  padding: 20px 5%;
  bottom: 0px;
  width: 100%;
  font-family: 'ES Rebond Grotesque';
  font-size: 1vw;
  letter-spacing: 0.05vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delit .pied-animation {
  background: #699477;  
}

.page-interne .pied-animation {
  width: calc(100% - 30px);
}

.pied-animation a {
  color: #fff;
  text-decoration: none;
}

.pied-animation a.lien-hashtag {
  display: flex;
  flex-flow: row wrap;
}

.pied-animation a.lien-hashtag span {
  color: #000;
}

.pied-animation a em {
  color: #fff;
  font-style: normal;
}

.diese {
  font-size: 3vw;

}

.diese + span {
  padding: .8vw 0 0 .2vw;
  line-height: 1.3vw;
}

.lien-hashtag br + span,.lien-hashtag br + em {
  letter-spacing: .162vw;
}


.pied-animation a.lien-hashtag:hover span {
  color:#fff;
}

.pied-animation a.lien-hashtag:hover em,.pied-animation a.lien-mail:hover {
  color: #000;
}

.gif-anime,.overlay_bg {
  -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}
body:not(.overlay) .gif-anime,body:not(.overlay) .overlay_bg  {
  opacity: 0;
}

body:not(.overlay) .gif-anime.page-interne {
  opacity:1;
}

@media screen and (min-width: 1200px) {
  .texte-animation {
     font-size: 65px;
  }

  .page-interne .texte-animation {
     font-size: 45px;
  }


  .page-interne  .pied-animation  {
     font-size: 1.2em!important;
  }

  .page-interne .lien-hashtag span.diese  {
     font-size: 62px!important;
  }

  .page-interne .diese + span {
     font-size: 1em;
     padding:1em 0 0 0;
     line-height: 1.4em;
  }





  .page-interne .lien-hashtag br + span, .lien-hashtag br + em {
  	letter-spacing: .22em;
  }

  .page-interne .rejouer {
	font-size: .3em;
	bottom: -40px;
	border-radius: .3em;
	padding: .4em .5em;

  }
}