@import "../uikit.theme.less";
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Open+Sans:wght@400&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-72 { font-size: 72px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

// accordion
@accordion-title-color      : @global-inverse-color;
@accordion-title-hover-color: @global-secondary-background;

.uk-accordion-title {
  font-family: @base-heading-font-family;
}

.uk-accordion li {
  background: @global-primary-background;
  padding: 10px;
}

// base
@base-body-font-weight   : 400;
@base-heading-font-weight: 400;
@base-heading-font-family: 'Open Sans', sans-serif;

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .uk-h1,
h2, .uk-h2,
h3, .uk-h3,
h4, .uk-h4,
h5, .uk-h5,
h6, .uk-h6 {
  position:relative;
  z-index: 0;
  display: inline-block;
}

// button
@button-default-background        : @global-secondary-background;
@button-default-color             : @global-inverse-color;
@button-default-hover-background  : @global-primary-background;
@button-default-hover-color       : @global-emphasis-color;
@button-default-active-background : @global-primary-background;
@button-default-active-color      : @global-emphasis-color;

@button-primary-background        : @global-primary-background;
@button-primary-color             : @global-inverse-color;
@button-primary-hover-background  : transparent;
@button-primary-hover-color       : @global-primary-background;
@button-primary-active-background : transparent;
@button-primary-active-color      : @global-primary-background;

@button-text-color                : @global-emphasis-color;
@button-text-hover-color          : @global-emphasis-color;

.uk-button {
  font-family: @base-heading-font-family;
  font-weight: @base-heading-font-weight;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.uk-button-default {
  border: @global-border-width solid @global-secondary-background;
}

.uk-button-default:hover,
.uk-button-default:focus {
  border: @global-border-width solid @global-primary-background;
}

.uk-button-primary, .uk-button-primary:hover, .uk-button-primary:focus {
  border: @global-border-width solid @global-primary-background;
}


.uk-button-text {
  padding: 0;
  background: 0 0;
  position: relative;
  padding-right: 30px;
}

.uk-button-text:focus::before, .uk-button-text:hover::before {
  background-image: @-inline-svg-url;
  background-position: 100% 50%;
}

.uk-button-text::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: @-inline-svg-url;
  border-bottom: none;
  background-repeat: no-repeat;
  background-position: calc(100% - 5px) 50%;
  transition: background-position .2s ease-out;
}

.inline-svg-code( @code ) {
  @-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
  @-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
  @-inline-svg-url: ~"url('@{-inline-svg-code}')";
}

.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M22 12l-4-4v3H3v2h15v3z"/></svg>');

@button-link-hover-color: @global-secondary-background;

// card
@card-secondary-hover-background: @global-primary-background;

.card-border-bottom {
  border-bottom: @global-border-width*3 solid @global-secondary-background;
}

// divider
@divider-small-border-width: @global-border-width*2;
@divider-small-border      : @global-primary-background;

// dotnav
@dotnav-item-width             : 15px;
@dotnav-item-background        : transparent;
@dotnav-item-hover-background  : @global-secondary-background;
@dotnav-item-onclick-background: @global-secondary-background;
@dotnav-item-active-background : @global-secondary-background;

.uk-dotnav > * > * {
  border-width: @global-border-width;
}

// form
@form-background                    : @global-background;
@form-color                         : @global-color;
@form-focus-background              : transparent;
@form-focus-color                   : @global-color;
@form-radio-checked-background      : @global-primary-background;
@form-radio-checked-icon-color      : @global-inverse-color;
@form-radio-checked-focus-background: @global-primary-background;

.uk-input, .uk-select, .uk-textarea {
  border-top: 0;
  border-right: 0;
  border-bottom: @global-border-width solid @global-border;
  border-left: 0;
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  border-top: 0;
  border-right: 0;
  border-bottom: @global-border-width solid @global-primary-background;
  border-left: 0;
}

.uk-checkbox, .uk-radio {
  border: @global-border-width solid @global-border;
}

.uk-checkbox:focus, .uk-radio:focus {
  border-color: @global-primary-background;
}

.uk-form-label {
  font-family: @base-heading-font-family;
  font-size: 12px;
  color: @global-emphasis-color;
  text-transform: uppercase;
  letter-spacing: 1px;
}

//inverse
@inverse-global-color: @global-inverse-color;

// link
@link-muted-color      : @global-muted-color;
@link-muted-hover-color: @global-link-hover-color;

// nav
@nav-divider-margin-vertical  : 15px;
@nav-primary-item-font-size   : 2rem;
@nav-primary-item-color       : @global-inverse-color;
@nav-primary-item-hover-color : @global-primary-background;
@nav-primary-item-active-color: @global-primary-background;
@nav-primary-divider-border   : @global-primary-background;

// navbar
@navbar-background          : @global-muted-background;
@navbar-nav-item-height     : 100px;
@navbar-nav-item-font-family: @base-heading-font-family;
@navbar-toggle-color        : @global-muted-color;
@navbar-toggle-hover-color  : @global-link-hover-color;

// offcanvas
@offcanvas-bar-background: @global-secondary-background;
@offcanvas-bar-color-mode: dark;

#offcanvas div a,
#offcanvas .uk-nav-primary > li > a {
font-family: @base-heading-font-family;
}

#offcanvas div a:hover {
  text-decoration: none;
  color: @global-primary-background;
}

// sticky
.uk-sticky-fixed.uk-active {
  background: @navbar-background;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,.3);
}

// subnav
@subnav-item-hover-color: @global-link-hover-color;

// variables
@global-font-family         : 'Libre Baskerville', serif;
@global-font-size           : 16px;
@global-color               : #524f4f;
@global-emphasis-color      : #010101;
@global-muted-color         : #666666;

@global-link-color          : #010101;
@global-link-hover-color    : #7b7090;

@global-inverse-color       : #ffffff;

@global-background          : #ffffff;

@global-muted-background    : #f9f9f9;
@global-primary-background  : #d4db36;
@global-secondary-background: #7b7090;

@global-success-background  : #32d296;
@global-warning-background  : #faa05a;
@global-danger-background   : #f0506e;

@global-border-width        : 1px;
@global-border              : #e5e5e5;

// custom
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.underline::before {
  position: absolute;
  left: 0;
  bottom: 6px;
  content: "";
  height: 10px;
  width: 100%;
  background-color: @global-secondary-background;
  z-index: -1;
}

.icon-button {
  display: block;
  background: @global-secondary-background;
  color: @global-inverse-color;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-top: -80px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50px;
}

.blink {
  display: inline-block;
  background-color: @global-danger-background;
  width:10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: top;
  position: absolute;
  right: 70px;
  animation: blinker 3s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.border-top {
  border-top: @global-border-width solid @global-border;
}

#wa-widget-container .wa-widget {
  background: #4bd366;
  color: #fff;
  width: 50px;
  height: 50px;
  text-align: center;
  margin: 16px;
  border-radius: 50%;
  border-color: #4bd366;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

#wa-widget-container .wa-widget > svg {
  position:relative;
  top: calc(16%);
}

#wa-widget-container .uk-card {
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 21px;
  box-shadow: 2px 2px 15px 2px rgba(0, 0, 0, 0.17);
  border-radius: 10px;
}

#wa-widget-container .uk-card .uk-card-footer {
  border-top: 1px solid #e5e5e5;
}

#wa-widget-container .bubble {
  background: #ebebeb;
  padding: 6px;
  border-radius: 5px;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
}

#wa-widget-container .name {
  font-weight: 600;
  font-size: 14px;
  color: #3498db;
}

#wa-widget-container .timestamp {
  font-size: 11px;
  color: #999;
}

#wa-widget-container .message {
  font-size: 14px;
  font-weight: 500;
  color: #2b2b2b;
  display: table;
}

#wa-widget-container .bubble-arrow {
  position: absolute;
  left: 80px;
  top: 20px;
}

#wa-widget-container .bubble-arrow:after {
  content: "";
  position: absolute;
  border-top: 15px solid #ebebeb;
  border-left: 15px solid transparent;
  border-radius: 4px 0 0 0px;
  width: 0;
  height: 0;
}

#wa-widget-container .button-wa {
  background: #4bd366;
  color: #fff;
  width: 100%;
  border-radius: 50px;
}

.iub__us-widget {
  display: none !important;
}

/* media query */
@media screen and (min-width: 320px) {
  .underline::before {
    bottom: 3px;
  }

  .icon-button {
    margin-top: 0px;
  }
  // .card-call-to-action {
  //   margin-top: 50px;
  // }
}

@media screen and (min-width: 640px) {
  .underline::before {
    bottom: 3px;
  }

  .card-call-to-action {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1200px) {
  h1, .uk-h1 {
    font-size: 2.8125rem; /* 45px */
    letter-spacing: 4px;
  }

  h2, .uk-h2 {
    font-size: 2.375rem; /* 38px */
    letter-spacing: 2px;
  }

  h3, .uk-h3 {
    font-size: 1.5rem; /* 24px */
    letter-spacing: 1px;
  }

  .uk-heading-medium {
    letter-spacing: 4px;
  }
}