<div class="blog-column">
    <div class="header-title" style="background: url(assets/images/background/header.jpg);">
        <div class="container" id="mainDIV" >
        <div class="title">
            <h2>Blog column</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Aenean commodo ligula eget dolor</p>
          </div>
    </div>
    </div>
    <div class="blog-column-wrapper sec-padding" style="background: url(assets/images/background/download.svg);">
        <div class="container">
            <div class="blog-list-wrapper sec-padding" fxLayout="row" fxLayout.lt-sm="column">
                <div fxFlex="100" fxFlex.sm="60" fxFlex.gt-sm="70" class="main-blog-panel">
                    <div class="single-blog-list" >
                        <div  class="image-box">
                          <img src="assets/images/blog/b1.jpg" alt="">
                        </div>
                        <div class="text-box">
                          <h4>Our Outstanding Services</h4>
                          <ul fxLayout="row">
                            <li><mat-icon color="primary" class="material-icons">access_time </mat-icon>Aug 21, 2015</li>
                            <li><mat-icon color="primary" class="mat-icon-lg mat-icon material-icons">person </mat-icon>Marc Kurcek</li>
                            <li><mat-icon color="primary" class="material-icons">sms</mat-icon>05 Comments</li>
                          </ul>
                          <p>Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculgis viverra neque Benenatis mauris Vestibulum ante ipsum primis in industry, logistics, finance, business orci ultrices venenatis mauris. It is a long established fact that a reader will be distracted.</p>
                          </div>
                    </div>
                    <div class="single-blog-list">
                      <div  class="image-box">
                        <img src="assets/images/blog/b1.jpg" alt="">
                      </div>
                      <div  class="text-box">
                        <h4>Our Outstanding Services</h4>
                        <ul fxLayout="row">
                            <li><mat-icon color="primary" class="material-icons">access_time </mat-icon>Aug 21, 2015</li>
                            <li><mat-icon color="primary" class="mat-icon-lg mat-icon material-icons">person </mat-icon>Marc Kurcek</li>
                            <li><mat-icon color="primary" class="material-icons">sms</mat-icon>05 Comments</li>
                        </ul>
                        <p>Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque Benenatis mauris Vestibulum ante ipsum primis in industry, logistics, finance, business orci ultrices venenatis mauris. It is a long established fact that a reader will be distracted.</p>
                        </div>
                  </div>
                  <div class="single-blog-list">
                    <div  class="image-box">
                      <img src="assets/images/blog/b1.jpg" alt="">
                    </div>
                    <div class="text-box">
                      <h4>Our Outstanding Services</h4>
                      <ul fxLayout="row">
                        <li><mat-icon color="primary" class="material-icons">access_time </mat-icon>Aug 21, 2015</li>
                            <li><mat-icon color="primary" class="mat-icon-lg mat-icon material-icons">person </mat-icon>Marc Kurcek</li>
                            <li><mat-icon color="primary" class="material-icons">sms</mat-icon>05 Comments</li>
                      </ul>
                      <p>Aenean ligula nibh, moleestie id viverra a, dapibus at dolor. In iaculis viverra neque Benenatis mauris Vestibulum ante ipsum primis in industry, logistics, finance, business orci ultrices venenatis mauris. It is a long established fact that a reader will be distracted.</p>
                      </div>
                </div>
                 </div>
                 <div fxFlex="100" fxFlex.sm="40" fxFlex.gt-sm="30" class="sidebar">
                    <div class="blog-sidebar">
                        <div class="search mb-30">
                            <input class="form-control" placeholder="Search..." type="search">
                            <button mat-raised-button color="primary" type="submit"><i class="fa fa-search" aria-hidden="true"></i> </button>
                        </div>
                        <div class="single-sidebar-widget mb-30">
                            <div class="post-widget">
                                <div class="title">
                                    <h4>Latest News</h4>
                                    <div class="decor-line"></div>
                                </div>
                                <ul>
                                    <li fxLayout="row">
                                        <div fxFlex="100" fxFlex.gt-sm="30" class="icon-box"><img src="assets/images/blog/b1.jpg" alt="Awesome Image"></div>
                                        <div fxFlex="100" fxFlex.gt-sm="70" class="text-box">
                                            <h5><a href="#">How To Reduce Financial Stress </a></h5><span>02 Dec.</span>
                                        </div>
                                    </li>
                                    <li fxLayout="row">
                                        <div fxFlex="100" fxFlex.gt-sm="30" class="icon-box"><img src="assets/images/blog/b1.jpg" alt="Awesome Image"></div>
                                        <div fxFlex="100" fxFlex.gt-sm="70" class="text-box">
                                            <h5><a href="#">What Makes A Financial Website Successful? </a></h5><span>02 Dec.</span>
                                        </div>
                                    </li>
                                    <li fxLayout="row">
                                        <div fxFlex="100" fxFlex.gt-sm="30" class="icon-box"><img src="assets/images/blog/b1.jpg" alt="Awesome Image"></div>
                                        <div fxFlex="100" fxFlex.gt-sm="70" class="text-box">
                                            <h5><a href="#">What Makes A Financial Service’s Website Successful? </a></h5><span>02 Dec.</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="single-sidebar-widget mb-30">
                            <div class="post-widget">
                                <div class="title">
                                    <h4>Text widget</h4>
                                </div>
                              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore que laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arch itecto beatae vitae dict eaque ipsa quae.</p>
                            </div>
                        </div>
                        <div class="single-sidebar-widget mb-30">
                            <div class="tags-widget post-widget">
                                <div class="title">
                                    <h4>Tags widget</h4>
                                </div>
                                <ul class="list-inline">
                                    <li><a href="#">Insurance</a></li>
                                    <li><a href="#">Investments</a></li>
                                    <li><a href="#">tax plans</a></li>
                                    <li><a href="#">Mutual funds</a></li>
                                    <li><a href="#">Retirement plans</a></li>
                                    <li><a href="#">Busniess plans</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
          </div>
    </div>

</div>