/* Reset */
body { font-family: var(--font-regular); font-size: 14px; color: var(--clr-black); }
h1, h2, h3, h4, h5, h6 { line-height: 1.5; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; border-style: none; }
* { box-sizing: border-box; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: middle; border-style: none; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.a2a_kit .a2a_svg { width: 30px; height: 30px; line-height: 30px; }
.contact-form .btn-primary { color: #fff; background-color: var(--clr-btn); border-color: var(--clr-btn); }
.contact-form .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.ckeditor-content ul, ol, dl {list-style: revert; padding: 0 0 0 1.5rem;}
.ckeditor-content a {color: #0d6efd; text-decoration: underline;}
.ckeditor-content a:hover {color: #0a58ca;}
[type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select {/* border: none; */}
.contact-input [type='text'],
.contact-input [type='email'],
.contact-input [type='number'] {border: 1px solid #ced4da;}

/* TODO: Main */
.hidden-seoh { overflow: hidden; visibility: hidden; height: 0; margin: 0; }
.body-container { overflow: hidden; position: relative; background: #fff; color: #000; }
.wrap-home { max-width: 100%; padding: 0; }
.wrap-content { --w: 1300px; width: min(100% - 2rem, var(--w)); margin: 0 auto; }

/* .body-container,
.navigation { min-width: 1230px; margin: 0 auto; }   */

/* TODO: Flex Box */
.flex-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -webkit-calc(-1 * var(--space-horizontal)) -webkit-calc(-1 * var(--space-vertical)); margin: 0 -moz-calc(-1 * var(--space-horizontal)) -moz-calc(-1 * var(--space-vertical)); margin: 0 calc(-1 * var(--space-horizontal)) calc(-1 * var(--space-vertical)); }
.flex-list--default { --columns: 4; --space-horizontal: 10px; --space-vertical: -webkit-calc(var(--space-horizontal) * 2); --space-vertical: -moz-calc(var(--space-horizontal) * 2); --space-vertical: calc(var(--space-horizontal) * 2); }
.flex-list>div[class*='__item'] { width: -webkit-calc(100% / var(--columns) - -webkit-calc(var(--space-horizontal) * 2)); width: -moz-calc(100% / var(--columns) - -moz-calc(var(--space-horizontal) * 2)); width: calc(100% / var(--columns) - calc(var(--space-horizontal) * 2)); margin: 0 var(--space-horizontal) var(--space-vertical); }
.flex-list>div[class*='__item']>[class*='__item-inner'] { height: 100%; }
.flex-list>div[class*='__item']>a[class*='__item-inner'] { display: block; }

/* TODO: Text Truncate */
.text-split { --line-clamp: 3; overflow: hidden; display: -webkit-box; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp); }
.--split-height { --line-height: 1.5em; height: -webkit-calc(var(--line-clamp) * var(--line-height)); height: -moz-calc(var(--line-clamp) * var(--line-height)); height: calc(var(--line-clamp) * var(--line-height)); line-height: var(--line-height); }

/* TODO: Transition All */
.transition { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

/* TODO: Scroll */
.progress-wrap { position: fixed; bottom: 60px; right: 15px; height: 56px; background: var(--clr-btn); width: 56px; cursor: pointer; display: block; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index: 999; opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; -moz-transition: all 400ms linear; transition: all 400ms linear; -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.5); }
.progress-wrap.active-progress { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
.progress-wrap::after { position: absolute; font-family: 'FontAwesome'; content: '\f077'; text-align: center; line-height: 56px; font-size: 16px; font-weight: 900; color: #fff; left: 0; top: 0px; height: 55px; width: 56px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; -moz-transition: all 400ms linear; transition: all 400ms linear; }
.progress-wrap svg path { fill: none; }
.progress-wrap svg.progress-circle path { stroke: #fff; stroke-width: 4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; -moz-transition: all 400ms linear; transition: all 400ms linear; }


.page-item.page-item-ajax.disabled {display: none;}
.page-link {min-width: 30px; min-height: 30px;padding: 5px 13px;background: var(--clr-white);border-color: #BFBFBF;border-radius: 5px; color: #595959;}
.page-item.active .page-link { background: var(--clr-main); border-color: var(--clr-main) ; color: var(--clr-white);} 
.pagination {gap: 10px;}

/* !---------ANIMATION---------! */
@keyframes menuSlideInDown {
	0% { opacity: 0; visibility: hidden; transform: translateY(-100%); }
	100% { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes arrowBounceRight {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(5px); }
}
@keyframes spinCircle {
	0% { transform: rotateZ(0deg); }
	100% { transform: rotateZ(360deg); }
}
@-webkit-keyframes blink {
	0% { -webkit-opacity: 1; }
	50% { -webkit-opacity: 0; }
	100% { -webkit-opacity: 1; }
}
@-moz-keyframes blink {
	0% { -moz-opacity: 1; }
	50% { -moz-opacity: 0; }
	100% { -moz-opacity: 1; }
}
@-ms-keyframes blink {
	0% { -ms-opacity: 1; }
	50% { -ms-opacity: 0; }
	100% { -ms-opacity: 1; }
}
@-o-keyframes blink {
	0% { -o-opacity: 1; }
	50% { -o-opacity: 0; }
	100% { -o-opacity: 1; }
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes shake-anim {
	0%, 100% { -webkit-keyframes: rotate(0deg); transform-origin: 50% 50%; }
	10% { -webkit-keyframes: rotate(8deg); }
	20%, 40%, 60% { -webkit-keyframes: rotate(-10deg); }
	30%, 50%, 70% { -webkit-keyframes: rotate(10deg); }
	80% { -webkit-keyframes: rotate(-8deg); }
	90% { -webkit-keyframes: rotate(8deg); }
}
@-moz-keyframes shake-anim {
	0%, 100% { -moz-keyframes: rotate(0deg); transform-origin: 50% 50%; }
	10% { -moz-keyframes: rotate(8deg); }
	20%, 40%, 60% { -moz-keyframes: rotate(-10deg); }
	30%, 50%, 70% { -moz-keyframes: rotate(10deg); }
	80% { -moz-keyframes: rotate(-8deg); }
	90% { -moz-keyframes: rotate(8deg); }
}
@-ms-keyframes shake-anim {
	0%, 100% { -ms-keyframes: rotate(0deg); transform-origin: 50% 50%; }
	10% { -ms-keyframes: rotate(8deg); }
	20%, 40%, 60% { -ms-keyframes: rotate(-10deg); }
	30%, 50%, 70% { -ms-keyframes: rotate(10deg); }
	80% { -ms-keyframes: rotate(-8deg); }
	90% { -ms-keyframes: rotate(8deg); }
}
@-o-keyframes shake-anim {
	0%, 100% { -o-transform: rotate(0deg); transform-origin: 50% 50%; }
	10% { -o-transform: rotate(8deg); }
	20%, 40%, 60% { -o-transform: rotate(-10deg); }
	30%, 50%, 70% { -o-transform: rotate(10deg); }
	80% { -o-transform: rotate(-8deg); }
	90% { -o-transform: rotate(8deg); }
}
@keyframes shake-anim {
	0%, 100% { transform: rotate(0deg); transform-origin: 50% 50%; }
	10% { transform: rotate(8deg); }
	20%, 40%, 60% { transform: rotate(-10deg); }
	30%, 50%, 70% { transform: rotate(10deg); }
	80% { transform: rotate(-8deg); }
	90% { transform: rotate(8deg); }
}
@keyframes spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes mover {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}
@keyframes mover {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}
@-moz-keyframes mover {
	0% { -moz-transform: translateY(0); }
	50% { -moz-transform: translateY(-10px); }
	100% { -moz-transform: translateY(0px); }
}
@-ms-keyframes mover {
	0% { -ms-transform: translateY(0); }
	50% { -ms-transform: translateY(-10px); }
	100% { -ms-transform: translateY(0px); }
}
@-o-keyframes mover {
	0% { -o-transform: translateY(0); }
	50% { -o-transform: translateY(-10px); }
	100% { -o-transform: translateY(0px); }
}
@-webkit-keyframes tracking-in-expand-fwd {
	0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px); transform: translateZ(-700px); opacity: 0; }
	40% { opacity: 0.6; }
	100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; }
}
@keyframes tracking-in-expand-fwd {
	0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px); transform: translateZ(-700px); opacity: 0; }
	40% { opacity: 0.6; }
	100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; }
}
@-webkit-keyframes xoayvong {
	from { -webkit-transform: translate(-50%, -50%) rotate(0deg); -moz-transform: translate(-50%, -50%) rotate(0deg); -o-transform: translate(-50%, -50%) rotate(0deg); }
	to { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes xoayvong {
	from { -webkit-transform: translate(-50%, -50%) rotate(0deg); -moz-transform: translate(-50%, -50%) rotate(0deg); -o-transform: translate(-50%, -50%) rotate(0deg); }
	to { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes top {
	0% { top: 0; transform: rotate(0); }
	50% { top: 6px; transform: rotate(0); }
	100% { top: 6px; transform: rotate(45deg); }
}
@keyframes top-2 {
	0% { top: 6px; transform: rotate(45deg); }
	50% { top: 6px; transform: rotate(0deg); }
	100% { top: 0; transform: rotate(0deg); }
}
@keyframes bottom {
	0% { bottom: 0; transform: rotate(0); }
	50% { bottom: 8px; transform: rotate(0); }
	100% { bottom: 8px; transform: rotate(135deg); }
}
@keyframes bottom-2 {
	0% { bottom: 8px; transform: rotate(135deg); }
	50% { bottom: 8px; transform: rotate(0); }
	100% { bottom: 0; transform: rotate(0); }
}
@keyframes scaled {
	50% { transform: scale(0); }
	100% { transform: scale(0); }
}
@keyframes scaled-2 {
	0% { transform: scale(0); }
	50% { transform: scale(0); }
	100% { transform: scale(1); }
}
@-webkit-keyframes rotating {
	from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotating {
	from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes anime {
	0% { color: grey; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; transform: translateY(0); }
	50% { color: #ffc107; letter-spacing: 5px; text-shadow: 5px 10px 1px #000; transform: translateY(-10px); }
	100% { color: grey; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; transform: translateY(0); }
}
@keyframes anime {
	0% { color: grey; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; transform: translateY(0); }
	50% { color: #ffc107; letter-spacing: 5px; text-shadow: 5px 10px 1px #000; transform: translateY(-10px); }
	100% { color: grey; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; transform: translateY(0); }
}
@-webkit-keyframes MaskPlay {
	from { -webkit-mask-position: 0 0; mask-position: 0 0; }
	to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes MaskPlay {
	from { -webkit-mask-position: 0 0; mask-position: 0 0; }
	to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes fadeInUp {
	0% { opacity: 0; transform: translate3d(0, 100px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; transform: translate3d(0, -100px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes scaleLarge {
	0% { opacity: 0; transform: scale(2); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes Start {
	from { visibility: hidden; }
	to { visibility: visible; }
}
@keyframes Preloader {
	100% { transform: rotate(360deg); }
}
@keyframes Play {
	from { background-position: 0; }
	to { background-position: -360px; }
}
@keyframes Ani {
	0% { box-shadow: 0 0 0 rgba(220, 220, 220, 0); border: 1px solid rgba(220, 220, 220, 0); transform: scale(0); }
	70% { box-shadow: 0 0 50px gainsboro; border: 1px solid gainsboro; transform: scale(1); }
	100% { box-shadow: 0 0 60px rgba(220, 220, 220, 0); border: 0 solid rgba(220, 220, 220, 0); transform: scale(2); }
}
@keyframes BgColor {
	from { background-color: #004835; }
	to { background-color: #b05c1e; }
}
@keyframes Leftpage {
	from { left: -100%; }
	to { left: 100%; }
}
@keyframes Rotate {
	from { transform: rotate(0) translateZ(0); }
	to { transform: rotate(360deg) translateZ(0); }
}
@keyframes empty {
	0% { opacity: 1; }
}
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes fadeInUp {
	0% { opacity: 0; transform: translate3d(0, 100px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; transform: translate3d(0, -100px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes flipInX {
	0% { transform: perspective(400px) rotateX(90deg) scale(0.5); opacity: 0; }
	100% { transform: perspective(400px) rotateX(0) scale(1); opacity: 1; }
}
@keyframes flipOutX {
	0% { transform: perspective(400px) rotateX(0) scale(1); opacity: 1; }
	100% { transform: perspective(400px) rotateX(90deg) scale(0.5); opacity: 0; }
}
@keyframes scaleSmall {
	0% { opacity: 0; transform: scale(1.1); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes scaleLarge {
	0% { opacity: 0; transform: scale(2); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes scaleLarge2 {
	0% { opacity: 0; transform: scale(1.1); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes trackBallSlide {
	0%, 100%, 30%, 60% { opacity: 1; transform: translateY(-12px); }
	15%, 50% { opacity: 0; transform: translateY(8px); }
}
@keyframes goHeight {
	from { transform: scale3d(1, 0, 1); }
	to { transform: scale3d(1, 1, 1); }
}
@keyframes goWidth {
	from { transform: scale3d(0, 1, 1); }
	to { transform: scale3d(1, 1, 1); }
}
@keyframes aniHeight {
	from { transform: scale3d(1, 1, 1); }
	to { transform: scale3d(1, 0, 1); }
}
@keyframes aniWidth {
	from { transform: scale3d(1, 1, 1); }
	to { transform: scale3d(0, 1, 1); }
}
@keyframes moveLeft {
	100% { transform: translateX(-100%); }
}
@keyframes moveRight {
	100% { transform: translateX(100%); }
}
@keyframes toRight {
	0% { opacity: 0; right: -100px; }
	100% { opacity: 1; right: 0; }
}
@keyframes toLeft {
	0% { opacity: 0; left: -100px; }
	100% { opacity: 1; left: 0; }
}
@keyframes goRight {
	0% { opacity: 0; transform: translate3d(-100%, 0, 0); }
	100% { opacity: 1; transform: none; }
}
@keyframes goLeft {
	0% { opacity: 0; transform: translate3d(100%, 0, 0); }
	100% { opacity: 1; transform: none; }
}
@keyframes DrawStroke {
	0% { stroke-dashoffset: 1000; }
	100% { stroke-dashoffset: 0; }
}
@keyframes DrawStroke1 {
	0% { stroke-dashoffset: 2500; }
	100% { stroke-dashoffset: 0; }
}
@keyframes goBg {
	0% { transform: translate3d(-50%, 0, 0); }
	100% { transform: none; }
}
@keyframes bounceInDown {
	60%, 75%, 90%, from, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	0% { opacity: 0; transform: translate3d(0, -3000px, 0); }
	60% { opacity: 1; transform: translate3d(0, 25px, 0); }
	75% { transform: translate3d(0, -10px, 0); }
	90% { transform: translate3d(0, 5px, 0); }
	to { opacity: 1; }
}
@keyframes Color2 {
	0%, 60% { background-color: #00431c; }
	20% { background-color: #b08a30; }
}
@keyframes Border {
	0%, 60% { border-top-color: #ffdd80; }
	20% { border-top-color: #117090; }
}
@keyframes Border1 {
	0%, 60% { border-color: #ffdd80; }
	20% { border-color: #117090; }
}
@keyframes Shake {
	from, to { transform: translate3d(0, 0, 0) rotate(0); }
	0%, 50% { transform: translate3d(-10px, 0, 0) rotate(15deg); }
	25% { transform: translate3d(10px, 0, 0) rotate(-15deg); }
}
@keyframes Bounce {
	0% { transform: translate3d(0, 0, 0) rotate(0); }
	50% { transform: translate3d(50px, 20px, 0) rotate(125deg); }
	100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}
@keyframes StrokeLine {
	0% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -200; }
}
@keyframes StrokeLine1 {
	0% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 200; }
}
@keyframes StrokeLine2 {
	0% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 300; }
}
@keyframes BorderBox {
	0%, 100% { background-position: 0 0; }
	50% { background-position: 100% 100%; }
}
@keyframes MaskPlay {
	from { mask-position: 0 0; }
	to { mask-position: 100% 0; }
}
@keyframes DrawStroke1 {
	0% { stroke-dashoffset: 8000; }
	100% { stroke-dashoffset: 0; }
}
@keyframes circleFloat {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@keyframes sizingLarge {
	0% { transform: scale(0.8); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}
@keyframes sizingSmall {
	0% { transform: scale(0.8); }
	50% { transform: scale(1); }
	100% { transform: scale(0.9); }
}
@keyframes circleFloat {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@keyframes sizingLarge {
	0% { transform: scale(0.8); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
@keyframes sizingSmall {
	0% { transform: scale(0.8); }
	50% { transform: scale(1); }
	100% { transform: scale(0.9); }
}
@-webkit-keyframes slideInDown1 {
	0% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); visibility: visible; }
	100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes slideInDown1 {
	0% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); visibility: visible; }
	100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes sh02 {
	from { opacity: 0; left: 0%; }
	50% { opacity: 1; }
	to { opacity: 0; left: 100%; }
}
@-webkit-keyframes animborder {
	0% { -webkit-transform: translateX(0); transform: translateX(0); }
	100% { -webkit-transform: translateX(113px); transform: translateX(113px); }
}
@keyframes animborder {
	0% { -webkit-transform: translateX(0); transform: translateX(0); }
	100% { -webkit-transform: translateX(113px); transform: translateX(113px); }
}
@keyframes xoay {
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.has-scroll { position: fixed !important; top: 0; right: 0; left: 0; animation: menuSlideInDown 0.3s ease-out; }
.blink { -webkit-animation: blink 1s infinite linear; -moz-animation: blink 1s infinite linear; -ms-animation: blink 1s infinite linear; -o-animation: blink 1s infinite linear; animation: blink 1s infinite linear; }
.shake-anim { -webkit-animation: shake-anim 1s infinite ease-in-out; -moz-animation: shake-anim 1s infinite ease-in-out; -ms-animation: shake-anim 1s infinite ease-in-out; -o-animation: shake-anim 1s infinite ease-in-out; animation: shake-anim 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.hvr-underline { display: inline; background: linear-gradient(90deg, transparent, transparent), linear-gradient(90deg, #1F1C17, #1F1C17); background-size: 100% 1px, 0 1px; background-position: 100% calc(100% - 3px), 0 calc(100% - 3px); background-repeat: no-repeat; transition: background-size 0.3s; }
.hvr-underline:hover { background-size: 0 1px, 100% 1px; }
.hvr-double-shape { overflow: hidden; position: relative; display: block; }
.hvr-double-shape:before { opacity: 0.25; content: ''; position: absolute; left: 0; right: 0; display: inline-block; background: #fff; transform: scaleX(0); transition: transform 0.5s ease; top: 0; bottom: 50%; transform-origin: 100% 0%; }
.hvr-double-shape:after { opacity: 0.25; content: ''; position: absolute; left: 0; right: 0; display: inline-block; background: #fff; transform: scaleX(0); transition: transform 0.5s ease; top: 50%; bottom: 0; transform-origin: 0% 100%; }
.hvr-double-shape:hover:before { transform: scaleX(1); transform-origin: 0% 100%; }
.hvr-double-shape:hover:after { transform: scaleX(1); transform-origin: 100% 0%; }
.hvr-double-box { overflow: hidden; position: relative; display: block; }
.hvr-double-box:before { -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; content: ""; position: absolute; bottom: 0; left: 0; z-index: 3; width: 0; height: 0; background: rgba(255, 255, 255, 0.5); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.hvr-double-box:after { -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; content: ""; position: absolute; top: 0; right: 0; z-index: 2; width: 0; height: 0; background: rgba(255, 255, 255, 0.5); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.hvr-double-box:hover:before { -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; height: 100%; width: 100%; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition-duration: 1.3s; -moz-transition-duration: 1.3s; -ms-transition-duration: 1.3s; -o-transition-duration: 1.3s; transition-duration: 1.3s; }
.hvr-double-box:hover:after { -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; height: 100%; width: 100%; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition-duration: 1.3s; -moz-transition-duration: 1.3s; -ms-transition-duration: 1.3s; -o-transition-duration: 1.3s; transition-duration: 1.3s; }
.hvr-float-shadow { position: relative; display: inline-block; vertical-align: middle; box-shadow: 0 0 1px transparent; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.hvr-float-shadow:before { opacity: 0; position: absolute; content: ''; top: 100%; left: 5%; z-index: -1; width: 90%; height: 10px; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0, transparent 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0, transparent 80%); -webkit-transition-property: transform, opacity; transition-property: transform, opacity; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; pointer-events: none; pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0, transparent 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0, transparent 80%); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; }
.hvr-float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.hvr-float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); }
.hvr-float-shadow:focus { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.hvr-float-shadow:focus:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); }
.hvr-float-shadow:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.hvr-float-shadow:hover:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); }
.hvr-flash-shape { overflow: hidden; position: relative; }
.hvr-flash-shape:before { content: ''; position: absolute; top: 0; left: -85%; z-index: 10; display: block; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); }
.hvr-flash-shape:hover:before { transition: 1s; left: 130%; }
.hrv-flash-box { overflow: hidden; position: relative; display: block; }
.hrv-flash-box:hover:before { top: 0; left: 0; }
.hrv-flash-box:hover img { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
.hrv-flash-box:hover:after { right: 0; bottom: 0; }
.hrv-flash-box:before { top: -100%; left: -100%; display: block; content: ""; position: absolute; z-index: 8; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
.hrv-flash-box:after { right: -100%; bottom: -100%; display: block; content: ""; position: absolute; z-index: 8; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }
.hrv-flash-box img { transition: 0.7s; }
.scale-img { overflow: hidden; display: block; }
.scale-img img { -webkit-transition: 0.3s ease-out !important; -moz-transition: 0.3s ease-out !important; -ms-transition: 0.3s ease-out !important; -o-transition: 0.3s ease-out !important; transition: 0.3s ease-out !important; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); }
.scale-img:hover > img { -webkit-transition: 0.3s ease-out !important; -moz-transition: 0.3s ease-out !important; -ms-transition: 0.3s ease-out !important; -o-transition: 0.3s ease-out !important; transition: 0.3s ease-out !important; -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
.mover { -webkit-animation: mover 1s infinite ease-in-out; -moz-animation: mover 1s infinite ease-in-out; -ms-animation: mover 1s infinite ease-in-out; -o-animation: mover 1s infinite ease-in-out; animation: mover 1s infinite ease-in-out; }
.tada { -webkit-animation: tada 1s infinite ease-in-out; -moz-animation: tada 1s infinite ease-in-out; -ms-animation: tada 1s infinite ease-in-out; -o-animation: tada 1s infinite ease-in-out; animation: tada 1s infinite ease-in-out; }
.rung { animation: code-pro-rung-lac 2s ease infinite; }
.fadein { animation-duration: 1s; animation-name: fadeIn; animation-fill-mode: forwards; }
.fadeout { animation-duration: 1s; animation-name: fadeOut; animation-fill-mode: forwards; }
.flipinx { animation-duration: 0.8s; animation-fill-mode: forwards; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInX; }
.flipoutx { animation-duration: 0.8s; animation-fill-mode: forwards; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipOutX; }
.fadeindown { animation-duration: 1s; animation-name: fadeInDown; animation-fill-mode: forwards; }
.fadeinup { animation-duration: 1s; animation-name: fadeInUp; animation-fill-mode: forwards; }
.fadeoff { animation-duration: 1s; animation-name: fadeOff; animation-fill-mode: forwards; }
.fadeon { animation-duration: 1s; animation-name: fadeOn; animation-fill-mode: forwards; }
.goleft { animation-duration: 0.8s; animation-fill-mode: forwards; animation-name: goLeft; }
.goright { animation-duration: 0.8s; animation-fill-mode: forwards; animation-name: goRight; }
.scalelarge { animation: scaleLarge; animation-duration: 1s; animation-fill-mode: forwards; }
.moveleft { pointer-events: none; animation-duration: 0.8s; animation-fill-mode: forwards; animation-name: moveLeft; }
.moveright { pointer-events: none; animation-duration: 0.8s; animation-fill-mode: forwards; animation-name: moveRight; }
.contact-form { animation: Start 1s steps(1, end) 0s 1 normal both; }
.container { animation: Start 1s steps(1, end) 0s 1 normal both; }
.footer { animation: Start .5s steps(1, end) 0s 1 normal both; }
.go-top { animation: Start 1s steps(1, end) 0s 1 normal both; }
.register-form { animation: Start 1s steps(1, end) 0s 1 normal both; }
.slide-fade-out { animation: fadeOut; animation-duration: 1s; animation-fill-mode: forwards; }
.slide-fade-in { animation: fadeIn; animation-duration: 1s; animation-fill-mode: forwards; }
.interior-hero-callout { animation: circleFloat 5s linear forwards infinite; }
.is-selected { animation-name: sizingSmall; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; transform: scale(1); animation-name: sizingSmall; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; transform: scale(1); }
.flickity-button { width: 49px; height: 49px; background-color: #f4c271; overflow: hidden; transition: transform 0.2s ease-in-out; }
.centery { -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.centery-after:after { -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.centery-before:before { -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.ease-in-200 { -webkit-transition: all 500ms ease-in; -moz-transition: all 500ms ease-in; -ms-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in; }
.slideInDown1 { -webkit-animation-name: slideInDown1; animation-name: slideInDown1; }
.fixed { position: fixed !important; left: 0; right: 0; top: 0; z-index: 999; animation: slideInDown1 1s 0s; }
.hvr-sweep-to-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
.hvr-sweep-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #3a0304; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.hvr-sweep-to-top:active { color: #fff; }
.hvr-sweep-to-top:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); }
.hvr-sweep-to-top:focus { color: #fff; }
.hvr-sweep-to-top:focus:before { -webkit-transform: scaleY(1); transform: scaleY(1); }
.hvr-sweep-to-top:hover { color: #fff; }
.hvr-sweep-to-top:hover:before { -webkit-transform: scaleY(1); transform: scaleY(1); }
.hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #33cbcc; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.hvr-sweep-to-right:active { color: #fff; }
.hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); }
.hvr-sweep-to-right:focus { color: #fff; }
.hvr-sweep-to-right:focus:before { -webkit-transform: scaleX(1); transform: scaleX(1); }
.hvr-sweep-to-right:hover { color: #fff; }
.hvr-sweep-to-right:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); }
.btn-hover { position: relative; padding: 10px 20px; border-radius: 7px; border: 1px solid #3d6aff; font-size: 14px; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; background: transparent; color: #fff; overflow: hidden; box-shadow: 0 0 0 0 transparent; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.btn-hover:hover { background: #3d6aff; box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.btn-hover:hover::before { -webkit-animation: sh02 0.5s 0s linear; -moz-animation: sh02 0.5s 0s linear; animation: sh02 0.5s 0s linear; }
.btn-hover::before { content: ''; display: block; width: 0px; height: 86%; position: absolute; top: 7%; left: 0%; opacity: 0; background: #fff; box-shadow: 0 0 50px 30px #fff; -webkit-transform: skewX(-20deg); -moz-transform: skewX(-20deg); -ms-transform: skewX(-20deg); -o-transform: skewX(-20deg); transform: skewX(-20deg); }
.btn-hover:active { box-shadow: 0 0 0 0 transparent; -webkit-transition: box-shadow 0.2s ease-in; -moz-transition: box-shadow 0.2s ease-in; transition: box-shadow 0.2s ease-in; }
.codepen-button { display: block; cursor: pointer; color: #fff; margin: 0 auto; position: relative; text-decoration: none; font-weight: 600; border-radius: 6px; overflow: hidden; padding: 3px; isolation: isolate; }
.codepen-button::before { content: ""; position: absolute; top: 0; left: 0; width: 400%; height: 100%; background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b); background-size: 25% 100%; animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop 0.75s linear infinite; animation-play-state: paused; translate: -5% 0; transition: translate 0.25s ease-out; }
.codepen-button:hover::before { animation-play-state: running; transition-duration: 0.75s; translate: 0 0; }
.codepen-button span { position: relative; display: block; padding: 1rem 1.5rem; font-size: 1.1rem; background: #000; border-radius: 3px; height: 100%; }
 
.-item.foo { position: relative; }
.-item.foo:hover::after, .-item.foo:hover::before { -webkit-transform: scale(1); }
.foo:before { position: absolute; border-top: 3px solid #B59A6B; border-right: 3px solid #B59A6B; -webkit-transform-origin: 100% 0%; width: 100%; height: 100%; z-index: 1; content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box; -webkit-transform: scale(0); transition: 0.5s; pointer-events: none; border-radius: 10px ;}
.foo:after { position: absolute; border-bottom: 3px solid #B59A6B; border-left: 3px solid #B59A6B; -webkit-transform-origin: 0 100%; width: 100%; height: 100%; z-index: 1; content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box; -webkit-transform: scale(0); transition: 0.5s; pointer-events: none; border-radius: 10px ;}
.hover_sang2 { position: relative; overflow: hidden; }
.hover_sang2:before { position: absolute; top: 0; left: -85%; z-index: 10; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); }
.hover_sang2:hover:before { transition: 1s; left: 100%; }
.hover_sang { display: block; position: relative; overflow: hidden; }
.hover_sang:hover:before { left: 0; top: 0; }
.hover_sang:hover img { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
.hover_sang:hover:after { right: 0; bottom: 0; }
.hover_sang:before { left: -100%; top: -100%; display: block; background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0; content: ""; height: 100%; position: absolute; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; width: 100%; z-index: 8; }
.hover_sang:after { bottom: -100%; right: -100%; display: block; background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0; content: ""; height: 100%; position: absolute; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; width: 100%; z-index: 8; }
.hover_sang img { transition: 0.7s; }
.hover_xam { position: relative; overflow: hidden; }
.hover_xam::before { content: ""; background: rgba(255, 255, 255, 0.5); bottom: 0; left: 0; position: absolute; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -khtml-opacity: 1; -o-opacity: 1; -ms-opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; width: 0; height: 0; z-index: 2; }
.hover_xam::after { content: ""; background: rgba(255, 255, 255, 0.5); top: 0; right: 0; position: absolute; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -khtml-opacity: 1; -o-opacity: 1; -ms-opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; width: 0; height: 0; z-index: 2; }
.hover_xam:hover::before { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition-duration: 1.3s; -moz-transition-duration: 1.3s; -ms-transition-duration: 1.3s; -o-transition-duration: 1.3s; transition-duration: 1.3s; -khtml-opacity: 0; -o-opacity: 0; -ms-opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; height: 100%; width: 100%; }
.hover_xam:hover::after { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition-duration: 1.3s; -moz-transition-duration: 1.3s; -ms-transition-duration: 1.3s; -o-transition-duration: 1.3s; transition-duration: 1.3s; -khtml-opacity: 0; -o-opacity: 0; -ms-opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; height: 100%; width: 100%; }
.animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.animate__tada { -webkit-animation-name: tada; animation-name: tada; }
.animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.mask { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 999999999; overflow: hidden; }
.mask span { width: 100%; position: absolute; right: 0; background: -webkit-linear-gradient(90deg, #fff 0, #fff 100%); background: linear-gradient(90deg, #fff 0, #fff 100%); -webkit-transition: width 0.9s ease-in-out; transition: width 0.9s ease-in-out; }
.mask span:nth-child(1) { height: 30vh; top: 0; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.mask span:nth-child(2) { height: 40vh; top: 30vh; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
.mask span:nth-child(3) { height: 30vh; top: 70vh; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.mask.hideg { pointer-events: none; }
.mask.hideg span { width: 0; }
.loadicon { position: fixed; top: 50%; left: 50%; width: 200px; height: 140px; margin: -70px 0 0 -100px; z-index: 110000; }
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999999; }
#loading .logo_2 { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: all ease 0.5s; }
#loading .logo_2 span { display: block; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.5); -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); -webkit-animation: Ani 2s infinite; animation: Ani 2s infinite; width: 120px; height: 120px; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 2; z-index: 9999999999; }
#loading .logo_2 img { position: relative; max-width: 80px; z-index: 4; }
#loading.finish { z-index: -9999; }
#loading.finish .logo_2 span { display: none; }
#loading.finish .logo_2 img { display: none; }
.animate-border { position: relative; display: block; width: 100px; height: 3px; background: var(--clr-tone); overflow: hidden; }
.animate-border:after {position: absolute;content: "";width: 30px;height: 3px;left: 21;bottom: 0;border-left: 10px solid #fff;border-right: 10px solid #fff;-webkit-animation: animborder 2s linear infinite;animation: animborder 2s linear infinite;}
@keyframes rotate{from{transform:rotate(0);} to{transform:rotate(360deg);}}
@keyframes fadeup{from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:translateX(0);}}
@keyframes pulse-animation{0%{transform:scale3d(1,1,1);opacity:0;} 10%{transform:scale3d(1.1,1.1,1.1);opacity:1;} 100%{transform:scale3d(1.6,1.6,1.6);opacity:0;}}
@keyframes border-animation{0%{transform:scale3d(0.6,0.6,0.6);opacity:0;}20%{transform:scale3d(1.2,1.2,1.2);opacity:1;}100%{transform:scale3d(1.4,1.4,1.4);opacity:0;}}