html {
  background: url(/images/Signaletique_homme2.png) no-repeat center center fixed;
  background-size: cover;
}


.content{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  /* margin-bottom: 10em; */
}

.title{
  margin-top: 2em;
  width: 22%;
  margin-left: 39%;
  margin-right: 39%;
}

.title > img {
width: 100%;
}

.categorie {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.categorie > img{

left:0;
right:0;
top:30%;
bottom: 0;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;

  visibility: hidden;
  position: absolute;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  width: 20%;
}

.categorie > a{
opacity: 0;
text-decoration: none;
font-weight: bold;
color: white;
position: absolute;
}

.categorie *:hover {
-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
        transform: scale(1.1);
}

#investigation{

left:60.2%;
top:40%;

font-size: 350%;
}

#formation{
top: 75%;
left: 26.7%;

font-size: 300%;
}

#conseil{
top: 42%;
left: 29%;

font-size: 350%;
}

#internationnal{
top: 54%;
left: 64%;

font-size: 250%;
}

#prestige{
top: 60%;
left: 28%;

font-size: 250%;
}

#boxing{
top: 75%;
left: 63%;

font-size: 300%;
}

#securite{
top: 64%;
left: 65%;

font-size: 350%;
}

.categories{
margin: 17em 10em 0em 10em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
width: 100%;
}

@keyframes resize { /* autres navigateurs */
  from {
    width: 0%;
  }

  75% {
    width: 15%;
  }
    
  90% {
    width: 23%;
  }

  to {
    width: 20%;
    visibility: visible;
  }
}

@-webkit-keyframes resize { /* Oracle, safari, chrome */
  from {
    width: 0px;
  }

  75% {
    width: 15%;
  }
    
  90% {
    width: 23%;
  }

  to {
    width: 20%;
    visibility: visible;
  }
} 

@keyframes FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-webkit-keyframes FadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}

nav{
display: none !important;
}

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

  html {
    background: url(/images/Signaletique_homme2.png) no-repeat fixed;
    background-size: cover;
  }

  .acces {
    display: none !important;
  }

  .categorie > a{
    display: none;
  }

  nav{
    display: inline !important;
  }

  .title{
    margin-top: 5em;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
  }

  .categorie > img{
    width: 60%;
  }

  .categories{
    margin-top: 12em;
  }

  .card{
    width: 100% !important;
  }

  #news{
    margin-top: 25% !important;
  }

  @keyframes resize { /* autres navigateurs */
    from {
      width: 0%;
    }

    75% {
      width: 50%;
    }
      
    90% {
      width: 70%;
    }

    to {
      width: 60%;
      visibility: visible;
    }
  }

  @-webkit-keyframes resize { /* Oracle, safari, chrome */
    from {
      width: 0%;
    }

    75% {
      width: 50%;
    }
      
    90% {
      width: 70%;
    }

    to {
      width: 60%;
      visibility: visible;
    }
  } 

}

@media only screen and (max-width: 1080px){
#investigation{
  font-size: 250%;
  margin-left: 43%;
}

#formation{
  font-size: 200%;
  margin-right: 40%;
}

#conseil{
  font-size: 250%;
  margin-right: 38%;
}

#internationnal{
  font-size: 150%;
  margin-left: 45%;
}

#prestige{
  font-size: 150%;
  margin-right: 43%;
}

#boxing{
  font-size: 200%;
  margin-left: 40%;
}

#securite{
  font-size: 250%;
  margin-left: 50%;
}
}

.section{
margin-bottom: 5em;
}

li{
padding-left: 2em;
}
p{
text-align: justify;
}

.sidenav{
padding-top: 5em;
}

.btn-action{
color: darkgray;
margin: 1em 1em 0em 1em;
}

#news{
margin-top: 15%;
margin-bottom: 5%;
padding-left: 7%;
padding-right: 7%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
}

.card{
width: 30%;
}

.title_news{
width: 100%;
color: white;
}

#btn_all_news{
padding-left: 7%;
margin-bottom: 5%;
}

#all_news{
margin: 5% 7% 0% 7%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
}