@import "avenir-font.css";

/* common */
body * {
  font-family: "Avenir", "arial";
}

body,
body #root,
#root .ui.menu,
#root .ui.container,
section,
footer {
  font-weight: 500;
  font-size: 15px;
}

body,
#root .ui.menu,
footer,
footer section {
  background-color: #101533;
}

/* top menu */
.ui.menu {
  padding: 10px 0;
}
.ui.menu .item.link {
  padding: 5px 15px;
  margin-right: 20px;
  line-height: 1;
  border-radius: 10px;
}
#root .nav-bar.ui.menu .top-menu-mobile-hidden {
  width: 100%;
}
.ui.menu .right.menu .item.link:last-child {
  border: 2px solid #38d8ca;
}

.hamburger-bar1,
.hamburger-bar2,
.hamburger-bar3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
  border-radius: 4px;
}

.show-mobile-menu .hamburger-bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.show-mobile-menu .hamburger-bar2 {
  opacity: 0;
}

.show-mobile-menu .hamburger-bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
.hamburger-container {
  display: none;
}

@media only screen and (max-width: 767px) {
  .hamburger-container {
    display: inline-block;
    cursor: pointer;
  }

  #root .nav-bar.ui.menu .top-menu-mobile-hidden {
    display: none;
    position: absolute;
    top: 50px;
    z-index: 1000;
    background-color: #101533;
    padding: 10px;
  }
  #root .nav-bar.ui.stackable.menu .item {
    width: 75% !important;
  }
  #root .nav-bar.ui.menu.show-mobile-menu .top-menu-mobile-hidden {
    display: block;
  }
  #root .menu.right.mobile-only {
    position: absolute;
    right: 20px;
  }
  #root .nav-bar.ui.menu {
    position: relative;
  }
}

/* side menu */
.segment .ui.attached.menu.sidebar {
  border-top: 1px solid #fff4;
  border-bottom: 1px solid #fff4;
}

/* buttons */
#root .ui.positive.buttons .button,
#root .ui.positive.button {
  background-color: #38d8ca;
  border: 1px solid #38d8ca;
}
#root .ui.positive.buttons button.button:hover,
#root .ui.positive.button:hover {
  background-color: #101533;
  border: 1px solid white;
}

/* home */
.ui.vertical.segment.home-segment {
  border: none;
}

/* footer */
footer {
  width: 100%;
  padding-bottom: 50px;
  background-color: #101533;
}
footer > section,
footer > section section {
  padding: 15px 15px 5px;
}
footer > section section {
  padding: 0px 15px;
}

.footer-image-wrapper {
  margin: 10px 0;
  display: flex;
}
.footer-image-wrapper img {
  margin-right: 20px;
}
.footer-image-wrapper hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid #38d8ca;
  margin: 1em 0;
  padding: 0;
  width: 100%;
}

footer .footer-links-wrapper {
  display: flex;
  justify-content: space-between;
}
.footer-heading {
  font-size: 15px;
  font-weight: 500;
}
.footer-links-wrapper,
.footer-links-wrapper a,
.footer-links-wrapper li {
  font-weight: 300;
  color: white;
  font-size: 14px;
}
.footer-links-wrapper ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.footer-links-wrapper li {
  margin-top: 20px;
}

.footer-socials {
  min-width: 15%;
}
.footer-socials ul {
  width: 80px;
  padding-top: 15px;
}
.footer-socials li {
  float: left;
  width: 50%;
  margin-top: 5px;
}
@media only screen and (max-width: 767px) {
  footer {
    padding: 10px;
  }
  footer > section {
    padding: 0px;
  }
  footer .footer-main-content {
    padding-top: 0;
  }
  .footer-links-wrapper > section {
    margin-bottom: 20px;
  }
  .footer-links-wrapper {
    flex-direction: column;
  }
  .footer-links-wrapper ul {
    display: flex;
    flex-wrap: wrap;
  }
  .footer-links-wrapper ul li {
    margin-right: 20px;
    margin-top: 10px;
  }
  .footer-socials ul {
    width: 100%;
  }
  .footer-links-wrapper .footer-socials li {
    width: auto;
    margin-top: 0;
  }
}
/* pricing */

.pricing-items.ui.cards {
  display: flex;
  justify-content: space-between;
}
.pricing-modal .pricing-items.ui.cards {
  justify-content: flex-start;
}
.pricing-items.ui.cards .card {
  background-color: #101533;
  text-align: center;
}

.pricing-items.ui.cards .card .content .header {
  color: white;
}
.pricing-items.ui.cards .card .content .header {
  display: block;
  padding: 20px;
}
.pricing-items.ui.cards .card .content .button {
  margin: 20px;
}
.pricing-items.ui.cards .card .content .pricing-cost {
  padding-bottom: 20px;
}
.pricing-items.ui.cards .card .content .description {
  border-top: 2px solid #38d8ca;
  padding: 20px;
}

.pricing-items.ui.cards .card .content .meta,
.pricing-items.ui.cards .card .content .description {
  color: white;
}
@media only screen and (max-width: 891px) {
  .pricing-items.ui.cards {
    justify-content: center;
  }
}