@import url(http://fonts.googleapis.com/css?family=Roboto);hr{margin-top:2em;background-color:#ddd;border:0;height:1px}
.sep{color:#ddd;margin:0 4px}
.demo{display:inline-block;width:281px;padding:10px;-webkit-box-sizing:padding-box;box-sizing:padding-box; border: #000 solid 1px; background-color:#ffffff;}
.demo textarea{    font-family: 'League Spartan', sans-serif; font-size:18px;font-weight:700;height:38px;padding:6px 0 0 0;resize:none;text-align:center;width:100%;border:1px solid rgba(0,0,0,0.2);overflow:hidden;background-color:#000000;color:#fff;cursor:pointer}
.main{max-width:980px;margin:0 auto;padding:0 20px}
img{border:0}
small{display:block}
p{ margin:0 0 25px}
.sup{vertical-align:super;margin-left:-1em;padding:.3em .5em;line-height:100%;font-size:.22em;border:#eee solid 1px;border-radius:4px;color:inherit;background-color:#fff}
.sup:hover{background:#eee}
a{color:#f7c027;text-decoration:none}
.footer a:hover,.nav:hover{color:#207AD1}
.intro,.download{padding:0;box-sizing:border-box}
.intro{max-width:66%;margin:0;display:inline-block;padding-right:20px}
.download{display:inline-block;text-align:center;width:33%;padding:0 20px;vertical-align:top}
.download a.download-btn{background-color:#01579b;width:100%;padding:12px 0;display:block;color:#fff;-webkit-transition:all .2s ease;transition:all .2s ease}
.download a.download-btn:hover{background-color:#0165b4}
.download p.version{margin:10px 0}
.markup{margin:3em 0}
.effects{margin:3em 0}
.license{margin-top:2em}
h1{text-align:left;font-size:2em}
h2{margin-top:0;color:#000;line-height:1.2em; }
h3{margin:0;color:#888;margin:0 0 15px}
pre.prettyprint{background-color:#eee;padding:20px 30px!important;border:none!important;margin:30px 0}
.footer{overflow:hidden;width:auto;margin-top:2em;font-size:.9em}
.footer a{text-decoration:none}
.credit{font-size:.8em;font-weight:400}
.footer{display:block;margin-top:3em;padding-top:3em;padding-bottom:1em;font-family:$fontFeature;font-size:1.125em;text-align:center;line-height:1.6;background:#181818;color:#777}
.footer ul,.footer p{margin:0;padding:0}
.footer ul{margin-bottom:.25em}
.footer li{display:inline-block;vertical-align:middle;line-height:1}
.footer p{margin-top:.4em;font-size:.875em}
.footer a{display:inline-block;padding:0 .125em;color:#B1B1B1;transition-duration:.2s;transition-property:color}
.footer a:focus,.footer a:hover{color:white}
.footer small{display:block;margin-top:3em;font-size:.625em}
#forkongithub{display:none}
#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:700;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;-webkit-transition:.5s;transition:.5s}
#forkongithub a:hover,#forkongithub a:focus,#forkongithub a:active{background:#2098D1;color:#fff}
#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff}
#forkongithub a::after{bottom:1px;top:auto}
@media only screen and (max-width:959px){.demo{width:32.5%}
}
@media only screen and (max-width:659px){.demo{width:50%}
.intro,.download{max-width:100%;width:100%}
}
@media only screen and (max-width:460px){.demo{width:50%}
[class^='imghvr-'] figcaption,[class*=' imghvr-'] figcaption{padding:0 10px 0 20px!important}
}
@media only screen and (min-width:360px){h1{font-size:3em}
}
@media screen and (min-width:1280px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px}
#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8)}
.ad__preview a{display:inline-block;width:32%}
.ad__preview .second{margin:0 2%}
}
.ad{margin-top:2em;text-align:center}