/* Classes de mise en page */
/***** Basics ******/
html { height: 100%; }
body {}
/***** Floats *****/
.clear { clear: both; }
.float-left { float: left; }
.float-right { float: right; }
/***** Sizes *****/
.full-width { width: 100%; }
.full-height { height: 100%; }
.min-width { min-height: 80rem; }
.min-height { min-height: 45rem; }
.width-normal { width: 1rem; }
.width-big { width: 1.5rem; }
.width-bigger { width: 2rem; }
.width-biggest { width: 2.5rem; }
.width-43 { width: 43rem; }
.width-10 { width: 10rem; }
.width-23 { width: 23rem; }
.width-8 { width: 8rem; }
.height-10 { height: 10rem !important; }
.width-15 { width: 15rem; }
/* Box Sizing */
.bd-box { box-sizing: border-box; }
/***** Block/Inline *****/
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }
/***** Positions *****/
.position-fixed { position: fixed; }
.position-relative { position: relative; }
/***** Vertical Alignments *****/
.v-top { vertical-align: top; }
.v-middle { vertical-align: middle; }
.v-bottom {vertical-align: bottom; }
.bottom-fixed { bottom: 0; }
/***** Margins *****/
/* Margin Center */
.margin-center { margin: 0 auto; }
/* No Margin */
.no-margin { margin: 0 !important; }
/* All Margins */
.margin-smallest { margin: 0.25rem; }
.margin-smaller { margin: 0.5rem; }
.margin-small { margin: 1rem; }
.margin-normal { margin: 2rem; }
.margin-big { margin: 3rem; }
.margin-bigger { margin: 4rem; }
/* Margin Top */
.margin-top-smallest { margin-top: 0.25rem; }
.margin-top-smaller { margin-top: 0.5rem; }
.margin-top-small { margin-top: 1rem; }
.margin-top-normal { margin-top: 2rem; }
.margin-top-big { margin-top: 3rem; }
.margin-top-bigger { margin-top: 4rem; }
/* Margin Right */
.margin-right-smallest { margin-right: 0.25rem; }
.margin-right-smaller { margin-right: 0.5rem; }
.margin-right-small { margin-right: 1rem; }
.margin-right-normal { margin-right: 2rem; }
.margin-right-big { margin-right: 3rem; }
.margin-right-bigger { margin-right: 4rem; }
/* Margin Bottom */
.margin-bottom-smallest { margin-bottom: 0.25rem; }
.margin-bottom-smaller { margin-bottom: 0.5rem; }
.margin-bottom-small { margin-bottom: 1rem; }
.margin-bottom-normal { margin-bottom: 2rem; }
.margin-bottom-big { margin-bottom: 3rem; }
.margin-bottom-bigger { margin-bottom: 4rem; }
/* Margin Left */
.margin-left-smallest { margin-left: 0.25rem; }
.margin-left-smaller { margin-left: 0.5rem; }
.margin-left-small { margin-left: 1rem; }
.margin-left-normal { margin-left: 2rem; }
.margin-left-big { margin-left: 3rem; }
.margin-left-bigger { margin-left: 4rem; }
/***** Paddings *****/
/* No Padding */
.no-padding { padding: 0 !important; }
/* All Paddings */
.padding-smallest { padding: 0.2rem }
.padding-smaller { padding: 0.5rem; }
.padding-small { padding: 1rem; }
.padding-normal { padding: 2rem; }
.padding-big { padding: 3rem; }
.padding-bigger { padding: 4rem; }
/* Padding Top */
.padding-top-smallest { padding-top: 0.2rem }
.padding-top-smaller { padding-top: 0.5rem; }
.padding-top-small { padding-top: 1rem; }
.padding-top-normal { padding-top: 2rem; }
.padding-top-big { padding-top: 3rem; }
.padding-top-bigger { padding-top: 4rem; }
/* Padding Right */
.padding-right-smallest { padding-right: 0.2rem }
.padding-right-smaller { padding-right: 0.5rem; }
.padding-right-small { padding-right: 1rem; }
.padding-right-normal { padding-right: 2rem; }
.padding-right-big { padding-right: 3rem; }
.padding-right-bigger { padding-right: 4rem; }
.padding-right-biggest { padding-right: 6rem; }
/* Padding Bottom */
.padding-bottom-smallest { padding-bottom: 0.2rem }
.padding-bottom-smaller { padding-bottom: 0.5rem; }
.padding-bottom-small { padding-bottom: 1rem; }
.padding-bottom-normal { padding-bottom: 2rem; }
.padding-bottom-big { padding-bottom: 3rem; }
.padding-bottom-bigger { padding-bottom: 4rem; }
/* Padding Left */
.padding-left-smallest { padding-left: 0.2rem }
.padding-left-smaller { padding-left: 0.5rem; }
.padding-left-small { padding-left: 1rem; }
.padding-left-normal { padding-left: 2rem; }
.padding-left-big { padding-left: 3rem; }
.padding-left-bigger { padding-left: 4rem; }
.padding-left-biggest { padding-left: 6rem; }
/* Letter Spacing */
.letter-space-big { letter-spacing: 0.1rem }
.letter-space-small { letter-spacing: 0.01rem }
/***** Custom Elements *****/
/* Container for All Pages Except Login */
.home-container {
    margin: 0;
    padding: 0;
    width: 80rem;
    height: 100vh;
}
.home-container-form {
    height: 100vh;
    padding: 0 2rem;
    max-width: 100rem;
}

.menu-container {
    float:left;
    width: 10rem;
    height: 100vh;
    min-height: 45rem;
    background: var(--turquoise) url('../images/bg/bg-menu.png') no-repeat bottom;
    background-size: contain;
    position: fixed;
    z-index: 10;
    left: 0;
}

.menu-container-responsive {
    float:left;
    width: 10rem;
    height: 100vh;
    min-height: 45rem;
    background: var(--turquoise) url('../images/bg/bg-menu.png') no-repeat bottom;
    background-size: contain;
    position: fixed;
    z-index: 999999;
    left: -10rem;
    opacity: 0.9;
}
nav.bottom-fixed {
    width: 10rem;
}
.content-container {
    float:left;
    width: 68rem;
    height: 50vh;
    margin-left: 12rem;
}
/* Login Container */
.login-container {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding-top: 12vh;
    background: var(--turquoise) url('../images/bg/bg-big.png') no-repeat top right;
}

#toggle-menu-arrow {
    position: absolute;
    right: -6rem;
    background-color: var(--turquoise);
    padding: 0.2rem 1rem;
    border-radius: 0 0 6px 0;
    width: 6rem;
    cursor: pointer;
}

#toggle-menu-arrow.shown {
    position: absolute;
    right: -2rem;
    background-color: var(--turquoise);
    padding: 0.2rem 0.2rem;
    border-radius: 0 0 6px 0;
    width: 2rem;
    cursor: pointer;
}
#toggle-menu-arrow.shown:hover {
    width: 2rem;
}

#toggle-menu-arrow:hover {
    background-color: var(--white);
    border: 1px solid var(--turquoise);
    color: var(--turquoise);
    width: 6.5rem;
}