MIJ owl test

<style><!--
.top-products-wrapper {display:none;}

.homepage-box.welcome-wrapper {
margin-top: 0px;
margin-bottom: 38px;
padding-top: 0px;
padding-bottom: 38px;
}
.welcome-wrapper {width:100%;}
.homepage-texts-wrapper {overflow:hidden;}
.homepage-texts-wrapper>div {margin:0px;}
.owl-carousel {
width: 100%;
height:100%;
margin: auto;
}

.owl-dots {display: none;}

.navigation-buttons a[data-target="cart"] {
color: #ffffff;
background-color: transparent;
}

.owl-item {margin-bottom: 30px;}
.owl-item h4 {
position: absolute;
left: 10%;
top: 10%;
font-size: 200px;
font-weight: 900;
font-weight: 900;
text-transform: uppercase;
}
.owl-item h4 + p {
position: absolute;
left: 70%;
bottom: 40%;
max-width: 350px;
transform-origin: center bottom;
transform: translateX(-50%) rotate(-90deg);
}
.owl-item .owl_link {
position: absolute;
background: #222;
color: #fff;
font-size: 16pt;
padding: 18px 32px;
left: calc(50% - 78px);
top: 80%;
}
.owl-item:hover .owl_link {
background: #e3032d;
}
@media (max-width: 768px) {
.owl-carousel {max-width: 100%;}
}
@media (min-width: 768px) and (max-width: 992px) {
.owl-carousel {max-width: 720px;}
}
@media (min-width: 992px) and (max-width: 1200px) {
.owl-carousel {max-width: 900px;}
}
@media (min-width: 1200px) {
.owl-carousel {width: calc(100vw - 50px);}
}
--></style>
<div class="owl-carousel owl-theme">
<div class="item">
<h4>Earth<br />Black</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tempor. Et harum quidem rerum facilis est et expedita distinctio. Integer malesuada. Donec vitae arcu. Nam quis nulla.</p>
<a class="owl_link" href="#">Click me!</a>
<p><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res2020/MIJ 20/f4f4f4.png' alt="f4f4f4" /></p>
</div>
<div class="item">
<h4>Earth<br />Black</h4>
<p>Lorem ipsum</p>
<a class="owl_link" href="#">Click me!</a>
<p><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res2020/MIJ 20/f4f4f4.png' alt="f4f4f4" /></p>
</div>
<div class="item">
<h4>Earth<br />Black</h4>
<p>Lorem ipsum</p>
<a class="owl_link" href="#">Click me!</a>
<p><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res2020/MIJ 20/f4f4f4.png' alt="f4f4f4" /></p>
</div>
<div class="item">
<h4>Earth<br />Black</h4>
<p>Lorem ipsum</p>
<a class="owl_link" href="#">Click me!</a>
<p><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res2020/MIJ 20/f4f4f4.png' alt="f4f4f4" /></p>
</div>
</div>

<script>$('.owl-carousel').owlCarousel({
loop:true,
center: true,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:false,
autoplay:true,
autoplayTimeout:4000,
autoplayHoverPause:true
},
700:{
items:1,
nav:false,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true
},
1200:{
items:1,
nav:false,
loop:true,
autoplay:true,
autoWidth:true,
autoplayTimeout:40000000,
autoplayHoverPause:true
}
}
})</script>
<script>$( ".homepage-texts-wrapper" ).insertAfter( "#header" );</script>