/*
        NAV */
.offcanvas-body>ul>li>a {
        color: whitesmoke;
        margin: 0 1.5rem 0 0
}
.offcanvas-body>ul>li>a:hover {
        text-decoration:underline;
        color:rgb(221, 96, 159)
}


/* 
        MAIN */
main {padding:1rem}


main>section {
        display:flex;
        flex-flow:row wrap
}

/* COLONNE 1 */
main>section>section:first-child {
        padding:1rem;
        flex:2;
        min-width:300px
}
/* COLONNE 2 */
main>section>section:last-child {
        text-align:center;
        padding:1rem;
        flex:1;
        min-width:300px
}

main>section>section:last-child img {
        width:100%
}

main>section>section:last-child audio {
        margin:auto;
}

.senacra {
        margin: auto;
        width:50%;
}

/* 
        FOOTER */
footer>address>ul a {color:rgb(158, 146, 228)}

footer>address>ul {
        font-size:1.5rem;
        display:flex;
        flex-flow:row wrap;
        align-items:center;
        justify-content:center
}

footer>address>ul>li {
        vertical-align: middle;
}

footer>address>ul i {color:rgb(221, 96, 159)}

address>ul>li a, address>ul>li span {padding:0.5rem 1.5em 0 0.5rem}


/*
        MESSAGES */
#message>div {
        padding:1.3rem;
        display:flex;
        position:fixed;
        top:8.5rem;
        left:-100%;
        animation:myfirst 10s;
        animation-direction:alternate
}

#message>div>h6 {
        color:rgb(158, 146, 228);
        font-size:2rem;
        font-weight:bold
}
        
@keyframes myfirst {
        0%      {left:-100%}
        30%     {left:10rem}
        70%     {left:10rem}
        100%    {left:-100%}
}

@media (max-width:700px) {
        #message>div>h6 {font-size:1.4rem}
        #message>div {top:6rem}
}

@media (max-width:400px) {
        #message>div>h6 {font-size:1rem}
        #message>div {top:4rem}
}


/*
        CONTROLS */
#myMenuHeader>div {
        z-index:10;
        position:fixed;
        bottom:0;
        left:0;
        right:0
}

#myMenuHeader>form:first-child i,
#myMenuHeader>div:last-child {color:rgb(255, 255, 255, .1)}

#myMenuHeader>form:first-child i:hover,
#myMenuHeader>div:last-child:hover {
        color:rgb(255, 255, 255, 0.75)
}

#myMenuHeader>form:first-child i        {
        font-size:8em;
        margin:1rem 1rem 0.25rem 1rem
}

#myMenuHeader>form,
#myMenuHeader>div {
        justify-content:space-between
}
        
#myMenuHeader>div:hover {
        background-color:rgb(42, 42, 42, 0.15)
}
        
#myMenuHeader>form>button, #myMenuHeader>form>button:active {
        background-color:transparent;
        border:none
}


/*
DATEPARTY */
#dateTimeParty {
        flex-flow:row wrap;
        justify-content:space-around
}

#dateTimeParty>div {
        display:flex;
        flex-flow:row wrap
}

#dateTimeParty ul {padding:2rem}