/*
 * @emas/components default theme
 */
:root {
  --ema-color:#343a40;
  --ema-primary:#007bff;
  --ema-secondary:#6c757d;
  --ema-success:#28a745;
  --ema-info:#17a2b8;
  --ema-warning:#ffc107;
  --ema-danger:#dc3545;
  --ema-light:#f8f9fa;
  --ema-dark:#343a40;
  --ema-background:#fff;
  --ema-background-diap:rgba(29, 29, 29, 0.97);
  --ema-border-color:#c5c9cd;
  --ema-border:1px solid #c5c9cd;
  --ema-border-radius:3px 3px 3px 3px;
  --ema-box-shadow:1px 1px 10px 1px #ccc;
  --ema-margin:0.25rem;
  --ema-margin-sm:0.5rem;
  --ema-margin-md:1rem;
  --ema-margin-lg:1.5rem;
  --ema-margin-xl:2rem;
  --ema-padding:0.25rem;
  --ema-padding-sm:0.5rem;
  --ema-padding-md:1rem;
  --ema-padding-lg:1.5rem;
  --ema-padding-xl:2rem;
  --ema-gray-100:#f8f9fa;
  --ema-gray-200:#e9ecef;
  --ema-gray-300:#dee2e6;
  --ema-gray-400:#ced4da;
  --ema-gray-500:#adb5bd;
  --ema-gray-600:#868e96;
  --ema-gray-700:#495057;
  --ema-gray-800:#343a40;
  --ema-gray-900:#212529;
}

ema-navbar {
  /**
  * @prop --ema-navbar-background: Background of the navbar
  * @prop --ema-navbar-border: The border of the navbar
  */
  --ema-navbar-background: var(--ema-background-light, #e9ecef);
  --ema-navbar-border: var(--ema-border, 1px solid #c0c3c6);
  --ema-navbar-color: var(--ema-primary, #46444B);
  --ema-navbar-hover-color: var(--ema-primary, #46444B);
  --ema-navbar-width: 100%;
  --ema-navbar-height: 50px;
  --ema-navbar-padding: var(--ema-padding, 15px);
  /* Menu Items */
  --ema-navbar-text-transform: none;
  --ema-navbar-a-padding: 0 var(--ema-padding, 15px);
  --ema-navbar-a-font-size: 0.9em;
  --ema-navbar-a-font-family: Arial, Helvetica, sans-serif;
  --ema-navbar-mobile-a-font-size: 1.8em;
  /* Animated Bottom Line */
}
ema-navbar nav {
  background-color: var(--ema-navbar-background);
  border-bottom: var(--ema-navbar-border);
  color: var(--ema-navbar-color);
  top: 0;
  height: var(--ema-navbar-height);
  line-height: var(--ema-navbar-height);
  width: 100%;
  z-index: 1000;
}
ema-navbar .navbar-wrapper {
  margin: auto;
  text-align: right;
  width: calc(var(--ema-navbar-width) * 0.9);
}
@media (max-width: 768px) {
  ema-navbar .navbar-wrapper {
    width: calc(var(--ema-navbar-width) * 0.9);
  }
}
@media (max-width: 638px) {
  ema-navbar .navbar-wrapper {
    width: var(--ema-navbar-width);
  }
}
ema-navbar .logo {
  float: left;
  margin-left: 28px;
  font-size: 1.5em;
  height: calc(var(--ema-navbar-height) - 10px);
  letter-spacing: 1px;
  text-transform: var(--ema-navbar-text-transform);
}
ema-navbar .logo-image {
  max-height: 100%;
  width: auto;
}
@media (max-width: 768px) {
  ema-navbar .logo {
    margin-left: 5px;
  }
}
ema-navbar ul {
  display: inline-block;
  float: right;
  list-style: none;
  margin-top: -2px;
  text-align: right;
  transition: transform 0.5s ease-out;
  width: var(--ema-navbar-width);
  -webkit-transition: transform 0.5s ease-out;
}
@media (max-width: 638px) {
  ema-navbar ul {
    display: none;
  }
}
@media (orientation: landscape) {
  ema-navbar ul {
    display: inline-block;
  }
}
ema-navbar li {
  display: inline-block;
}
ema-navbar a, ema-navbar ::slotted(a) {
  color: var(--ema-navbar-color);
  display: block;
  font-size: var(--ema-navbar-a-font-size);
  height: var(--ema-navbar-height);
  letter-spacing: 1px;
  padding: var(--ema-navbar-a-padding);
  position: relative;
  text-decoration: none;
  text-transform: var(--ema-navbar-text-transform);
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
ema-navbar .overlay-menu a, ema-navbar .overlay-menu ::slotted(a) {
  display: inline-block;
  width: var(--ema-navbar-width);
  padding: 0;
  text-align: center;
  line-height: var(--ema-navbar-height);
}
ema-navbar .overlay-menu ul {
  width: var(--ema-navbar-width);
}
ema-navbar a:active, ema-navbar ::slotted(a:active) {
  color: var(--ema-navbar-hover-color);
}
ema-navbar a.active, ema-navbar ::slotted(a.active) {
  color: var(--ema-navbar-hover-color);
  font-weight: bold;
}
ema-navbar a:hover, ema-navbar ::slotted(a:hover) {
  /* border-bottom: 1px solid rgb(28, 121, 184); */
  color: var(--ema-navbar-hover-color);
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
ema-navbar a:before, ema-navbar a:after, ema-navbar ::slotted(a:before), ema-navbar ::slotted(a:after) {
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: -1px;
  background: var(--ema-navbar-hover-color);
}
ema-navbar a:before, ema-navbar ::slotted(a:before) {
  left: 0;
  transition: 0.5s;
}
ema-navbar a:after, ema-navbar ::slotted(a:after) {
  background: var(--ema-navbar-hover-color);
  right: 0;
  /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}
ema-navbar a:hover:before, ema-navbar ::slotted(a:hover:before) {
  background: var(--ema-navbar-hover-color);
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
ema-navbar a:hover:after, ema-navbar ::slotted(a:hover:after) {
  background: transparent;
  width: 100%;
}
@media (max-width: 638px) {
  ema-navbar {
    /* Icon Bars */
    /* Rotate first bar */
    /* Fade out the second bar */
    /* Rotate last bar */
  }
  ema-navbar .menuIcon {
    display: inline-block;
    cursor: pointer;
    position: relative;
    top: 10px;
    right: 25px;
    height: 23px;
    width: 20px;
    z-index: 20;
  }
  ema-navbar .bar1 {
    background: var(--ema-navbar-color);
    height: 2px;
    width: 100%;
    transition: 0.4s;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  ema-navbar .bar2 {
    background: var(--ema-navbar-color);
    height: 2px;
    width: 100%;
    transition: 0.4s;
    position: absolute;
    top: 8px;
    left: 0px;
  }
  ema-navbar .bar3 {
    background: var(--ema-navbar-color);
    height: 2px;
    width: 100%;
    transition: 0.4s;
    position: absolute;
    top: 16px;
    left: 0px;
  }
  ema-navbar .opened .bar1 {
    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  ema-navbar .opened .bar2 {
    opacity: 0;
  }
  ema-navbar .opened .bar3 {
    -webkit-transform: rotate(45deg) translate(-5px, -6px);
    transform: rotate(45deg) translate(-5px, -6px);
  }
}
ema-navbar .overlay-menu {
  background: var(--ema-navbar-background);
  color: var(--ema-navbar-color);
  align-items: center;
  justify-content: center;
  position: fixed;
  top: var(--ema-navbar-height);
  left: 0;
  margin-right: 15px;
  padding-top: 15px;
  transform: translateX(-100%);
  width: 100vw;
  height: 100vh;
  -webkit-transition: transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
}
ema-navbar .overlay-menu ul, ema-navbar .overlay-menu li {
  display: block;
  position: relative;
}
ema-navbar .overlay-menu li a {
  display: block;
  font-size: var(--ema-navbar-mobile-a-font-size);
  font-family: var(--ema-navbar-a-font-family);
  letter-spacing: 4px;
  padding: 10px 0;
  text-align: right;
  text-transform: var(--ema-navbar-text-transform);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  width: 100%;
}
ema-navbar .overlay-menu li a:hover,
ema-navbar .overlay-menu li a:active {
  color: var(--ema-navbar-hover-color);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}