/* @media screen and (max-width: 375px) { }*/
  body{
    background: linear-gradient(227deg, #50cc7f, #f9d423);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 7s ease infinite;
    -moz-animation: AnimationName 7s ease infinite;
    animation: AnimationName 7s ease infinite;
  }

  @-webkit-keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}
@keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}

.container {
      display: flex;
      justify-content: left;
      align-items: left;
      flex-direction: column;
  }

.flex-container {
    display: flex;
    flex-direction: column;
    overflow:hidden;
    width: 100%;
    height: 100vh;
    /*box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2);
    border:solid white 1px;
    border-radius: 20px;*/
}

.content{
  display: flex;
  flex-direction: row
}

.contenu{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90vw;
}

.button-left{
  float:left;
  width: 5vw;
  align-content: center;
}

.button-right{
  float:right;
  width: 5vw;
  align-items:center;
}

.text-categorie{
border:solid white 1px;
border-radius: 30px;
width: 50%;
margin: auto;
}

/*
.title{
  border-bottom: solid white 1px;
}*/

.box-date{
  height: 28vh;
}

.box-article{
  height: 25vh;
}
.box-picto{
  height: 32vh;
}

.box-categorie{
  height: 15vh;
}

img.arrow{
  margin-top:300px;
  width:5vw;
}

img.picto{
  width:65vw;
  padding-left:38px;
  transform: translatey(0px);
	animation: float 2s ease-in-out infinite;
	img { width: 100%; height: auto; }
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

a.title{
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight:200;
  font-size: 15px;
  color:white;
  padding-left:15px;
  padding-top: 12px;
  font-variant: small-caps;
  letter-spacing: 2px;
  text-decoration: none;
}

h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color:white;
  text-align: center;
  font-weight: 200;
  padding-top: 7vh;
}

span{
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  color:white;
  text-align: center;
  font-weight: 300;
  line-height: 30px;
}

p.article{
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-align: center;
  color: white;
  font-weight: 200;
  padding-top: 10vh;
}

a.categorie{
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  text-align: center;
  color: white;
  font-weight: 300;
  text-decoration: none;
}

p.categorie{
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  text-align: center;
  color: white;
  font-weight: 300;
}