* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.5; }
  
  html,
  body {
    color: #555;
    background-color: #fff;
    margin: 0;
    padding: 0; }
  
  html {
    font-family: "Lato", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    overflow-y: scroll; }
    @media (min-width: 600px) {
      html {
        font-size: 16px; } }
  
  body {
    -webkit-text-size-adjust: 100%; }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #353535;
    font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 100%; }
  
  a {
    color: #333;
    text-decoration: none; }
  a:hover{
    text-decoration: underline;
  }
  blockquote {
    border-left: 0.25rem solid #e5e5e5;
    font-style: italic;
    color: #979797;
    margin: .8rem 0;
    padding: .5rem 1rem; }
    blockquote p:last-child {
      margin-bottom: 0; }
    @media (min-width: 600px) {
      blockquote {
        font-style: italic;
        padding: 0 1rem 0 1.25rem; } }
  
  img {
    display: block;
    margin: 0 0 1rem;
    max-width: 100%; }
  
  td {
    vertical-align: top; }
  
  pre,
  code {
    font-family: Menlo, Monaco, monospace;
    background-color: #eaeaea;
    border-radius: 3px;
    color: #bf616a;
    font-size: 85%;
    padding: .25em .5em; }
  
  pre {
    margin: 0 0 1rem; }
  
  pre code {
    background-color: transparent;
    color: inherit;
    font-size: 100%;
    padding: 0; }

  figure {
    position: relative;
  }
  figcaption {
    display: none;
  }
  ol {
    font-size: 18px;
  }

  .highlight {
    padding: 0.3rem;
    margin: 20px 0;
    box-shadow: 0 0 20px #797676;}
    .highlight pre {
      margin-bottom: 0;
      overflow-x: auto;
      font-size: 16px;
     }
    .highlight .lineno {
      color: #aaa;
      display: inline-block;
      padding: 0 .75rem 0 .25rem;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none; }
  
    .post-info {
      color: #aaa;
      font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", "Georgia", serif;
      letter-spacing: 0.5px;
      text-align: center; }
      .post-info span {
        font-style: italic; }
    .post-title {
      color: #353535;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 40px;
      line-height: 48px;
      margin: 1rem 0;
     }

     .post {
        margin-top: 0.5em;
     }
    .post-line {
      border-top: 0.4rem solid #353535;
      display: block;
      margin: 0 auto 3rem;
      width: 4rem; }
    .post p {
      margin: 0 0 1rem;
      text-align: justify;
      font-size: 1.2em;
    }
    .post a{
      color: #0087f9;
      text-decoration: underline;
    }
    .post a:hover {
      text-decoration: underline; 
      color: #aaa;
    }
    .post img {
      margin: 0 auto 0.5rem; 
      max-height: 350px;
      width: 100%;
    }
    .post img + em {
      color: #aaa;
      display: block;
      font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
      font-size: 0.9rem;
      font-style: normal;
      text-align: center; }
    .post img.emoji {
      display: inline-block;
      left: 0;
      transform: none;
      width: 1rem;
      height: 1rem;
      vertical-align: text-top;
      padding: 0;
      margin: 0; }
  
  .highlight .hll {
    background-color: #ffc; }
  
  .highlight .c {
    color: #999; }
  
  /* Comment */
  .highlight .err {
    color: #a00;
    background-color: #faa; }
  
  /* Error */
  .highlight .k {
    color: #069; }
  
  /* Keyword */
  .highlight .o {
    color: #555; }
  
  /* Operator */
  .highlight .cm {
    color: #09f;
    font-style: italic; }
  
  /* Comment.Multiline */
  .highlight .cp {
    color: #099; }
  
  /* Comment.Preproc */
  .highlight .c1 {
    color: #999; }
  
  /* Comment.Single */
  .highlight .cs {
    color: #999; }
  
  /* Comment.Special */
  .highlight .gd {
    background-color: #fcc;
    border: 1px solid #c00; }
  
  /* Generic.Deleted */
  .highlight .ge {
    font-style: italic; }
  
  /* Generic.Emph */
  .highlight .gr {
    color: #f00; }
  
  /* Generic.Error */
  .highlight .gh {
    color: #030; }
  
  /* Generic.Heading */
  .highlight .gi {
    background-color: #cfc;
    border: 1px solid #0c0; }
  
  /* Generic.Inserted */
  .highlight .go {
    color: #aaa; }
  
  /* Generic.Output */
  .highlight .gp {
    color: #009; }
  
  /* Generic.Prompt */
  /* Generic.Strong */
  .highlight .gu {
    color: #030; }
  
  /* Generic.Subheading */
  .highlight .gt {
    color: #9c6; }
  
  /* Generic.Traceback */
  .highlight .kc {
    color: #069; }
  
  /* Keyword.Constant */
  .highlight .kd {
    color: #069; }
  
  /* Keyword.Declaration */
  .highlight .kn {
    color: #069; }
  
  /* Keyword.Namespace */
  .highlight .kp {
    color: #069; }
  
  /* Keyword.Pseudo */
  .highlight .kr {
    color: #069; }
  
  /* Keyword.Reserved */
  .highlight .kt {
    color: #078; }
  
  /* Keyword.Type */
  .highlight .m {
    color: #f60; }
  
  /* Literal.Number */
  .highlight .s {
    color: #d44950; }
  
  /* Literal.String */
  .highlight .na {
    color: #4f9fcf; }
  
  /* Name.Attribute */
  .highlight .nb {
    color: #366; }
  
  /* Name.Builtin */
  .highlight .nc {
    color: #0a8; }
  
  /* Name.Class */
  .highlight .no {
    color: #360; }
  
  /* Name.Constant */
  .highlight .nd {
    color: #99f; }
  
  /* Name.Decorator */
  .highlight .ni {
    color: #999; }
  
  /* Name.Entity */
  .highlight .ne {
    color: #c00; }
  
  /* Name.Exception */
  .highlight .nf {
    color: #c0f; }
  
  /* Name.Function */
  .highlight .nl {
    color: #99f; }
  
  /* Name.Label */
  .highlight .nn {
    color: #0cf; }
  
  /* Name.Namespace */
  .highlight .nt {
    color: #2f6f9f; }
  
  /* Name.Tag */
  .highlight .nv {
    color: #033; }
  
  /* Name.Variable */
  .highlight .ow {
    color: #000; }
  
  /* Operator.Word */
  .highlight .w {
    color: #bbb; }
  
  /* Text.Whitespace */
  .highlight .mf {
    color: #f60; }
  
  /* Literal.Number.Float */
  .highlight .mh {
    color: #f60; }
  
  /* Literal.Number.Hex */
  .highlight .mi {
    color: #f60; }
  
  /* Literal.Number.Integer */
  .highlight .mo {
    color: #f60; }
  
  /* Literal.Number.Oct */
  .highlight .sb {
    color: #c30; }
  
  /* Literal.String.Backtick */
  .highlight .sc {
    color: #c30; }
  
  /* Literal.String.Char */
  .highlight .sd {
    color: #c30;
    font-style: italic; }
  
  /* Literal.String.Doc */
  .highlight .s2 {
    color: #c30; }
  
  /* Literal.String.Double */
  .highlight .se {
    color: #c30; }
  
  /* Literal.String.Escape */
  .highlight .sh {
    color: #c30; }
  
  /* Literal.String.Heredoc */
  .highlight .si {
    color: #a00; }
  
  /* Literal.String.Interpol */
  .highlight .sx {
    color: #c30; }
  
  /* Literal.String.Other */
  .highlight .sr {
    color: #3aa; }
  
  /* Literal.String.Regex */
  .highlight .s1 {
    color: #c30; }
  
  /* Literal.String.Single */
  .highlight .ss {
    color: #fc3; }
  
  /* Literal.String.Symbol */
  .highlight .bp {
    color: #366; }
  
  /* Name.Builtin.Pseudo */
  .highlight .vc {
    color: #033; }
  
  /* Name.Variable.Class */
  .highlight .vg {
    color: #033; }
  
  /* Name.Variable.Global */
  .highlight .vi {
    color: #033; }
  
  /* Name.Variable.Instance */
  .highlight .il {
    color: #f60; }
  
  /* Literal.Number.Integer.Long */
  .css .o,
  .css .o + .nt,
  .css .nt + .nt {
    color: #999; }
  
  .container {
    margin: 0 auto;
    max-width: 800px;
    width: 80%; }
  
  main,
  footer,
  .nav-container {
    display: block;
    margin: 0 auto;
    max-width: 800px;
    width: 80%; 
    margin-top: -70px;}
  
  .nav {
    box-shadow: 0 2px 2px -2px rgba(30, 15, 15, 0.54);
    padding: 10px;
    margin-bottom: 90px;
     }
    .nav-container {
      margin: 1rem auto;
      position: relative;
      text-align: center;
      z-index: 1; }
    .nav-title {
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
      color: #555;
      display: inline-block;
      margin: 0;
      padding-right: .2rem; }
      
    .nav ul {
      list-style-type: none;
      margin: 1rem 0 0;
      padding: 0;
      text-align: center; }
    .nav li {
      color:#555;
      display:inline-block;
      padding:0 2rem 0 0
    }
    .nav li a{
      color:#555; 
     }
    
    .dropdown {
        display: block;
      }
    .dropdown:hover .drop {
        display:block;
        background-color: #fff;
    }

    .drop {
      display: none;
      position: absolute;
      min-width: 160px;
      border-radius: 5px;
      box-shadow: 0 0 5px #eae3e3;
    } 
    .drop a {
      color:#000;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    .drop a:hover {
      color : #353535;
      font-weight: bold;
      text-decoration : underline;
    }
    
  @media (min-width: 600px) {
    .nav-container {
      text-align: left; }
    .nav ul {
      bottom: 0;
      position: absolute;
      right: 0; } }
  
  footer {
    font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", "Georgia", serif;
    padding: 2rem 0;
    text-align: center; }
    footer span {
      color: #555;
      font-size: .8rem; }
  
    .catalogue {
      max-width: 800px;
      overflow: hidden;
    }


  .catalogue-item {
    color: #555;
    display: block;
    width: 50%;
    float: left;
    padding: 10px; 

  }
    .catalogue-item:hover .catalogue-line,
    .catalogue-item:focus .catalogue-line{
      width: 100%; left: 0px; }
    .catalogue-item:last-child {
      border: 0; }
  
  .catalogue-time {
    color: #aaa;
    letter-spacing: .5px; 
  }
  .catalogue p{
    color: #666;
    letter-spacing: 0.5px;
    text-align: justify;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;

  }
  
  .catalogue-title {
    color: #353535;
    display: inline;
    font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: .5rem 0; }
  
  .catalogue-line {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    border-top: 3.5rem solid #f9f5f557;
    width: 0rem;
    position: absolute;
    left: 0px;
  }

    .author-list {
      float: right;
      display: flex;
    }
    .author-list img {
      border-radius: 50%;
      max-width: 22%;
      display: inline;
    }

   .author-sub {
    margin-left: 12px;
    display: grid;
   }
   .author-sub span {
    display: block;
  }
  .author-sub .catalogue-time{
    font-size: 12px;
  }

  .post-thumb {
    position: relative;
  }
  .post-thumb a, .post-thumb a:hover{
    text-decoration: none;
    color: #fff;
  }
  .author-list {
    position: absolute;
    padding: 10px;
    right: 0;
    bottom: 25px;
  }
  .info{
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    padding-left: 10px;
    background: rgba(0, 0, 0, 0.38)

  }
  .post-thumb h2{
    color: #fff;
    font-size: 18px;

  }
  .post-thumb .thumb{
    height: 200px;
    width: 100%;

  }
  .text-block {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
  }
  .me a {
    color: #aaa;
    margin: auto 5px;
  }
  .me a:hover {
    color: #000;
  }

  .ion48{
    font-size: 48px;
  }


  /* single post */
  .penulis {
    display: flex;
  }
  .penulis img {
    border-radius: 50%;
    display: block;
    height: 48px;
    width: 48px;
  }
  .penulis time {
    display: block;
    color: #aaa;
  }
  .sub-penulis {
    margin-left: 12px;
    width: 100%;
    display: block;
  }

  .ads-kanan {
    position:fixed;
    right: 50px;
    top: 150px;
    width: 120px;
    height: auto;
  }
  
  /*share icon */
  .share {
    position:fixed;
    left:100px;
    top:150px;
    width: 100px;
  }
  .share a{
    display: block;
    color: #353535;
  }
  .share a:hover{
    display: block;
    color: #aaa;
  }
  /*fooer abaout */
  .about {
    display: flex;
    width: 60%;
    margin: auto;
  }
  .about img {
    border-radius: 50%;
  }
  
  .about span{
    display: block;
    margin-left: 15px;
    font-style: italic;
    width: 100%;
    padding: 10px 0;
    padding-top: 20px;
  }

 /* pagination */
   .pagination {
      display: inline-block;
      border-radius: .25em;
      padding-left: 0;
   }
   .pagination li {
      display: inline-block;
      background: #aaaaaa57;
      border-radius: 0.3em;
      padding: .5em .8em;
      margin: 0 3px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }
   .pagination .active {
    background-color: #3b3d42;
  }
  .pagination .active a,  .pagination a:hover{
    color: #fff;
  }
  .pagination li a {
    color: #222; 
  }
   .pagination li:hover{
      background-color: #3b3d42;
      color: #fff;
   }

   /* contact desing */
    .contact {
      border-radius: 5px;
    }

    .contact input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
    }
    
    .contact button[type=submit] {
      background-color: #353535;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .tags {
      list-style-type: none;
      display : flex;
      justify-content: center;
    }
    .tags li {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: #5555552b;
      margin: 5px;
      border-radius: 10px;
    }
    .tags li a:hover {
      color: #555;
    }
    .tengah {
      text-align: center;
    }
    .kanan {
      float: right;
    }

    .subscribe {
      display: inline-block;
      margin-top: 20px;
    }
    .terkait {
      color: #555;
      display: block;
      width: 50%;
      float: left;
      padding: 10px;
    }

    .terkait img {
      width: 100%;
      height: 200px;
    }

    .terkait:hover .catalogue-line {
      width: 100%; left: 0px;
    }
    .terkait h4 {
      bottom: 20px;
      left: 0;
      color: #fff
    }

   /* fixed display for responsive mobile */
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    main {
      width: 85%; 
    }
    .post-title {
      font-size: 32px;
    }

    .catalogue-item {
      width: 100%;
    }
    .ion48{
      font-size: 32px;
    }
  
    .share {
      position: unset;
      width: 100%;
      text-align: center;
    }
    .share a{
      display: inline;
      margin: 5px;
    }
    .share a:hover{
      display: inline;
      color: #aaa;
    }
    .ads-kanan {
      width: 100%;
      display: inline-block;
      position: unset;
      margin: 0 0 15px;
    }
    .about {
      width: 100%;
    }
    .about img {
      margin-top: 20px;
    }
    .about span {
      padding-top: 35px;
    }
    .terkait {
      width: 100%;
    }

  }
  /*# sourceMappingURL=style.css.map */