/* @font-face {
  font-family: 'JuliusSansOne';
  src: url('../fonts/JuliusSansOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
} */

html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img.xc-logo {
  height: 60px;
  width: auto;
}

img.xc-logo\@s {
  height: 60px;
  width: auto;
}

@media (max-width: 639px) {
  img.xc-logo\@s {
    height: auto;
    width: 200px;
  }
}

.xc-text-image-image {
  min-height: 150px;
  max-height: 450px;
}

.xc-height-xlarge {
  height: 550px;
}

@media (max-width: 639px) {
  .xc-height-xlarge {
    height: 300px;
  }
}

.xc-hyphens-auto {
  hyphens: auto;
}

.xc-letter-spacing-0-3 {
  letter-spacing: 0.3em;
}

.xc-letter-spacing-0-4 {
  letter-spacing: 0.4em;
}

.xc-letter-spacing-0-5 {
  letter-spacing: 0.5em;
}

@media (min-width: 960px) {
  .xc-line-height-2-5\@m-up {
    line-height: 2.5;
  }
}

section > div:not(:last-child) {
  margin-bottom: 80px;
}

@media (max-width: 639px) {
  section > div:not(:last-child) {
    margin-bottom: 40px;
  }
}

/* contact */
input[readonly],
textarea[readonly] {
  background-color: #f0f0f0;
  opacity: 0.5;
  cursor: progress;
}

.uk-flex.uk-flex-column .xc-flex-1-1 {
  flex: 1 1 auto;
}

.uk-flex.uk-flex-column .xc-flex-0-0 {
  flex: 0 0 auto;
}

.xc-flex-col {
  flex-direction: column;
}

.xc-min-height-0 {
  min-height: 0;
  resize: vertical;
}

@media (max-width: 639px) {
  .xc-padding-remove-right\@s {
    padding-right: 0;
  }
}

@media (hover: none) {
  .uk-transition-toggle * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .xc-d-none\@no-hover {
    display: none;
  }
}

@media (hover: hover) {
  .xc-d-none\@hover {
    display: none;
  }
}

.xc-h-100 {
  height: 100%;
}

.xc-d-none {
  display: none;
}

/* top navbar */
header .uk-navbar-container {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.08);
}

/* hero */
.xc-color-white {
  color: white !important;
}

@media (max-width: 639px) {
  .xc-font-size-1-7\@s {
    font-size: 1.7rem;
  }
  .xc-font-size-1-2\@s {
    font-size: 1.2rem;
  }
}

@media (min-width: 960px) {
  .xc-margin-left\@l {
    margin-left: 20px;
  }

  .xc-margin-right\@l {
    margin-right: 20px;
  }
}

/* mobile nav */
@media (min-width: 960px) {
  body {
    overflow: visible !important;
  }
}

.xc-mobile-nav-scroll {
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* notification */
.uk-notification-message {
  background-color: white !important;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.xc-checkmark-container {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xc-checkmark {
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: scaleUp 0.6s ease-out forwards;
  opacity: 0;
}

.xc-checkmark-circle {
  fill: #19854a;
}

.xc-checkmark-check {
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: drawCheck 0.45s ease-out forwards;
  animation-delay: 0.1s;
}

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

.xc-exclamation-container {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xc-exclamation {
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: scaleUp 0.6s ease-out forwards;
  opacity: 0;
}

.xc-exclamation-circle {
  fill: #f0506e;
}

.xc-exclamation-line {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: drawLine 0.4s ease-out forwards;
  animation-delay: 0.1s;
}

.xc-exclamation-dot {
  fill: #fff;
  opacity: 0;
  animation: fadeInDot 0.3s forwards;
  animation-delay: 0.5s;
}

@keyframes scaleUp {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeInDot {
  to {
    opacity: 1;
  }
}

.xc-overlay-fade {
  max-height: 80%;
  overflow: hidden;

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,0) 100%
  );
}

.xc-mask-image-unset {
  mask-image: unset !important;
  -webkit-mask-image: unset !important;
}

.xc-cursor-pointer {
  cursor: pointer;
}