.targetTranslateX{
	transform: translateX(1.5em);
	transition: transform 2s 2s ease;
}
.targetTranslateY{
	transform: translateY(2em);
	transition: transform 1s 0s ease;
}
.targetScale{
	transform: scale(0.7);
	transition: transform 2s 2s ease;
}


/* opacity */
.targetOpacity{
	opacity: 0;
	transition: opacity 2s 2s ease;
}
.inSide .targetOpacity.o0{
	opacity: 1;
	transition: opacity 4s 0s ease;
}
.inSide .targetOpacity.o1{
	opacity: 1;
	transform: translateY(0) translateX(0);
	transition: all 2s 1s ease;
}
.inSide .targetOpacity.o1-1{
	opacity: 1;
	transform: translateY(0);
	transition: all 1s 0s ease;
}
.inSide .targetOpacity.o2{
	opacity: 1;
	transform: translateX(0);
	transition: all 2s 2s ease;
}
.inSide .targetOpacity.o3{
	opacity: 1;
	transform: translateX(0);
	transition: all 2s 3s ease;
}
.inSide .targetOpacity.o4{
	opacity: 1;
	transform: translateX(0);
	transition: all 2s 4s ease;
}
.inSide .targetOpacity.o5{
	opacity: 1;
	transform: translateX(0);
	transition: all 2s 5s ease;
}
.inSide .targetOpacity.oimg5{
	opacity: 1;
	transform: scale(1);
	transition: all 4s 5s ease;
}
.inSide .targetOpacity.oimg6{
	opacity: 1;
	transform: translateY(-40%);
	transition: all 4s 6s ease;
}

.quarterBlock .landscape:before, .quarterBlock .portrait:before{
	content: "";
	display: block;
	height: 0;
	padding-top: 100%;
	position: relative;
	width: 100%;
	z-index: -1;
}
.quarterBlock .landscape:after, .quarterBlock .portrait:after{
	background: linear-gradient(0deg,hsla(0,0%,100%,0),#fff 25%,#fff);
	content: "";
	display: block;
	height: 133.3333%;
	left: 0;
	position: absolute;
	top: 0;
	transform: translate(0);
	transition: none;
	width: 100%;
	z-index: 10;
}
.quarterBlock .landscape.inSide:after, .quarterBlock .portrait.inSide:after{
	transform: translateY(-100%);
	transition: transform 1.5s cubic-bezier(.39,.575,.565,1);
}