﻿.product-box {
    border: 1px solid #b3b3b3;
}

    .product-box .product-picture {
        padding:0;
    }
    .product-box .product-picture img {
        width:100%;
    }


.p-cr .slick-initialized .slick-slide {
    display: block;
    margin: 0 27px;
}

.p-cr .slick-next {
    right: -25px !important;
}
.p-cr .slick-prev {
    left: -25px !important;
}


@media (max-width:992px) {


    #menuToggle {
        display: block;
        position: relative;
        /*top: 50px;
        left: 50px;*/
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }

        #menuToggle input {
            display: block;
            width: 40px;
            height: 32px;
            position: absolute;
            top: -7px;
            left: -5px;
            cursor: pointer;
            opacity: 0; /* hide this */
            z-index: 2; /* and place it over the hamburger */
            -webkit-touch-callout: none;
        }

        /*
 * Just a quick hamburger
 */
        #menuToggle span {
            display: block;
            width: 33px;
            height: 2px;
            margin-bottom: 5px;
            position: relative;
            background: #cdcdcd;
            border-radius: 3px;
            z-index: 1;
            transform-origin: 4px 0px;
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
        }

            #menuToggle span:first-child {
                transform-origin: 0% 0%;
            }

            #menuToggle span:nth-last-child(2) {
                transform-origin: 0% 100%;
            }

        /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
        #menuToggle input:checked ~ span {
            opacity: 1;
            transform: rotate(45deg) translate(-2px, -1px);
            background: #232323;
        }

            /*
 * But let's hide the middle one.
 */
            #menuToggle input:checked ~ span:nth-last-child(3) {
                opacity: 0;
                transform: rotate(0deg) scale(0.2, 0.2);
                transform: translate(-200%, 0);
            }

            /*
 * Ohyeah and the last one should go the other direction
 */
            #menuToggle input:checked ~ span:nth-last-child(2) {
                transform: rotate(-45deg) translate(0, 2px);
            }

    /*
 * Make this absolute positioned
 * at the top left of the screen
 */
    #menu {
        position: absolute;
        left: -65px;
        right: -500px;
        padding: 4rem;
        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

        #menu li {
            padding: 10px 0;
            font-size: 22px;
        }

    /*
 * And let's slide it in from the left
 */
    #menuToggle input:checked ~ ul {
        transform: none;
    }

}