/*
======================================================================================

    @ stylesheet.css
    @ STYLESHEET
    @ CSS by Intronium - Intronium's Lab - https://introniumlab.fr/

======================================================================================
*/
/* DEFAULTS */

*{font-family:'Lato', Helvetica, Arial, sans-serif;position:relative;}
*:focus{outline-style:none;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,p,figure,figcaption,button{padding:0;margin:0;font-size:inherit;color:inherit;background:transparent;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{text-decoration:none;color:inherit;cursor:pointer;}
input[type="submit"]{cursor:pointer;}
ol,ul{list-style:none;margin:0;padding:0;}
strong{color:#004bdf;}
.clear{clear:both;}
.clear-right{clear:right;}
.clear-left{clear:left;}
.pb64{padding-bottom:64px;}

/* :: pseudo elements */

/* KEYFRAMES */

.animate-opacity{-webkit-animation:opac .5s;animation:opac .5s}
@-webkit-keyframes opac{from{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"} to{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}}
@keyframes opac{from{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"} to{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}}


.ct{width:1200px;max-width:95%;margin:auto;}


/********** PACK **********/

/* TRANSITIONS */

.back, .portal .selection .licence,
.portal .selection .licence .check, .portal .selection .licence .check i,
.licence-home .selection .option i,
.day, .add, .devoirs .container .content form span,
#td1, #td2 {
    -webkit-transition:.3s;
    transition: .3s;
}

/* USER-SELECT */

/* FLEX */

.portal .selection,
.portal .selection .licence, .portal .selection .licence .check,
.licence-home .selection,
.container,
#td1, #td2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


/********** * **********/

html{width:100%;height:100%;background:#f6f4f2;color:#292b35;overflow-x:hidden!important;}
body{width:100%;min-height:100%;overflow-x:hidden!important;}

.loading{top:50px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}

.fa-arrow-left{z-index:10;}

.active{border:3px solid #004bdf!important;}

h1:after{content:"";display:block;margin:5px auto 0;width:80px;height:5px;background:#69c7ca;}

.back{position:absolute;top:25px!important;left:25px;border:2px solid #292b35;padding:10px 13px;border-radius:50%;}
.back:hover{color:#f6f4f2;background:#292b35;}

input, textarea, select{margin-bottom:10px;}
input:focus, textarea:focus, select:focus{border:1px solid #004bdf;box-shadow:inset 0px 0px 2px 1px #004bdfc4;}
input, textarea{padding:5px;box-shadow:none;border:1px solid #292b35;}
textarea{max-width:450px;max-height:170px;}
input[type="submit"]{margin-top:10px;padding:5px 10px!important;border-radius:5px;box-shadow:2px 2px 2px rgba(0,0,0,0.4)!important;}

/********** Portal **********/

.portal{padding-top:120px;text-align:center;}
.portal h1{font-size:4em;font-weight:900;}

    @media all and (max-width: 631px) {
        .portal{padding-top:60px;}
    }
    @media all and (max-width: 400px) {
        .portal h1{font-size:3em;}
    }

.portal .selection{-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-top:100px;}
.portal .selection .licence{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;width:250px;height:250px;background:#e4e4e4;border-radius:10px;border:5px solid #69c7ca;margin:20px;cursor:pointer;box-shadow:3px 2px 7px rgba(0,0,0,0.4);}
.portal .selection .licence h3{color:#727272;font-size:1.5em;font-weight:900;}
.portal .selection .licence:hover .check{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
.portal .selection .licence:hover .check i{margin-bottom:0;}
.portal .selection .licence .check{position:absolute;top:0;border-radius:5px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";width:100%;height:100%;background:rgba(0,0,0,0.65);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;}
.portal .selection .licence .check i{color:#fff;padding:20px;border:2px solid #fff;border-radius:50%;margin-bottom:155px;}

    @media all and (max-width: 631px) {
        .portal .selection{padding-top:60px;}
        .portal .selection .licence{width:80%;}
    }


/********** Licence Home **********/

.licence-home{padding-top:120px;text-align:center;}
.licence-home h1{font-size:4.7em;font-weight:900;}

    @media all and (max-width: 631px) {
        .licence-home{padding-top:80px;}
    }
    @media all and (max-width: 400px) {
        .licence-home h1{font-size:3.5em;}
    }

.licence-home .selection{-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-top:100px;}
.licence-home .selection .option{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;width:250px;height:250px;background:#e4e4e4;border-radius:10px;border:5px solid #69c7ca;margin:20px;cursor:pointer;box-shadow:3px 2px 7px rgba(0,0,0,0.4)}
.licence-home .selection .option:hover i{color:#69c7ca;text-shadow:2px 2px 2px rgba(0,0,0,0.4);}
.licence-home .selection .option h2{font-size:1.8em;font-weight:900;padding:30px 0;}
.licence-home .selection .option h2:after{content:"";display:block;margin:5px auto 0;width:40px;height:5px;background:#69c7ca;}
.licence-home .selection .option i{color:#727272;}

    @media all and (max-width: 631px) {
        .licence-home .selection{padding-top:60px;}
        .licence-home .selection .option{width:80%;}
    }


/********** Devoirs / Exposés **********/

.devoirs{padding-top:100px;text-align:center;}
.devoirs h1{font-size:4.3em;font-weight:900;}

    @media all and (max-width: 631px) {
        .devoirs{padding-top:80px;}
    }
    @media all and (max-width: 400px) {
        .devoirs h1{font-size:3.5em;}
    }

.devoirs .container{-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;padding-top:100px;}
.devoirs .container .jours{width:400px;}
.devoirs .container .jours .day{width:85%;min-height:70px;background:#e4e4e4;border-radius:5px;border:3px solid #69c7ca;margin:20px auto;text-align:center;cursor:pointer;box-shadow:3px 2px 7px rgba(0,0,0,0.4)}
.devoirs .container .jours .day:hover{border-right:3px solid #004bdf;border-left:3px solid #004bdf;}
.devoirs .container .jours .day h3{padding:15px 0;font-weight:900;font-size:2em;}
.devoirs .container .jours .add{border:3px solid #004bdf;border-radius:50%;padding:15px;width:30px;margin:auto;background:#004bdf;color:#e4e4e4;box-shadow:3px 2px 7px rgba(0,0,0,0.4);cursor:pointer;}
.devoirs .container .jours .add:hover{color:#004bdf;background:#e4e4e4;}
.devoirs .container .content{width:700px;text-align:left;}
.devoirs .container .content .consigne{padding:15px;}
.devoirs .container .content .consigne h2{font-size:2.2em;font-weight:900;padding-bottom:5px;}
.devoirs .container .content .consigne h2:after{content:"";display:block;margin:5px 0;width:60px;height:4px;background:#69c7ca;}
.devoirs .container .content .consigne p{padding-bottom:10px;}

    @media all and (max-width: 768px) {
        .devoirs .container{padding-top:60px;display:block;}
        .devoirs .container .jours{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;}
        .devoirs .container .jours .day{width:200px;}
        .devoirs .container .jours .add{z-index:10;position:absolute;bottom:-65px;}
        .devoirs .container .content{padding-top:80px;}
    }

.devoirs .container .content form{padding:15px;}
.devoirs .container .content form h2{font-size:2.1em;font-weight:900;padding-bottom:20px;text-align:center;}
.devoirs .container .content form h2:after{content:"";display:block;margin:5px auto 0;width:40px;height:4px;background:#69c7ca;}
.devoirs .container .content form h3{font-size:1.6em;font-weight:900;padding-bottom:10px;}
.devoirs .container .content form h3:after{content:"";display:block;margin:5px 0;width:30px;height:4px;background:#69c7ca;}
.devoirs .container .content form span{padding:0 10px;border:1px solid #292b35;background:#292b35;color:#f6f4f2;border-radius:50%;cursor:pointer;}
.devoirs .container .content form span:hover{background:#f6f4f2;color:#292b35;}

    @media all and (max-width: 768px) {
        .devoirs .container .content{width:100%;}
    }
    @media all and (max-width: 425px) {
        textarea{max-width:100%;}
    }

.modal-help{text-align:left;z-index:10;padding-top:100px;position:fixed;display:none;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";top:0;left:0;width:100%;height:100%;overflow:auto;background:#0000004d;}
.modal-help .modal-content{background:#e4e4e4;margin:auto;padding:20px;border:1px solid #000;width:500px;}
.modal-help .modal-content h2{font-size:2.1em;font-weight:900;padding-bottom:20px;}
.modal-help .modal-content h2:after{content:"";display:block;margin:5px 0;width:40px;height:4px;background:#69c7ca;}
.modal-help .modal-content i{z-index:20;cursor:pointer;position:absolute;top:10px;right:15px;}

    @media all and (max-width: 768px) {
        .modal-help .modal-content{width:75%;}
    }


/********** Exposés **********/

#td1:hover,#td2:hover{color:#69c7ca;text-shadow:2px 2px 2px rgba(0,0,0,0.4);}

.matiere{padding:0 10px;}

    @media all and (max-width: 768px) {
        .matiere{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
    }

.expose{padding:15px;}
.expose h2{font-size:1.5em;font-weight:900;padding-bottom:5px;}
.expose h2:after{content:"";display:block;margin:5px 0;width:60px;height:4px;background:#69c7ca;}
.expose h4{color:#727272;font-size:1.2em;font-weight:bold;padding-bottom:10px;}
.expose a{padding:10px;text-decoration:underline;}