/*
* Copyright 2012 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/


/*** TITLE & CONTAINERS ***/


.nop-jcarousel {
	position: relative;
    margin: 20px 0;
}
.nop-jcarousel .carousel-title {
}
.nop-jcarousel .carousel-title span {
    display: block;
    font-weight: 300;
    font-size: 24px;
    padding: 8px 12px 48px;
    border-bottom: 1px dashed #797979;
    margin-bottom: 10px;
}

.nop-jcarousel .jcarousel-container {
	position: static !important;
    padding-top: 48px;
}
    .nop-jcarousel .carousel-title + .jcarousel-container {
        padding-top: 0;
    }

.nop-jcarousel .jcarousel-clip {
    overflow: hidden;
}
.nop-jcarousel .jcarousel-list-horizontal {
    padding: 30px 0 10px 0 !important;
}



/*** NAVIGATION ***/



.nop-jcarousel .jcarousel-prev, 
.nop-jcarousel .jcarousel-next {
    position: absolute;
    top: 47px;
    width: 44px;
    height: 95px;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
.nop-jcarousel .jcarousel-prev {
    left: 50%;
    margin-left: -36px;
    background-image: url('images/prev-horizontal.png');
    background-position: 9px center;
}
.nop-jcarousel .jcarousel-next {
    right: 50%;
    background-image: url('images/next-horizontal.png');
}
.nop-jcarousel .jcarousel-prev:hover,
.nop-jcarousel .jcarousel-next:hover {

}

.nop-jcarousel .jcarousel-next-disabled,
.nop-jcarousel .jcarousel-next-disabled:hover,
.nop-jcarousel .jcarousel-prev-disabled,
.nop-jcarousel .jcarousel-prev-disabled:hover {
    opacity: 0.3;
	/*filter: alpha(opacity=30);*/
    cursor: default;
}

    .nop-jcarousel .jcarousel-prev-vertical,
    .nop-jcarousel .jcarousel-next-vertical {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .nop-jcarousel .jcarousel-prev-vertical {
        background-position: 9px 6px;
    }
    .nop-jcarousel .jcarousel-next-vertical {
        background-position: 13px 6px;
    }


/*** JCAROUSEL ITEM BOX ***/



.nop-jcarousel .jcarousel-item-horizontal {
    text-align: center;
    font-size: 0;
    margin: 0 5px;
}
.nop-jcarousel .jcarousel-item-vertical {
    width: 100%;
    padding: 3px;
}

.nop-jcarousel .item-picture img {
    max-width: 100%;
}


    /* products */


        .products-carousel .jcarousel-item-horizontal {
    
        }
        .products-carousel .item-holder {
            position: relative;
            display: block;
            margin: 0 auto;
            width: 229px;
            max-width: 100%;
            padding: 7px;
            -webkit-transition: box-shadow .2s ease-in-out;
            -moz-transition: box-shadow .2s ease-in-out;
            transition: box-shadow .2s ease-in-out;
        }
            .products-carousel .item-holder:hover {
	            box-shadow: 0 0 4px 1px rgba(0,0,0,0.2);
                background: #fff;
            }
        .products-carousel .item-picture {
	        position: relative;
	        max-height: 230px;
            overflow: hidden;
        }
        .products-carousel .item-picture a {
            position: relative;
	        display: block;
	        width: 100%;
	        height: 100%;
            font-size: 0;
            line-height: 0;
        }
            .products-carousel .item-picture a:before {
                content: " ";
                display: block;
                padding-top: 100%;
            }
            .products-carousel .item-picture img {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        .products-carousel .item-info {
            max-width: 296px;
            margin: 0 auto;
        }
        .products-carousel .item-info .add-info {
            text-align: center;
        }
        .products-carousel .item-info .jcarousel-product-title {
            height: 48px;
            overflow: hidden;
            font-weight: 400;
            text-align: left;
        }
        .products-carousel .item-info .jcarousel-product-name {
	        display: block;
            font-size: 16px;
			line-height:32px;
            color: #505050;
			padding-top:10px;
        }
        .products-carousel .item-info .short-description {
            height: 36px;
            margin: 0 0 10px;
            overflow: hidden;
            line-height: 1.3;
            text-align: justify;
            font-size: 14px;
            font-weight: 300;
        }
        .products-carousel .item-info .prices {
            position: relative;
            background: #46c688;
            height: 44px;
            padding-left: 10px;
            padding-right: 15px;
            font-size: 0;
            display: inline-block;
            vertical-align: middle;
        }
            .products-carousel .item-info .prices:before {
                content: " ";
                position: absolute;
                top: 0;
                right: -9px;
                width: 15px;
                height: 44px;
                background: #46c688;
                -webkit-transform: skew(-16deg);
                -moz-transform: skew(-16deg);
                -ms-transform: skew(-16deg);
                transform: skew(-16deg);
				z-index:9
            }
            .products-carousel .item-info .prices:after {
                content: " ";
                display: inline-block;
                vertical-align: middle;
                height: 44px;
            }
        .products-carousel .item-info .prices > * {
            display: inline-block;
            vertical-align: middle;
        }
        .products-carousel .item-info .old-price {
	        color: #fff;
	        text-decoration: line-through;
            font-size: 12px;
            padding: 3px 0 0px;
            display: block;
        }
        .products-carousel .item-info .actual-price {
	        font-size: 20px;
            color: #fff;
            text-shadow: 1px 0 1px rgba(0,0,0,0.4);
            font-weight: 700;
            line-height: 20px;

        }
            .products-carousel .item-info .old-price + .actual-price {
                display: block;
            }
        .products-carousel .item-info .button {
            display: inline-block;
            border: 0;
            padding: 13px 20px 14px 20px;
            background: #dcdcdc;
            color: #505050;
            position: relative;
            vertical-align: middle;
            font-size: 12px;
        }
            .products-carousel .item-info .button {
                -webkit-transition: background-color .2s ease-in-out;
                -moz-transition: background-color .2s ease-in-out;
                transition: background-color .2s ease-in-out;
            }
            .products-carousel .item-info .button:hover {
                background-color: #ececec;
            }


    /* manufacturers */

        .manufacturers-carousel {
            background: url(images/shadow.png) no-repeat center bottom;
            background-size: contain;
            padding-bottom: 25px;
        }
        .manufacturers-carousel .item-picture a {
            border: 1px solid #ececec;
            display: inline-block;
        }
        .manufacturers-carousel .item-info {
            display: none;
        }

    /* categories */

        .categories-carousel .item-holder {
            position: relative;
            overflow: hidden;
            max-width: 100%;
        }
        .categories-carousel .item-holder .jcarousel-product-title {
	        position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            z-index: 1;
        }
        .categories-carousel .item-holder .jcarousel-product-title a {
	        display: block;
            padding: 10px;
            line-height: 20px;
            font-weight: 700;
            font-size: 18px;
            text-transform: uppercase;
            color: #fff;
            text-align: left;
            background: rgb(0,0,0);
            background: rgba(0,0,0,0.5);
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
        }
            .categories-carousel .item-holder:hover .jcarousel-product-title a {
                background: rgba(0,0,0,0.7);
            }

        .categories-carousel .item-holder .item-picture a {
	        display: block;
            font-size: 0;
            height: 140px;
        }
        .categories-carousel .item-holder .item-picture img {
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;   
            max-width: 100%;
            -webkit-transform: translateZ(0) scale(1.0, 1.0); /* fixes the bug of the 1px moving product images when hover on category */
        }
            .categories-carousel .item-holder:hover .item-picture img {
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
            }



/*** VERTICAL TITLE & CONTAINERS ***/

    .side-2 .nop-jcarousel {
        margin: 0;
    }

    .nop-jcarousel .jcarousel-container-vertical {
	    padding: 0;
    }

        /* products */

            .products-carousel .jcarousel-item-vertical {
                height: 387px !important;
            }

        /* categories */

            .categories-carousel .jcarousel-item-vertical {
                height: 146px !important;
            }
                .categories-carousel .jcarousel-item-vertical .item-holder {
                    height: 140px;
                }

        /* manufacturer */

            .side-2 .manufacturers-carousel {
                background: none;
                padding: 0;
            }
            .manufacturers-carousel .jcarousel-item-vertical {
                height: 105px !important;
            }
            .manufacturers-carousel .jcarousel-item-vertical {
                padding: 0;
            }
                .manufacturers-carousel .jcarousel-clip-vertical .item-holder {
                    width: 175px;
                    height: 100px;
                    margin: 0 auto;
                }
                    .manufacturers-carousel .jcarousel-clip-vertical .item-picture a {
                        height: 100px;
                        overflow: hidden;
                    }


/*** ADDITIONAL STYLES ***/


/* If the wrap is set to circular and the carousel skin can display more items than there are, the carousel adds additional <li> elements to fill the
empty spaces. This class is added only for those empty elements. They should not be visible. */

.nop-jcarousel .jcarousel-item-placeholder-horizontal {
    visibility: hidden;
}


@media all and (min-width: 769px) {

/* products */

    .nop-jcarousel .carousel-title span {
        padding: 8px 0;
    }

        /* products and categories nav */

            .products-carousel .jcarousel-prev-horizontal, 
            .products-carousel .jcarousel-next-horizontal,
            .categories-carousel .jcarousel-prev-horizontal,
            .categories-carousel .jcarousel-next-horizontal {
                top: 50%;
            }
            .products-carousel .jcarousel-prev-horizontal,
            .categories-carousel .jcarousel-prev-horizontal {
                left:-50px;
                margin-left: 0 !important;
            }
            .products-carousel .jcarousel-next-horizontal,
            .categories-carousel .jcarousel-next-horizontal {
                right: -50px;  
                margin-right: 0 !important;
            }
}

/* manufacturers nav */

@media all and (min-width: 769px) and (max-width: 1059px) {

    .manufacturers-carousel .jcarousel-prev-horizontal, 
    .manufacturers-carousel .jcarousel-next-horizontal {
        top: 8px;
        margin: 0 !important;
    }

    .manufacturers-carousel .jcarousel-prev-horizontal {
        right: 37px;
        left: auto;
    }

    .manufacturers-carousel .jcarousel-next-horizontal {
        right: 0;
    }

}

@media all and (min-width: 1060px) {

    /* manufacturers nav */

        .manufacturers-carousel .jcarousel-prev-horizontal, 
        .manufacturers-carousel .jcarousel-next-horizontal {
            margin: 0;
            top: 105px;
        }
        .manufacturers-carousel .jcarousel-prev-horizontal {
            left: -32px;
        }
        .manufacturers-carousel .jcarousel-next-horizontal {
            right: -32px;
        }   

} 

@media (max-width: 1060px) {  
.products-carousel .jcarousel-prev-horizontal, .categories-carousel .jcarousel-prev-horizontal{left:10pxpx;background-size:50%;  }
.products-carousel .jcarousel-next-horizontal, .categories-carousel .jcarousel-next-horizontal{right:-18px;background-size:50%; background-position:100%;  }
}

@media all and (max-width: 980px) {

    .vertical-holder .jcarousel-prev,
    .vertical-holder .jcarousel-next {
        top: 54px;
    }
        .nop-jcarousel .jcarousel-container-vertical {
            padding: 48px 0 0 !important;
        }
        .vertical-holder .carousel-title span {
            font-size: 18px;
            text-transform: uppercase;
            line-height: 20px;
            font-weight: 400;
            padding: 12px;
            margin-bottom: 0;
            color: #fff;
            background: #46c688;
            border-bottom: 0;
        }

}

@media all and (min-width: 981px) {

    .vertical-holder .carousel-title span {
        background: none !important;
    }

    .vertical-holder .jcarousel-prev,
    .vertical-holder .jcarousel-next {
        top: 8px;
        margin: 0 !important;
    }
    .vertical-holder .jcarousel-prev {
        left: auto;
        right: 37px;
    }
    .vertical-holder .jcarousel-next {
        right: 0;
    }

}