/* Wasn't able to figure out how to make the cards have the bounce when scrolling*/
/* Wasn't able to figure out how to add the country logo to the select options */


/**Navbar**/
.hamburger-wrap 
.hamburger>div {
  display: none
}

.header-background-overlay {
  margin-top: -9rem;
  padding-top: 10rem;
}

header{
  margin-top: -10rem;
  padding-top: 10rem;
  transform: skewY(5deg);
  margin: 0 auto;
  width: 80%
}

.top-nav-container ul{
  /* padding: 0 2rem; */
  justify-content: space-between;
  font-size: .9rem;
}
.top-nav-container ul a{
  color: gray
}

.fa-chevron-left,
.fa-chevron-down{
  font-size: 10px;
}

.buy-now-btn{
  width: 5.5rem;
  height: 2.5rem;
  font-size: smaller;
}

.nav-links{
  justify-content: right;
}

.top-nav li:first-child{
  /* padding: 0 2rem; */
}

.show{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: all 500ms ease-in
}

.show.active{
  position: relative;
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 100ms
}

.load{
  position: relative;
}
.load.google-icon{
  animation: slideIn 400ms;
}
.load.google-a-icon{
  animation: slideIn 900ms;
}
.load.paypal-icon{
  animation: slideIn 1000ms;
}
.load.atlassian-icon{
  animation: slideIn 400ms;
}
.load.weave-icon{
  animation: slideIn 1200ms;
}
.load.asana-icon{
  animation: slideIn 800ms;
}
.load.calendar-icon{
  animation: slideIn 600ms;
}
@keyframes fadeIn{
  from{opacity:0;}
}
@keyframes slideIn{
   from {
    transform: translate(0, 150px);
    transition: ease-in;
    opacity: 0
  }
}