@import url(https://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
  box-sizing: border-box;
}
#captioned-gallery figure { 
  margin: 0;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
  background-image:url(Images/bannerbk.jpg);
}
div#captioned-gallery { 
  width: 100%;  overflow: hidden; 
}
.divsld figure.slider { 
  position: relative; width: 500%;
  font-size: 0; animation: 30s slidy infinite; 
}
.divsld figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}

.divsld figure.slider figure figcaption { 
  position: absolute; bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: 100%;
}

@media (min-width: 300px) 
{
	.imgreponsive1
{
	width:100%;
	height:100%;
}
.divsld figure.slider figure figcaption h1{ 
   color: #fff; width: 100%;
  font-size: 1.25rem; padding: .2rem; 
}
.divsld figure.slider figure figcaption h2{ 
   color: #fff; width: 100%;
  font-size: 1.1rem; padding: .2rem; 
}
}
@media (min-width: 400px) 
{
	.imgreponsive1
{
	width:100%;
	height:100%;
}
.divsld figure.slider figure figcaption h1{ 
   color: #fff; width: 100%;
  font-size: 1.25rem; padding: .2rem; 
}
.divsld figure.slider figure figcaption h2{ 
   color: #fff; width: 100%;
  font-size: 1.1rem; padding: .2rem; 
}
}
@media (min-width: 768px) 
{
	.imgreponsive1
{
	width:100%;
	height:257px;
}
.divsld figure.slider figure figcaption h1{ 
   color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem; 
}
.divsld figure.slider figure figcaption h2{ 
   color: #fff; width: 100%;
  font-size: 1.5rem; padding: .6rem; 
}
}
@media (min-width: 992px) 
{
	.imgreponsive1
{
	width:100%;
	height:333px;
}
.divsld figure.slider figure figcaption h1{ 
   color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem; 
}
.divsld figure.slider figure figcaption h2{ 
   color: #fff; width: 100%;
  font-size: 1.5rem; padding: .6rem; 
}
}
@media (min-width: 1200px) 
{
	.imgreponsive1
{
	width:100%;
	height:500px;
}
.divsld figure.slider figure figcaption h1{ 
   color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem; 
}
.divsld figure.slider figure figcaption h2{ 
   color: #fff; width: 100%;
  font-size: 1.5rem; padding: .6rem; 
}
}