/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/



:root {
	--primary: #2f567f;
	--contrast: #27352f;
	--base: #ebe9e8;
	--base-2: #ebe9e8;
	--base-3: #ffffff;
	--accent: #aa8c52;	
	--highlight: #aa8c52;
}

.bg-clr {
	background: var(--base);
}

/* =============================
 HTML / BODY
================================ */
html {
	scroll-behavior: smooth;
}

body {
	background-color:#fff !important;
	min-height: 100vh;	
	animation: fadeInAnimation ease 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	line-height:1.5 !important;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* =============================================
	 LENIS
================================================ */
html.lenis,
html.lenis body {
	height: auto;
	scroll-behavior: initial;
}

html.lenis-stopped,
html.nav {
	overflow: hidden;
}

body {
	min-height: 100vh;
}

.lenis.lenis-smooth {
	scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	overflow: hidden;
}
.lenis.lenis-scrolling iframe {
	pointer-events: none;
}



/* =============================
 HEADINGS
================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--accent);
	line-height: 1;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom:1rem;
}

h1 {
	font-size: min(max(2rem, 4vw), 70px);
}

h1 span,
h2 span ,
h3 span {
	font-weight: 400 !important;
}

h2 {
	font-size: min(max(2rem, 3.5vw), 55px);
}

h2.small {
	font-size:1.7rem;
}

h3 {
	font-size: min(max(1.5rem, 2.75vw), 36px);
}

h4 {
	font-size: min(max(1.3rem, 2.0vw), 24px);
}


div,
p {
	text-wrap: pretty;
}

p {
	text-align: left;
	margin-bottom: 1rem;
	margin-top:0;
}

a,
a:link,
a:hover,
.main-navigation .main-nav ul li a {
	transition: all ease 0.5s;
}



/* =============================================
	 HEADER
================================================ */
.entry-title {
	display: none !important;
}

.site-header {
	background: var(--contrast) !important;
}

.inside-navigation {
	background: var(--contrast) !important;
	transition: all ease .3s;	
}

.sticky-navigation-transition.sticky-nav-scrolling-up {
	transition: all ease .3s;
}


/* =============================================
	 LOGO
================================================ */
.main-navigation .site-logo.mobile-header-logo img {
	height: 80px;
	padding: 5px 0 8px;
	width: auto;
}

.main-navigation.is_stuck .site-logo.mobile-header-logo img {
	height: 60px;
	transition: 0.5s all ease;
}

.main-navigation {
	background: none;
}

@media (max-width: 768px) {
	.main-navigation .site-logo.mobile-header-logo img {
		height: 60px;
	}
}

/* =============================
 FOOTER
================================ */
footer .footer-logo {
	max-width: 150px !important;
	margin: 0 auto;
	text-align:center;
}

footer .social {
	display:none;
}

footer a,
footer p {
	color:#fff;
}

footer .copyright {
	border-top: 3px #fff solid;
}

footer .connect h3 {
	font-size:24px;
	margin-bottom:1rem;
}

footer .connect p {
	max-width: 400px;
	margin:0;
}

.visuallyHidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 0;
	width: 0;
	opacity: 0;
	margin-left: -999999px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

input[type="text"], 
input[type="email"], 
input[type="tel"], 
textarea, select {
	background-color: transparent !important;
	padding: .5rem 1rem;
	border: 1px solid var(--accent);
	border-radius:2px;
	margin-bottom:-.5rem;
	color: #fff !important;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
textarea:focus {
	border: 1px solid var(--accent-2);	
	outline: none;	
	box-shadow: 0 0 18px rgba(0,0,0,.4);
	transition: box-shadow 0.2s, border-color 0.2s ease-in-out;
}

input::placeholder,
textarea::placeholder {
	color: #fff;
}

[placeholder]:focus::-webkit-input-placeholder {
	transition: opacity 0.2s 0.2s ease;
	opacity: 0;
	color: #fff;
}

input[type="submit"] {
	margin-top:2rem;
	text-transform:uppercase;
	font-weight:bold;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
	background: var(--accent-2);	
}

.wpcf7-not-valid-tip {
	margin-top: 1rem;
	color:var(--accent-2);
	font-size:.8rem;
	font-weight: 500;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
}
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0 1em;
    padding:0;
    border: 0;
	color:#fff;
	font-weight:bold;
}

.wpcf7-textarea {
	height:130px;
}


/* =============================
 NAV DESKTOP
================================ */
.inside-navigation.grid-container {
	max-width: 100%;
	padding: 0 7% !important;
}

.slideout-navigation.main-navigation {
	background: rgba(47, 86, 127, 0.9) !important;
}

.gp-icon svg {
	height: 2em;
	width: 2em;
}

.slideout-navigation.do-overlay .inside-navigation {
	display: flex;
	flex-direction: row !important;
	padding: 0 !important;
	max-width: 100% !important;
	flex-wrap: nowrap !important;
}

#generate-slideout-menu.do-overlay .slideout-menu li,
.slideout-navigation.do-overlay .inside-navigation {
	text-align: left !important;
}

#generate-slideout-menu .gb-container {
	border-top: 0;
}

.generate-slideout-menu.grid-container {
	max-width: 800px;
	margin: 0 auto;
}

#site-navigation .navigation-branding,
#sticky-navigation .navigation-branding {
	margin: 0 auto !important;
}

@media (max-width:767px) {
	.inside-navigation.grid-container {
	padding: 0 1rem !important;
}
}



/* =============================
	 NAV MOBILE
================================ */
.main-nav {
	display:none;
}


.mobile-header-navigation {
	display: block !important;
}

.inside-navigation {
	background: var(--primary);
}
.menu-toggle,
.mobile-bar-items,
.sidebar-nav-mobile {
	display: block !important;
}


#mobile-header .menu-toggle,
#mobile-header .mobile-bar-items,
.menu-bar-items {
	display: none !important;
}

#site-navigation {
	display: none !important;
}

/* =================================
	HAMBURGER
==================================== */
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

/* .menu-toggle .mobile-menu,
.menu-toggle:before {
		display: none;
} */

/* body .hamburger{
		padding: 0;
		line-height: 0;
		vertical-align: middle;
}

body .hamburger.is-active .hamburger-inner::after,
body .hamburger-inner,
body .hamburger-inner::before, 
body .hamburger-inner::after,
body .hamburger.is-active .hamburger-inner, 
body .hamburger.is-active .hamburger-inner::before,
body .hamburger.is-active .hamburger-inner::after{
		background-color: currentColor;
} */

/* .slideout-toggle a:before,
.slide-opened .slideout-exit:not(.has-svg-icon):before,
.slideout-navigation button.slideout-exit:not(.has-svg-icon):before {
	display: none !important;
}
 */

.hamburger {
	padding: 15px 15px;
	display: none;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}
.hamburger:hover {
	opacity: 0.7;
}
.hamburger.is-active:hover {
	opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
	background-color: #000;
}

.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative;
}

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	width: 40px;
	height: 4px;
	background-color: #000;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
	content: '';
	display: block;
}
.hamburger-inner::before {
	top: -10px;
}
.hamburger-inner::after {
	bottom: -10px;
}

/* Collapse */
.hamburger--collapse .hamburger-inner {
	top: auto;
	bottom: 0;
	transition-duration: 0.13s;
	transition-delay: 0.13s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
	top: -20px;
	transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
	transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
	transform: translate3d(0, -10px, 0) rotate(-45deg);
	transition-delay: 0.22s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
	top: 0;
	opacity: 0;
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
	top: 0;
	transform: rotate(-90deg);
	transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* =================================
	OVERLAY
==================================== */
.slideout-navigation.do-overlay {
	position: fixed;
	transition: opacity 1s, visibility 1s;
	width: 100%;
	text-align: center;
	height: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(5px);
	z-index: 1;
	transition: 0.5s ease all;
	animation-name: slide-in 1s !important;
}

.slideout-navigation.do-overlay.is-open {
	display: block;
	height: 100vh;
	opacity: 1;
	animation-name: slide-in 1s !important;
}

@keyframes slide-in {
	from {
		transform: translateX(-100%);
		transition: all 0.5s ease-in-out;
		transform-origin: left top;
		opacity: 1;
	}
	to {
		transform: translateX(0%);
		opacity: 1;
	}
}

/* =============================
	CONTAINERS
================================ */
section.fluid {
	width:100%;
	max-width:100%;
}

section.top {
	padding-top: 140px;	
	padding-bottom: 0;
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important;
}

section.top.bottom {
	padding-top: 140px;	
	padding-bottom: 140px;
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important;
}

section.bottom {	
	padding-top: 0;	
	padding-bottom: 140px;
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important;
}

section.video-container {
	width:100%;	
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;	
	min-height: auto;
	max-height:1200px;
	overflow-y:hidden;
}

div.set-width {
	margin: 0 auto;
	max-width:1400px;
}

.separate-containers .inside-article {
	background: #fff;
}

.separate-containers .featured-image {
	margin-top: 0;
}

.one-container .container {
	background: #fff;
}

@media (max-width: 1100px) {	
.floating-box {	
	position: relative;	
	max-width: 100%;
	margin-bottom:2rem;
}
}

@media (max-width: 900px) {	
section.top {
	padding-top: 100px;	
	padding-bottom: 0;	
}

section.top.bottom {
	padding-top: 100px;	
	padding-bottom: 100px;	
}

section.bottom {	
	padding-top: 0;	
	padding-bottom: 100px;
}
}


/* =============================
	MISC
================================ */
.line {
	margin: 0 auto 3rem;
	max-width:1200px;
	border-bottom: 2px var(--accent) solid;
	padding:0 0 3rem;	
}

.icon {	
	max-width:70px !important;
	display:inline-block;
	text-align:center;
	margin:0 auto 1rem;	
}

.icon.rig {	
	max-width:85px !important;	
	margin:0 auto .25rem;
}

.centre {
	text-align: center;
	margin: 0 auto;	
}

a.button {
	background: var(--accent);
	cursor:pointer;
	padding: .6rem 1.25rem;
	border-radius:2px;
	text-align:center;
	margin: 5rem auto 0;	
}

a.button:hover {
	background: var(--contrast) !important;
}

.floating-box {
	background: var(--highlight);
	color: #fff;
	padding: 3rem 1.5rem;
	position: absolute;
	width: 100%;	
	margin-top:3rem;
	box-shadow: 0 0 20px rgba(0,0,0,.25);
	z-index:9999;
}

.floating-box p {
	font-weight:600;	
	font-size:18px;
}

.about .floating-box {
	max-width: 650px;
}

.industry .floating-box {
	max-width: 800px;
}

.industry .floating-box p:last-child {
	font-weight:normal;		
}

.industry .floating-box ol {
  counter-reset: list;
  margin: 0 0 1rem 2.5rem;
}

.industry .floating-box ol > li {
  list-style: none;
  position: relative;
}

.industry .floating-box ol {
	font-weight:bold;	
	list-style-type: lower-alpha;
}

.industry .floating-box ol > li:before {
  counter-increment: list;
  content: counter(list, lower-alpha) ") ";
  position: absolute;
  left: -1.4em;
}

/* ======================================
	HOMEPAGE
========================================= */
section.video-container h1 {
	font-size: min(max(1.5rem, 3.5vw), 70px);
	color:#fff;
	padding-top:30%;
}

section.video-container .video {
	width:100%;	
}

@media (max-width:1024px) {
	section.video-container h1 {		
		padding-top:50%;
	}
}


/* =============================
	HOMEPAGE ABOUT
================================ */
section.about .set-width {
	max-width:1200px;
}

section.about p {
	max-width:600px;
}

@media (max-width:1200px) {
	section.about .floating-box {
		max-width:100%;
		margin-left: 0;
		position:relative;
	}	
}


/* =============================
	HOMEPAGE BENIFITS
================================ */
section.benefits p {
	max-width:700px;
	margin: 0 auto;		
}

section.benefits .features.two {
	max-width:1000px;
	margin: 0 auto 5rem;	
}

section.benefits .features {
	max-width:1200px;
	margin: 0 auto;	
}

section.benefits .features h3 {
	font-size:1.2rem;
	margin-bottom:.5rem;
}

/* =============================
	HOMEPAGE INVEST
================================ */
section.invest .set-width > h3 {
	max-width:500px;	
}

section.invest .set-width > p,
section.invest .invest-list {
	max-width:700px;	
}

section.invest .invest-list {
	column-gap:3em;	
	row-gap:0;
}

section.invest .invest-list h4 {
	text-transform: none;
}

section.invest p {
	color:#fff;
	margin-bottom:3rem;
}

/* =============================
	HOMEPAGE FUTURE
================================ */
section.future {
	background: url(https://nexfuel.ca/wp-content/uploads/2025/03/oil-splash.webp) no-repeat bottom right;
	background-size:60%; 
	row-gap:0;
}

section.future .padding-left {
	padding-left:5%;
	width:50%;
}

section.future h2 span {
	font-weight: 400;
}

section.future p {
	font-weight: normal;
}

@media (max-width:1024px) {
	section.future {
		background: url(https://nexfuel.ca/wp-content/uploads/2025/03/oil-splash.webp) no-repeat bottom center;
		background-size:70%; 
	}
	section.future .padding-left {
		padding-left:0;
		width:100%;
	}	
}

@media (max-width:767px) {
	section.benefits .features,
	section.benefits .features.two {	
		margin: 0 auto;	
	}
	section.benefits .features .centre {	
		margin-bottom: 3rem;	
	}
	section.future {
		background: url(https://nexfuel.ca/wp-content/uploads/2025/03/oil-splash.webp) no-repeat bottom center;
		background-size:80%; 
	}	
	section.future p {
		max-width:100%;
}
}




/* =============================
	HOMEPAGE INDUSTRY
================================ */
.industry .set-width {
	max-width:1200px;
}

.industry .set-width .padding-left {
	padding-left:12%;
}

.industry .set-width .floating-box {
	max-width:650px;
	margin-left: -50px;
}

@media (max-width:1200px) {
	.industry .set-width {
		column-gap:2rem;
	}
	.industry .set-width .floating-box {
		max-width:100%;
		margin-left: 0;
		position:relative;
	}
	.industry .set-width .padding-left {
		padding-left:0;
	}
}


/* ==========================================================================
 WOW ANIMATE ELEMENTS ON VIEWPORT ENTRY
 class="wow slideInRight" data-wow-delay="0s" data-wow-duration="1s"
============================================================================= */
.animated {
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

.animated.infinite {
	animation-iteration-count: 2;
}

.animated.hinge {
	animation-duration: 2s;
}

@keyframes clipBottomTop {
	0% {
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	}

	100% {
		transition: transform 2e3ms cubic-bezier(0.19, 1, 0.22, 1), opacity 2e3ms cubic-bezier(0.19, 1, 0.22, 1);
	}
}

.clipBottomTop {
	animation-name: clipBottomTop;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.fadeIn {
	animation-name: fadeIn;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.fadeOut {
	animation-name: fadeOut;
}

@keyframes slideInDown {
	0% {
		transform: translateY(-100%);
		visibility: visible;
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.slideInDown {
	animation-name: slideInDown;
}

@keyframes slideInLeft {
	0% {
		transform: translateX(-50%);
		visibility: visible;
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.slideInLeft {
	animation-name: slideInLeft;
}

@keyframes slideInRight {
	0% {
		transform: translateX(50%);
		visibility: visible;
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.slideInRight {
	animation-name: slideInRight;
}

@keyframes slideInUp {
	0% {
		transform: translateY(100%);
		visibility: visible;
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.slideInUp {
	animation-name: slideInUp;
}

/* =============================
	SLIDE IN UP SHALLOW
================================ */
@keyframes slideInUpShallow {
	0% {
		transform: translateY(8%);
		visibility: visible;
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.slideInUpShallow {
	animation-name: slideInUpShallow;
	transition: 3s ease-out all;
}

@keyframes bounce {
	0%,
	20%,
	53%,
	80%,
	100% {
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -15px, 0);
	}

	70% {
		transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -10px, 0);
	}

	90% {
		transform: translate3d(0, -4px, 0);
	}
}

/* ================================
bounce
=================================== */
.bounce {
	animation-name: bounce;
	transform-origin: center bottom;
	animation-iteration-count: 2;
	animation-delay: 5s;
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	animation-name: fadeInDown;
}

/* ================================
	slideInUpBlurShort
=================================== */
@keyframes slideInUpBlurShort {
	0% {
		transform: translateY(50%);
		opacity: 0;
		filter: blur(10px);
	}

	100% {
		transform: translateY(0);
		opacity: 1;
		filter: blur(0px);
	}
}

.slideInUpBlurShort {
	animation-name: slideInUpBlurShort;
	transition: 3s ease-out all;
}

/* ================================
slideInLeftBlurShort
=================================== */
@keyframes slideInLeftBlurShort {
	0% {
		transform: translateX(-30%);
		opacity: 0;
		filter: blur(10px);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
		filter: blur(0px);
	}
}

.slideInLeftBlurShort {
	animation-name: slideInLeftBlurShort;
	transition: 1s ease-out all;
}

/* ================================
slideInRightBlurShort
=================================== */
@keyframes slideInRightBlurShort {
	0% {
		transform: translateX(30%);
		opacity: 0;
		filter: blur(10px);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
		filter: blur(0px);
	}
}

.slideInRightBlurShort {
	animation-name: slideInRightBlurShort;
	transition: 1s ease-out all;
}

/* ================================
slideInLeftBlur
=================================== */
@keyframes slideInLeftBlur {
	0% {
		transform: translateX(-100%);
		opacity: 0;
		filter: blur(5px);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
		filter: blur(0px);
	}
}

.slideInLeftBlur {
	animation-name: slideInLeftBlur;
	transition: 4s ease-out all;
}

/* ================================
slideInRightBlur
=================================== */
@keyframes slideInRightBlur {
	0% {
		transform: translateX(100%);
		visibility: visible;
		opacity: 0;
		filter: blur(5px);
	}

	100% {
		transform: translateX(0);
		opacity: 1;
		filter: blur(0px);
	}
}

.slideInRightBlur {
	animation-name: slideInRightBlur;
	transition: 4s ease-out all;
}

/* ================================
slideInDownBlur
=================================== */
@keyframes slideInDownBlur {
	0% {
		transform: translateY(-200%);
		opacity: 0;
		filter: blur(5px);
	}

	100% {
		transform: translateY(0);
		opacity: 1;
		filter: blur(0px);
	}
}

.slideInDownBlur {
	animation-name: slideInDownBlur;
	transition: 2s ease-out all;
}

/* ================================
slideInUpBlur
=================================== */
@keyframes slideInUpBlur {
	0% {
		transform: translateY(100%);
		opacity: 0;
		filter: blur(5px);
	}

	100% {
		transform: translateY(0);
		opacity: 1;
		filter: blur(0px);
	}
}

.slideInUpBlur {
	animation-name: slideInUpBlur;
	transition: 4s ease-out all;
}

/* ================================
fadeInUpBlur
=================================== */
@keyframes fadeInBlur {
	0% {
		visibility: hidden;
		opacity: 0;
		filter: blur(10px);
	}

	100% {
		transform: translateY(0);
		opacity: 1;
		filter: blur(0px);
	}
}

.fadeInBlur {
	animation-name: fadeInBlur;
	transition: 4s ease-out all;
}

/* ================================
wave text
=================================== */
@keyframes wave-text {
	0% {
		transform: translateY(0em);
		filter: blur(2px);
	}
	20% {
		filter: blur(0);
	}
	70% {
		transform: translateY(-0.3em);
		filter: blur(0);
	}
	100% {
		transform: translateY(0em);
		filter: blur(2px);
	}
}

@keyframes wave-left-right {
	0% {
		transform: translateX(0em);
		filter: blur(2px);
	}
	20% {
		transform: translateX(0em);
		filter: blur(0);
	}
	50% {
		transform: translateX(-0.4em);
		filter: blur(0);
	}
	80% {
		filter: blur(0);
	}
	100% {
		transform: translateX(0em);
		filter: blur(2px);
	}
}