#demo-1 {
			position: relative; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
			overflow: hidden; /* to bound the empty top space created by inner element's top margin */
			width:  70%;
			min-height: 100vh;
			background-color: #fff;
			float:right;
			z-index:9;
		}
		


			#AnimationAccueil {
			position: relative; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
			overflow: hidden; /* to bound the empty top space created by inner element's top margin */
			width:  100%;
			min-height: 100vh;
			background-color: #fff;
			float:left;
			display:block;
		}
	
		#AnimationAccueil:after {
    content: "";
    position: absolute;
    display: block;
    width: 38%;
    height: 100%;
    top: 0;
    z-index: 10;
    background-color: rgba(255, 255, 255, 1);
    -webkit-transform: skew(-12deg,0deg);
    -moz-transform: skew(-12deg,0deg);
    -ms-transform: skew(-12deg,0deg);
    -o-transform: skew(-12deg,0deg);
    transform: skew(-12deg,0deg);
}






		.demo-inner-content {
			position: relative; /* if position is not set, the script will set it to 'relative'. */
			z-index: 2; /* if z-index is not set, the script will set it to '2'. */
			margin: 180px auto;
			padding: 40px;
			max-width: 600px;
			color: #fff;
			text-align: center;
			font-size: 1.5em;
		}
		.demo-inner-content h1 {
			font-size: 2.5em;
			margin: 0;
		}






.zs-enabled{position:relative}
.zs-enabled .zs-slideshow,
.zs-enabled .zs-slides,
.zs-enabled .zs-slide{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;overflow:hidden}
.zs-enabled .zs-slideshow .zs-slides .zs-slide{filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);background:transparent none no-repeat 50% 50%;background-size:cover;position:absolute;visibility:hidden;opacity:0;-webkit-transform:scale(1.2, 1.2);-moz-transform:scale(1.2, 1.2);-ms-transform:scale(1.2, 1.2);-o-transform:scale(1.2, 1.2);transform:scale(1.2, 1.2)}
.zs-enabled .zs-slideshow .zs-slides .zs-slide.active{visibility:visible;opacity:1}
.zs-enabled .zs-slideshow .zs-bullets { position: absolute; z-index: 4;  bottom: 0px; right: 5px; /* width: 100%; */ text-align: center;}
.zs-enabled .zs-slideshow .zs-bullets .zs-bullet{display:inline-block;cursor:pointer;border:0px solid #ccc;width:8px;height:8px;border-radius:8px;margin:5px;background-color:#fff}
.zs-enabled .zs-slideshow .zs-bullets .zs-bullet.active{background-color:#333}
.zs-enabled .zs-slideshow:after{content:" ";position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:transparent none repeat 0 0}
.zs-enabled.overlay-plain .zs-slideshow:after{background-image:url(plain.png)}
/*.zs-enabled.overlay-dots .zs-slideshow:after{background-image:url(dots.png)}*/
@media only screen and (max-width: 900px) {
#AnimationAccueil::after { width:49%;  }
}
@media only screen and (max-width: 700px) {
#AnimationAccueil::after { width:56%;  }
}
@media only screen and (max-width: 550px) {
#demo-1 {width:100%; }
#AnimationAccueil::after { display:none; }
.zs-enabled .zs-slideshow, .zs-enabled .zs-slides, .zs-enabled .zs-slide { height:100vh; }
}