<style>
   @media (min-width: 768px) {
      .vertical-panel, .vertical-panel-content {
         bottom: 22.3%;
      }
   }
   .main-header {
      padding-left: unset;
   }
</style>

<div class="layout">
<?php $banner = $this->db->select('brand_landingpage_image')->from('configuration')->get()->row()->brand_landingpage_image ?>
<main class="main main-inner main-projects" data-stellar-background-ratio="0.6" style="background: url(<?=base_url('uploads/brand/'.$banner)?>); background-size: cover;">
   <div class="container">
      <header class="main-header">
         <h1><?= str_replace('-', ' ', $this->uri->segment(2)) ?></h1>
      </header>
   </div>
   <div class="page-lines">
      <div class="container">
         <div class="col-line col-xs-4">
            <div class="line"></div>
         </div>
         <div class="col-line col-xs-4">
            <div class="line"></div>
         </div>
         <div class="col-line col-xs-4">
            <div class="line"></div>
            <div class="line"></div>
         </div>
      </div>
   </div>
</main>

<style>
  .projects {
    padding-top: 50px;
  }
  /*#parent_flexslider_img{
    width: 60%;
  }*/
  #list_slider{ 
    /*width: 38%;*/ 
    padding: 10px;
  }
  .product_main_image_img .flex-direction-nav {
    display: block;
  }
  .product_main_image_img .flex-direction-nav a{
    height: 50px;
  }
  .product_main_image_img ul.slides li{
    height: 550px;
    width: 100%;
  }
  .product_main_image_img ul.slides li img{
    width: 100%; 
    height: 100%;
    object-fit:cover;
  }
  @media(max-width: 768px) {
    .flexslider {
       margin: 0 0 0; 
    }
    /*#list_slider {
      padding-left: unset;
    }*/
  }
  .list_slider_txt{
    /*width: 100%;
    text-align: center;*/
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    cursor: pointer;
  }
 .child_txt{
    /*width: 100%;
    text-align: center;*/
    color: #FF7500; 
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: none; 
  }
  div.flexslider.flexslider_hidden:nth-child(n+3){
   display: none; 
  }
  /*div.list_slider_txt:nth-child(1){
    color:black;
  }*/
</style>

<div class="content"> 
<section class="projects">

  <?php if($products!=NULL) : ?>
  <div class="container" style=""> 
    <div class="col-md-7 col-xs-12" data-case="arsitektur" id="parent_flexslider_img"></div>
    
    <!-- button change -->
    <div class="col-md-5 col-xs-12">
    <div id="list_slider">
      <?php $no=0; foreach ($products as $product) : $no++ ?>
        <div data-to-slide="<?=$no?>" class="list_slider_txt" data-id="<?=$product->id_products?>">
          <?=ucwords($product->title)  ?>
        </div>
        <?php if (!empty($product->long_description)): ?>
          <div data-to-slide="<?=$no?>" class="col-md-12 child_txt Counter_txt" id="child_txt<?=$no?>" style="margin-left: 20px;margin-top: -10px;">
          <?=$product->long_description ;?>
          </div>
        <?php endif ?>
      <?php endforeach ?>
    </div>
     
    <!-- button change -->
    </div>
  </div>
  <?php else : ?>
     <div class="container text-center"> 
        Project Not Found
     </div>
  <?php endif ?>
  <div class="container">
    <div class="col-md-12">
      Share this project to : <br>   
      <div class="sharethis-inline-share-buttons"></div>
    </div>
  </div>
</section>