@import url('https://fonts.googleapis.com/css?family=Schoolbell');

html {

    position: relative;
    min-height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background-color: #f5f4f0;
}

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

a div:hover {
  animation: zoom .5s 1;
}

@keyframes zoom {
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.titre {
  width:70vw;
  height:50vw;
  background:url(../images/titre.jpg) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:0;
  left: 15vw;
  z-index:1;
  pointer-events:none;
}

.mouth {
  width:70vw;
  height:50vw;
  background:url(../images/mouth.png) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:0;
  left:15vw;
  z-index:10;
  pointer-events:none;
}

.serie_audio {
  width:70vw;
  height:50vw;
  background:url(../images/serie_audio.png) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:0;
  left:15vw;
  z-index:10;
  pointer-events:none;
}

.flechebas {
  width:5vw;
  height:10vw;
  background:url(../images/fleche_bas.png) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:42vw;
  left: 80vw;
  z-index:100;
  pointer-events:none;
}

.bounce {
  animation: bounce var(--animation-duration) infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
  transform: translateY(0);
  }
  40% {
  transform: translateY(-30px);
  }
  60% {
  transform: translateY(-15px);
  }
}

.back_episode01 {
  width:70vw;
  height:50vw;
  background:url(../images/back_episode01.jpg) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:60vw;
  left: 1vw;
  z-index:1;
  pointer-events:none;
}

.title_episode01 {
  width:70vw;
  height:50vw;
  background:url(../images/title_episode01.png) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:60vw;
  left:1vw;
  z-index:10;
  pointer-events:none;
}

.player_episode01 {
  height: 15vw;
  width:  15vw;
  position: absolute;
  top:70vw;
  left:70vw;
  z-index: 100;
}

.dry_episode01 {
  height: 5vw;
  width:  5vw;
  background:url(../images/dry.png) top center no-repeat;
  background-size: 100% auto;
  position: absolute;
  top:80vw;
  left:85vw;
  z-index: 100;
}

.back_episode02 {
  width:70vw;
  height:50vw;
  background:url(../images/back_episode02.jpg) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:120vw;
  left: 30vw;
  z-index:1;
  pointer-events:none;
}

.title_episode02 {
  width:70vw;
  height:50vw;
  background:url(../images/title_episode02.png) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:120vw;
  left: 30vw;
  z-index:10;
  pointer-events:none;
}

.player_episode02 {
  height: 15vw;
  width:  15vw;
  position: absolute;
  top:130vw;
  left: 5vw;
  z-index: 100;
}

.footer {
  height: 15vw;
  width:  100%;
  background-color: #f3bb4c;
  position: absolute;
  top:120vw;
  left: 0;
  z-index: 1;
}

.tjp {
  height: 15vw;
  width:  15vw;
  position: absolute;
  background:url(../images/logo_tjp.png) top center no-repeat;
  background-size: 100% auto;
  left: 15vw;
  z-index: 1000;
  filter: grayscale(30%);
  -webkit-transition : -webkit-filter 500ms linear;
}

.tjp:hover {
  filter: grayscale(0%);
}

.youtube {
  height: 15vw;
  width:  15vw;
  position: absolute;
  background:url(../images/logo_youtube.png) top center no-repeat;
  background-size: 100% auto;
  left: 45vw;
  z-index: 1000;
  filter: grayscale(30%);
  -webkit-transition : -webkit-filter 500ms linear;
}

.youtube:hover {
  filter: grayscale(0%);
}

.twitter {
  height: 15vw;
  width:  15vw;
  position: absolute;
  background:url(../images/logo_twitter.png) top center no-repeat;
  background-size: 100% auto;
  left: 75vw;
  z-index: 1000;
  filter: grayscale(30%);
  -webkit-transition : -webkit-filter 500ms linear;
}

.twitter:hover {
  filter: grayscale(0%);
}

@media (max-width: 1024px) {
   /* CSS appliqué aux petits écrans */

   .titre, .mouth, .serie_audio {
     height:120vw;
     width: 100vw;
     background-size: 130%;
     top:20vw;
     left: 0;
   }

   .flechebas {
     width:5vw;
     height:10vw;
     top:95vw;
     left: 85vw;
   }

   .back_episode01 {
     width:70vw;
     height:50vw;
     top:150vw;
     left: 1vw;
   }

   .title_episode01 {
     width:70vw;
     height:50vw;
     top:150vw;
     left: 1vw;
   }

   .player_episode01 {
     height:15vw;
     width:15vw;
     top:150vw;
     left:70vw;
     z-index:100;
   }

   .dry_episode01 {
     height: 15vw;
     width:  15vw;
     background:url(../images/dry.png) top center no-repeat;
     background-size: 100% auto;
     position: absolute;
     top:175vw;
     left:72vw;
     z-index: 100;
   }

   .footer {
     top:240vw;
   }


  }

/* bbplayer */

.bbplayer {
  height: 15vw;
  width:  15vw;
  font-family : 'Schoolbell', cursive;
  font-size: 5em;
  color: #898989;
  display: inline-block;
  z-index: 100;
}

.bb-play {
  display: block;
  vertical-align: middle;
  height: 15vw;
  width:  15vw;
  background: transparent;
  background-image: url('../images/play_01.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

.bb-playing {
  vertical-align: middle;
  background-image: url('../images/pause_01.png');
  background-position: center center;
}

.bb-trackTime {
  display: inline-block;
  vertical-align: top;
  font-size: 1em;
  transform: rotate(-15deg);
}

.bb-trackLength {
visibility: hidden;
height: 1vw;
font-size: .2em;
}

@media (max-width: 1024px) and (orientation:landscape) {

  .titre, .mouth, .serie_audio {
    height:120vw;
    width: 100vw;
    background-size: 100%;
    top:-5vw;
    left: 0;
  }

  .flechebas {
    width:5vw;
    height:10vw;
    top:50vw;
    left: 85vw;
  }

  .back_episode01, .title_episode01 , .player_episode01 {
    top:80vw;
  }

  .dry_episode01 {
    top:105vw;
  }

  .footer {
    top:150vw;
  }

  }

@media all and (max-width: 1024px) {

  .bb-trackTime {
    font-size: .6em;
  }

}

@media all and (max-width: 480px) {


  .bb-trackTime {
    font-size: .2em;
  }

}