/*
* Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/

/*=====================================================
    
    SMALLER MOBILE DEVICES

=====================================================*/

@media all and (min-width: 240px) {

/*** TITLE & CONTAINERS ***/


.nop-jcarousel {
	position: relative;
	margin: 30px auto;
}
.nop-jcarousel .carousel-title {
	margin: 0 0 30px !important;
	border-bottom: 1px solid #ccc;
	text-align: center;
	font-size: 18px;
	text-transform: capitalize;
    height: auto;
}
.nop-jcarousel .carousel-title strong {
	display: inline-block;
	position: relative;
	width: 280px;
	border-radius: 8px 8px 0 0;
	background: #333 url('images/pattern2.png') repeat;
	padding: 10px 20px;
	font-weight: normal;
	color: #fff;
}
.nop-jcarousel.category-grid {
    background: none;
}
.nop-jcarousel .slick-carousel{
	padding: 10px 40px !important;
}
.nop-jcarousel .carousel-item {
    padding: 0 6.5px;
}
.nop-jcarousel .carousel-item .item-box {
    width: 100% !important; 
    margin: 0!important;
    float: none;
}

.nop-jcarousel .category-item .picture, 
.nop-jcarousel .sub-category-item .picture, 
.nop-jcarousel .manufacturer-item .picture, 
.nop-jcarousel .vendor-item .picture {
    display: block !important;
}

/*** NAVIGATION ***/

.nop-jcarousel .slick-dots {
    padding: 25px 0 0;
    text-align: center;
    font-size: 0;
}
.nop-jcarousel .slick-dots li {
    display: inline-block;
    text-align: center;
    margin: 0 4px;
}
.nop-jcarousel .slick-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    font-size: 0;
    position: relative;
    overflow: hidden;
}
.nop-jcarousel .slick-dots .slick-active button {
    opacity: 1!important;
}
.nop-jcarousel .slick-dots .slick-active button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
}

.nop-jcarousel .slick-prev,
.nop-jcarousel .slick-next {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 32px;
	height: 32px;
    font-size: 0;
	margin-top: -16px;
	border-radius: 30px;
	cursor: pointer;
}
.nop-jcarousel .slick-prev {
	left: 0;
	background-image: url('images/prev-horizontal.png');
    background-position: center;
    background-repeat: no-repeat;
}
.nop-jcarousel .slick-next {
	right: 0;
	background-image:  url('images/next-horizontal.png');
    background-position: center;
    background-repeat: no-repeat;
}

.nop-jcarousel .slick-disabled {
	/*opacity: 0;*/
	cursor: default;
}

}

@media all and (min-width: 769px) {

.nop-jcarousel .slick-prev,
.nop-jcarousel .slick-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
}


}

@media all and (min-width: 1001px) {
	
.fullscreen .nop-jcarousel {
	width: 980px;
	max-width: 92%;
}
.center-2 .nop-jcarousel {
	max-width: 92%;
}
.nop-jcarousel .slick-carousel{
	padding: 10px 0 !important;
}
.nop-jcarousel .slick-prev,
.nop-jcarousel .slick-next {
	width: 36px;
	height: 36px;
	margin-top: -18px;
}
.fullscreen .slick-prev,
.fullscreen .slick-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
}
.nop-jcarousel .slick-prev {
	left: -40px;
}
.nop-jcarousel .slick-next {
	right: -40px;
}
.nop-jcarousel .slick-prev:hover,
.nop-jcarousel .slick-next:hover {
	opacity: 0.8;
}
.nop-jcarousel .slick-disabled {
    opacity: .5;
}
.nop-jcarousel .slick-disabled:hover {
	cursor: default;
	opacity: .5;
}

.side-2 .nop-jcarousel .carousel-title,
.center-2 .nop-jcarousel .carousel-title {
    position: relative;
}
.side-2 .nop-jcarousel .carousel-title span,
.center-2 .nop-jcarousel .carousel-title span {
    padding: 10px 40px;
    max-width: 100%;
}
.side-2 .nop-jcarousel .slick-prev,
.side-2 .nop-jcarousel .slick-next,
.center-2 .nop-jcarousel .slick-prev,
.center-2 .nop-jcarousel .slick-next {
    background-color: transparent;
}
.side-2 .nop-jcarousel .slick-disabled,
.center-2 .nop-jcarousel .slick-disabled {
    opacity: .4;
}
.center-2 .nop-jcarousel .slick-prev {
    top: 0;
    left: 50%;
    margin: 0 0 0 -140px;
}
.center-2 .nop-jcarousel .slick-next {
    top: 0;
    right: 50%;
    margin: 0 -140px 0 0;
}
.side-2 .nop-jcarousel .slick-prev {
    top: 0;
    left: 0;
    margin: 0;
}
.side-2 .nop-jcarousel .slick-next {
    top: 0;
    right: 0;
    margin: 0;
}

}

@media all and (min-width: 1280px) {

.nop-jcarousel .slick-prev,
.nop-jcarousel .slick-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
}	

}