/* Copyright UX Amp - www.ux-amp.de

- not-editor.css -

________________________________________________________________________________
custom styles
*/
.only_editor {display:none !important;}

.hide {display:none;}

.o_9 {opacity:.9;}
.o_8 {opacity:.8;}
.o_7 {opacity:.7;}
.o_6 {opacity:.6;}
.o_5 {opacity:.5;}
.o_4 {opacity:.4;}
.o_3 {opacity:.3;}
.o_2 {opacity:.2;}
.o_1 {opacity:.1;}

.h1_header {height:calc(100vh - 79px);}
/*body.ux-home .h1_header {height:100vh;}*/
.h1_header .wrapper_headline {height:200px;}

body.ux-home .sticky_box {margin-top:-79px; background:rgba(255,255,255,.0); transition: .3s !important;}
body.ux-home.scrollpoint .sticky_box {background:rgba(255,255,255,1);}

.header_slider {height:calc(100vh + 1px); min-height:300px; overflow:hidden; background:#000; position:relative;}
.wrapper_headline {position:absolute; bottom:0; top:0; height:200px; left:0; right:0; margin:auto; text-align:center; color:#fff; z-index:5;}

.img_cover, .img_cover img {object-fit:cover; width:100%; height:100%; object-position:center; position:absolute; left:0; top:0;}

.move_img {left:0; animation: moveit 50s infinite; transform:scale(1);}
@-webkit-keyframes moveit {
  0% {
    transform:scale(1); left:0;
  }
  40% {
    transform:scale(1.1); left:0;
  }
  60% {
    transform:scale(1.1); left:20px;
  }
  100% {
    transform:scale(1); left:0;
  }
}

/* Banner */
.content_step_1,
.content_step_2,
.content_step_3,
.content_step_4 {opacity:0;}
.content_step_1 .h1,
.content_step_2 .h1,
.content_step_3 .h1,
.content_step_4 .h1 {transform:scale(0); opacity:0;}
.content_step_1 .zoom_element,
.content_step_2 .zoom_element,
.content_step_3 .zoom_element,
.content_step_4 .zoom_element {transform:scale(0); opacity:0;}

.counter.step_1 .content_step_1,
.counter.step_2 .content_step_2,
.counter.step_3 .content_step_3,
.counter.step_4 .content_step_4 {opacity:1;}
.counter.step_1 .content_step_1 .h1,
.counter.step_2 .content_step_2 .h1,
.counter.step_3 .content_step_3 .h1,
.counter.step_4 .content_step_4 .h1 {transform:scale(1); opacity:1;}
.counter.step_1 .content_step_1 .zoom_element {transform:scale(2.9); opacity:1;}
.counter.step_2 .content_step_2 .zoom_element {transform:scale(2.5); opacity:1;}
.counter.step_3 .content_step_3 .zoom_element {transform:scale(2.2); opacity:1;}
.counter.step_4 .content_step_4 .zoom_element {transform:scale(2.8); opacity:1;}

.img_teaser_box {position:relative; height:200px;}
.img_teaser_box figure figcaption {position:absolute; bottom:0; left:0; margin:0; padding:0; width:100%;}
/*.img_teaser_box figure a img {opacity:.7;}*/
.img_teaser_box figure figcaption a {color:#fff !important;}
.img_teaser_box figure figcaption a .fa {margin-left:10px;}
.img_teaser_box:hover figure figcaption a .fa {margin-left:25px;}
.img_teaser_box_link a {padding:15px; display:block; background:linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.5) 100%);}

.var_2 .img_teaser_box figure figcaption a {color:var(--dark) !important;}
.var_2 .img_teaser_box_link a {background:none; text-decoration:none !important;}

/* custom not editor */
.h1_header {/*height:calc(100vh - 158px);*/}
.header_slider {/*height:calc(100vh - 79px);*/}

.sticky_logo img {position:absolute; left:-20px; height:58px; top:11px; opacity:0; transition:.5s !important;}
.scrollpoint .sticky_logo img {opacity:1; left:50px;}

/* banner 2 */
.ux-slider-container {background:#fff; position: relative; width: 100vw; height:calc(100vh - 80px); overflow: hidden;}
.ux-home .ux-slider-container {height:100vh;}
        .slide-group { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
        .slide-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; z-index: 1; transform: scale(1.3); filter: brightness(100%); transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s, filter 2s ease; will-change: transform, filter;}
        .content-layer { position: absolute; bottom: 200px; left: 80px; z-index: 10; opacity: 0; transition: opacity 0.8s; padding-left: 20px; margin-left: -20px; }
        .text-wrapper { overflow: hidden; margin-bottom: 5px; padding-right: 30px; margin-right: -30px; }
        .title {border-radius:15px; background:rgba(53,162,122,0); backdrop-filter: blur(0px); padding:5px 20px; color:#fff; margin:0; font-weight: bold; text-transform: uppercase; line-height: 1; display: inline-block; transform: translateY(100%); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
        .subtitle {border-radius:15px; background:rgba(53,162,122,0); backdrop-filter: blur(0px); padding:5px 20px; color:#fff; letter-spacing: 4px; opacity: 0; display: inline-block; transition: opacity 0.6s ease-in-out; }
        
        @keyframes driftTitle { from { translate: 0px 0; } to { translate: 25px 0; } }
        @keyframes driftSubtitle { from { translate: 0px 0; } to { translate: -25px 0; } }
        
        .slide-group.active .title { transform: translateY(0); transition-delay: 0.6s; animation: driftTitle 6s linear forwards; animation-delay: 0.8s; }
        .slide-group.active .subtitle { opacity: 1; transition-delay: 1.2s; animation: driftSubtitle 7s linear forwards; animation-delay: 1s; }
        .slide-group.exit .title { transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.5, 0, 0.75, 0); animation: driftTitle 6s linear forwards paused; }
        .slide-group.exit .subtitle { opacity: 0; transition: opacity 0.3s ease; animation: driftSubtitle 8s linear forwards paused; }
        .slide-group.active .slide-img img { filter: brightness(80%) !important; opacity: 1 !important; z-index: 3; transform: translateX(0) scale(1.1) !important; transition: transform 1s cubic-bezier(0.1, 0.2, 0.36, 1), opacity 0.6s, filter 1.5s ease-out !important; }
        .slide-group.active .content-layer { opacity: 1; }
        .slide-group.exit .slide-img img {filter: brightness(100%) !important; opacity: 0 !important; z-index: 2; transform: translateX(0%) scale(0.9) !important; transition: transform 2s cubic-bezier(0.99, 0.57, 0.56, 1), opacity 2s ease-in-out, filter 2s ease-in !important; }
        .slide-group.from-left .slide-img img { transform: translateX(-150%) scale(1.5); opacity: 1; filter: brightness(100%); }
        
        .nav-ui { position: absolute; bottom:130px; left: 80px; z-index: 15; height:40px; margin:auto;}
        .progress-box {width: 50px; height: 2px; background: rgba(255,255,255,.2); position: absolute; top:20px; left:50px; overflow: hidden; border-radius: 2px; }
        .progress-bar { height: 100%; width: 0%; background: rgba(255,255,255,1); }
        .arrow-wrapper { display: flex; gap: 70px; }
        .arrow { cursor: pointer; position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; }
        .arrow:hover { transform: scale(1.2); }
        .arrow::after { content: ''; position: absolute; width: 25px; height: 25px; border-top: 2px solid #fff; border-right: 2px solid #fff; border-radius: 2px; }
        .arrow-prev::after { transform: rotate(-135deg); left: 15px; }
        .arrow-next::after { transform: rotate(45deg); right: 15px; }
        .ux-slider-container.locked .arrow { pointer-events: none; opacity: .5; }

/* buy element*/
.wrapper_buy_element:hover .wrapper_buy_element_item {opacity:1;}
.wrapper_buy_element:hover .wrapper_buy_element_item:hover {opacity:1; transform: scale(1.05); box-shadow: 0 0 10px rgba(0, 0, 0, .0);}

/* testimonial */
.testimonial_box, .img_gallery_box {border-radius: 8px; width: 100%; position: absolute; top: 0; left: 0; transition: all 0.5s ease-in-out; opacity: 0; transform: scale(0.8); pointer-events: none; overflow:hidden; padding:80px 100px; border:none; min-height: 370px; box-sizing: border-box;}
.testimonial_box.active, .img_gallery_box.active {opacity: 1; transform: scale(1); z-index: 2; pointer-events: auto;}
        .testimonial_box.next, .img_gallery_box.next {opacity: 0.4; transform: scale(0.8) translateX(75%); z-index: 1;}
        .testimonial_box.prev, .img_gallery_box.prev {opacity: 0.4; transform: scale(0.8) translateX(-75%); z-index: 1;}
.ux-wp-block-buttons {display: flex; justify-content: center; align-items: center; margin-top:0 !important; gap: 30px;}
        .ux-wp-block-button a {color:var(--brand) !important; cursor: pointer; font-size: 30px !important; user-select: none; transition: transform 0.2s !important; text-decoration: none !important; display: inline-block; padding: 5px 15px;}
        .ux-wp-block-button a:hover {transform: scale(1.5);}
        .ux-wp-block-button a:focus {outline:none; transform: scale(1.5);}
.wrapper_testimonial .max_width_small {width: 600px; height: 410px; position: relative; perspective: 1000px;}
.bg_dark_important .ux-wp-block-button a,
.bg_brand_important .ux-wp-block-button a,
.bg_img_1_target .ux-wp-block-button a {color:#fff !important;}

.bg_img_1_target .wrapper_testimonial {background:none !important; padding:0 !important;}
.bg_img_1_target .testimonial_box.next, .bg_img_1_target .testimonial_box.prev, .img_gallery_box.next, .img_gallery_box.prev {opacity: 0.8;}

.testimonial_box::before {content: url("/wp-content/themes/starterkit/assets/ux-amp/icons/google_color.svg"); position:absolute; top:30px; left:30px; width:40px;}

#app_content div.ux_handle:first-child .brand_padding_lg {padding-top:200px !important; padding-bottom:80px !important;}

/* tab teaser */
.active_tab_teaser_item_nav {height:100%; width:3px; background:var(--brand); position:absolute; left:0; top:0; bottom:0; opacity:0; transition: .3s;}
.tab_teaser_content_item { position: absolute; width: 100%; top: 0; left: 0; opacity: 0; transform: translateY(100px) scale(1); transition: transform 0.5s ease-out, opacity 0.5s ease-out; pointer-events: none; height: 100%; }
.tab_teaser_subcontent {text-align:center; padding:50px; position:absolute; top:50px; opacity: 0; transition: opacity 0.6s ease-out; width:100%;}
.wrapper_tab_teaser_img_2 img {position:absolute; bottom:-134px; right: 50px; height:340px; z-index: 5; opacity: 0; transition: opacity 0.6s ease-out;}

/*
________________________________________________________________________________
responsive design
*/
@media (min-width: 1800px) {

}
@media (min-width: 1100px) {
	.hide_nav #app_nav {display:none;}

}
@media (max-width: 1100px) {
	.header_slider {height:calc(100vh - 80px);}
	.wrapper_headline {height:100px;}
	.h1_header {height: calc(100vh - 80px);}
	.h1_header .wrapper_headline {height:50px !important; left:0 !important; right:0 !important; text-align:center !important; margin:auto;}
	
	.counter.step_1 .content_step_1 .zoom_element {transform:scale(1.8); opacity:1; right:100px;}
	.counter.step_2 .content_step_2 .zoom_element {transform:scale(1.7); opacity:1; right:100px;}
	.counter.step_3 .content_step_3 .zoom_element {transform:scale(1.2); opacity:1; right:50px;}
	.counter.step_4 .content_step_4 .zoom_element {transform:scale(1.8); opacity:1; right:100px;}
	
	.counter {height: calc(100vh - 160px);
  position: relative;
  top: 80px;}

	/*
	.move_img {left:0; animation: moveit 50s infinite; transform:scale(.8);}
@-webkit-keyframes moveit {
  0% {
    transform:scale(.8); left:0;
  }
  40% {
    transform:scale(.9); left:0;
  }
  60% {
    transform:scale(.9); left:20px;
  }
  100% {
    transform:scale(.9); left:0;
  }
}
*/	
	.teaser_nav .box_small {padding:25px 30px; width:50% !important; max-width:50% !important; flex:none; height:80px; border: solid 1px rgba(255,255,255,.3); border-bottom: solid 2px rgba(255,255,255,.3); border-top:none; background:rgba(0,0,0,.6); backdrop-filter: blur(7px);}
	.teaser_nav .fa {display:none;}
	.teaser_nav h3 {font-size:17px;}
	.counter.step_1 .teaser_nav .teaser_nav_1 {background:rgba(227,0,120,.7); backdrop-filter: blur(4px);}
.counter.step_2 .teaser_nav .teaser_nav_2 {background:rgba(211,54,51,.8); backdrop-filter: blur(4px);}
.counter.step_3 .teaser_nav .teaser_nav_3 {background:rgba(69,125,199,.8); backdrop-filter: blur(4px);}
.counter.step_4 .teaser_nav .teaser_nav_4 {background:rgba(69,70,70,.8); backdrop-filter: blur(4px);}
	
body.ux-home.scrollpoint .sticky_box, body.scrollpoint .sticky_box {background:rgba(255,255,255,0);}
	
.content-layer { position: absolute; bottom:auto; top:calc(50vh - 50px); left:0; right:0; z-index: 10; opacity: 0; transition: opacity 0.8s; padding-left:0; margin:auto;text-align:center; }
.nav-ui { position: absolute; bottom:130px; left:0; right:0; z-index: 15; height:40px; margin:auto; width:152px;}
	@keyframes driftTitle { from { translate: 0px 0; } to { translate: 0px 0; } }
    @keyframes driftSubtitle { from { translate: 0px 0; } to { translate: 0px 0; } }
.ux-slider-container {height: calc(100vh - 0px);}
	
	/* testimonial */
	.wrapper_testimonial .max_width_small {width: 85%; height: 380px;}
            .testimonial_box, .img_gallery_box {padding: 60px 40px; min-height: 320px;}
            .testimonial_box.next, .img_gallery_box.next {opacity: 0 !important; transform: scale(0.8) translateX(55%);}
            .testimonial_box.prev, .img_gallery_box.prev {opacity: 0 !important; transform: scale(0.8) translateX(-55%);}
	
	/* tab teaser */
	.wrapper_tab_teaser_img_2 img,
    .tab_teaser_content_item.active .wrapper_tab_teaser_img_2 img,
	.tab_teaser_content_item.exit .wrapper_tab_teaser_img_2 img {height: 260px; left:0; right:0; margin:auto;}
	.wrapper_tab_teaser_img_2 img {bottom:-100px;}
	

  }
@media (max-width: 880px) {
	.wrapper_tab_teaser_img_2 img,
    .tab_teaser_content_item.active .wrapper_tab_teaser_img_2 img,
	.tab_teaser_content_item.exit .wrapper_tab_teaser_img_2 img {height: 200px; left:0; right:0; margin:auto;}
	.wrapper_tab_teaser_img_2 img {bottom:-78px;}
	.testimonial_box::before {top:20px; left:20px; width:20px;}

  }