@import url(http://fonts.googleapis.com/css?family=Roboto);
body { /*  margin: 0;
  padding: 40px 0 0 0;
  font-family: opensans;
  color: #333;
  line-height: 140%;
  background-color: #F5F3F5;
  border-top: 10px solid #01579b;*/ font-family: 'opensans'; }
hr { margin-top: 2em; background-color: #ddd; border: none; height: 1px; }
.sep { color: #ddd; margin: 0 4px; }
.demo { display: inline-block; width: 24%; padding: 10px; -webkit-box-sizing: padding-box; box-sizing: padding-box; }
.demo textarea { -webkit-box-sizing: padding-box; box-sizing: padding-box; font-size: 0.9em; height: 32px; padding: 6px 0px; resize: none; text-align: center; width: 100%; border: 1px solid rgba(0, 0, 0, 0.2); }
.main { max-width: 980px; margin: 0 auto; padding: 0 20px; }
img { border: none; }
small { display: block; }
p { font-family: 'opensans'; margin: 0 0 15px; }
.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: #fff; */ text-decoration: none; }
a.hover { color: #f90; text-decoration: none !important; }
.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 0.2s ease; transition: all 0.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: #888; 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: normal; }
.footer { display: block; margin-top: 0em;  /* padding-top:7px;*/  /* padding-bottom:3px;*/  font-family: $fontFeature;
font-size: 1.125em; /*text-align: center;*/ line-height: 1.6; background: #efefef; color: #777; }
.footer ul, .footer p { font-size: 13px !important; margin: 0; padding: 10px 10px 10px 25px; }
.footer ul { margin-bottom: .25em; }
.footer li { display: inline-block; vertical-align: middle; line-height: 1; }
.footer p { /*  margin-top:12px;*/ font-size: .875em; color: #fff; }
.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; text-align: center; font-weight: bold; padding: 5px 40px; font-size: 1rem; line-height: 2rem; position: relative; -webkit-transition: 0.5s; transition: 0.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: 49%; }
.intro, .download { max-width: 100%; width: 100%; }
}
@media only screen and (max-width: 360px) {
.demo { width: 100%; }
}
@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; }