body, html {
  width: 100%;
  height: 100%;
  margin: 0%;
}
h1, h2{
  font-family: 'Gamja Flower', cursive;
  font-size: 1.7em;
}
/*Navbar Fixed Top*/
/*Navbar Fixed Top*/
header{
  display: flex;
  justify-content: space-between;
  position: fixed;
  border: 1px solid black;
  width: 100%;
  background-color: #EF4423;
  height: 70px;
  overflow: hidden;
  top: 0%;
  z-index: 4;
}
nav ul {
  display: flex;
  list-style: none;
  font-family: 'Gamja Flower', cursive;
  padding-right: 35px;
}

nav a{
  text-decoration: none;
  padding: 0 10px;
  color: black;
  text-transform: uppercase;
}
nav a:hover {
  color: white;
}
#logoJudo{
  margin-left:2%;
}
/* The hero image */
.hero-image {
/* for a darken background effect to make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/kid_6.jpg");
/* Set a specific height */
height: 85%;
/* to position and center the image to scale on all screens but does it really work???*/

background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-top: 3.8%;
}

/* text in the middle of the image */
.text {
color: white;
font-family: 'Gamja Flower', cursive;
font-size: 3rem;
width: 100%;
text-align: center;

padding-top: 5%;

}

/* Actualités */
.rectangle_rouge{
  width: 100%;
  height: 70px;
  background: #EE4423;
  position: relative;

}
h2{
  position: absolute;
  margin-left: 45%;
  margin-top: 10px;
  padding: 10px;
  font-family:'Gamja Flower', cursive;
  font-size: 1.7em;
  color: white;
}
/* The Slideshow */


.slides{
  display: flex;
  width : calc(450*5);
animation: glisse 10s infinite;
}
.slider{
  width: 450px;
  height: 340px;
  overflow: hidden;
  margin: 0px auto;

}
@keyframes glisse {
  0% {
      transform: translateX(0);
  }
  10% {
      transform: translateX(0);
  }
  20% {
    transform: translateX(0);
}
  
  33% {
      transform: translateX(-450px);
  }
  43% {
      transform: translateX(-450px);
  }
  66% {
      transform: translateX(-900px);
  }
  76% {
      transform: translateX(-900px);
  }
  100% {
      transform: translateX(0);
  }
}
footer{
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0%;
  border: 1px solid black;
  width: 100%;
  background-color: #EF4423;
  overflow: hidden;
  height: 70px;
}

.footer{
  display: flex;
  justify-content: center;
  width: 100%;
}
h3{
  padding: 10px;
}
.logos{
  margin: 10px;
}
@media screen and (max-width: 700px){
  .text {
    margin-top: 60%;
    }

  .responsive{
      font-size: 32px;
  }
   header{
      flex-direction: column;
      align-items: center;
      height: 270px;
      font-size: 32px;
  }
  nav ul{
      flex-direction: column; 
      position: relative;
      bottom: 5%;
  }
 #logoJudo img{
  position: relative;
  top: 19%;
 }
 
}