/*
 * css du front du slideshow
 */
 
 
/*slideshow*/
.spss_slideshow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}


/* slides */
.spss_slideshow .spss_slide {
    position: absolute;
    width: 100vw;
    height: 100vh;
    /* transition: all 800ms ease-in-out; */
    top: 0;
    left: 100vw;
    overflow : hidden;
    background-size : cover;
}

.spss_slideshow .spss_slide.on {
    left: 0;
    animation: slidein 800ms forwards;
}

.spss_slideshow .spss_slide.off {
    left: -100vw;
    animation: slideout 800ms;
}

@keyframes slidein {
    from{ left: 100vw}
    to {left : 0}
}

@keyframes slideout {
    from{left: 0}
    to{left: -100vw}
}

/* video */
.spss_slideshow .spss_slide > video {
    width: 100%;
    height: 100%;
    min-width: 100%;
    background-color: #000000;
    min-height: 100%;
    object-fit: cover;
}

/* content */
.spss_slideshow .spss_slide .spss_content {
    background-color: #fff;
    color: #000;
    padding: 20px;
    position: absolute;
    top: 110vh;
    left: calc(50% + 80px);
    right: 80px;
    z-index: 10;
    font-size: 1.2em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-height: calc(50vh - 160px);
    transition: top 400ms 800ms ease-in-out;
}

.spss_slideshow .spss_slide.on .spss_content {
    top: 80px;
}

.spss_slideshow .spss_content h1, 
.spss_slideshow .spss_content h2, 
.spss_slideshow .spss_content h3, 
.spss_slideshow .spss_content h4, 
.spss_slideshow .spss_content h5, 
.spss_slideshow .spss_content h6 {
    font-weight: bold;
    margin-bottom: 20px;
}
.spss_slideshow .spss_content h1{
    font-size: 2.5em;
}
.spss_slideshow .spss_content h2{
    font-size: 2em;
}
.spss_slideshow .spss_content h3{
    font-size: 1.5em;
}
.spss_slideshow .spss_content h4{
    font-size: 1.2em;
}