/**Typeo CSS Start**/
* {
box-sizing: border-box;
}
body {
margin: 0px;
background-color: #ffffff;
}
.tooltips {
max-width: 1000px;
margin: 50px auto;
width: 100%;
box-shadow: #e2e2e2 0 0 6px;
padding: 50px;
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
}
/**Typeo CSS End**/
/**Tooltip Left Start**/
.tooltip-left {
position: relative;
padding: 5px 15px 8px 15px;
background-color: #000;
color: #fff;
border-radius: 4px;
}
.tooltip-left:after {
content: '';
width: 0;
height: 0;
border-width: 7px 7px 0 7px;
border-color: #000000 transparent transparent transparent;
border-style: solid;
position: absolute;
bottom: -7px;
left: 12%;
}
/**Tooltip Left End**/
/**Tooltip Center Start**/
.tooltip-center {
position: relative;
padding: 5px 15px 8px 15px;
background-color: #000;
color: #fff;
border-radius: 4px;
}
.tooltip-center:after {
content: '';
width: 0;
height: 0;
border-width: 7px 7px 0 7px;
border-color: #000000 transparent transparent transparent;
border-style: solid;
position: absolute;
bottom: -7px;
left: calc(50% - 7px);
}
/**Tooltip center End**/
/**Tooltip Right Start**/
.tooltip-right {
position: relative;
padding: 5px 15px 8px 15px;
background-color: #000;
color: #fff;
border-radius: 4px;
}
.tooltip-right:after {
content: '';
width: 0;
height: 0;
border-width: 7px 7px 0 7px;
border-color: #000000 transparent transparent transparent;
border-style: solid;
position: absolute;
bottom: -7px;
right: 12%;
}
/**Tooltip Right End**/
/**Hover Option Start**/
/**Button Hover Option Start**/
.tooltip-hover {
position: relative;
}
.tooltip-hover button {
padding: 15px 30px;
margin: 20px 0px;
cursor: pointer;
background-color: #29829e;
color: #fff;
border: none;
font-size: 16px;
border-radius: 4px;
}
/**Button Hover Option End**/
.tooltip-hover [class*="tooltip"] {
position: absolute;
top: -31px;
transition: 0.5s all;
opacity: 0;
}
.tooltip-hover:hover [class*="tooltip"] {
opacity: 1;
top: -21px;
}
/**Hover Option Start**/
