/* --------------- HOME --------------- */

#carousel-replacement{
	display:none;
}
#carousel-holder {
	display: block;
	width: 100%;
	height: 244px;
	margin: 0 auto;
	position: relative;
/*	overflow: hidden; */
}

#carousel {
	margin: 0 auto;
}
#carousel ul {
    list-style: none;
    width: 10000px;
    margin: 0;
    padding: 0;
}
#carousel li {
	display: inline;
	float: left;
	width: 490px;
	height: 244px;
}
.carousel-padding {
	padding: 0;
	overflow: hidden;
}
.carousel-padding img{
	max-width:100%;
	height:auto;
}
#carousel-prev, #carousel-next {
	width: 44px;
	height: 44px;
	position: absolute;
	top: 100px;
	overflow: hidden;
	z-index:1000;
}
#carousel-prev {
	left: 0px;
}

#carousel-next {
	right: 0px
}

#carousel-left-frame {
	position: absolute;
	top: 0px;
	left: -980px;
	height:244px;
	overflow:hidden;
}

#carousel-right-frame {
	position: absolute;
	top: 0px;
	right: -980px;
	height:244px;
	overflow:hidden;

}


@media (min-width:980px){

	#carousel-holder {
		display: block;
		width: 100%px;
		height: 488px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	#carousel {
		margin: 0 auto;
	}
	#carousel ul {
	    list-style: none;
	    width: 20000px;
	    margin: 0;
	    padding: 0;
	}
	#carousel li {
		display: inline;
		float: left;
		width: 980px;
		height: 450px;
	}
	.carousel-padding {
		padding: 0;
		overflow: hidden;
	}
	#carousel-prev, #carousel-next {
		width: 44px;
		height: 44px;
		position: absolute;
		top: 222px;
		overflow: hidden;
		z-index:1000;
	}
	#carousel-prev {
		left: 0px;
	}

	#carousel-next {
		right: 0px
	}

	#carousel-left-frame {
		position: absolute;
		top: 0px;
		left: -980px;
		height:488px;
	}

	#carousel-right-frame {
		position: absolute;
		top: 0px;
		right: -980px;
		height:488px;
	}
}


@media (max-width:979px){
	#carousel,
	#carousel li{
		width:490px !important;
		height:244px !important;
	}
	#carousel ul{
		left:-490px !important; /* this gets rid of the smooth move, but it avoids two slides moving at once */
	}
}
@media (max-width:500px){

	#carousel-holder{
		display:none;
	}
	#carousel-replacement{
		display:block;
	}
/*
	#carousel-holder{
		height:122px;
	}
	#carousel,
	#carousel li{
		width:245px !important;
		height:122px !important;
	}
	#carousel ul{
		left:-245px !important;
	}
	#carousel-left-frame {
		left: -245px;
		height:122px;
	}
	#carousel-right-frame {
		right: -245px;
		height:122px;
	}
	#carousel-prev,
	#carousel-next{
		top:50px
	}
	#carousel-prev div,
	#carousel-next div{
		background-size:auto 22px !important;
	}
*/
}