body {
    margin: 0 auto;
    background-color: #000000;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}

img {
    max-width: 100%;
}



/* ---------------------------------------- H...P ------------------------------*/

h2 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 35px;
    letter-spacing: 2px;
    color: #ffffffff;
}

#titreHome {
    position: absolute;
    /* postulat de départ */
    top: 50%;
    left: 50%;
    /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%);
    /* décalage de 50% de sa propre taille */

}

#sousTitreHome {
    position: absolute;
    /* postulat de départ */
    top: 50%;
    left: 50%;
    /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%);
    /* décalage de 50% de sa propre taille */
}

h3 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 23px;
    letter-spacing: 2px;

}

h4 {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 10px;
}

p {
    font-size: 13px;
    letter-spacing: 2px;
    color: #ffffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;

}



/* ---------------------------------------- A ------------------------------*/

a {
    color: #ffffffff;

}



a:hover {
    text-decoration: none;
    color: white;
}





/*    PEETER FACE */



.peeter_face {
    max-width: 100%;
}

/* ---------------------------------------- GRID ------------------------------*/

article {
    margin: 5px;
}


/* GRID 3 COL */

.grid-sizer,
.grid-item {
    width: 33.3333%;
}

.grid-item {
    position: relative;
    height: 120px;
    float: left;
}

.grid-item a,
.grid-item .lienfake1 {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    background-color: #2A5A95;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.grid-item a,
.grid-item .lienfake2 {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    background-color: rgb(236, 86, 39);
    /* couleurs HEX #E85627   */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.grid-item--width33 {
    width: 33.33333%;
}





.grid-item--width66 {
    width: 66.666666%;
    clip-path: polygon(0% 2%, 9% 2%, 23% 4%, 37% 2%, 53% 3%, 64% 0%, 78% 6%, 81% 4%, 89% 0%, 96% 2%, 100% 1%, 100% 12%, 98% 19%, 98% 34%, 98% 52%, 99% 70%, 99% 84%, 99% 98%, 97% 100%, 88% 100%, 81% 99%, 73% 98%, 68% 93%, 61% 99%, 53% 98%, 45% 98%, 36% 95%, 26% 92%, 20% 91%, 11% 95%, 2% 99%, 1% 84%, 3% 69%, 1% 51%, 3% 31%);
}

.grid-item--width99 {
    width: 99.999999%;
    clip-path: polygon(0% 0%, 2% 14%, 2% 28%, 1% 42%, 0% 62%, 0% 78%, 0% 100%, 4% 98%, 9% 95%, 14% 98%, 19% 96%, 37% 96%, 65% 95%, 90% 98%, 95% 93%, 100% 97%, 99% 81%, 99% 71%, 99% 54%, 98% 37%, 99% 22%, 100% 1%, 78% 3%, 64% 6%, 46% 2%, 30% 3%, 15% 5%);
}






.grid-item--height1 {
    height: 280px;

}

.grid-item--height2 {
    height: 240px;


}

.grid-item--height3 {
    height: 160px;
    clip-path: polygon(0% 0%, 6% 17%, 0 98%, 89% 100%, 100% 95%, 94% 40%, 99% 0%);
}

.grid-item--height4 {
    height: 120px;

}

.grid-item--height5 {
    height: 140px;
    clip-path: polygon(0% 0%, 6% 17%, 0 98%, 89% 100%, 100% 95%, 94% 40%, 99% 0%);
}

.grid-item--height6 {
    height: 360px;
    clip-path: polygon(0% 0%, 6% 17%, 0 98%, 89% 100%, 100% 95%, 94% 40%, 99% 0%);
}




/* GRID 4 COL */

.grid-4col .grid-sizer,
.grid-4col .grid-item {
    width: 20%;
}

.grid-4col .grid-item--width20 {
    width: 20%;
}

.grid-4col .grid-item--width30 {
    width: 30%;
}


.grid-4col .grid-item--width40 {
    width: 40%;
}

.grid-4col .grid-item--width50 {
    width: 50%;
    clip-path: polygon(0% 0%, 8% 1%, 24% 3%, 38% 2%, 58% 1%, 80% 0%, 94% 2%, 100% 8%, 99% 21%, 100% 37%, 99% 56%, 98% 77%, 100% 93%, 100% 100%, 85% 98%, 70% 99%, 47% 96%, 15% 99%, 0% 99%, 3% 67%, 2% 27%);
}

.grid-4col .grid-item--width60 {
    width: 60%;
    clip-path: polygon(0% 2%, 9% 2%, 23% 4%, 37% 2%, 53% 3%, 64% 0%, 78% 6%, 81% 4%, 89% 0%, 96% 2%, 100% 1%, 100% 12%, 98% 19%, 98% 34%, 98% 52%, 99% 70%, 99% 84%, 99% 98%, 97% 100%, 88% 100%, 81% 99%, 73% 98%, 68% 93%, 61% 99%, 53% 98%, 45% 98%, 36% 95%, 26% 92%, 20% 91%, 11% 95%, 2% 99%, 1% 84%, 3% 69%, 1% 51%, 3% 31%);
}

.grid-4col .grid-item--width70 {
    width: 70%;
}


.grid-4col .grid-item--width80 {
    width: 80%;
}

.grid-4col .grid-item--width100 {
    width: 100%;
    clip-path: polygon(0% 0%, 2% 14%, 2% 28%, 1% 42%, 0% 62%, 0% 78%, 0% 100%, 4% 98%, 9% 95%, 14% 98%, 19% 96%, 37% 96%, 65% 95%, 90% 98%, 95% 93%, 100% 97%, 99% 81%, 99% 71%, 99% 54%, 98% 37%, 99% 22%, 100% 1%, 78% 3%, 64% 6%, 46% 2%, 30% 3%, 15% 5%);
}



/* GRID 2 COL */

.grid-2col .grid-sizer,
.grid-2col .grid-item {
    width: 50%;
}

.grid-2col .grid-item--width60 {
    width: 60%;

}

.grid-2col .grid-item--width40 {
    width: 40%;

}

.grid-2col .grid-item--width50 {
    width: 50%;
    clip-path: polygon(0% 0%, 8% 1%, 24% 3%, 38% 2%, 58% 1%, 80% 0%, 94% 2%, 100% 8%, 99% 21%, 100% 37%, 99% 56%, 98% 77%, 100% 93%, 100% 100%, 85% 98%, 70% 99%, 47% 96%, 15% 99%, 0% 99%, 3% 67%, 2% 27%);
}

.grid-2col .grid-item--width100 {
    width: 100%;
    clip-path: polygon(0% 0%, 2% 14%, 2% 28%, 1% 42%, 0% 62%, 0% 78%, 0% 100%, 4% 98%, 9% 95%, 14% 98%, 19% 96%, 37% 96%, 65% 95%, 90% 98%, 95% 93%, 100% 97%, 99% 81%, 99% 71%, 99% 54%, 98% 37%, 99% 22%, 100% 1%, 78% 3%, 64% 6%, 46% 2%, 30% 3%, 15% 5%);
}

/*------------------------------- HEADER ----------------------------------- */

header {
    padding: 15px;
}





/*------------------------------- PAGE ARTISTE ----------------------------------- */



.titreArtiste {
    text-align: center;
    font-size: 30px;
}

.textArtiste {
    text-align: left;
    padding: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0;
    font-size: 12px;
}

h3 {
    text-align: center;
    font-size: 23px;
    color: #ffffffff;
    letter-spacing: 1px;
}




/*------------------------------- PAGE MAISON D'éDITION ----------------------------------- */

#banner-edition1 {

    padding: 50px;


    /* couleurs HEX #E85627   */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.banner-atra {

    background-image: url(../images/maison_edition/atrabile_02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
    margin-top: 5px;


}

.banner-bulb {

    background-image: url(../images/maison_edition/bulb_02.jpg);
    border: 1px solid #E85627;
    background-repeat: no-repeat;
    margin-bottom: 5px;
    margin-top: 5px;
    background-size: cover;


}

.banner-drozo {

    background-image: url(../images/maison_edition/drozo_02.jpg);

    background-repeat: no-repeat;
    margin-bottom: 5px;
    margin-top: 5px;
    background-size: cover;


}

#banner-edition2 {

    padding: 30px;

    background-color: #2A5A95;
    /* couleurs HEX #E85627   */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}




.textEditionInfo {
    padding-top: 20px;
    padding-bottom: 10px;
    padding: 5px;
}

.cadre {
    border: 1px solid rgb(236, 86, 39);
}

.textEdition {
    text-align: left;
    padding: 5px;
    padding-top: 15px;
    padding-bottom: 15px;

}

/*------------------------------- PAGE événement ----------------------------------- */
.intro_page {
    text-align: center;
    font-size: 23px;
    padding-top: 30px;
    padding-bottom: 15px;
    color: #ffffffff
}

.image-even {
    padding-top: 5px;
}

.text_even {
    margin: 10px;
    margin-top: 35px;

}

.block-even {
    background-color: #2A5A95;
}

/*------------------------------- PAGE actu ----------------------------------- */

.info_actu2 {
    color: #000000;
    text-align: center;
    margin: 10px;
    font-size: 12px;
}


.info_actu3 {
    color: #000000;
    text-align: left;
    margin: 10px;
    font-size: 12px;
}

.info_actu {
    color: #000000;
    text-align: left;
    margin: 10px;
    font-size: 12px;
}

.date_actu {
    color: #000000;
    margin: 10px;
    font-size: 10px;
}

.text_actu {
    padding: 20px;
}

.text_actu h3 {
    color: #ffffffff;
    margin-bottom: 10px;
    font-size: 10px;
    text-align: left;
}

.text_roger .date_actu {
    color: #ffffffff;
    margin: 5px;

}


.text_roger {
    margin: 25px;
    color: #ffffffff;


}

/*------------------------------- HISTOIRE ----------------------------------- */

.img_hist {

    margin: 0;
    padding-bottom: 15px;
}


.textHistoire {
    text-align: left;
    margin: 0;
    margin: 5px;
    padding-bottom: 15px;
    font-size: 12px;

}


/*------------------------------- MAP----------------------------------- */

.infoLieux span {
    color: #000000;
    text-align: left;
    margin: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase;
}

#infoLieux span {
    color: #000000;
    text-align: left;
    margin: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase;



}

#infoLieux .article-ecole {

    font-size: 10px;
}

#infoLieux {

    position: absolute;
    /* postulat de départ */
    top: 50%;
    left: 50%;
    /* à 50%/50% du parent référent */
    transform: translate(-50%, -50%);
    /* décalage de 50% de sa propre taille */
}


.infoLieuxNull {
    text-transform: uppercase;
    color: #000000;
    font-size: 15px;
    text-align: center;
    font-weight: 700;
    margin-top: 15px;

}


/*------------------------------- FOOTER----------------------------------- */




.logo-footer {

    padding-top: 80px;

    text-align: center;

}



.text-footer p {
    font-size: 9px;
}

.logo-footer p {
    font-size: 9px;
    letter-spacing: 3px;

}

.logo-footer img {
    width: 30%;
}


/*------------------------------- CONTACT ----------------------------------- */

.btn {
    text-transform: uppercase;
    font-size: 1em;
    background-color: #E85627;
    border: none;
    font-weight: 700;
    letter-spacing: 1px;

}

.btn:active {
    background-color: #2A5A95;
}


.form-control {
    background-color: #E85627;
    border: none;



}

textarea:active {
    background-color: #E85627;
}

.col-md-offset-3 {
    padding-top: 30px
}


.form-group {
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffffff;
    padding-top: 15px;
}

/*  -----------------------------CSS MASKING ----------------------------------*/

/*-- mask horizontale--*/

.svg-cadre01-mask {


    clip-path: polygon(0% 2%, 9% 2%, 23% 4%, 37% 2%, 53% 3%, 64% 0%, 78% 6%, 81% 4%, 89% 0%, 96% 2%, 100% 1%, 100% 12%, 98% 19%, 98% 34%, 98% 52%, 99% 70%, 99% 84%, 99% 98%, 97% 100%, 88% 100%, 81% 99%, 73% 98%, 68% 93%, 61% 99%, 53% 98%, 45% 98%, 36% 95%, 26% 92%, 20% 91%, 11% 95%, 2% 99%, 1% 84%, 3% 69%, 1% 51%, 3% 31%);
}

.svg-cadre02-mask {
    clip-path: polygon(0% 2%, 9% 2%, 23% 4%, 37% 2%, 53% 3%, 64% 0%, 78% 6%, 81% 4%, 89% 0%, 96% 2%, 100% 1%, 100% 12%, 98% 19%, 98% 34%, 98% 52%, 99% 70%, 99% 84%, 99% 98%, 97% 100%, 88% 100%, 81% 99%, 73% 98%, 68% 96%, 61% 99%, 53% 98%, 45% 98%, 36% 95%, 26% 92%, 20% 91%, 11% 95%, 2% 99%, 1% 84%, 3% 69%, 1% 51%, 1% 29%);
}



/*-- mask vertical--*/
.svg-cadre06-mask {
    clip-path: polygon(0% 1%, 28% 2%, 67% 1%, 85% 0, 100% 0, 98% 19%, 98% 28%, 97% 44%, 97% 58%, 99% 68%, 98% 82%, 98% 92%, 96% 99%, 53% 100%, 25% 98%, 4% 98%, 4% 83%, 0% 59%, 2% 39%, 5% 19%);
}

.svg-cadre03-mask {

    clip-path: polygon(0% 0%, 6% 17%, 0 98%, 89% 100%, 100% 95%, 94% 40%, 99% 0%);
}

.svg-cadre05-mask {

    clip-path: polygon(0% 0%, 10% 2%, 22% 2%, 30% 1%, 41% 0%, 61% 1%, 67% 3%, 79% 3%, 90% 1%, 100% 1%, 99% 5%, 97% 13%, 100% 31%, 97% 51%, 100% 62%, 99% 79%, 97% 86%, 99% 100%, 46% 100%, 40% 98%, 29% 98%, 14% 98%, 4% 100%, 2% 94%, 6% 68%, 3% 57%, 6% 37%, 2% 16%);
}

.svg-cadre04-mask {

    clip-path: polygon(6% 0%, 3% 8%, 0% 20%, 6% 47%, 2% 74%, 0% 100%, 59% 97%, 100% 100%, 95% 89%, 94% 72%, 97% 62%, 95% 48%, 96% 30%, 95% 13%, 100% 0%, 61% 4%, 36% 1%);
}