/* Typography */
h1 {
  font-weight: normal;
  margin: 0;
  font-size: 24px;
}

h2 {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
}

/* Utils */
.clearfix:after {
  content:" ";
  display:block;
  clear:both;
}

.card {
  padding: 1em;
  margin-top: 15px;
  @include border-radius(2px);
  @include shadow(0 2px 4px 0px rgba(0, 0, 0, 0.3));

  h1 {
    margin: 0 0 .5em 0;
    padding: .1em;
    font-size: 24px;
  }

  &.no-margin {
    margin-top: 0;
  }
}

.nopad {
  padding: 0;

  .ui-panel-content {
    padding: 0;
  }
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

.ui-g {
  -ms-flex-wrap: wrap;
}

::-webkit-input-placeholder {color:$placeholderColor}
:-moz-placeholder           {color:$placeholderColor}
::-moz-placeholder          {color:$placeholderColor}
:-ms-input-placeholder      {color:$placeholderColor}