/** base carousel **/
.carousel ul {
position:absolute;
overflow:hidden;
margin:0 auto;
padding:0;
list-style:none;
}

.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {
position:relative;
overflow:hidden;

}

.carousel ul li {float:left;width:278px;height:264px;overflow:hidden;color:#fff;font-size:8em;text-align:center;display: block;margin:0px 0;position: relative; border: 1px solid #000; }
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {
list-style:none;
margin:0;
padding:0;
}

.carousel .pagination-links li {
display:inline;
}

.carousel .pagination-links li a {
padding:2px 6px;	
}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {
background:#444;
color:#fff;
}

.carousel .disabled {
color:gray;
cursor:default;
}

/** my carousel 1 **/
#my-carousel-1 .mask {

}

/** my carousel 2 **/
#my-carousel-2 .mask {
width:630px;
}

#my-carousel-2 ul li {
margin:0 10px 0 0;
}

/** my carousel 3 **/
#my-carousel-3 .mask {

}
#my-carousel-3 li img { max-width: 100%; }






@media only screen and (min-width: 1336px) and (max-width: 1566px) {


/** base carousel **/
.carousel ul {
position:absolute;
overflow:hidden;
margin:0 auto;
padding:0;
list-style:none;
}

.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {
position:relative;
overflow:hidden;

}

.carousel ul li {
float:left;
width:240px;
height:228px;
overflow:hidden;
color:#fff;
font-size:8em;
text-align:center;
display: block;
margin:1px 1px;
position: relative;
}
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {
list-style:none;
margin:0;
padding:0;
}

.carousel .pagination-links li {
display:inline;
}

.carousel .pagination-links li a {
padding:2px 6px;	
}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {
background:#444;
color:#fff;
}

.carousel .disabled {
color:gray;
cursor:default;
}

/** my carousel 1 **/
#my-carousel-1 .mask {

}

/** my carousel 2 **/
#my-carousel-2 .mask {
width:630px;
}

#my-carousel-2 ul li {
margin:0 10px 0 0;
}

/** my carousel 3 **/
#my-carousel-3 .mask {

}
#my-carousel-3 li img { max-width: 100%; }
	
}

@media only screen and (min-width: 1260px) and (max-width: 1339px) {

/** base carousel **/
.carousel ul {
position:absolute;
overflow:hidden;
margin:0 auto;
padding:0;
list-style:none;
}

.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {
position:relative;
overflow:hidden;

}

.carousel ul li {
float:left;
width:232px;
height:220px;
overflow:hidden;
color:#fff;
font-size:8em;
text-align:center;
display: block;
margin:1px 1px;
position: relative;
}
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {
list-style:none;
margin:0;
padding:0;
}

.carousel .pagination-links li {
display:inline;
}

.carousel .pagination-links li a {
padding:2px 6px;	
}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {
background:#444;
color:#fff;
}

.carousel .disabled {
color:gray;
cursor:default;
}

/** my carousel 1 **/
#my-carousel-1 .mask {

}

/** my carousel 2 **/
#my-carousel-2 .mask {
width:630px;
}

#my-carousel-2 ul li {
margin:0 10px 0 0;
}

/** my carousel 3 **/
#my-carousel-3 .mask {

}
#my-carousel-3 li img { max-width: 100%; }

}


@media only screen and (min-width: 1132px) and (max-width:1259px) {
	
/** base carousel **/
.carousel ul {
position:absolute;
overflow:hidden;
margin:0 auto;
padding:0;
list-style:none;
}

.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {
position:relative;
overflow:hidden;

}

.carousel ul li {
float:left;
width:216px;
height:206px;
overflow:hidden;
color:#fff;
font-size:8em;
text-align:center;
display: block;
margin:1px 1px;
position: relative;
}
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {
list-style:none;
margin:0;
padding:0;
}

.carousel .pagination-links li {
display:inline;
}

.carousel .pagination-links li a {
padding:2px 6px;	
}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {
background:#444;
color:#fff;
}

.carousel .disabled {
color:gray;
cursor:default;
}

/** my carousel 1 **/
#my-carousel-1 .mask {

}

/** my carousel 2 **/
#my-carousel-2 .mask {
width:630px;
}

#my-carousel-2 ul li {
margin:0 10px 0 0;
}

/** my carousel 3 **/
#my-carousel-3 .mask {

}
#my-carousel-3 li img { max-width: 100%; }

}


@media only screen and (min-width: 1004px) and (max-width:1131px) {
	
/** base carousel **/
.carousel ul {
position:absolute;
overflow:hidden;
margin:0 auto;
padding:0;
list-style:none;
}

.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {
position:relative;
overflow:hidden;

}

.carousel ul li {
float:left;
width:198px;
height:189px;
overflow:hidden;
color:#fff;
font-size:8em;
text-align:center;
display: block;
margin:1px 1px;
position: relative;
}
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {
list-style:none;
margin:0;
padding:0;
}

.carousel .pagination-links li {
display:inline;
}

.carousel .pagination-links li a {
padding:2px 6px;	
}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {
background:#444;
color:#fff;
}

.carousel .disabled {
color:gray;
cursor:default;
}

/** my carousel 1 **/
#my-carousel-1 .mask {

}

/** my carousel 2 **/
#my-carousel-2 .mask {
width:630px;
}

#my-carousel-2 ul li {
margin:0 10px 0 0;
}

/** my carousel 3 **/
#my-carousel-3 .mask {

}
#my-carousel-3 li img { max-width: 100%; }
	
}




@media only screen and (min-width: 768px) and (max-width:1003px) {
	
/** base carousel **/
.carousel ul {
position:absolute;
overflow:hidden;
margin:0 auto;
padding:0;
list-style:none;
}

.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {
position:relative;
overflow:hidden;

}

.carousel ul li {
float:left;
width:229px;
height:219px;
overflow:hidden;
color:#fff;
font-size:8em;
text-align:center;
display: block;
margin:1px 1px;
position: relative;
}
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {
list-style:none;
margin:0;
padding:0;
}

.carousel .pagination-links li {
display:inline;
}

.carousel .pagination-links li a {
padding:2px 6px;	
}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {
background:#444;
color:#fff;
}

.carousel .disabled {
color:gray;
cursor:default;
}

/** my carousel 1 **/
#my-carousel-1 .mask {

}

/** my carousel 2 **/
#my-carousel-2 .mask {
width:630px;
}

#my-carousel-2 ul li {
margin:0 10px 0 0;
}

/** my carousel 3 **/
#my-carousel-3 .mask {

}
#my-carousel-3 li img { max-width: 100%; }
	
}


@media only screen and (min-width: 600px) and (max-width:767px) {
	
/** base carousel **/
.carousel ul {position:absolute;overflow:hidden;margin:0 auto;padding:0;list-style:none;}

.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {position:relative;overflow:hidden;
}

.carousel ul li {float:left;width:288px;height:230px;overflow:hidden;color:#fff;font-size:8em;text-align:center;display: block;margin:1px 1px;position: relative;}
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {list-style:none;margin:0;padding:0;}

.carousel .pagination-links li {display:inline;}

.carousel .pagination-links li a {padding:2px 6px;	}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {background:#444;color:#fff;}

.carousel .disabled {color:gray;cursor:default;}

/** my carousel 1 **/
#my-carousel-1 .mask {

}

/** my carousel 2 **/
#my-carousel-2 .mask {width:630px;}

#my-carousel-2 ul li {
margin:0 10px 0 0;
}

/** my carousel 3 **/
#my-carousel-3 .mask {}
#my-carousel-3 li img { max-width: 100%; }
	
}


@media only screen and (min-width: 480px) and (max-width:599px) {

	
/** base carousel **/
.carousel ul {position:absolute;overflow:hidden;margin:0 auto;padding:0;list-style:none;
}

.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {position:relative;overflow:hidden;
}
.carousel ul li img { max-width: 100%; }
.carousel ul li {float:left;width:226px;
height:216px;overflow:hidden;color:#fff;font-size:8em;text-align:center;display: block;margin:1px 1px;position: relative;}
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {list-style:none;margin:0;padding:0;}

.carousel .pagination-links li {display:inline;}

.carousel .pagination-links li a {padding:2px 6px;	}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {background:#444;olor:#fff;}

.carousel .disabled {color:gray;cursor:default;}

/** my carousel 1 **/
#my-carousel-1 .mask {

}

/** my carousel 2 **/
#my-carousel-2 .mask {width:630px;}

#my-carousel-2 ul li {margin:0 10px 0 0;}

/** my carousel 3 **/
#my-carousel-3 .mask {
}
#my-carousel-3 li img { max-width: 100%; }

.carousel ul li img{ width:100%}
	
}

@media only screen and (min-width: 120px) and (max-width:479px) {
	
/** base carousel **/
.carousel ul {position:absolute;overflow:hidden;margin:0 auto;padding:0;list-style:none;}
.no-js .carousel ul {position:static; text-align:center;}

.carousel .mask {position:relative;overflow:hidden;}

.carousel ul li {float:left;width:320px;height:250px;overflow:hidden;color:#fff;font-size:8em;text-align:center;display: block;margin:1px 1px;position: relative;}
.carousel li a span { display: none; z-index:11; height: 100%; width: 100%; left: 0; top: 0; text-indent: -9999px; position: absolute; background: url(../images/gallery-hov.png) no-repeat; }
.carousel li:hover a span { display: block;  }

.carousel .pagination-links {list-style:none;margin:0;padding:0;}

.carousel .pagination-links li {display:inline;}

.carousel .pagination-links li a {padding:2px 6px;	}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {background:#444;color:#fff;}

.carousel .disabled {color:gray;cursor:default;}

/** my carousel 1 **/
#my-carousel-1 .mask {}

/** my carousel 2 **/
#my-carousel-2 .mask {width:630px;}

#my-carousel-2 ul li {margin:0 10px 0 0;}

/** my carousel 3 **/
#my-carousel-3 .mask {}
#my-carousel-3 li img { max-width: 100%; }

.carousel ul li img{ width:100%}	
}