#headerid{
    padding-top:1em;
    height: 7em;
    background: #eb5a5f;
    transition:500ms;
    position: fixed;
    width:100%;
    margin-bottom: 10em;
    z-index: 2000;
    overflow: hidden;
    box-shadow: 0px 2px 5px rgba(0, 0, 0,.2);
}
#margeHeader{
    height:7em;
    transition:500ms;
}
img{
    height: 100%;
}
#logoChampionnat{
    height: 100%;
}
#titreHeader{
    height: 5em;
    text-align: center;
}
#sectionPages{
    height: 4em;
    text-align: center;
    vertical-align: middle;
}


#sectionPublic{
    display: flex;
    justify-content: center;
    vertical-align: middle;
}
#sectionPublic a{
    padding: 0.8em;
    text-decoration: none;
    color: white;
    transition-duration: 200ms;
}
#sectionPublic a:hover{
    color : #bababa;
    transition-duration:500ms;
}
#sectionPublic h3{
    font-size: 1em;
}
#sectionPublicDeroulant{
    display: block;
    justify-content: center;
    text-align: center;
}
#sectionPublicDeroulant a{
    padding: 1em;
    text-decoration: none;
    color: white;
    transition-duration: 200ms;
}
#sectionPublicDeroulant a:hover{
    color : #bababa;
    transition-duration:500ms;
}
#sectionPublicDeroulant h3{
    font-size: 1em;
}
#sectionPro{
    display: flex;
    justify-content: center;
    text-align: center;
}
#sectionPro h3{
    font-size: 0.9em;
}
#sectionPro a{
    padding-left: 1em;
    text-decoration: none;
    color: #006486;
    transition-duration: 200ms;
}
#sectionPro a:hover{
    color : white;
    transition-duration:500ms;
}
#sectionProDeroulant{
    display: block;
    justify-content: center;
    text-align: center;
}

#sectionProDeroulant h3{
    font-size: 0.7em;
}
#sectionProDeroulant a{
    padding-left: 1em;
    text-decoration: none;
    color: #006486;
    transition-duration: 200ms;
}
#sectionProDeroulant a:hover{
    color : white;
    transition-duration:500ms;
}
#menuDeroulant{
    display: none;
    opacity: 0;
}



@media (min-width: 992px) {
    #sectionBarreNav{
        display: none;
    }
    #sectionPages{
        display: block;
        /* position: fixed; */
    }
}
@media (max-width: 992px) {
    #sectionBarreNav{
        display:block;
        height:4em;
    }
    #sectionPages{
        display: none;
    }
    /* #menuDeroulant{
        display: block;
        position: fixed;
    } */
    #logoChampionnat{
        height: 80%;
    }
}


/* Menu deroulant */
.barres{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:80%;
    height: 80%;
    cursor: pointer;
    transition-duration: 200ms;
}

.hamburgerHeader{
    width: 2.5em;
    height: 0.15em;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(0em, 1.5em);
    box-shadow: 0px 2px 5px rgba(0, 0, 0,.2);
    transition:500ms
}
.hamburgerHeader:before, .hamburgerHeader:after{
    content:'';
    position: absolute;
    width: 2.5em;
    height: 0.15em;
    background: #006486;
    box-shadow: 0px 2px 5px rgba(0, 0, 0,.2);
    transition:500ms
}
.hamburgerHeader:before{
    top:-0.8em;
}
.hamburgerHeader:after{
    top:0.8em;
}

.barres.on .hamburgerHeader{
    background: rgba(0, 0, 0,0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0,0);
    transition:500ms
}
.barres.on .hamburgerHeader:before{
    top:0;
    transform : rotate(45deg);
    transition:500ms
}
.barres.on .hamburgerHeader:after{
    top:0;
    transform : rotate(-45deg);
    transition:500ms
}
#menuDeroulant.on{
    animation: enter;
    animation-duration:800ms;
    display: block;
    opacity: 1;
    transition:500ms
}
#headerid.large{
    height: 32em;
    transition:500ms
}
#margeHeader.large{
    height: 32em;
    transition:500ms
}

@keyframes enter {
    from {
      opacity: 0;
      transform: translate(0px, -10vh);
    }
  
    to {
      opacity: 1;
      transform: translate(0px, 0px);
    }
}


.barres.hover .hamburgerHeader:before{
    transform : translate(-0.5em,0em);
}
.barres.hover .hamburgerHeader:after{
    transform : translate(-0.5em,0em);
}

.barres.on.hover .hamburgerHeader:before{
    transform : rotate(-45deg);
}
.barres.on.hover .hamburgerHeader:after{
    transform : rotate(45deg);
}