@font-face {
    font-family: MontserratItalic;
    src: url('./Fonts/Montserrat-BlackItalic.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Montserrat;
    src: url('./Fonts/Montserrat-Black.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    color: #FFF;
    text-align: center;
    background: #000;
    background-image: url('./images/Accueil/Top.jpg');
}
#container{
    width: auto;
    height: 100%;
}
div {
    display: block;
}
h1 {
    font-family: MontserratItalic;
    /* color: #26972e */
    color: #147d28;
    text-shadow: #4b008b 2px 2px 10px;
    margin-top: 0;
    font-size: 3.5em;
}
h2 {
    font-family: MontserratItalic;
    font-size: 25px;
    color: #147d28;
    text-shadow: #239261 1px 1px 2px;
    margin-top: 0;
}
h3 {
    font-size: 1.5em;
    font-family: Montserrat;
    margin: 0;
    padding: 0;
}
a {
    padding-top: 0;
    line-height: 0.5;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
td, th{
    padding:5px 5px;
}
input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #147d28;
    outline: none;
    background: transparent;
    box-sizing: border-box;
    box-shadow: none;
    border-bottom: #147d28 solid 2px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*  NO JAVASCRIPT   */
#jsko {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#ko {
    color: lightpink;
    font-size: 34px;
    font-weight: bold;
    font-style: italic;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/*  MODAL BOX   */
#main_modal {
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(100, 100, 100, 0.9);
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    overflow: auto;
}

#box_sm, #box, #box_md, #box_lg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 20px;
    background: rgba(0, 0, 0, .8);
    box-sizing: border-box;
    border-left: solid 1px #343a40;
    border-bottom: solid 1px #343a40;
    border-radius: 40px;
    box-shadow: inset #39c0c4 -5px -5px 14px 0;
    transition: .5s;
}

#deploy {
    padding: 40px 20px;
    background: rgba(0, 0, 0, .8);
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
                0 1px 0 rgba(255,255,255,0.1),
                0 0 10px rgba(100,231,253,1),
                inset 0 0 8px rgba( 61,157,247,0.8),
                inset 0 -2px 5px rgba(185,231,253,0.3),
                inset 0 -3px 8px rgba(185,231,253,0.5);
    border-radius: 10px;
    transition: .5s;
}
#box_sm{
    width: 20vw;
    min-width: 300px;
}
#box{
    width: 70vw;
    min-width: 300px;
    max-height: 90vh;
}
#deploy{
    margin: -30px auto 80px;
    background-color: rgba(255, 255, 255, 0.5);
    width: 90vw;
    min-width: 300px;
}
#box_md{
    width: 60vw;
}
#box_lg{
    width: 80vw;
}
#box .inputBox{
    position: relative;
}
#box .inputBox input,
#deploy .inputBox input{
    width: 100%;
    height: 3rem;
    margin-bottom: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #147d28;
    outline: none;
    background: transparent;
    box-sizing: border-box;
    box-shadow: none;
    border-bottom: #147d28 solid 2px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#box .inputBox label,
#deploy .inputBox label{
    position: absolute;
    top: 5px;
    left: 0;
    padding: 5px 0;
    font-size: 25px;
    letter-spacing: 1px;
    color: #147d28;
    pointer-events: none;
    transition: .5s;
}
#box .inputBox input:focus ~ label, #box .inputBox input:valid ~ label,
#deploy .inputBox input:focus ~ label, #deploy .inputBox input:valid ~ label{
    top: -25px;
    left: 0;
    font-size: 22px;
}
input[type="submit"]{
    background: transparent;
    border: 1px solid orange;
    outline: none;
    color: darkorange;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
}
.cont_ing{
    background: transparent;
    border: 1px solid orange;
    outline: none;
    color: darkorange;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
}
.check label{
    padding: 10px 10px;
    color: #147d28;
}
.check input[type="checkbox"]{
    width: 20px;
    height: 20px;
    outline: 2px solid #147d28;
    cursor: pointer;
}
.main {
    display: flex;
    height: auto;
    max-height: 75vh;
    overflow: auto;
    justify-content: space-around;
    flex-wrap: wrap;
}
.main form {
    width: 100%;
}
.main_line {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: auto;
    max-height: 75vh;
    overflow: auto;
    flex-wrap: wrap;
}
.infos {
    color: #1bf633;
    font-size: 20px;
    cursor: pointer;
}

/*  SECION ADMIN PAIMENT    */
.tab_paiement{
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    text-align: center;
}
.form-control {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    font-style: italic;
    font-weight: bold;
}
span.bill {
    text-align: center;
}
tbody{
    text-align: center;
}
tr {
    text-align: center;
}
th {
    text-align: center;
}
.historique {
    width: 100%;
    height: 80%;
    overflow-y: auto;
}
/*  SECTION BLOCK PREFERENCES ADMIN */
div.main_block {
    position: relative;
    display: flex;
    height: auto;
    max-height: 75vh;
    justify-content: space-around;
    flex-wrap: wrap;
}
span.pref {
    color: #147d28;
    font-family: Montserrat;
    font-size: 25px;
    margin: 0 5px;
}
div#block_left, div#block_center, div#block_right {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}
div#block_left {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
        0 1px 0 rgba(255,255,255,0.1),
        0 0 10px rgba(100,231,253,1),
        inset 0 0 8px rgba( 61,157,247,0.8),
        inset 0 -2px 5px rgba(255,20,147,0.3),
        inset 0 -3px 8px rgba(255,20,147,0.5);
    text-align: left;
}
div#block_center {
    position: absolute;
    top: 0;
    left: 33%;
    width: 33%;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
                0 1px 0 rgba(255,255,255,0.1),
                0 0 10px rgba(100,231,253,1),
                inset 0 0 8px rgba( 61,157,247,0.8),
                inset 0 -2px 5px rgba(255,20,147,0.3),
                inset 0 -3px 8px rgba(255,20,147,0.5);
    text-align: center;
}
div#block_right {
    position: absolute;
    top: 0;
    left: 66%;
    width: 33%;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
        0 1px 0 rgba(255,255,255,0.1),
        0 0 10px rgba(100,231,253,1),
        inset 0 0 8px rgba( 61,157,247,0.8),
        inset 0 -2px 5px rgba(255,20,147,0.3),
        inset 0 -3px 8px rgba(255,20,147,0.5);
    text-align: right;
}

/*  CHECKBOX SWITCH */
div.setting{
    display: flex;
    width: 15%;
    position: relative;
    left: 0;
    margin: 0 auto;
}
div.setting-in-line{
    display: flex;
    position: relative;
    width: 300px;
}
.switch input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100px;
    height: 40px;
    cursor: pointer;
}
.switch {
    display: flex;
    width: 100px;
    height: 35px;
    margin: 0 auto;
}
.switch label {
    display: block;
    width: 60px;
    height: 25px;
    position: relative;
    background: linear-gradient(#121823, #161d2b);
    border-radius: 30px 30px 30px 30px;
    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(0,0,0,0.5),
                0 1px 0 rgba(255,255,255,0.2);
    transition: all .5s ease;
}
.switch input ~ label i {
    display: block;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 2;
    border-radius: inherit;
    background: #283446; /* Fallback */
    background: linear-gradient(#36455b, #283446);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),  0 0 8px rgba(0,0,0,0.3),  0 12px 12px rgba(0,0,0,0.4);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.switch label + span {
    content: "";
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 82%;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background: #283446;
    background-image: linear-gradient(#36455b, #283446);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.2),
                0 1px 0 rgba(255,255,255,0.1),
                0 0 10px rgba(185,231,253,0),
                inset 0 0 8px rgba(0,0,0,0.9),
                inset 0 -2px 5px rgba(0,0,0,0.3),
                inset 0 -5px 5px rgba(0,0,0,0.5);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 2;
}

/*  Toggle   */
.switch input:checked ~ label + span {
    content: "";
    display: inline-block;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 2;
    background-image: linear-gradient(#1bf633, #317b16);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 
                0 1px 0 rgba(255,255,255,0.1), 
                0 0 10px rgb(94, 243, 131), 
                inset 0 0 8px rgba(12, 248, 38, 0.8), 
                inset 0 -2px 5px rgba(185,231,253,0.3), 
                inset 0 -3px 8px rgba(185,231,253,0.5);
}
.switch input:checked ~ span.remember {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    color: #1bf633;
    text-shadow: 2px 2px 2px rgb(94, 243, 131);
}
.switch input:checked ~ label i {
    left: 63%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
                0 0 8px rgba(0,0,0,0.3),
                0 8px 8px rgba(0,0,0,0.3),
                inset -5px 0 1px #147d28;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.switch span.remember{
    display: inline-block;
    position: absolute;
    left: 100%;
    top: -3px;
    width: 175px;
    font-size: 20px;
    color: #147d28; /*#121823*/
    text-shadow: 0 1px 0 #90ea36;
    transition: all .5s ease;
}
.switch span.livraison{
    display: inline-block;
    position: absolute;
    left: 200px;
    width: 250px;
    font-size: 30px;
    color: #1F2736; /*#121823*/
    text-shadow: 0 1px 0 #147d28;
    transition: all .5s ease;
}
.switch input:checked ~ span.remember, .switch input:checked ~ span.livraison{
    color: #147d28;
}

/*  GESTIONDE L'HEURE   */
.quand {
    display: flex;
    justify-content: center;
    width: 100%;
}
.cmd-quand{
    display: flex;
    width: 200px;
    margin: 0 10px;
    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(0,0,0,0.5),
                0 1px 0 rgba(255,255,255,0.2);
    border-radius: 15px;
    background-color: rgba(255,255,255,0.4);
}
input#date_cmd[type="date"]{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: MontserratItalic;
    color: #147d28;
    text-shadow: #000 1px 1px 0;
    font-size: 20px;
    text-align: center;
    width: 200px;
    height: 2.5rem;
    margin: 0 auto;
    border: none;
}
div#heure_ferme {
    display: block;
    width: 150px;
    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(0,0,0,0.5),
                0 1px 0 rgba(255,255,255,0.2);
    border-radius: 15px;
    background-color: rgba(255,255,255,0.4);
    z-index: 30;
}
select#heure{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: MontserratItalic;
    color: #f06da9;
    text-shadow: #000 1px 1px 0;
    font-size: 20px;
    text-align: center;
    width: 150px;
    height: 2.5rem;
    border-radius: 17px;
    border: none;
    background-color: transparent;
}

/*  CHECKBOX SETTING    */
span.span_setting{
    display: block;
    position: absolute;
    top:-5px;
    left: 100px;
    color: #147d28;
    font-size: 35px;
}
div.check_pos{
    display: flex;
    width: 100px;
    height: 50px;
}
div.check_pos input[type="checkbox"]{
    position: relative;
    width: 80px;
    height: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: red;
    outline: none;
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    transition: .5s;
}
div.check_pos input:checked[type="checkbox"]{
    background: #5fcf80;
}
div.check_pos input[type="checkbox"]:before{
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    transition: .5s;
}
div.check_pos input:checked[type="checkbox"]:before{
    left: 40px;
}

/*  PREFERENCES     */
.pref_container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 200px;
    margin: 0 10px;
    max-height: 150px;
}
.pref_container p {
    color: #147d28;
    font-family: MontserratItalic;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
}
.pref_container label {
    position: relative;
}
.pref_container label input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
.pref_container label .fas {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(31, 39, 54, 0.3);
    line-height: 40px;
    text-align: center;
    margin: 0 4px;
    color: #147d28;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(0,0,0,0.5),
                      0 1px 0 rgba(255,255,255,0.2);
    /*box-shadow: -1px -1px 3px rgba(255, 255, 255,0.1),
                2px 2px 6px rgba(0, 0, 0, 0.8);*/
}
.pref_container label .fas:hover {
    background: rgba(60, 74, 99, 0.3);
    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(0,0,0,0.5),
                      0 1px 0 rgba(255,255,255,0.2);
    /*box-shadow: -1px -1px 3px rgba(255, 255, 255,0.1),
                2px 2px 6px rgba(0, 0, 0, 0.8),
                inset -2px -2px 10px rgba(255, 255, 255,0.05),
                inset 2px 2px 10px rgba(0, 0, 0, 0.5);*/
}
.pref_container label input:checked ~ .fas {
    color: #00fff1;
    box-shadow: inset -1px -1px 3px rgba(255, 255, 255,0.1),
                inset 2px 2px 6px rgba(0, 0, 0, 1);
    text-shadow: 0 0 5px #00fff1,
                 0 0 20px #00fff1;
}

/*  QUANTITES   */
.cmd-center{
    position: absolute;
    top: 25px;
    left: 0;
    width: 250px;
    height: 250px;
    text-align: center;
}
.cmd-center input[type="number"] {
    border: 1px solid #B90987;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
                0 0 8px rgba(0,0,0,0.3),
                0 8px 8px rgba(0,0,0,0.3),
                inset -1px 0 1px #147d28;
    width: 150px;
    color: #147d28;
    text-shadow: #fff 1px 1px 2px;
}
.quant input[type="text"] {
    width: 50px;
    height: 2rem;
    padding: 0;
    margin: 0;
    border: 1px solid #B90987;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
                0 0 8px rgba(0,0,0,0.3),
                0 8px 8px rgba(0,0,0,0.3),
                inset -1px 0 1px #147d28;
    color: #147d28;
    text-shadow: #fff 1px 1px 2px;
}
.quant span.span-choix {
    margin-left: 10px;
}
.combien{
    width: 90px;
}
input[type='number'].combien_lg{
    width: 180px;
    height: 3.3rem;
    font-size: 35px;
}
label.quantity {
    font-family: MontserratItalic;
    font-size: 20px;
    color: #f06da9;
    text-shadow: #4b008b 2px 2px 10px;
    padding: 0;
    margin: 0;
}
div .quant{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    line-height: 2em;
}

/*  SPHERES */
.rect-container {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    margin: 10px;
    flex-direction: column;
    justify-content: center;
    width: 75px;
    height: 115px;
    cursor: pointer;
}
.rect {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 
                0 5px 0 rgba(255,255,255,0.1), 
                0 0 10px rgb(0, 0, 0), 
                inset 0 0 18px rgb(26, 97, 52), 
                inset 0 -2px 5px rgb(238, 251, 113), 
                inset 0 -13px 18px rgb(108, 253, 117);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.rect img {
    background-position: top;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-size: cover;
}
.badge-rect {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: -25px;
    width: 125px;
    height: 40px;
    background-color: #e8fdd9;
    border-radius: 10px;
    box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1),
                10px 10px 10px rgba(0, 0, 0, 0.4);
}
.badge-rect label {
    display: flex;
    font-family: MontserratItalic;
    font-size: 15px;
    color: #147d28;
    margin: 0 auto  ;
    text-align: center;
    text-shadow: #239261 5px 5px 5px;
}
.confirmer {
    background-color: rgba(15, 157, 88, 0.50);
    border: 3px solid green;
}

/*  ACCUEIL */
#accueil {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.body_loader{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    min-height: 250px;
}
div.loader{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}
.login {
    background-image: url("images/login.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 20px;
}
div.circle:hover {
    cursor: pointer;
}
.loader label{
    content: '';
    font-size: 1.6em;
    color: #147d28;
    font-weight: bold;
    z-index: 11;
    text-shadow: 2px 2px 4px #000;
}
.content_loader {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px 0;
    border: 4px solid #980fd3;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1),
                10px 10px 10px rgba(0, 0, 0, 0.4),
                inset -5px -5px 5px rgba(255, 255, 255, 0.2),
                inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}
.content_loader:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 10;
    background-image: url("images/nappe.jpg");
    border: 3px solid #980fd3;
    border-radius: 50%;
    box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.2),
                inset 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.content_loader span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
    filter: blur(20px);
    z-index: 1;
    animation: animate 5s linear infinite;
}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.circle {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
}
.res-circle {
    width: 200px;
    height: 200px;
    font-size: 30px;
    border-radius: 50%;
    /*background: linear-gradient(135deg, #a7cfdf 0%,#23538a 100%);*/
    background-image: linear-gradient(#64E7FD, transparent);
    line-height: 30px;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
                0 1px 0 rgba(255,255,255,0.1),
                0 0 10px rgba(100,231,253,1),
                inset 0 0 8px rgba(61,157,247,0.8),
                inset 0 -2px 5px rgba(255,20,147,0.3),
                inset 0 -3px 8px rgba(255,20,147,0.5);
}
.res-circle:after {
    content: "";
    display: block;
}
.badge-circle {
    position: relative;
    top: 0;
    left: 125px;
    width: 50px;
    height: 50px;
    text-align: center;
    background-image: linear-gradient(gold, #64E7FD);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
                0 1px 0 rgba(255,255,255,0.1),
                0 0 10px rgba(100,231,253,1),
                inset 0 0 8px rgba(61,157,247,0.8),
                inset 0 -2px 5px rgba(255,20,147,0.3),
                inset 0 -3px 8px rgba(255,20,147,0.5);
    border-radius: 50%;
    line-height: 40px;
    z-index: 11;
}
.span-badge-circle {
    color: #3D9DF7;
    text-shadow: #000 2px 2px 1px;
    font-weight: bold;
}

input {
    text-align: center;
}

fieldset.add, fieldset.modif {
    padding: 20px;
    margin: 10px;
    background: rgba(34, 34, 34, 0.8); /*#121823*/
    border: 1px solid pink;
    border-radius: 30px 30px 30px 30px;
    box-shadow: inset 0 3px 8px 1px rgba(255,255,255,0.5),
                inset 0 1px 0 rgba(255,255,255,0.5),
                0 1px 0 rgba(255,255,255,0.2);
}
fieldset.clients{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 10px;
    background: rgba(34, 34, 34, 0.8); /*#121823*/
    border: 1px solid pink;
    border-radius: 30px 30px 30px 30px;
    box-shadow: inset 0 3px 8px 1px rgba(255,255,255,0.5),
                inset 0 1px 0 rgba(255,255,255,0.5),
                0 1px 0 rgba(255,255,255,0.2);
}
legend{
    width: 200px;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    color: #147d28;
    border-radius: 20px;
    background-image: linear-gradient(pink, #77a1b9);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 
                0 1px 0 rgba(255,255,255,0.1), 
                0 0 10px rgba(100,231,253,1), 
                inset 0 0 8px rgba( 61,157,247,0.8), 
                inset 0 -2px 5px rgba(255,20,147,0.3), 
                inset 0 -3px 8px rgba(255,20,147,0.5);
}
fieldset.field_ajout {
    background-color: black;
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}

/*  ENTETE DE LA PAGE   */
#main-logo {
    background-color: #000;
    display: flex;
    justify-content: center;
    width: 100%;
    padding:5px;
    height: auto;
}
.main-logo {
    position: relative;
    top: 0;
    left: 0;
    width: 400px;
    animation: main 2s ease-in-out forwards;
}

#bas-logo {
    right: 0;
    width: 100%;
    height: 80px;
    padding: 0;
    background-image: linear-gradient(transparent, #b90987);
    text-align: center;
    font-size: 26px;
    font-style: italic;
    font-weight: bold;
}
#bas-logo img {
    position: relative;
    top: 0;
    left: 95%;
    float: left;
    width: 80px;
    height: 80px;
    opacity: 0;
    animation: slideLeft 2s ease-in-out forwards;
}
#bas-logo span {
    margin-left: -90px;
}

.image_out>img {
    cursor: pointer;
    width: 30px;
}

#top-info {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #E6007E;
    width: 100%;
    height: 50px;
    z-index: 4;
}
.top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    width: 150px;
    height: 150px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
                0 1px 0 rgba(255,255,255,0.1),
                0 0 10px rgb(0, 0, 0),
                inset 0 0 8px rgba(185, 9, 135, 0.8),
                inset 0 -2px 5px rgba(185,231,253,0.3),
                inset 0 -3px 8px rgba(185,231,253,0.5);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.top img {
    width: 190px;
    height: 190px;
}
.parallax-container {
    height: 75vh;
}
.section {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #22a36c;
    box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.1), -8px 8px 20px rgb(58, 234, 92)
}
.top-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

/*  IMAGE DE MENU   */
.image-main-menu{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.image-menu>a{
    width: 150px;
    display: flex;
    margin: 0 10px;
    border: solid 1px #fea801;
    border-radius: 15px;
    overflow: hidden;
}
.image-menu>span{
    width: 150px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
}
.img-content{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: solid 2px #343a40;
    border-radius: 10%;
    display: flex;
    float: left;
    width: 100%;
    min-height: 200px;
    max-height: 250px;
    overflow: hidden;
}

/*  COMMANDE    */
#commande {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    padding: 10px;
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
}
.commande {
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 80%;
    height: auto;
    padding: 20px;
    margin: 0 auto;
}
.inner_commande {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 80%;
}

.commande_invite{
    border: solid 2px lightgrey;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 200px;
    padding: 10px;
    margin: 0 auto;
}
.user_invite{
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.prenom_invite{
    width: 40%;
}
.nom_invite {
    width: 40%;
}

#span_combien {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: "Lucida Calligraphy", "Brush Script MT";
    font-size: 25px;
    color: red;
    text-shadow: pink 1px 1px 0;
}

#pret {
    line-height: 1.5px;
    display: inline-flex;
    width: 250px;
}

.cmd_allergie{
    color: red;
    font-size: 20px;
}

.choixduchef {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    line-height: 20px;
    min-height: 50px;
}
.choixduchef>span>input, .choixduchef>span, .span-choix{
    height: 30px;
    border-radius: 17px;
    border: none;
}
.choixduchef>span>input{
    width: 150px;
}
.choix{
    text-align: center;
    height: 50px;
    width: 150px;
    border: none;
}
.modal-title{
    background-color: rgba(0, 0, 0, 0.8);
    width: 300px;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    top: -25px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 5px;
    color: #ffcb45;
    text-shadow: 1px 1px 1px pink;
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 1px;
}
.cmd-left{
    text-align: left;
}
select.combien{
    text-align: center;
    height: 30px;
    border-radius: 17px;
    border: none;
}
.text_quant{
    width: 400px;
    margin: 10px auto;
}
fieldset.field_quant{
    margin: 0 auto;
    width: 95%;
    border: solid 1px #fea801;
    border-radius: 10px;
}


.cat {
    width: 250px;
    height: 250px;
    margin: 15px;
    border: none;
    background: rgba(31, 40, 64, 0.3); /*#121823*/
    border-radius: 30px;
    box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.5), 
                inset 0 1px 0 rgba(0,0,0,0.5), 
                0 1px 0 rgba(255, 168, 249, 0.2);
    overflow: hidden;
}
.cat-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.bottom-cat {
    width: 100%;
    height: 25%;
    position: relative;
    bottom: -80%;
    padding-top: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    border-top: solid 1px #fea801;
}

span.tt>a{
    color: gold;
}


.commentaires{
    color: orangered;
    font-size: 22px;
    font-family: "Lucida Calligraphy", "Brush Script MT";
}

#allergie {
    width: 80%;
    border-radius: 10px;
    margin: 10px auto;
}

.toggle_cmd{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: auto 10px;
}

.promh{
    color: dimgrey;
    font-size: 26px;
    font-family: "Monotype Corsiva", "Lucida Calligraphy", "Brush Script MT", arial;
}

.combien_span{
    font-family: "Lucida Calligraphy", "Brush Script MT";
    color: deeppink;
    height: 30px;
    border-radius: 17px;
    border: none;
    margin-top: 120px;
}

.combien_span2{
    font-family: "Lucida Calligraphy", "Brush Script MT";
    color: deeppink;
    height: 30px;
    border-radius: 17px;
    border: none;
}

#modal_speciaux_img {
    background-color: rgba(100, 100, 100, 0.8);
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: none;
    overflow: auto;
}

#front-modal {
    position: relative;
    left: 25%;
    top: 30px;
    width: 50%;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
}

#close{
    position: absolute;
    top: 5px;
    right: 15px;
    z-index: 20;
    cursor: pointer;
}

.drop_zone{
    background-color: #343a40;
    border: #999 5px dashed;
    border-radius: 15px;
    width: 75%;
    margin: 0 auto;
    padding: 0;
}

.img_special{
    border-radius: 15px;
    width: 200px;
}

#liste_speciaux {
    margin: 20px;
}

.good{
    color: green;
}

.nogood{
    color: red;
}

.pret{
    color: limegreen;
    font-size: 20px;
}

.global_standby{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.standby{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin:10px;
}
.green{
    text-shadow: 1px 1px 1px #FFF;
    border: solid 1px limegreen;
    border-radius: 15px;
}
.pink{
    text-shadow: 1px 1px 1px #FFF;
    border: solid 1px pink;
    border-radius: 15px;
}

/*  ADMINISTRATION DES COMMANDES    */
#commande_admin{
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-direction: column;
    padding: 10px;
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    max-width: 90%;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/*  AMINISTRATION   */
#admin {
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-direction: column;
    padding: 10px;
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    max-width: 800px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
#toggle {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto 10px;
    cursor: pointer;
}
.parent_1, .parent_2 {
    margin: 10px;
}
.enfant {
    display: flex;
    padding: 10px;
}
.liste{
    display: flex;
    justify-content: center;
    font-family: "Monotype Corsiva", "Lucida Calligraphy", "Brush Script MT", arial;
    font-size: 1.5em;
    padding-bottom: 10px;
}
.hierarchie {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
}
.root {
    display: flex;
    color: pink;
}
.enfant1 {
    display: flex;
    color: lightcoral;
    margin-left: 25%;
}
.enfant2 {
    display: flex;
    color: orangered;
    margin-left: 50%;
}
.inp_ing {
    cursor: pointer;
    width: 200px;
    border: 1px solid #000;
    background-color: dimgrey;
    border-radius: 10px;
    margin: 5px;
}
.doit {
    display: flex;
    justify-content: space-around;
}
.doit > input, .doit > span{
    max-width: 40%;
    padding-right: 0;
    margin-right: 0;
}

/*  HEURE DOUVERTURE    */
.ouverture{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.ouvert_tog {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 10px;
}
#ouvert{
    border-radius: 15px;
    width: 180px;
    text-align: center;
    margin-bottom: 10px;
}
fieldset.ouverture {
    background-color: dimgrey;
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
    width: 200px;
    height: 210px;
}

/*  SECTION RECHERCHE   */
.search_btn {
    width: 100px;
    position: relative;
    top: -10px;
}
.board {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}
.info {
    width: 20%;
    color: #fea801;
    font-size: large;
}
.info_res{
    width: 50%;
    line-height: 20px;
    font-weight: bold;
    font-style: italic;
}
input[type="text"].info_res {
    height: 2.6rem;
}
#liste {
    display: none;
}
#liste_complete{
    margin-bottom: 20px;
}
#liste.active{
    display: block;
}
.main_search{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*  DEBUT DU TEST   */
table.tab_client {
    width: 100%;
}
tbody.form-client {
    width: 100%;
}
.form-client>tr>td{
    width: 45%;
}
#big_box {
    overflow: auto;
}
span.tt {
    font-family: "Lucida Calligraphy", "Brush Script MT";
    color: #3bda35;
    font-size: 20px;
    text-align: center;
    margin-top: -35px;
}
span.ttc {
    font-family: "Lucida Calligraphy", "Brush Script MT";
    color: #3bda35;
    size: 13px;
    text-align: left;
}
table.serie{
    width: 100%;
    text-align: center;
}
.serie > tr{
    width: 100%;
}
tr.tr_clients{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
tr.tr_clients > td {
    width: 250px;
}
/*  FIN DU TEST */

.ligne{
    background-color: slategrey;
}
.cont_lvl {
    display: block;
    width: 150px;
    margin-left: 10px;
    border-radius: 10px;
    text-align: center;
}
.cont_lvl_parent {
    display: block;
    border-radius: 10px;
    width: 100%;
}

/*  ACCOUNT */
#account {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-direction: column;
    padding: 10px;
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    max-width: 800px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
#account>div {
    width: 90%;
    margin: 5px 20px;
}

.main_client{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

/*  PREFERENCES */
#preference {
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    min-width: 300px;
    width: 97%;
    height: auto;
    padding: 10px;
    margin: 10px auto;
}

#preference form{
    display: flex;
    flex-direction: column;
}

#preference>div {
    width: 100%;
    margin: 5px;
}

.main_ing {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

/*  DEVELOPPEUR */
#dev {
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    min-width: 300px;
    max-width: 800px;
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 0 auto;
}

#dev>div {
    width: 90%;
    margin: 5px 20px;
}

/*  CHANGEMENT DE PASSE */
#change_pass {
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    min-width: 300px;
    max-width: 800px;
    height: auto;
    padding: 10px;
    margin: 0 auto;
}

#change_pass>form>div{
    margin: 20px;
}

/*  PRIMEUR */
.auteur {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    color: lightpink;
}

.auteur_insc {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    color: lightpink;
}

.image-content{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: solid 2px #343a40;
    border-radius: 10%;
    display: block;
    float: left;
    width: 250px;
    height: 250px;
    overflow: hidden;
}

/*      FIDELITE    */
#admin_fidelite {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.fidelite-bloc{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
input.fidelite-input {
    border-radius: 15px;
    margin-bottom: 15px;
}

/*      ACCUEIL     */
.bloc1 {
    font-size: 25px;
    font-family: "Lucida Calligraphy", "Brush Script MT";
}

.bloc1>h1, .bloc1>h2{
    font-size: 38px;
    color: #147d28;
}

.image-accueil{
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    border: solid 2px #343a40;
    border-radius: 15px;
    display: flex;
    overflow: hidden;
}

.accueil{
    font-size: 27px;
    color: #147d28;
}

.accueil1{
    float: left;
    width: 250px;
    height: 400px;
}
.accueil1 img{
    width: 250px;
}

.accueil2{
    width: 100%;
}

.accueil3{
    float: right;
    width: 250px;
    height: 400px;
}

.accueil3 img{
    width: 250px;
}

.clear {
    clear: both;
}

.content {
    font-size: 1.5em;
}

.edit-par {
    font-weight: bold;
    font-style: italic;
    display: block;
    margin: 5%;
    position: relative;
    bottom: 0;
    right: 0;
}

.main_news{
    border-left: solid 1px #343a40;
    border-bottom: solid 1px #343a40;
    border-radius: 15px;
    box-shadow: #39c0c4 5px 5px 14px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    min-width: 300px;
    max-width: 95%;
    height: auto;
    max-height: 80vh;
    padding: 20px;
    margin: 0 auto;
}

.news{
    background-color: dimgrey;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    min-width: 300px;
    width: 90%;
    height: auto;
    padding: 20px;
    margin: 10px auto;
}


.alert {
    top: 20px;
    bottom: auto;
}
.alert-danger {
    font-family: "Lucida Calligraphy", "Brush Script MT";
    font-size: 30px;
    color: red;
    border: solid 2px darkred;
    box-shadow: palevioletred 5px -5px 14px 0;
}
.alert-success {
    border: solid 2px green;
    box-shadow: green 5px -5px 14px 0;
}
.clear{
clear: both;
}

/*  QUANTITES   */
#quantite{
    display: flex;
    flex-direction: column;
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 5px 5px 14px 0;
    text-align: center;
    min-width: 300px;
    max-width: 800px;
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 0 auto;
}
.main_quant >input{
    max-width: 100px;
}
.main_quant {
    display: flex;
    justify-content: space-around;
}
.main_quant>label{
    margin: 0 auto;
}

.title {
    text-transform: uppercase;
}
.description {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.tel {
    width: 100%;
    margin: 0 auto;
    display: inline-flex;
    justify-items: center;
    align-items: center;
}
.tel>input{
    width: 45%;
    margin: 0 auto;
}
.packbtn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    bottom: -20px;
}
.packbtn>div.button{
    margin: 0 auto;
}
span.telcel {
    color: #147d28;
}
.button {
    display: inline-block;
    width: 100%;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 20px;
    color: #147d28;
    font-weight: bold;
    font-size: 13px;
    border: #147d28 2px solid;
    background-image: linear-gradient(transparent, #77a1b9);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 
                0 1px 0 rgba(255,255,255,0.1), 
                0 0 10px rgba(100,231,253,1), 
                inset 0 0 8px rgba( 61,157,247,0.8), 
                inset 0 -2px 5px rgba(255,20,147,0.3), 
                inset 0 -3px 8px rgba(33, 55, 22, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}
.button-pret {
    width: 200px;
    padding: 10px 20px;
    margin: 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #147d28;
    border: green 2px solid;
    background-image: linear-gradient(transparent, #77a1b9);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
                0 1px 0 rgba(255,255,255,0.1),
                0 0 10px rgba(100,231,253,1),
                inset 0 0 8px rgba( 61,157,247,0.8),
                inset 0 -2px 5px rgba(45, 255, 124, 0.3),
                inset 0 -3px 8px rgba(45, 255, 168, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    cursor: pointer;
}
.button-reverse {
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 20px;
    color: #3D9DF7;
    border: #64E7FD 2px solid;
    background-image: linear-gradient(transparent, #77a1b9);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
                0 1px 0 rgba(255,255,255,0.1),
                0 0 10px rgba(255,96,159,1),
                inset 0 0 8px rgba(255,20,147,0.8),
                inset 0 -2px 5px rgba(255,20,147,0.3),
                inset 0 -3px 8px rgba(255,20,147,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    font-Weight: bolder;
    display: inline-block;
    cursor: pointer;
}
.button-half {
    display: flex;
    justify-content: center;
}
.button:hover {
    background: #147d28;
    color: #000;
    font-weight: bold;
}
.button-reverse:hover {
    background: red;
    color: #FFF;
}
.phone-span{
    font-size: 40px;
    line-height: 50%;
}
.phone {
    max-width: 100px;
    display: flex;
    background-color: transparent;
    border: transparent;
}
input.phone{
    padding: 0;
}
.number-phone{
    width: 500px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
}
.text-center {
    text-align: center;
}

.modal-wrap {
    background-color: #222222;
    border: solid 2px #343a40;
    border-radius: 15px;
    box-shadow: lightgray 3px -3px 14px 2px;
    max-width: 600px;
    height: 540px;
    margin: 0 auto;
    -webkit-transition: -webkit-transform 300ms ease-in-out;
    transition: -webkit-transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}
.modal-header {
    background-color: #222222;
    border-radius: 15px 15px 0 0;
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.modal-header span {
    display: block;
    height: 12px;
    width: 12px;
    margin: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
}
.modal-header span.is-active {
    background: rgba(0, 0, 0, 0.4);
    background: #ffcb45;
}
.modal-bodies {
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.modal-body {
    background-color: #222222;
    border-radius: 0 0 15px 15px;
    position: absolute;
    top: 0;
    display: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
.modal-body.is-showing {
    display: block;
}

.animate-out {
    -webkit-animation: out 600ms ease-in-out forwards;
    -moz-animation: out 600ms ease-in-out forwards;
    -ms-animation: out 600ms ease-in-out forwards;
    -o-animation: out 600ms ease-in-out forwards;
    animation: out 600ms ease-in-out forwards;
}
.animate-in {
    -webkit-animation: in 500ms ease-in-out forwards;
    -moz-animation: in 500ms ease-in-out forwards;
    -ms-animation: in 500ms ease-in-out forwards;
    -o-animation: in 500ms ease-in-out forwards;
    animation: in 500ms ease-in-out forwards;
    display: block;
}
.animate-up {
    -webkit-transform: translateY(-1000px) rotate(30deg);
    -moz-transform: translateY(-1000px) rotate(30deg);
    -ms-transform: translateY(-1000px) rotate(30deg);
    -o-transform: translateY(-1000px) rotate(30deg);
    transform: translateY(-1000px) rotate(30deg);
}

@-webkit-keyframes out {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }
    60% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    100% {
        -webkit-transform: translateY(800px) rotate(10deg);
        transform: translateY(800px) rotate(10deg);
    }
}
@keyframes out {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }
    60% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    100% {
        -webkit-transform: translateY(800px) rotate(10deg);
        transform: translateY(800px) rotate(10deg);
    }
}
@-webkit-keyframes in {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}
@keyframes in {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}

/*  FOOTER  */
#copyright {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    color: #000;
    /* text-shadow: #FFF 0 0 1px; */
    background-image: linear-gradient(#22a36c, #0d5658);
    padding: 12px 0;
    z-index: 21;
}

/*  ADAPTATION POUR TABLETTE ET MOBILE  */
@media screen and (max-width: 800px) {

    /*          ENTETE          */
    .parallax-container .parallax img {
        left: -20%;
    }

    #main-logo {
        display: flex;
        justify-content: center;
    }
    .main-logo {
        display: flex;
        justify-content: center;
        width: 300px;
    }

    #bas-logo {
        display: flex;
        height: 50px;
    }
    #bas-logo img {
        width: 50px;
        height: 50px;
    }
    .bas-logo-add{
        width: 400px;
        height: 50px;
        display: flex;
        justify-content: center;
        margin-top: 0;
        animation: ad1 2s ease-in-out forwards;
    }
    .bas-logo-add > span {
        text-shadow: #000 1px 1px 0;
    }
    #bas-logo span {
        margin-left: 10px;
        height: 50px;
        font-size: 15px;
    }

    /*          BODY            */
    h1 { font-size: 20px; }
    h2 { font-size: 22px; }

    /*          MENU ONGLETS          */
    #menu { margin-left: -50px; margin-top: 10px; }

    #onglets{
        font: bold 10px arial;
        margin: -7px auto;
    }
    #onglets li{
        height: 20px;
        margin: 4px;
    }
    #onglets a{ padding: 5px; }

    /*      PAGE PERSONNELLE     */
    #account {
        flex-direction: column;
        padding: 5px;
        min-width: 300px;
    }
    .prov { font-size: 15px; }
    .repas_paye{
        flex-direction: column;
    }
    .repas {
        margin:0 auto;
    }

    #preference { padding: 10px; }
    #preference>div { margin: 5px 10px; }

    /*      MENU PRINCIPALE         */
    .menu{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        list-style:none;
    }
    #navbar ul{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        list-style:none;
    }
    #navbar ul li a{
        width: 5em;
    }

    #box {
        width: 90%;
    }

/*          MENU CONNEXION          */

    .connection {
        flex-direction: column;
        margin: 0 10px 0 0;
        border-radius: 0 0 15px 15px;
    }

    .pseudo_pass>td>input[type="text"],
    .pseudo_pass>td>input[type="password"],
    .rem_btn>td>button{
        padding: 0;
        margin-bottom: 10px;
    }

    /*      NEWS        */
    .main_news { min-width: 300px; }
    .news {
        display: flex;
        flex-direction: column;
        min-width: 300px;
    }
    .title { font-size: 20px; }
    .image-content {
        display: flex;
        width: 300px;
        height: 300px;
        float: none;
        margin: 0 auto;
    }
    .edit-par {
        margin-top: 40px;
        margin-bottom: -10px;
    }
    .auteur { bottom: 20px; }

    /*          QUANTITE            */
    div.quant{
        flex-direction: column;
    }
    span.quant {
        margin-top: -20px;
    }

    .user_invite{
        flex-wrap: wrap;
    }
}