/* ==========================================================================
   Table of Contents
   ========================================================================== */
/*
    0.  Normalize
    1.  Basics
    2.  Toggle Menu
    3.  Code Highlighter (Monokai Sublime style)
    4.  General
    5.  Post
    6.  Pagination
    7.  Footer
    8.  Media Queries
    9.  Animations
 */
/* ==========================================================================
   0. Normalize.css v2.1.3 | MIT License | git.io/normalize |
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

audio, canvas, video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

a {
  background: transparent; }

a:focus {
  outline: thin dotted; }

a:active, a:hover {
  outline: 0; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: 700; }

dfn {
  font-style: italic; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

mark {
  background: #FF0;
  color: #000; }

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre-wrap; }

q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0; }

button, input {
  line-height: normal; }

button, select {
  text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled], html input[disabled] {
  cursor: default; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ==========================================================================
   1. Basics
   ========================================================================== */
html {
  font-size: 16px;
  transition: font-size 0.25s ease-in; }

body {
  font-family: 'Lato', sans-serif;
  color: #3F413A; }

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  color: #000;
  font-weight: 900; }

h1 {
  font-size: 2rem; }

h2 {
  font-size: 1.8rem; }

h3 {
  font-size: 1.6rem; }

h4 {
  font-size: 1.4rem; }

h5 {
  font-size: 1.2rem; }

h6 {
  font-size: 1rem; }

figure {
  margin: 0; }

a {
  color: #6FA8A7;
  text-decoration: none;
  transition: color ease 0.2s; }
  a:hover {
    color: #7BBAB9; }

ol, ul {
  padding-left: 50px;
  font-size: 1.1rem; }

ol ol, ul ul, ul ol, ol ul {
  margin: 8px 0;
  padding-left: 32px; }

dl dt {
  float: left;
  width: 180px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  margin-bottom: 16px; }

dl dd {
  margin-left: 200px;
  margin-bottom: 16px; }

li {
  margin: 8px 0;
  line-height: 1.65; }

li li {
  margin: 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 55px 0;
  padding: 0; }

blockquote {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 25px 0;
  padding: 0 0 0 25px;
  border-left: #ccc 7px solid; }

blockquote p {
  margin: 15px 0;
  font-style: italic; }

small {
  font-size: 0.9rem;
  color: #000; }

mark {
  background-color: #ffc336; }

code, tt {
  padding: 2px 5px;
  font-family: Consolas, monospace, sans-serif;
  font-size: 0.9rem;
  white-space: pre-wrap;
  border: 1px solid #eee;
  background: #f4f4f4;
  vertical-align: middle; }

pre code {
  padding: 25px !important; }

pre {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 30px 0;
  border: 1px solid #eee;
  width: 100%;
  font-family: Consolas, monospace, sans-serif;
  font-size: 0.9rem;
  white-space: pre;
  overflow: auto;
  background: #f4f4f4; }

pre code, tt {
  font-size: 0.9rem;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  background: transparent;
  border: none;
  padding: 0;
  vertical-align: inherit; }

kbd {
  display: inline-block;
  margin-bottom: 6px;
  padding: 1px 8px;
  border: #ccc 1px solid;
  color: #555;
  text-shadow: #fff 0 1px 0;
  font-size: 0.9rem;
  font-weight: 400;
  background: #f4f4f4;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset; }

table {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 28px 0;
  width: 100%;
  max-width: 100%;
  background-color: transparent; }

table th, table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #efefef; }

table th {
  color: #000; }

table caption + thead tr:first-child th, table caption + thead tr:first-child td, table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td {
  border-top: 0; }

table tbody + tbody {
  border-top: 2px solid #efefef; }

table table table {
  background-color: #fff; }

table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th {
  background-color: #f3f3f3; }

table.plain tbody > tr:nth-child(odd) > td, table.plain tbody > tr:nth-child(odd) > th {
  background: transparent; }

img {
  width: 100%;
  height: auto; }

.hidden {
  display: none; }

/* ==========================================================================
   2. Toggle Menu
   ========================================================================== */
.toggle-menu {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 200px;
  z-index: 99; }

.toggle-menu span {
  padding: 0 5px 0 0; }

#icon {
  width: 28px;
  height: 30px;
  position: relative;
  margin-left: 25px;
  top: 20px;
  float: left;
  z-index: 10;
  overflow: hidden;
  cursor: pointer; }

#icon div {
  width: 100%;
  height: 5px;
  background: #000;
  border-radius: 10px;
  margin: 4px auto;
  transition: all 0.3s; }

#icon.active .one {
  -webkit-transform: rotate(45deg) translate(5px, 5px);
  -moz-transform: rotate(45deg) translate(5px, 5px);
  -o-transform: rotate(45deg) translate(5px, 5px);
  -ms-transform: rotate(45deg) translate(5px, 5px);
  transform: rotate(45deg) translate(5px, 5px); }

#icon.active .two {
  opacity: 0; }

#icon.active .three {
  -webkit-transform: rotate(-45deg) translate(7px, -8px);
  -moz-transform: rotate(-45deg) translate(7px, -8px);
  -o-transform: rotate(-45deg) translate(7px, -8px);
  -ms-transform: rotate(-45deg) translate(7px, -8px);
  transform: rotate(-45deg) translate(7px, -8px); }

#menu {
  color: #000;
  height: 105px;
  position: relative;
  top: 50px;
  right: 35px;
  overflow: hidden;
  z-index: 10;
  display: none;
  width: 250px; }

#menu ul {
  margin: 0 auto;
  padding: 0; }

#menu ul li {
  display: block;
  list-style-type: none;
  position: relative;
  margin: 0 auto;
  padding: 8px;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 0; }

#menu a {
  color: #000;
  font-weight: 900; }

/* ==================================================================================================================
   3. Code Highlighter (Monokai Sublime style) | Derived from Monokai by noformnocontent http://nn.mit-license.org/
   ================================================================================================================== */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #23241f;
  -webkit-text-size-adjust: none; }

.hljs, .hljs-tag, .css .hljs-rules, .css .hljs-value, .aspectj .hljs-function, .css .hljs-function .hljs-preprocessor, .hljs-pragma {
  color: #f8f8f2; }

.hljs-strongemphasis, .hljs-strong, .hljs-emphasis {
  color: #a8a8a2; }

.hljs-bullet, .hljs-blockquote, .hljs-horizontal_rule, .hljs-number, .hljs-regexp, .alias .hljs-keyword, .hljs-literal, .hljs-hexcolor {
  color: #ae81ff; }

.hljs-tag .hljs-value, .hljs-code, .hljs-title, .css .hljs-class, .hljs-class .hljs-title:last-child {
  color: #a6e22e; }

.hljs-link_url {
  font-size: 80%; }

.hljs-strong, .hljs-strongemphasis {
  font-weight: bold; }

.hljs-emphasis, .hljs-strongemphasis, .hljs-class .hljs-title:last-child, .hljs-typename {
  font-style: italic; }

.hljs-keyword, .ruby .hljs-class .hljs-keyword:first-child, .ruby .hljs-function .hljs-keyword, .hljs-function, .hljs-change, .hljs-winutils, .hljs-flow, .nginx .hljs-title, .tex .hljs-special, .hljs-header, .hljs-attribute, .hljs-symbol, .hljs-symbol .hljs-string, .hljs-tag .hljs-title, .hljs-value, .alias .hljs-keyword:first-child, .css .hljs-tag, .css .unit, .css .hljs-important {
  color: #f92672; }

.hljs-function .hljs-keyword, .hljs-class .hljs-keyword:first-child, .hljs-aspect .hljs-keyword:first-child, .hljs-constant, .hljs-typename, .css .hljs-attribute {
  color: #66d9ef; }

.hljs-variable, .hljs-params, .hljs-class .hljs-title, .hljs-aspect .hljs-title {
  color: #f8f8f2; }

.hljs-string, .css .hljs-id, .hljs-subst, .hljs-type, .ruby .hljs-class .hljs-parent, .hljs-built_in, .django .hljs-template_tag, .django .hljs-variable, .smalltalk .hljs-class, .django .hljs-filter .hljs-argument, .smalltalk .hljs-localvars, .smalltalk .hljs-array, .hljs-attr_selector, .hljs-pseudo, .hljs-addition, .hljs-stream, .hljs-envvar, .apache .hljs-tag, .apache .hljs-cbracket, .tex .hljs-command, .hljs-prompt, .hljs-link_label, .hljs-link_url {
  color: #e6db74; }

.hljs-comment, .hljs-javadoc, .hljs-annotation, .hljs-decorator, .hljs-pi, .hljs-doctype, .hljs-deletion, .hljs-shebang, .apache .hljs-sqbracket, .tex .hljs-formula {
  color: #75715e; }

.coffeescript .javascript, .javascript .xml, .tex .hljs-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .hljs-cdata, .xml .php, .php .xml {
  opacity: 0.5; }

/* ==========================================================================
   3. General
   ========================================================================== */
.inner {
  max-width: 650px;
  margin: 0 auto;
  padding: 0 25px; }

.main-header {
  text-align: center;
  padding: 35px 0 50px 0;
  background: rgba(130, 207, 208, 0.6) center center;
  background-size: cover; }

.main-header .logo {
  width: 200px;
  height: 200px;
  display: block;
  margin: 0 auto;
  transition: all 0.25s ease-in;
 -webkit-animation: slideDown 1s ease;
 -moz-animation: slideDown 1s ease;
 -o-animation: slideDown 1s ease;
 animation: slideDown 1s ease;
 visibility: visible !important; }

.main-header .logo .img-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%; }

.main-header .title {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
  border-bottom: 3.5px solid #000; }

.main-header .title h1 {
  color: #000;
  margin-bottom: 0;
  font-size: 2.3rem;
  line-height: 2.7rem;
  text-transform: uppercase;
  font-weight: 900;
  transition: color 0.5s ease-in-out; }

.main-header .title p {
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase; }

/* ==========================================================================
   4. Post
   ========================================================================== */
.posts {
  display: block;
  position: relative; }
.posts .post {
  position: relative;
  padding-top: 50px; }

.posts .post .inner .header-post .meta-post time {
  font-size: 0.9rem; }

.posts .post .inner .header-post .title-post {
  margin: 4px 0 15px 0;
  font-size: 2.1rem;
  font-weight: 900;
  color: #000; }

.posts .post .inner .header-post .title-post a {
  color: #000;
  transition: color 0.2s ease-in-out; }

.posts .post .inner .header-post .title-post a:hover {
  color: #6FA8A7; }

.posts .post .inner .post-excerpt {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 50px; }

.posts .post .inner .post-excerpt p {
  font-size: 1.1rem;
  line-height: 1.65;
  margin-top: 15px; }

.posts .post .inner .post-excerpt p:last-child {
  padding: 5px 0 25px 0; }

.posts .post .inner .post-excerpt p:last-child .more {
  display: block;
  padding: 0 5px 0 0;
  border-radius: 0;
  border-bottom: 2px solid #3F413A;
  color: #3F413A;
  outline: 0;
  float: right;
  font-size: 1rem;
  font-weight: 700;
  line-height: 2rem;
  transition: border-color 0.2s ease-in-out; }

.posts .post .inner .post-excerpt p:last-child .more i {
  position: relative;
  left: 8px;
  top: 2px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #6FA8A7; }

.posts .post .inner .post-excerpt p:last-child .more:hover {
  border-color: #6FA8A7; }

.posts .post .inner .post-excerpt p:last-child .more:hover i {
  -webkit-animation: arrow-bounce 2s infinite;
  -moz-animation: arrow-bounce 2s infinite;
  -o-animation: arrow-bounce 2s infinite;
  animation: arrow-bounce 2s infinite; }

.posts .post .inner .content-post {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 50px; }

.posts .post .inner .content-post p {
  font-size: 1.1rem;
  line-height: 1.65; }

.posts .post .inner .footer-post {
  margin: 40px 0 50px 0;
  position: relative; }

.posts .post .inner .footer-post .author-post {
  display: inline-block; }

.posts .post .inner .footer-post .author-post .avatar {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 30px;
  float: left; }

.posts .post .inner .footer-post .author-post .avatar img {
  border-radius: 50%;
  border: 5px solid rgba(111, 168, 167, 0.4); }

.posts .post .inner .footer-post .author-post .bio {
  display: block;
  max-width: 400px;
  overflow: hidden; }

.posts .post .inner .footer-post .author-post .bio span {
  font-size: 0.9rem;
  font-style: italic;
  color: #bdc3c7; }

.posts .post .inner .footer-post .author-post .bio .author-name {
  text-transform: uppercase;
  font-weight: 900;
  margin: 10px 0 8px 0; }

.posts .post .inner .footer-post .author-post .bio .author-name a {
  font-size: 1.2rem;
  color: #000; }

.posts .post .inner .footer-post .author-post .bio p {
  margin: 0 0 8px 0; }

.posts .post .inner .footer-post .share {
  display: inline-block;
  float: right;
  text-align: center;
  margin-top: 30px; }

.posts .post .inner .footer-post .share h4 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.2rem;
  color: #000;
  margin: 0 0 12px 0; }

.posts .post .inner .footer-post .share a {
  font-size: 1.5rem;
  display: inline-block;
  margin-right: 15px; }

.posts .post .inner .footer-post .share :nth-child(2) {
  color: #00b6f1; }

.posts .post .inner .footer-post .share :nth-child(3) {
  color: #3a589b; }

.posts .post .inner .footer-post .share :last-child {
  color: #dd4b39;
  margin-right: 0; }

.posts .post .inner .comments-post {
  margin: 10px 0 60px 0; }

/* ==========================================================================
   5. Pagination
   ========================================================================== */
.pagination {
  padding: 60px 0;
  margin: 0;
  height: 45px; }

.pagination nav .inner a {
  color: #3F413A; }

.pagination nav .inner a.older-posts, .pagination nav .inner a.newer-posts {
  display: block;
  border: 3px solid #6FA8A7;
  border-radius: 5px;
  outline: 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 2.5rem;
  display: inline-block;
  transition: all 0.3s ease-in-out; }

.pagination nav .inner a.older-posts i, .pagination nav .inner a.newer-posts i {
  position: relative;
  font-size: 1.6rem;
  font-weight: 700;
  top: 2px; }

.pagination nav .inner a.older-posts:hover, .pagination nav .inner a.newer-posts:hover {
  background: #6FA8A7;
  color: #FFF; }

.pagination nav .inner a.older-posts {
  float: right;
  padding: 0 15px 0 10px; }

.pagination nav .inner a.older-posts i {
  left: 6px; }

.pagination nav .inner a.newer-posts {
  float: left;
  padding: 0 10px 0 15px; }

.pagination nav .inner a.newer-posts i {
  right: 6px; }

/* ==========================================================================
   6. Footer
   ========================================================================== */
.blog-footer {
  height: 120px;
  line-height: 120px;
  text-align: center;
  background: #eee; }

.blog-footer p {
  color: #000; }

.blog-footer p a {
  color: #6FA8A7;
  font-weight: 700; }

/* ==========================================================================
   7. Media Queries
   ========================================================================== */
@media (max-width: 568px) {
  html {
    font-size: 12.5px; }

  .main-header .logo {
    width: 160px;
    height: 160px; }

  #icon {
    margin-left: 15px;
    top: 12px; }

  .posts .post .inner .footer-post {
    text-align: center; }

  .posts .post .inner .footer-post .author-post .bio .author-name {
    margin: 6px 0 7px 0; }

  .posts .post .inner .footer-post .author-post .bio p {
    padding: 0 50px; }

  .posts .post .inner .footer-post .author-post .avatar {
    float: none;
    margin-right: 0;
    padding-bottom: 30px; }

  .posts .post .inner .footer-post .share {
    float: none;
    margin-top: 20px; }
 }

/* ==========================================================================
   8. Animations
   ========================================================================== */
@-webkit-keyframes arrow-bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  40% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }

  60% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px); } }

@keyframes arrow-bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  40% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }

  60% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px); } }

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }

  50% {
    -webkit-transform: translateY(8%);
    transform: translateY(8%); }

  65% {
    -webkit-transform: translateY(-4%);
    transform: translateY(-4%); }

  80% {
    -webkit-transform: translateY(4%);
    transform: translateY(4%); }

  95% {
    -webkit-transform: translateY(-2%);
    transform: translateY(-2%); }

  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }

@keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }

  50% {
    -webkit-transform: translateY(8%);
    transform: translateY(8%); }

  65% {
    -webkit-transform: translateY(-4%);
    transform: translateY(-4%); }

  80% {
    -webkit-transform: translateY(4%);
    transform: translateY(4%); }

  95% {
    -webkit-transform: translateY(-2%);
    transform: translateY(-2%); }

  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%); } }