// tpl-proizvodi-section

.tpl-proizvodi-section{

	.ripple-container {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		@include media-breakpoint-down(sm) {  
			height: 100%;
			top: 0;
			left: 0;
			background: url($theme-url + 'assets/images/masks/earthlayers1.jpg') no-repeat center 14% / 100% auto;
		}
	}

	@include media-breakpoint-up(md) {  
        [id^="paraShowVZ"] {
            .paraShowVZPart1, .paraShowVZPart2, .paraShowVZPart3 {
                transform: translateY(50px);
                opacity: 0;    
            }
        }
    }
	
    .org-container{
        width: 100%;
        max-width: 1180px;
		margin:0px auto;	

        .row{
            margin:0px;
		}
	}

	.dot-link::before{
		// top: calc(50% - 1px) !important;
	}
	
	.products__block{
		.text{
			p{
				@include fontSize(18);
				@include lineHeight(28,18);
				@include clearLast;

				@include media-breakpoint-up(md){
					width:71%;
					@include fontSize(20);
					@include lineHeight(30,20);
				}
			}
		}
		.proizvodi-varijacije{
			margin-top:30px;
		}
		.products__block-awards{
			margin-top:20px;

			img{
				// width:100%;
				max-width: 402px;
			}
		}
	}

	.intro-block{
		background: linear-gradient(transparent, #fff);
		margin-top: 50px;

		@include media-breakpoint-up(md) {  
			&[id^="paraShow"] {
				.paraShowPart1, .paraShowPart2 {
					transform: translateY(50px);
					opacity: 0;    
				}
			}
		}
		
		.title{

			&:after{
				content: "";
				width: 80px; height: 2px;
				position: absolute;
				display: block;
				left: 50%;
				transform: translateX(-50%);
				bottom: -3rem;
				background: $colorBabyBlue;
			}
		}
		.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;
			}
		}

		.proizvod-image{
			text-align: center;
			position: relative;
			z-index: 9;
			img{
				max-width: 40%;
				width: auto;
			}

			margin-bottom: 6rem;

			@include media-breakpoint-up(md){
				margin-bottom: 8rem;

				img{
					max-width: 100%;
				}
			}
		}

		.image-decoration{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 35px;
			width: 100%;
			text-align: center;
			z-index: 0;
			img{
				max-width: 100%;
				width: auto;
			}
		}

		
	}


	.proivodi-list{
		padding-top: 6rem;
		position: relative;
		z-index: 100;


		@include media-breakpoint-up(md){
			padding-top: 10rem;
		}

		.proizvod-item{
			position: relative;
			min-height: 960px;

			.sup-title{
				color: $colorLightBlue;
			}

			.title{
				margin-bottom: 2rem;
				@include transition($transition-base);
				@include media-breakpoint-up(md){
					margin-bottom: 4rem;
				}
			}

			.titleLink:hover {
				.title {
					color: #ce1628;
				}
			}

			.proizvod-info{
				.row{
					height: 100%;

					> div {
						align-self: center;
					}
				}
			}

			.image-mask{
				display: block;
				background: $colorBabyBlue;
				margin-bottom: 2rem;
				overflow: hidden;
				
				

				.img {
					position: absolute; width: 100%; height: 100%;
					left: -2px; top: -20%; 
					background-repeat: no-repeat;
					background-position: center;
					box-shadow: 0 0 0 2px #fff;
				}

				svg, .canvas-wrapper{
					position: relative;
					margin-bottom: -10px;

					&.blur-svg{
						filter: blur(20px);
	    				opacity: 0.6;
						position: absolute;
					}

				}

				.image-mask-mobile{
					display:none;
					img{
						width:100%;
					}
				}

				@include media-breakpoint-up(md){
					width: calc(50% - 3rem);
					display: block;
					position: absolute;
					top: 0;
					height: 960px;
					margin-bottom: 0rem;


					svg, canvas{
						position: absolute;
						height: 961px; // 1 pixel higher for svg render bug

					}
				}

				&.mask-left{
					transform: translateX(-5rem);

					@include media-breakpoint-up(md){
						left: 0;
						svg, canvas{
							right: 0;
						}
					}
				}

				&.mask-right{
					transform: translateX(5rem);
					@include media-breakpoint-up(md){
						right: 0px;
						svg, canvas{
							left: 0;
						}
					}
				}
			}

			.parallax-window {

				@include media-breakpoint-up(md){
					min-height: 400px;
				    background: transparent;
				}
			}

		}

		.proizvodi-varijacije{
			.section-title{
				@include fontSize(12);
				@include lineHeight(13,12);
				color: $colorGray;
				text-transform: uppercase;
				margin-bottom: .8rem;


				@include media-breakpoint-up(md){
					@include fontSize(14);
					@include lineHeight(16,14);
				}
			}

			ul {
				padding: 0;
				list-style-type: none;
				a.dot-link{

					@include media-breakpoint-up(md){
						transform: translateX(-22px);
					}
				}
			}
		}
	}
}