Banners

		
<!-- Single Promo  -->
<div class="sin-promo col-lg-3 col-sm-6 col-xs-12 fix">
<div class="promo-wrap">
<img alt="" src="../img/banner/promo-1.webp">
<div class="promo-bref text-right">
<h1>Latest<br>backpack</h1>
<a class="button color white-hover animated fadeOutDown" href="#">view more</a>
</div>
</div>
</div>
<!-- Single Promo  -->
<div class="sin-promo col-lg-3 col-sm-6 col-xs-12 float-right fix">
<div class="promo-wrap">
<img alt="" src="../img/banner/promo-3.webp">
<div class="promo-bref text-left">
<h1>Latest<br>sunglass</h1>
<a class="button color white-hover animated fadeOutDown" href="#">view more</a>
</div>
</div>
</div>
<!-- Single Promo  -->
<div class="sin-promo col-lg-6 col-xs-12 fix">
<a class="promo-wrap" href="#">
<img alt="" src="../img/banner/promo-2.webp">
<div class="promo-bref promo-bref-2 promo-bref-right text-center">
<h1>Sale upto 40%<br>New style zeiran</h1>
<div data-countdown="2017/01/01" class="promo-countdown fix"><span class="cdown day"><span class="time-count">144</span> <p>Days</p></span> <span class="cdown hour"><span class="time-count">13</span> <p>Hours</p></span> <span class="cdown minutes"><span class="time-count">08</span> <p>Minute</p></span> <span class="cdown second"><span class="time-count">44</span> <p>Second</p></span></div>
</div>
</a>
</div>
		
	

		
/* Single Promo */
.sin-promo {
  padding: 0;
}
.promo-wrap {
  display: block;
  height: 100%;
  position: relative;
}
.promo-wrap::before {
  background: #000 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotateX(90deg);
}
.sin-promo:hover .promo-wrap::before {
  transform: rotateX(0);
}
.promo-wrap img {
  width: 100%;
}
/* Promo Bref */
.promo-bref {
  display: block;
  height: 100%;
  left: 0;
  padding: 0 35px;
  position: absolute;
  right: 0;
  top: 0;
}
.promo-bref-2 {
  padding-right: 60px;
}
.promo-bref.promo-bref-right {
  left: auto;
}
.promo-bref.text-right {
  padding-left: 0;
}
.promo-bref.text-left {
  padding-right: 0;
}
.promo-bref h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 5px;
  margin-bottom: 20px;
  margin-top: 155px;
  text-transform: uppercase;
}
.promo-bref-2 h1, .sin-promo:hover .promo-bref h1 {
  margin-top: 120px;
}
.promo-bref.text-left h1 {
  margin-left: -3px;
}
.promo-bref.text-right h1 {
  margin-right: -5px;
}
.promo-bref .button {
  animation-duration: 0.6s;
  font-weight: 600;
  letter-spacing: 2px;
}
.sin-promo:hover .button {
  animation-name: fadeInUp;
}
/* Promo Countdown */
.promo-countdown {}
.promo-countdown .cdown {
  display: block;
  float: left;
  margin-right: 50px;
}
.promo-countdown .cdown:last-child {
  margin-right: 0;
}
.promo-countdown .cdown .time-count {
  border: 1px solid #fff;
  border-radius: 50px;
  color: #606060;
  display: block;
  font-size: 18px;
  height: 66px;
  line-height: 66px;
  position: relative;
  width: 66px;
  z-index: 1;
}
.promo-countdown .cdown .time-count::before {
  position: absolute;
  content: "";
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  background: #fff;
  border-radius: 50%;
  z-index: -1;
}
.promo-countdown .cdown p {
  color: #606060;
  line-height: 14px;
  text-transform: uppercase;
  margin-top: 17px;
}
.sin-promo:hover .promo-countdown .cdown p {
  color: #fff;
}