@charset "utf-8";
/* CSS Document */

        .container {
            max-width: 900px;
            padding: 30px;
            margin-left: auto;
            margin-right: auto;
        }

        .product {
            display: flex;
            flex-direction: column;
			margin-bottom:2em;
        }
        
        /* Thumbnails Slider */
		.my-thumbnails-1,
		.my-thumbnails-2,
		.my-thumbnails-3,
		.my-thumbnails-4,
        .slider-thumbnails {
            margin-left: -15px;
            margin-right: -15px;
        }

		.my-thumbnails-1 .slick-slide,
		.my-thumbnails-2 .slick-slide,
		.my-thumbnails-3 .slick-slide,
		.my-thumbnails-4 .slick-slide,
        .slider-thumbnails .slick-slide {
            padding: 15px;
            transition: transform 0.3s ease-out;
        }
        
		.my-thumbnails-1 .slick-slide:focus img,
		.my-thumbnails-2 .slick-slide:focus img,
		.my-thumbnails-3 .slick-slide:focus img,
		.my-thumbnails-4 .slick-slide:focus img,
        .slider-thumbnails .slick-slide:focus img {
            box-shadow: 0 0 5px rgba(0,0,0,0.6);
        }

		.my-thumbnails-1 .slick-slide img,
		.my-thumbnails-2 .slick-slide img,
		.my-thumbnails-3 .slick-slide img,
		.my-thumbnails-4 .slick-slide img,
        .slider-thumbnails .slick-slide img {
            max-width: 100%;
            /*border: solid 5px #fff;*/
			border: solid 1px #fff;
            box-sizing: border-box;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            transition: box-shadow 0.3s ease-out;
            border-radius: 3px;
			cursor: pointer;
        }

        /* Main Slider */
		.my-slider-1,
		.my-slider-2,
		.my-slider-3,
		.my-slider-4,
        .slider {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            /*border: solid 9px #fff;*/
			border: solid 1px #fff;
            box-sizing: border-box;
            margin-bottom: 15px;
            border-radius: 5px;
        }

		.my-slider-1 .slick-slide,
		.my-slider-2 .slick-slide,
		.my-slider-3 .slick-slide,
		.my-slider-4 .slick-slide,
        .slider .slick-slide {}

		.my-slider-1 .slick-slide img,
		.my-slider-2 .slick-slide img,
		.my-slider-3 .slick-slide img,
		.my-slider-4 .slick-slide img,
        .slider .slick-slide img {
            width: 100%;
        }

        /* make button larger and change their positions */
        .slick-prev,
        .slick-next {
            width: 50px;
            height: 50px;
            z-index: 1;
        }

        .slick-prev {
            left: 5px;
        }

        .slick-next {
            right: 5px;
        }

        .slick-prev:before,
        .slick-next:before {
            font-size: 40px;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        /* General slick slider styling */
        .slick-slide:focus,
        .slick-slide:focus {
            outline: none;
            /* remove default outline when on :focus */
        }

        /* hide dots and arrow buttons when slider is not hovered */
        .slick-slider:not(:hover) .slick-arrow,
        .slick-slider:not(:hover) .slick-dots {
            opacity: 0;
        }
	
	    .slick-slider:not(:hover) .slick-dots {
            opacity: 1;
        }

        /* transition effects for opacity */
        .slick-arrow {
            transition: opacity 0.5s ease-out;
        }

        /* Loading effects for main slider */
		.my-slider-1,
		.my-slider-2,
		.my-slider-3,
        .slider {
            background: url(/portfolio/images/loading.gif);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100px 100px;
            min-height: 100px;
        }
		.my-slider-1 img.slick-loading,
		.my-slider-2 img.slick-loading,
		.my-slider-3 img.slick-loading,
		.my-slider-4 img.slick-loading,
        .slider img.slick-loading {
            opacity: 0;
        }
		.my-slider-1 img ,
		.my-slider-2 img ,
		.my-slider-3 img ,
		.my-slider-4 img ,
        .slider img {
            transition: opacity 0.3s ease 0s;
        }
		.my-slider-1 .slick-loading:after,
		.my-slider-2 .slick-loading:after,
		.my-slider-3 .slick-loading:after,
		.my-slider-4 .slick-loading:after,
        .slider .slick-loading:after {
            content:'loading'
        }