body .content { overflow-x: hidden }
body .content .up { height: 100vh; width: 100%; position: relative; background-color: #019875; overflow: hidden; text-shadow: 2px 2px 10px #FFFFFF; background: -moz-linear-gradient(top, #019875 53%, rgba(236,240,241,0.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(53%, #019875), color-stop(100%, rgba(236,240,241,0.1))); background: -webkit-linear-gradient(top, #019875 53%, rgba(236,240,241,0.1) 100%); background: -o-linear-gradient(top, #019875 53%, rgba(236,240,241,0.1) 100%); background: -ms-linear-gradient(top, #019875 53%, rgba(236,240,241,0.1) 100%); background: linear-gradient(to bottom, #019875 53%, rgba(236,240,241,0.1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#70000000', GradientType=0 )
}
body .content .up .title { text-align: center; position: absolute; top: 50%; transform: translateY(-50%); margin: auto; width: 100%; font-size: 3.5em }
body .content .up .title p { font-size: 2em }
@media screen and (max-width: 520px) {
body .content .up .title p { font-size: 1.5em }
}
@media screen and (max-width: 400px) {
body .content .up .title p { font-size: 1em }
}
@media screen and (max-width: 270px) {
body .content .up .title p { font-size: 0.8em }
}
body .content .up i { position: absolute; margin-bottom: 10px; bottom: 0%; left: 50%; transform: translateX(-50%); width: auto; text-align: center; font-size: 3em }
body .content .up i:hover { cursor: pointer }
body .content .main { width: 90%; max-width: 1300px; margin: auto }
body .content .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) {
body .content .main .boxes { height: 180vh }
}
body .content .main .boxes .left { height: 50%; padding-bottom: 2% }
body .content .main .boxes .right { height: 50%; padding-top: 2% }
@media screen and (max-height: 630px) {
body .content .main .boxes .right { padding-top: 0 }
}
body .content .main .boxes .float { position: relative; float: left; width: 100%; clear: both; padding-left: 10px; padding-right: 10px }
@media screen and (max-width: 530px) {
body .content .main .boxes .float { width: 100% }
}
body .content .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) {
body .content .main .boxes pre { font-size: 1.4em }
}
@media screen and (max-height: 570px) and (max-width: 1280px) {
body .content .main .boxes pre { font-size: 1.2em }
}
@media screen and (max-height: 560px) and (max-width: 430px) {
body .content .main .boxes pre { font-size: 0.9em }
}
@media screen and (max-height: 470px) and (max-width: 340px) {
body .content .main .boxes pre { font-size: 1em }
}
@media screen and (max-height: 435px) {
body .content .main .boxes pre { font-size: 1em }
}
@media screen and (max-height: 425px) and (max-width: 305px) {
body .content .main .boxes pre { font-size: 0.8em }
}
@media screen and (max-height: 390px) {
body .content .main .boxes pre { font-size: 0.8em }
}
@media screen and (max-height: 350px) and (max-width: 260px) {
body .content .main .boxes pre { font-size: 0.7em }
}
@media screen and (max-height: 315px) {
body .content .main .boxes pre { font-size: 0.6em; line-height: 12px }
}
@media screen and (max-height: 260px) {
body .content .main .boxes pre { font-size: 1.1em }
}
body .content .main .boxes .code { position: relative; overflow: hidden; 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 }
body .content .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) {
body .content .main .title-code { font-size: 1.6em }
}
@media screen and (max-height: 670px) {
body .content .main .title-code { font-size: 1.4em }
}
@media screen and (max-height: 520px) {
body .content .main .title-code { font-size: 1.2em }
}
@media screen and (max-height: 450px) {
body .content .main .title-code { font-size: 1em }
}
@media screen and (max-height: 390px) {
body .content .main .title-code { font-size: 0.9em }
}
@media screen and (max-height: 340px) and (max-height: 259px) {
body .content .main .title-code { font-size: 0.8em }
}
body .content .main .demos .title-demo { font-size: 2.5em; text-align: center }
body .content .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) {
body .content .main .demos .box { font-size: 2.5em }
}
@media screen and (max-width: 820px) {
body .content .main .demos .box { font-size: 2em }
}
@media screen and (max-width: 680px) {
body .content .main .demos .box { width: 80% }
}
@media screen and (max-width: 450px) {
body .content .main .demos .box { font-size: 1.5em }
}
@media screen and (max-width: 320px) {
body .content .main .demos .box { font-size: 1.2em; width: 90% }
}
@media screen and (max-width: 270px) {
body .content .main .demos .box { padding: 10px 0 }
}
body .content .main .demos .box ul { list-style: none }
body .content .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 }
body .content .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) {
body .content .download a { font-size: 2em }
}
body .content .download .how-to a { font-size: 2em; margin-bottom: 0 }
@media screen and (max-width: 330px) {
body .content .download .how-to a { font-size: 1.5em }
}
body .content footer { background-color: #2B2B2B; padding: 20px 0 }
body .content footer .center { text-align: center }
body .content footer .center a { margin-right: 10px }
body .content 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 */