/*!
 * Project:   Base Template
 * Date:      2015/03/15
/* ---------------------------------------- */

* { margin: 0; padding: 0; }

html { overflow-y: scroll; font-size: 100.01%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { min-height: 100vh; background: #f3f3f3; font-size: 62.5%; }

body, textarea, input, select, option, button { color: #333; font: 18px/1.5 Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
div, form, blockquote, article, aside, details, figcaption, figure, footer, header, menu, nav, section, ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { display: block; margin: 0 0 20px; } :last-child { margin-bottom: 0 !important; } .last-child { margin-bottom: 0 !important; }
body > :not(.root-a), body > :not(.root-a) div, body > :not(.root-a) form { margin-bottom: 0; }

@font-face { font-family: 'Fontello'; src: url('../fonts/fontello.eot?38698023'); src: url('../fonts/fontello.eot?38698023#iefix') format('embedded-opentype'), url('../fonts/fontello.woff?38698023') format('woff'), url('../fonts/fontello.ttf?38698023') format('truetype'), url('../fonts/fontello.svg?38698023#fontello') format('svg'); font-weight: normal; font-style: normal; }

/*!
 * Layout
/* ---------------------------------------- */

.root-a { position: relative; overflow: hidden; width: 100%; min-width: 320px; margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
 .root-a *, .root-a *:before, .root-a *:after { -moz-box-sizing: inherit; -webkit-box-sizing: inherit; box-sizing: inherit; }
 .root-a .contain { max-width: 1120px; margin-left: auto; margin-right: auto; }

/*!
 * Elements
/* ---------------------------------------- */

/* author line */

.author-a { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eee; line-height: 40px; }
 .author-a:after { display: table; clear: both; content: ''; }
 .author-a .author { float: left; margin: 0; color: #999; font-size: 14px; }
  .author-a .author:before { float: left; content: ''; width: 40px; height: 40px; margin: 0 10px 0 0; border-radius: 5px; background: url(../images/comments-a-users-c.jpg) -5px -300px no-repeat; }
  .author-a .author strong { padding-right: 10px; color: #333; font-size: 18px; }
 .author-a .socials { float: right; margin-bottom: 0; }

@media screen and (max-width: 599px) {
.author-a { margin-bottom: 20px; padding-bottom: 0; border-bottom: none; }
.author-a .author { float: none; margin: -15px 0 15px; text-align: left; font-size: 13px; }
 .author-a .author strong { font-size: 15px; }
 .author-a .socials { float: none; }
}

/* comments bar */

.bar-a { position: relative; min-height: 40px; margin-bottom: 25px; }
 .bar-a .socials-a { position: absolute; right: 0; top: 0; }
 .bar-a .count { position: absolute; left: 0; top: 0; height: 40px; padding: 3px; border-radius: 4px; background: #eee; font-weight: bold; line-height: 34px; }
  .bar-a .count span { overflow: hidden; float: left; width: 34px; height: 34px; background: #d2d4dc; }
   .bar-a .count span:before { display: block; content: ''; width: 50px; height: 50px; margin: -8px 0 0 -8px; background: url(../images/comments-a-users-a.jpg) 34px 0 no-repeat; }
   .bar-a .count span:before { -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); }
   .bar-a .count span.m1:before { background-position: 0 0; } .bar-a .count span.m2:before { background-position: 0 -50px; } .bar-a .count span.m3:before { background-position: 0 -100px; } .bar-a .count span.m4:before { background-position: 0 -150px; } .bar-a .count span.m5:before { background-position: 0 -200px; } .bar-a .count span.m6:before { background-position: 0 -250px; } .bar-a .count span.m7:before { background-position: 0 -300px; } .bar-a .count span.m8:before { background-position: 0 -350px; } .bar-a .count span.m9:before { background-position: 0 -400px; } .bar-a .count span.m10:before { background-position: 0 -450px; }
   .bar-a .count span.f1:before { background-position: -50px 0; } .bar-a .count span.f2:before { background-position: -50px -50px; } .bar-a .count span.f3:before { background-position: -50px -100px; } .bar-a .count span.f4:before { background-position: -50px -150px; } .bar-a .count span.f5:before { background-position: -50px -200px; } .bar-a .count span.f6:before { background-position: -50px -250px; } .bar-a .count span.f7:before { background-position: -50px -300px; } .bar-a .count span.f8:before { background-position: -50px -350px; } .bar-a .count span.f9:before { background-position: -50px -400px; } .bar-a .count span.f10:before { background-position: -50px -450px; }
  .bar-a .count span ~ span { margin-left: 5px; }
  .bar-a .count span ~ span ~ span ~ span ~ span { display: none; }
  .bar-a .count strong { padding: 0 7px 0 10px; }

@media screen and (max-width: 1119px) {
 .bar-a .count strong { font-size: 15px; }
}
@media screen and (max-width: 599px) {
.bar-a .count { position: static; }
.bar-a .socials-a { position: static; text-align: center; }
 .bar-a .socials-a li:first-child { margin-left: 0; }
}

/* browser warning */

.browser-a { max-width: none; margin: 0; padding: 15px 40px; border-top: 1px solid #232323; background: #b22; color: #fff; font-size: 13px; line-height: 20px; text-align: center; }
 .browser-a p { margin-bottom: 0; }
 .browser-a a { color: #fff !important; text-decoration: underline; }

/* captcha */

.captcha-a { display: block; position: relative; height: 80px; background: #f3f3f3; color: #666; font: 50px/80px Helvetica Neue,Helvetica,Arial,sans-serif; letter-spacing: 0.35em; text-align: center; }
.captcha-a { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
 .captcha-a:before { position: absolute; left: 0; top: 50%; right: 0; z-index: 1; content: ''; height: 16px; margin: -8px 0 0; border: 2px solid #f3f3f3; border-width: 4px 0; opacity: 0.7; }
 .captcha-a i { display: inline-block; font-style: normal; opacity: 0.4; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }
 .captcha-a i:nth-child(even) { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); }
 .captcha-a i:nth-child(1) { color: hsl(30,70%,25%); }
 .captcha-a i:nth-child(2) { color: hsl(60,70%,35%); }
 .captcha-a i:nth-child(3) { color: hsl(90,70%,45%); }
 .captcha-a i:nth-child(4) { color: hsl(120,70%,15%); }
 .captcha-a i:nth-child(5) { color: hsl(150,70%,35%); }
 .captcha-a i:nth-child(6) { color: hsl(180,70%,55%); }
 .captcha-a i:nth-child(7) { color: hsl(210,70%,35%); }
 .captcha-a i:nth-child(8) { color: hsl(240,70%,25%); }
 .captcha-a i:nth-child(9) { color: hsl(270,70%,15%); }
 .captcha-a i:nth-child(10) { color: hsl(300,70%,5%); }
 .captcha-a i:nth-child(11) { color: hsl(330,70%,55%); }
 .captcha-a i:nth-child(12) { color: hsl(260,70%,45%); }

@media screen and (max-width: 767px) {
.captcha-a { font-size: 40px; }
 .captcha-a:before { height: 14px; margin-top: -7px; border-width: 3px 0; }
}
@media screen and (max-width: 599px) {
.captcha-a { height: 60px; font-size: 24px; line-height: 60px; letter-spacing: 0.25em; }
 .captcha-a:before { height: 10px; margin-top: -5px; border-width: 2px 0; }
}

/* comments */

.comments-a { margin-bottom: 25px; }
 .comments-a .add { position: relative; margin-bottom: 25px; border: 7px solid #ebebeb; background: #ebebeb; }
  .comments-a .add p { margin: 0 0 10px; }
  .comments-a .add label { display: none; }
 .comments-a .add .added { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; padding: 15px; background: #769b61; color: #fff; font-size: 13px; font-weight: bold; text-align: center; }
  :root .comments-a .add .added span { position: absolute; left: 50%; top: 50%; width: 500px; }
  :root .comments-a .add .added span { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .comments-a .add.done .added { display: block; }
  .comments-a .add.done .added ~ * { visibility: hidden; }
  .comments-a .add .action { position: relative; max-width: 600px; padding-right: 100px; }
   .comments-a .add .action button { position: absolute; right: 0; top: 0; width: 90px; }
 .comments-a article { margin: 0 0 20px; padding-left: 65px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif; }
 .comments-a article + article { margin-top: -5px; padding-top: 15px; border-top: 1px solid #eee; }
  .comments-a article:before { float: left; content: ''; width: 50px; height: 50px; margin: 0 0 0 -65px; background: url(../images/comments-a-users-a.jpg) no-repeat; }
  .comments-a article.m1:before { background-position: 0 0; } .comments-a article.m2:before { background-position: 0 -50px; } .comments-a article.m3:before { background-position: 0 -100px; } .comments-a article.m4:before { background-position: 0 -150px; } .comments-a article.m5:before { background-position: 0 -200px; } .comments-a article.m6:before { background-position: 0 -250px; } .comments-a article.m7:before { background-position: 0 -300px; } .comments-a article.m8:before { background-position: 0 -350px; } .comments-a article.m9:before { background-position: 0 -400px; } .comments-a article.m10:before { background-position: 0 -450px; }
  .comments-a article.f1:before { background-position: -50px 0; } .comments-a article.f2:before { background-position: -50px -50px; } .comments-a article.f3:before { background-position: -50px -100px; } .comments-a article.f4:before { background-position: -50px -150px; } .comments-a article.f5:before { background-position: -50px -200px; } .comments-a article.f6:before { background-position: -50px -250px; } .comments-a article.f7:before { background-position: -50px -300px; } .comments-a article.f8:before { background-position: -50px -350px; } .comments-a article.f9:before { background-position: -50px -400px; } .comments-a article.f10:before { background-position: -50px -450px; }
  .comments-a article:after { display: table; clear: both; content: ''; }
  .comments-a article p { margin-bottom: 3px; font-size: 12px; line-height: 18px; }
  .comments-a article p:first-child strong { display: inline-block; padding-bottom: 2px; }
  .comments-a article .tools { font-size: 12px; line-height: 16px; }
   .comments-a article strong { color: #3b5998; }
    .comments-a article strong small { color: #aaa; font-size: 12px; font-weight: normal; }
     .comments-a article strong small:before { content: '\00a0\b7\00a0'; }
   .comments-a article a { color: #3b5998; }
   .comments-a article var { font-style: normal; }
   .comments-a article .likes { color: #3b5998; font-style: normal; }
    .comments-a article .likes:before { display: inline-block; content: '\e801'; margin: 0 3px 0 0; font: 12px/16px Fontello; }
 .comments-a .more { margin-top: -5px; padding-top: 15px; border-top: 1px solid #eee; text-align: right; }

@media screen and (max-width: 599px) {
:root .comments-a .add .added span { width: auto; left: 15px; right: 15px; }
:root .comments-a .add .added span { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.comments-a .more a { display: block; width: 100%; }
.comments-a article .tools { font-size: 11px; }
.comments-a article .tools a span { display: none; }
}

/* pictureless comments */

.comments-b { margin-top: 30px; padding-top: 30px; margin-bottom: 25px; border-top: 1px solid #d6d6d6; }
 .comments-b .add { position: relative; margin-bottom: 25px; }
  .comments-b .add p { margin: 0 0 10px; }
   .comments-b .add label { display: none; }
  .comments-b .add .added { position: absolute; left: 10001px; right: 0; top: 0; bottom: 0; z-index: 1; margin: 0; padding: 15px; background: #769b61; color: #fff; font-size: 13px; font-weight: bold; text-align: center; opacity: 0; }
  .comments-b .add .added { -webkit-transition: opacity 0.35s, left 0s 0.35s; transition: opacity 0.35s, left 0s 0.35s; }
   :root .comments-b .add .added span { position: absolute; left: 50%; top: 50%; width: 500px; }
   :root .comments-b .add .added span { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .comments-b .add.done .added { left: 0; opacity: 1; }
  .comments-b .add.done .added { -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
  .comments-b .add .action { position: relative; max-width: 600px; padding-right: 100px; }
   .comments-b .add .action button { position: absolute; right: 0; top: 0; width: 90px; outline: none; }
 .comments-b article { margin-bottom: 25px; padding-top: 25px; border-top: 1px solid #d6d6d6; }
  .comments-b article .tools { float: right; margin: 0 0 0 10px; }
   .comments-b article .thumb { display: inline-block; color: #333; font-style: normal; font-weight: bold; vertical-align: top; }
   .comments-b article .thumb ~ .thumb { margin-left: 10px; }
    .comments-b article .thumb:before { display: inline-block; margin: 0 3px 0 0; color: #888; font: inherit; font-size: 0.9em; font-family: Fontello; vertical-align: middle; }
    .comments-b article .thumb.down:before { content: '\e803'; }
    .comments-b article .thumb.up:before { content: '\e801'; }
   .comments-b article .thumb.up { color: #769b61; }
   .comments-b article .thumb.down { color: #bf0a11; }
  .comments-b article .author { margin-bottom: 10px; }
   .comments-b article .author time { padding-left: 10px; color: #999; font-size: 0.8em; font-weight: normal; }
 .comments-b .more { margin-top: 25px; padding-top: 25px; border-top: 1px solid #d6d6d6; }

@media screen and (max-width: 599px) {
:root .comments-a .add .added span { width: auto; left: 15px; right: 15px; }
:root .comments-a .add .added span { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.comments-b article { font-size: 13px; }
 .comments-b .more .button-a { display: block; width: 100%; }
}

/* global content */

.content-a { margin: 0; padding: 0; }
 .content-a > .contain { padding: 30px; background: #fff; }
  .content-a > .contain:after { display: table; clear: both; content: ''; }
  .content-a > .contain > .primary { float: left; width: 100%; margin: 0 -100% 0 0; padding: 0 330px 0 0; }
  .content-a > .contain > .secondary { float: right; width: 300px; margin: 0; padding: 0; }

@media screen and (max-width: 1119px) {
.content-a > .contain { margin-bottom: 20px; padding: 30px 20px; }
 .content-a > .contain > .primary { float: none; margin: 0 0 20px; padding: 0; }
 .content-a > .contain > .secondary { float: none; width: auto; }
}
@media screen and (max-width: 599px) {
.content-a > .contain { padding: 25px 15px; }
 .content-a > .contain > h1 { font-size: 28px; line-height: 1.2; }
}

/* breadcrumbs */

.crumbs-a { margin: -5px 0 15px; color: #999; }
 .crumbs-a p { float: right; margin: 0 0 0 5px; font-size: 14px; }
 .crumbs-a ul { list-style: none; margin: 0; padding: 0; font-size: 0; letter-spacing: -1em; }
  .crumbs-a li { display: inline-block; position: relative; font-size: 14px; letter-spacing: 0; }
  .crumbs-a li ~ li { margin-left: 20px; }
   .crumbs-a li:before { display: none; position: absolute; left: -20px; content: '\203A'; width: 20px; height: auto; margin: 0; border: none; border-radius: 0; background: none; text-align: center; }
   .crumbs-a li ~ li:before { display: block; }
   .crumbs-a li a { color: inherit; }
   .crumbs-a li strong { color: #333; }

@media screen and (max-width: 599px) {
.crumbs-a li:not(:first-child):not(:last-child) { display: none; }
}

/* face bar */

.faces-a { position: relative; overflow: hidden; float: left; width: 30%; max-width: 572px; height: 50px; padding-right: 3px; }
 .faces-a p { margin: 0; }
  .faces-a p strong { position: absolute; right: 0; top: 0; z-index: 10; width: 50px; height: 50px; padding: 4px 0 0; border-radius: 5px; background: #fd6d21; color: #fff; font-size: 34px; line-height: 0.9; text-align: center; }
   .faces-a p strong small { display: block; font-size: 11px; font-weight: bold; }
  .faces-a p span { float: left; margin-left: 2px; position: relative; width: 50px; height: 50px; }
   .faces-a p span:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; border-radius: 5px; background: url(../images/comments-a-users-c.jpg) no-repeat; }
   .faces-a p span:nth-of-type(1):before { background-position: 0 -50px; }
   .faces-a p span:nth-of-type(2):before { background-position: -50px 0; }
   .faces-a p span:nth-of-type(3):before { background-position: 0 -100px; }
   .faces-a p span:nth-of-type(4):before { background-position: -50px -200px; }
   .faces-a p span:nth-of-type(5):before { background-position: 0 -250px; }
   .faces-a p span:nth-of-type(6):before { background-position: 0 -300px; }
   .faces-a p span:nth-of-type(7):before { background-position: 0 -350px; }
   .faces-a p span:nth-of-type(8):before { background-position: 0 -400px; }
   .faces-a p span:nth-of-type(9):before { background-position: -50px -150px; }
   .faces-a p span:nth-of-type(10):before { background-position: 0 -50px; }

/* fanlike */

.fanlike-a { display: inline-block; overflow: hidden; width: 71px; height: 20px; }
 .fanlike-a > div { display: block; margin: -32px 0 0 -65px; }

/* featured */

.featured-a {  }
 .featured-a > .hx { margin-bottom: 20px; padding: 10px 15px; background: #232830; color: #fff; font-size: 14px; text-transform: uppercase; }
 .featured-a > .wrap { margin: 0 -10px; font-size: 0; letter-spacing: -1em; }
  .featured-a article { display: inline-block; position: relative; width: 100%; padding: 0; border: 1px solid transparent; border-width: 0 10px; font-size: 14px; letter-spacing: 0; vertical-align: top; }
  .featured-a article ~ article a { padding-top: 15px; border-top: 1px solid #e9e9e9; }
   .featured-a article a { display: block; width: 100%; color: #333; }
    .featured-a article a:after { display: table; clear: both; content: ''; }
   .featured-a article figure { margin: 0 0 5px; }
    .featured-a article figure img { display: block; }
   .featured-a article .hx { color: inherit; font-size: 16px; line-height: 1.3; }

@media screen and (max-width: 1119px) {
.featured-a article { width: 33.3333%; }
.featured-a article ~ article a { padding-top: 0; border-top: none; }
}
@media screen and (max-width: 767px) {
.featured-a article .hx { font-size: 14px; font-weight: normal; }
}
@media screen and (max-width: 599px) {
.featured-a > .hx { margin-left: -15px; margin-right: -15px; }
.featured-a article { width: 49.999%; }
}
@media screen and (max-width: 479px) {
.featured-a article { width: 100%; }
 .featured-a article .hx { font-size: 14px; }
}

/* featured */

.featured-b {  }
.story-b + .featured-b { padding: 30px 0; border: 1px solid #d6d6d6; border-width: 1px 0; }
 .featured-b > .hx { margin-bottom: 20px; font-size: 20px; }
 .featured-b > .wrap { margin: -30px -15px 0; font-size: 0; letter-spacing: -1em; }
  .featured-b article { display: inline-block; position: relative; width: 25%; margin: 0; padding: 0; border: 1px solid transparent; border-width: 30px 15px 0; font-size: 14px; letter-spacing: 0; vertical-align: top; }
   .featured-b article a { display: block; width: 100%; }
    .featured-b article a:after { display: table; clear: both; content: ''; }
   .featured-b article figure { float: left; width: 70px; margin: 0 -100% 0 0; }
    .featured-b article figure img { display: block; }
   .featured-b article .hx { position: relative; top: -1px; margin-left: 80px; color: inherit; font-size: 15px; line-height: 18px; }

@media screen and (max-width: 1023px) {
.featured-b article { width: 49.99%; }
}
@media screen and (max-width: 479px) {
.featured-b > .wrap { margin: -15px -10px 0; }
.featured-b article { width: 100%; border-width: 15px 10px 0; }
}

/* featured topbar */

.featured-c { margin-bottom: 30px; padding: 15px; border-bottom: 1px solid #eee; }
 .featured-c > .hx { margin-bottom: 20px; font-size: 20px; }
 .featured-c > .wrap { margin: -30px -15px 0; font-size: 0; letter-spacing: -1em; }
  .featured-c article { display: inline-block; position: relative; width: 16.666%; margin: 0; padding: 0; border: 1px solid transparent; border-width: 30px 15px 0; font-size: 14px; letter-spacing: 0; vertical-align: top; }
   .featured-c article a { display: block; width: 100%; }
    .featured-c article a:after { display: table; clear: both; content: ''; }
   .featured-c article figure { float: left; width: 70px; margin: 0 -100% 0 0; }
    .featured-c article figure img { display: block; }
   .featured-c article .hx { position: relative; top: -1px; margin-left: 80px; color: inherit; font-size: 15px; line-height: 18px; }

@media screen and (max-width: 1599px) {
.featured-c article { width: 20%; }
.featured-c article:nth-child(n+6) { display: none; }
}
@media screen and (max-width: 1365px) {
.featured-c article { width: 25%; }
.featured-c article:nth-child(n+5) { display: none; }
}
@media screen and (max-width: 1279px) {
.featured-c { padding: 15px 30px;  }
 .featured-c > .wrap { margin: -20px -10px 0; }
 .featured-c article { width: 33.33%; border-width: 20px 10px 0; }
 .featured-c article:nth-child(n+4) { display: none; }
}
@media screen and (max-width: 1023px) {
.featured-c { padding: 15px; }
}
@media screen and (max-width: 767px) {
.featured-c article { width: 49.99%; }
.featured-c article:nth-child(n+3) { display: none; }
}
@media screen and (max-width: 599px) {
.featured-c { display: none; }
}

/* form fields */

.fields-a { margin: -10px -5px 20px; font-size: 0; letter-spacing: -1em; }
 .fields-a p { display: inline-block; position: relative; width: 50%; margin: 0; border: 1px solid transparent; border-width: 10px 5px 0; font-size: 13px; letter-spacing: 0; vertical-align: top; }
  .fields-a p label:first-child { display: none; }
  .fields-a p .tip { position: absolute; left: 10001px; bottom: 100%; z-index: 10; width: 260px; margin: 0 0 7px !important; font-size: 11px; line-height: 1.2; opacity: 0; }
  .fields-a p .tip { -webkit-transition: opacity 0.35s, left 0s 0.35s; transition: opacity 0.35s, left 0s 0.35s; }
  .fields-a p input:focus + .tip { left: 0; opacity: 1; }
  .fields-a p input.error { border-color: #c00; }
  .fields-a p input:focus + .tip { -webkit-transition: opacity 0.35s, left 0s; transition: opacity 0.35s, left 0s; }
   .fields-a p .tip em { display: inline-block; position: relative; padding: 4px 7px 5px; border-radius: 4px; background: #333; color: #fff; vertical-align: top; }
    .fields-a p .tip em:before { position: absolute; left: 10px; top: 100%; content: ''; border: 4px solid transparent; border-top-color: #333; }
 .fields-a p.full { width: 100%; }
 .fields-a p.error { width: 100%; margin-bottom: 10px; color: red; text-align: center; }
 .fields-a p.age { width: 20%; }
 .fields-a p.gender { width: 30%; }
 .fields-a p.terms { width: 100%; padding: 5px 0 0; }
 .fields-a p.hardcore { width: 100%; }
  .fields-a p.hardcore > strong { display: block; padding: 10px; background: #888; color: #fff; text-align: center; }
  .fields-a p.hardcore span { white-space: nowrap; }
 .fields-a p.english { width: 100%; margin: 15px 0 0; font-size: 14px; text-align: center; }
 .fields-a p.hardcore + p.english { margin-top: 5px; }
  .fields-a p.english a { display: block; padding: 10px; border: 1px dashed #ccc; background: #f3f3f3; font-size: 14px; text-align: center; }
  .fields-a p.english a:hover { border-color: #aaa; }
   .fields-a p.english a:before { display: inline-block; content: '\e801'; margin: 0 10px 0 0; font: 20px/1 Fontello; vertical-align: top; }
   .fields-a p.english span { white-space: nowrap; }
 .fields-a p.english + p.action { padding-top: 0; }
  .fields-a p.english + p.action:before { display: none; }
 .fields-a p.action { position: relative; display: block; width: 100%; margin-top: 15px; padding-top: 25px; text-align: center; }
  .fields-a p.action:before { position: absolute; left: 0; right: 0; top: 0; content: ''; height: 1px; background: #eee; }
  .fields-a p.action button, .fields-a p.action .button-a { height: 40px; padding: 0 40px; font-size: 14px; font-weight: bold; line-height: 40px; text-transform: uppercase; }

@media screen and (max-width: 767px) {
.fields-a p { width: 100%; }
.fields-a p.gender { width: 80%; }
}
@media screen and (max-width: 599px) {
.fields-a p.action { padding-top: 20px; }
.fields-a p.age { width: 29.99%; }
.fields-a p.gender { width: 70%; }
 .fields-a p.action button, .fields-a p.action .button-a { width: 100%; }
}

/* flag */

.flag-a { margin: 0 0 5px; font-size: 14px; line-height: 1; font-weight: bold; text-transform: uppercase; }
 .flag-a span { display: inline-block; padding: 5px 10px; background: #b22; color: #fff; }

@media screen and (max-width: 599px) {
.flag-a { margin-bottom: 10px; font-size: 11px; }
}

/* global footer */

.footer-a { margin: 0; }
 .footer-a .songs-a { margin-bottom: 0; padding: 30px; background: #e3e3e3; }
 .footer-a a { color: inherit; }
 .footer-a > .contain > .wrap { padding: 30px; font-size: 14px; text-align: center; }
  .footer-a .note { max-width: 1000px; margin-left: auto; margin-right: auto; font-size: 12px; font-weight: normal; }
  .footer-a .nav { list-style: none; margin: 0 0 10px; padding: 0; }
   .footer-a .nav li { display: inline-block; margin: 0; padding: 0; color: inherit; vertical-align: top; }
   .footer-a .nav li ~ li { margin-left: 20px; }
    .footer-a .nav li:before { width: 3px; height: 3px; margin: 9px 0 0 -12px; background: #333; }
    .footer-a .nav li:first-child:before { display: none; }
    .no-touch .footer-a .nav li a:hover { text-decoration: underline; }

@media screen and (max-width: 1119px) {
.footer-a .songs-a { padding: 25px 20px; }
}
@media screen and (max-width: 599px) {
.footer-a .songs-a { padding: 20px 15px; }
.footer-a > .contain > .wrap { padding: 15px; }
 .footer-a .note { font-size: 11px; }
}

/* headlines dziennik */

.headlines-a {  }
 .headlines-a > .hx { margin-bottom: 15px; padding: 10px 15px; background: #232830; color: #fff; font-size: 14px; text-transform: uppercase; }
 .headlines-a ul { padding: 0; }
  .headlines-a li { margin-bottom: 10px; padding-left: 20px; font-size: 16px; line-height: 1.3; }
  .headlines-a li ~ li { margin-top: 5px; padding-top: 5px; border-top: 1px solid #eee; }

@media screen and (max-width: 599px) {
.headlines-a > .hx { margin-left: -15px; margin-right: -15px; }
}

/* headlines oriet */

.headlines-b { }
 .headlines-b > .hx { margin-bottom: 10px; color: #a43f21; font-size: 14px; font-weight: bold; text-transform: uppercase; }
 .headlines-b > .wrap { padding: 15px; border-top: 4px solid #a43f21; background: #eee; }
  .headlines-b ul { list-style: none; }
   .headlines-b li { margin: 0 0 5px; font-size: 13px; }
    .headlines-b li a { display: block; overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis; }
  .headlines-b .more { padding-top: 10px; border-top: 1px solid #ddd; font-size: 11px; text-align: right; text-transform: lowercase; }
   .headlines-b .more a { color: #555; }
   .headlines-b .more span { color: #a43f21; }

/* image wrapper */

.img-a { display: block; position: relative; overflow: hidden; height: 0; padding-top: 52.5%; background: url(../images/spinner-a.gif) 50% 50% no-repeat; text-align: center; }
 .img-a img { display: block; position: absolute; left: 0; top: 0; min-width: 100%; min-height: 100%; }
 .img-a.nocover img { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }
 :root .img-a img { left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.img-a.ar1 { padding-top: 52.5%; }
.img-a.ar2 { padding-top: 100%; }
.img-a.ar3 { padding-top: 75%; }

/* message box  */

.message-a { margin: 0 0 15px; padding: 20px 15px; background: #eee; text-align: center; }
 .message-a > .hx { margin: 0 0 5px; font-size: 24px; }
 .message-a > p { font-size: 16px; line-height: 1.3; }

@media screen and (max-width: 599px) {
.message-a { margin-left: -15px; margin-right: -15px; }
 .message-a > .hx { margin-bottom: 10px; font-size: 16px; }
 .message-a > p { padding: 0; font-size: 13px; line-height: 1.4; }
}

.message-a.blocked { margin-bottom: 0; padding: 10px 15px; background: #4a5a70; color: #fff; }
 .message-a.blocked > .hx { margin-bottom: 0; color: inherit; font-size: 20px; line-height: 40px; }
  .message-a.blocked > .hx:before { display: inline-block; content: '\e803'; margin: 0 15px 0 0; font: 34px/40px Fontello; vertical-align: top; }
 .message-a.blocked > p { display: none; }

@media screen and (max-width: 767px) {
.message-a.blocked > .hx { font-size: 18px; }
}
@media screen and (max-width: 599px) {
.message-a.blocked { padding-bottom: 15px; }
.message-a.blocked > .hx { font-size: 16px; line-height: 1.3; }
 .message-a.blocked > .hx:before { display: block; margin: 0 auto 5px; }
}

.message-a.sample { margin-bottom: 20px; padding: 10px 30px 20px 175px; border: none; border-top: 10px solid #eee; border-bottom: 1px solid #aaa; background: #eee url(../images/message-a-sample-bg-a.png) 20px 100% no-repeat; background-size: contain; text-align: left; }
 .message-a.sample > .hx { font-size: 24px; }
 .message-a.sample > p { font-size: 16px; line-height: 1.3; }
  .message-a.sample .action { margin: -5px -3px 0; font-size: 0; letter-spacing: -1em; }
   .message-a.sample .button-a { margin: 5px 3px 0; font-size: 14px; line-height: 29.6px; letter-spacing: 0; font-weight: bold; text-transform: uppercase; }
   .message-a.sample .button-a.more { background-color: #aaa; }

@media screen and (max-width: 767px) and (min-width: 600px) {
 .message-a.sample .button-a span { display: none; }
}
@media screen and (max-width: 599px) {
.message-a.sample { border-top: none; padding: 20px 15px; background-image: none !important; text-align: center; }
 .message-a.sample > .hx { font-size: 16px; }
 .message-a.sample > p { padding: 0; font-size: 13px; line-height: 1.4; }
}
@media screen and (max-width: 479px) {
.message-a.sample .action { margin: 0; }
 .message-a.sample .button-a { display: block; width: 100%; margin-left: 0; margin-right: 0; }
}

/* main nav */

.nav-a { }
 .nav-a ul { list-style: none; margin: 0; padding: 0; background: #4a5a70; font-size: 0; letter-spacing: -1em; }
  .nav-a li { display: inline-block; font-size: 16px; font-weight: bold; line-height: 40px; letter-spacing: 0; vertical-align: bottom; }
  .nav-a li ~ li { border-left: 1px solid rgba(255,255,255,0.3); }
   .nav-a li:before { display: none; }
   .nav-a li > a, .nav-a li > span { display: block; padding: 0 15px; color: #fff; text-decoration: none; cursor: pointer; }
   .nav-a li > a:hover, .nav-a li > span:hover { background-color: rgba(255,255,255,0.1); }
   .nav-a li.active > a, .nav-a li.active > span { background: #fff; color: #222; }
 .flexbox .nav-a ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
  .flexbox .nav-a li { -webkit-box-flex: 1 auto; -moz-box-flex: 1 auto; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; }

@media screen and (max-width: 1099px) {
.nav-a { display: none; }
}

/* top nav */

.nav-b { position: relative; }
 .nav-b:before { position: absolute; left: -100%; right: -100%; top: 0; bottom: 0; z-index: -1; content: ' '; background: #222; }
 .nav-b:after { display: table; clear: both; content: ''; }
 .nav-b ul { float: left; list-style: none; height: 25px; margin: 0; padding: 0; font-size: 0; letter-spacing: -1em; }
 .nav-b ul + ul { float: right; }
  .nav-b li { display: inline-block; font-size: 12px; line-height: 25px; letter-spacing: 0; vertical-align: bottom; }
   .nav-b li:before { display: none; }
   .nav-b li a { display: block; padding: 0 10px; color: #fff; text-decoration: none; }
   .no-touch .nav-b li a:hover, .nav-b li.active > a { background-color: rgba(255,255,255,0.05); }

@media screen and (max-width: 599px) {
.nav-b { background-color: #486272; }
 .nav-b:before { display: none; }
 .nav-b:after { position: absolute; right: 25px; bottom: 100%; content: ''; border: 10px solid transparent; border-bottom-color: #486272; }
 .nav-b ul { float: none; height: auto; background: none; }
 .nav-b ul + ul { float: none; }
  .nav-b li { display: block; border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%; font-size: 14px; line-height: 40px; }
   .nav-b li a { padding: 0 15px; }
   .no-touch .nav-b li a:hover, .nav-b li.active > a { background-color: rgba(0,0,0,0.2); }
}

/* pops */

.pop-a { position: absolute; left: 0; top: 0; right: 0; height: 0; max-width: none; margin-bottom: 0; }
 .pop-a > .overlay { position: fixed; left: 0; top: 0; right: 0; z-index: 1001; height: 0; margin: 0; background: #111; background: rgba(0,0,0,0.9); opacity: 0; }
 .pop-a > .box { position: absolute; left: 10001px; right: 0; top: 110px; z-index: 1002; width: 700px; margin: 0 0 0 -350px; padding: 30px; background: #fff; opacity: 0; }
 .pop-a > .overlay, .pop-a > .box { -webkit-transition: opacity 0.35s, height 0s 0.35s, right 0s 0.35s, height 0s 0.35s; transition: opacity 0.35s, left 0s 0.35s, right 0s 0.35s, height 0s 0.35s; }
 .pop-a:target > .box, .pop-a.target > .box { left: 50%; opacity: 1; -webkit-transition: opacity 0.35s, left 0s, right 0s; transition: opacity 0.35s, left 0s, right 0s; }
 .pop-a:target > .overlay, .pop-a.target > .overlay { height: 120%; opacity: 1; -webkit-transition: opacity 0.35s, height 0s; transition: opacity 0.35s, height 0s; }
  .pop-a > .box > .close { float: right; margin: -25px -13px 0 0; }
   .pop-a > .box > .close a { color: inherit; font-size: 24px; text-decoration: none !important; }
    .pop-a > .box > .close a:before { content: '\e80d'; font: 20px/1 Fontello; }
  .pop-a > .box > .hx { margin: 0 -30px 30px; padding: 0 30px 20px; border-bottom: 1px solid #eee; font-size: 20px; font-weight: bold; text-transform: uppercase; }

@media screen and (max-width: 767px) {
.pop-a > .box { width: 530px; margin: 0 0 0 -265px; }
}
@media screen and (max-width: 599px) {
.pop-a > .box { top: 50px; width: auto; margin: 0; padding: 20px 15px; }
.pop-a:target > .box, .pop-a.target > .box { left: 15px; right: 15px; }
 .pop-a > .box > .close { float: right; margin: -9px 0 0 20px; }
 .pop-a > .box > .hx { margin: 0 -15px 20px; padding: 0 15px 20px; }
.pop-a.erase p { font-size: 14px; text-align: center; }
}

/* seach bar */

.search-a { }
 .search-a form { margin: 0; }
  .search-a div { position: relative; margin: 0; }
   .search-a input[name=q] { height: 30px; padding-right: 95px; background-position: 5px 50% !important; line-height: 28px; }
   .search-a input[type=submit] { position: absolute; right: 0; top: 0; height: 30px; border-radius: 0; font-size: 12px; line-height: 28px; }

/* ads */

.sense-a { text-align: center; }

@media screen and (max-width: 359px) {
.sense-a { margin-left: -5px; margin-right: -5px; }
}

/* socials */

.socials-a { }
 .socials-a ul { list-style: none; margin: 0 -3px; padding: 0; font-size: 0; letter-spacing: -1em; }
  .socials-a li { display: inline-block; margin: 0; padding: 0 3px; font-size: 14px; letter-spacing: 0; vertical-align: top; }
   .socials-a li:before { display: none; }
   .socials-a li a { display: block; position: relative; width: 40px; height: 40px; margin: 0 auto; font: 20px/40px Fontello; text-align: center; }
   .no-touch .socials-a li a:hover { opacity: 0.9; }
    .socials-a li a:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 4px; background: #ccc; color: #fff; }
    .socials-a li.facebook a:before { content: '\e80c'; background-color: #4e6cb5; }
    .socials-a li.twitter a:before { content: '\e80b'; background-color: #2aaee8; }
    .socials-a li.google a:before { content: '\e80a'; background-color: #d94d44; }
    .socials-a li.email a:before { content: '\e815'; background-color: #cccccc; }
    .socials-a li a span { display: none; }

@media screen and (max-width: 599px) {
.socials-a {  }
 .socials-a ul { display: table; width: 100%; }
  .socials-a li { display: table-cell; padding: 0; }
   .socials-a li a { width: 100%; }
    .socials-a li a:before { border-radius: 0; }
}

/* songs or quizzes */

.songs-a { width: 100%; }
 .songs-a .hx { margin-bottom: 25px; }
 .songs-a ol,
 .songs-a ul { list-style: none; margin: -20px -10px 0; padding: 0; font-size: 0; letter-spacing: -.35em; }
  .songs-a li { display: inline-block; position: relative; width: 12.5%; margin: 0; padding: 0; border: 1px solid transparent; border-width: 20px 10px 0; font-size: 11px; letter-spacing: 0; vertical-align: top; text-align: center; }
  .songs-a.v2 li { font-size: 13px; line-height: 1.4; }
   .songs-a ul li:before { display: none; }
   .songs-a ol li:before { position: absolute; left: 0; top: 0; z-index: 1; content: counter(ordered); min-width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border-radius: 12px; background: #333; color: #fff; font-size: 11px; font-weight: bold; line-height: 24px; text-align: center; }
   .songs-a li a { display: block; text-decoration: none !important; }
   .no-touch .songs-a li a:hover { color: #111; }
   .songs-a li img { display: block; width: 100%; margin: 0 0 7px !important; }
   .songs-a li .img-a { margin: 0 auto 7px !important; }
   .songs-a li small { display: block; margin: 0 0 3px; font-size: 8px; }
   .songs-a li span { display: block; font-size: 12px; }

@media screen and (max-width: 1119px) {
.songs-a li { width: 25%; }
}
@media screen and (max-width: 479px) {
.songs-a .hx { font-size: 14px; }
.songs-a li { width: 50%; }
}

/* status embed: tweet */

.status-a { position: relative; max-width: 575px; padding: 19px; border: 1px solid #e1e8ed; border-radius: 4px; font: 16px/1.4 Helvetica Neue,Helvetica,Arial,sans-serif; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; pointer-events: none; }
.status-a { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; }
 .status-a:before { float: right; content: 'Follow'; margin: -3px 0 5px 10px; padding: 0 10px 0 35px; border: 1px solid #55acee; border-radius: 4px; color: #55acee; font-size: 14px; font-weight: bold; line-height: 28px; }
 .status-a:after { position: absolute; right: 85px; top: 16px; content: '\e80b'; color: #55acee; font: 16px/30px Fontello; }
 .status-a p { margin: 0 0 10px; }
  .status-a a { color: #3B94D9 !important; cursor: inherit; }
  .status-a a.ttl { word-spacing: -0.25em; }
 .status-a .header { padding-left: 50px; line-height: 18px; }
  .status-a .header img { position: absolute; left: 19px; top: 19px; width: 40px; height: 40px; margin: 0; }
  .status-a .header strong { display: block; padding: 2px 0; color: #1c2022; }
   .status-a .header strong.o:after { display: inline-block; margin: 2px 0 0 7px; content: '\e81b'; color: #8acaf7; font: 14px/1 Fontello; vertical-align: top; }
  .status-a .header span { color: #697882; font-size: 0.875em; }
 .status-a .footer { overflow: hidden; color: #697882; font-size: 14px; line-height: 16px; }
  .status-a .footer time { display: block; margin: 0 0 10px; }
  .status-a .footer span { float: left; margin-left: 15px; }
  .status-a .footer time + span { position: relative; margin-left: 35px; }
   .status-a .footer time + span:after { position: absolute; left: -35px; content: '\e81d'; margin: 1px 0 0; font: 1em Fontello; vertical-align: top; }
   .status-a .footer span:before { display: inline-block; content: '\e81f'; margin: 0 5px 0 0; font: 1.07em Fontello; vertical-align: top; }
   .status-a .footer span + span:before { margin-top: 2px; font-size: 0.9em; }
   .status-a .footer span + span:before { content: '\e800'; }

@media screen and (max-width: 599px) {
.status-a { padding: 14px; font-size: 14px; }
 .status-a:before { display: none; }
 .status-a:after { right: 15px; top: 14px; }
 .status-a .header { padding-left: 44px; line-height: 16px; }
  .status-a .header img { left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 3px; }
 .status-a .footer { font-size: 12px; }
}

/* status embed: facebook */

.status-b { padding: 12px; border: 1px solid #e5e6e9; border-bottom-color: #d0d1d5; border-radius: 3px; font: 14px/1.38 Helvetica,Arial,sans-serif; pointer-events: none; }
.status-b { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; }
 .status-b p { margin-bottom: 10px; }
  .status-b small { display: block; color: #9197a3; font-size: 12px; }
 .status-b .header { position: relative; min-height: 40px; padding: 2px 0 0 50px; font-size: 14px; line-height: 18px; }
  .status-b .header:before { float: right; content: 'Profil'; width: 75px; margin: 3px 5px 0 10px; padding: 0 10px 0 30px; border: 1px solid #ccc; border-radius: 3px; background: #fbfbfc; color: #4e5665; font-size: 12px; font-weight: bold; line-height: 22px; }
  .status-b .header:after { position: absolute; right: 58px; top: 10px; content: '\e80c'; width: 14px; height: 14px; padding: 0 2px 0 0; border-radius: 2px; background: #5b74b3; color: #fbfbfc; font: 13px/18px Fontello; text-align: right; }
  .status-b .header img { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: 0; }
  .status-b .header strong { display: block; color: #3b5998; }
   .status-b .header strong.o:after { display: inline-block; margin: 2px 0 0 5px; content: '\e822'; color: #5890ff; font: 14px/1 Fontello; vertical-align: top; }
   .status-b .header small:after { content: '\e819'; font: 0.9em/1 Fontello; }
 .status-b .footer  { overflow: hidden; line-height: 20px; }
  .status-b .footer small { margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid #f0f0f0; }
  .status-b .footer small:last-child,
  .status-b .footer.slim small { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .status-b .footer > span { float: left; width: 33.33%; color: #7f7f7f; text-align: center; font-size: 12px; font-weight: bold; }
  .status-b .footer.slim > span { display: none !important; }
   .status-b .footer > span:before { display: inline-block; margin-right: 5px; color: #6a7180; font: 14px/20px Fontello; vertical-align: top; }
   .status-b .footer > span:nth-child(2):before { content: '\e821'; margin-top: -1px; }
   .status-b .footer > span:nth-child(3):before { content: '\e81c'; }
   .status-b .footer > span:nth-child(4):before { content: '\e81e'; font-size: 16px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

@media screen and (max-width: 599px) {
.status-b { font-size: 13px; }
 .status-b .header { padding-top: 0; font-size: 13px; line-height: 16px; }
  .status-b .header:before { display: none; }
  .status-b .header:after { right: 0; top: 2px; }
  .status-b .header strong { padding-right: 20px; }
  .status-b .header small { margin-top: 3px; font-size: 11px; line-height: 1.2; }
  .status-b .footer small { font-size: 11px; line-height: 1.2; }
  .status-b .footer > span { position: relative; overflow: hidden; width: 33.33%; height: 20px; font-size: 0; text-indent: 321%; white-space: nowrap; }
   .status-b .footer > span:before { display: block; font-size: 14px; text-indent: 0; }
}

/* main article */

.story-a { width: 100%; margin-bottom: 20px; font: 18px/1.625 Georgia,serif; }
 .story-a:after { display: table; clear: both; content: ''; }
 .story-a > p:first-child { color: #111; }
 .story-a .sense-a { float: left; margin: 0 20px 10px 0; }

@media screen and (max-width: 599px) {
.story-a { color: #111; font-size: 15px; line-height: 1.4; }
 .story-a .sense-a { float: none; margin: 20px -5px; }
}

/* vvvp article layout */

.story-b { position: relative; margin-bottom: 30px; }
 .story-b:after { display: table; clear: both; content: ''; }
 .story-b > header { position: relative; z-index: 2; float: left; width: 245px; margin: 0 -100% 0 0; }
  .story-b > header h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.5px; }
  .story-b > header .date { margin: 30px 0; padding: 15px 0; border: 1px solid #d6d6d6; border-width: 1px 0; color: #999; font-size: 14px; }
  .story-b > header .socials-a { margin-bottom: 30px; }
  .story-b > header .featured-b { margin-top: 60px; }
   .story-b > header .featured-b article { width: 100%; }
 .story-b > section { margin: 0 325px 0 270px; padding: 0; }
  .story-b > section .story { }
   .story-b > section .story p:first-child { color: #111; font-weight: bold; }
   .story-b > section .story .sense-a.a { position: absolute; right: 0; top: 0; }
   .story-b > section .story .sense-a.c { position: absolute; right: 0; top: 280px; }
   .story-b > section .story .sense-a.b { margin: 25px 0; padding: 25px 0 20px; border: 1px solid #d6d6d6; border-width: 1px 0; }

@media screen and (max-width: 1279px) {
.story-b > header { float: none; width: 100%; margin: 0; padding: 0 325px 0 0; }
 .story-b > header h1 { font-size: 44px; }
 .story-b > header .date { margin: 20px 0; padding: 0; border: none; }
 .story-b > header .featured-b { display: none; }
 .story-b > section { float: none; width: 100%; margin: 0; padding: 0 325px 0 0; }
}
@media screen and (max-width: 1023px) {
.story-b > header { padding-right: 0; }
.story-b > section { padding-right: 0; }
 .story-b > section .story .sense-a.a,
 .story-b > section .story .sense-a.c,
 .story-b > section .story .sense-a.b { position: relative; top: auto; right: auto; margin: 25px 0 20px; padding: 0; border-width: 0; }
}
@media screen and (max-width: 599px) {
.story-b > header h1 { font-size: 26px; }
.story-b > header .date { font-size: 12px; }
.story-b > section .story { font-size: 14px; }
}
@media screen and (max-width: 359px) {
.story-b > section .story .sense-a { margin-left: -5px !important; margin-right: -5px !important; }
}

/* source line */

.source-a { color: #999; font-size: 13px; }
 .source-a span { float: right; }
  .source-a span a { color: inherit; }
  .source-a span a:hover { color: #333; }

@media screen and (max-width: 599px) {
 .source-a span { display: block; float: none; margin: 0 0 5px !important; }
}

/* article title */

.title-a { margin: 0 0 30px; font: bold 46px/1.1 Noto Serif,Georgia,serif; letter-spacing: -1px; }

@media screen and (max-width: 767px) {
.title-a { font-size: 38px; }
}
@media screen and (max-width: 599px) {
.title-a { font-size: 28px; line-height: 1.2; }
}
@media screen and (max-width: 374px) {
.title-a { font-size: 24px; }
}

/* global header */

.top-a { position: relative; z-index: 100; margin-bottom: 0; }
 .top-a > .contain { position: relative; padding: 25px 0 0; }
  .top-a .nav-a { margin-bottom: 0; }
  .top-a .nav-b { position: absolute; left: 0; top: 0; right: 0; }
  .top-a .search-a { position: absolute; right: 10px; top: 50%; width: 300px; margin: -25px 0 0; }
  .top-a .toggler { display: none; overflow: hidden; position: absolute; right: 15px; top: 50%; width: 40px; height: 40px; margin: -28px auto 0; border-radius: 4px; background: #486272; text-decoration: none !important; text-indent: -10001px; }
   .top-a .toggler:before, .top-a .toggler:after { position: absolute; left: 10px; top: 14px; content: ''; width: 20px; height: 2px; margin: 0; background: #fff; box-shadow: 0 5px 0 #fff; }
   .top-a .toggler:before, .top-a .toggler:after { -webkit-transition: all 0.15s; transition: all 0.15s; }
   .top-a .toggler:after { top: 24px; box-shadow: none; }
   .navon .top-a .toggler:before, .navon .top-a .toggler:after { top: 19px; box-shadow: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
   .navon .top-a .toggler:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
   .native.android .navon .top-a .toggler:after { margin-top: -1px; }

@media screen and (max-width: 1119px) {
.top-a .search-a { width: 250px; margin-top: -5px; }
}
@media screen and (max-width: 767px) {
.top-a .search-a { display: none; }
}
@media screen and (max-width: 599px) {
.top-a { background: #2d343f; }
 .top-a > .contain { padding: 0; }
  .top-a .toggler { display: block; }
  .top-a .nav-b { display: none; position: absolute; left: 0; top: 50%; right: 0; margin: 35px 0 0; }
  .navon .top-a .nav-b { display: block; }
}

/* var style */

var { font: inherit; }
body.sample var { margin: 0 -3px; padding: 0 3px; -webkit-animation: pulse 2s linear infinite; animation: pulse 2s linear infinite; }

@-webkit-keyframes pulse { 0%, 100% { background-color: transparent; } 50% { background-color: #f2f1c3; } }
@keyframes pulse { 0%, 100% { background-color: transparent; } 50% { background-color: #f2f1c3; } }

/* warning */

.warning-a { position: relative; margin: 0 0 20px; padding: 20px; background: #eee; color: #555; font-size: 15px; }
.sample .warning-a, .blocked .warning-a { display: none; }
 .warning-a .close { float: right; overflow: hidden; width: 20px; height: 20px; margin: -20px -20px 0 15px; background: rgba(0,0,0,0.1); font: 14px/20px Fontello; text-indent: 321%; white-space: nowrap; }
  .warning-a .close:before { display: block; content: '\e80d'; text-indent: 0; text-align: center; }
 .warning-a a { color: inherit; }

@media screen and (max-width: 599px) {
.warning-a { margin-left: -15px; margin-right: -15px; padding: 15px; font-size: 13px; }
 .warning-a .close { margin: -15px -15px 0 10px; }
}

/*!
 * Buttons
/* ---------------------------------------- */

.button-a, button, input[type="submit"], input[type="button"], input[type="reset"] { display: inline-block; height: 40px; padding: 0 20px; border: none; border-radius: 0; background: #4a5a70; color: #fff !important; font-weight: bold; font-size: 14px; line-height: 40px; text-transform: uppercase; text-align: center; text-decoration: none !important; }
.button-a.small { height: 30px; padding: 0 15px; line-height: 30px; }
.button-a.red { background: #b22; }
.no-touch .button-a:hover { opacity: 0.8; }

@media screen and (max-width: 599px) {
.button-a, button, input[type="submit"], input[type="button"], input[type="reset"] { font-size: 15px; }
.button-a.small { font-size: 13px; }
}

/*!
 * Helpers
/* ---------------------------------------- */

.offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; }

.alignright { float: right; margin: 0 0 20px 20px; }
.alignleft { float: left; margin: 0 20px 20px 0; }
 .alignright img, .alignleft img { display: block; max-width: none; }

[hidden] { display: none !important; }

.tal { text-align: left !important; }
.tac { text-align: center !important; }
.tar { text-align: right !important; }

.ttl { text-transform: lowercase !important; }

.ie8 .hide-desktop { display: none !important; }

@media screen and (min-width: 1px) { .hide { display: none !important; } }
@media screen and (min-width: 1024px) { .show-desktop { display: block !important; } .hide-desktop { display: none !important; } }
@media screen and (max-width: 1023px) { .show-tablet { display: block !important; } .hide-tablet { display: none !important; } }
@media screen and (max-width: 599px) { .show-mobile { display: block !important; } .hide-mobile { display: none !important; } }

/*!
 * Defaults
/* ---------------------------------------- */

form { }
 label { cursor: pointer; vertical-align: middle; }
 label:first-child { display: block; margin: 0 0 5px; }
  label em { color: #f00; }
 input[type=text], input[type=password], input[type=search], input[type=email], input[type=tel], textarea, select { width: 100%; height: 40px; padding: 0 9px; border: 1px solid #ccc; border-radius: 0; background: #fff; box-shadow: none; font-size: 13px; line-height: 38px; vertical-align: top; -webkit-appearance: none; outline: none; }
 input[type="checkbox"], input[type="radio"] { padding: 0; }
 textarea { overflow: auto; height: auto; padding: 9px; line-height: 1.2; resize: vertical; }
 select { padding: 8px 15px 8px 8px; background: #fff url(../images/select-a.png) 100% 50% no-repeat; line-height: normal; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; }
 select::-ms-expand { display: none; }
 .ie9 select, .ie8 select { padding-right: 8px; padding-left: 6px; background-image: none; }
 .ie8 select { padding-top: 10px; padding-bottom: 10px; }
 .gecko select { padding-left: 4px; }
 button, input[type="submit"], input[type="button"], input[type="reset"] { overflow: visible; cursor: pointer; -webkit-appearance: button; } button::-moz-focus-inner { padding: 0; border: none; }
 button[disabled], input[disabled] { cursor: default; }

:root .tick { position: absolute; opacity: 0; }
:root .tick + label { display: block; padding-left: 25px; vertical-align: top; }
 :root .tick + label:before { float: left; content: ''; width: 16px; height: 16px; margin: 1px 0 0 -25px; padding: 3px; border: 1px solid #ccc; background: #fff; background-clip: content-box; vertical-align: top; }
 :root .tick[type=radio] + label:before { border-radius: 50%; }
 :root .tick:checked + label:before { background-color: #486272; }

::-webkit-input-placeholder { color: #aaa; font-style: normal; opacity: 1; }
:-ms-input-placeholder { color: #aaa !important; font-style: normal; opacity: 1; }
:-moz-placeholder { color: #aaa; font-style: normal; opacity: 1; }
::-moz-placeholder { color: #aaa; font-style: normal; opacity: 1; }
.placeholder, .placeholdersjs { color: #aaa !important; font-style: normal; opacity: 1; }
select:invalid { color: #aaa; }

table { display: table; border-collapse: collapse; border-spacing: 0; }
 table th, table td { padding: 5px 10px; border: 1px solid #eee; }

h1, h2, h3, h4, h5, h6 { color: #111; font: bold 10px/1.2 Source Sans Pro,Georgia,serif; }
h1 { color: #232830; font-size: 42px; line-height: 1.1; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }

ul, ol, dd, blockquote { padding-left: 15px; }
 ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }

blockquote { padding: 20px; background: #f3f3f3; font-style: italic; }

ol { list-style: none; counter-reset: ordered; }
 ol li { counter-increment: ordered; }
  ol li:before { position: absolute; content: counter(ordered) ')'; width: 15px; margin: 0 0 0 -20px; text-align: right; }

ul { list-style: none; }
 ul li { }
  ul li:before { float: left; overflow: hidden; content: ''; width: 5px; height: 5px; margin: 11px 0 0 -15px; padding: 0; border-radius: 50%; background: #06c; }

a { background: transparent; color: #4a5a70; text-decoration: none; cursor: pointer; }
a:hover, a:focus, a:active { color: #111; text-decoration: none; }
 a span { cursor: pointer; }

img { max-width: 100%; border-width: 0; opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
img { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
img[data-src] { opacity: 0; }

var { font: inherit; }
pre { padding: 10px; border: 1px solid #ccc; background: #f3f3f3; font: 12px/1.2 Consolas,Monaco,Courier New,monospace; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
code { padding: 2px 4px; background-color: #f9f2f4; color: #c7254e; font-size: 80%; white-space: nowrap; }

hr, div.hr { overflow: hidden; width: 100%; height: 1px; margin: 15px 0; border: none; border-top: 1px solid #eee; background: none; font-size: 0; } div.hr * { display: none; }