article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* particleground demo */

* { 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}



body {
/* font-family: 'Montserrat', sans-serif;*/
/*display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;*/
/*background-color:red; */
/* overflow: hidden;*/
/*overflow: unset;
overflow-x: hidden;
overflow-y: unset;  
line-height: 1.3;
-webkit-font-smoothing: antialiased;*/
background-image: url("../src/2848469-fond-blanc-moderne-texture-avec-motif-hexagone-abstrait-vectoriel.jpg");
max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

#particles {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


h1 {

/*text-shadow: 5px 5px #5F6D72;*/
}
/*n{
  color: transparent;
}*/
/*p {
  font-size: 11pt;
}*/
.btn {
   max-width: 100%;
            height: auto;
            
            margin: 0 auto;
 /* display: inline-block;*/
  padding: 15px 30px;
  border: 2px solid #00bfff;
  /*text-transform: uppercase;*/
  letter-spacing: 0.015em;
  font-size: 2vw;
  font-weight: 700;
  line-height: 1;
   color: #00bfff;;
  text-decoration: none;
  -webkit-transition: all 0.4s;
     -moz-transition: all 0.4s;
       -o-transition: all 0.4s;
          transition: all 0.4s;
}
.btn:hover {
  color: #005544;
  border-color: #005544;
}


@media only screen and (max-width: 800px) {
  /*h1 {
    font-size: 48px;
  }
  h1::after {
    height: 8px;
  }*/
}

@media only screen and (max-width: 568px) {
  .intro {
    padding: 0 10px;
  }
/* h1 {
    font-size: 30px;
  }
  h1::after {
    height: 6px;
  }*/
  p {
    font-size: 12px;
  }
  .btn {
    font-size: 16px;
  }
}

@media only screen and (max-width: 320px) {
  /*h1 {
    font-size: 28px;
  }
  h1::after {
    height: 4px;
  }*/
}


.nav-container
{
  display: flex;
  flex-direction: row;
  bottom: 0;
  width: 100%;
  height: 75px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  background: #03dac6;
  border-radius: 5px;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  width: 180px;
  height: 30px;
  margin: 20px 0 0 0;
}
.nav-tab
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: white;
  letter-spacing: 0.1rem;
  transition: all 0.5s ease;
 /* font-size: 1vw;*/
  border: 2px solid #00bfff;
  border-radius: 5px;
  width: 180px;
  height: 30px;
}


  /* Styles CSS pour rendre l'image responsive */
        .ARMP_abr{
          font-family: arial black;
         
          height: auto;
          display: block;
          margin: 0 auto;
          color: grey;
          font-size: 50pt;
         
          text-align: center;
          line-height: 1;
          

        }
        .ARMP_dev{ 
          font-family: arial;        
          height: auto;
          display: block;
          margin: 0 auto;
          color: #00bfff;
          font-size: 13pt;
          text-align: center;
          line-height: 1;
          
        }
        .responsive-body {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0px 0 0 0;
            border: transparent;
        }
        .responsive-img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        .responsive-img-logo {
            max-width: 15%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        /* Styles CSS pour l'en-tête et le pied de page */
         header {
            background-color: #eee;
          /*  padding: 10px;*/
            text-align: center;
        }

        footer {
            
            text-align: center;
            margin-top: auto; /* Fait remonter le pied de page en bas de la page */
        }

      
        h6{
          margin-left: 10px;
          text-align: left;          
                   
          text-align: left;
          line-height: 1;

        }

        h1,h2{
          text-align: center;
          font-family: arial black;

            height: auto;
            display: block;
            margin: 0 auto;
            font-size: 60px;
           
            text-align: center;
            line-height: 1;

        }

        /********** icons *********/
        .icon{
           width:30px;
           height:30xp;

        }

        /* Centrer les boutons */
        .centered-buttons {
            display: flex;
            justify-content: center;
        }

        /************ marque *************/ 

        .marquee-rtl {
                     /* largeur de la fenêtre */
            color: rgb(17, 1, 1);
            overflow: hidden;                     /* masque tout ce qui dépasse */
            /*box-shadow: 0 0 1em .25em rgba(204, 204, 204, 0.918),inset 0 0 1em .25em rgba(204, 204, 204, 0.596);*/
            font-size: 1vw;
            text-align: center;
            line-height: 1;
          }

          .marquee-rtl > :first-child {
            display: inline-block;                /* modèle de boîte en ligne */
            padding-right: 2em;                   /* un peu d'espace pour la transition */
            padding-left: 100%;                   /* placement à droite du conteneur */
            white-space: nowrap;                  /* pas de passage à la ligne */
            animation: defilement-rtl 25s infinite linear;
            animation-name: defilement-rtl;       /* référence à la règle @keyframes mise en oeuvre */
            animation-delay: 1s;                 /* valeur à ajuster suivant la longueur du message */
            animation-iteration-count: infinite;  /* boucle continue */
            animation-timing-function: linear;
          }

          @keyframes defilement-rtl {
            0% {
              transform: translate3d(0,0,0);      /* position initiale à droite */
            }
            100% {
              transform: translate3d(-100%,0,0);  /* position finale à gauche */
            }
          }



          

/************ MOUVE **************/
/*************** VOIR PLUS *****************/
div .col:hover a{
                            -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
                            -webkit-transform: rotate(360deg); /* Safari */
                              transform: rotate(360deg);
                            }

                            div .col-4:hover img{
                            transform: scale(1.2,1.2) translate(5px, 0px);
                            transition-duration: 2s;}
/************** MENU *************************/
  ul #mouve:hover {
                            transform: scale(1.2,1.2) translate(5px, 0px);
                            transition-duration: 0.1s;}
/************ PHOTO DG ************/
 #DG:hover img{
                              transform: scale(1.8) translate(40px, 63px);
                              transition-duration: 5s;
                                border: 3px solid rgba(0,0,0,.4); 
}
/************* icon *****************/

/********* logo armp ***************/


.element {
  /*display: inline-block;*/
  text-align: center;
  font-family: Verdana, sans-serif;

 
}

.one { 
  transform: rotateX(40deg);
  animation: one 2s infinite;
  animation-direction: alternate;
}

.two {
  transform: rotateY(40deg);
  animation: two 2s infinite;
  animation-direction: alternate;
  background-color: #831a4a;
}

.three {
  transform: rotateZ(100deg);
  animation: three 2s infinite;
  animation-direction: alternate;
  background-color: #439772;
}

@keyframes one {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(50deg);
  }
}

@keyframes two {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(70deg);
  }
}

@keyframes three {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(100deg);
  }
}