/*! tailwindcss v2.2.4 | MIT License | https://tailwindcss.com */
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* navbar */
#menu {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0px 13px 20px 0px rgba(0,0,0,0.07);
-webkit-box-shadow: 0px 13px 20px 0px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 13px 20px 0px rgba(0,0,0,0.07);
}

#menu ul>li>a {
    display: block;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
    margin-left: 30px;
}

#menu ul>li>a:active {
    color: rgba(31, 41, 55)
}

nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: inherit;
}

/* stroke */
nav.stroke ul li a {
  position: relative;
  margin-left: 3px;
}
nav.stroke ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 0%;
  content: '.';
  color: transparent;
  background: #3b82f6;
  height: 3px;
} 
nav.stroke ul li a:hover:after {
  width: 100%;
}

#menu .btn-nav {
    height: 100%;
    color: rgba(55, 65, 81);
    border: none;
    background-color: transparent;
}
#menu .btn-nav:hover {
    height: 100%;
    color: rgba(31, 41, 55);
    border: none;
    background-color: transparent;
}
*,
::after,
::before {
    box-sizing: border-box
}

html {
    overflow-x: hidden;
    max-width: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    text-rendering: optimizeLegibility
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

body {
    font-family: 'Noto Sans', sans-serif;
}

b {
    font-weight: bolder
}

button,
input {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button {
    text-transform: none
}

[type=button],
button {
    -webkit-appearance: button
}

progress {
    vertical-align: baseline
}

h1,
h2,
p {
    margin: 0
}

button {
    background-color: transparent;
    background-image: none
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

html {
    font-family: 'Noto Sans', sans-serif;
    line-height: 1.5
}

body {
    font-family: inherit;
    line-height: inherit
}

*,
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor
}

img {
    border-style: solid
}

input::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input:-ms-input-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder {
    opacity: 1;
    color: #9ca3af
}

button {
    cursor: pointer
}

h1,
h2 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

button,
input {
    padding: 0;
    line-height: inherit;
    color: inherit
}

embed,
iframe,
img,
svg {
    display: block;
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
}

*,
::after,
::before {
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity))
}

:root {
    background-color: hsla(var(--b1)/var(--tw-bg-opacity, 1));
    color: hsla(var(--bc)/var(--tw-text-opacity, 1))
}

html {
    -webkit-tap-highlight-color: transparent
}

:root {
    --p: 259 94.4% 51.2%;
    --pf: 259 94.3% 41%;
    --pc: 0 0% 100%;
    --s: 314 100% 47.1%;
    --sf: 314 100% 37.1%;
    --sc: 0 0% 100%;
    --a: 174 60% 51%;
    --af: 174 59.8% 41%;
    --ac: 0 0% 100%;
    --n: 219 14.1% 27.8%;
    --nf: 222 13.4% 19%;
    --nc: 0 0% 100%;
    --b1: 0 0% 100%;
    --b2: 210 20% 98%;
    --b3: 216 12.2% 83.9%;
    --bc: 215 27.9% 16.9%;
    --in: 207 89.8% 53.9%;
    --su: 174 100% 29%;
    --wa: 36 100% 50%;
    --er: 14 100% 57.1%;
    --rounded-box: 1rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 1.9rem;
    --animation-btn: 0.25s;
    --animation-input: .4s;
    --padding-card: 2rem;
    --btn-text-case: uppercase;
    --btn-focus-scale: 0.95;
    --navbar-padding: .5rem;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
    --tab-spacer: 0.5rem;
    --focus-ring: 2px;
    --focus-ring-offset: 2px;
    --glass-opacity: 30%;
    --glass-border-opacity: 10%;
    --glass-reflex-degree: 100deg;
    --glass-reflex-opacity: 10%;
    --glass-blur: 40px;
    --glass-text-shadow-opacity: 5%
}

@media (prefers-color-scheme:dark) {
    :root {
        --p: 259 94% 61%;
        --pf: 259 94.4% 51.2%;
        --pc: 0 0% 100%;
        --s: 314 100% 47.1%;
        --sf: 314 100% 37.1%;
        --sc: 0 0% 100%;
        --a: 174 60% 51%;
        --af: 174 59.8% 41%;
        --ac: 0 0% 100%;
        --n: 222 13.4% 19%;
        --nf: 223 13.7% 10%;
        --nc: 0 0% 100%;
        --b1: 219 14.1% 27.8%;
        --b2: 222 13.4% 19%;
        --b3: 223 13.7% 10%;
        --bc: 228 14.3% 93.1%;
        --in: 202 100% 70%;
        --su: 89 61.6% 52%;
        --wa: 54 68.8% 63.5%;
        --er: 0 100% 71.8%
    }
}

[data-theme=emerald] {
    --p: 141 50% 60%;
    --pf: 141 49.8% 50%;
    --pc: 210 20% 98%;
    --s: 219 96.1% 60%;
    --sf: 219 96.1% 50%;
    --sc: 210 20% 98%;
    --a: 10 81.2% 56.1%;
    --af: 10 81.2% 45.9%;
    --ac: 210 20% 98%;
    --n: 219 20.3% 25.1%;
    --nf: 220 19.5% 15.1%;
    --nc: 210 20% 98%;
    --b1: 0 0% 100%;
    --b2: 210 20% 98%;
    --b3: 0 0% 94.9%;
    --bc: 219 20.3% 25.1%;
    --in: 207 89.8% 53.9%;
    --su: 174 100% 29%;
    --wa: 36 100% 50%;
    --er: 14 100% 57.1%;
    --animation-btn: 0;
    --animation-input: 0;
    --btn-focus-scale: 1
}

.container {
    width: 100%
}

@media (min-width:640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:1536px) {
    .container {
        max-width: 1536px
    }
}

.crunchify-top:hover {
    color: #1aa1ca !important
}

.crunchify-top {
    position: fixed;
    bottom: 70px;
    right: 70px;
    cursor: pointer;
    z-index: 999
}

.top-arrow {
    position: absolute;
    padding: 0 3px
}

.btn {
    border-color: transparent;
    border-color: hsla(var(--n)/var(--tw-border-opacity, 1));
    cursor: pointer;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: .15s;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    border-radius: var(--rounded-btn, .5rem);
    height: 3rem;
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 2;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 3rem;
    font-weight: 600;
    text-transform: uppercase;
    text-transform: var(--btn-text-case, uppercase);
    border-width: var(--border-btn, 1px);
    -webkit-animation: button-pop var(--animation-btn, .25s) ease-out;
    animation: button-pop var(--animation-btn, .25s) ease-out;
    --tw-bg-opacity: 1;
    background-color: hsla(var(--n)/var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    color: hsla(var(--nc)/var(--tw-text-opacity, 1))
}

.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

@-webkit-keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-radius: var(--rounded-box, 1rem)
}

.card:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.checkbox:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .5rem .25rem
}

.hero {
    background-position: 50%;
    background-size: cover;
    display: grid;
    place-items: center;
    width: 100%
}

.hero>* {
    grid-column-start: 1;
    grid-row-start: 1
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    max-width: 80rem;
    padding: 1rem;
    gap: 1rem
}

.input {
    flex-shrink: 1;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: .15s;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    height: 3rem;
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 2;
    padding-left: 1rem;
    padding-right: 1rem;
    --tw-bg-opacity: 1;
    background-color: hsla(var(--b1)/var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    --tw-border-opacity: 0;
    border-color: hsla(var(--bc)/var(--tw-border-opacity, 1));
    border-width: 1px;
    border-radius: var(--rounded-btn, .5rem)
}

.input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsla(var(--bc)/.2)
}

.link {
    cursor: pointer;
    text-decoration: underline
}

.modal {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    z-index: 999;
    --tw-bg-opacity: 1;
    --tw-bg-opacity: 0.4;
    background-color: hsla(var(--nf)/var(--tw-bg-opacity, 1));
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: .15s;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

@media (min-width:640px) {
    .modal {
        align-items: center
    }
}

@media (min-width:640px) {
    .modal-box {
        max-width: 32rem;
        --tw-scale-x: .9;
        --tw-scale-y: .9;
        --tw-translate-y: 0px;
        border-bottom-left-radius: var(--rounded-box, 1rem);
        border-bottom-right-radius: var(--rounded-box, 1rem)
    }
}

.modal-toggle:checked~.modal,
.modal:target {
    opacity: 1;
    pointer-events: auto;
    visibility: visible
}

.modal-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem
}

.modal-toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

.navbar {
    display: flex;
    align-items: center;
    padding: var(--navbar-padding, .5rem);
    min-height: 4rem
}

.navbar>li>a {
    color: #000
}

.navbar>* {
    display: flex;
    align-items: center
}

.progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    position: relative;
    width: 0%;
    height: .5rem;
    border-radius: var(--rounded-box, 1rem)
}

.toggle:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.btn:active:focus,
.btn:active:hover {
    -webkit-animation: none;
    animation: none;
    transform: scale(var(--btn-focus-scale, .95))
}

.btn:hover {
    --tw-bg-opacity: 1;
    background-color: hsla(var(--nf)/var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: hsla(var(--nf)/var(--tw-border-opacity, 1))
}

.btn:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--nf))
}

.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    border-width: 1px;
    color: currentColor
}

.btn-ghost:hover {
    background-color: transparent;
    border-color: transparent
}

.btn-ghost:focus-visible {
    box-shadow: 0 0 0 2px currentColor
}

.btn-outline {
    background-color: transparent;
    border-color: currentColor;
    --tw-text-opacity: 1;
    color: hsla(var(--bc)/var(--tw-text-opacity, 1))
}

.btn-outline:hover {
    --tw-bg-opacity: 1;
    background-color: hsla(var(--bc)/var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: hsla(var(--bc)/var(--tw-border-opacity, 1));
    --tw-text-opacity: 1;
    color: hsla(var(--b1)/var(--tw-text-opacity, 1))
}

@-webkit-keyframes button-pop {
    to {
        transform: scale(1)
    }
}

@keyframes button-pop {
    0% {
        transform: scale(var(--btn-focus-scale, .95))
    }

    40% {
        transform: scale(1.02)
    }

    to {
        transform: scale(1)
    }
}

.card:focus-visible {
    box-shadow: 0 0 0 2px currentColor
}

.checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

@-webkit-keyframes checkmark {
    to {
        transform: rotate(45deg) translate(-1px, -1px) scale(1)
    }
}

@-webkit-keyframes checkmark {
    to {
        transform: rotate(45deg) translate(-1px, -1px) scale(1)
    }
}

@keyframes checkmark {
    30% {
        transform: rotate(45deg) translate(-1px, -1px) scale(1.2)
    }

    50% {
        transform: rotate(45deg) translate(-1px, -1px) scale(.8)
    }

    to {
        transform: rotate(45deg) translate(-1px, -1px) scale(1)
    }
}

@keyframes checkmark {
    30% {
        transform: rotate(45deg) translate(-1px, -1px) scale(1.2)
    }

    50% {
        transform: rotate(45deg) translate(-1px, -1px) scale(.8)
    }

    to {
        transform: rotate(45deg) translate(-1px, -1px) scale(1)
    }
}

.label a:hover {
    --tw-text-opacity: 1;
    color: hsla(var(--bc)/var(--tw-text-opacity, 1))
}

.link:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.link:focus-visible {
    box-shadow: 0 0 0 2px currentColor
}

.modal-box {
    --tw-bg-opacity: 1;
    background-color: hsla(var(--b1)/var(--tw-bg-opacity, 1));
    padding: 1.5rem;
    width: 100%;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-y: 2.5rem;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: .15s;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    border-top-left-radius: var(--rounded-box, 1rem);
    border-top-right-radius: var(--rounded-box, 1rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

.modal-toggle:checked~.modal .modal-box,
.modal:target .modal-box {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-translate-y: 0px
}

.modal-action>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem*var(--tw-space-x-reverse));
    margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse)))
}

.progress::-moz-progress-bar {
    --tw-bg-opacity: 1;
    background-color: hsla(var(--n)/var(--tw-bg-opacity, 1))
}

.progress::-webkit-progress-bar {
    --tw-bg-opacity: 1;
    --tw-bg-opacity: 0.2;
    background-color: hsla(var(--n)/var(--tw-bg-opacity, 1));
    border-radius: var(--rounded-box, 1rem)
}

.progress::-webkit-progress-value {
    --tw-bg-opacity: 1;
    background-color: hsla(var(--nf)/var(--tw-bg-opacity, 1));
    border-radius: var(--rounded-box, 1rem)
}

.toggle {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

@keyframes togglemark-off {
    50% {
        margin-left: 0
    }
}

@keyframes togglemark-on {
    50% {
        margin-left: 2px
    }
}

.rounded-btn {
    border-radius: var(--rounded-btn, .5rem)
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.top-0 {
    top: 0
}

.z-20 {
    z-index: 20
}

.z-40 {
    z-index: 40
}

.-m-2 {
    margin: -.5rem
}

.-m-4 {
    margin: -1rem
}

.mx-0 {
    margin-left: 0;
    margin-right: 0
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem
}

.mt-0 {
    margin-top: 0
}

.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-3 {
    margin-top: .75rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-40 {
    margin-top: 10rem
}

.mt-auto {
    margin-top: auto
}

.mr-2 {
    margin-right: .5rem
}

.mr-3 {
    margin-right: .75rem
}

.mr-5 {
    margin-right: 1.25rem
}

.mr-10 {
    margin-right: 2.5rem
}

.mb-0 {
    margin-bottom: 0
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-10 {
    margin-bottom: 2.5rem
}

.-mb-10 {
    margin-bottom: -2.5rem
}

.ml-3 {
    margin-left: .75rem
}

.ml-6 {
    margin-left: 1.5rem
}

.ml-auto {
    margin-left: auto
}

.block {
    display: block
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.h-1 {
    height: .25rem
}

.h-5 {
    height: 1.25rem
}

.h-64 {
    height: 16rem
}

.h-full {
    height: 100%
}

.w-1 {
    width: .25rem
}

.w-2 {
    width: .5rem
}

.w-4 {
    width: 1rem
}

.w-5 {
    width: 1.25rem
}

.w-auto {
    width: auto
}

.w-full {
    width: 100%
}

.max-w-md {
    max-width: 28rem
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-4xl {
    max-width: 56rem
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-grow {
    flex-grow: 1
}

.transform {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform-none {
    transform: none
}

.scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes ping {

    100%,
    75% {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(.8, 0, 1, 1);
        animation-timing-function: cubic-bezier(.8, 0, 1, 1)
    }

    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1);
        animation-timing-function: cubic-bezier(0, 0, .2, 1)
    }
}

.animate-pulse {
    -webkit-animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

.cursor-pointer {
    cursor: pointer
}

.list-none {
    list-style-type: none
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.flex-row {
    flex-direction: row
}

.flex-row-reverse {
    flex-direction: row-reverse
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-nowrap {
    flex-wrap: nowrap
}

.place-content-center {
    place-content: center
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-items-center {
    justify-items: center
}

.self-end {
    align-self: flex-end
}

.overflow-hidden {
    overflow: hidden
}

.rounded-none {
    border-radius: 0
}

.rounded {
    border-radius: .25rem
}

.rounded-lg {
    border-radius: .5rem
}

.border-0 {
    border-width: 0
}

.border-2 {
    border-width: 2px
}

.border-b {
    border-bottom-width: 1px
}

.border-transparent {
    border-color: transparent
}

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity))
}

.border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgba(55, 65, 81, var(--tw-border-opacity))
}

.border-indigo-200 {
    --tw-border-opacity: 1;
    border-color: rgba(199, 210, 254, var(--tw-border-opacity))
}

.bg-transparent {
    background-color: transparent
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity))
}

.bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity))
}

.bg-blue-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(29, 78, 216, var(--tw-bg-opacity))
}

.bg-indigo-100 {
    --tw-bg-opacity: 1;
    background-color: rgba(224, 231, 255, var(--tw-bg-opacity))
}

.bg-base-200 {
    --tw-bg-opacity: 1;
    background-color: hsla(var(--b2) / var(--tw-bg-opacity))
}

.bg-opacity-75 {
    --tw-bg-opacity: 0.75
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: center
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.object-scale-down {
    -o-object-fit: scale-down;
    object-fit: scale-down
}

.object-center {
    -o-object-position: center;
    object-position: center
}

.p-2 {
    padding: .5rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-10 {
    padding: 2.5rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-px {
    padding-left: 1px;
    padding-right: 1px
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem
}

.py-px {
    padding-top: 1px;
    padding-bottom: 1px
}

.pt-4 {
    padding-top: 1rem
}

.pt-px {
    padding-top: 1px
}

.pr-4 {
    padding-right: 1rem
}

.pb-4 {
    padding-bottom: 1rem
}

.pb-10 {
    padding-bottom: 2.5rem
}

.pl-8 {
    padding-left: 2rem
}

.pl-20 {
    padding-left: 5rem
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.text-5xl {
    font-size: 3rem;
    line-height: 1
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.italic {
    font-style: italic
}

.leading-none {
    line-height: 1
}

.leading-relaxed {
    line-height: 1.625
}

.tracking-widest {
    letter-spacing: .1em
}

.text-white {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgba(107, 114, 128, var(--tw-text-opacity))
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgba(75, 85, 99, var(--tw-text-opacity))
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgba(31, 41, 55, var(--tw-text-opacity))
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgba(17, 24, 39, var(--tw-text-opacity))
}

.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgba(96, 165, 250, var(--tw-text-opacity))
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgba(59, 130, 246, var(--tw-text-opacity))
}

.text-blue-700 {
    --tw-text-opacity: 1;
    color: rgba(29, 78, 216, var(--tw-text-opacity))
}

.text-indigo-300 {
    --tw-text-opacity: 1;
    color: rgba(165, 180, 252, var(--tw-text-opacity))
}

.no-underline {
    text-decoration: none
}

*,
::after,
::before {
    --tw-shadow: 0 0 #0000
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}

*,
::after,
::before {
    --tw-ring-inset: var(--tw-empty, );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000
}

.filter {
    --tw-blur: var(--tw-empty, );
    --tw-brightness: var(--tw-empty, );
    --tw-contrast: var(--tw-empty, );
    --tw-grayscale: var(--tw-empty, );
    --tw-hue-rotate: var(--tw-empty, );
    --tw-invert: var(--tw-empty, );
    --tw-saturate: var(--tw-empty, );
    --tw-sepia: var(--tw-empty, );
    --tw-drop-shadow: var(--tw-empty, );
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.grayscale {
    --tw-grayscale: grayscale(100%)
}

/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,
::after,
::before {
    box-sizing: border-box
}

html {
    -moz-tab-size: 4;
    tab-size: 4
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

body {
    font-family: 'Noto Sans', sans-serif;
}

b {
    font-weight: bolder
}

button,
input {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button {
    text-transform: none
}

[type=button],
button {
    -webkit-appearance: button
}

progress {
    vertical-align: baseline
}

h1,
h2,
h3,
p {
    margin: 0
}

button {
    background-color: transparent;
    background-image: none
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

html {
    font-family: 'Noto Sans', sans-serif;
    line-height: 1.5
}

body {
    font-family: inherit;
    line-height: inherit
}

*,
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor
}

img {
    border-style: solid
}

input::placeholder {
    opacity: 1;
    color: #9ca3af
}


button {
    cursor: pointer
}

h1,
h2,
h3 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

button,
input {
    padding: 0;
    line-height: inherit;
    color: inherit
}

embed,
iframe,
img,
svg {
    display: block;
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
}

[hidden] {
    display: none
}

*,
::after,
::before {
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity))
}

.container {
    width: 100%
}

@media (min-width:640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:1536px) {
    .container {
        max-width: 1536px
    }
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.top-0 {
    top: 0
}

.right-0 {
    right: 0
}

.left-0 {
    left: 0
}

.z-20 {
    z-index: 20
}

.z-40 {
    z-index: 40
}

.m-2 {
    margin: .5rem
}

.m-4 {
    margin: 1rem
}

.m-10 {
    margin: 2.5rem
}

.-m-2 {
    margin: -.5rem
}

.-m-4 {
    margin: -1rem
}

.mx-0 {
    margin-left: 0;
    margin-right: 0
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem
}

.mt-0 {
    margin-top: 0
}

.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-3 {
    margin-top: .75rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-40 {
    margin-top: 10rem
}

.mt-auto {
    margin-top: auto
}

.mr-2 {
    margin-right: .5rem
}

.mr-3 {
    margin-right: .75rem
}

.mr-5 {
    margin-right: 1.25rem
}

.mr-10 {
    margin-right: 2.5rem
}

.mb-0 {
    margin-bottom: 0
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-10 {
    margin-bottom: 2.5rem
}

.-mb-10 {
    margin-bottom: -2.5rem
}

.ml-3 {
    margin-left: .75rem
}

.ml-6 {
    margin-left: 1.5rem
}

.ml-auto {
    margin-left: auto
}

.block {
    display: block
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.h-1 {
    height: .25rem
}

.h-5 {
    height: 1.25rem
}

.h-64 {
    height: 16rem
}

.h-full {
    height: 100%
}

.w-1 {
    width: .25rem
}

.w-2 {
    width: .5rem
}

.w-4 {
    width: 1rem
}

.w-5 {
    width: 1.25rem
}

.w-auto {
    width: auto
}

.w-1\/2 {
    width: 50%
}

.w-full {
    width: 100%
}

.max-w-md {
    max-width: 28rem
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-4xl {
    max-width: 56rem
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-grow {
    flex-grow: 1
}

.transform {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform-none {
    transform: none
}

.scale-0 {
    --tw-scale-x: 0;
    --tw-scale-y: 0
}

.scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1
}

.scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05
}

.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes ping {

    100%,
    75% {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8, 0, 1, 1)
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, .2, 1)
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

.cursor-pointer {
    cursor: pointer
}

.list-none {
    list-style-type: none
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.flex-row {
    flex-direction: row
}

.flex-row-reverse {
    flex-direction: row-reverse
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-nowrap {
    flex-wrap: nowrap
}

.place-content-center {
    place-content: center
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-items-center {
    justify-items: center
}

.self-end {
    align-self: flex-end
}

.overflow-hidden {
    overflow: hidden
}

.rounded-none {
    border-radius: 0
}

.rounded {
    border-radius: .25rem
}

.rounded-lg {
    border-radius: .5rem
}

.border-0 {
    border-width: 0
}

.border-2 {
    border-width: 2px
}

.border {
    border-width: 1px
}

.border-t-2 {
    border-top-width: 2px
}

.border-b-2 {
    border-bottom-width: 2px
}

.border-b {
    border-bottom-width: 1px
}

.border-dashed {
    border-style: dashed
}

.border-transparent {
    border-color: transparent
}

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity))
}

.border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgba(55, 65, 81, var(--tw-border-opacity))
}

.border-indigo-200 {
    --tw-border-opacity: 1;
    border-color: rgba(199, 210, 254, var(--tw-border-opacity))
}

.hover\:border-transparent:hover {
    border-color: transparent
}

.bg-transparent {
    background-color: transparent
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity))
}

.bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity))
}

.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(59, 130, 246, var(--tw-bg-opacity))
}

.bg-blue-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(29, 78, 216, var(--tw-bg-opacity))
}

.bg-indigo-100 {
    --tw-bg-opacity: 1;
    background-color: rgba(224, 231, 255, var(--tw-bg-opacity))
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}

.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(243, 244, 246, var(--tw-bg-opacity))
}

.hover\:bg-blue-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(59, 130, 246, var(--tw-bg-opacity))
}

.hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(29, 78, 216, var(--tw-bg-opacity))
}

.bg-opacity-75 {
    --tw-bg-opacity: 0.75
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: center
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.object-contain {
    object-fit: contain
}

.object-scale-down {
    object-fit: scale-down
}

.object-center {
    object-position: center
}

.p-1 {
    padding: .25rem
}

.p-2 {
    padding: .5rem
}

.p-3 {
    padding: .75rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-10 {
    padding: 2.5rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
}

.px-px {
    padding-left: 1px;
    padding-right: 1px
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem
}

.py-px {
    padding-top: 1px;
    padding-bottom: 1px
}

.pt-4 {
    padding-top: 1rem
}

.pt-px {
    padding-top: 1px
}

.pr-4 {
    padding-right: 1rem
}

.pb-4 {
    padding-bottom: 1rem
}

.pb-10 {
    padding-bottom: 2.5rem
}

.pl-8 {
    padding-left: 2rem
}

.pl-20 {
    padding-left: 5rem
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.text-5xl {
    font-size: 3rem;
    line-height: 1
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.italic {
    font-style: italic
}

.leading-none {
    line-height: 1
}

.leading-relaxed {
    line-height: 1.625
}

.tracking-widest {
    letter-spacing: .1em
}

.text-white {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgba(107, 114, 128, var(--tw-text-opacity))
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgba(75, 85, 99, var(--tw-text-opacity))
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgba(31, 41, 55, var(--tw-text-opacity))
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgba(17, 24, 39, var(--tw-text-opacity))
}

.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgba(96, 165, 250, var(--tw-text-opacity))
}

.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgba(59, 130, 246, var(--tw-text-opacity))
}

.text-blue-700 {
    --tw-text-opacity: 1;
    color: rgba(29, 78, 216, var(--tw-text-opacity))
}

.text-indigo-300 {
    --tw-text-opacity: 1;
    color: rgba(165, 180, 252, var(--tw-text-opacity))
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.hover\:text-blue-700:hover {
    --tw-text-opacity: 1;
    color: rgba(29, 78, 216, var(--tw-text-opacity))
}

.no-underline {
    text-decoration: none
}

.hover\:no-underline:hover {
    text-decoration: none
}

*,
::after,
::before {
    --tw-shadow: 0 0 #0000
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:shadow-lg:hover {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

*,
::after,
::before {
    --tw-ring-inset: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000
}

.filter {
    --tw-blur: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-brightness: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-contrast: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-grayscale: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-hue-rotate: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-invert: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-saturate: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-sepia: var(--tw-empty, );
    /*!*/
    /*!*/
    --tw-drop-shadow: var(--tw-empty, );
    /*!*/
    /*!*/
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.grayscale {
    --tw-grayscale: grayscale(100%)
}

@media (min-width:640px) {

    .sm\:mt-0 {
        margin-top: 0
    }

    .sm\:mr-10 {
        margin-right: 2.5rem
    }

    .sm\:mb-0 {
        margin-bottom: 0
    }

    .sm\:ml-auto {
        margin-left: auto
    }

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:flex-nowrap {
        flex-wrap: nowrap
    }

    .sm\:justify-start {
        justify-content: flex-start
    }

    .sm\:text-left {
        text-align: left
    }

    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
    }

    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .sm\:font-semibold {
        font-weight: 600
    }
}

@media (min-width:768px) {
    .md\:container {
        width: 100%
    }

    @media (min-width:640px) {
        .md\:container {
            max-width: 640px
        }
    }

    @media (min-width:768px) {
        .md\:container {
            max-width: 768px
        }
    }

    @media (min-width:1024px) {
        .md\:container {
            max-width: 1024px
        }
    }

    @media (min-width:1280px) {
        .md\:container {
            max-width: 1280px
        }
    }

    @media (min-width:1536px) {
        .md\:container {
            max-width: 1536px
        }
    }

    .md\:relative {
        position: relative
    }

    .md\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .md\:mt-0 {
        margin-top: 0
    }

    .md\:mt-6 {
        margin-top: 1.5rem
    }

    .md\:mt-10 {
        margin-top: 2.5rem
    }

    .md\:ml-6 {
        margin-left: 1.5rem
    }

    .md\:flex {
        display: flex
    }

    .md\:inline-flex {
        display: inline-flex
    }

    .md\:w-1\/2 {
        width: 50%
    }

    .md\:w-1\/3 {
        width: 33.333333%
    }

    .md\:max-w-2xl {
        max-width: 42rem
    }

    .md\:max-w-4xl {
        max-width: 56rem
    }

    .md\:flex-1 {
        flex: 1 1 0%
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:flex-wrap {
        flex-wrap: wrap
    }

    .md\:flex-nowrap {
        flex-wrap: nowrap
    }

    .md\:items-center {
        align-items: center
    }

    .md\:justify-start {
        justify-content: flex-start
    }

    .md\:self-end {
        align-self: flex-end
    }

    .md\:object-scale-down {
        object-fit: scale-down
    }

    .md\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }

    .md\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .md\:pl-20 {
        padding-left: 5rem
    }

    .md\:text-left {
        text-align: left
    }

    .md\:text-right {
        text-align: right
    }

    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1
    }
}

@media (min-width:1024px) {

    .lg\:visible {
        visibility: visible
    }

    .lg\:mt-0 {
        margin-top: 0
    }

    .lg\:hidden {
        display: none
    }

    .lg\:w-1\/2 {
        width: 50%
    }

    .lg\:w-1\/3 {
        width: 33.333333%
    }

    .lg\:w-2\/3 {
        width: 66.666667%
    }

    .lg\:w-1\/4 {
        width: 25%
    }

    .lg\:w-4\/5 {
        width: 80%
    }

    .lg\:flex-row-reverse {
        flex-direction: row-reverse
    }

    .lg\:items-start {
        align-items: flex-start
    }
}

@media (min-width:1280px) {

    .xl\:w-1\/4 {
        width: 25%
    }
}

body {
    background-color: #fff
}

@media (max-width:748px) {
    .compare {
        min-width: 100%
    }
}

.btn {
    background-color: transparent
}

.bg-gray-100-nav {
    background: #fff;
    opacity: .9;
    transition: all .5s ease-in 0s;
    box-shadow: -1px 6px 14px -3px rgba(0, 0, 0, .51);
    -webkit-box-shadow: -1px 6px 14px -3px rgba(0, 0, 0, .51);
    -moz-box-shadow: -1px 6px 14px -3px rgba(0, 0, 0, .51)
}

.bg-gray-100-nav a {
    color: #000;
    font-weight: 700
}

.bg-gray-100-nav #a-nav {
    opacity: 2
}

.bg-gray-100-nav img {
    opacity: 2
}

.activeSpy {
    color: #0ea5eb;
    text-decoration: none
}

.rounded-none {
    border-radius: 0
}

.modal {
    position: fixed;
    background: rgba(255, 255, 255, .7);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    visibility: hidden;
    pointer-events: none;
    transition: all .3s
}

.modal:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto
}

.modal>div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: #fff
}

.modal .btn-kotak {
    color: #000
}

.group:hover .group-hover\:scale-100 {
    transform: scale(1)
}

.scale-0 {
    transform: scale(0)
}

.crunchify-top:hover {
    color: #1aa1ca !important
}

.crunchify-top {
    position: fixed;
    bottom: 70px;
    right: 70px;
    cursor: pointer;
    z-index: 999
}

.top-arrow {
    position: absolute;
    padding: 0 3px
}

.btn-kotak {
    font-size: small;
    border-radius: 0;
    border-color: #000;
    transition: all .5s ease-in-out
}

.btn-kotak:hover {
    background: #3b82f6;
    border-color: #000;
    color: #fff
}

@media only screen and (min-width:768px) {
    .btn-kotak {
        font-size: .6rem
    }
}

@media only screen and (min-width:1024px) {
    .btn-kotak {
        font-size: .9rem
    }
}

@media only screen and (max-width:308px) {
    .btn-kotak {
        font-size: .5rem
    }
}

.modal-button {
    background-color: transparent
}

.btn-modalYes {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
    border-radius: 0;
    transition: all .5s ease-in-out
}

.btn-modalYes:hover {
    background: #0a58d6;
    border-color: #0a58d6;
    color: #fff
}

.btn-modalNo {
    background-color: #000;
    color: #fff;
    border-radius: 0;
    transition: all .5s ease-in-out
}

.btn-modalNo:hover {
    background: #fff;
    color: #000
}

.btn-kontak {
    background-color: #3b82f6;
    border-radius: 0;
    color: #fff;
    border: 0;
    display: inline-block;
    transition-duration: .3s;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent
}

.btn-kontak:hover {
    background: #3b82f6;
    border-radius: 0;
    font-weight: 700;
    border: 0;
    transform: translateY(-6px);
    animation-name: hover;
    animation-duration: 1.5s;
    animation-delay: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

@keyframes hover {
    0% {
        transform: translateY(-6px);
        opacity: .9
    }

    50% {
        transform: translateY(-3px);
        opacity: 1
    }

    100% {
        transform: translateY(-6px);
        opacity: .9
    }
}

.anime {
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent
}

.anime:hover {
    animation-name: anime-tickle;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

@keyframes anime-tickle {
    16.65% {
        transform: translateY(8px)
    }

    33.3% {
        transform: translateY(-6px)
    }

    49.95% {
        transform: translateY(4px)
    }

    66.6% {
        transform: translateY(-2px)
    }

    83.25% {
        transform: translateY(1px)
    }

    100% {
        transform: translateY(0)
    }
}

#a-nav a {
    color: #000
}

#a-nav a:hover {
    color: rgba(59, 130, 246)
}

#a-nav .btn-ghost {
    border: 0
}

#a-nav .btn-ghost:hover {
    border: 0
}

#dku .btn-ghost:hover {
    border: 0
}

#dku .btn-ghost {
    border: 0
}

#dku .btn {
    border: 0
}

#header label {
    display: flex;
    flex-direction: column;
    width: 35px;
    cursor: pointer
}

#header label span {
    background: #1cadd1;
    border-radius: 10px;
    height: 3.5px;
    margin: 3.5px 0;
    transition: .4s cubic-bezier(.68, -.6, .32, 1.6)
}

#header span:nth-of-type(1) {
    width: 50%
}

#header span:nth-of-type(2) {
    width: 100%
}

#header span:nth-of-type(3) {
    width: 75%
}

#header input[type=checkbox] {
    display: none
}

#header input[type=checkbox]:checked~span:nth-of-type(1) {
    transform-origin: bottom;
    transform: rotatez(45deg) translate(4px, 0)
}

#header input[type=checkbox]:checked~span:nth-of-type(2) {
    transform-origin: top;
    transform: rotatez(-45deg)
}

#header input[type=checkbox]:checked~span:nth-of-type(3) {
    transform-origin: bottom;
    width: 50%;
    transform: translate(15px, -5.5px) rotatez(45deg)
}

.hero {
    background-position: 50%;
    background-size: cover;
    display: grid;
    place-items: center;
    width: 100%
}

.hero>* {
    grid-column-start: 1;
    grid-row-start: 1
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    max-width: 80rem;
    padding: 1rem;
    gap: 1rem
}

@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box
}

.swiper-wrapper {
    transform: translate3d(0, 0, 0)
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev {
    left: 10px;
    right: auto
}

.swiper-button-prev:after {
    content: 'prev'
}

.swiper-button-next {
    right: 10px;
    left: auto
}

.swiper-button-next:after {
    content: 'next'
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

@keyframes swiper-preloader-spin {
    100% {
        transform: rotate(360deg)
    }
}

.swiper-container {
    width: 100%;
    height: 100%
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}