button:disabled {
  cursor: not-allowed;
  opacity: .7;
}

.bg-inherit {
  background: inherit;
}
@keyframes b3 {
  100% {
    background-position: left top,center top,right top;
  }
}
.tooltip {
   --delay: 0s;
    font-family: inherit;
    transition: opacity 0.2s, transform 0.2s ease, visibility 0s;
	--arrow-x: 0%;
	--arrow-y: 0%;
    --arrow-color: currentcolor;
	--arrow-degree: 0deg;
}
.tooltip.hide {
	opacity: 0;
	visibility: hidden;
}
.tooltip:not(.vanish-hover) {
  visibility: hidden;
  opacity: 0;
}
.tooltip.no-hover {
 --x: 0px;
 --y: 0%;
 --pad-x: 0px;
 --pad-y: 0px;
 --offset: calc(var(
 --pad-x) + var(--x)), calc(var(--pad-y) + var(--y)), 0px;
 transform: translate3d(var(--offset)) !important;
}
.tooltip.to-top {
	--arrow-x: 0%;
	--arrow-degree: 0deg;
    bottom: calc(100% + 5px);
	left: 50%;
    transform: translateX(-50%);
}
.tooltip.to-bottom {
	--arrow-x: 0%;
	--arrow-degree: 0deg;
    top: calc(100% + 5px);
	left: 50%;
    transform: translateX(-50%);
}
.tooltip.to-right {
 --arrow-y: 50%;
 --arrow-degree: 0deg;
 left: calc(100% + 10px);
 top: 50%;
 transform: translateY(-50%);
}
.tooltip.to-left {
 --arrow-y: 50%;
 --arrow-degree: 0deg;
 top: 50%;
 right:calc(10px + 100%);
 transform: translateY(-50%);
}
.tooltip:before {
	content: attr(data-details);
}
.tooltip:after {
	content: '';
    position: absolute;
    border: 5px solid transparent;
	transform: translate(var(--arrow-x), var(--arrow-y)) rotate(var(--arrow-degree));
}
.tooltip.no-arrow:after {
  content:unset;
}
.tooltip.to-top:after {
	border-top-color: var(--arrow-color);
	top: 100%;
	left: 45%;
}
.tooltip.to-left:after {
    bottom: 50%;
    border-left-color: var(--arrow-color);
    left: 100%;
}
.tooltip.to-bottom:after {
	border-bottom-color: var(--arrow-color);
	bottom: 100%;
	left: 45%;
}
.tooltip.to-right:after {
	bottom: 50%;
    border-right-color: var(--arrow-color);
    right: 100%;
}

*:hover > .tooltip:not(.no-hover),
*:focus > .tooltip:not(.no-focus),
*:focus-within > .tooltip:not(.no-focus),
.tooltip:not(.no-hover):hover,
.tooltip:not(.no-focus-within):focus-within,
.tooltip-parent:hover > .tooltip,
.tooltip-parent:focus > .tooltip,
.tooltip-parent:focus-within > .tooltip,
.tooltip.show {
 visibility: visible;
 opacity: 1;
 z-index: 3;
}
/*

IMPORTANT

For a tooltip that is not shown, an explicit styling of its child
with visibility: visible; triggers a hover event that then makes tooltip visible

*/

/*--------------recent-------------------*/
.tooltip:not(.show).no-hover.no-focus .tooltip,
.tooltip:not(.show).no-hover.no-focus .tooltip.md\:show,
.tooltip:not(.show).no-hover.no-focus .tooltip.sm\:show,
.tooltip:not(.show).no-hover.no-focus .tooltip.lg\:show,
.tooltip:not(.show).no-hover.no-focus .tooltip.xl\:show {
	pointer-events: none;
}

/*--------------recent-------------------*/

*:not(:hover) > .tooltip:not(.no-focus),
.tooltip-parent:not(:hover) > .tooltip {
  z-index: 2;
 transition: opacity 0.1s var(--delay), transform 0.15s var(--delay) ease, visibility 0s calc(var(--delay) + 0.15s);
}
.tooltip-parent:focus-within > .tooltip,
*:focus-within > .tooltip {
  --focus-in-transition-duration:0s;
  transition: opacity calc(var(--focus-in-transition-duration) + 0.08s), transform calc(var(--focus-in-transition-duration) + 0.09s) ease, visibility calc(var(--focus-in-no-focus-transition-duration) + 0s) 0.1s !important;
}
*:focus-within > .tooltip.no-focus {
	/*
	  a very good preset
	  --focus-within-no-focus-transition: opacity 0.5s ease, transform 0.3s 0.05s ease-out, visibility 0s 0.12s;
	*/
	--focus-within-no-focus-transition: none;
	transition: var(--focus-within-no-focus-transition) !important;
}


/*slide should be used with the no-hover class */
.tooltip.slide {
 --x: 20%;
 /*the values below were as the result of a long-winded, sweaty tweaking, use them as increment for custom durations ^_~ */
 transition: opacity 0.5s ease, transform 0.3s 0.17s ease-out, visibility 0s 0.12s;
}

.tooltip.slide.show {
  --x: 0%;
  z-index: 1;
  transition: opacity 0.5s, transform 0.3s 0.12s ease, visibility 0s 0.06s;
}

*:focus-within > .tooltip:not(.no-hover),
.tooltip:focus-within {
	transition-duration: 0.1s;
	transition-delay: 0s;
}
*:not(:focus-within) > .tooltip.no-hover:not(.no-focus):not(.show) {
	transition: var(--focus-out-no-hover-transition);
}

*:hover > .tooltip.to-top,
*:focus > .tooltip.to-top,
*:focus > .tooltip.no-hover,
.tooltip-parent:hover > .tooltip.to-top,
.tooltip-parent:focus > .tooltip.to-top {
 transform: translate(-50%, -4px);
}
*:hover > .tooltip.to-bottom,
*:focus > .tooltip.to-bottom,
.tooltip-parent:hover > .tooltip.to-bottom,
.tooltip-parent:focus > .tooltip.to-bottom {
 transform: translate(-50%, 4px);
}
*:hover > .tooltip.to-left,
*:focus > .tooltip.to-left,
.tooltip-parent:hover > .tooltip.to-left,
.tooltip-parent:focus > .tooltip.to-left {
 transform: translate(-4px, -50%);
}
*:hover > .tooltip.to-right,
*:focus > .tooltip.to-right,
.tooltip-parent:hover > .tooltip.to-right,
.tooltip-parent:focus > .tooltip.to-right {
 transform: translate(4px, -50%);
}
.tooltip-parent:hover > .tooltip,
*:hover > .tooltip {
  z-index: 2;
}
.bulge-center {
	background: linear-gradient(to right, transparent, currentColor, transparent);
}
.bulge-left {
 background: linear-gradient(to right, currentColor, transparent, transparent);
}
.bulge-right {
 background: linear-gradient(to right, transparent, transparent, currentColor);
}

:root {
  --base-fractional-unit: 0.125rem;
  --base-whole-number-unit: 0.25rem;
  }
  html.no-backdrop-support nav#page-nav > .backdrop-blur, html.no-backdrop-support nav#page-nav div.__services { --tw-bg-opacity: 0.9 !important; } main.main #solutions .tooltip .tooltip.to-top { white-space:normal; text-align: center; transform: translateX(0%); } .vh-1\/2 { height: 50vh; } /*skeleton preload styles for #testimonials, moved here*/ #testimonials.loading li .hover-prompt { visibility: hidden; }#testimonials.loading h4, #testimonials.loading li figure img,#testimonials.loading li figcaption,#testimonials.loading li > div.flex-1 p,#testimonials.loading li div.tooltip { color: transparent !important; animation: skeleton-loading 0.8s ease-in-out infinite alternate; border-radius: 0.5em;}#testimonials.loading h4 { width: 60%; height: 2.5em;}#testimonials.loading ul { border-width: 2px;}#testimonials.loading li figure img { height: 7em; padding: 3em; border: none;}#testimonials.loading li figcaption { height: 0.8em; margin-top: 0.5em; width: 100%;}#testimonials.loading li > div.flex-1 { background: none;}#testimonials.loading li > div.flex-1 p { padding: 1.5em; height: 2em; width: 50%; margin: auto}#testimonials.loading li div.tooltip { padding: 0.4em; height: 4em; right: 0px; left: 0px; visibility: visible !important; margin: 0px 1em 0px 1em; opacity: 1 !important; bottom: 20px;}/*end for section_4*/ .space-x-auto >:not([hidden]) { margin-right: auto; margin-left: auto; } html { scroll-behavior: smooth; } @font-face { font-family: 'Fredoka'; src: url('../font.woff2') format('woff2'); } .font-fredoka { font-family: 'Fredoka' } body { height: 100vh; } html *:hover > .decorate > div, html .decorate-parent:hover > .decorate > div { --tw-scale-x:8; --tw-scale-y:8;transform: scale3d(var(--tw-scale-x),var(--tw-scale-y),1); --tw-bg-opacity: 0.15; } html * > .decorate.out > div, html .decorate-parent > .decorate.out > div { --tw-scale-x:8;--tw-scale-y:8; } *:hover > .decorate.out > div, .decorate-parent:hover > .decorate.out > div { --tw-scale-x:1;--tw-scale-y:1 } .rounded-inherit { border-radius: inherit; } .z-1 { z-index: 1; } .z-force-unset { z-index: unset !important; } .\[\&\>\*\]\:p-1 > * { padding: var(--base-whole-number-unit); } /* scroll detection feature for sections on the page */ @supports (scroll-snap-align: start) { main.main { scroll-snap-type: y proximity; scroll-padding-top: 5vh; overflow-y: scroll; } main.main > section { /* Snap align start.*/ scroll-snap-align: start; } } .\[\&\>\*\]\:text-center > * { text-align: center; } .ripple { overflow: hidden; } .underlined { border-bottom: 1px solid currentColor; } .skeleton { color: transparent !important; animation: skeleton-loading 0.8s ease-in-out infinite alternate; } .left-unset { left: unset; } @keyframes skeleton-loading { 0% { background-color: hsl(200, 20%, 80%); } 100% { background-color: hsl(200, 20%, 95%); } } .\[\&\>\*\]\:hidden > * { display: none; } /*END*/ .\[\&\>a\>div\]\:py-6\:px-1>a > div {padding: calc(var(--base-whole-number-unit) * 6) calc(var(--base-whole-number-unit) * 1);} nav aside >a:focus>*,nav aside >a:active>*,nav aside >a:visited>* { border-width: 0px 2px; border-color: currentColor; } nav aside >a:hover>div,nav aside >a:focus>div { animation: glitch-anim-text 3.2s linear; } nav aside >a {flex: 1 1 0;} .collapse-menu .-skew-x-12 { animation: ping 0.3s ease infinite; } nav.collapse-menu {left: 45%;right: 45%;bottom:4%; margin: 0px;will-change: left, right, bottom;} .collapse-menu aside { display: block; } .collapse-menu aside a.logo div { display: inline-block; } .collapse-menu aside a.logo .tooltip {display:none;} .collapse-menu aside a:not(.logo) { position: absolute; visibility: hidden; margin: 0px; } .\[\&\>a\]\:z-1 > a { z-index: 1; } .\[\&\>a\]\:whitespace-pre > a { white-space: pre; } nav aside a:hover .fa,nav aside a:focus .fa,nav aside a:active .fa { --tw-rotate-x: -180deg; } @media (max-width: 450px) { .base\:\[\&\>a\]\:text-xss > a, #services li figure .tooltip { font-size: 2.56vw; } } @media (min-width: 768px) {.md\:\[\&\>\*\]\:block > * { display: inline-block; }  }@media (min-width: 640px) { .sm\:\[\&\>a\]\:w-full > a { width: 100%; } main.main #solutions .tooltip .tooltip.to-top { white-space: pre; } .tooltip.sm\:show { visibility: visible; opacity: 1; z-index: 3; --x: 0%; } .tooltip.sm\:show.no-hover, .tooltip.sm\:show.no-focus { pointer-events: auto; } } @media (min-width: 768px) { .tooltip.md\:show { visibility: visible; opacity: 1; z-index: 3; --x: 0%; } .tooltip.md\:show.no-hover, .tooltip.md\:show.no-focus { pointer-events: auto; } } @media (min-width: 1024px) { .tooltip.lg\:show { visibility: visible; opacity: 1; z-index: 3; --x: 0%; } .tooltip.lg\:show.no-hover, .tooltip.lg\:show.no-focus { pointer-events: auto; } } @media (min-width: 1280px) { .tooltip.xl\:show { visibility: visible; opacity: 1; z-index: 3; --x: 0%; } .tooltip.xl\:show.no-hover, .tooltip.xl\:show.no-focus { pointer-events: auto; } } .transition-hr { transition: transform 4.2s 1.5s cubic-bezier(0.215, 0.61, 0.355, 1); } #solutions.loading .tooltip, #solutions.loading h3, #solutions.loading button, #solutions.loading .slides, #solutions.loading aside p, #solutions.loading aside a { color: transparent !important; animation: skeleton-loading 0.8s ease-in-out infinite alternate; border-radius: 1rem; } #solutions.loading .slides { padding: 5rem; height: 35vh; } #solutions.loading h3 { height: 40vh; padding: 5rem; border-color: transparent; } main.main #solutions.loading button { opacity: .8; cursor: not-allowed; pointer-event: none; padding: 1.2rem; width: 5.5rem; margin: 0.2rem; } #solutions.loading aside p, #solutions.loading aside a { margin: 0.1rem; width: 3rem; padding: 0.3rem } #solutions.loading aside { position: relative; } #solutions.loading aside div { display: flex; } html.dark-mode #solutions aside .pill.selected {color:white;} #solutions aside .pill.selected { border: 2px solid currentColor; color: black; display: inline-block; } #solutions aside .pill { border-color: currentColor; color: gray; border-width: 0px 0px 2px 0px; --tw-bg-opacity: 1; padding: 0px var(--base-whole-number-unit); } @keyframes glitch-anim-text { 0% { transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1); -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); } 5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); } 9% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1); } 10%, 100% { transform: translate3d(0,0,0) scale3d(1,1,1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }
/*added toggle_wrapper styles*/
.toggle-wrapper {
  --slider-checked-color: #555;
  --slider-rail-checked-color: lightgray;
  --slider-rail-color: rgb(189,193,198);
  align-items: center;
  display: inline-flex;
  font-size: 1em;
  line-height: 1.1em;
  color: var(--slider-checked-color);
  width: max-content;
}
.toggle-wrapper [type=checkbox] {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.toggle-wrapper .toggle {
  cursor: pointer;
  margin-inline-start: 8px;
  padding: 8px 4px;
  position: relative;
}
.toggle-wrapper [type=checkbox]:checked ~ .toggle:before {
  background-color: var(--slider-rail-checked-color);
  opacity: 0.8;
}
.toggle-wrapper .toggle:before, .toggle-wrapper .toggle:after {
  content: '';
  display: block;
  margin: 0 3px;
  transition: all 100ms cubic-bezier(0.4, 0, 1, 1);
}
.toggle-wrapper .toggle::before {
  background-color: var(--slider-rail-color);
  border-radius: 0.65em;
  height: 0.9em;
  width: 2em;
}
.toggle-wrapper .toggle::after {
  border: 2px solid rgb(189 193 198 / 50%);
  border-radius: 100px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 40%);
  padding: 0.5em;
  position: absolute;
  top: 35%;
  transform: translate3d(-20%, -50%, 0px);
}
.toggle-wrapper [type=checkbox]:checked ~ .toggle:after {
  background: currentColor;
  transform: translate3d(calc(2em - 90%), -50%, 0px);
  border-color: currentColor;
}
.toggle-wrapper [type=checkbox]:checked + .tooltip:before {
  content: 'acitvated';
  font-family: Fredoka;
}