Data/@media only screen and (min-width: 1501px){
     header .nav-ul li:nth-child(1) .link-menu{
          border-bottom: 3px solid #a8639a;
          border-radius: 20px;
     }
}

@media only screen and (max-width: 1500px){
     header .nav-ul .nav-li:nth-child(1){
          border-bottom: 3px solid #a8639a;
     }
}

#page{
     display: flex;
}

.principal{
     width: 100%;
     margin: 0 auto;
}


#page .container{
     margin: 0px auto;
}

#page .content{
     display: flex;
     flex-wrap: wrap;
}

#valeur{
     height: 460px;
     display: flex;
     background-image: url(Data/background1.jpg);
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-position: -120px -1720px;
}

#valeur .filter{
     width: 100%;
     height: 100%;
     background: rgba(55,63,69,0.4);
}

#valeur .container h1{
     margin-top: 165px;
     margin-left: 135px;
     font-size: 36px;
}

#valeur .container p, #valeur .container h1{
     font-style: italic;
     color: #ffffff;
}

.valeur-text{
     text-align: left;
     margin-top: 30px;
}

.text{
     margin: 0px;
}

.ending{
     text-align: right;
     margin-top: 30px;
     font-weight: bold;
     font-size: 28px;
}

.principal .arrow:before{
     content: '\e82f';
     font-family: unicons;
     font-style: normal;
     font-weight: 400;
     speak: none;
     display: inline-block;
     text-decoration: inherit;
     width: 1em;
     margin-right: .2em;
     text-align: center;
     font-variant: normal;
     text-transform: none;
     line-height: 1em;
     margin-left: .2em;
     -webkit-font-smoothing: antialiased;
}

#formation{
     background-color: #e8e8e8;
     box-shadow: 0px 5px 10px -5px #b2b2b2;
}

#formation .title{
     height: 70px;
     text-align: center;
}

#formation h1{
     display: inline-block;
     margin-top: 50px;
     font-size: 36px;
}

#formation .content{
     margin-top: 50px;
}

.box{
     border: solid;
     border-radius: 3px;
     width: 217px;
     height: 60px;
     transition-duration: 0.4s;
}

.box p{
     color: black;
     font-size: 18px;
     font-weight: bold;
     text-align: center;
     margin: 8px;
     height: -webkit-fill-available;
}

.box:hover{
     margin-top: 10px;
     transition-duration: 0.4s
}

#formation .content #box-management{color: #2A2ACA;}
#formation .content #box-bien-etre{color: #411128;}
#formation .content #box-reseaux{color: #0000FF;}
#formation .content #box-ressources{color: #660033;}
#formation .content #box-infographie{color: #FBC965;}
#formation .content #box-vente{color: #336600;}
#formation .content #box-bureautique{color: #FBC965;}
#formation .content #box-expression{color: #ED109F;}
#formation .content #box-communication{color: #660033;}
#formation .content #box-rse{color: #800080;}
#formation .content #box-transfert{color: #7F7F7F;}
#formation .content #box-langue{color: #006699;}
#formation .content #box-metier{color: #006699;}
#formation .content #box-art-ecrire{color: #d40050;}

#formation .content #box-management:hover{box-shadow: 0px 5px 5px 1px #2A2ACA;}
#formation .content #box-bien-etre:hover{box-shadow: 0px 5px 5px 1px #411128;}
#formation .content #box-reseaux:hover{box-shadow: 0px 5px 5px 1px #0000FF;}
#formation .content #box-ressources:hover{box-shadow: 0px 5px 5px 1px #660033;}
#formation .content #box-infographie:hover{box-shadow: 0px 5px 5px 1px #FBC965;}
#formation .content #box-vente:hover{box-shadow: 0px 5px 5px 1px #336600;}
#formation .content #box-bureautique:hover{box-shadow: 0px 5px 5px 1px #FBC965;}
#formation .content #box-expression:hover{box-shadow: 0px 5px 5px 1px #ED109F;}
#formation .content #box-communication:hover{box-shadow: 0px 5px 5px 1px #660033;}
#formation .content #box-rse:hover{box-shadow: 0px 5px 5px 1px #800080;}
#formation .content #box-transfert:hover{box-shadow: 0px 5px 5px 1px #7F7F7F;}
#formation .content #box-langue:hover{box-shadow: 0px 5px 5px 1px #006699;}
#formation .content #box-metier:hover{box-shadow: 0px 5px 5px 1px #006699;}
#formation .content #box-art-ecrire:hover{box-shadow: 0px 5px 5px 1px #d40050;}

.robert {
	width: 180px;
	height: 80px;
}

#number{
     margin-bottom: 100px;
     background-color: #e8e8e8;
     height: 240px;
     box-shadow: 0px 5px 10px -5px #b2b2b2;
}

#number .container{
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     height: 100%;
}

#number .circle{
     border: solid 1px grey;
     margin: auto 0px;
     display: block;
     width: 175px;
     height: 175px;
     border-radius: 100px;
}

#number .circle-text{
     margin: auto 0px;
     background-color: #b2b2b2;
     display: block;
     width: 150px;
     height: 150px;
     border-radius: 100px;
     text-align: center;
     position: absolute;
     margin-left: 13px;
     margin-top: 13px;
}

#number .circle-text p{
     color: #000;
}

#number .circle-text p:nth-child(1){
     font-size: 36px;
     font-weight: bolder;
     margin-bottom: 0px;
     margin-top: 25px;
}

#number .circle-text p:nth-child(2){
     margin-top: 5px;
     font-size: 16px;
}

#agrement{
     margin: 80px 0px 80px 0px;
}

#agrement .title h1{
     text-align: center;
     font-size: 36px;
     margin: 0px 0px 10px 0px;
}

#agrement .title p{
     color: #595959;
     font-style: italic;
     text-align: center;
     font-size: 26px;
     margin: 0px 0px 60px 0px;
}

#agrement .content-certif{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     flex-wrap: wrap;
     width: 100%
}

#agrement .voltaire{
     margin-left: -30px;
     margin-right: -20px;
}


@media only screen and (max-width: 1000px){
     #valeur .container h1{
          margin-top: 25px;
          text-align: center;
          font-size: 30px;
          margin-left: inherit;
     }

     .valeur-text{
          font-size: 16px;
     }

     .ending{
          font-size: 22px;
          margin-bottom: 20px;
          text-align: center;
     }

     #valeur{
          height: auto;
     }

     #formation h1{
          font-size: 30px;
          margin-top: 30px;
          margin-bottom: 20px;
     }

     #formation .content{
          margin-top: 15px;
     }

     .box{
          margin: 10px auto;
          height: 50px;
          width: 180px;
     }

     .box p{
          font-size: 14px;
     }

     #agrement{
          margin: 40px 0;
     }

     #agrement .title h1{
          font-size: 30px;
     }

     #agrement .title p{
          font-size: 20px;
          margin-bottom: 40px;
     }

     #number{
          height: inherit;
          padding-top: 20px;
     }

     #number .circle{
          width: 156px;
          height: 156px;
          margin: 0 5px 20px 5px;
     }

     #number .circle-text{
          width: 130px;
          height: 130px;
     }

     #number .circle-text p:nth-child(1) {
         font-size: 30px;
     }

     #number .circle-text p:nth-child(2) {
         font-size: 14px;
     }
}

@media only screen and (min-width: 0px){
     #page .container{
          width: 355px;
     }

     .valeur-text{
          font-size: 14px;
     }
}

@media only screen and (min-width: 501px){
     #page .container{
          width: 490px;
     }
}

@media only screen and (min-width: 761px){
     #page .container{
          width: 740px;
     }
}

@media only screen and (min-width: 1001px){
     #page .container{
          width: 1000px;
     }

     .box{
          margin: 30px 13px;
     }

     .valeur-text{
          font-size: 24px;
     }
}