How can I make it so that the box-shadow transforms from left to right without adding the transform effect to the text itself.
This text will change sizes depending on the content so the box-shadow needs to be adjusted accordingly.
Currently my code looks like this.
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
/*box-shadow: inset 0 -1.3vw 0 0 #00f9ff; OLD SCRIPT*/
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
animation: stretchRight;
-webkit-animation: stretchRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="test1">hello darkness my old</div>
</div>
</div>
</body>
</html>
What you want to do is use a pseudo element that you can animate.
I've added the animation to the hover state for better testing
body {
background-color: #FFFFFF;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
display: block;
width: 85%;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
a, a:visited, a:hover {
position: relative;
/*display: block; this makes the whole line justified*/
-ms-text-align-last: justify;
-moz-text-align-last: justify;
text-align-last: justify;
text-decoration: none;
color: #000000;
}
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
}
#test1 a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
content: "";
background: #00f9ff;
transition: width .2s ease-in-out;
}
#test1 a:hover:after {
width: 100%;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="test1">hello darkness my old</div>
</div>
</div>
</body>
</html>
If you want to use animation and also the same box-shadow . Make a pseudo element with the same width,height,box-shadow as the #test1 div. Also scale it to 0 at first, and then apply the animation to it.
Using animation instead of transition will let you activate the animation on page load, not on an event like hover focus etc. Which is what i think you want
see snippet below
#test1 {
display: inline-block;
height: auto;
width: auto;
visibility: visible;
font-family: "Times New Roman", Times, serif;
text-align: center;
line-height: 7.5vw;
margin: 0;
font-size: 7.7vw;
font-weight: bold;
position: relative;
}
#test1:before {
content: "";
box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform: scaleX(0);
transform-origin: left;
animation-name: stretchRight;
animation-delay: 0.5s;
animation-duration: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
z-index:-1;
}
a {
text-decoration: none;
}
#keyframes stretchRight {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
<div class="container">
<div id="test1">
hello darkness my old
</div>
</div>
Related
I have a HTML form with some questions and a select tag for the answers.
I'd like to explain those answers with a tooltip.
HTML
<div id="domanda">
<div class="help-tip">
<p> some text</p></div>
This is the question:
</div><div id="scelte">
<select name="finalita">
<option value="1">Answer 1</option>
<option value="2">Answer 2</option>
</select></div>
CSS
#domanda{
font-size: 18px;
}
#scelte{
margin-bottom: 30px;
}
.help-tip{
display: inline-block;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: pointer;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 800px;
position: right;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 15px;
line-height: 1.4;
}
.help-tip p:before{ /* The pointer of the tooltip */
display: none;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}
/* CSS animation */
#-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}
100% {
opacity:100%;
transform: scale(1);
}
}
#keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}
The issue is that is showing also what's under the tooltip paragraph as you can see here
This is the picture when the mouse is not hovering
I spent a while tryin to fix it but without success. What's wrong with my css?
Adding position: relative; to the .help-tip:hover p fixed it.
Thanks to vssadineni
Good Morning,
I have this line of code:
<div class="navigation">
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div>
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div></div>
What I am trying to do is have the help-tip div go right next to the link. The paragraph appears when you put your mouse over the help-tip div. I am looking to get the paragraph to go directly under the help-tip icon in short of an overlay style. When I remove the position absolute for the both elements the icon goes right next to the icon and the paragraph goes under the icon, but it creates a massive amount of space.
Here is my css
.help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before{ /* The pointer of the tooltip */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}
/* CSS animation */
#-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}
100% {
opacity:100%;
transform: scale(1);
}
}
#keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}
and here is a jfiddle
https://jsfiddle.net/13275tvz/1/
Need some HTML and CSS Fix
When you are making the element position absolute, make sure it's parent have the position relative property.
HTML
<div class="navigation">
<div class="link-container">
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div>
</div>
<div class="link-container">
<a href="~/Uploads/TimeSlotTemplate.xlsx" download>Download Upload Template</a> <div class="help-tip"> <p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div></div>
</div>
CSS
.help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.link-container{
position:relative;
display:inline-block;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before{ /* The pointer of the tooltip */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}
/* CSS animation */
#-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}
100% {
opacity:100%;
transform: scale(1);
}
}
#keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}
Style Accordingly..
Link for reference
hope this helps..
you need change position to relative, display to inline-block and desmiss top, right.
.help-tip {
position: relative;
/* top: 18px; */
/* right: 18px; */
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
display: inline-block;
}
I am developing interactive map. I have svg vector map itself and different buttons(divs with link inside), styled as circles. Vector, buttons and pop-ups are nested in div "map". The click on button link opens the pop-up with text. The problem is: I cannot center-align the link text on a button.Text is centered, but sticks at the top of the button. I have tried to nest link inside button with same styling as my "div variant" has now - that is the only way i get normal centered link texts. But such way is invalid - doesnt work for IE and moz
.button-my{width:25px;
height:25px;
border-radius: 50%;
text-decoration:none;
background: #FFC651 !important ;
text-align: center;
color: #FFC651 !important;
font-family: 'Roboto', sans-serif !important;;
font-size: 20%;
top: 34%;
left: 49%;
position: absolute;
margin: 0 !important;
padding: 0 !important;
border: none !important;
-webkit-animation: rainbow 2s infinite;}
#-webkit-keyframes rainbow {
0% {opacity: 1}
50% {opacity: 0.5}
100% {opacity: 1}
}
.button-my:hover {
transform: scale(4);
transition: all .5s ease-in-out;
z-index: 5;
-webkit-animation: none;
}
.my{
display: inline-block;
top: 33%;
left: 45%;
background-color: #00C3D1;
opacity: 0.5;
position: absolute;
padding: 0,5%;
visibility: hidden;
opacity: 0;
width:10%;
border-radius: 5%;
transition: opacity 800ms;
z-index: 5;
}
.my:target {
visibility: visible;
opacity: 0.9;
}
a{
text-decoration: none;
color: white !important;
padding: 0 !important;
text-align: center !important;
margin: auto;
}
a:hover{
text-decoration: underline;
}
div{
z-index: 5;
}
.map{
position: relative;
margin-left: auto;
margin-right: auto;
}
<div class="map"><img src="../img/graph.svg">
<div class="button-my">Text</button>
<div class="my" id="my"><a href="
http://www.my.com" target="_blank"><h1>Random pop-up text</h1>
</a>
<a class="close" href="#">×</a>
</div></div>
You need to either increase the line-height to 25px so it fills the height of the button, or increase the top padding to push the text down into position.
You should almost always avoid using height in CSS. In this case, it's better to change the height of the contents to achieve the height you want... then the height of the button will be determined from that (line-height + top padding + bottom padding).
.button-my {
width: 25px;
height: 25px;
line-height: 25px;
...
}
add line height to a
.button-my a{
line-height: 25px;
}
.button-my{width:25px;
height:25px;
border-radius: 50%;
text-decoration:none;
background: #FFC651 !important ;
text-align: center;
color: #FFC651 !important;
font-family: 'Roboto', sans-serif !important;;
font-size: 20%;
top: 34%;
left: 49%;
position: absolute;
margin: 0 !important;
padding: 0 !important;
border: none !important;
-webkit-animation: rainbow 2s infinite;}
#-webkit-keyframes rainbow {
0% {opacity: 1}
50% {opacity: 0.5}
100% {opacity: 1}
}
.button-my:hover {
transform: scale(4);
transition: all .5s ease-in-out;
z-index: 5;
-webkit-animation: none;
}
.button-my a{
line-height: 25px;
}
.my{
display: inline-block;
top: 33%;
left: 45%;
background-color: #00C3D1;
opacity: 0.5;
position: absolute;
padding: 0,5%;
visibility: hidden;
opacity: 0;
width:10%;
border-radius: 5%;
transition: opacity 800ms;
z-index: 5;
}
.my:target {
visibility: visible;
opacity: 0.9;
}
a{
text-decoration: none;
color: white !important;
padding: 0 !important;
text-align: center !important;
margin: auto;
}
a:hover{
text-decoration: underline;
}
div{
z-index: 5;
}
.map{
position: relative;
margin-left: auto;
margin-right: auto;
}
<div class="map"><img src="../img/graph.svg">
<div class="button-my">Text</button>
<div class="my" id="my"><a href="
http://www.my.com" target="_blank"><h1>Random pop-up text</h1>
</a>
<a class="close" href="#">×</a>
</div></div>
I don't have much experience with HTML and CSS. I've got some problems with aligning my div content. The text (Oculus Rift, Next-generation Virtual Reality) has to be in line with de mouse scroll button, in the bottom right. But the text overlaps the div above (my sticky header). I just can't get it to work. I've hosted the site over here. I want it to look like this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>InGadget | Dé site voor al uw gadget nieuws!</title>
<meta name = "keywords" content = "InGadget | Dé site voor al uw gadget nieuws!" />
<meta name = "description" content = "InGadget is dé site voor alles over gadgets." />
<meta name="viewport" content="width=device-width">
<link href="main.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/animatescroll.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
header = document.querySelector(".navbar");
if (distanceY > shrinkOn) {
classie.add(header,"scroll");
} else {
if (classie.has(header,"scroll")) {
classie.remove(header,"scroll");
}
}
});
}
window.onload = init();
</script>
<script>
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};
$(document).scroll(function() {logoSwitch();});
logoSwitch();
</script>
</head>
<body>
<div class="navbar">
<div class="container clearfix">
<a id="logo" href="index.html"></a>
<div class="nav">
Home
Nieuws
Forum
Things I ❤
Contact
</div>
</div>
</div>
<div class="header">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
<div class="mouse-icon" onclick="$('.section1').animatescroll();" style="cursor:pointer;">
<div class="wheel"></div>
</div>
</div>
</div>
<div class="section1">
Placeholder
</div>
</body>
</html>
CSS:
/* BASICS */
#font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}
#font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
}
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
/* NAVBAR */
.navbar {
width: 100%;
height: 150px;
position: fixed;
z-index: 999;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-ms-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo.png) no-repeat;
background-size: contain;
float: left;
}
.scroll #logo {
background-image: url(images/logo2.png);
}
.nav {
float: right;
right: 0px;
}
.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #ffffff;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.nav a:hover {
text-decoration: underline;
}
/* STICKY NAVBAR */
.navbar.scroll {
background-color: #ffffff;
height: 75px;
}
.navbar.scroll#logo {
width: 140px;
height: 140px;
background: transparent url(images/logo2.png) left top no-repeat;
}
.navbar.scroll .nav a {
color: #000000;
line-height: 75px; }
/* SECTIONS */
.header {
background:
linear-gradient(to top right,
rgba(255, 65, 54, 0.5),
rgba(24, 0, 255, 0.5)
),
url(nieuws/VR/images/oculusrift.jpg) fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
}
.section1 {
margin-top: 20px;
background-color: #f2f2f2;
height: 500px;
}
/* MOUSE ICON */
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
}
.mouse-icon .wheel {
-webkit-animation-name: scrolling;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-name: scrolling;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
}
.mouse-icon .wheel {
border-radius: 10px;
background: #ffffff;
width: 6px;
height: 10px;
top: 4px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#-webkit-keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
#keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}
Put the 'header-content' div inside another div with class 'header-content-container' and add this CSS:
.header-content-container {
position: absolute;
bottom: 0;
width: 100%;
}
.header-content h1{
position: absolute;
right: 20px;
bottom: 20px;
}
.mouse-icon {
position: absolute;
left: 20px;
bottom; 20px;
}
You need to position the h1 and mouseicon absolute to the bottom
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
position: absolute;
left: 10px;
bottom; 10px;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
position: absolute;
right: 10px;
bottom; 10px;
}
.header {
position:relative;
}
.header-content {
position: absolute;
bottom: 0;
right: 45px;
}
Use these styles along with your other css styles. Please Let me know if you have any other requirement.
Something like that: https://jsfiddle.net/qs1qyL9c/
.header-content {
width: 80%;
margin: auto;
position:absolute;
bottom:0;
}
I need help rotating text at the same time that the button rotates. For some reason the text is currently disappearing when I hover the mouse over the button. The text should not be disappearing; it should be rotating with the button I'm using Chrome for this project.
http://codepen.io/matosmtz/pen/oXBaQE
HTML
<body>
<div class = "container">
<section class="3d-button">
<h2>Animated Button</h2>
<p class="btn_perspective">
<button class="btn btn-3d btn-3da">Submit</button>
</p>
</section>
</div>
</body>
CSS
html, body {
font-size: 100%;
padding: 0;
margin: 0;
height: 100%;
border: 0;
}
body {
font-family: Lekton;
background: rgb(245,245,245);
}
a {
color: #888;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
height: 100%;
background: #fff;
position: relative;
}
.container > section {
margin: 0 auto;
padding: 6em 3em;
text-align: center;
}
h2 {
margin: 20px;
text-align: center;
text-transform:uppercase;
letter-spacing: 1px;
font-size: 2em;
}
.btn {
border:none;
position: relative;
background: rgb(245,245,245);
padding: 15px 40px;
display: inline-block;
text-transform: uppercase;
margin: 15px 30px;
color: inherit;
letter-spacing: 2px;
font-size: .9em;
outline: none;
-webkit-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.btn:after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.btn_perspective {
-webkit-perspective: 800px;
perspective: 800px;
display: inline-block;
}
.btn-3d {
display: block;
background: #5cbcf6;
color: white;
outline: 1px solid transparent;
transform-style: preserve-3d;
}
.btn-3d:active {
background: #55b7f3;
}
.btn-3da:after {
width: 100%;
height: 42%;
left: 0;
top: -40%;
background: #53a6d7;
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-3da:hover {
transform: rotateX(-45deg);
}
Here's the updated codepen: http://codepen.io/anon/pen/KpaGYd
Added the following code to your button:
.btn-3da:after {
z-index:1;
}
.btn-3da:hover {
position:relative;
z-index:2;
}
You can take a look into this pure CSS3 solution (works in all major web browsers: DEMO):
/*ROTATE*/
.divRotate
{
-moz-transition : all 0.8s;
-webkit-transition : all 0.8s;
-o-transition : all 0.8s;
transition : all 0.8s;
}
.divRotate:hover
{
-moz-transform : rotate(360deg);
-webkit-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
}
Add the div element to your HTML and refer the class = 'divRotate'.
Hope this may help. Best regards,