/* ===================================================
/* HERO-VIDEO-IMAGE
/* Montre Hero Video ET sur le mobile IMAGE mais toujours 100vh!!
*/


/*Video Format .m4v .webm 25FPS LAVF54 VP8
/* 1920 x 1080 DAR16:9 
/*
*/
.hero-image,
.hero-image-change,
.hero-video,
.hero-video-change,
.hero-video-image {
	position:relative;
	margin:0 auto;
	padding:0px;
	display:block;
	width:100%;
	overflow:hidden;
	z-index:400;
}
.hero-image,
.hero-video,
.hero-video-image {
	height:100vh;
}

/*Cover Image 
/*DAR3:1 667x1000
*/

.hero-image .cover-image,
.hero-image-change .cover-image,
.hero-video-image .cover-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    width: 100%;
   	height: 100%;
   	display:block;
 	overflow:hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index:401;
}
.hero-image .cover-image-image-overlay,
.hero-image-change .cover-image-overlay,
.hero-video-image .cover-image-overlay {
	position:absolute;
 	top:0;
 	left:0;
 	bottom:0;
 	height:100%;
 	width:100%;
 	display:block;
 	overflow:hidden;
 	z-index:402;
 	transition: 3s all ease-out 0s;
}

.hero-image .image-wrapper,
.hero-video .video-wrapper,
.hero-video-image .video-wrapper {
    position: absolute;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100%;
   	z-index:403;
 }
.hero-image-change .image-wrapper, 
.hero-video-change .video-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    z-index: 1;
    background: #ccc;
    z-index:403;
}
.hero-image .image-wrapper,
.hero-image-change .image-wrapper { 
 	height: calc(100vw * (9/16));
}
.hero-video .video-wrapper video,
.hero-video-image .video-wrapper video {
	position: absolute;
   	top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 102%;
    width: auto;
    opacity: 0;
    transition: opacity .5s;
    z-index:404;
}
.hero-video-change .video-wrapper video {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    transition: opacity .5s;
    z-index:404;
}
.hero-video .video-wrapper-overlay,
.hero-video-change .video-wrapper-overlay,
.hero-video-image .video-wrapper-overlay {
	position:absolute;
 	top:0;
 	left:0;
 	bottom:0;
 	height:100%;
 	width:100%;
 	z-index:404;
}
.hero-video-image .video-wrapper-overlay {
 	opacity:0;
    transition: opacity .5s;
}
@media screen and (min-width: 800px) {
	.hero-image-change,
	.hero-video-change {
		height:100vh;
	}
	.hero-image-change .image-wrapper,
	.hero-video-change .video-wrapper {
	    position: absolute;
   		top: 0;
   		left: 0;
   		width: 100%;
   		height: 100%;
   		z-index:403;
 	}
 	.hero-video-change .video-wrapper video {
		position: absolute;
 	  	top: 50%;
 	    left: 50%;
	    transform: translateX(-50%) translateY(-50%);
	    height: 102%;
	    width: auto;
	    opacity: 1;
	    transition: opacity .5s;
	    z-index:404;
	}
 	.hero-video-image .video-wrapper-overlay, 
	.hero-video-image .video-wrapper video {
		opacity:1;
	}	
	.hero-video .video-wrapper video.tall, 
	.hero-video-change .video-wrapper video.tall, 
	.hero-video-image .video-wrapper video.tall {
		width: 102%;
    	height: auto;
	}
	
}



/* ===================================================
/* ne change jamais
*/