* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  color: #555;
  line-height: 1.8em;
  font-family: 'Proxima Nova', sans-serif;
  -webkit-transition-property: font-size;
  -moz-transition-property: font-size;
  transition-property: font-size;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  transition-timing-function: ease-in; }

* {
  margin: 0;
  padding: 0; }

.posrel, header, .main .content ul article .article__meta, .main .content ul article .article__more, .main .article-single header .article__meta, footer {
  position: relative;
  overflow: hidden;
  width: 100%; }

.container {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }

a:hover {
  color: #000; }

header {
  height: 140px;
  margin-bottom: 3%;
  background: #f9f9f9; }
  header .logo {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
    position: relative;
    padding: 0 1%;
    z-index: 10; }
    header .logo:last-child {
      margin-right: 0; }
    @media screen and (max-width: 700px) {
      header .logo {
        float: left;
        display: block;
        margin-right: 4.82916%;
        width: 100%;
        text-align: center; }
        header .logo:last-child {
          margin-right: 0; } }
  header .headline {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
    font-size: 450%;
    line-height: 1.5em;
    margin: -3% 0 0 0;
    color: #0FC;
    letter-spacing: .25px;
    text-align: right;
    text-transform: uppercase;
    z-index: 0; }
    header .headline:last-child {
      margin-right: 0; }
    @media screen and (max-width: 700px) {
      header .headline {
        float: left;
        display: block;
        margin-right: 4.82916%;
        width: 100%;
        font-size: 350%;
        position: absolute;
        top: 0;
        left: 0;
        margin: -1% 0 0 0 !important;
        text-align: center; }
        header .headline:last-child {
          margin-right: 0; } }
  header h1 {
    font-weight: 800; }

.main {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px 7%;
  /* aside end */
  /* content */
  /* article-single end */ }
  .main:before, .main:after {
    content: " ";
    display: table; }
  .main:after {
    clear: both; }
  .main aside {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
    /* links end */
    /* status end */ }
    .main aside:last-child {
      margin-right: 0; }
    @media screen and (max-width: 700px) {
      .main aside {
        float: left;
        display: block;
        margin-right: 4.82916%;
        width: 100%; }
        .main aside:last-child {
          margin-right: 0; } }
    .main aside .links {
      list-style: none; }
      .main aside .links li {
        float: left;
        width: 100%;
        background: #eee;
        margin: 0 0 1% 0; }
        .main aside .links li a {
          float: left;
          font-size: 12px;
          font-weight: 600;
          color: #666;
          text-transform: uppercase;
          text-decoration: none;
          padding: 2.3% 2% 1.9%; }
          .main aside .links li a span {
            font-weight: 300;
            color: #aaa;
            text-transform: none; }
        .main aside .links li a:hover {
          color: #000; }
        .main aside .links li .blog {
          border-left: 5px solid #0FC; }
        .main aside .links li .twitter {
          border-left: 5px solid #33bcef; }
        .main aside .links li .dribbble {
          border-left: 5px solid #ea4c89; }
        .main aside .links li .behance {
          border-left: 5px solid #1769ff; }
        .main aside .links li .email {
          border-left: 5px solid #555; }
    .main aside .status {
      float: left;
      width: 100%;
      margin: 10% 0 0 0; }
      .main aside .status h4 {
        font-weight: 100;
        text-transform: uppercase;
        color: #555;
        margin: 0 70% 1% 0; }
      .main aside .status a {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #666;
        text-transform: uppercase;
        text-decoration: none; }
        .main aside .status a span {
          font-weight: 300;
          color: #aaa;
          text-transform: none; }
      .main aside .status a:hover {
        color: #000; }
  .main .content {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
    margin-left: 8.5298%;
    line-height: 1.8em;
    /* ul */ }
    .main .content:last-child {
      margin-right: 0; }
    @media screen and (max-width: 700px) {
      .main .content {
        float: left;
        display: block;
        margin-right: 4.82916%;
        width: 100%;
        margin-left: 0%;
        margin-top: 7%; }
        .main .content:last-child {
          margin-right: 0; } }
    .main .content h2 {
      font-size: 175%;
      font-weight: 500;
      margin-bottom: 5%; }
    .main .content h3 {
      margin-bottom: 1%;
      font-weight: 500; }
    .main .content h4 {
      font-weight: 300; }
    .main .content ul {
      list-style: none;
      margin: 2% 0 0 0;
      /* article end */ }
      .main .content ul li {
        padding: 0 0 10%;
        margin-bottom: 10%;
        border-bottom: 1px solid #eee; }
      .main .content ul li:last-child {
        border-bottom: none !important; }
      .main .content ul article a:hover {
        color: #00ffcc; }
      .main .content ul article h3 a {
        text-decoration: none;
        color: #000;
        font-weight: 700; }
      .main .content ul article .article__meta {
        line-height: 1.3em; }
        .main .content ul article .article__meta span {
          text-transform: uppercase;
          font-size: 8px; }
        .main .content ul article .article__meta a {
          font-weight: 700;
          text-decoration: none;
          font-size: 12px;
          color: #000; }
        .main .content ul article .article__meta a:hover {
          color: #00ffcc; }
      .main .content ul article .article__more {
        margin: 5% 0 0 0; }
        .main .content ul article .article__more a {
          float: left;
          padding: 1% 3% 1% 2%;
          font-size: 12px;
          font-weight: 600;
          color: #666;
          text-transform: uppercase;
          text-decoration: none;
          background: #eee;
          border-left: 5px solid #0FC; }
        .main .content ul article .article__more a:hover {
          color: #000; }
  .main .article-single {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
    margin-left: 25.58941%; }
    .main .article-single:last-child {
      margin-right: 0; }
    @media screen and (max-width: 700px) {
      .main .article-single {
        float: left;
        display: block;
        margin-right: 4.82916%;
        width: 100%;
        margin-left: 0%; }
        .main .article-single:last-child {
          margin-right: 0; } }
    .main .article-single .lead p {
      margin-bottom: 5%; }
    .main .article-single .main-content {
      padding: 0 0 5%; }
      .main .article-single .main-content p {
        margin-bottom: 5%; }
    .main .article-single header {
      background: none;
      margin: 0 0 2%;
      height: auto; }
      .main .article-single header h2 {
        font-weight: 300;
        font-size: 200%;
        line-height: 1.3em; }
      .main .article-single header .article__meta {
        line-height: 1.3em; }
        .main .article-single header .article__meta span {
          text-transform: uppercase;
          font-size: 8px; }
        .main .article-single header .article__meta a {
          font-weight: 700;
          text-decoration: none;
          font-size: 12px;
          color: #000; }
        .main .article-single header .article__meta a:hover {
          color: #00ffcc; }
    .main .article-single ul, .main .article-single ol {
      margin: 5%; }
    .main .article-single blockquote {
      padding: 1%;
      margin: 2% 0;
      background: #f2f2f2; }
      .main .article-single blockquote p {
        margin: 0 !important; }
    .main .article-single footer a {
      float: left;
      padding: 1% 3% 1% 2%;
      font-size: 12px;
      font-weight: 600;
      color: #666;
      text-transform: uppercase;
      text-decoration: none;
      background: #eee;
      border-left: 5px solid #0FC; }
    .main .article-single footer a:hover {
      color: #000; }

/* main end */
footer {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }
  footer:before, footer:after {
    content: " ";
    display: table; }
  footer:after {
    clear: both; }
  footer a {
    text-decoration: none; }