:root{
    --bleu-200: #2b6cb0;
    --gray-200: #f7fafc;
    --gray-400: #cbd5e0;
    --gray-600: #718096;
    --gray-800: #2d3748;
    --fg-white: #fff;
    --fg-black: #000;

}
html body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    color: #333;
}
.text-8xl {
    font-size: 4rem;
    line-height: 1;
    font-weight: 200;
}
.text-7xl {
    font-size: 3.75rem;
    line-height: 1;
    font-weight: 200;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-md {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.font-bold {
    font-weight: 700;
}
.font-regular {
    font-weight: 400;
}

/**
 * The borders 
 */


.border-bleu-200 {
    border-color: var(--bleu-200) !important;
}
.border-gray-200 {
    border-color: var(--gray-200) !important;
}
.border-gray-400 {
    border-color: var(--gray-400) !important;
}

.border-b-1{
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.border-b-2 {
    border-style: solid;
    border-bottom-width: 2px;
}


/** This custom theming system can be used to create your own framework according to design trends */
[class^="bg-"] {
    /* Styles for elements with class names starting with "bg-" */
    /* Doesn't work */
}
.text-danger{
    color: #e3342f;
}
.text-success{
    color: #38c172 !important;
}
.bg-success{
    background-color: #38c172 !important;
    color: #fff !important;
}
.text-bleu-200 {
    color: var(--bleu-200) !important;
}
.text-gray-200 {
    color: var(--gray-200) !important;
}
.text-gray-400 {
    color: var(--gray-400) !important;
}
.text-gray-600 {
    color: var(--gray-600) !important;
}
.text-gray-800 {
    color: var(--gray-800) !important;
}
.bg-bleu-200 {
    background-color: var(--bleu-200) !important;
    color: var(--fg-white) !important;
    transition: filter 0.3s;
}
.bg-gray-200 {
    background-color:  var(--gray-200) !important;
    color: var(--fg-black) !important;
    transition: filter 0.3s;
}
.bg-gray-400 {
    background-color: #cbd5e0 !important;
    color: var(--fg-black) !important;
}

/** It will be a really cool thing to use dynamically generated theme using those simple design principles */
.btn.bg-bleu-200:hover,
.btn.bg-gray-200:hover {
    filter: brightness(85%);
}

.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}

/*
* Columns
*/
.row{
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,

.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 576px) {
    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .col-sm-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-sm-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*
* Form
*/
.form-group{
    display: flex;
    flex-direction: column;
}

.form-group label{
    font-size: .9em;
}

.form-group input, .form-group select{
    padding: .3em;
    border: 1px solid #ccc;
    background: var(--gray-200);
}

/*
* The buttons
*/
.btn{
    display: inline-block;
    padding: .5em 1em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: .25em;
    background-color: #007bff;
    color: #fff;
    font-size: small;
}

.btn-primary{
    background-color: #007bff;
    border-color: #007bff;
}

/**
 * The container
 */
.container{
}

/**
 * The spacing
 */
.my-0{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.my-2{
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.mt-2{
    margin-top: .5rem;
}
.px-2{
    padding-left: .5rem;
    padding-right: .5rem;
}
.py-1{
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.py-2{
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.py-3{
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.pl-1{
    padding-left: .25rem;
}
.pl-2{
    padding-left: .5rem;
}
.p-1{
    padding: .25rem;
}
.p-2{
    padding: .5rem;
}

/** Responsive spacing **/
.px-sm-2{
    padding-left: .5rem;
    padding-right: .5rem;
}
@media (min-width: 576px) {
    .px-sm-2{
        padding-left: .0rem;
        padding-right: .0rem;
    }
}

/**
 * Remove some margin on headings
 */
h1, h2, h3, h4, h5, h6, p{
    margin: 0px;
}

/**
 * The badge
 */
.badge{
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

/**
 * The 'display-1' style class
 */
.display-1{
    font-family: 'Bebas Neue', sans-serif !important;
}
/**
 * The uppercase style
 */
.uppercase{
    text-transform: uppercase;
}

/**
 * The navigation menu
 */

.navbar{
    position: relative;
    display: flex;
    flex-direction: column;
}

.navbar .branding{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    flex-basis: 100%;
}

.navbar .mobile-toggle button{
    position: absolute;
    top: 0px;
    right: 0px;
    border: none;
    background: transparent;
    height: 50px;
    width: 50px;
    display: flex;
    align-items:center;
    justify-content: center;
    transition: background 0.3s;
}

.navbar .mobile-toggle button:hover{
    background: var(--gray-200);
}

.navbar .branding h1{
    font-size: inherit;
}

.navbar .nav{
    flex-basis: 100%;
    max-height: 0px;
    transition:  max-height 0.3s;
    overflow: hidden;
    background: white;
}

.navbar .nav.active{
    max-height: 500px;
}

.navbar .nav ul{
    padding: 0;
    font-size: .9em;
}

.navbar .nav ul li{
    list-style-type: none;
}

.navbar .nav ul li a{
    color: inherit;
    text-decoration: none;
    display: block;
    padding: .5em;
    transition: background 0.3s;
}

.navbar .nav ul li a:hover{
    background: var(--gray-200);
}

/* Media query for tablet or higher */
@media (min-width: 768px) {
    .navbar .mobile-toggle{
        display: none;
    }

    .navbar{
        flex-direction: row;
        align-items: center;
    }

    .navbar .branding{
        flex-basis: 20%;
    }

    .navbar .nav{
        text-align: right;
        max-height:fit-content!important;
    }

    .navbar .nav ul li{
        display: inline-block;
    }
}

/**
 * The pagination menu
 */
.pagination{
}

.pagination ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.pagination ul li{
    list-style-type: none;
    margin: 0 .5em;
}

.pagination ul li.active{
    font-weight: 700;
}

.pagination ul li a{
    padding: .5em;
    text-decoration: none;
    color: inherit;
}

/*
 * The contaner, maybe the most used class in the framework
 */
.container {
    max-width: 800px;
    margin: auto;
}