resources/less/home.less
body {
    background-color: #f2f2f2;
      font-family: "Lato";
      font-weight: 300;
      font-size: 16px;
      color: #555;
      padding-top: 50px;
  
      -webkit-font-smoothing: antialiased;
      -webkit-overflow-scrolling: touch;
  }
  
  /* Titles */
  h1, h2, h3, h4, h5, h6 {
      font-family: "Raleway";
      font-weight: 300;
      color: #333;
  }
  
  
  /* Paragraph & Typographic */
  p {
      line-height: 28px;
      margin-bottom: 25px;
  }
  
  .centered {
      text-align: center;
  }
  
  /* Links */
  a {
      color: #3bc492;
      word-wrap: break-word;
  
      -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
      -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
      -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
      -o-transition: color 0.1s ease-in, background 0.1s ease-in;
      transition: color 0.1s ease-in, background 0.1s ease-in;
  }
  
  a:hover,
  a:focus {
      color: #c0392b;
      text-decoration: none;
      outline: 0;
  }
  
  a:before,
  a:after {
      -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
      -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
      -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
      -o-transition: color 0.1s ease-in, background 0.1s ease-in;
      transition: color 0.1s ease-in, background 0.1s ease-in;
  }
  
   hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #ccc;
      margin: 1em 0;
      padding: 0;
  }
  
  
  /* ==========================================================================
     Wrap Sections
     ========================================================================== */
  
  #headerwrap {
      background-color: #34495e;
      padding-top: 60px;
  }
  
  #headerwrap h1 {
      margin-top: 30px;
      color: white;
      font-size: 70px;
      
  }
  
  #headerwrap h3 {
      color: white;
      font-size: 30px;
      line-height: 40px;
  }
  
  #headerwrap h5 {
      color: white;
      font-weight: 700;
      text-align: left;
  }
  
  #headerwrap p {
      text-align: left;
      color: white
  }
  
  /* intro Wrap */
  
  #intro {
      padding-top: 50px;
      border-top: #bdc3c7 solid 5px;
  }
  
  #features {
      padding-top: 50px;
      padding-bottom: 50px;
  }
  
  #features .ac a{
      font-size: 20px;
  }
  
  /* Showcase Wrap */
  
  #showcase {
      display: block;
      background-color: #34495e;
      padding-top: 50px;
      padding-bottom: 50px;
  }
  
  #showcase h1 {
      color: white;
  }
  
  /* Blog Posts */
  
  #blog {
      background: #ddd;
      /* box-shadow: 0px 0px 15px -1px rgba(0, 0, 0, 0.3); */
      padding: 40px 0px;
  }
  .grid {
      margin: 20px auto;
  }
  .grid:after {
      content: '';
      display: block;
      clear: both;
  }
  
  /* ---- .grid-item ---- */
  
  .grid-sizer,
  .grid-item {
      width: 32%;
      min-width: 260px;
  }
  
  .grid-item {
      float: left;
      margin-bottom: 10px;
      box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05);
      background: #fff;
  }
  
  .grid-item > .grid-item-image {
  
  }
  
  .grid-item > .grid-item-image > img {
      display: block;
      width: 100%;
  }
  
  .grid-item > .grid-item-inner {
      padding: 4px 14px;
  }
  
  .grid-item-inner > .grid-item-title {
      font-size: 15px;
      margin-top: 12px;
      font-weight: 600;
      margin-bottom: 10px;
  }
  
  .grid-item-inner > .grid-item-title a {
      color: #555;
  }
  .grid-item-inner > .grid-item-title a:hover {
      color: #2cbba8;
  }
  
  .grid-item-inner > .grid-item-date {
      font-size: 13px;
      font-weight: 400;
      display: block;
      margin-bottom: 10px;
  }
  
  .grid-item-inner > .grid-item-date .fa {
      color: #888;
  }
  
  .grid-item-inner > .grid-item-excerpt {
      font-weight: 300;
      font-family: sans-serif;
      font-size: 15px;
      margin-bottom: 10px;
  }
  
  /* Footer */
  
  #footerwrap {
      background-color: #2f2f2f;
      color: white;
      padding-top: 40px;
      padding-bottom: 60px;
      text-align: left;
  }
  
  #footerwrap h3 {
      font-size: 28px;
      color: white;
  }
  
  #footerwrap p {
      color: white;
      font-size: 18px;
  }
  
  /* Copyright Wrap */
  
  #c {
      background: #222222;
      padding-top: 15px;
      text-align: center;
  }
  
  #c p {
      color: white
  }
  
  h3.feature-title {
      color: #329ef4;
  }
  ol.features {
      padding: 0px;
  }
  ol.features li {
      margin-bottom: 15px;
      padding-left: 5px;
  }
  .contact-link {
      margin-bottom: 10px;
  }
  .contact-link i {
      margin-right: 7px;
  }
  
  /* ================= Blog Page ================= */
  #blog-header {
      background-size: cover !important;
      background-position-y: center !important;
      height: 200px;
  }
  #blog-header .overlay{
      height: 200px;
      background: rgba(0, 0, 0, 0.25);
  }
  #blog-header h1 {
      text-align: center;
      font-size: 24px;
      margin-top: 115px;
      color: #EEE;
      font-weight: 600;
  }
  #blog-header h5 {
      text-align: center;
      font-size: 14px;
      color: #EEE;
      font-weight: 600;
      margin-top: 20px;
  }
  .blog-tags .badge {
      background: rgba(255, 255, 255, 0.4);
      color: #FFF;
  }
  .blog-sidebar {
      margin: 50px 0px;
  }
  .blog-category {
      margin-bottom: 15px;
  }
  h3.blog-category {
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: 500;
  }
  ul.blog-categories a {
      font-weight: 400;
      color: #999;
  }
  ul.blog-categories a:hover {
      font-weight: 400;
      color: #3bc492;
  }
  .recent-posts {
      list-style: none;
      padding-left: 0px;
  }
  .recent-posts li {
      padding-left: 0px;
      height: 65px;
  }
  .recent-posts li > a > img {
      border-radius: 50%;
      max-width: 50px;
      float: left;
  }
  .recent-posts li > a > .post-title {
      vertical-align: top;
      margin-left: 8px;
      margin-top: 5px;
      display: inline-block;
      max-width: 200px;
      width: 200px;
      color: #555;
      font-weight: 400;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
  }
  .recent-posts li > a > .post-date {
      float: left;
      margin-left: 8px;
      margin-top: 0px;
      font-weight: 400;
      font-size: 14px;
      color: #999;
  }
  .recent-posts li:hover .post-title {
      color: #333;
  }
  .recent-posts li:hover .post-date {
      color: #3bc492;
  }
  .blog-sidebar img {
      max-width: 100%;
      margin-bottom: 10px;
  }
  .blog-sidebar .user-profile {
      text-align: center;
  }
  .blog-sidebar .profile_img {
      border-radius: 50%;
      max-width: 100px;
      margin-bottom: 5px;
  }
  .blog-sidebar .user-name {
      font-weight: 500;
      margin-bottom: 15px;
  }
  .blog-sidebar .user-about {
      text-align: justify;
      font-size: 15px;
      font-weight: 400;
  }
  .blog-sidebar .blog-excerpt {
      font-family: 'Lato';
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 25px;
      text-align: justify;
  }
  .blog-content {
      margin: 50px 0px;
  }
  