<div class="main-container">
  <style>
  .main-container{
    background-image: url('/uploads/bg-vajraid.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
  }
  .type-post {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 15px;
    transition: 0.3s;
    align-self: normal;
    display: grid;
    grid-template-rows: max-content 280px 1fr;
    margin-bottom: 6%;
  }
  
  .type-post:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    transform: scale(1.02);
  }
  .blog-masonry-box{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-gap: 20px;
  }
  .entry-cover {
    display: flex;
    justify-content: center;
    border-radius: 15px 15px 0 0;
    background-color: #F8F8F8;
    content: "";
    opacity: 1;
    -webkit-transition: all 1s ease 0s;
      -moz-transition: all 1s ease 0s;
      -o-transition: all 1s ease 0s;
      transition: all 1s ease 0s;
  }
  .black-hover{
    background-color: black;
    position: absolute;
    left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    opacity: 0;
  }
  .type-post:hover .black-hover:not(.post-meta) {
    background: black;
    opacity: 0.2;
  }
  .entry-cover .post-meta a{
    padding: 9px;
  }
  .entry-cover > a > img {
    padding: 8px;
    border-radius: 15px 15px 0 0;
    object-fit: cover;
    height: max(20rem, 40vh);
  }
  
  .type-post .entry-content {
      display: inline-block;
      max-width: 100%;
    padding: 0.5em 1.25em;
      margin-top: 0px;
    background-color: white;
  }
  
  .type-post .more {
    background-color: white;
    border-radius: 0 0 15px 15px;
    margin-top: -2px;
  }
  .type-post .more > a,
  .type-post .more > a::before {
      -webkit-transition: all 0.5s ease 0s;
      -moz-transition: all 0.5s ease 0s;
      -o-transition: all 0.5s ease 0s;
      transition: all 0.5s ease 0s;
  }
  .type-post .more > a {
      color: black !important;
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      margin: 0.5em 1.5em;
      letter-spacing: 0.18px;
      line-height: 2;
      margin-top: auto;
      position: relative;
      text-decoration: none;
      text-transform: uppercase;
      animation-duration: 0.6s;
    bottom: 40%;
  }
  .type-post .more > a::before {
      background-color: #151515;
      content: "";
      left: 0;
      position: absolute;
      bottom: 0;
      height: 2px;
      width: 100%;
  }
  .type-post .more > a:hover {
      color: #151515;
  }
  .type-post:hover .more > a {
      animation-name: bounceIn;
  }
  .type-post .more > a:hover::before {
      width: 50%;
  }
  .type-post .entry-content .entry-header > p{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
  
  @media (min-width:576px) and (max-width:768px){
    .type-post .entry-header .entry-title{
      font-size: 16px;
    }
  }
  @media (min-width:769px){
    .type-post .entry-header .entry-title{
      font-size: 20px;
    }
  }
  </style>
  <main class="site-main">
    
    <!-- Slider Section -->
    <div class="container-fluid no-left-padding no-right-padding slider-section">
      <div id="mm-slider-1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="mm-slider-1" data-source="gallery">
        <!-- START REVOLUTION SLIDER 5.4.1 fullwidth mode -->
        <div id="mm-slider-1" class="rev_slider fullwidthabanner" data-version="5.4.1">
          <ul>

          <?php $no=0; foreach ($slideshows as $slideshow) : $no++ ?> 
            <!-- SLIDE  -->
            <li data-index="rs-<?=$no?>" data-transition="random-static,random-premium,random,boxslide,slotslide-horizontal,slotslide-vertical,boxfade,slotfade-horizontal,slotfade-vertical" data-slotamount="default,default,default,default,default,default,default,default,default,default" data-hideafterloop="0" data-hideslideonmobile="off"  data-randomtransition="on" data-easein="default,default,default,default,default,default,default,default,default,default" data-easeout="default,default,default,default,default,default,default,default,default,default" data-masterspeed="default,default,default,default,default,default,default,default,default,default"  data-rotate="0,0,0,0,0,0,0,0,0,0"  data-saveperformance="off"  class="slide-overlay" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
              <!-- MAIN IMAGE -->
              <img src="<?=base_url('uploads/banners/slideshow2.jpg')?>"  alt="" title="slide-1"  width="1920" height="600" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
              <!-- LAYERS -->

              <!-- LAYER NR. 1 -->
              <a class="slidecnt1 tp-caption tp-layer-selectable tp-resizeme category-link" href="#" target="_self" rel="nofollow"       id="slide-26-layer-1" 
                data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
                data-y="['middle','middle','middle','middle']" data-voffset="['-56','-70','-70','-57']" 
data-fontsize="['14','14','18','18']"
                data-height="none"
                data-whitespace="nowrap"           
                data-type="text" 
                data-actions=''
                data-responsive_offset="on"
                data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"z:0;rX:0deg;rY:0;rZ:0;sX:2;sY:2;skX:0;skY:0;opacity:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);br:0px 0px 0px 0px;"}]'
                data-textAlign="['inherit','inherit','inherit','inherit']"
                data-paddingtop="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]"><?= $this->uri->segment(2)!='category' ? '' : 'Kategori'  ?> </a>

              <!-- LAYER NR. 2 -->
              <a class="slidecnt2 tp-caption tp-layer-selectable tp-resizeme post-title" href="<?=$slideshow->banner_link?>" target="_self" rel="nofollow" id="slide-26-layer-2" 
                data-x="['center','center','center','center']" data-hoffset="['0','-1','-1','-1']" 
                data-y="['middle','middle','middle','middle']" data-voffset="['6','-5','-5','-5']" 
                data-fontsize="['40','30','30','23']"
                data-lineheight="['40','40','40','30']"
                data-width="['601','601','601','400']"
                data-height="['81','81','81','none']"
                data-whitespace="normal"
                data-type="text" 
                data-actions=''
                data-responsive_offset="on" 
                data-frames='[{"delay":0,"speed":1500,"frame":"0","from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                data-textAlign="['center','center','center','center']"
                data-paddingtop="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]"><?= $this->uri->segment(2)!='category' ? '' : ucwords(str_replace('-', ' ', $this->uri->segment(3)))?> </a>

            </li>
            <!-- SLIDE  -->
            <?php endforeach ?>
          </ul>
          <div class="tp-bannertimer tp-bottom"></div>
        </div>
      </div><!-- END REVOLUTION SLIDER -->
    </div><!-- Slider Section /- -->

    <!-- Page Content -->
    <div class="container-fluid no-left-padding no-right-padding page-content">
      <!-- Container -->
      <div class="container">
        <?php if($this->uri->segment(2)=='search') : ?>
        <h2 style="text-align: center;">Hasil Pencarian - <?=ucwords($key)?></h2>
        <?php elseif($this->uri->segment(2)=='category') : ?>
        <h2 style="text-align: center;">Kategori - <?=ucwords(str_replace('-', ' ', $this->uri->segment(3)))?></h2>
        <?php endif ?>
        <br><br>
        <div class="row">
          

          <!-- Widget Area -->
          <?= Modules::run('brand_column') ?>
          <!-- Widget Area /- -->

          <div class="col-lg-9 col-md-6 content-area changeDown">
            
            <!-- Row -->
            <div class="row blog-masonry-list">
              <?php foreach ($blogs as $blog) : ?>
              <div class="col-lg-6 col-md-12 col-sm-6 blog-masonry-box">
                <div class="type-post">
                  <div class="entry-cover">
                    <div class="post-meta">

                      <span class="post-date"><a href="#"><?=date('d F Y', strtotime($blog->publish_date))?></a></span>
                    </div>
                    <?php if (!empty($blog->image1)): ?>
                       <a href="<?= base_url() . 'blog/get/' . strtolower($blog->alias); ?>"><img style="width: 100%;" src="<?=base_url('uploads/blog/'.$blog->image1)?>" alt="Post" /></a>
                        <?php else: ?>
                    <?php endif ?>
                   
                  </div>
                  <div class="entry-content">
                    <div class="entry-header">  
                      <span class="post-category"><a href="#" title="<?=$blog->category?>"></a></span>
                      <h3 class="entry-title"><a href="<?= base_url() . 'blog/get/' . strtolower($blog->alias); ?>" title="<?=$blog->blog?>"><?= strtoupper($blog->blog) ?></a></h3>
                      <?= $blog->description_en ?>
                    </div>       
                  </div>
                  <div class="more">
                    <a href="<?= base_url() . 'blog/get/' . strtolower($blog->alias); ?>" title="Selengkapnya">Selengkapnya</a>
                  </div>
                </div>
              </div>
              <?php endforeach ?>
            </div><!-- Row /- -->
 
            <?php if($blogs!=null) : ?>
            <nav class="navigation pagination">
              <style type="text/css">
                .navigation a{
                color: #af1e23 !important
               }
              </style>
              <?php
              //create pagination...
              echo $this->pagination->create_links();
              ?>
            </nav>
            <?php else : ?>
              <h5 style="text-align: center;">Artikel tidak ditemukan</h5>
            <?php endif ?>
          </div><!-- Content Area /- -->
        </div>
      </div><!-- Container /- -->
    </div><!-- Page Content /- -->
    
  </main>
  
</div>