/* Responsive */
@media all and (max-width:576px){
    main {
        width: 100%;
    }


}
@media all and (min-width:577px) and (max-width:768px){
    main {
        width: 570px;
        margin: auto;
    }
}
@media all and (min-width:769px) {

    main {
        width: 765px;
        margin: auto;
    }

}



/* General */
body , * , ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: #003366;
    background-image: linear-gradient(to bottom, #F5FAFF, #CCFFFF);
    min-height: 100vh;
}
header {
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 10px;
    box-shadow: 0 2px 5px 1px #808080;
    background-color: #CCFFFF;
}
nav {
    height: 50px;

}
main {
    padding: 10px;
}

footer {
    background-image: linear-gradient(to bottom, #AFEEEE, rgba(245, 250, 255, 0));
    font-weight: bold;
    color: #003366;
    text-align: center;
    padding: 10px;
}
fieldset {
    width: 340px;
    margin: auto;
    background-image: linear-gradient(to bottom, #5CC3FF, #CCFFFF);
}
fieldset label, fieldset input ,fieldset select , fieldset div , fieldset textarea {
    display: block;
    width: 95%;
    margin: auto;
    padding: 2px;
}
fieldset button {
    display: block;
    margin: 5px;
    padding: 5px;
    background-color: #003366;
    color: #CCFFCC;
    box-shadow: 1px 1px 1px 1px #008080;
}
fieldset textarea {
    resize: none;
    height: 200px;
}

h6 {
    display: none;
}
iframe {
    width: 0;
    height: 0;
}

/* class */

.a-categorie a {
    display: block;
    color: #003366;
    width: 200px;
    margin: auto;
}

#menu .a-sous-categorie a {
    margin-left: 35px;
}

.a-page{
    display: none;
}

.a-sous-categorie:hover .a-page {
    display: block;
    margin-left: 10px;
}


.msg-success {
    background-color: #99FF66;
    color: #006600;
    width: 100%;
    padding: 5px;
}
.msg-alert {
    background-color: #FFFF99;
    color: #FF9900;
    width: 100%;
    padding: 5px;
}
.msg-info {
    background-color: #CCFFFF;
    color: #003366;
    width: 100%;
    padding: 5px;
}
.msg-danger{
    background-color: #FF9999;
    color: #FF0000;
    width: 100%;
    padding: 5px;
}
.affichage-photos form {
    display: inline-block;
}

.affichage-photos img {
    display: block;
    height: 150px;
    width: 150px;
}

.affichage-categories , .affichage-sous-categories , .affichage-pages , .affichage-disponibilites , .affichage-reservations{
    width: 100%;
    margin: auto;
}

.affichage-categories form , .affichage-sous-categories form , .affichage-pages form , .affichage-disponibilites form , .affichage-reservations form{
    display: inline-block;
}

.supprimer {
    height: 15px;
    width: 15px;
    background-image: url(images/delete.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: rgba(255, 255, 255, 0) 0px none;
    cursor: pointer;
}

.modifier {
    height: 15px;
    width: 15px;
    background-image: url(images/edit.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: rgba(255, 255, 255, 0) 0px none;
    cursor: pointer;
}

.spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 3px solid #CCFFFF;
    border-top: 4px solid #003366 ;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}
@keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
}
.lien-reservation , #afficher-plus {
    display: block;
    width: 100%;
    background-color: #003366;
    color: #CCFFFF;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}
.a-reservation {
    display: block;
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 10px;
    background-color: #003366;
    color: #CCFFFF;
}
.liens-prestations {
    color: #CC3300;
}
.liens-articles {
    color: #009999;
}
.liens:before {
    display: inline-block;
    content: "[";
    padding: 1px;
    color: #000000;
}
.liens:after {
    display: inline-block;
    content: "]";
    padding: 1x;
    color: #000000;
}

.liens-bas2 {
    color: #6F6F6F;
}

/* id */

#humberger {
    width: 35px;
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;

}

#barre {
    width: 100%;
    height: 5px;
    background-color: #003366;
    transition: 0.5s all;
}
#barre:before {
    display: block;
    content:"";
    width: 100%;
    height: 5px;
    background-color: #CC3300;
    margin-top: -10px;
    transition: 0.5s all;
}
#barre:after {
    display: block;
    content:"";
    width: 100%;
    height: 5px;
    background-color: #CC3300;
    margin-top: 15px;
    transition: 0.5s all;
}

#social {
    background-color: #CC3300;
    color : #FFFFFF;
    height: 20px;
}
#hero {
     text-align: center;
}

#hero img {
    width: 350px;
    max-width: 100%;
}

#logo img {
    height: 50px;
}

#menu {
    position: fixed;
    top: 0px;
    left: 0;
    padding-top: 20px;
    opacity: 0;
    width: 0;
    min-height: 100%;
    background-color: #003366;
    overflow-y: scroll;
    transition: 0.5s all;
}
#menu a {
    display: block;
    color: #CCFFCC;
    width: 250px;
    margin: auto;
}

#check-box {
    display: none;
}

#check-box:checked ~ #menu {
    opacity:1;
    width: 310px;

}
#check-box:checked ~ #humberger #barre {
    height: 0;

}

#check-box:checked ~ #humberger #barre:before {
    transform: rotate(-45deg);
    margin-top: 0px;

}
#check-box:checked ~ #humberger #barre:after {
    transform: rotate(45deg);
    margin-top: -5px;

}
#menu-admin {
    background-color: #B0E0E6;
    color: #003366;
    padding: 5px;
    text-align: center;
}
#loading-disponibilites {
    width: 100%;
    text-align: center;
}