// tpl-proizvodi-section

.tpl-proizvod-article{

    .org-container{
        width: 100%;
        max-width: 1180px;
		margin:0px auto;
		position: relative;
		z-index: 1000;
		// top: 60px;

        .row{
            margin:0px;
		}
	}

	.title-container{
        width: 100%;
        // max-width: 1180px;
		margin:0px auto;
		position: absolute;
		z-index: 1000;
		top: 60px;

        .row{
            margin:0px;
		}
	}


	.product-article__slider{
		width:100%;
		position: relative;
		opacity: 0;
		@include transition(opacity .2s ease-in-out .4s);
		&.slick-initialized {
			opacity: 1;
		}
		.product-article__slider-init-slider {
			// max-height: 700px;
			overflow: hidden;
			&.slick-initialized {
				max-height: auto;
				overflow: visible;
			}
		}

		& > .slick-slider > .slick-list { overflow: visible; }

		.customArrow{
			position: absolute;
			top:40%;
			transform: translateY(-50%);
			z-index: 9;
			width: 180px;
			height: 180px;
			box-shadow: 0 15px 50px 0 rgba(207, 228, 244, 0.7);
			background-image: linear-gradient(to left, #edf7ff, #ffffff);
			border: solid 2px #ffffff;
			border-radius: 50%;
			text-align: center;
			cursor: pointer;
			@include transition($transition-base);

			&:hover {
				background-image: linear-gradient(to left, #ffffff, #edf7ff);
				border: solid 2px #edf7ff;
				box-shadow: 0 5px 10px 0 rgba(207, 228, 244, 0.7);
			}

			&.mobileArrow{
				width:60px;
				height:60px;
				display:none;

				.customArrow__text{
					transform: none;
					top: 2px;
				}
			}

			.navCustomArrow__slider-slide {
				height: 180px;
				display: -webkit-box !important;
				display: -ms-flexbox !important;
				display: flex !important;
				-webkit-box-align: center !important;
				-ms-flex-align: center !important;
				align-items: center !important;
				outline: none;
			}

			.customArrow__text{
				// position: absolute;
				// top:50%;
				// transform:translateY(-50%);
				text-align: center;
				width:100%;
				// height: 180px;

				.customArrow__h3{
					@include fontFace($bodoni-book);
					@include fontSize(36);
					letter-spacing: -1px;
					color: #4095d8;
				}
				.customArrow__h4{
					@include fontSize(14);
					letter-spacing: 4px;
					color: #303c51;
				}
			}
		}
		.prevCustomArrow{
			left:25%;
		}
		.nextCustomArrow{
			right:25%;
		}
		.product-article__slider-slide{
			width:720px;
			margin:0px auto;
			outline: none;

			.product-article__slider-slide-image{
				position: relative;
				img{
					display: block;
					margin:0px auto;
				}
				.product-article__slider-slide-image-top{
					position: relative;
					z-index: 1;
				}
				.product-article__slider-slide-image-bottom{
					position: absolute;
					bottom:-30px;
					left:-30px;
					display: none;
					opacity: 1;
					transition: all .5s ease-in;
				}
			}

			.product-article__slider-slide-info{
				padding:30px 20px;
				text-align: center;
				opacity: 1;
				display:none;
				width: 100%;
				max-width: 400px;
				margin: 20px auto 0;
				background-color: rgba(255,255,255,1);
				border-radius: 30px;
				box-shadow:  0 15px 50px 0 rgba(207, 228, 244, 0.7);
				@include transition($transition-base);

				&.inPosition {
					background-color: rgba(255,255,255,0);
					box-shadow: 0 15px 50px 0 rgba(207, 228, 244, 0);
				}

				.product-article__slider-slide-info-sup{
					@include fontSize(14);
					letter-spacing: 4px;
					color: #303c51;
				}
				.product-article__slider-slide-info-title{
					@include fontFace($bodoni-book);
					@include fontSize(24);
					@include lineHeight(34, 24);
					color: #303c51;
					width:280px;
					margin:0px auto;

					.red{
						color: #ce1628;
					}
				}
			}
		}
		@keyframes showUpAnim{
			from {opacity: 0;}
			to {opacity: 1;}
		}
		@keyframes slideTextUp{
			from{
				// transform: translateY(-5rem);
				top: 0px;
			}
			to{
				// tansform: translateY(0px);
				top: -250px;
			}
		}
		@keyframes slideTextDown{
			from{
				transform: translateY(5rem);
			}
			to{
				tansform: translateY(0px);
			}
		}
		@keyframes fadeIn{
			from{opacity: 0;}
			to{opacity: 1;}
		}
		.slick-current{
			.product-article__slider-slide-image{
				.product-article__slider-slide-image-bottom{
					display: block;
					// animation: showUpAnim 2s, fadeIn 2s;
				}
			}
			.product-article__slider-slide-info{
				display:block;
			    position: relative;
				top: -250px;
				z-index: 1000;
				@include media-breakpoint-up(md) {
					animation: slideTextUp 2s, fadeIn 2s;
				}
				@media screen and (max-height: 700px) {
					top: -500px;
				}
			}
		}

		@keyframes blurOut{
			from{
				-webkit-filter: blur(10px);
				filter: blur(10px);
			}
			to{
				-webkit-filter: blur(0px);
				filter: blur(0px);
			}
		}
		@keyframes blurIn{
			from{
				-webkit-filter: blur(0px);
				filter: blur(0px);
			}
			to{
				-webkit-filter: blur(10px);
				filter: blur(10px);
			}
		}
		.product-article__slider-slide[tabindex="-1"]{
			.product-article__slider-slide-image{
				.product-article__slider-slide-image-top{
					img{
						animation: blurIn 2s;
						-webkit-filter: blur(10px);
						filter: blur(10px);
					}
				}
			}
		}
		.product-article__slider-slide[tabindex="0"]{
			.product-article__slider-slide-image{
				.product-article__slider-slide-image-top{
					img{
						animation: blurOut 1s;
					}
				}
			}
		}

		// Styling the default Slick dots
		.slick-dots {
			display: flex;
			justify-content: center;
			
			margin: 0;
			padding: 1rem 0 40px;
			
			list-style-type: none;
			
				li {
					margin: 0 0.25rem;
				}
			
				button {
					cursor: pointer;
					display: block;
					width: 1rem;
					height: 1rem;
					padding: 0;
					
					border: none;
					border-radius: 100%;
					background-color: $colorLightBlue;
					
					text-indent: -9999px;

					&:focus {
						outline: none;
					}
				}
			
				li.slick-active button {
					background-color: $colorPrimaryBlue;
				}
			
		}

	}

	.product-article__tabs{
		padding-top: 8rem;
		.product-article__tabs-options{
			padding:0px;
			.product-article__tabs-options-ul{
				padding:0px;
				.product-article__tabs-options-ul-item{
					list-style: none;
					display: inline-block;
					margin-right:40px;
					border-bottom:2px solid #fff;
					padding-bottom:10px;
					cursor: pointer;
					@include transition($transition-base);

					.product-article__tabs-options-ul-item-link{
						@include fontSize(14);
						letter-spacing: 4px;
						color: #4095d8;
					}

					&.active{
						border-bottom:2px solid #303c51;

						a{
							color: #303c51;
						}
					}
				}
			}
		}

		.product-article__tabs-items{
			padding:0px;
			.product-article__tabs-items-item{
				padding:0px;
				outline:none;
				display:none;
				&[tabindex="1"] { display: flex; }

				.item-desc__big-text{
					padding:6rem 0px 0px 0px;
					.item-desc__big-text-p{
						@include fontFace($bodoni-book);
						@include fontSize(30);
						@include lineHeight(42, 30);
						letter-spacing: 0px;
						color: #1e2c42;
					}
				}
				.item-desc__info{
					padding: 6rem 0px 0px 0px;
					.item-desc__info-text{
						.item-desc__info-text-p, p{
							@include fontSize(20);
							@include lineHeight(30, 20);
							color: #303c51;
						}
					}
					.item-desc__info-title-h2, h2{
						@include fontSize(16);
						@include lineHeight(26, 16);
						color: #303c51;
						letter-spacing: 2px;
					}
					.item-desc__info-title-h3, h3{
						@include fontSize(14);
						@include lineHeight(20, 14);
						color: #ce1628;
					}
					.item-desc__info-title {
						letter-spacing: 2px;
					}
					.item-desc__info-list{
						padding:0px;
						padding-top:20px;
						margin-bottom: 0;
						.item-desc__info-list-item{
							display: inline-block;
							width:65px;
							height:65px;
							background: #fff;
							border:1px solid #cfe4f4;
							text-align: center;
							border-radius: 50%;
							line-height: 65px;
							margin-right:20px;
							margin-bottom:20px;
							span{
								@include fontFace($bodoni-book);
								@include fontSize(18);
								color: #303c51;
							}
						}
					}
					h2 + ul.pills {
						margin-top: -3rem;
					}
					ul.pills{
						padding:0px;
						padding-top:20px;
						margin-bottom: 3rem;
						li{
							display: inline-block;
							width:65px;
							height:65px;
							background: #fff;
							border:1px solid #cfe4f4;
							text-align: center;
							border-radius: 50%;
							line-height: 65px;
							margin-right:20px;
							h3 {
								margin: 12px 0 -5px;
								@include fontSize(14);
								@include lineHeight(20, 14);
								color: #ce1628;
							}
							span{
								@include fontFace($bodoni-book);
								@include fontSize(18);
								color: #303c51;
								line-height: 1.5em;
								display: block;
							}
						}
					}
					ul.table{
						padding:0px;
						margin-bottom: 3rem;
						float: left;
						width: 100%;
						clear: both;
						li {
							list-style: none;
							display: block;
							padding: 7px 0px;
							padding-left:10px;
							padding-right:5px;
							border-bottom: 1px solid #cfe4f4;
							float: left;
							width: 100%;
							clear: both;
							&:first-child{
								border-top: 1px solid #cfe4f4;
							}
							h3{
								@include fontSize(16);
								@include lineHeight(26, 16);
								color: #303c51;
								float: left;
							}
							span{
								@include fontSize(16);
								@include lineHeight(26, 16);
								color: #303c51;
								font-weight: 600;
								float: right;
							}
						}
					}
				}
				.item-table__block{
					padding:6rem 0px 0px 0px;
					.item-table__block-title{
						@include fontSize(16);
						@include lineHeight(26, 16);
						color: #303c51;
						display: block;
						padding:10px 0px;
						font-weight: 600;
						padding-left:10px;
					}
					.item-table__block-ul{
						padding:0px;

						.item-table__block-ul-item{
							list-style: none;
							display: block;
							padding: 7px 0px;
							padding-left:10px;
							padding-right:5px;
							border-bottom: 1px solid #cfe4f4;
							&:first-child{
								border-top: 1px solid #cfe4f4;
							}
							.item-table__block-ul-item-h3{
								@include fontSize(16);
								@include lineHeight(26, 16);
								color: #303c51;
							}
							.item-table__block-ul-item-span{
								@include fontSize(16);
								@include lineHeight(26, 16);
								color: #303c51;
								font-weight: 600;
							}
						}
					}
				}
			}
		}
	}

	.product-article__products{
		padding: 10rem 0px;
		margin: 10rem 0px 0;
		width:100%;
		background-color: #eff8ff;

		.product-article__products-top-title{
			width:100%;
			max-width: 520px;
			margin:0px auto;
		}
		.product-article__products-items{
			margin-top: 6rem;

			.product-article__products-items-item{
				text-align: center;
				.product-article__products-items-item-img {

					position: relative;
					display: inline-block;
					img {
						transform: translateY(0);
						@include transition($transition-base);
					}
					&:after {
						content: ""; display: block; width: 90%; height: 18px;
						position: absolute; left: 50%; bottom: 0;
						transform: translateX(-50%);
  						object-fit: contain;
  						-webkit-filter: blur(5px);
						filter: blur(5px);
						opacity: 0;
  						background-color: rgba(57, 114, 159, 0.2);
						@include transition($transition-base);
					}
				}
				.product-article__products-items-item-title{
					padding:3rem 0px;
					@include fontSize(30);
					@include lineHeight(40, 30);
					color: #303c51;
					@include fontFace($bodoni-book);

					.red{
						color: #ce1628;
					}
				}
				a:hover {
					.product-article__products-items-item-img {
						img { transform: translateY(-26px); }
						&:after { opacity: 1; }
					}
				}
			}
		}
	}

	.intro-block{
		//background: linear-gradient(transparent, #fff);
		padding-left:0px;
		padding-right:0px;

		@include media-breakpoint-up(md) {
			// svg { display: none; }
			.loadingBlobHead { visibility: hidden; }
			.renderBlobHead { visibility: visible !important; }
		}
		@include media-breakpoint-down(sm) {
			.ripple-container { display: none; }
		}

		.title{
			.red{
				color: #ce1628;
			}
		}
		.text{

			p{
				@include fontSize(18);
				@include lineHeight(28,18);
				@include clearLast;

				@include media-breakpoint-up(md){
					@include fontSize(20);
					@include lineHeight(30,20);
				}
			}

			@include media-breakpoint-up(lg){
				padding: 0 11rem;
			}
		}

		.ripple-container {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 116vw;
			// width: 100vw;
			height: 100%;
			box-shadow: 0 100px 0 0 #fff inset, 0 -100px 0 0 #fff inset, 0 100px 0 0 #fff;

			canvas {
				position: absolute;
				left: 50%;
				transform: translateZ(0) translateX(-50%);
				width: 1802px; height: 100%;
			}
		}


	}

	.intro-block-single{
		padding-top: 40px;
		@include media-breakpoint-up(md) {
			padding-top: 80px;
			svg { display: none; }
		}
	}

	.more_products{
        // padding-top: 7rem;
        position: relative;

        .row{
            margin:0px;
        }

        .products__items{
            padding-top:5.6rem;
            width:calc(100%);
            overflow: hidden;
            position: relative;

            .products__items-arrows{
                .arrows-init_arrow{
                    position: absolute;
                    top:65%;
                    left:20px;
                    transform: translateY(-50%);
                    border-radius:50%;
                    width:60px;
                    height:60px;
                    box-shadow: 0 15px 50px 0 rgba(207, 228, 244, 0.7);
                    background-image: linear-gradient(to right, #edf7ff, #ffffff);
                    border: solid 2px #ffffff;
                    z-index: 999;
                    cursor: pointer;

                    svg{
                        position: absolute;
                        top:50%;
                        left:50%;
                        transform: translate(-50%, -50%);
                    }

                    &.arrow-right{
                        left:auto;
                        right:20px;
                    }
                }
            }

            .products__items-item{
                height: 370px;
                border-right:1px solid #E2F0FA;
                text-align: center;
                position: relative;
                &:last-child{
                    border-right: 0px;
                }
                & > a {
                    display: block;
                    position: relative;
                    min-height: 100%;
                    &:hover .products__items-item-image {
                        transform: translate(-50%, -5%);
                    }
                }
                .products__items-item-top{
                    height:auto;
                    min-height: 60px;
                    @include fontFace($bodoni-book);

                    span{
                        @include fontSize(18);
                        @include lineHeight(30, 18);
                        color: #ce1628;
                    }
                    h4{
                        @include fontSize(24);
                        @include lineHeight(30, 24);
                        color: #303c51;
                    }
                }
                .products__items-item-image{
                    padding-top:4.2rem;
                    position: absolute;
                    bottom:0px;
                    left:50%;
                    transform: translate(-50%, 0%);
                    @include transition(.3s ease-in-out);
                    @include media-breakpoint-down(md) {
                        transform: translate(-50%, -10%);
                    }
					@include media-breakpoint-down(xs) {
                        transform: translate(-50%, 0%);
                    }
                }
                @include media-breakpoint-up(md) {
                    opacity: 0;
                    transform: translateY(100px);
                }

            }
        }
	}

	& + .product-article__message__simple {
        position: relative;
        z-index: 1000;
    }

	& + .goran { z-index: 1000; }
}