/** 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:310px;
height:295px;
overflow:hidden;
color:#fff;
font-size:8em;
text-align:center;
display: block;
margin:1px 0;
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: 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:240px;
height:240px;
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 {
float:left;
width:230px;
height:170px;
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: 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:300px;
height:180px;
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%; }
	
}