﻿
@keyframes bg_scale_anim {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.2);
    }
}

@keyframes timeranim {
	from {
		width: 0px;
	}
	to {
		width: 100%;
	}
}


#inwb_main_carousel_cont {
	width: 100%;
	overflow: hidden;
	padding: 0;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: TeleNeoWeb;
	font-weight: 400;
	font-kerning: normal;
	background: #f7f8f9;
}
#inwb_main_carousel_cont *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#inwb_main_carousel {
	width: 100%;
	overflow: hidden;
	padding: 0;
	position: relative;
}
.inwb_main_carousel_item{
	position:relative;
	overflow:hidden;
}
	.inwb_main_carousel_item a{
		text-decoration:none;
		font-size:0px;
		line-height:0px;
	}

.inwb_main_carousel_item_bg {
	position: absolute;
	width: 100%;
	line-height:0px;
	font-size:0px;
	z-index:10;
}
	.inwb_main_carousel_item_bg img {
		object-fit: cover;
		object-position: center center;
		display: block;
		width: 100%;
		height: 100%;
	}
	.inwb_main_carousel_item_bg video {
		width: 100%;
		height:100%;
		object-fit: cover;
	}
	.inwb_main_carousel_item_bg video.normal-bg-video {
		display:none;
	}

.inwb_main_carousel_item_bg_bottomshade {
	position: absolute;
	height: 160px;
	bottom: 0px;
	width: 100%;
	transform: rotate(-180deg);
	z-index:100;
}
.inwb_main_carousel_item_bg_custom_topshade {
	position: absolute;
	height: 160px;
	top: 0px;
	width: 100%;
	transform: rotate(-180deg);
	z-index:100;
}

.inwb_main_carousel_item_inner_cont {
	position: relative;
	height:100%;
	line-height:0px;
	font-size:0px;
	z-index:20;
	margin:0 auto;
}
	.inwb_main_carousel_item_inner_cont img{
		position:absolute;
		top:0px;
	}
	.inwb_main_carousel_item_inner_cont .prod-img-lvl1{
		z-index:20;
	}
	.inwb_main_carousel_item_inner_cont .prod-img-lvl2{
		z-index:30;
	}
	.inwb_main_carousel_item_inner_cont .prod-img-lvl3{
		z-index:40;
	}
	

.inwb_main_carousel_video_item .inwb_main_carousel_item_bg img {
	display: none;
}
.inwb_main_carousel_video_item .inwb_main_carousel_item_inner_cont img {
	display: none;
}
	
.inwb_main_carousel_nav{
	position: absolute;
	z-index:200;
	margin:0 auto;
	display:flex;
	bottom:0px;
	left: 50%;
	transform: translateX(-50%);
}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item{
		position: relative;
		background-blend-mode: lighten;
		backdrop-filter: blur(24px);
		-webkit-backdrop-filter: blur(24px);
		margin: 0px;
		min-height: 56px;
		padding: 18px 0px;
		cursor: pointer;
		transition: all 0.2s ease;
		-webkit-backface-visibility: hidden;
		flex: 1 1 0px;
		display:flex;
		justify-content:center;
		align-items:center;
		align-content:center;
		overflow:hidden;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item:first-child {
		border-radius: 8px 0px 0px 0px;
	}

	.inwb_main_carousel_nav .inwb_main_carousel_nav_item:last-child {
		border-radius: 0px 8px 0px 0px;
	}
		.inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_title{
			font-size: 14px;
			line-height: 20px;
			padding: 0px 12px;
			text-align: center;
			display:none;
			position:realtive;
		}
		.inwb_main_carousel_nav .inwb_main_carousel_nav_item.active .inwb_main_carousel_nav_item_title{
			font-weight: 900;
			font-family: TeleNeoWeb;
			font-kerning: normal;
			-webkit-backface-visibility: hidden;
		}
		.inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_timer{
			position: absolute;
			left: 0;
			bottom:0px;
			width: 0px;
			height: 2px;
			z-index: 1;
		}
		.inwb_main_carousel_nav .inwb_main_carousel_nav_item.active .inwb_main_carousel_nav_item_timer {
			width: 100%;
			animation-duration: 6500ms;
			animation-name: timeranim;
			animation-iteration-count: 1;
			animation-direction: normal;
			animation-timing-function: linear;
		}
		
	#inwb_main_carousel_cont .slick-prev, #inwb_main_carousel_cont .slick-next{
		font-size: 0;
		line-height: 0;
		position: absolute; 
		z-index:250;
		bottom: 0px;
		display: block;
		width: 44px;
		height: 48px;
		padding: 0;
		cursor: pointer;
		color: transparent;
		border: none;
		outline: none;
		background:transparent;
		background-image:url('/static-la/alkalmazasok/lp/okoswifi-lakossagi-fejlec-M31-231121-inwb-a/static/img/inwb_main_car_arrow.svg');
		background-repeat:no-repeat;
		background-position: center center;
		background-size: 6px 12px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	#inwb_main_carousel_cont .slick-prev.slick-disabled, #inwb_main_carousel_cont .slick-next.slick-disabled{
		display:none !important;
	}
	#inwb_main_carousel_cont .slick-prev:hover, #inwb_main_carousel_cont .slick-next:hover{
		
	}
	#inwb_main_carousel_cont .slick-prev{
		right:unset;
		left:20px;
	}
	#inwb_main_carousel_cont .slick-next{
		right:20px;
		left:unset;
		transform: scaleX(-1);
	}
	


/* light mode */
#inwb_main_carousel_cont.light .inwb_main_carousel_item_bg_bottomshade{
	background: linear-gradient( 180deg, rgba(24, 33, 77, 0.16) 0%, rgba(255, 255, 255, 0) 89.73%);
	transition: all 0.3s ease-out;
}
#inwb_main_carousel_cont.light .inwb_main_carousel_nav .inwb_main_carousel_nav_item {
	background: rgba(255, 255, 255, 0.5);
	color: #18214d;
	border-right: 1px solid rgba(24, 33, 77, 0.16);
	transition: all 0.3s ease-out;
}
#inwb_main_carousel_cont.light .inwb_main_carousel_nav .inwb_main_carousel_nav_item.active {
	background: radial-gradient( 72.32% 72.32% at 49.82% 110.71%, rgba(226, 0, 116, 0.4) 0%, rgba(226, 0, 116, 0) 73.44%), rgba(255, 255, 255, 0.25);
	background-blend-mode: normal, lighten;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);
	transition: all 0.3s ease-out;
}
#inwb_main_carousel_cont.light .inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_timer {
	background: #e20074;
}


/* dark mode */
#inwb_main_carousel_cont.dark .inwb_main_carousel_item_bg_bottomshade{
	background: linear-gradient( 180deg, rgba(24, 33, 77, 0.16) 0%, rgba(255, 255, 255, 0) 89.73%);
	transition: all 0.3s ease-out;
}
#inwb_main_carousel_cont.dark .inwb_main_carousel_item_bg_custom_topshade{
	background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
	transition: all 0.3s ease-out;
}
#inwb_main_carousel_cont.dark .inwb_main_carousel_nav .inwb_main_carousel_nav_item {
	background: rgba(0, 0, 0, 0.16);
	color: #fff;
	border-right: 1px solid rgba(256, 256, 256, 0.16);
	transition: all 0.3s ease-out;
}
#inwb_main_carousel_cont.dark .inwb_main_carousel_nav .inwb_main_carousel_nav_item.active {
	background: radial-gradient( 72.32% 72.32% at 49.82% 110.71%, rgba(226, 0, 116, 1.4) -2%, rgba(226, 0, 116, 0) 73.44%), rgba(0, 0, 0, 0.25);
	background-blend-mode: normal, lighten;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);
	transition: all 0.3s ease-out;
}
#inwb_main_carousel_cont.dark .inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_timer {
	background: #fff;
}

/* autoplay stopped */
#inwb_main_carousel_cont.autoPlayStopped .inwb_main_carousel_nav .inwb_main_carousel_nav_item.active .inwb_main_carousel_nav_item_timer{
	animation-duration: 0.3s !important;
}


/* 360-575 -XS */
@media only screen and (max-width: 575px) {
	#inwb_main_carousel {
		height: 496px;
	}
	.inwb_main_carousel_item {
		height: 496px;
	}
	.inwb_main_carousel_item_bg {
		height: 496px;
	}
	.inwb_main_carousel_item_bg img.xs-bg-pos-left {
		object-position: left center;
	}
	.inwb_main_carousel_item_bg img.xs-bg-pos-right {
		object-position: right center;
	}
	.inwb_main_carousel_item_bg img.xs-bg-pos-center {
		object-position: center center;
	}
	.slick-current .inwb_main_carousel_item_bg img.xs-bg-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	.inwb_main_carousel_item_inner_cont{
		width: 100%;
	}
	.inwb_main_carousel_item_inner_cont img.xs-prod-img-pos-center{
		left: 50%; 
		transform: translateX(-50%);
	}
	.inwb_main_carousel_item_inner_cont img.xs-prod-img-pos-left{
		left: 0px;
		right: unset;
	}
	.inwb_main_carousel_item_inner_cont img.xs-prod-img-pos-right{
		right: 0px;
		left: unset;
	}

	.inwb_main_carousel_item_bg video.xs-video-blur-on {
		-webkit-filter: blur(15px) brightness(50%);
		-moz-filter: blur(15px) brightness(50%);
		-o-filter: blur(15px) brightness(50%);
		-ms-filter: blur(15px) brightness(50%);
		filter: blur(12px) brightness(50%);
	}
	.inwb_main_carousel_item_bg video.xs-video-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	
	.inwb_main_carousel_nav{
		width: 100%;
		padding:0px 20px;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item {
		display:none;
		min-height: 48px;
		padding: 14px 0px;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item.active {
		display:flex;
		justify-content:center;
		align-items:center;
		align-content:center;
		border-radius: 8px 8px 0px 0px;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_title.xs-title{
		display:block;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_title{
		padding: 0px 44px;
	}
	
	/* light mode */
	#inwb_main_carousel_cont.light .inwb_main_carousel_nav .inwb_main_carousel_nav_item.active {
		background: radial-gradient( 72.32% 72.32% at 49.82% 110.71%, rgba(226, 0, 116, 0.4) 0%, rgba(226, 0, 116, 0) 73.44%), rgba(255, 255, 255, 0);
	}


	/* dark mode */
	#inwb_main_carousel_cont.dark .inwb_main_carousel_nav .inwb_main_carousel_nav_item.active {
		background: radial-gradient( 72.32% 72.32% at 49.82% 110.71%, rgba(226, 0, 116, 1.4) -2%, rgba(226, 0, 116, 0) 73.44%), rgba(0, 0, 0, 0);
	}
	
	.inwb_main_carousel_item_bg video.normal-bg-video.xs-normal-video-bg {
		display:block;
	}
	
	.inwb_main_carousel_video_item .inwb_main_carousel_item_bg img {
		display: block;
	}
	.inwb_main_carousel_video_item .inwb_main_carousel_item_inner_cont img {
		display: block;
	}
		
}

/* 576-767 - S */
@media only screen and (min-width: 576px) and (max-width: 767px) {
	#inwb_main_carousel {
		height: 496px;
	}
	.inwb_main_carousel_item {
		height: 496px;
	}
	.inwb_main_carousel_item_bg {
		height: 496px;
	}
	.inwb_main_carousel_item_bg img.s-bg-pos-left {
		object-position: left center;
	}
	.inwb_main_carousel_item_bg img.s-bg-pos-right {
		object-position: right center;
	}
	.inwb_main_carousel_item_bg img.s-bg-pos-center {
		object-position: center center;
	}
	.slick-current .inwb_main_carousel_item_bg img.s-bg-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	.inwb_main_carousel_item_inner_cont{
		width: 100%;
	}
	.inwb_main_carousel_item_inner_cont img.s-prod-img-pos-center{
		left: 50%; 
		transform: translateX(-50%);
	}
	.inwb_main_carousel_item_inner_cont img.s-prod-img-pos-left{
		left: 0px;
		right: unset;
	}
	.inwb_main_carousel_item_inner_cont img.s-prod-img-pos-right{
		right: 0px;
		left: unset;
	}

	.inwb_main_carousel_item_bg video.s-video-blur-on {
		-webkit-filter: blur(15px) brightness(50%);
		-moz-filter: blur(15px) brightness(50%);
		-o-filter: blur(15px) brightness(50%);
		-ms-filter: blur(15px) brightness(50%);
		filter: blur(12px) brightness(50%);
	}
	.inwb_main_carousel_item_bg video.s-video-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	
	.inwb_main_carousel_nav{
		width: 100%;
		padding:0px 20px;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item{
		min-height: 48px;
		padding: 14px 0px;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_title.s-title{
		display:block;
	}
	
	.inwb_main_carousel_item_bg video.normal-bg-video.s-normal-video-bg {
		display:block;
	}
	
	.inwb_main_carousel_video_item .inwb_main_carousel_item_bg img {
		display: block;
	}
	.inwb_main_carousel_video_item .inwb_main_carousel_item_inner_cont img {
		display: block;
	}
	
}

/* 768-959 - M */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#inwb_main_carousel {
		height: 532px;
	}
	.inwb_main_carousel_item {
		height: 532px;
	}
	.inwb_main_carousel_item_bg {
		height: 532px;
	}
	.inwb_main_carousel_item_bg img.m-bg-pos-left {
		object-position: left center;
	}
	.inwb_main_carousel_item_bg img.m-bg-pos-right {
		object-position: right center;
	}
	.inwb_main_carousel_item_bg img.m-bg-pos-center {
		object-position: center center;
	}
	.slick-current .inwb_main_carousel_item_bg img.m-bg-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	.inwb_main_carousel_item_inner_cont{
		width: 100%;
	}
	.inwb_main_carousel_item_inner_cont img.m-prod-img-pos-center{
		left: 50%; 
		transform: translateX(-50%);
	}
	.inwb_main_carousel_item_inner_cont img.m-prod-img-pos-left{
		left: 0px;
		right: unset;
	}
	.inwb_main_carousel_item_inner_cont img.m-prod-img-pos-right{
		right: 0px;
		left: unset;
	}

	.inwb_main_carousel_item_bg video.m-video-blur-on {
		-webkit-filter: blur(15px) brightness(50%);
		-moz-filter: blur(15px) brightness(50%);
		-o-filter: blur(15px) brightness(50%);
		-ms-filter: blur(15px) brightness(50%);
		filter: blur(12px) brightness(50%);
	}
	.inwb_main_carousel_item_bg video.m-video-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	
	.inwb_main_carousel_nav{
		width: 100%;
		padding:0px 40px;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_title.m-title{
		display:block;
	}
	
	.inwb_main_carousel_item_bg video.normal-bg-video.m-normal-video-bg {
		display:block;
	}
}

/* 960-1199 - L */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	#inwb_main_carousel {
		height: 532px;
	}
	.inwb_main_carousel_item {
		height: 532px;
	}
	.inwb_main_carousel_item_bg {
		height: 532px;
	}
	.inwb_main_carousel_item_bg img.l-bg-pos-left {
		object-position: left center;
	}
	.inwb_main_carousel_item_bg img.l-bg-pos-right {
		object-position: right center;
	}
	.inwb_main_carousel_item_bg img.l-bg-pos-center {
		object-position: center center;
	}
	.slick-current .inwb_main_carousel_item_bg img.l-bg-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	.inwb_main_carousel_item_inner_cont{
		width: calc(100% - 40px);
		min-width: 888px;
		max-width: 1107px;
	}
	.inwb_main_carousel_item_inner_cont img.l-prod-img-pos-center{
		left: 50%; 
		transform: translateX(-50%);
	}
	.inwb_main_carousel_item_inner_cont img.l-prod-img-pos-left{
		left: 0px;
		right: unset;
	}
	.inwb_main_carousel_item_inner_cont img.l-prod-img-pos-right{
		right: 0px;
		left: unset;
	}

	.inwb_main_carousel_item_bg video.l-video-blur-on {
		-webkit-filter: blur(15px) brightness(50%);
		-moz-filter: blur(15px) brightness(50%);
		-o-filter: blur(15px) brightness(50%);
		-ms-filter: blur(15px) brightness(50%);
		filter: blur(12px) brightness(50%);
	}
	.inwb_main_carousel_item_bg video.l-video-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	
	.inwb_main_carousel_nav{
		width: calc(100% - 40px);
		min-width: 888px;
		max-width: 1107px;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_title.l-title{
		display:block;
	}
	
	.inwb_main_carousel_item_bg video.normal-bg-video.l-normal-video-bg {
		display:block;
	}
	
}

/* 1200+ - XL */
@media only screen and (min-width: 1200px) {
	#inwb_main_carousel {
		height: 532px;
	}
	.inwb_main_carousel_item {
		height: 532px;
	}
	.inwb_main_carousel_item_bg {
		height: 532px;
	}
	.inwb_main_carousel_item_bg img.xl-bg-pos-left {
		object-position: left center;
	}
	.inwb_main_carousel_item_bg img.xl-bg-pos-right {
		object-position: right center;
	}
	.inwb_main_carousel_item_bg img.xl-bg-pos-center {
		object-position: center center;
	}
	.slick-current .inwb_main_carousel_item_bg img.xl-bg-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	.inwb_main_carousel_item_inner_cont{
		width: 100%;
		max-width:1108px;
	}
	.inwb_main_carousel_item_inner_cont img.xl-prod-img-pos-center{
		left: 50%; 
		transform: translateX(-50%);
	}
	.inwb_main_carousel_item_inner_cont img.xl-prod-img-pos-left{
		left: 0px;
		right: unset;
	}
	.inwb_main_carousel_item_inner_cont img.xl-prod-img-pos-right{
		right: 0px;
		left: unset;
	}

	.inwb_main_carousel_item_bg video.xl-video-blur-on {
		-webkit-filter: blur(15px) brightness(50%);
		-moz-filter: blur(15px) brightness(50%);
		-o-filter: blur(15px) brightness(50%);
		-ms-filter: blur(15px) brightness(50%);
		filter: blur(12px) brightness(50%);
	}
	.inwb_main_carousel_item_bg video.xl-video-scale-anim-on {
		animation-duration: 10s;
		animation-name: bg_scale_anim;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		transform: scale(1.2);
	}
	
	.inwb_main_carousel_nav{
		width: 100%;
		max-width:1108px;
	}
	.inwb_main_carousel_nav .inwb_main_carousel_nav_item .inwb_main_carousel_nav_item_title.xl-title{
		display:block;
	}
	
	.inwb_main_carousel_item_bg video.normal-bg-video.xl-normal-video-bg {
		display:block;
	}
}
