/* BANDEAU */
#bandeau {position: relative; height: 350px; width:100%; background-size: cover!important; background: url("../images/bandeau_revue.jpg") center center;}

#documents {width: 1170px; margin: 40px auto; font-family: 'DINPro-Light', Sans-Serif;}
#documents h1 { font-size: 55px; font-size: 5.5rem; line-height: 55px; color: #53eac4; text-transform: uppercase; font-weight: lighter; margin-bottom: 0;}
#documents .categorie { font-size: 30px; font-size: 3.0rem; color: #afa89a; text-transform: uppercase; font-weight: lighter; padding-bottom: 15px; background: url("../images/trait_menu.jpg") no-repeat left 100%;}
#documents .filtre {padding: 30px 10px;}
#documents .filtre p {display: inline-block; text-transform: uppercase; font-size: 16px; font-size: 1.6rem; font-weight: lighter; color: #afa89a;}
#documents .filtre select { margin-left: 20px; padding: 8px 40px; width: 250px; background-color: #50e9c3; color: #ffffff; font-size: 16px; font-size: 1.6rem; font-weight: lighter; border: none; text-transform: uppercase;}
#documents .filtre select option {padding: 8px 40px; width: 250px; background-color: #50e9c3; color: #ffffff; font-size: 16px; font-size: 1.6rem; font-weight: lighter; border: none; text-transform: uppercase;}
#documents .document {position: relative; float: none; width: 100%; margin-left: 0px; margin-bottom: 0;border: none; transition: 2s;}
#documents .document .document_illustration{display: none;}
#documents .document .document_illustration img{width: 260px;}
#documents .document:first-child {margin-left: 0px;}

#documents .document:hover .document_illustration{opacity: 0.1;}
.document .document_description {width: 100%;  position: relative; text-decoration: none;}
.document .document_description a {text-decoration: none;}
.document .document_description .document_titre { padding: 10px; text-align: left; font-family: 'DINPro-Light', Sans-Serif; text-transform: uppercase; font-size: 16px; font-size: 1.6rem; color: #808285;}
.document .document_description .document_lien { width: 260px; top: 125px; padding-top : 30px; text-align: center; font-family: 'DINPro-Light', Sans-Serif; text-transform: uppercase; font-size: 16px; font-size: 1.6rem; color: #808285;}
.document:hover .document_description .document_titre {color:#4bdeb9}
.document:hover .document_description .document_lien {color: #4bdeb9;}
.document:hover .document_description .document_titre, .document:hover .document_description .document_lien {display: block; }

.accroche{padding:15px; 10px; font-size: 1.6rem;}
/**
 * Responsive Design
 */

/* Grand écran */
@media screen and (min-width: 1430px) {
    #documents .document:nth-child(4n+1) {clear: both; margin-left: 0;}
}

/* Ecran classique / Tablette paysage */
@media screen and (min-width: 980px) and (max-width: 1429px) {

    #documents {width: 940px;}

    .titre_page .bloc_right {height: 130px; padding-top: 33px;}

    #documents .document:nth-child(3n+1) {clear: both; margin-left: 0;}
    #documents .document {width: 286px; }
    #documents .document .document_illustration img {width: 286px; height: auto;}
    .document .document_description .document_lien {width: 286px;}
}

/* Tablette portrait */
@media screen and (min-width: 764px) and (max-width: 979px) {
    #bandeau {height: 218px;}
    #bandeau .icones {top: 10%;}
    .titre_page {padding-left: 50px; padding-top: 55px;}
    .titre_page .bloc_right {height: 106px; padding-top: 22px;}
    .titre_page h1 {font-size: 30px; font-size: 3.0rem;}

    #documents {width: 700px;}
    #documents h1 { font-size: 45px; font-size: 4.5rem; line-height: 45px;}
    #documents .categorie { font-size: 25px; font-size: 2.5rem;}
    #documents .document:nth-child(3n+1) {clear: both; margin-left: 0;}
    #documents .document {width: 206px; }
    #documents .document .document_illustration img {width: 206px; height: auto;}
    .document .document_description .document_lien {width: 206px;}

}

/* Mobile */
@media screen and (max-width: 763px) {
    #bandeau {height: 218px;}
    #bandeau .icones {display: none;}

    .titre_page {padding-left: 18px; padding-top: 55px;}
    .titre_page .bloc_right {height: 106px; padding-top: 22px; width: 250px;}
    .titre_page h1 {font-size: 25px; font-size: 2.5rem;}
    .titre_page .categorie {font-size: 18px; font-size: 1.8rem;}

    #documents {width: 300px;}
    #documents h1 { font-size: 30px; font-size: 3.0rem; line-height: 30px;}
    #documents .categorie { font-size: 20px; font-size: 2.0rem;}
    #documents .document {width: 300px;  margin-left: 0;}
    #documents .document .document_illustration img {width: 300px; height: auto;}
    .document .document_description .document_lien {width: 300px;}
    #documents .filtre p {display: block; text-align: center; padding-bottom: 15px;}


}