<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <div class="footer-widget">
          <h3>Stay in touch</h3>
          <div class="footer-widget-content">
            <a href="mailto:sales@example.com" class="contact-link">sales@example.com</a>
            <a href="mailto:support@example.com" class="contact-link red"> support@example.com </a>
            <a href="tel:0121234" class="contact-link">(123) 456-789</a>
            <div class="footer-social">
            <ul>
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
              <li><a href="#"><i class="fa fa-youtube"></i></a></li>
              <li><a href="#"><i class="fa fa-rss"></i></a></li>
            </ul>
              </div>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
      <div class="footer-widget">
        <h3>Latest Events</h3>
        <div class="footer-widget-content">
          <div class="media">
              <div class="media-left">
                 <a href="#"><img class="media-object" src="http://placehold.it/60x60" alt="..."></a>
              </div>
              <div class="media-body">
                 <p><a href="#">vulputate velit esse consequat. </a></p>
                 <span>September 30, 2016 </span>
              </div>
           </div>
          <div class="media">
              <div class="media-left">
                 <a href="#."><img class="media-object" src="http://placehold.it/60x60" alt="..."></a>
              </div>
              <div class="media-body">
                 <p><a href="#">vulputate velit esse consequat. </a></p>
                 <span>September 30, 2016 </span>
              </div>
           </div>
        </div>
        </div>
      </div>
      <div class="col-sm-3">
      <div class="footer-widget">
        <h3>Opening Hour</h3>
        <div class="footer-widget-content">
        <div class="open-time ">
          <ul class="opening-time">
            <li><span><i class="fa fa-times"></i></span><p class="clock-time"><strong>monday :</strong> closed</p>
             </li>
            <li><span><i class="fa fa-check"></i></span><p><strong>tue-fri :</strong> 8am - 12am</p></li>
            <li><span><i class="fa fa-check"></i></span><p><strong>sat-sun :</strong> 7am - 1am</p></li>
            <li><span><i class="fa fa-check"></i></span><p><strong>holydays :</strong> 12pm-12am</p></li>
          </ul>
           </div>
        </div>
        </div></div>
      
      <div class="col-sm-3">
      <div class="footer-widget">
        <h3>Latest Events</h3>
        <div class="footer-widget-content">
          <div class="images-gellary">
            <ul>
              <li><a href="#"><img src="http://placehold.it/85x85" alt="Instagram 01"></a></li>
              <li><a href="#"><img src="http://placehold.it/85x85" alt="Instagram 02"></a></li>
              <li><a href="#"><img src="http://placehold.it/85x85" alt="Instagram 03"></a></li>
              <li><a href="#"><img src="http://placehold.it/85x85" alt="Instagram 04"></a></li>
              <li><a href="#"><img src="http://placehold.it/85x85" alt="Instagram 05"></a></li>
              <li><a href="#"><img src="http://placehold.it/85x85" alt="Instagram 06"></a></li>
            </ul>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</footer>

.red{
  color: red !important;
}

footer{
  background-color: #f5f5f5;
  padding: 80px 0;
  .footer-widget{
    h3{
      margin-bottom: 30px;
    }
  }
  .contact-link{
    display:inline-block;
    width: 100%;
    color: #333;
  }
  // footer social
  .footer-social{
    ul{
      padding-left: 0;
      li{
        list-style: none;
        float: left;
        padding: 0 10px;
        &:first-child{
          padding-left: 0;
        }
        a{
          font-size: 20px;
          color: #333;
          &:hover{
            color: red;
          }
        }
      }
    }
  }
  
  // opening hour
  .opening-time{
    padding-left:0;
    li{
      list-style: none;
      span{
        float:left;
        padding-right: 10px;
        .fa-times{
          color: red;
        }
      }
        strong{
          color: red;
        }
    }
  }
  
  // latest event
  .media-body{
    a{
      color: #333;
      &:hover{
        color: red;
      }
    }
    span{
        color: #969696;
      }
  }
  
  // gallery image
  .images-gellary{
    ul{
      padding-left: 0;
      li{
        list-style: none;
        float: left;
        margin: 0 3% 2% 0;
        width: 31%;
        position: relative;
        &:nth-child(3n) {
    margin: 0 0 1%;
}
        a{
          
        }
      }
    }
  }
}