@charset "UTF-8";
/* CSS Document */

html{
font-size: 100%;
}
#container-slideshow {
	position: relative; 
	width: 1024px;
	z-index: 5; 
	margin: 1em auto 0 auto; 
	padding: 0;
} 
.cycle-slideshow {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 5.0em auto 0.5em auto;
	vertical-align: top;
} 
.cycle-slideshow img {
	width: 100%;
	height: auto;
}
.cycle-slideshow ul {
	padding: 0;
	margin: 0;
}
.cycle-slideshow li {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.controls-outer {
       width: 800px;
	   height: auto;
       margin: 0 auto 4em auto;
	   padding:0;
}
.prevControl {
	width: 40%;
	height: auto;
	float: left;
	text-align: left;
	padding: 0;
	margin: 0;
	vertical-align: top;
	cursor: pointer;
}
.backArrow {
	width: 20%;
	height: auto;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
	vertical-align: top;
	cursor: pointer;
}
.nextControl {
	width: 40%;
	height: auto;
	float: left;
	text-align: right;
	padding: 0;
	margin: 0;
	vertical-align: top;
	cursor: pointer;
}
.prevControl img {
	width: 50px;
	height: 50px;
	margin: 0;
}
.backArrow img {
	width: 50px;
	height: 50px;
	margin: 0;
}
.nextControl img {
	width: 50px;
	height: 50px;
	margin: 0;
}

@media (min-width: 1050px){

}

@media (min-width: 920px) and (max-width: 1049px){
#container-slideshow {
	width: 100%;
} 
}  

@media (min-width: 769px) and (max-width: 919px){
#container-slideshow {
	width: 100%;
} 
.controls-outer {
       width: 80%;
}
.prevControl img {
	width: 40px;
	height: 40px;
	margin: 0;
}
.backArrow img {
	width: 40px;
	height: 40px;
	margin: 0;
}
.nextControl img {
	width: 40px;
	height: 40px;
	margin: 0;
}
}  

@media (min-width: 570px) and (max-width: 768px){
#container-slideshow {
	width: 95%; 
}
.controls-outer {
       width: 80%;
}
.prevControl img {
	width: 40px;
	height: 40px;
	margin: 0;
}
.backArrow img {
	width: 40px;
	height: 40px;
	margin: 0;
}
.nextControl img {
	width: 40px;
	height: 40px;
	margin: 0;
}
}

@media (min-width: 320px) and (max-width: 569px){ 
#container-slideshow {
	width: 95%; 
} 
.controls-outer {
       width: 80%;
}
.prevControl img {
	width: 30px;
	height: 30px;
	margin: 0;
}
.backArrow img {
	width: 30px;
	height: 30px;
	margin: 0;
}
.nextControl img {
	width: 30px;
	height: 30px;
	margin: 0;
} 
}  

@media (max-width: 319px){ 
#container-slideshow {
	width: 95%; 
} 
.controls-outer {
       width: 80%;
}
.prevControl img {
	width: 25px;
	height: 25px;
	margin: 0;
}
.backArrow img {
	width: 25px;
	height: 25px;
	margin: 0;
}
.nextControl img {
	width: 25px;
	height: 25px;
	margin: 0;
}
}