/****************************************/
/* COMPOUND								*/
/****************************************/

#page-compound {
}

#page-compound-sec-1 {
	margin-top: 0;
}

#page-compound-sec-1 .content-img,  
#page-compound-sec-2 .box-left,
#page-compound-sec-3 .box-right,
#page-compound-sec-4 .box-left {
	opacity: 0;
	-webkit-transition: opacity 0.5s ease,	-webkit-transform 1s ease;
	   -moz-transition: opacity 0.5s ease,	   -moz-transform 1s ease;
		-ms-transition: opacity 0.5s ease,		-ms-transform 1s ease;
		 -o-transition: opacity 0.5s ease,		 -o-transform 1s ease;
			transition: opacity 0.5s ease,			transform 1s ease;
}
#page-compound-sec-1.active .content-img {
	opacity: 1;
} 
#page-compound-sec-2.active .box-left, 
#page-compound-sec-3.active .box-right, 
#page-compound-sec-4.active .box-left {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		 -o-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}
#page-compound-sec-2 .box-left,
#page-compound-sec-4 .box-left {
	-webkit-transform: translate3d(-100%, 0, 0);
	   -moz-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		 -o-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);

}
#page-compound-sec-3 .box-right {
	-webkit-transform: translate3d(100%, 0, 0);
	   -moz-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		 -o-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
}

#page-compound-sec-1 .content-img {
	position: absolute;
	top: 30%;
	right: 3.5%;
	width: 93%;
}



#page-compound-video {
	display: block;
}


.video-container  {
	position: relative;
}
.video-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.video-container > .section-content {
	width: 100%;
	height: 100%;
}

@media (max-aspect-ratio: 1280/720) {
	.video-container > .section-content > video {
		width: auto;
		height: 100%;
	}	
}
@media (min-aspect-ratio: 1280/720) {
	.video-container > .section-content > video {
		width: 100%;
		height: auto;
	}	
}
/*
@media (min-aspect-ratio: 16/9) {
	.video-container > .section-content > video {
	}
}
*/



body.mobile-layout #page-compound-sec-2 .content-img,
body.mobile-layout #page-compound-sec-3 .content-img,
body.mobile-layout #page-compound-sec-4 .content-img {
	width: 120%;
	margin-right: -10%;
}
body.default-layout #page-compound-sec-2 .content-img,
body.default-layout #page-compound-sec-3 .content-img,
body.default-layout #page-compound-sec-4 .content-img {
	width: 100%;
	margin-right: 0;
}



/*

.vmiddle {
	vertical-align: middle;
}
.box:not(.box-empty) {
	width: auto;
	padding-top: 36px;
	vertical-align: middle;
}
.box-empty {
	width: 0px;
}
.box {
	
}
.box > .content-img {
	width: 120%;
	margin-right: -10%;
}
.box > .close-box-btn {
	top: 0;
}

.box-left > .close-box-btn {
	right: 0px;
}
.box-right > .close-box-btn {
	left: 0px;
}

*/


@media (min-width: 480px) {
	/*
	.box:not(.box-empty) {
		width: 420px;
		padding-top: 0;
	}
	.box-empty {
		width: auto;
	}
	.box > .close-box-btn {
		top: 64px;
	}
	.box-left > .close-box-btn {
		right: -36px;
	}
	.box-right > .close-box-btn {
		left: -36px;
	}
	*/
}
@media (min-width: 768px) {
	/*
	.box:not(.box-empty) {
		width: 50%;
	}
	.box-empty {
		width: 50%;
	}
	*/
	#page-compound-sec-1 .content-img {
		width: 35%;
	}
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1580px) {
}

/****************************************/