.qm-slider {
    position: relative;
    z-index: 500;
    overflow: hidden;

    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-areas: "main" "images";
}

.qm-theme-light .qm-slider {
    border-top: 1px solid #F4F3ED;
    border-bottom: 1px solid #F4F3ED;
}

.qm-theme-dark .qm-slider {
    border-top: 1px solid #282828;
    border-bottom: 1px solid #282828;
}

.qm-slider-background {
    position: absolute;
    z-index: 505;

    top: 0px;
    left: 0px;

    height: 100%;
    width: 100%;

    filter: blur(6px);

    -webkit-transition: background-image 0.7s ease-in;
    -moz-transition: background-image 0.7s ease-in;
    -o-transition: background-image 0.7s ease-in;
    transition: background-image 0.7s ease-in;
}

.qm-slider-main {
    position: relative;

    grid-area: main;

    z-index: 510;

    height: 100%;
}

.qm-theme-light .qm-slider-main {
    border-bottom: 1px solid #F4F3ED;
}

.qm-theme-dark .qm-slider-main {
    border-bottom: 1px solid #282828;
}

.qm-slider-images-container {
    grid-area: images;
    overflow: hidden;
}

.qm-slider-main-img {
    position: absolute;
    z-index: 520;

    top: 0px;
    left: 0px;

    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

.qm-slider-main-img.qm-slider-main-img-transition {
    -webkit-transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transition: left 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.qm-slider-main-img.qm-slider-main-img-prepare-in-left {
    left: -100%;
}

.qm-slider-main-img.qm-slider-main-img-prepare-in-right {
    left: 100%;
}

.qm-slider-main-img.qm-slider-main-img-out-left {
    left: -100%;

    -webkit-transition: left 0.5s ease-in;
    -moz-transition: left 0.5s ease-in;
    -o-transition: left 0.5s ease-in;
    transition: left 0.5s ease-in;
}

.qm-slider-main-img.qm-slider-main-img-out-right {
    left: 100%;

    -webkit-transition: left 0.5s ease-in;
    -moz-transition: left 0.5s ease-in;
    -o-transition: left 0.5s ease-in;
    transition: left 0.5s ease-in;
}

.qm-slider-main-img-title {
    padding: 5px 15px;
}

.qm-theme-light .qm-slider-main-img-title {
    background-color: #FFFFFFCC;
}

.qm-theme-dark .qm-slider-main-img-title {
    color: #FFFFFF;
    background-color: #00000099;
}

.qm-slider-main-content {
    position: relative;
    z-index: 530;

    height: 100%;

    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.qm-slider-main-nav-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    padding-left: 30px;
}

.qm-slider-main-nav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding-right: 30px;
}

.qm-theme-light .qm-slider-main-nav-left,
.qm-theme-light .qm-slider-main-nav-right,
.qm-theme-light .qm-slider-nav-fullscreen-open,
.qm-theme-light .qm-slider-nav-fullscreen-close {
    color: #fff;
}

.qm-theme-dark .qm-slider-main-nav-left,
.qm-theme-dark .qm-slider-main-nav-right,
.qm-theme-dark .qm-slider-nav-fullscreen-open,
.qm-theme-dark .qm-slider-nav-fullscreen-close {
    color: #595959;
}

.qm-slider-main-nav-right,
.qm-slider-main-nav-left,
.qm-slider-nav-fullscreen-open,
.qm-slider-nav-fullscreen-close {
    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out;
    -o-transition: color 0.5s ease-in-out;
    transition: color 0.5s ease-in-out;
}

.qm-theme-light .qm-slider-main-nav-right:hover,
.qm-theme-light .qm-slider-main-nav-left:hover,
.qm-theme-light .qm-slider-nav-fullscreen-open:hover,
.qm-theme-light .qm-slider-nav-fullscreen-close:hover {
    cursor: pointer;
    color: #595959;
}

.qm-theme-dark .qm-slider-main-nav-right:hover,
.qm-theme-dark .qm-slider-main-nav-left:hover,
.qm-theme-dark .qm-slider-nav-fullscreen-open:hover,
.qm-theme-dark .qm-slider-nav-fullscreen-close:hover {
    cursor: pointer;
    color: #fff;
}

.qm-slider-main-nav-center {
    position: relative;
}

.qm-slider-nav-fullscreen-open {
    position: absolute;
    font-size: 1.5em;
    padding: 15px;
    bottom: 0px;
    right: 19px;
}

.qm-slider-nav-fullscreen-close {
    display: none;
    position: absolute;
    font-size: 1.5em;
    padding: 15px;
    top: 19px;
}

.qm-slider-nav-fullscreen-open:hover, .qm-slider-nav-fullscreen-close:hover {
    cursor: pointer;
}

.qm-slider-images {
    position: relative;
    z-index: 520;

    left: 0px;

    height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    -webkit-transition: left 0.7s ease-out;
    -moz-transition: left 0.7s ease-out;
    -o-transition: left 0.7s ease-out;
    transition: left 0.7s ease-out;
}

.qm-slider-images img {
    position: relative;
    height: 100%;

    -webkit-transition: margin-left 0.8s ease-in-out, margin-right 0.8s ease-in-out;
    -moz-transition: margin-left 0.8s ease-in-out, margin-right 0.8s ease-in-out;
    -o-transition: margin-left 0.8s ease-in-out, margin-right 0.8s ease-in-out;
    transition: margin-left 0.8s ease-in-out, margin-right 0.8s ease-in-out;
}

.qm-slider-images img {
    margin-right: 15px;
}

.qm-slider-images img.active {
    margin-right: 80px;
    margin-left: 80px;
}

.qm-slider-images img:hover {
    cursor: pointer;
}


/* Fullscreen */

body.qm-fullscreen {
    overflow: hidden;
}

/*
.qm-fullscreen-bg {
    opacity: 0;
}

body.qm-fullscreen .qm-fullscreen-bg {
    z-index: 1400;
    position: fixed;

    top: 0px;
    left: 0px;

    height: 100%;
    width: 100%;

    opacity: 1;

    background-color: #FFFFFF;

    -webkit-transition: opacity 1.0s ease-in-out;
    -moz-transition: opacity 1.0s ease-in-out;
    -o-transition: opacity 1.0s ease-in-out;
    transition: opacity 1.0s ease-in-out;
}

body.qm-fullscreen.qm-fullscreen-out .qm-fullscreen-bg {
    opacity: 0;
}
*/

.qm-slider.qm-slider-fullscreen {
    z-index: 1500;
}

.qm-slider.qm-slider-fullscreen .qm-slider-nav-fullscreen-open {
    display: none;
}

.qm-slider.qm-slider-fullscreen .qm-slider-nav-fullscreen-close {
    z-index: 1520;
    display: block;
}

.qm-slider.qm-slider-fullscreen .qm-slider-background {
    z-index: 1515;
}

.qm-slider.qm-slider-fullscreen .qm-slider-background-foregroud {
    z-index: 1511;
    position: absolute;

    top: 0px;
    left: 0px;

    height: 100% !important;
    width: 100% !important;

    background-color: #FFFFFF00;

    -webkit-transition: background-color 2.0s ease-in-out;
    -moz-transition: background-color 2.0s ease-in-out;
    -o-transition: background-color 2.0s ease-in-out;
    transition: background-color 2.0s ease-in-out;
}

.qm-slider.qm-slider-hide-bg .qm-slider-background-foregroud {
    background-color: #FFFFFFFF;
}

.qm-slider.qm-slider-fullscreen .qm-slider-main {
    z-index: 1515;
}

.qm-slider.qm-slider-fullscreen .qm-slider-main, .qm-slider.qm-slider-fullscreen .qm-slider-background {
    position: fixed;

    top: 0px;
    left: 0px;

    height: 100% !important;
    width: 100% !important;
}

.qm-slider.qm-slider-fullscreen .qm-slider-images-container {
    height: 0px !important;
}