/*
----------------------------------------------------------
CRIDF Tir à l'arc
Menu principal responsive
----------------------------------------------------------
*/

.NavBar{
    width:100%;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    border-bottom:3px solid #999;
    font-family:Arial;
}

/* chaque bloc menu */
[class^="DMenu"]{
    position:relative;
    margin:0 20px;
}

/* bouton principal */
[class^="DropBtn"]{
    cursor:pointer;
    font-weight:bold;
    color:#666;
}

/* menu déroulant */
[class^="Drop-Content"]{
    display:none;
    position:absolute;
    top:22px;
    left:0;
    background:#fff;
    border:1px solid #999;
    min-width:180px;
    box-shadow:2px 2px 3px #666;
    border-radius:2px 2px 5px 5px;
    z-index:9999;
}

[class^="Drop-Content"] a{
    display:block;
    padding:7px 10px;
    text-decoration:none;
    color:#333;
}

[class^="Drop-Content"] a:hover{
    background:#f3f3f3;
}

/* couleurs par rubrique */

.DropBtn1:hover{ color:#960018; }
.DropBtn2:hover{ color:#019e46; }
.DropBtn3:hover{ color:#e55a00; }
.DropBtn4:hover{ color:#318ce7; }
.DropBtn5:hover{ color:#884da7; }
.DropBtn6:hover{ color:#a87e29; }
.DropBtn7:hover{ color:#2964a8; }
.DropBtn8:hover{ color:#999; }

.Drop-Content1{ border-top:5px solid #960018; }
.Drop-Content2{ border-top:5px solid #019e46; }
.Drop-Content3{ border-top:5px solid #e55a00; }
.Drop-Content4{ border-top:5px solid #318ce7; }
.Drop-Content5{ border-top:5px solid #884da7; }
.Drop-Content6{ border-top:5px solid #a87e29; }
.Drop-Content7{ border-top:5px solid #2964a8; }
.Drop-Content8{ border-top:5px solid #666; }

.show{
    display:block;
}

/* ----------------------- */
/* bouton hamburger */
/* ----------------------- */

#Hamburger{
    display:none;
    font-size:20px;
    padding:12px;
    text-align:center;
    background:#f5f5f5;
    cursor:pointer;
    border-bottom:2px solid #999;
}

/* ----------------------- */
/* responsive mobile */
/* ----------------------- */

@media screen and (max-width:768px){

#Hamburger{
    display:block;
}

.NavBar{
    display:none;
    flex-direction:column;
}

.NavBar.open{
    display:flex;
}

[class^="DMenu"]{
    width:100%;
    margin:0;
    padding:12px;
    text-align:center;
    border-bottom:1px solid #ddd;
}

[class^="Drop-Content"]{
    position:relative;
    width:100%;
    top:0;
}

}