.fusion-body .fusion-title {
--awb-highlight-color: var(--primary_color, #65bc7b);
--awb-highlight-top-margin: 0;
--awb-highlight-width: 9;
--awb-text-color: var(--body_typography-color);
--awb-margin-top: var(--title_margin-top);
--awb-margin-right: var(--title_margin-right);
--awb-margin-bottom: var(--title_margin-bottom);
--awb-margin-left: var(--title_margin-left);
--awb-link-color: var(--link_color);
--awb-link-hover-color: var(--link_hover_color);
--awb-sep-color: var(--title_border_color);
--awb-font-size: var(--body_typography-font-size);
--awb-marquee-direction: normal;
--awb-marquee-speed: 5000ms;
--awb-marquee-translate-x: 100%;
--awb-marquee-translate-y: 0%;
margin-top: var(--awb-margin-top);
margin-right: var(--awb-margin-right);
margin-bottom: var(--awb-margin-bottom);
margin-left: var(--awb-margin-left);
display: flex;
flex-wrap: nowrap;
align-items: center;
border-bottom-color: var(--awb-sep-color);
font-size: var(--awb-font-size);
}
.fusion-body .fusion-title a {
color: var(--awb-link-color);
}
.fusion-body .fusion-title a:hover {
color: var(--awb-link-hover-color);
}
.fusion-body .fusion-title.fusion-title-size-one {
--awb-font-size: var(--h1_typography-font-size);
--awb-text-color: var(--h1_typography-color);
}
.fusion-body .fusion-title.fusion-title-size-two {
--awb-font-size: var(--h2_typography-font-size);
--awb-text-color: var(--h2_typography-color);
}
.fusion-body .fusion-title.fusion-title-size-three {
--awb-font-size: var(--h3_typography-font-size);
--awb-text-color: var(--h3_typography-color);
}
.fusion-body .fusion-title.fusion-title-size-four {
--awb-font-size: var(--h4_typography-font-size);
--awb-text-color: var(--h4_typography-color);
}
.fusion-body .fusion-title.fusion-title-size-five {
--awb-font-size: var(--h5_typography-font-size);
--awb-text-color: var(--h5_typography-color);
}
.fusion-body .fusion-title.fusion-title-size-six {
--awb-font-size: var(--h6_typography-font-size);
--awb-text-color: var(--h6_typography-color);
}
.fusion-body .fusion-title h1 > p:last-of-type,
.fusion-body .fusion-title h2 > p:last-of-type,
.fusion-body .fusion-title h3 > p:last-of-type,
.fusion-body .fusion-title h4 > p:last-of-type,
.fusion-body .fusion-title h5 > p:last-of-type,
.fusion-body .fusion-title h6 > p:last-of-type {
margin-bottom: 0;
}
.fusion-body .fusion-title .comment-reply-title {
margin: 0;
}
.fusion-body .fusion-title .comment-reply-title.title-heading-left,
.fusion-body .fusion-title h1.title-heading-left,
.fusion-body .fusion-title h2.title-heading-left,
.fusion-body .fusion-title h3.title-heading-left,
.fusion-body .fusion-title h4.title-heading-left,
.fusion-body .fusion-title h5.title-heading-left,
.fusion-body .fusion-title h6.title-heading-left,
.fusion-body .fusion-title div.title-heading-tag.title-heading-left,
.fusion-body .fusion-title p.title-heading-tag.title-heading-left {
text-align: left;
}
.fusion-body .fusion-title .comment-reply-title.title-heading-left .fontawesome-icon,
.fusion-body .fusion-title h1.title-heading-left .fontawesome-icon,
.fusion-body .fusion-title h2.title-heading-left .fontawesome-icon,
.fusion-body .fusion-title h3.title-heading-left .fontawesome-icon,
.fusion-body .fusion-title h4.title-heading-left .fontawesome-icon,
.fusion-body .fusion-title h5.title-heading-left .fontawesome-icon,
.fusion-body .fusion-title h6.title-heading-left .fontawesome-icon,
.fusion-body .fusion-title div.title-heading-tag.title-heading-left .fontawesome-icon,
.fusion-body .fusion-title p.title-heading-tag.title-heading-left .fontawesome-icon {
margin-right: 10px;
}
.fusion-body .fusion-title .comment-reply-title.title-heading-right,
.fusion-body .fusion-title h1.title-heading-right,
.fusion-body .fusion-title h2.title-heading-right,
.fusion-body .fusion-title h3.title-heading-right,
.fusion-body .fusion-title h4.title-heading-right,
.fusion-body .fusion-title h5.title-heading-right,
.fusion-body .fusion-title h6.title-heading-right,
.fusion-body .fusion-title div.title-heading-tag.title-heading-right,
.fusion-body .fusion-title p.title-heading-tag.title-heading-right {
text-align: right;
}
.fusion-body .fusion-title .comment-reply-title.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title h1.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title h2.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title h3.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title h4.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title h5.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title h6.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title div.title-heading-tag.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title p.title-heading-tag.title-heading-right .fontawesome-icon,
.fusion-body .fusion-title .comment-reply-title.title-heading-right img,
.fusion-body .fusion-title h1.title-heading-right img,
.fusion-body .fusion-title h2.title-heading-right img,
.fusion-body .fusion-title h3.title-heading-right img,
.fusion-body .fusion-title h4.title-heading-right img,
.fusion-body .fusion-title h5.title-heading-right img,
.fusion-body .fusion-title h6.title-heading-right img,
.fusion-body .fusion-title div.title-heading-tag.title-heading-right img,
.fusion-body .fusion-title p.title-heading-tag.title-heading-right img {
margin-left: 10px;
margin-right: 0;
}
.fusion-body .fusion-title .comment-reply-title img,
.fusion-body .fusion-title h1 img,
.fusion-body .fusion-title h2 img,
.fusion-body .fusion-title h3 img,
.fusion-body .fusion-title h4 img,
.fusion-body .fusion-title h5 img,
.fusion-body .fusion-title h6 img,
.fusion-body .fusion-title div.title-heading-tag img,
.fusion-body .fusion-title p.title-heading-tag img {
margin-right: 10px;
}
.fusion-body .fusion-title .comment-reply-title .fontawesome-icon,
.fusion-body .fusion-title h1 .fontawesome-icon,
.fusion-body .fusion-title h2 .fontawesome-icon,
.fusion-body .fusion-title h3 .fontawesome-icon,
.fusion-body .fusion-title h4 .fontawesome-icon,
.fusion-body .fusion-title h5 .fontawesome-icon,
.fusion-body .fusion-title h6 .fontawesome-icon,
.fusion-body .fusion-title div.title-heading-tag .fontawesome-icon,
.fusion-body .fusion-title p.title-heading-tag .fontawesome-icon {
display: inline-block;
float: none;
vertical-align: middle;
margin-left: 0;
margin-top: 0;
}
.fusion-body .fusion-title .awb-title-spacer {
max-width: 0.3em;
flex-grow: 1;
}
.fusion-body .fusion-title.fusion-title-center {
text-align: center;
}
.fusion-body .fusion-title.fusion-title-center.fusion-sep-none .title-heading-center,
.fusion-body .fusion-title.fusion-title-center.sep-underline .title-heading-center {
padding: 0;
text-align: center;
}
.fusion-body .fusion-title.fusion-sep-none {
display: block;
}
.fusion-body .fusion-title.fusion-sep-none .title-heading-left {
padding: 0;
text-align: left;
}
.fusion-body .fusion-title.fusion-sep-none .title-heading-right {
padding: 0;
text-align: right;
}
.fusion-body .fusion-title .title-sep-container {
position: relative;
height: 6px;
flex-grow: 1;
}
.fusion-body .fusion-title.sep-underline {
display: block;
padding-bottom: 10px;
width: 100%;
border-bottom: 1px solid var(--awb-sep-color);
}
.fusion-body .fusion-title.sep-underline.sep-dashed {
border-bottom-style: dashed;
}
.fusion-body .fusion-title.sep-underline.sep-dotted {
border-bottom-style: dotted;
}
.fusion-body .fusion-title.sep-underline .title-heading-right {
margin: 0;
}
.fusion-body .fusion-title.sep-underline .title-heading-left,
.fusion-body .fusion-title.sep-underline .title-heading-right {
padding: 0;
}
.fusion-body .fusion-title .title-sep {
position: relative;
display: block;
width: 100%;
border-style: solid;
border: 0 solid var(--awb-sep-color);
box-sizing: content-box;
}
.fusion-body .fusion-title .title-sep.sep-double {
height: 6px;
border-bottom-width: 1px;
border-top-width: 1px;
}
.fusion-body .fusion-title .title-sep.sep-single {
border-bottom-width: 1px;
}
.fusion-body .fusion-title .title-sep.sep-dashed {
border-bottom-style: dashed;
border-top-style: dashed;
}
.fusion-body .fusion-title .title-sep.sep-dotted {
border-bottom-style: dotted;
border-top-style: dotted;
}
.fusion-body .fusion-title .fusion-animated-texts {
visibility: hidden;
}
.fusion-body .fusion-title .fusion-animated-texts-wrapper {
position: relative;
display: inline-block;
white-space: nowrap;
width: 0;
text-align: initial;
}
.fusion-body .fusion-title .fusion-animated-text {
opacity: 0;
position: absolute;
}
.fusion-body .fusion-title.fusion-title-typeIn .fusion-animated-texts-wrapper:before {
content: "";
position: absolute;
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 90%;
width: 1px;
background-color: var(--awb-text-color);
animation: typeInCursor 1s infinite;
}
.fusion-body .fusion-title.fusion-title-clipIn span[class^="line"] {
overflow: hidden;
display: inline-flex !important;
width: 0;
}
.fusion-body .fusion-title.fusion-title-clipIn .fusion-animated-texts-wrapper:before {
content: "";
position: absolute;
top: 0;
left: auto;
right: 0;
width: 2px;
height: 100%;
background-color: var(--awb-text-color);
}
.fusion-body .fusion-title.fusion-title-highlight {
overflow: visible;
}
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text {
position: relative;
display: inline-block;
}
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text-wrapper {
position: relative;
display: inline-block;
}
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text-wrapper svg {
margin-top: var(--awb-highlight-top-margin);
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + .75em);
height: calc(100% + .75em);
transform: translate(-50%, -50%);
overflow: visible;
}
.fusion-body .fusion-title.fusion-title-highlight .fusion-highlighted-text-wrapper svg path {
stroke: var(--awb-highlight-color);
stroke-width: var(--awb-highlight-width);
fill: none;
stroke-dasharray: 1500;
stroke-linecap: round;
stroke-linejoin: round;
animation: fusion-title-highlight 10s;
}
.fusion-body .fusion-title.fusion-title-highlight.fusion-loop-on.fusion-highlight-double_underline .fusion-highlighted-text-wrapper svg path:last-child,
.fusion-body .fusion-title.fusion-title-highlight.fusion-loop-on.fusion-highlight-double .fusion-highlighted-text-wrapper svg path:last-child,
.fusion-body .fusion-title.fusion-title-highlight.fusion-loop-on.fusion-highlight-x .fusion-highlighted-text-wrapper svg path:last-child {
opacity: 0;
animation-delay: 0.7s;
}
.fusion-body .fusion-title.fusion-title-highlight.fusion-loop-on .fusion-highlighted-text-wrapper svg path {
animation-iteration-count: infinite;
animation-name: fusion-title-highlight;
}
.fusion-body .fusion-title.fusion-title-highlight.fusion-loop-off .fusion-highlighted-text-wrapper svg path {
animation-name: fusion-title-highlight-off-loop;
}
.fusion-body .fusion-title.fusion-title-highlight.fusion-highlight-circle .fusion-highlighted-text-wrapper svg {
height: calc(100% + 1.3em);
}
.fusion-body .fusion-title.fusion-title-slideInDown {
overflow: hidden;
}
.fusion-body .fusion-title.fusion-text-has-stroke {
--awb-text-stroke-size: 1px;
--awb-text-stroke-color: var(--primary_color);
}
.fusion-body .fusion-title.fusion-text-has-stroke .fusion-title-heading {
-webkit-text-stroke: var(--awb-text-stroke-size) var(--awb-text-stroke-color);
}
.fusion-body .fusion-title.fusion-has-text-overflow {
--awb-text-overflow: "ellipsis";
}
.fusion-body .fusion-title.fusion-has-text-overflow .fusion-title-heading {
overflow: hidden;
white-space: nowrap;
text-overflow: var(--awb-text-overflow);
}
.fusion-body .awb-off-canvas-wrap .fusion-title .comment-reply-title,
.fusion-body .fusion-modal .fusion-title .comment-reply-title,
.fusion-body #wrapper .fusion-title .comment-reply-title,
.fusion-body .awb-off-canvas-wrap .fusion-title h1,
.fusion-body .fusion-modal .fusion-title h1,
.fusion-body #wrapper .fusion-title h1,
.fusion-body .awb-off-canvas-wrap .fusion-title h2,
.fusion-body .fusion-modal .fusion-title h2,
.fusion-body #wrapper .fusion-title h2,
.fusion-body .awb-off-canvas-wrap .fusion-title h3,
.fusion-body .fusion-modal .fusion-title h3,
.fusion-body #wrapper .fusion-title h3,
.fusion-body .awb-off-canvas-wrap .fusion-title h4,
.fusion-body .fusion-modal .fusion-title h4,
.fusion-body #wrapper .fusion-title h4,
.fusion-body .awb-off-canvas-wrap .fusion-title h5,
.fusion-body .fusion-modal .fusion-title h5,
.fusion-body #wrapper .fusion-title h5,
.fusion-body .awb-off-canvas-wrap .fusion-title h6,
.fusion-body .fusion-modal .fusion-title h6,
.fusion-body #wrapper .fusion-title h6,
.fusion-body .awb-off-canvas-wrap .fusion-title div.title-heading-tag,
.fusion-body .fusion-modal .fusion-title div.title-heading-tag,
.fusion-body #wrapper .fusion-title div.title-heading-tag,
.fusion-body .awb-off-canvas-wrap .fusion-title p.title-heading-tag,
.fusion-body .fusion-modal .fusion-title p.title-heading-tag,
.fusion-body #wrapper .fusion-title p.title-heading-tag {
flex-grow: 0;
padding: 0;
font-size: 1em;
color: var(--awb-text-color);
}
.awb-gradient-text {
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.fusion-border-below-title {
display: block;
}
#main .post-content .fusion-border-below-title h1,
#main .post-content .fusion-border-below-title h2,
#main .post-content .fusion-border-below-title h3,
#main .post-content .fusion-border-below-title h4,
#main .post-content .fusion-border-below-title h5,
#main .post-content .fusion-border-below-title h6 {
padding-left: 0;
padding-right: 0;
}
.fusion-border-below-title .title-sep-container {
display: none;
height: 8px;
}
/******************************
* Title highlight animations.
*******************************/
@keyframes fusion-title-highlight {
0% {
stroke-dasharray: 0 1500;
opacity: 1;
}
15% {
stroke-dasharray: 1500 1500;
}
85% {
opacity: 1;
}
90% {
stroke-dasharray: 1500 1500;
opacity: 0;
}
100% {
stroke-dasharray: 0 1500;
opacity: 0;
}
}
@keyframes fusion-title-highlight-off-loop {
0% {
stroke-dasharray: 0 1500;
opacity: 1;
}
15% {
stroke-dasharray: 1500 1500;
}
85% {
opacity: 1;
}
90% {
stroke-dasharray: 1500 1500;
opacity: 1;
}
100% {
stroke-dasharray: 1500 1500;
opacity: 1;
}
}
/******************************
* Title rotation animations.
*******************************/
@keyframes typeIn {
from {
display: none;
}
to {
display: inline-block;
}
}
@keyframes typeOut {
from {
display: inline-block;
}
to {
display: none;
}
}
@keyframes typeInCursor {
0% {
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0.3);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
@keyframes flipOutX {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes lightSpeedIn {
0% {
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@keyframes lightSpeedOut {
0% {
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@keyframes rollIn {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
transform: translateY(0);
}
}
@keyframes slideOutUpTitle {
0% {
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
100% {
opacity: 0;
}
}
.fusion-title-animated {
visibility: hidden;
animation-fill-mode: both;
animation-duration: 1s;
}
.fusion-title-animated.typeIn,
.fusion-title-animated.typeOut {
animation-duration: 0.1s;
}
.fusion-title-animated.bounceIn {
animation-name: bounceIn;
}
.fusion-title-animated.bounceOut {
animation-name: bounceOut;
}
.fusion-title-animated.fadeIn {
animation-name: fadeIn;
}
.fusion-title-animated.fadeOut {
animation-name: fadeOut;
}
.fusion-title-animated.flipInX {
animation-name: flipInX;
}
.fusion-title-animated.flipOutX {
animation-name: flipOutX;
}
.fusion-title-animated.lightSpeedIn {
animation-name: lightSpeedIn;
animation-timing-function: ease-out;
}
.fusion-title-animated.lightSpeedOut {
animation-name: lightSpeedOut;
animation-timing-function: ease-in;
}
.fusion-title-animated.rollIn {
animation-name: rollIn;
}
.fusion-title-animated.rollOut {
animation-name: rollOut;
}
.fusion-title-animated.typeIn {
animation-name: typeIn;
}
.fusion-title-animated.typeOut {
animation-name: typeOut;
}
.fusion-title-animated.slideInDown {
animation-name: slideInDown;
}
.fusion-title-animated.slideOutUp {
animation-name: slideOutUpTitle !important;
}
.fusion-title-animated.zoomIn {
animation-name: zoomIn;
}
.fusion-title-animated.zoomOut {
animation-name: zoomOut;
}
.fusion-title-marquee .fusion-title-heading {
display: flex;
overflow: hidden;
white-space: nowrap;
}
.fusion-title-marquee .awb-marquee-content {
padding: 0 0.2em;
animation: marquee var(--awb-marquee-speed) linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(var(--awb-marquee-translate-x));
}
}
