@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}
* { box-sizing:border-box; }
html{ font-size:625%;height:100%;}
body{ font-family:苹方,'PingFangSC-Regular','PingFang SC','Helvetica Neue','Helvetica',STHeitiSC-Light,Arial,
sans-serif,"san francisco",HelveticaNeue-Light,"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB",
"Hiragino Sans GB W3","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif; -webkit-text-size-adjust:none;
    font-size:.16rem; min-width:320px; background:#1d212d; color:#282828 ; height:100%;position: relative;}
h1,h2,h3,h4,h5,h6{ font-weight:normal; font-size:.14rem;}
form{display:inline}
ul,ol{list-style:none}
a{text-decoration:none; color:#666; font-size:.12rem;}
a:hover, a:active, a:focus{text-decoration:none;}
ins { text-decoration:none; }
em , i { font-style:normal; }
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
button,input,textarea{ border-radius: 0; vertical-align:middle;outline:none;border:none;-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
textarea{resize:none}
button,input[type="button"],input[type="reset"],input[type="submit"] {cursor:pointer;-webkit-appearance:button;-moz-appearance:button}
input:focus:-moz-placeholder,input:focus::-webkit-input-placeholder {color:transparent}
button::-moz-focus-inner,input::-moz-focus-inner { padding:0; border:0}
input::-webkit-outer-spin-button , input::-webkit-inner-spin-button {-webkit-appearance:none;}
table { border-collapse:collapse; border-spacing:0}
.clearfix:after { content: " ";display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

.ellipsis{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}   /*单行省略号*/
.two-ellipsis { display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden;} /*2行省略号*/
.fl{float: left;	}
.fr{float: right;}
.show{display: block;}
.hide{display: none;}
body{
	background: #fff;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
@font-face {
	font-family:'gbk';
	src: url(ziti.TTF);
}
.wrapper{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.page1{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.page1 .page1-con{
	position: relative;
	width: 100%;
	height: 100%;
	background-image:url(../img/k1.gif) ;
	background-size:cover ;
	background-position:center center;
}
.page1 .hint-click{
	position: absolute;
	right: 4%;
	bottom: 5%;
	width: 1.6rem;
	height: 1.6rem;
	border: 2px solid #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 0.5rem;
	padding-top: 0.3rem;
	font-size: 0.4rem;
	color: #fff;
	animation: tofade 2s infinite linear;
	-webkit-animation: tofade 2s infinite linear;
	box-shadow: 0 0 8px 2px rgba(0,0,0,0.1);
}
@keyframes tofade{
	from{ opacity: 1;}
	to{opacity: 0.6;}
}
@-webkit-keyframes tofade{
	from{ opacity: 1;}
	to{opacity: 0.6;}
}
.page2{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image:url(../img/bg3.jpg) ;
	background-size:cover ;
	overflow: hidden;
}
.page2 .page2-con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 16.4rem;
	margin-top: -8.2rem;
}
.page2-con .word-wrap{
	position: absolute;
	left: 0.92rem;
	top: 0;
	width: 7.6rem;
	height: 11.18rem;
}
.word-wrap .line{
	position: absolute;
	left: 0;
	width: 7.6rem;
	background-image:url(../img/introducer.png) ;
	background-size:7.6rem 11.18rem;
	background-repeat:no-repeat ;
}
.word-wrap .line1{
	height: 0.68rem;
	background-position:0 0;
	top: 0;
}
.word-wrap .line2{
	height: 0.77rem;
	background-position:0 -0.68rem;
	top: 0.68rem;
}
.word-wrap .line3{
	height: 0.73rem;
	background-position:0 -2.42rem;
	top: 2.42rem;
}
.word-wrap .line4{
	height: 0.83rem;
	background-position:0 -3.14rem;
	top: 3.14rem;
}
.word-wrap .line5{
	height: 0.85rem;
	background-position:0 -3.96rem;
	top: 3.96rem;
}
.word-wrap .line6{
	height: 0.83rem;
	background-position:0 -4.8rem;
	top: 4.8rem;
}
.word-wrap .line7{
	height: 0.84rem;
	background-position:0 -5.62rem;
	top: 5.62rem;
}
.word-wrap .line8{
	height: 0.84rem;
	background-position:0 -7.27rem;
	top: 7.27rem;
}
.word-wrap .line9{
	height: 0.77rem;
	background-position:0 -8.1rem;
	top: 8.1rem;
}
.word-wrap .line10{
	height: 0.82rem;
	background-position:0 -8.86rem;
	top: 8.86rem;
}
.word-wrap .line11{
	height: 0.87rem;
	background-position:0 -9.67rem;
	top: 9.67rem;
}
.word-wrap .line12{
	height: 0.82rem;
	background-position:0 -10.53rem;
	top: 10.53rem;
}




.page2-con .circle-wrap{
	position: absolute;
	bottom: 0;
	right:1.18rem ;
	width: 3.02rem;
	height: 3.02rem;
}
.circle-wrap .circle1{
	position: absolute;
	left: 0;
	top: 0;
	width: 3.02rem;
	height: 3.02rem;
	background-image: url(../img/circle1.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	animation: fade_self 10s linear infinite;
	-webkit-animation: fade_self 10s linear infinite;
}
.circle-wrap .circle2{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.44rem;
	height: 2.44rem;
	margin-left: -1.22rem;
	margin-top: -1.22rem;
	background-image: url(../img/circle2.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
		animation: fade_selfL 10s linear infinite;
	-webkit-animation: fade_selfL 10s linear infinite;
}
.circle-wrap .circle3{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.84rem;
	height: 1.84rem;
	margin-left: -0.92rem;
	margin-top: -0.92rem;
	background-image: url(../img/circle3.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
		animation: fade_self 9s linear infinite;
	-webkit-animation: fade_self 9s linear infinite;
}
.circle-wrap .circle-cen{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.06rem;
	height: 1.43rem;
	margin-left: -0.503rem;
	margin-top: -0.715rem;
	background-image: url(../img/circle-cen.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
@keyframes fade_self{
	0%{
		transform:rotateZ(0deg);
		-webkit-transform:rotateZ(0deg);
	}
	100%{
		transform:rotateZ(360deg);
		-webkit-transform:rotateZ(360deg);
	}
}
@-keyframes fade_self{
	0%{
		transform:rotateZ(0deg);
		-webkit-transform:rotateZ(0deg);
	}
	100%{
		transform:rotateZ(360deg);
		-webkit-transform:rotateZ(360deg);
	}
}
@keyframes fade_selfL{
	0%{
		transform:rotateZ(0deg);
		-webkit-transform:rotateZ(0deg);
	}
	100%{
		transform: rotateZ(-360deg);
		-webkit-transform: rotateZ(-360deg);
	}
}
@-keyframes fade_selfL{
	0%{
		transform:rotateZ(0deg);
		-webkit-transform: rotateZ(0deg);
	}
	100%{
		transform: rotateZ(-360deg);
		-webkit-transform: rotateZ(-360deg);
	}
}








.page3{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image:url(../img/bg3.jpg) ;
	background-size:cover ;
	overflow: hidden;
}
.page3 .page3_con{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 18rem;
	max-height: 100%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.page3_con .tit{
	position: absolute;
	left: 50%;
	top: 0;
	width: 3.35rem;
	height: 0.45rem;
	margin-left: -1.675rem;
	background-image:url(../img/tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	z-index: 8;
}
.page3_con .word_wrap{
	position: absolute;
	left: 50%;
	top: 0.6rem;
	width: 10.45rem;
	height: 2.58rem;
	margin-left: -5.225rem;
	background-size:100% 100%;
}

.page3_con .up_wrap{
	position: absolute;
	top: 3.2rem;
	left: 50%;
	margin-left: -2.43rem;
	width: 4.86rem;
	height: 9.03rem;
	background: #fff;
	z-index: 18;
}
.page3_con .up_wrap .up_tit{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	width: 4.38rem;
	height: 8.55rem;
	background-image:url(../img/bg_up.png) ;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat ;
}
.page3_con .up_wrap .up_con{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	width: 4.38rem;
	height: 8.55rem;
}
.page3_con .up_con img{
	position: relative;
	width: 100%;
	height: 100%;
}

.page3_con .switch{
	position: absolute;
	left: 50%;
	bottom: 4.4rem;
	width: 1.73rem;
	height: 0.56rem;
	margin-left: -0.865rem;
	background-image:url(../img/switch.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page3_con .btn_warp{
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	width: 10.5rem;
	margin-left: -5.25rem;
	overflow: hidden;
	padding-left: 0.02rem;
}
.btn_warp .btn{
	width: 3.49rem;
	height: 1.3rem;
	line-height: 1.3rem;
	text-align: center;
	font-family: "gbk";
	color: #58A7FF;
	border-top:0.02rem solid rgba(151,151,151,1);
	border-left:0.02rem solid rgba(151,151,151,1);
	font-size: 0.6rem;
	float: left;
}
.btn_warp .btn:nth-of-type(3n+3){
	border-right:0.02rem solid rgba(151,151,151,1);
}
.btn_warp .btn:nth-of-type(n+4){
	border-bottom:0.02rem solid rgba(151,151,151,1);
}
.page3_con .btn_warp .btn.act{
	background: #58A7FF;
	color: #FFFFFF;
}
.page3_con .next_btn{
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 1.12rem;
	width: 6.52rem;
	margin-left: -3.26rem;
	background-image:url(../img/create-btn.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}





.mosk_wrap{
	position:fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.9);
	z-index: 8888;
}
.mosk_wrap .mosk_content{
	position: absolute;
	left: 0;
	top: 50%;
	height: 9.8rem;
	width: 100%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.mosk_content .name_input{
	position: relative;
	width: 5.8rem;
	margin: 0 auto;
	padding-top: 0.18rem;
	overflow: hidden;
}
.name_input input{
	position: relative;
	width: 100%;
	text-align: center;
	height: 1rem;
	line-height: 1rem;
	color: #404040;
	font-size: 0.6rem;
	font-family: "微软雅黑";
	background: transparent;
	border: 0;
	border-bottom: 0.1rem solid #404040;
}
.name_input .hint-input{
	position: relative;
	width: 3.62rem;
	height: 1.41rem;
	background-image:url(../img/input-tit.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
	margin: 0 auto;
}
.mosk_content .create_btn{
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 4.62rem;
	height: 1.54rem;
	margin-left: -2.31rem;
	background-image:url(../img/sure4.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.page4{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 58;
	background: rgba(255,255,255,0.9);
}
.page4 .save_card{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index:5888;
	opacity: 0;
}
.page4 .page4_con{
	position: relative;
	width: 100%;
	height: 100%;
}
.page4_con .card_bg{
	position: relative;
	width: 100%;
	display: none;
}
.page4_con .page4-cen{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7rem;
	height: 17rem;
	margin-left: -3.5rem;
	margin-top: -9rem;
	z-index: 5888;
}
.page4-cen .card-show{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	box-shadow: 0 0 8px 2px rgba(0,0,0,0.2);
}
.card-show img{
	position: relative;
	width: 100%;
}


.page4-cen .cut{
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 5.22rem;
	height: 1.34rem;
	margin-left: -2.61rem;
	background-image:url(../img/cut.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}


.page4_con .hint-wrap{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2.04rem;
	z-index: 118;
}
.hint-wrap .hint_save{
	position: absolute;
	bottom: 0.98rem;
	left: 50%;
	width: 2.16rem;
	height: 0.52rem;
	margin-left: -1.08rem;
	background-image:url(../img/save-icon.png) ;
	background-size:100% 100%;
	background-repeat:no-repeat ;
}
.hint-wrap .author{
	position: absolute;
	left: 0;
	bottom: 0.4rem;
	width: 200%;
	text-align: center;
	transform: scale(0.5,0.5);
	-webkit-transform: scale(0.5,0.5);
	transform-origin: left bottom;
	font-size:0.6rem;
	color:rgba(151,151,151,0.8);
}


/*裁剪 */
.upimg-wrap{
	position: relative;
	width: 100%;
	display: none;
}
.btn-wrap{
	position: fixed;
	left: 0;
	bottom: 0.28rem;
	z-index: 1818998;
	width: 100%;
	height: 40px;
	display: flex;
	display: -webkit-flex;	
	background: #000;
	/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvEAAABRBAMAAACpleQVAAAAD1BMVEXc3Nz////U1NTIyMi8vLz/o948AAAAxklEQVR42u3XMRHAMAwEwVAIg3AJf06JSVieuVVzrWa7v9bd/+nWvg958q2SJ18refK1kp+TP+GLYsmTr5U8+VrJk6+V/FQtKRu2VvLkayVPvlby5Gu1pGzYWsmTr5U8+VrJk6/VkrJhayVPvlby5GslT75WS8qGrZU8+VrJk6+VPPlaLSkbtlby5GslT75W8uRrtaRs2FrJk6+VPPlayZOv1ZKyYWslT75W8uRrJU++VkvKhq2VPPlayZOvlTz5Wi2puSX1Aeo0EBNhARnhAAAAAElFTkSuQmCC);*/
}
.btn-wrap button{
	flex: 1;
	text-align: center;
	line-height: 40px;
    font-size: 18px;
    color: #fff;
    position: relative;
    border: 1px solid hsla(0,0%,100%,.1);
    color: #fff;
    background: rgba(0,0,0,0.7);
}
.btn-wrap button.act{
	 color: rgba(0,0,0,0.7);
    background: #fff;
}
.crop{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 88888;
	background: #000;
	/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvEAAABRBAMAAACpleQVAAAAD1BMVEXc3Nz////U1NTIyMi8vLz/o948AAAAxklEQVR42u3XMRHAMAwEwVAIg3AJf06JSVieuVVzrWa7v9bd/+nWvg958q2SJ18refK1kp+TP+GLYsmTr5U8+VrJk6+V/FQtKRu2VvLkayVPvlby5Gu1pGzYWsmTr5U8+VrJk6/VkrJhayVPvlby5GslT75WS8qGrZU8+VrJk6+VPPlaLSkbtlby5GslT75W8uRrtaRs2FrJk6+VPPlayZOv1ZKyYWslT75W8uRrJU++VkvKhq2VPPlayZOvlTz5Wi2puSX1Aeo0EBNhARnhAAAAAElFTkSuQmCC);*/	
}

.loading{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.88);
	z-index: 58888888;
}
.loading img{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1rem;
	margin-left: -0.5rem;
	margin-top: -0.5rem;
}
.music{
	position: fixed;
    top: 0.2rem;
    right: 0.4rem;
    z-index: 199999999;
    width: 0.8rem;
    height: 0.8rem;
    background-image: url(../img/music.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.music_on{
	animation: musicroate 2s linear infinite ;
	-webkit-animation: musicroate 2s linear infinite ;
}
@keyframes musicroate{
	from{
		transform: rotate(0);
		-webkit-transform: rotate(0);
	}
	to{
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}
@-webkit-keyframes musicroate{
	from{
		transform: rotate(0);
		-webkit-transform: rotate(0);
	}
	to{
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
	}
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}
@-webkit-keyframes bounceInDown {
	0%,
	100%,
	60%,
	75%,
	90% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0)
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes bounceInDown {
	0%,
	100%,
	60%,
	75%,
	90% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		-ms-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		-ms-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0)
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		-ms-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		-ms-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0)
	}
	100% {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	animation-name: bounceInDown
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

@-webkit-keyframes bounceIn {
	0%,
	100%,
	20%,
	40%,
	60%,
	80% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}
	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03)
	}
	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes bounceIn {
	0%,
	100%,
	20%,
	40%,
	60%,
	80% {
		-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		-ms-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		-ms-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}
	40% {
		-webkit-transform: scale3d(.9, .9, .9);
		-ms-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		-ms-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03)
	}
	80% {
		-webkit-transform: scale3d(.97, .97, .97);
		-ms-transform: scale3d(.97, .97, .97);
		transform: scale3d(.97, .97, .97)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

.bounceIn {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .75s;
	animation-duration: .75s
}
@-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 fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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