html, body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
}

#slider_container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 1vw;
}

#slider {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate(0);
}

.slider_image {
    position: absolute;
    max-height: 95%;
    visibility: hidden;
    cursor: pointer;
    filter: none;
    -webkit-filter: brightness(100%);
}

.slider_image:hover {
    -webkit-filter: brightness(70%);
    /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .1s ease;
    /* Fade to color for Chrome and Safari */
}

.slider_image:fullscreen {
    -webkit-filter: brightness(100%);
}

#leftButton {
    position: absolute;
    top: 38%;
    left: 1%;
    width: 5%;
    height: 12%;
    cursor: pointer;
}

#rightButton {
    position: absolute;
    top: 38%;
    left: 92%;
    width: 5%;
    height: 12%;
    cursor: pointer;
}

.buttonOnHover:hover {
    /*opacity: .7;*/
    transform: scale(1.2);
    transition: transform 200ms ease-in-out;
}

.buttonOnHover:active {
    transform: scale(0.8);
}

#imgFullscreenContainer {
    visibility: hidden;
    background: white;
    position: absolute;
    top: -100%;
    left: -100%;
    width: 50%;
    height: 50%;
    border: 1px solid red;
}

.ImgFullscreen {
    position: absolute;
    visibility: hidden;
    max-height: 80%;
    max-width: 80%;
    border: 1px solid red;
}

#xButton {
    position: absolute;
    top: 5%;
    left: 88%;
    width: 7%;
    height: 7%;
    cursor: pointer;
}