@media only screen and (min-width: 700px) {
  main{
    font-family: 'riffic-bold', Arial, sans-serif;
    display:inline-block;
    width:100%;
    left:0;
  }

textarea{
  text-align:left;
  max-height:50%;
  align-self:center;
  resize:vertical;
  }
.messageerreur{
  color:red;
  font-size: 80%;
  text-align: center;

}
.successMessage{
    background-color: #7acc7d;
    border: #2b5a2d 1px solid;
    padding: 5px 9px;
    color: #262b26;
    border-radius: 4px;
    cursor: pointer;
    font-size: 80%;
}
.errorMessage{
    background-color: #e64141;
    border: #da1414 1px solid;
    padding: 5px 10px;
    color: #fdf7f7;
    border-radius: 4px;
}
.info{
    font-size: 80%;
    color: #d67262;
    letter-spacing: 2px;
    padding-left: 5px;
}

.formulaire_contact{
  text-align: center;
  font-family: 'riffic-bold', Arial, sans-serif;

}

.title{
  text-align: center;
  font-family: 'riffic-bold', Arial, sans-serif;

}

.image-contact{

}

.formulaire_contact>form{
  font-size: 85%;
  margin-left: 35%;
  margin-right:35%;
  text-align:left;
}


.form-text{

}

.form-input-message{
  margin-top:5px;
  text-align:left;
  min-height:100px;
  width:100%;
  align-self:center;

}

.form-input{

  text-align:left;
  height:100%;
  width:100%;
  align-self:center;
  margin-bottom:10px;
  margin-top:5px;
}

.form-submit{
  background-color: #00C2FA;
  color:white;
  font-family: 'riffic-bold', Arial, sans-serif;
  padding:1%;
  display:block;
  width:20%;
  font-size: 80%;
  margin-left:auto;
  margin-right:auto;
  margin-top:20px;
  text-align: center;

  }

  .message{

  }

  .bouteille-anime{
  background-color: #fff;
  color: #00C2FA;
  font-family: 'riffic-bold', Arial, sans-serif;
  font-size: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  }

  .bouteille-anime *{
    --webkit-box-sizing: border-box;
    box-sizing: border-box;
    --webkit-transition: all 0.45s ease;
    transition: all 0.45s ease;
}

.bouteille-anime:after{
  background-color: #fff;
  height: 150%;
  bottom: -145%;
  content: '';
  left: 0;
  right: 0;
  position: absolute;
  --webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

  .bouteille-anime figcaption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1em;
    opacity: 0;
    --webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

img{
  margin-left: auto;
  margin-right:auto;
}


  .bouteille-anime:hover > img,
  .bouteille-anime.hover > img {
    opacity: 0.1;
  }

  .bouteille-anime:hover:after,
  .bouteille-anime.hover:after {
    bottom: 95%;
  }

  .bouteille-anime:hover figcaption,
  .bouteille-anime.hover figcaption {
    opacity: 1;
    --webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
}

  @media only screen and (max-width: 700px) {

    main{
      font-family: 'riffic-bold', Arial, sans-serif;
      display:inline;

    }

    span{
      color:red
    }
    .successMessage{
        background-color: #7acc7d;
        border: #2b5a2d 1px solid;
        padding: 5px 9px;
        color: #262b26;
        border-radius: 4px;
        cursor: pointer;
        font-size: 80%;
    }
    .errorMessage{
        background-color: #e64141;
        border: #da1414 1px solid;
        padding: 5px 10px;
        color: #fdf7f7;
        border-radius: 4px;
    }
    .info{
        font-size: 80%;
        color: #d67262;
        letter-spacing: 2px;
        padding-left: 5px;
    }

    .formulaire_contact{
      text-align: left;
    }

    .title{
      text-align: center;
    }


    .formulaire_contact>form{
      font-size: 85%;
      margin:0;
    }


    .form-text{
      text-align: left;
      margin:2%;
    }

    .form-input-message{
      text-align:left;
      min-height:100%;
      width:96%;
      resize:vertical;
      margin:2%;
    }

    .form-input{
      text-align:left;
      height:80%;
      width:96%;
      margin:2%;
    }

    .form-submit{
      text-align: center;
      background-color: #00C2FA;
      color:white;
      font-family: 'riffic-bold', Arial, sans-serif;
      padding:2%;
      width:20%;
      font-size: 100%;
      display:block;
      margin:auto;

      }

      .message{
      }
      figure{
        display:none;
      }

  }