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

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

#page{
     display: flex;
     flex-direction: column;
     background-color: #e9e9e9;
}

#intro h1{
     color: #ffffff
}

.separation{
     display: flex;
     background-image: url(/data/bkMain.jpg);
     background-attachment: fixed;
     background-repeat: no-repeat;
     background-size: 2200px auto;
     background-position: -95px -70px;
}

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

.principal .container{
     width: 1000px;
     margin: 50px auto;
     background-color: #e9e9e9;
     border: 1px solid #783f6d;
     border-radius: 10px;
     box-shadow: 0 10px 20px -10px #575756;
}

.principal .content, .first-content, .second-content, article, .version{
     display: flex;
     justify-content: space-between;
}

.principal .content{
     flex-direction: column;
}

.principal .container article{
     padding: 10px;
}

.principal .container article:first-child{
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
}

.principal .container article:last-child{
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
}

.principal .container article:nth-child(2n+0){
     background-color: #ffffff;
}

.principal .container article:nth-child(2n+1){
     background-color: #efefef;
}

.principal .title h2{
     margin-left: 350px;
     width: 100%;
}

.title h2, .title h3{
     margin: 0;
}

.principal .first-title{
     width: 100% !important;
     text-align: center;
}

.principal .first-title h2{
     margin-left: 0;
}

.principal .title{
     display: flex;
     margin-left: 10px;
}

.principal .title h3, .principal .version p{
     font-size: 14px;
}

.principal a .title.active:after{
     content: '\ead3';
}

.principal a .title:after{
     font-size: 16px;
     content: '\eb20';
     font-family: unicons;
     font-style: normal;
     font-weight: 400;
     speak: none;
     display: inline-block;
     text-decoration: inherit;
     width: 50px;
     margin-right: .2em;
     text-align: center;
     font-variant: normal;
     text-transform: none;
     line-height: 1em;
     margin-left: .2em;
     -webkit-font-smoothing: antialiased;
}

.principal .duree-lien p, .principal .version p{
     margin: 0;
}

.principal .duree-lien .lien-pdf{
     margin-left: 20px;
     font-size: 22px !important;
     color: black;
}

.principal .duree-lien .duree{
     display: flex;
     font-size: 14px;
}

.principal .duree-lien{
     display: flex;
}

.principal .cpf-lbl {
     width: 120px;
}

.principal .cpf-lbl p {
     font-size: 12px;
     font-weight: bold;
}

#langue .title{
     width: 537px;
}


.principal .duree-lien .subtitle{
     margin-right: 10px !important;
}

.duree p:last-child{
     font-style: italic;
}

.subtitle{
     font-weight: bolder;
}

.principal .version .subtitle{
     margin-left: 50px;
     margin-right: 10px;
}

.second-content .subtitle{
     margin-top: 10px;
}

.principal .version a{
     margin-right: 10px;
     color: #000000;
     text-decoration: underline;
}

.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;
}

.principal .second-content ul{
     list-style-type: none;
     display: flex;
     flex-direction: column;
     padding: 0;
     font-size: 14px;
     margin-left: 12px;
}

.principal .li-public{
     width: 140px;
}

.principal .li-objectif .list-ul{
     flex-direction: column;
     width: 600px;
}

.second-content{
     flex-direction: column;
     padding-left: 30px;
     font-size: 14px;
     margin-top: 15px;
     margin-bottom: 10px;
}

.second-content p{
     margin-top: 0;
     margin-bottom: 0;

}

#management .second-content .subtitle, #management .version a:hover, #management .title h2, #management .lien-pdf:hover{color: #2A2ACA;}
#bien-etre .second-content .subtitle, #bien-etre .version a:hover, #bien-etre .title h2, #bien-etre .lien-pdf:hover{color: #411128;}
#reseaux .second-content .subtitle, #reseaux .version a:hover, #reseaux .title h2, #reseaux .lien-pdf:hover{color: #0000FF;}
#ressources .second-content .subtitle, #ressources .version a:hover, #ressources .title h2, #ressources .lien-pdf:hover{color: #660033;}
#infographie .second-content .subtitle, #infographie .version a:hover, #infographie .title h2, #infographie .lien-pdf:hover{color: #FBC965;}
#vente .second-content .subtitle, #vente .version a:hover, #vente .title h2, #vente .lien-pdf:hover{color: #336600;}
#bureautique .second-content .subtitle, #bureautique .version a:hover, #bureautique .title h2, #bureautique .lien-pdf:hover{color: #FBC965;}
#expression .second-content .subtitle, #expression .version a:hover, #expression .title h2, #expression .lien-pdf:hover{color: #ED109F;}
#communication .second-content .subtitle, #communication .version a:hover, #communication .title h2, #communication .lien-pdf:hover{color: #660033;}
#rse .second-content .subtitle, #rse .version a:hover, #rse .title h2, #rse .lien-pdf:hover{color: #800080;}
#transfert .second-content .subtitle, #transfert .version a:hover, #transfert .title h2, #transfert .lien-pdf:hover{color: #7F7F7F;}
#langue .second-content .subtitle, #langue .version a:hover, #langue .title h2, #langue .lien-pdf:hover{color: #006699;}
#art-ecrire .second-content .subtitle, #art-ecrire .version a:hover, #art-ecrire .title h2, #art-ecrire .lien-pdf:hover{color: #d40050;}

footer{
     margin-top: 0 !important;
}

.formation-intra{
     display: flex;
     flex-direction: column;
     padding: 10px;
     margin: 50px auto;
     width: 900px;
     background-color: #d8d8d8;
     border: 0 solid #783f6d;
     border-radius: 2px;
}

.formation-intra div:first-child{
     text-align: center;
}

.formation-intra div:first-child h3{
     font-size: 26px;
     margin: 0;
}

.formation-intra div:last-child{
     margin-left: 10px;
     margin: 0 auto;
}

.formation-intra div:last-child p{
     margin: 0;
     font-size: 14px;
}

.formation-intra div:last-child .subtitle{
     margin-top: 20px;
}

#reseaux .container{
     margin: 60px auto;
}

#reseaux .separation-top{
     height: 220px;
}

.tab{
     margin-left: 22px !important;
}

section .more-formation{
     width: 1000px;
     margin: 0 10px 50px 10px;
     text-align: center;
     font-size: 20px;
     color: #a8639a;
     font-style: italic;
     font-weight: bolder;
}

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

     #intro h1{
          text-align: center;
          margin: 30px auto;
          font-size: 30px;
     }

     #page h2{
          font-size: 20px;
     }

     .principal .title h3, .principal .version p {
         font-size: 10px;
     }

     #bureautique a .no-version, #page .principal:not(#bureautique) .first-content .title{
          width: 285px;
     }

     #page .principal a .title:after{
          font-size: 12px;
          margin-top: 4px;
          width: 25px;
     }

     #page .version .subtitle,
     #page .first-content .undraw-duree,
     #page .first-content .undraw-lbl,
     #page .arrow:before {
          display: none;
     }

     #page .second-content{
          line-height: 15px;
          padding-left: 15px;
          font-size: 12px;
          margin-top: 0;
          margin-bottom: 0;
          width: 65%;
     }

     #page section .more-formation{
          width: auto;
     }

     .principal .formation-intra{
          width: auto;
     }
}

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

     #page .second-content{
          line-height: 20px;
     }

     #bureautique a .no-version, #page .principal:not(#bureautique) .first-content .title{
          width: 420px;
     }
}

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

     #page .version .subtitle{
          display: block;
     }

     #page .arrow:before{
          display: inline-block;
     }

     #bureautique a .no-version, #page .principal:not(#bureautique) .first-content .title{
          width: 420px;
     }

     #page .first-content .undraw-duree{
          display: flex;
          margin-right: 0;
          width: 130px;
     }

     #page .first-content .undraw-lbl{
          display: flex;
          margin-right: 0;
          width: 120px;
     }

     #page .second-content .undraw-duree,
     #page .second-content .undraw-lbl {
          display: none;
     }

     .principal .duree-lien .duree{
          font-size: 13px;
     }

     .principal .duree-lien .subtitle {
          margin-right: 5px !important;
     }

     .principal .title h3, .principal .version p {
         font-size: 12px;
     }

}

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

     #page .separation{
          height: 200px;
     }

     #intro h1{
          margin-top: 70px;
          text-align: left;
     }

     .formation-intra div:last-child{
          width: 1000px;
     }

     #bureautique a .no-version, #page .principal:not(#bureautique) .first-content .title{
          width: 620px;
     }

     #langue a .title{
          width: 676px;
     }

     #page .first-content .undraw-duree{
          width: 180px;
     }

     #langue .first-content .undraw-duree{
          width: 180px;
     }

     .principal .title h3, .principal .version p, .principal .duree-lien .duree{
         font-size: 14px;
     }

     .principal .formation-intra{
          width: min-content;
     }
}