/* ----------  La Base  ------------ */

body {
    color: black;
    font-size: 1em;
    font-family: 'Acumin', sans-serif;
    background-size: cover;
    mix-blend-mode: multiply;
}

@media screen and (orientation:portrait) {
  body{
    font-size: 1.8em;
  }
}

h1{
  color: black;
  font-size: 15em;
  margin: 150px auto;
  width: 100%;
  text-align: center;
}

h2{
  color: black;
  font-size: 4em;
  margin: 0 auto 0.5em;
  text-align: left;
  font-family: 'KGHappySolid';
}

h2 img{
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  margin: 0.5em auto 0 !important;
}

p{
  line-height: 1.3em;
}

a{
  text-decoration: none;
}

.bold{
  font-weight: bold;
  float: none !important;
  display: inline !important;
}

/*
.phone{
  display: none !important;
}

.PASphone{
  display: block;
}

@media screen and (orientation:portrait) {
  .phone{display: block;}
  .PASphone{display: none !important;}
}
*/



/* ----------  Accueil  ------------ */


#accueilLogo{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  scale: 1;
  transition-property: scale;
  transition-duration: 0.8s;
  position: relative;
  z-index: 9000;
  mix-blend-mode: multiply;
}

#accueilLogo img{
  height: 70%;
}


@media screen and (orientation:portrait) {
  #accueilLogo{
    scale: 0.5;
    top: -30%;
  }
}


/*
.btnMenuHome{
  position: absolute;
  cursor: pointer;
  padding: 50px;
  z-index: 9000;
  mix-blend-mode: multiply;
  transition-property: top,left,right,bottom;
  transition-duration: 1s;;
}

.btnMenuHome:hover{
  filter: invert(100%);
}
*/

.btnMenuHome{
  position: absolute;
  cursor: pointer;
  padding: 50px;
  z-index: 9000;
  mix-blend-mode: multiply;
  transition-property: top,left,right,bottom,scale;
  transition-duration: 1s;
  scale: 0.7;
}

/* SAVE TIRET */
.btnMenuHome::after{
  content: '';
  display: block;
  background-color: white;
  width: calc(100% - 100px);
  height: 10%;
  position: absolute;
  bottom: 50px;
  right: 50px;
  transition-property: width;
  transition-duration: 0.2s;
  transition-delay: 0.1s;
}

.btnMenuHome:hover::after{
  width: 0%;
}

@media screen and (orientation:portrait) {
  .btnMenuHome{
    scale: 1.6;
    padding: 0;
  }
  .btnMenuHome::after{
    display: none;
  }
}

@media screen and (min-height:700px) {
  .btnMenuHome{
    scale: 1;
  }
}

@media screen and (min-width:1200px) {
  .btnMenuHome{
    scale: 1;
  }
}



#dessinBtn{top: -30%;left: 5%;}
#bdBtn{top: -30%;right: 0;}
#videoBtn{top: 40%;left: -30%;}
#ateliersBtn{top: 50%;right: -30%;}
#blogBtn{bottom: -15%;left: -15%;}
#contactBtn{bottom: -30%;left: 35%;}
#radioBtn{bottom: -15%;right: -20%;}

@media screen and (orientation:portrait) {
  #dessinBtn{top: auto;bottom: 30em;left: 40%;}
  #bdBtn{top: auto;bottom: 26em;right: 36%;}
  #videoBtn{top: auto;bottom: 22em;left: 42%;}
  #ateliersBtn{top: auto;bottom: 18em;right: 42%;}
  #radioBtn{bottom: 14em;right: 43%;}
  #blogBtn{bottom: 9em;left: 42%;}
  #contactBtn{bottom: 5em;left: 35%;}
}

.accueilBtn{
  position: absolute;
  bottom: 40px;
  left: 50px;
  z-index: 9001;
  cursor: pointer;
  width: 250px;
  height: 90px;
  background: url(../img/accueilBtn.png) center center no-repeat;
  background-size: cover;
  scale: 0.6;
}

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

@media screen and (orientation:portrait) {
  .accueilBtn{
    top: 2em;
    left: 36%;
    scale: 0.9;
  }
}

@media screen and (min-width:1200px) {
  .accueilBtn{
    scale: 0.8;
  }
}

.accueil{
  width: 100%;
  height: 100%;
  text-align: center;
  background: url(../img/accueil.jpg) center center no-repeat;
  background-size: 80% auto;
}

@media screen and (orientation:portrait) {
  .accueil{
    width: 100%;
    text-align: center;
    background: url(../img/accueilMobile.jpg) center center no-repeat;
    background-size: auto 100%;
  }
}

.taches{
  opacity: 0;
  position: absolute;
  scale: 1;
  mix-blend-mode: multiply;
  transition-property: all;
  transition-duration: 1s;
}

@media screen and (orientation:portrait) {
  .taches{
    scale: 0.5;
  }
}

@media screen and (orientation:portrait) {
  .taches{
    /*scale: 0.5;*/
    display: none;
  }
}

#tache1{top: -30%;left: -30%;}
#tache2{top: -20%;left: -20%;}
#tache3{top: -45%;left: 21%;}
#tache4{top: -20%;right: 10%;}
#tache5{top: -33%;right: -10%;}
#tache6{top: 8%;right: -40%;}
#tache7{bottom: 21%;right: -18%;}
#tache8{bottom: 0%;right: -30%;}
#tache9{bottom: -38%;right: 15%;}
#tache10{bottom: -30%;left: 17%;}
#tache11{bottom: 22%;left: -35%;}
#tache12{bottom: -20%;left: -20%;}


/* ----------  NAV  ------------ */

.titre{
  position: absolute;
  top: 1em;
  left: -1em;
  height: 4em;
  scale: 0.6;
}

@media screen and (orientation:portrait) {
  .titre{
    left: 1em;
    scale: 0.8;
  }
}

@media screen and (min-width:1200px) {
  .titre{
    left: 1em;
    scale: 1;
  }
}

.titre img{
  height: 150%;
  width: auto;
}

.navLeft{
  display: block;
  position: relative;
}

@media screen and (orientation:portrait) {
  .navLeft{
    display: none;
  }
}

.navDeco{
  position: absolute;
}

@media screen and (orientation:portrait) {
  .navDeco{
    display: none;
  }
}

.navLeftBtn{
  display: block;
  position: relative;
  width: 100%;
  height: 3em;
  margin-bottom: 0.5em;
  cursor: pointer;
}

.navLeftBtn img{
  float: left;
  top: 0;
  left: 0;
  height: 100%;
}

.navLeftBtn::before{
  content: '';
  display: none;
  position: absolute;
  left: -1em;
  top: 0;
  height: 100%;
  width: 1em;
  background: url(../img/crochetG.png) no-repeat;
  background-size: contain;
}

.navLeftBtn::after{
  content: '';
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1em;
  background: url(../img/crochetD.png) no-repeat;
  background-size: contain;
}

.navLeftBtn:hover::after{
  display: block;
}

.navLeftBtn:hover::before{
  display: block;
}

#dessinNavBtn1::after{right: 17em;}
#dessinNavBtn2::after{right: 25em;}
#dessinNavBtn3::after{right: 26em;}
#dessinNavBtn4::after{right: 19em;}
#dessinNavBtn5::after{right: 15em;}
#dessinNavBtn6::after{right: 26em;}
#dessinNavBtn7::after{right: 22em;}
#bdNavBtn1::after{right: 11em;}
#bdNavBtn2::after{right: 16em;}
#bdNavBtn3::after{right: 14em;}
#videoNavBtn1::after{right: 16em;}
#videoNavBtn2::after{right: 21em;}
#videoNavBtn3::after{right: 17em;}
#videoNavBtn4::after{right: 25em;}
#ateliersNavBtn1::after{right: 20em;}
#ateliersNavBtn2::after{right: 19em;}
#ateliersNavBtn3::after{right: 20em;}
#ateliersNavBtn4::after{right: 22em;}
#ateliersNavBtn5::after{right: 16em;}
#ateliersNavBtn6::after{right: 19em;}

.height80 img{
  height: 80%;
}

.height110 img{
  height: 110%;
}

/* ---Dessin--- */

#dessinNav{
  top: 0em;
  left: 6em;
  width: 180%;
}

#dessinNavDeco{
  top: 5em;
  left: 3em;
  height: 16em;
}

/* ---BD--- */

#bdNav{
  top: 0;
  left: 6em;
  width: 122%;
}

#bdNavDeco{
  top: 5em;
  left: 3em;
  height: 7em;
}


/* ---Video--- */

#videoNav{
  top: -0.5em;
  left: 6em;
  width: 200%;
}

#videoNavDeco{
  top: 5em;
  left: 4em;
  height: 9em;
}


/* ---Ateliers--- */

#ateliersNav{
  top: -0.5em;
  left: 5em;
  width: 200%;
}

#ateliersNavDeco{
  top: 5em;
  left: 2em;
  height: 14em;
}


/* ---Radio--- */

#radioNav{
  top: 0em;
  left: 5em;
  width: 200%;
}

#radioNavDeco{
  top: 5em;
  left: 2em;
  height: 14em;
}

/* -- Reset Points -- */
.resetStart{
  height: 2em !important;
}

/* ----------  Content  ------------ */

.content{
  display: block;
  width: 62%;
  height: 68%;
  background: rgba(255, 255, 255, 0);
  border: solid 1em rgba(255, 255, 255, 0);
  border-radius: 5px;
  margin: 4em auto 0 calc(30% - 5px );
  padding: 2%;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 9000;
  position: relative;
  scrollbar-width: none;
  top: 0;
}

.content span{
  display: block;
  float: left;
  width: 100%;
  height: 2em;
}

@media screen and (orientation:portrait) {
  .content{
    width: 95%;
    height: 80%;
    margin: 8em auto 0;
  }
}

.cadre{
  position: absolute;
  width: 71.5%;
  height: 87%;
  top: 2em;
  left: 28%;
  z-index: 2;
  display: block;
  opacity: 0.2;
}

#fadeTop{
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  width: 71.5%;
  height: 100px;
  position: absolute;
  top: 2em;
  left: 28%;
  z-index: 9002;
}

#fadeDown{
  display: block;
  background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  width: 71.5%;
  height: 100px;
  position: absolute;
  bottom: 6em;
  left: 28%;
  z-index: 9002;
}

@media screen and (orientation:portrait) {
  .cadre{display: none;}
  #fadeTop{display: none;}
  #fadeDown{display: none;}
}

.cadre img{
  height: 100% !important;
  width: 100% !important;
}

.content img{
  margin: 1em auto;
  width: 100%;
}

.fullContent{
  width: 100%;
}

.halfContent{
  float: left;
  width: 46%;
  margin: 0 2%;
}

.halfContent img{
  width: 100%;
}

.textContent{
  text-align: justify;
  margin: 1em 0;
  font-size: 1.2em;
  width: 100%;
}

.contactText{
  position: absolute;
  width: 40%;
  height: 60%;
  top: 10%;
  right: 10%;
  text-align: left;
  display: block;
  overflow-y: scroll;
  scrollbar-width: none;
}

.contactLink{
  text-align: center !important;
  display: block;
}

@media screen and (orientation:portrait) {
  .contactContent p{
    position: absolute;
    width: 85%;
    height: 80%;
    top: 10%;
    right: 5%;
    font-size: 1em;
  }
  .contactContent img{
    width: 50%;
  }
  .contactLink{
    top: 80% !important;
  }
}

@media screen and (orientation:portrait) {
  .section{
    width: 100% !important;
  }
  .content{
    width: 85% !important;
    top: -2em;
  }
  .titre{
    display: none;
  }
  .noMobile{
    display: none;
  }
}

/** BONUS **/

@media screen and (orientation:portrait) {
  #visitCard{
    display: none !important;
  }
}

#bonus{
  opacity: 0;
  display: block;
  position: absolute;
  bottom: 25px;
  right: 25px;
  font-size: 9px;
  color: lightgray;
  cursor: help;
}

@media screen and (orientation:portrait) {
  #bonus{
    display: none !important;
  }
}

#player{
  margin: 0 auto !important;
}


/*----------------------------------------------- Maybe les taches -----------------------------
.taches{
  opacity: 0.2 !important;
}
--------------------*/