/*.bannerImg {
  width: 685px;
  height: 228px;
  margin: 20px auto;
  overflow: hidden;
  box-shadow: 1px 1px 4px rgba(0,0,0, 0.8);
  border: 7px solid rgba(255,255,255,0.6);
}*/

/*.bannerImg{
	padding-top: 8%;
}*/

.bannerImg figure {
  position: absolute;
  top: 0;
  left: 25px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255, 0.6);
  transition: all 0.3s ease-in-out;
}

.bannerImg >figure {
  position: relative;
  left: 0 !important;
}

.bannerImg img {
  display: block;
  height: 100%;
  width: 100%;
}

.bannerImg input {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  cursor:pointer;
  border: 0;
  padding: 0;
  opacity: 0;
  z-index: 100;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.bannerImg input:checked {
  width: 5px;
  left: auto;
  right: 0px;
}

.bannerImg input:checked ~ figure{
  left: 82.5%; /* update this based on number of banner  */
  transition: all 0.7s ease-in-out;
}

.bannerImg figcaption {
  width: 100%;
  height: 100%;
  background: rgba(87,73,81, 0.1);
  position: absolute;
  top: 0px;
  transition: all 0.2s linear;
}

.bannerImg figcaption span {
  position: absolute;
  top: 40%;
  margin-top: -30px;
  right: 20px;
  left: 20px;
  overflow: hidden;
  text-align: center;
  background: rgba(87,73,81,0.3);
  line-height: 20px;
  font-size: 18px;
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
  padding: 20px;
  color: white;
  text-shadow: 1px 1px 1px rgba (0,0,0,0.1);
}

.bannerImg input:checked + figcaption span {
  transition: all 0.4s ease-in-out 0.5s;
  opacity: 1;
  top: 50%;
}

.bannerImg #last-img:checked + figcaption span{
  transition-delay: 0.3s;
}

.bannerImg input:hover + figcaption {
  background: rgba(87,73,81,0.03);
}

.bannerImg input:checked ~ figure input{
  z-index: 1;
}

@media screen and (max-width: 720px) {
    .ia-bannerImg { 
		width: 540px; 
	}
	
	.ia-bannerImg figure { 
		left: 40px; 
		width: 260px; 
	}
	
	.ia-bannerImg input { 
		width: 40px; 
	}
	
	.ia-bannerImg input:checked ~ figure { 
		left: 260px; 
	}
	
	.ia-bannerImg figcaption span { 
		font-size: 16px; 
	}
}

@media screen and (max-width: 520px) {
    .ia-bannerImg{ 
		width: 350px; 
	}
	
	.ia-bannerImg figure { 
		left: 20px; 
		width: 180px; 
	}
	
	.ia-bannerImg input { 
		width: 20px; 
	}
	
	.ia-bannerImg input:checked ~ figure { 
		left: 180px; 
	}
	
	.ia-bannerImg figcaption span { 
		font-size: 12px; 
		letter-spacing: 2px; 
		padding: 10px; 
		margin-top: -20px; 
	} 

}