.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
}
.fadeInLeft.maskOut {
	-webkit-animation-duration: .3s;
	-webkit-animation-name: fadeOut;
	-webkit-animation-fill-mode: forwards;
	animation-duration: .3s;
	animation-name: fadeOut;
	animation-fill-mode: forwards
}
.fadeInRight.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
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}