body {
    margin: 0;
    padding: 0;

    /* make it look decent enough */
    background: #333333;
    color: #fff;
    font-family: "Avenir Next", "Avenir", sans-serif;
}

/* HEADER */
.logo {

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;

}

/* BREADCRUMB*/


/*HEADER*/
.site-header {
    background: url(../image_site/accueil_image.jpg) no-repeat center center;
    background-size: cover;
    padding-top: 10px;
    color: white;
    min-height: 100vh;


}

$breadcrumb-divider: none;
}

.site-header2 {
    background-size: cover;
    padding-top: 10px;
    color: white;
    min-height: 100vh;



}

.col-logo {
    text-align: center;
    padding-top: 2px;

}

.logo-up {
    width: 30%;
    position: relative;
    top: 10%;
}

.col-search {
    padding-top: 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}



.header-right h2 {
    font-size: 3.5em;
}

.header_right h2,
.header_right h3 {
    font-size: 4.5em;
}

.site-header h1 a {
    display: block;
    width: 150px;
    height: 50px;
    background: ;
    background-size: contain;
    text-indent: -50000px;
    font-size: 2.5em;
}

.header_left {
    text-transform: uppercase;
}

/*FIN HEADER */
/*SEARCH*/
form {
    position: relative;
    top: 54%;
    left: 80%;
    transform: translate(-0%, -50%);
    transition: all 1s;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}

input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    ;
    height: 42.5px;
    line-height: 30px;
    outline: 0;
    border: 0;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
}

.fa {
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #333333;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

form:hover {
    width: 200px;
    cursor: pointer;
}

form:hover input {
    display: block;
}

form:hover .fa {
    background: #333333;
    color: white;
}

/*FIN SEARCH*/

/*NAVIGATION*/
li {
    text-align: center center;
    position: center;
}

.nav-left ul {

    list-style-type: none;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;



}

.prog {
    margin-right: 5em;
    border-bottom: 5px solid;
    text-transform: uppercase;
    padding: 0 15px;


}

.billet {
    margin-right: 5.5em;
    border-bottom: 5px solid;
    text-transform: uppercase;
    padding: 0 15px;

}

/*MENU*/
.text-burger a:hover {
    background-color: #ffffff;
    color: #333333;
    transition: 1s;
    padding: 10px 100px;

}

.text-burger a {
    text-decoration: none;
    color: #ffffff;
    background-color: #333333;
    font-size: 0.9em;
    padding: 10px 40px;
}

.logo {
    width: 2.5em;
    padding: 10px;

}

.logo-menu {
    padding: 10px;
}


.langue:last-of-type {
    border-right: 0;
}

#menuToggle {
    display: block;
    position: fixed;
    top: 50px;
    right: 50px;

    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
}

#menu .second_level-nav a {
    font-size: 0.5em;

}

#menu .second_level-nav {
    font-size: 0.5em;
    border-top: solid 1px black;

}

.border-col {
    border-right: 2px solid black;
}


li.home {
    text-align: center center;
    font-size: 50px;

}

ul {
    margin: 0;
    padding: 0px;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .col,
    > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

menu ul,
menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu .nav-link {
    padding: 0;
    margin: 0;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */

    -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: white;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
    position: fixed;
    width: 100vw;
    margin: 0;
    padding: 50px;
    padding-top: 125px;
    top: 0;
    right: -0px;
    min-height: 100vh;
    font-size: 2em;

    background: rgb(139, 141, 143);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
    padding: 35px 0;
    font-size: 22px;
    color: black;
    text-align: center;
    list-style: none;
    text-decoration: none;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ div {
    transform: scale(1.0, 1.0);
    opacity: 1;
}

/* FIN BURGER MENU */


/* SLIDER*/

.slick-slide {
    min-height: 60vh;
    opacity: 100%;
}

.slider-1 {

    background-image: url(../image_site/slider_01.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;


}

.slider-2 {

    background-image: url(../image_site/slider_02.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.slide-3 {
    background-image: url(../image_site/slider/boutique.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.slide-1 {

    background-image: url(../image_site/slider/salle_02.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    background-position: center center;


}

.my-slider {}

.slide-2 {

    background-image: url(../image_site/slider/cafe_02.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* FIN SLIDER*/

/* SERVICE*/

.text_anni {
    background-color: rgb(229, 52, 39);
    margin-left: -110px;
    padding: 10px;
    text-transform: uppercase;


}

.titre-service {}

.text_seminaire {
    background-color: rgb(117, 178, 111);
    padding: 10px;
    text-align: right;



}

.text_blog {
    background-color: rgb(63, 77, 114);
    padding: 10px;
    margin-left: -35px;
}

.service2 {}

.blog {
    width: 92%;

}

.service3 {}

.lien-gauche {
    color: #ffffff;
    background-color: #333333;
    margin-left: -10px;
    margin-right: 0px;
    padding-top: 5px;


}

.lien-droite {
    color: #ffffff;
    background-color: #333333;
    margin-left: 170px;
    margin-right: -10px;
    padding-top: 5px;


}

/*FIN SERVICE */
/*PRESENTATION*/
.titre-presen {
    background-color: #fff;
    margin-right: 1580px;
    padding: 10px;
    color: #333333;
    text-transform: uppercase;
}

.chiffre {
    padding-left: 30px;
    font-size: 16px;
}

.historique {
    padding-top: 95px;
    margin-left: -50px;
}

/*NEWS*/
.pagination {
    padding-top: 25px;
}

.titre-news2 {
    background-color: #fff;
    padding: 10px;
    color: #333333;
    text-transform: uppercase;
    margin: 0 auto;
}

/* BIBLOTHéQUE*/
.biblio1 {
    color: #333333;

}

.biblio_histoire {
    background-color: #ffffff;
    padding: 10px;
}

.image_biblio {
    width: 100%;

}

.image_bibi {
    width: 30%;
}

.texte_horaire {
    background-color: #fff;
    margin: 100px;
    margin-bottom: 50px;
    padding: 30px;
    text-align: center center;
}


/* NEWSLETTER*/

.newsletter {
    padding: 40px 0;
    background: #333333;
}

.newsletter .content {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.newsletter .content h2 {
    color: #fff;
    margin-bottom: 20px;
}

.newsletter .content .form-control {
    height: 50px;
    border-color: #ffffff;
    border-radius: 0;
}

.newsletter .content.form-control:focus {
    box-shadow: none;
    border: 2px solid #243c4f;
}

.newsletter .content .btn {
    margin-left: 10px;
    min-height: 50px;
    border-radius: 0;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 600;
}

/* FIN NEWSLETTER*/
/* LOGO */
.logo_reseau {
    background-color: #717375;
    padding: 25px;
}

/* NEWS*/

.info-expo1 {
    padding-top: 115px;


}

.info-expo2 {
    padding-top: 100px;
    0000001111122223333...... 4454561-109 + 66656554544414144555669988777
}

.info-expo3 {
    padding-top: 70px;


}


.conf {
    background-color: #13406A;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 20px;
    text-align: right;





}

.anime {
    background-color: #796583;
    padding-left: 10px;
    margin-left: -200px;
    margin-right: 193px;
    padding-bottom: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-top: 43px;
}

.expo {
    background-color: #6e0f15;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: -200px;
    padding-left: 10px;
    margin-right: 193px;
}

.titre-news {
    background-color: #333333;
    padding: 10px;
    margin-left: -10px;
    margin-right: 150px;
    font-size: 1.4em;
    text-transform: uppercase;

}

.titre-news1 {
    background-color: #333333;
    padding: 10px;
    margin-right: -20px;
    margin-left: 110px;
    font-size: 1.4em;
    text-transform: uppercase;



}

/* FIN NEWS */
/* BANNER*/
.banner2 {
    width: 1000px
}


.eca {
    width: 100%;

}

.asb {
    width: 100%;
}

/* SERVICE*/
/* LOGO RESEAU*/
.logo {
    width: 60px;
}

.logo1 {
    width: 60px;
    align-content: center center;
}

.titre_logo h3 {
    text-align: center;
    color: #fff;
    font-family: Staatliches Regular;
}

/*FOOTER*/
.footer {
    padding: 25px;
}

.ville-ge {
    width: 150px
}