/*
 * css du front du slideshow
 */
 
 
/*slideshow*/
body {
  overflow-x: hidden;
}


.spss_slideshow{
	position: relative;
    /* left: 50%; */
    /* margin-left: -50vw; */
    /* width: 100vw; */
    width: 100%;
    overflow: hidden;
}


.spss_slides_container{
	position : relative;
	height: 100%;
	width : 300vw;
	margin-left : -100vw; 
}

/**************************************************************************
	slide
**************************************************************************/
.spss_slide {
   position: absolute;
   height:  100%;
   overflow:  hidden;
   box-sizing : border-box;
   top: 0;
   width : 100vw;
   left: 200vw;
   z-index:  10;
   
    background-size:  cover;
    background-position: center center;
}

.spss_slide.on {
    left: 100vw;
    z-index:  20;
	transition: left 800ms ease-in-out;
}

.spss_slide.off {
    left: 0;
    z-index:  20;
	transition: left 800ms ease-in-out;
}

.spss_slide .spss_title{
	background-color : #fff;
	display : inline-text;
	padding : 1em;
	font-size : 2em;
	font-weight : bold;
	text-transform : capitalize;
	line-height : 1.5em;
}


/*****
default
******/
.spss_slide-default .spss_title {
	position : absolute;
	top : 2em;
	left : 2em;
}

.spss_slide-default .spss_content {
    position: absolute;
    background:  #eee;
    padding: 2em;
}

/*orientation*/
.spss_slideshow.vertical .spss_slide-default .spss_content {
    bottom: 0;
	min-height : 25%;
	left : 0;
	right : 0;
}

.spss_slideshow.horizontal .spss_slide-default .spss_content {
    right : 0;
	width : 50%;
	height : 100%;
	top : 0;
	bottom : 0;
}

.spss_slideshow.vertical .spss_slide-default .spss_title {
    max-width : calc(66% - 4em);
}

.spss_slideshow.horizontal .spss_slide-default .spss_title {
    max-width : calc(50% - 4em);
}

/* animations */
.spss_slide-default.on .spss_title{
	animation-name: default-title;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
	animation-timing-function:ease-in-out;
}

.spss_slideshow.vertical .spss_slide-default.on .spss_content{
	animation-name: default-content-vertical;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
	animation-timing-function:ease-in-out;
}

.spss_slideshow.horizontal .spss_slide-default.on .spss_content{
	animation-name: default-content-horizontal;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
	animation-timing-function:ease-in-out;
}

/*****
aside
*****/
.spss_slide-aside .spss_title{
	position : absolute;
	top : 2em;
	left : 2em;
	max-width : calc(66% - 4em);
}

/*orientation*/
.spss_slideshow.horizontal .spss_slide-aside .spss_title {
    /*width: 33%;*/
}

/* animation */
.spss_slide-aside.on .spss_title{
	animation-name: aside-title;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
	animation-timing-function:ease-in-out;
}

/*****
quote
*****/
.spss_slide-quote{
	padding : 2em;
}

.spss_slide-quote.on .spss_content{
	position : relative;
	animation-name: quote-content;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
	animation-timing-function:cubic-bezier(.52,.28,.77,1);
}

.spss_slide-quote .spss_quote_container {
    text-align:  center;
    height:  100%;
    line-height:  300px;
}

.spss_slide-quote .spss_content {
    line-height: 1.2em;
	display : inline-block;
	font-size: 2.4em;
    font-style:  italic;
	color : #fff;
	text-shadow : 1px 1px 1px rgba(0,0,0,1);
	width : 80%;
	margin : 0 auto;
}

/*****
video
******/
.spss_slide-video{
	
}

.spss_slide video{
	position: absolute;
    top: calc((100vh - 1080px) / 2);
    left: 0;
	max-width : 9999px;
}



/*******************************************************************
animations
*******************************************************************/
/* quote */
@keyframes quote-content{
	0% {
		left : 200vw;
		opacity : 0;
	}
	
	10% {
		left : 200vw;
		opacity : 0;
	}
	
	100%{
		left : 0;
		opacity : 1;
	}
}

/* aside */
@keyframes aside-title{
	0% {
		top : 200vh;
	}
	
	100%{
		top : 2em;
	}
}

/* default */
@keyframes default-title{
	0% {
		top : 200vh;
	}
	
	100%{
		top : 2em;
	}
}

@keyframes default-content-vertical{
	0% {
		bottom : -200vh;
	}
	
	30% {
		bottom : -200vh;
	}
	
	100%{
		bottom : 0;
	}
}

@keyframes default-content-horizontal{
	0% {
		right : -200vw;
	}
	
	30% {
		right : -200vw;
	}
	
	100%{
		right : 0;
	}
}