.loadmask {

	position: relative;

	overflow: hidden

}



.mask-box {

	overflow: hidden;

	position: relative

}



.ani-mask,

.black-mask,

.black-maskup,

.loadmask:after {

	position: absolute;

	z-index: 9;

	background-color: #fff;

	width: 101%;

	height: 100%;

	left: 0;

	top: 0;

	opacity: 0;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

	-webkit-perspective: 1000;

	perspective: 1000;

	-webkit-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0)

}



.loadmask:after {

	content: '';

	display: block

}



.black-mask {

	-webkit-transform: translate3d(-100%, 0, 0);

	transform: translate3d(-100%, 0, 0);

	background-color: #000;

	width: 100%

}



.black-maskup {

	opacity: 1;

	background-color: #000;

	-webkit-transform: translate3d(0, 100%, 0);

	transform: translate3d(0, 100%, 0)

}



.black-mask:after,

.black-maskup:after {

	background-color: #fff;

	content: '';

	width: 101%;

	display: block;

	height: 100%;

	position: absolute

}



.black-mask:after {

	right: -101%

}



.black-maskup:after {

	top: -100%

}



.maskIn {

	-webkit-animation-duration: .6s;

	animation-duration: .6s;

	-webkit-animation-fill-mode: both;

	animation-fill-mode: both

}



.ani-mask.maskIn,

.ani-mask.maskOut,

.black-mask.maskIn,

.black-mask.maskOut,

.black-maskup.maskIn,

.black-maskup.maskOut {

	opacity: 1;

	-webkit-animation-timing-function: cubic-bezier(.165, .84, .44, 1);

	animation-timing-function: cubic-bezier(.165, .84, .44, 1)

}



.black-mask.maskIn {

	-webkit-animation-duration: 1.6s;

	-webkit-animation-name: maskblackIn;

	animation-duration: 1.6s;

	animation-name: maskblackIn

}



.black-mask.maskOut {

	-webkit-animation-duration: .8s;

	-webkit-animation-name: maskblackOut;

	animation-duration: .8s;

	animation-name: maskblackOut

}



.black-maskup.maskIn {

	-webkit-animation-duration: 1.6s;

	-webkit-animation-name: maskblackInUp;

	animation-duration: 1.6s;

	animation-name: maskblackInUp

}



.black-maskup.maskOut {

	-webkit-animation-duration: .8s;

	-webkit-animation-name: maskblackOutUp;

	animation-duration: .8s;

	animation-name: maskblackOutUp

}



.ani-mask.maskIn {

	-webkit-animation-duration: .5s;

	-webkit-animation-name: maskmove;

	animation-duration: .5s;

	animation-name: maskmove

}



.ani-mask.maskOut {

	-webkit-animation-duration: .3s;

	-webkit-animation-name: maskback;

	animation-duration: .3s;

	animation-name: maskback

}



.fadeInUp.maskOut {

	-webkit-animation-duration: .3s;

	-webkit-animation-name: fadeOut;

	-webkit-animation-fill-mode: forwards;

	animation-duration: .3s;

	animation-name: fadeOut;

	animation-fill-mode: forwards

}



.loadmask.maskIn:after {

	opacity: 1;

	animation: maskmove 1.5s cubic-bezier(.165, .84, .44, 1);

	-webkit-animation: maskmove 1.5s cubic-bezier(.165, .84, .44, 1);

	animation-fill-mode: forwards;

	-webkit-animation-fill-mode: forwards

}



.loadmask.maskOut:after {

	opacity: 1;

	-webkit-animation: maskback .5s cubic-bezier(.165, .84, .44, 1);

	animation: maskback .5s cubic-bezier(.165, .84, .44, 1)

}



@-webkit-keyframes maskblackIn {

	0% {

		-webkit-transform: translateX(-100%)

	}

	60% {

		-webkit-transform: translateX(0)

	}

	100% {

		-webkit-transform: translateX(100%)

	}

}



@keyframes maskblackIn {

	0% {

		transform: translateX(-100%)

	}

	60% {

		transform: translateX(0)

	}

	100% {

		transform: translateX(100%)

	}

}



@-webkit-keyframes maskblackOut {

	0% {

		-webkit-transform: translateX(100%)

	}

	60% {

		-webkit-transform: translateX(0)

	}

	100% {

		-webkit-transform: translateX(-100%)

	}

}



@keyframes maskblackOut {

	0% {

		transform: translateX(100%)

	}

	60% {

		transform: translateX(0)

	}

	100% {

		transform: translateX(-100%)

	}

}



@-webkit-keyframes maskblackInUp {

	0% {

		-webkit-transform: translateY(100%)

	}

	60% {

		-webkit-transform: translateY(0)

	}

	100% {

		-webkit-transform: translateY(-100%)

	}

}



@keyframes maskblackInUp {

	0% {

		transform: translateY(100%)

	}

	60% {

		transform: translateY(0)

	}

	100% {

		transform: translateY(-100%)

	}

}



@-webkit-keyframes maskblackOutUp {

	0% {

		-webkit-transform: translateY(-100%)

	}

	60% {

		-webkit-transform: translateY(0)

	}

	100% {

		-webkit-transform: translateY(100%)

	}

}



@keyframes maskblackOutUp {

	0% {

		transform: translateY(-100%)

	}

	60% {

		transform: translateY(0)

	}

	100% {

		transform: translateY(100%)

	}

}



@-webkit-keyframes maskmove {

	from {

		-webkit-transform: translateX(0)

	}

	to {

		-webkit-transform: translateX(100%)

	}

}



@keyframes maskmove {

	from {

		transform: translateX(0)

	}

	to {

		transform: translateX(100%)

	}

}



@-webkit-keyframes maskback {

	from {

		-webkit-transform: translateX(100%)

	}

	to {

		-webkit-transform: translateX(0)

	}

}



@keyframes maskback {

	from {

		transform: translateX(100%)

	}

	to {

		transform: translateX(0)

	}

}







@-webkit-keyframes fadeIn {

	0% {

		opacity: 0

	}

	100% {

		opacity: 1

	}

}



@keyframes fadeIn {

	0% {

		opacity: 0

	}

	100% {

		opacity: 1

	}

}



.fadeIn {

	-webkit-animation-name: fadeIn;

	animation-name: fadeIn

}



@-webkit-keyframes fadeOut {

	0% {

		opacity: 1

	}

	100% {

		opacity: 0

	}

}



@keyframes fadeOut {

	0% {

		opacity: 1

	}

	100% {

		opacity: 0

	}

}



.fadeOut {

	-webkit-animation-name: fadeOut;

	animation-name: fadeOut

}



.animated {

	-webkit-animation-duration: .5s;

	animation-duration: .5s;

	-webkit-animation-fill-mode: both;

	animation-fill-mode: both

}



@-webkit-keyframes fadeInUp {

	0% {

		opacity: 0;

		-webkit-transform: translateY(40px)

	}

	100% {

		opacity: 1;

		-webkit-transform: translateY(0)

	}

}



@keyframes fadeInUp {

	0% {

		opacity: 0;

		transform: translateY(40px)

	}

	100% {

		opacity: 1;

		transform: translateY(0)

	}

}



.fadeInUp {

	-webkit-animation-name: fadeInUp;

	animation-name: fadeInUp

}