/*
    color: #0e1522;
    color: #dfdfdf;
    color: #2f58ff;
*/

*{margin:0; padding: 0;}

html, body{height:100%;}
body{display: flex; flex-direction: column; font-family: arial, sans-serif; font-size: 12px; background-color: #0e1522; color: #dfdfdf; margin:20px 20px 0px 20px; background-image: url("../IMAGES/Squares.svg");}

#main{min-height:100%;}

a{color:royalblue;text-decoration: none;}

/* max-width */

@media (min-width: 300px){#main{max-width: 100%; margin: 0;}}
@media (min-width: 360px){#main{max-width: 99%; margin: 0 0.5%;}}
@media (min-width: 420px){#main{max-width: 98%; margin: 0 1%;}}
@media (min-width: 480px){#main{max-width: 97%; margin: 0 1.5%;}}
@media (min-width: 540px){#main{max-width: 96%; margin: 0 2%;}}
@media (min-width: 600px){#main{max-width: 95%; margin: 0 2.5%;}}
@media (min-width: 660px){#main{max-width: 94%; margin: 0 3%;}}
@media (min-width: 720px){#main{max-width: 93%; margin: 0 3.5%;}}
@media (min-width: 780px){#main{max-width: 92%; margin: 0 4%;}}
@media (min-width: 840px){#main{max-width: 91%; margin: 0 4.5%;}}
@media (min-width: 900px){#main{max-width: 90%; margin: 0 5%;}}
@media (min-width: 960px){#main{max-width: 89%; margin: 0 5.5%;}}
@media (min-width: 1020px){#main{max-width: 88%; margin: 0 6%;}}
@media (min-width: 1080px){#main{max-width: 87%; margin: 0 6.5%;}}
@media (min-width: 1140px){#main{max-width: 86%; margin: 0 7%;}}
@media (min-width: 1200px){#main{max-width: 85%; margin: 0 7.5%;}}
@media (min-width: 1260px){#main{max-width: 84%; margin: 0 8%;}}
@media (min-width: 1320px){#main{max-width: 83%; margin: 0 8.5%;}}
@media (min-width: 1380px){#main{max-width: 82%; margin: 0 9%;}}
@media (min-width: 1440px){#main{max-width: 81%; margin: 0 9.5%;}}
@media (min-width: 1500px){#main{max-width: 80%; margin: 0 10%;}}
@media (min-width: 1560px){#main{max-width: 79%; margin: 0 10.5%;}}
@media (min-width: 1620px){#main{max-width: 78%; margin: 0 11%;}}
@media (min-width: 1680px){#main{max-width: 77%; margin: 0 11.5%;}}
@media (min-width: 1740px){#main{max-width: 76%; margin: 0 12%;}}
@media (min-width: 1800px){#main{max-width: 75%; margin: 0 12.5%;}}
@media (min-width: 1860px){#main{max-width: 74%; margin: 0 13%;}}
@media (min-width: 1920px){#main{max-width: 73%; margin: 0 13.5%;}}
@media (min-width: 1980px){#main{max-width: 72%; margin: 0 14%;}}
@media (min-width: 2040px){#main{max-width: 71%; margin: 0 14.5%;}}
@media (min-width: 2100px){#main{max-width: 70%; margin: 0 15%;}}
@media (min-width: 2160px){#main{max-width: 69%; margin: 0 15.5%;}}
@media (min-width: 2220px){#main{max-width: 68%; margin: 0 16%;}}
@media (min-width: 2280px){#main{max-width: 67%; margin: 0 16.5%;}}
@media (min-width: 2340px){#main{max-width: 66%; margin: 0 17%;}}
@media (min-width: 2400px){#main{max-width: 65%; margin: 0 17.5%;}}
@media (min-width: 2460px){#main{max-width: 64%; margin: 0 18%;}}
@media (min-width: 2520px){#main{max-width: 63%; margin: 0 18.5%;}}
@media (min-width: 2580px){#main{max-width: 62%; margin: 0 19%;}}
@media (min-width: 2640px){#main{max-width: 61%; margin: 0 19.5%;}}
@media (min-width: 2700px){#main{max-width: 60%; margin: 0 20%;}}
@media (min-width: 2760px){#main{max-width: 59%; margin: 0 20.5%;}}
@media (min-width: 2820px){#main{max-width: 58%; margin: 0 21%;}}
@media (min-width: 2880px){#main{max-width: 57%; margin: 0 21.5%;}}
@media (min-width: 2940px){#main{max-width: 56%; margin: 0 22%;}}
@media (min-width: 3000px){#main{max-width: 55%; margin: 0 22.5%;}}
@media (min-width: 3060px){#main{max-width: 54%; margin: 0 23%;}}
@media (min-width: 3120px){#main{max-width: 53%; margin: 0 23.5%;}}
@media (min-width: 3180px){#main{max-width: 52%; margin: 0 24%;}}
@media (min-width: 3240px){#main{max-width: 51%; margin: 0 24.5%;}}
@media (min-width: 3300px){#main{max-width: 50%; margin: 0 25%;}}

/* header */

.header{width: 100%; z-index: 3;}
.header ul{margin: 0; padding: 0; list-style: none; overflow: hidden;}
.header li a{display: block; padding: 10px 10px; text-decoration: none; color: #dfdfdf; background-color: #0e1522;}
.header li a:hover, .header .menu-btn:hover{color: #2f58ff; text-decoration: underline;}
.header .logo{display: block; float: left; font-size: 2em; text-decoration: none; padding-top: 0px; background-color: #0e1522;}
.header .logo img{width: 100%; height: auto;}

/* menu */

.header .menu{display: none; clear: both; max-height: 0; transition: max-height .2s ease-out; margin-top: 20px;}

/* menu icon */

.header .menu-icon{cursor: pointer; display: none; float: right; user-select: none; margin-top: 35px; width: 24px; height: 24px;}
.header .menu-icon .navicon{background: #dfdfdf; display: block; height: 3px; transition: background .2s ease-out; width: 24px; margin-top: 10px;}
.header .menu-icon .navicon:hover{background: #2f58ff;}
.header .menu-icon .navicon:before{background: #dfdfdf; content: ''; display: block; height: 100%; transition: all .2s ease-out; width: 100%; top: 10px;}
.header .menu-icon .navicon:after{background: #dfdfdf; content: ''; display: block; height: 100%; transition: all .2s ease-out; width: 100%; top: -10px;}

/* menu btn */

.header .menu-btn{display: none;}
.header .menu-btn:checked ~ .menu{max-height: 240px;}
.header .menu-btn:checked ~ .menu-icon .navicon{background: transparent;}
.header .menu-btn:checked ~ .menu-icon .navicon:before{transform: rotate(-45deg);}
.header .menu-btn:checked ~ .menu-icon .navicon:after{transform: rotate(45deg);}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after{top: 0;}

    /* @media navbar */

    @media (min-height: 240px){
        .header{display: block;}
        .header .menu{display: block;}
        .header .menu-icon{display: inline-block;}
        .header .logo img{width: 60px;}
    }

    @media (min-height: 288px){
        .header .logo img{width: 64px;}
        .header .menu{margin-top: 24px;}
        .header .menu-icon{margin-top: 39px;}
    }

    @media (min-height: 320px){
        .header .logo img{width: 67px;}
        .header .menu{margin-top: 27px;}
        .header .menu-icon{margin-top: 42px;}
    }

    @media (min-height: 352px){
        .header .logo img{width: 69px;}
        .header .menu{margin-top: 29px;}
        .header .menu-icon{margin-top: 44px;}
    }

    @media (min-height: 384px){
        .header .logo img{width: 72px;}
        .header .menu{margin-top: 32px;}
        .header .menu-icon{margin-top: 47px;}
    }

    @media (min-height: 480px){
        .header{font-size: 14px;}
        .header .logo img{width: 80px;}
        .header .menu{margin-top: 40px;}
        .header .menu-icon{margin-top: 55px;}
    }

    @media (min-height: 640px){
        .header .logo img{width: 100px;}
        .header .menu{margin-top: 60px;}
        .header .menu-icon{margin-top: 75px;}
    }

    @media (min-height: 720px){
        .header{font-size: 16px;}
    }

    @media (min-height: 900px){
        .header .logo img{width: 120px;}
        .header .menu{margin-top: 80px;}
        .header .menu-icon{margin-top: 95px;}
    }

    @media (min-width: 600px){
        .header li{float: left;}
        .header li a{padding: 20px 0px 20px 30px; background-color: #fff0;}
        .header .menu{clear: none; float: right; max-height: none;}
        .header .menu-icon{display: none;}
    }

/* content index*/

.content{margin-top: 70px; display: none; flex-flow: column; background-color: #0e1522; width: 100%;}
.latestupdate{display: none;}
.latest{display: none; flex-flow: row; justify-content: space-between; color: black;}
.latestA{display: none; flex-flow: row; background-color: royalblue; min-width: 59.5%; margin-right: 0.5%; min-height: 50px;}
.latestB{display: none; flex-flow: column; min-width: 39.5%; margin-left: 0.5%;}
.latestB1{display: none; flex-flow: row; background-color: darkorchid; min-height: 50px; margin-bottom: 1%;}
.latestB2{display: none; flex-flow: row; min-height: 50px; justify-content: space-between;}
.latestB2a{display: none; flex-flow: row; background-color: red; min-width: 49.5%; margin-right: 0.5%;}
.latestB2b{display:none; background-color: orange; min-width: 49.5%; margin-left: 0.5%;}
.topics{display: none; margin-top: 40px;}
.flexcontent{display: flex; flex-flow: row; margin-top: 5px; margin-bottom:50px; justify-content: space-between;}
.flexcontent a{font-weight: bold; text-decoration: none; color: black;}
.flexcontent p{font-size: 14px;margin-top: 5px;}
.flexcontent img{width: 100%; height: auto;}
.one, .two, .three, .four, .five{min-height: 50px; min-width: 12%; margin-top: 0px;padding: 5px;}
.one{background-color: yellow; text-align: center; margin-right: 5px;}
.two{background-color: orange; text-align: center; margin-right: 5px;}
.three{background-color: red; text-align: center; margin-right: 5px;}
.four{background-color: darkorchid; text-align: center; margin-right: 5px;}
.five{background-color: royalblue; text-align: center;}

/* content articles */

.contentart{margin-top: 70px; display: flex; flex-flow: row; background-color: #0e1522;width: 100%;}
.articles{display: flex; flex-flow: column; width: 72%; margin-right: 2%; margin-bottom: 25px;}
.articles-img{display: block; margin-left: auto; margin-right: auto; margin-top: 2px; width: 100%;}
.topicsart{display: flex; flex-flow: column; width: 23%;margin-left: 2%}
.topicsart a{ color: black;}
.topicsart .one{min-height: 50px; min-width: 100%; margin-top: 0px; margin-bottom: 10px;}
.topicsart .two{min-height: 50px; min-width: 100%; margin-bottom: 10px;}
.topicsart .three{min-height: 50px; min-width: 100%; margin-bottom: 10px;}
.topicsart .four{min-height: 50px; min-width: 100%; margin-bottom: 10px;}
.topicsart .five{min-height: 50px; min-width: 100%;}
.flexcontentart{display: flex; flex-flow: column; margin-bottom:50px; justify-content: space-between; color: black;}
.flexcontentart a{font-weight: bold;}
.flexcontentart p{font-size: 14px;margin-top: 5px;}
.flexcontentart img{width: 100%; height: auto;}
.Getresumes{word-break: break-word;}
.Getresumes a{text-decoration: none; color: black;}
.Getresumes p{font-size: 14px;margin-top: 5px;}
.Getresumes img{width: 100%; height: auto;}
.Getarticle a{text-decoration: none;}
.Getarticle p{font-size: 16px;margin-top: 5px;}
.Getarticle img{width: 100%; height: auto;}
.Getsearch a{text-decoration: none; color: white;}
.Getsearch p{font-size: 14px;margin-top: 5px;}
.Getsearch img{width: 100%; height: auto;}

    /* @media content */

    @media (min-height: 240px){
        .content{display: flex;}
        .latest{display: flex;}
        .latestA{display: flex;}
        .latestB{display: flex;}
        .latestB1{display: flex;}
        .flexcontent{display: flex;}
    }

    @media (min-height: 288px){
        .content, .contentart{margin-top: 74px;}
        /*.latestupdate{display: block; margin-bottom: 5px; margin-top:5px;}*/
        .latestupdate{display: block;}
        .latestB1{min-height: 55px;}
        .topics{display: block; margin-top: 5px;}
        .one, .two, .three, .four, .five{min-height: 55px;}
    }

    @media (min-height: 320px){
        .content, .contentart{margin-top: 77px;}
        /*.latestupdate{margin-top:8px;}*/
        .topics{margin-top: 8px;}
    }

    @media (min-height: 352px){
        .content, .contentart{margin-top: 79px;}
        .latestB2{display: flex;}
        .latestB2a{display: flex; min-height: 55px;}
        .latestB2b{display:flex;}
    }

    @media (min-height: 384px){
        .content, .contentart{margin-top: 82px;}
        .latestB1{min-height: 60px;}
        .latestB2a{min-height: 60px;}
        .one, .two, .three, .four, .five{min-height: 60px;}
    }

    @media (min-height: 480px){
        .content, .contentart{margin-top: 90px; font-size: 14px;}
        /*.latestupdate{margin-bottom: 8px;}*/
        .latestB1{min-height: 80px;}
        .latestB2a{min-height: 80px;}
        .topics{margin-top: 12px;}
        .one, .two, .three, .four, .five{min-height: 80px;}
    }

    @media (min-height: 576px){
        .content, .contentart{margin-top: 100px;}
        .latestB1{min-height: 96px;}
        .latestB2a{min-height: 96px; margin-top: 3px;}
        .latestB2b{margin-top: 3px;}
        .topics{margin-top: 16px;}
        .one, .two, .three, .four, .five{min-height: 96px;}
    }

    @media (min-height: 600px){
        .latestB1{min-height: 100px;}
        .latestB2a{min-height: 100px;}
        .topics{margin-top: 20px;}
        .one, .two, .three, .four, .five{min-height: 100px;}
    }

    @media (min-height: 640px){
        .content, .contentart{margin-top: 125px;}
        .latestB1{min-height: 110px;}
        .latestB2a{min-height: 110px;}
        .topics{margin-top: 25px;}
        .one, .two, .three, .four, .five{min-height: 110px;}
    }

    @media (min-height: 720px){
        .content, .contentart{font-size: 16px;}
        .latestB1{min-height: 130px;}
        .latestB2a{min-height: 130px;}
        .topics{margin-top: 25px;}
        .one, .two, .three, .four, .five{min-height: 130px;}
    }

    @media (min-height: 768px){
        .latestB1{min-height: 150px;}
        .latestB2a{min-height: 150px;}
        .topics{margin-top: 30px;}
        .one, .two, .three, .four, .five{min-height: 150px;}
    }

    @media (min-height: 800px){
        .latestB1{min-height: 160px;}
        .latestB2a{min-height: 160px;}
        .topics{margin-top: 35px;}
        .one, .two, .three, .four, .five{min-height: 160px;}
    }

    @media (min-height: 900px){
        .content, .contentart{margin-top: 145px;}
        .latestB1{min-height: 180px;}
        .latestB2a{min-height: 180px;}
        .topics{margin-top: 45px;}
        .one, .two, .three, .four, .five{min-height: 180px;}
    }

    @media (min-height: 1024px){
        .content, .contentart{margin-top: 165px;}
        .latestB1{min-height: 205px;}
        .latestB2a{min-height: 205px;}
        .topics{margin-top: 60px;}
        .one, .two, .three, .four, .five{min-height: 205px;}
    }

    @media (min-height: 1280px){
        .content, .contentart{margin-top: 175px;}
        .latestB1{min-height: 220px;}
        .latestB2a{min-height: 220px;}
        .topics{margin-top: 75px;}
        .one, .two, .three, .four, .five{min-height: 220px;}
    }

    @media (min-height: 1366px){
        .content, .contentart{margin-top: 180px;}
        .latestB1{min-height: 220px;}
        .latestB2a{min-height: 220px;}
        .topics{margin-top: 80px;}
        .one, .two, .three, .four, .five{min-height: 220px;}
    }

    @media (min-height: 1440px){
        .latestB1{min-height: 225px;}
        .latestB2a{min-height: 225px;}
        .topics{margin-top: 85px;}
        .one, .two, .three, .four, .five{min-height: 225px;}
    }

    @media (min-height: 1600px){
        .content, .contentart{margin-top: 190px;}
        .latestB1{min-height: 250px;}
        .latestB2a{min-height: 250px;}
        .topics{margin-top: 90px;}
        .one, .two, .three, .four, .five{min-height: 250px;}
    }

    @media (min-height: 1920px){
        .content, .contentart{margin-top: 200px;}
        .latestB1{min-height: 300px;}
        .latestB2a{min-height: 300px;}
        .topics{margin-top: 100px;}
        .one, .two, .three, .four, .five{min-height: 300px;}
    }

/* articles */
.art_full a{}

/* content links */

.linkstitle{margin-bottom: 20px;}
.linkstitle2{margin: 0px 0px 10px 40px;}
.links2d{margin-bottom: 20px;}
.links2d2{margin: 0px 0px 10px 40px;}
.links3d{margin-bottom: 20px;}
.links3d2{margin: 0px 0px 10px 40px;}
.linksdev{margin-bottom: 20px;}
.linksdev2{margin: 0px 0px 10px 40px;}
.linkssoft{margin-bottom: 20px;}
.linkssoft2{margin: 0px 0px 10px 40px;}
.linkshard{margin-bottom: 20px;}
.linkshard2{margin: 0px 0px 10px 40px;}

/* footer */

.footer{display: none; background-color: #0e1522; font-size: 12px;margin-bottom:50px;}
.footer .p-left-a{display: none; float:left;}
.footer .p-left-b{display: none; float:left;}
.footer .p-right{display: none; float:right;}
.footer a{color: #2f58ff; text-decoration: none;}
.footer a:hover{text-decoration: underline;}

    /* @media footer */

    @media (min-height: 240px){
        .footer{display: block;}
        .footer .p-left-a{display: block;}
    }

    @media (min-height: 320px){
        .footer{font-size: 12px;}
    }

    @media (min-height: 480px){
        .footer{font-size: 14px;}
    }

    @media (min-height: 720px){
        .footer{font-size: 16px;}
    }

    @media (min-width: 640px){
        .footer .p-right{display: block;}
    }

    @media (min-width: 720px){
        .footer .p-left-a{display: none;}
        .footer .p-left-b{display: block;}
    }

    /* ADMIN */

    .boutonbleu{background-color:royalblue;color:black;font-weight:bold;font-size:15px;padding:5px;cursor:pointer;border-radius:0px;border:none;}
    .boutonbleu:hover{background-color:royalblue;color:yellow; border:none;}

    #artmain{width:100%;display: flex; flex-direction: row;margin-left: auto;margin-right: auto;}
    .createart{border: 2px solid royalblue; padding: 25px; margin-right: 10px;font-size: 16px;}

    .create{}
    .back{}

        /* list */
        .art-list{min-width: 100%;}
        .art-list tr:nth-child(even) {background-color: #252940;}
        .art-list th{background-color: royalblue;color: black;padding-top: 5px; padding-bottom: 5px;}

        /* create */
        .art-create{padding-top: 20px;}
        .art-create h1{color: royalblue;}
        .art-create table{width: 100%;margin: 5px auto;}
        .art-create tr{}
        .art-create th, td{border: none;height: 20px;padding: 2px;}
        .art-create tr:hover{background: royalblue;}
        .art-create form{text-align: left;padding: 20px 20px 20px 20px;border: 1px solid royalblue;border-radius: 5px;}

        /* edit */
        .art-edit{padding-top: 20px;}
        .art-edit h1{color: royalblue;}
        .art-edit table{width: 100%;margin: 5px auto;}
        .art-edit tr{}
        .art-edit th, td{border: none;height: 20px;padding: 2px;}
        .art-edit tr:hover{background: royalblue;}
        .art-edit form{text-align: left;padding: 20px 20px 20px 20px;border: 1px solid royalblue;border-radius: 5px;}
        .originalpic{}

        /* search */