/* this is for an image gallery with thumbnails - it's used in portfolio/image-gallery */
#carousel-thumbs2 {
    /*position: absolute;
    width: 50%;
    left: 25%;
    top: 50px;*/
    }
    #carousel-thumbs2 .carousel-wrapper {
    padding-bottom: 10px;
    position: relative;
    }
    #carousel-thumbs2 .carousel, #carousel-thumbs2 .thumbs {
    overflow: hidden;
    }
    #carousel-thumbs2 .carousel-wrapper .caroufredsel_wrapper {
    /*border-radius: 10px;
    box-shadow: 0 0 5px #899;*/
    }
     
    #carousel-thumbs2 .carousel span, #carousel-thumbs2 .carousel img,
    #carousel-thumbs2 .thumbs a, #carousel-thumbs2 .thumbs img {
    display: block;
    float: left;
    }
    #carousel-thumbs2 .carousel span, #carousel-thumbs2 .carousel a,
    #carousel-thumbs2 .thumbs span, #carousel-thumbs2 .thumbs a {
    position: relative;
    }
    #carousel-thumbs2 .carousel img,
    #carousel-thumbs2 .thumbs img {
    float: none;
    border: none;
    max-width: 100%;
    max-height: 100%;
    /*position: absolute;
    top: 0;
    left: 0;*/
    margin: 0 auto;
    }
     
    #carousel-thumbs2 .carousel span {
    width: 100%;
    height: auto;
    }
     
    #carousel-thumbs2 .thumbs-wrapper {
    padding: 20px 40px;
    position: relative;
    }
    #carousel-thumbs2 .thumbs a {
    border: 1px solid #e5e5e5;
    /*width: 150px;*/
    height: 100px;
    margin: 0 10px;
    overflow: hidden;
    /*border-radius: 10px;
    -webkit-transition: border-color .5s;
    -moz-transition: border-color .5s;
    -ms-transition: border-color .5s;
    transition: border-color .5s;*/
    }
    #carousel-thumbs2 .thumbs a:hover, #carousel-thumbs2 .thumbs a.selected {
    border-color: #566;
    }
     
     
    #carousel-thumbs2 #prev, #carousel-thumbs2 #next, #carousel-thumbs2 #prev2, #carousel-thumbs2 #next2 {
    background: transparent url('images/carousel_nav.png') no-repeat 0 0;
    display: block;
    width: 19px;
    height: 20px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    }
    #carousel-thumbs2 #prev, #carousel-thumbs2 #prev2 {
    background-position: 0 0;
    left: 10px;
    }
    #carousel-thumbs2 #next, #carousel-thumbs2 #next2 {
    background-position: -19px 0;
    right: 10px;
    }	
    #carousel-thumbs2 #prev:hover, #carousel-thumbs2 #prev2:hover {
    background-position: 0 -20px;	
    }
    #carousel-thumbs2 #next:hover, #carousel-thumbs2 #next2:hover {
    background-position: -19px -20px;	
    }
    #carousel-thumbs2 #prev.disabled, #carousel-thumbs2 #next.disabled, #carousel-thumbs2 #prev2.disabled, #carousel-thumbs2 #next2.disabled {
    display: none !important;
    }


/* this is for a basic carousel with multiple items displaying, like recent items */

#imgWrapper {  height: 400px;  }
#imgWrapper.gallery { margin-top: 15px; height: 402px; border: 1px solid #e5e5e5; }
#imgWrapper img { max-height: 400px; margin: 0 auto; }

@media (max-width:700px) {
	#imgWrapper {  max-height: 300px;  }
#imgWrapper img { max-height: 300px; margin: 0 auto; }
}

#carousel-multiitems, #carousel-zoom, #carousel-gallery {
	width: 100%;
	padding-bottom: 10px;
	position: relative;

}

#carousel-zoom { min-height: 100px; }

#carousel-multiitems .carousel, #carousel-zoom .carousel, #carousel-gallery .carousel {
	overflow: hidden;
}
#carousel-multiitems .caroufredsel_wrapper, #carousel-zoom .caroufredsel_wrapper, #carousel-gallery .caroufredsel_wrapper {
	border-radius: 0px;
}

#carousel-multiitems .carousel .item, #carousel-zoom .carousel .item, #carousel-gallery .carousel .item {
	display: block;
	float: left;
}
#carousel-multiitems .carousel .item, #carousel-multiitems .carousel a, #carousel-zoom .carousel .item, #carousel-zoom .carousel a, #carousel-gallery .carousel .item, #carousel-gallery .carousel a {
	position: relative;
}
#carousel-multiitems .carousel img, #carousel-zoom .carousel img, #carousel-gallery .carousel img {
  border: none;
  margin: 0 auto;
}

#carousel-multiitems .carousel .item{
  width: 150px;
  /*height: 200px;*/
}


#carousel-zoom .carousel .item, #carousel-gallery .carousel .item {
	width: 100px;
  height: 100px;
}

#carousel-gallery .carousel .item:first-child { margin-left: 20px; }

#carousel-multiitems .carousel .item .item-image img {
	display: block;
	max-height: 100px;
}

#carousel-zoom .carousel .item .item-image img, #carousel-gallery .carousel .item .item-image img {
	display: block;
	max-height: 75px;
	margin: 0 auto;
}

#carousel-zoom .carousel .thumb-caption {
	text-align: center;
	font-size: 13px;
}


#carousel-multiitems .prev, #carousel-multiitems .next, #carousel-zoom .prev, #carousel-zoom .next, #carousel-gallery .prev, #carousel-gallery .next {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
	z-index: 1000;
}



#carousel-multiitems .prev, #carousel-zoom .prev, #carousel-gallery .prev {
  left: 0px;
}
#carousel-multiitems .next, #carousel-zoom .next, #carousel-gallery .next {
  right: 10px;
}			
#carousel-multiitems .prev:hover, #carousel-zoom .prev:hover, #carousel-gallery .prev:hover { 
			
}
#carousel-multiitems .next:hover, #carousel-zoom .next:hover, #carousel-gallery .next:hover {
				
}
#carousel-multiitems .prev.disabled, .next.disabled, #carousel-zoom .prev.disabled, .next.disabled, #carousel-gallery .prev.disabled, .next.disabled {
	display: none !important;
}



/* this is for a basic carousel with one item at a time, be sure to wrap slides in a div with class slides */

#carousel-basic {
	margin-bottom: 20px;
	position: relative;
	overflow:hidden;
}
#carousel-basic .carousel-wrapper {
	
}
#carousel-basic .carousel {
	overflow: hidden;
}
#carousel-basic .carousel-wrapper .caroufredsel_wrapper {
	border-radius: 0px;
	
}

#carousel-basic .carousel div.slide  {
	display: block;
	float: left;
	
}

#carousel-basic .carousel div.slide img {
  border: 0;
	width: 100%;
	/*height: auto;*/
  margin: 0 auto;
}

#carousel-basic .carousel div.slide {
  width: 100%;
  /*height: auto;*/
}



#carousel-basic .prev, #carousel-basic .next {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
}
#carousel-basic .prev {
  background-position: 0 0;
  left: 10px;
}
#carousel-basic .next {
  background-position: -19px 0;
  right: 10px;
}			
#carousel-basic .prev:hover { 
  background-position: 0 -20px;				
}
#carousel-basic .next:hover {
	background-position: -19px -20px;				
}
#carousel-basic .prev.disabled, .next.disabled {
	display: none !important;
}


/* this is for a carousel with thumbs - I don't think this is being used anywhere - use the one at the top */
#carousel-thumbs {
	width: 100%;
	padding-bottom: 10px;
	position: relative;
}
#carousel-thumbs .carousel-wrapper {
	
}
#carousel-thumbs .carousel, #carousel-thumbs .thumbs {
	overflow: hidden;
}
#carousel-thumbs .carousel-wrapper .caroufredsel_wrapper {
	border-radius: 0px;
}

#carousel-thumbs .carousel span, #carousel-thumbs .carousel img,
#carousel-thumbs .thumbs a, #carousel-thumbs .thumbs img  {
	/*display: block;
	float: left;*/
}
#carousel-thumbs .carousel span, #carousel-thumbs .carousel a,
#carousel-thumbs .thumbs span, #carousel-thumbs .thumbs a {
	/*position: relative;*/
	float: left;
}
#carousel-thumbs .carousel img,
#carousel-thumbs .thumbs img {
  border: none;
  /*width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;*/
  margin: 0 auto;
}

#carousel-thumbs .carousel span {
  width: 100%;
  height: 350px;
}

#carousel-thumbs .thumbs-wrapper {
  padding: 10px 20px;
  position: relative;
}
#carousel-thumbs .thumbs a {
  width: 70px;
  height: 70px;
  margin: 0 10px;
  overflow: hidden;
  border-radius: 10px;
}

#carousel-thumbs .thumbs a:hover, #carousel-thumbs .thumbs a.selected {
	border-color: #566;
}

#carousel-thumbs .prev, #carousel-thumbs .next {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
}
#carousel-thumbs .prev {
  background-position: 0 0;
  left: 10px;
}
#carousel-thumbs .next {
  background-position: -19px 0;
  right: 10px;
}			
#carousel-thumbs .prev:hover { 
  background-position: 0 -20px;				
}
#carousel-thumbs .next:hover {
	background-position: -19px -20px;				
}
#carousel-thumbs .prev.disabled, .next.disabled {
	display: none !important;
}