#cover_closed{
	background-image: url("../images/mobile_10.jpg");
}

#close_30{
    background-image: url("../images/mobile_30.jpg");
}

.device_desktop #cover_closed{
	background-image: url("../images/desktop_10.jpg");
}

.device_desktop #close_30{
	background-image: url("../images/desktop_30.jpg");
}

.device_tablet #cover_closed{
	background-image: url("../images/tablet_10.jpg");
}

.device_tablet #close_30{
	background-image: url("../images/tablet_30.jpg");
}

.device_mobile #cover_closed{
	background-image: url("../images/mobile_10.jpg");
}

.device_mobile #close_30{
	background-image: url("../images/mobile_30.jpg");
}

#videoExpandWrapper{
	position: absolute;
	height: auto;
	width: 100%;
	left: 0%;
	top: 50%;
	transform: translateY(-50%);
}

#expand{
	background-size: cover;
	background-position: center;
	background-image: url(../images/portrait.jpg);
}

#videoExpand {
    position:relative;
    width: 100%;
    height: auto;
}

#buttonsExpandWrapper{
	position: absolute;
	display: none;
	width: 30px;
	height: 30px;
	bottom: 0px;
	right: 0px;
}

#buttonsExpandWrapper *{
	position: absolute;
	width: 30px;
	height: 30px;
	bottom: 0px;
	right: 0px;
}

@media screen and (min-aspect-ratio: 1/1) {
	#expand{
		background-image: url(../images/paysage.jpg);
	}
}

#expand_sliding {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0%;
	top: 0%;
	z-index: 10;
	overflow: hidden;
	cursor: pointer;
	display: none;
}

#expand_sliding img {
	position: absolute;
}

#closeButton {
	position: absolute;
	width: 50px;
	height: 50px;
	right: 20px;
	cursor: pointer;
	top: 10px;
}

#zone_click {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
}

#bloc_left,
#bloc_right {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	transition: transform 1.2s ease;
}

#right, #left {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0%;
}

#right {
	left: 0%;
}

#left {
	right: 0%;
}

#image_right, #image_left {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	background-image: url(../images/desktop.jpg);
	background-size: cover;
	background-position: center;
}

/* ANIMATIONS */

#bloc_left.collapsed {
	transform: translate(-56%, 0%);
}

#bloc_right.collapsed {
	transform: translate(56%, 0%);
}

/* DEFAULT */
#image_right {
	left: 0%;
    clip-path: inset(0 0 0 50%);
}

#image_left {
	right: 0%;
    clip-path: inset(0 50% 0 0);
}

/* SKEW RIGHT */
#image_right.skew.skew_right {
	clip-path: polygon(44% 0, 100% 0, 100% 100%, 56% 100%);
}

#image_left.skew.skew_right {
	clip-path: polygon(44% 0, 0 0, 0 100%, 56% 100%);
}

/* SKEW LEFT */
#image_right.skew.skew_left {
	clip-path: polygon(56% 0, 100% 0%, 100% 100%, 44% 100%);
}

#image_left.skew.skew_left {
	clip-path: polygon(56% 0, 0 0, 0 100%, 44% 100%);
}

@media screen and (max-width: 700px) {
	/* ANIMATIONS */
	#bloc_left.collapsed {
		transform: translate(0%, -56%);
	}
	
	#bloc_right.collapsed {
		transform: translate(0%, 56%);
	}

	/* DEFAULT */
	#image_right, #image_left { /* top */
		left: 0%;
	}

    #image_left, #image_right { /* bottom */
        background-image: url("../images/mobile.jpg");
    }

	#image_left { /* top */
		top: 0%;
		clip-path: inset(0 0 50% 0);
	}
	
	#image_right { /* bottom */
		bottom: 0%;
		clip-path: inset(50% 0 0 0 );
	}

	/* SKEW RIGHT */
	#image_right.skew.skew_right { /* top */
		clip-path: polygon(0 44%, 100% 56%, 100% 100%, 0 100%);
	}

	#image_left.skew.skew_right { /* bottom */
		clip-path: polygon(0 44%, 100% 56%, 100% 0, 0 0);
	}
	
	/* SKEW LEFT */
	#image_left.skew.skew_left { /* top */
		clip-path: polygon(0 56%, 100% 44%, 100% 0, 0 0);
	}
	
	#image_right.skew.skew_left { /* bottom */
		clip-path: polygon(0 56%, 100% 44%, 100% 100%, 0% 100%);
		
	}
}