
#SlideOutBackground {
    position:fixed;
    z-index:-1000;
    top:0;
    left:0;
    width:100vw;
    height: 100vh;
    background-color:rgba(0,0,0,0.8);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.slide-out {
    position:fixed;
    z-index:1200;
    top:0;
    right:0;
    width:80vw;
    height:100vh;
    background:var(--light);
    overflow-y:auto;
    -webkit-transform: translateX(110vw);
    -moz-transform: translateX(110vw);
    -ms-transform: translateX(110vw);
    -o-transform: translateX(110vw);
    transform: translateX(110vw);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

#SlideOutBackground.show {
    z-index: 1100;
    opacity:1;
    visibility:visible;
}

.slide-out.show {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.social-media-link {
    font-size: 20px;
    margin: 0 4px;
}
