/*MOBILE*/
@media all and (max-device-width: 480px)
{

#mireMiddleTop{
    display: block;
  }

#common-template, #devant, #devant2, #derriere, #courbes, #container, #fond-barre, #grand-perso, #fixed, #texteTribalium, #button_download, #stickers, #zone-clic{
  display: none;
}

#mobile{
  display: block;
}

body{
  background-color: yellow;
  width: 100%;
  position: absolute;
  line-height: normal;
  font-family: 'Zara-Regular';
  color: black;
  overflow-y:scroll;
}

#logofonderiedownload{
  width: calc( 100vw - 86px );
  margin-left: 43px;
  margin-top: 52px;
}

#about{
  margin-bottom: 86px;
}

h1{
  font-weight: normal;
  text-align: center;
  font-size: 8vw;
  border: 1px solid black;
  border-radius: 600px;
  background-color: white;
  padding: 3%;
  width: 25%;
  margin: auto;
  margin-top: 17vh;
}

.show, .show2{
  display: none;
}

#textModal{
  margin: 43px;
  font-size: 5.4vw;
  line-height: 7.2vw;
  padding-left: 0%;
  padding-right: 0%;
}

#textModal p {
  margin-bottom: 15px;
}

#newsletter{
  width: calc( 100vw - 84px );
  margin-left: 42px;
  margin-bottom: 43px;
}

.mc-field-group{
  margin-top: 1vh;
}

.mc-field-group label{
  font-size: 5vw;
  margin-top: 2%;
}

.required-email{
  width: 90%;
  margin-left: 5%;
  font-size: 5vw;
  margin-top: 8%;
  height: 50px!important;
  border-radius: 0px;
}

.title{
  height: auto;
  margin-top: 80px;
}

.button{
  font-size: 8vw;
  border: 1px solid black;
  border-radius: 600px;
  background-color: white;
  padding: 3%;
  width: 62%;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

h2{
  display: inline-block;
  margin-top: 0px;
}

.show2 h2{
  margin-left: 43px;
  font-weight: normal;
  font-size: 8vw;
  margin-bottom: 2vh;
}

#button_download2{
  display: inline-block;
  position: inherit;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: white;
  font-family: 'menu-Regular';
  color: black;
  font-size: 31px;
  overflow: auto;
  margin-left: 3vw;
  transform: none;
  margin-bottom: -2.3vh;

  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 4s;

  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: 2;
  animation-duration: 1s;
  animation-delay: 4s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#button_download2:hover{
  display: inline-block;
  position: inherit;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: white;
  font-family: 'menu-Regular';
  color: black;
  font-size: 31px;
  overflow: auto;
  margin-left: 3vw;
  transform: none;
  margin-bottom: -2.3vh;
  animation: none;
}

.show2 input{
  width: calc( 100vw - 84px );
  margin-left: 42px;
  height: 70px;
  font-size: 9vw!important;
  padding: 3%;
  box-sizing: border-box;
  border: 1px solid black;
}

.show2 input:last-child{
  margin-top: 2vh!important;
}

.firstInput{
  margin-top: 10px;
}

#fromages, #fromages input {
  font-family: '4Fromages-Regular';
}

#fromages .title h2{
  font-size: 6.5vw;
}

#quarantype, #quarantype input{
  font-family: 'Quarantype-Regular';
}

#quarantype input:last-child{
  font-family: 'Quarantype-Oblique';
}

#credible, #credible input{
  font-family: 'Credible-Regular';
}

#garamondt, #garamondt input{
  font-family: 'Garamondt-Regular';
}

#garamondt input:last-child{
  font-family: 'Garamondt-Italic';
}

#tribaliumneue, #tribaliumneue input{
  font-family: 'TribaliumNeue-Regular';
}

#tribaliumneue input:last-child{
  font-family: 'TribaliumNeue-Poster';
}

#zara, #zara input{
  font-family: 'Zara-Regular';
}

#zara input:last-child{
  font-family: 'Zara-Oblique';
}

.button:hover{
  animation: none;
}

#button_download2:hover .picto {
  display: block;
  animation: none;
}

#button_download2:active{
  animation: colorchange 0.5s;
  -webkit-animation-iteration-count: infinite;
}

h1:active{
  animation: colorchange 0.5s;
  -webkit-animation-iteration-count: infinite;
}

mc-embedded-subscribe:active{
  animation: colorchange 0.5s;
  -webkit-animation-iteration-count: infinite;
}

.picto, .picto:visited{
  color: black;
  text-align: center;
}

#ps-mobile{
  font-size: 3.5vw;
  text-align: center;
  margin-bottom: 30%;
}