.mid_animation {
	overflow-x:hidden
}

 .mid_animation .up .title {
	text-align:center;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	margin:auto;
	width:100%;
	font-size:3.5em
}
 .mid_animation .up .title p {
	font-size:2em
}
@media screen and (max-width: 520px) {
 .mid_animation .up .title p {
font-size:1.5em
}
}
@media screen and (max-width: 400px) {
 .mid_animation .up .title p {
font-size:1em
}
}
@media screen and (max-width: 270px) {
 .mid_animation .up .title p {
font-size:0.8em
}
}
 .mid_animation .up i {
	position:absolute;
	margin-bottom:10px;
	bottom:0%;
	left:50%;
	transform:translateX(-50%);
	width:auto;
	text-align:center;
	font-size:3em
}
 .mid_animation .up i:hover {
	cursor:pointer
}
 .mid_animation .main {
	width:90%;
	max-width:1300px;
	margin:auto
}
 .mid_animation .main .boxes {
	padding:5vh 0;
	height:90vh;
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-ms-box-sizing:content-box;
	-o-box-sizing:content-box
}
@media screen and (max-height: 260px) {
 .mid_animation .main .boxes {
height:180vh
}
}
 .mid_animation .main .boxes .left {
	height:50%;
	padding-bottom:2%
}
 .mid_animation .main .boxes .right {
	height:50%;
	padding-top:2%
}
@media screen and (max-height: 630px) {
 .mid_animation .main .boxes .right {
padding-top:0
}
}
 .mid_animation .main .boxes .float {
	position:relative;
	float:left;
	width:100%;
	clear:both;
	padding-left:10px;
	padding-right:10px
}
@media screen and (max-width: 530px) {
 .mid_animation .main .boxes .float {
width:100%
}
}
 .mid_animation .main .boxes pre {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	height:auto;
	padding:10px;
	font-size:1.8em;
	color:#fff;
	white-space:pre-wrap;
	white-space:-moz-pre-wrap;
	white-space:-pre-wrap;
	white-space:-o-pre-wrap;
	word-wrap:break-word
}
@media screen and (max-height: 730px) and (max-width: 1280px) {
 .mid_animation .main .boxes pre {
font-size:1.4em
}
}
@media screen and (max-height: 570px) and (max-width: 1280px) {
 .mid_animation .main .boxes pre {
font-size:1.2em
}
}
@media screen and (max-height: 560px) and (max-width: 430px) {
 .mid_animation .main .boxes pre {
font-size:0.9em
}
}
@media screen and (max-height: 470px) and (max-width: 340px) {
 .mid_animation .main .boxes pre {
font-size:1em
}
}
@media screen and (max-height: 435px) {
 .mid_animation .main .boxes pre {
font-size:1em
}
}
@media screen and (max-height: 425px) and (max-width: 305px) {
 .mid_animation .main .boxes pre {
font-size:0.8em
}
}
@media screen and (max-height: 390px) {
 .mid_animation .main .boxes pre {
font-size:0.8em
}
}
@media screen and (max-height: 350px) and (max-width: 260px) {
 .mid_animation .main .boxes pre {
font-size:0.7em
}
}
@media screen and (max-height: 315px) {
 .mid_animation .main .boxes pre {
font-size:0.6em;
line-height:12px
}
}
@media screen and (max-height: 260px) {
 .mid_animation .main .boxes pre {
font-size:1.1em
}
}
.code {

	
	height:100%;
	background-color:#1b2b34;
	-webkit-box-shadow:1px 1px 5px 0 #363636;
	-moz-box-shadow:1px 1px 5px 0 #363636;
	-o-box-shadow:1px 1px 5px 0 #363636;
	-ms-box-shadow:1px 1px 5px 0 #363636
}
 .mid_animation .main .title-code {
	position:absolute;
	top:0;
	height:10%;
	width:100%;
	background-color:#2B2B2B;
	text-align:center;
	color:#BDC3C7;
	font-size:1.8em
}
@media screen and (max-height: 770px) {
 .mid_animation .main .title-code {
font-size:1.6em
}
}
@media screen and (max-height: 670px) {
 .mid_animation .main .title-code {
font-size:1.4em
}
}
@media screen and (max-height: 520px) {
 .mid_animation .main .title-code {
font-size:1.2em
}
}
@media screen and (max-height: 450px) {
 .mid_animation .main .title-code {
font-size:1em
}
}
@media screen and (max-height: 390px) {
 .mid_animation .main .title-code {
font-size:0.9em
}
}
@media screen and (max-height: 340px) and (max-height: 259px) {
 .mid_animation .main .title-code {
font-size:0.8em
}
}
 .mid_animation .main .demos .title-demo {
	font-size:2.5em;
	text-align:center
}
 .mid_animation .main .demos .box {
	padding:5% 0;
	position:relative;
	margin:20px auto;
	width:70%;
	text-align:center;
	background-color:#16A085;
	-webkit-box-shadow:1px 1px 5px 0 #363636;
	-moz-box-shadow:1px 1px 5px 0 #363636;
	-o-box-shadow:1px 1px 5px 0 #363636;
	-ms-box-shadow:1px 1px 5px 0 #363636;
	font-size:2em
}
@media screen and (max-width: 1030px) {
 .mid_animation .main .demos .box {
font-size:2.5em
}
}
@media screen and (max-width: 820px) {
 .mid_animation .main .demos .box {
font-size:2em
}
}
@media screen and (max-width: 680px) {
 .mid_animation .main .demos .box {
width:80%
}
}
@media screen and (max-width: 450px) {
 .mid_animation .main .demos .box {
font-size:1.5em
}
}
@media screen and (max-width: 320px) {
 .mid_animation .main .demos .box {
font-size:1.2em;
width:90%
}
}
@media screen and (max-width: 270px) {
 .mid_animation .main .demos .box {
padding:10px 0
}
}
 .mid_animation .main .demos .box ul {
	list-style:none
}
 .mid_animation .download {
	width:100%;
	background-color:#DADFE1;
	padding:10px 0;
	-webkit-box-shadow:0 -1px 2px 0 #C9C7BB;
	-moz-box-shadow:0 -1px 2px 0 #C9C7BB;
	-o-box-shadow:0 -1px 2px 0 #C9C7BB;
	-ms-box-shadow:0 -1px 2px 0 #C9C7BB
}
 .mid_animation .download a {
	display:block;
	margin:auto;
	width:100%;
	text-align:center;
	font-size:3em;
	color:#2B2B2B;
	margin-bottom:20px
}
@media screen and (max-width: 330px) {
 .mid_animation .download a {
font-size:2em
}
}
 .mid_animation .download .how-to a {
	font-size:2em;
	margin-bottom:0
}
@media screen and (max-width: 330px) {
 .mid_animation .download .how-to a {
font-size:1.5em
}
}

 .mid_animation footer .center {
	text-align:center
}
 .mid_animation footer .center a {
	margin-right:10px
}
 .mid_animation footer .center a i {
	font-size:2.3em;
	color:#019875
}
.tag, .js-jquery {
	color:#D2527F
}
.attr {
	color:#2ECC71
}
.name, .js-com {
	color:#F5D76E
}
.prop {
	color:#59ABE3
}
.animate-hover {
	display:inline-block;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-o-transition:all 0.5s;
	-ms-transition:all 0.5s
}
.animate-hover:hover {
	-webkit-transform:translateY(-5px);
	-moz-transform:translateY(-5px);
	-o-transform:translateY(-5px);
	-ms-transform:translateY(-5px)
}
/*# sourceMappingURL=main.css.map */