@keyframes fadeInUp{
  0%{
    opacity: 0;
    transform: translateY(200px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft{
  0%{
    opacity: 0;
    transform: translateX(200px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight{
  0%{
    opacity: 0;
    transform: translateX(-200px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

body {
  background-image: url("../images/background-sea.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
}

header {
	z-index: 999999;
}

main {
	z-index: -1;
}

#achat_background {
  margin:auto;
  margin-top:20px;
  color: #060606;
	width:80%;
	background-color: #F8F9F9;
  /* Offset sur le côté, offset sur la hauteur, effet de flou, longeur de l'ombre
  et couleur de l'ombre, contient shadow-color, background-color, box-color et l'opacité
  Ici on omet volontairement la longueur de l'ombre et on en superpose deux */
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-grow: 1;
  position: relative;
}

#achat_side_element {
  display: flex;
  flex-direction: column;
  margin: auto;
  padding:20px;
  animation:fadeInUp 2s;
}

.achat_bouton {
  background-color: #36ae85;
  padding: 3% 5% 3% 5%;
  text-align: center;
  transition: transform .2s;
  margin:2vw;
  font-size:1vw;
  border-bottom: 2px solid green;
}

.achat_bouton:hover {
  transform:scale3d(1.1, 1.1, 1);
  transition: transform .2s;
}

div #achat_achat > div {
  font-size: 3vw;
  text-align: center;
  font-weight: bolder;
}

h1 {
  font-size: 4vw;
  text-align: center;
}

#achat_middle {
  width:100%;
}

div #achat_middle > div {
  width:100%;
}

#achat_list {
  font-size: 2vw;
  font-weight: normal;
}

.achat_desc_img {
  width:100%;
}

.achat_texte_img img {
  width:10%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height:auto;
  filter:invert(100%);
}

div #achat_middle > div {
  font-size:0px;
  position:relative;
}

.achat_texte_img {
  font-size: 50px;
  position:absolute;
  color:white;
  width:45%;
  top:30%;
}

a {
  color:white;
  text-decoration: none;
}

#achat_top {
  display: flex;
  flex-direction: row;
}

#achat_photos {
  display: flex;
  flex-direction: column;
  max-width:50%;
}

#achat_main_thumbnail img {
  width:100%;
  padding: 2%;
}

#achat_thumbnail {
  display: flex;
  flex-direction: row;
}

#achat_thumbnail img {
  align-self: start;
  width: 30%;
  margin: auto;
  transition: transform .2s;
}

#achat_thumbnail img:hover {
  transition-delay: 0.1s;
  transform: scale3d(4, 4, 1);
  z-index: 3000;
}

#achat_hover_text {
  text-align: center;
  padding: 1% 0% 1% 0%;
}

div #achat_middle > div:nth-child(odd) > div {
  text-align: left;
  left:2%;
  animation:fadeInLeft 4s;
}

div #achat_middle > div:nth-child(even) > div{
  text-align: right;
  right: 2%;
  animation:fadeInRight 4s;
}

.achat_sub_main_text {
  margin-left: auto;
  margin-right: auto;
  font-size: 3.5vw;
  font-weight: 900;
}

.achat_sub_sub_text {
  font-size: 2vw;
}