:root {
    --BN_blue: #283069;
    --BN_lblue: #BFB5E0;
    --BN_orange: #EA9C1A;
    --BN_red: #D5263E;
    --aff_purple: #614d76;
}
@font-face {
    font-family: main_font;
    src: url("../webfonts/Roboto-Regular.ttf");
}
@font-face {
    font-family: title_font;
    src: url("../webfonts/DarkerGrotesque-Bold.ttf");
}
body {
    font-family: main_font !important;
}
h1 {
    font-family: title_font;
    color: white;
}
.body {
    background-image: url("../img/tmp.png");
    background-attachment: fixed;
    background-position: center;
    width: 100%;
}
.home_body {
    background-image: url("../img/background-h.png");
    background-attachment: fixed;
    background-position: center;
    width: 100%;
}
.container {
    margin-top: 5em;
}

nav {
    background-color: var(--BN_blue);
}

@media (min-width: 768px) {
    nav {
        font-size: 1.75em !important;
    }
    .navbar-brand {
        font-size: 1.5em !important;
    }
}
nav a {
    color: #ffffff;
    text-decoration: none;
}
nav a:hover {
    text-decoration: none;
    color: #ffffff;
}
.social-icons {
    color: var(--BN_lblue);
}
.menu {
    float: right;
    flex-direction: row !important;
}
.main_menu li {
    padding-left: 1em;
    padding-right: 1em;
}
.main_menu li:hover {
    font-weight: bold;
}
@media (max-width: 768px) {
    .menu {
        margin: auto;
    }
}
.menu li {
    padding-right: 1em;
    color: #ffffff;
}
.formation div, .agora div, .part div, .commun div {
    min-height: 75px;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    border-radius: 5px;
}
.formation div span, .agora div span, .part div span, .commun div span {
    margin: auto;
}
.formation div {
    background-color: var(--BN_orange);
    color: var(--BN_blue);
    box-shadow: 5px 2.5px 1.75px #484872;
}
.agora div {
    background-color: var(--BN_red);
    color: white;
    box-shadow: 5px 5px 2.5px #484872;

}
.commun div{
    background-color: var(--BN_lblue);
    color: var(--BN_blue);
    box-shadow: 5px 5px 2.5px #484872;
}
@media (min-width: 768px) {
    .formation, .agora, .part, .commun{
        padding-right: 0.5em !important;
        padding-left: 0.5em !important;
    }
}
@media (max-width: 768px) {
    .formation, .agora, .part, .commun {
        padding-right: 0;
        padding-left: 0;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
}
.row {
    margin-bottom: 20px;
}

h1 {
    padding-top: 2.5em;
}
.heure {
    padding: 0 !important;
    color: white;
}
.contenue {
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
}
.affiche_box {
    background: var(--aff_purple);
    border-radius: 25px;
    text-align: center;
    padding: 1em 1em 1.5em 1em;
    text-shadow: 2.5px 2.5px 5px #493a59;
}
.affiche_box_intro {
    color: white;
    width: 100%;
}
.affiche_box_theme {
    width: 100%;
    color: var(--BN_orange);
    line-height: 1em;
    font-family: title_font;
}
.date {
    color: white;
    text-align: center;
}
.home_button{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.5em;
    font-weight: bold;
    margin-bottom: 6em;
}
.button_h div {
    background-color: var(--BN_orange);
    color: var(--BN_blue);
    box-shadow: 5px 2.5px 1.75px #484872;
}
.button_h div {
    height: 55px;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    border-radius: 5px;
}
.button_h div span {
    margin: auto;
}
@media (min-width: 768px) {
    .affiche_box_theme {
        font-size: 5.25em;
    }
    .affiche_box {
        margin-top: 7.5em;
    }
    .affiche_box_intro {
        font-size: 2.5em;
    }
    .container {
        padding-bottom: 4em;
    }
    .date {
        padding-top: 2em;
        font-size: 3.33em;
    }
}
@media (max-width: 768px) {
    .affiche_box_theme {
        font-size: 3em;
    }
    .affiche_box {
        margin-top: 11em;

    }
    .affiche_box_intro {
        font-size: 1.5em;
    }
    .date {
        padding-top: 0.5em;
        font-size: 2.5em;
    }
    .button_h {
        margin: auto;
        padding-bottom: 1em;
    }
}
footer {
    background: #201f1f;
    height: 75px;
    text-align: center;
    padding: 5px;
}
footer a {
    color: white;
}
@media (min-height: 720px) {
    footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
    }
}

.copy {
    margin-top: revert !important;

}
.prog {
    margin-bottom: 6em;
}
.about {
    background: var(--aff_purple);
    border-radius: 25px;
    text-align: center;
    padding: 0.75em 4em 4em 4em !important;
    color: white;
    margin-bottom: 6em;
}
.title {
    color: var(--BN_orange);
    font-family: title_font;
    font-size: 3rem;
    line-height: 3em;
}
.parts {
    margin-bottom: 6em;
}
.part-intro {
    background: var(--aff_purple);
    border-radius: 25px;
    text-align: left;
    padding: 2em !important;
    color: white;
}
.part {
    padding-bottom: 15px;
    padding-top: 15px;
    text-align: center;
}
.part_img {
    background: white;
}
@media (min-width: 768px) {
    .about, .part-intro {
        margin-top: 10em;
    }
}
@media (max-width: 768px) {
    .about, .part-intro {
        margin-top: 12em;
    }
}
.cluedo, .tbr-brei {
    margin: 0 !important;
    padding: 0.3em !important;
}
.btn {
    color: white !important;
    background-color: var(--BN_blue) !important;
    border-color: var(--BN_blue) !important;
}
.btn:hover {
    color: black !important;
    background-color: var(--BN_lblue) !important;
    border-color: var(--BN_lblue) !important;
}