@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-ut/alkalmazasok/lp/uzleti-vezetekes-net-fejlec-M31-231114-inwb-b/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; } }