/* side menu */
/*
    data-visible : "show","hide"
*/
.sidemenu-button{
    position : fixed;
    right : 20px;
    top : 10px;
    background-color: rgba(0,0,0,0.00);
    border: none;
    z-index: 1500;
    outline-color: rgba(255,184,114,0.5);    
    
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}
.sidemenu-button:hover{
    transform: scale(1.05,1.05);
    filter : brightness(130%);
}
.sidemenu-button:hover,
.sidemenu-button:active,
.sidemenu-button:focus{
    outline-color: rgba(255,184,114,0.0); 
}

.sidemenu-back {
    position: absolute;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.5);   
}
.sidemenu-frame{
    position: absolute;
    background-image: url(sidemenu/back.png);      
    left : 30%;
    top : 0px;
    width:100%;
    height:100%;
}

#sidemenu {
    display : block;
    overflow : hidden;
    left:0%;
    top:0%;
    position:fixed; 
    width:100%; 
    height:100%; 
    z-index:1500;
}
#sidemenu {
    /* startup hide */
    left:100%;
}

#sidemenu[data-visible="show"]{
    animation-fill-mode: both;
    animation-name: sidemenushow;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
#sidemenu[data-visible="hide"]{
    animation-fill-mode: both;
    animation-name: sidemenuhide;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
#sidemenu[data-visible="none"]{
    left:100%;
}

@keyframes sidemenushow {
    0% { left:100%; }
    100% { left:0%; }
}
@keyframes sidemenuhide {
    0% { left:0%; }
    100% { left:100%; }
}

ul.sidemenuitems {
    list-style : none;
    margin: 0;
    padding: 0;
}
ul.sidemenuitems li {
    margin: 0;
}
ul.sidemenuitems a {
    position : relative;
    display : block;
    z-index : 1;
}
ul.sidemenuitems a::before {
    position: absolute;
    content: "";
    left : 0%;
    top : 20%;
    right : 100%;
    bottom : 20%;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    background-color: rgba(200,0,0,0.5);
    z-index : -1;
}
ul.sidemenuitems a:active::before,
ul.sidemenuitems a:focus::before,
ul.sidemenuitems a:hover::before {
    right : 0%;
    background-color: rgba(200,0,0,0.5);
}
ul.sidemenuitems a.active{  /* scroll spy */
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    border-bottom: 1px solid rgba(136,113,68,1.00);
}

ul.sidemenuitems li{
    position:relative;
}

ul.sidemenuitems img.activecrown{
    position:absolute;
    left : 50%;
    top: -20px;
}