@charset "utf-8";
/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/**
 * Colors.
 */
/**
 * Positionings.
 */
/**
 * Text styles.
 */
/**
 * Animations.
 */
/**
 * Sizes.
 */
/**
 * Breakpoints.
 */
/**
 * Functions.
 */
/*------------------------------------*\
    $UI-DROP
\*------------------------------------*/
/**
 * The root of the ui-drop.
 */
.ui-drop {
  /* Make sure elements around aren’t affected. */

  position: absolute;
  /* Align it to the bottom edge. */

  top: 100%;
  /* Align it to the left edge by default. */

  left: 0;
  /* Hide everything to begin with. */

  opacity: 0;
  /* Add a tilt. */

  -webkit-transform: translateY(-1em) perspective(600px) rotateX(25deg);
  /* Make it a smooth transition. */

  -webkit-transition: all 0.2s ease-out;
}
/* Opened ui-drop state. */
.ui-drop--opened {
  /* Reveal the content. */

  opacity: 1;
  /* Adjust the tilt. */

  -webkit-transform: translateY(0) perspective(600px) rotateX(0);
}
/* Focused ui-drop state. */
/**
     * The ui-drop’s pointer and holder.
     */
.ui-drop__pointer,
.ui-drop__holder {
  /* Set the width. */

  width: 250px;
}
/**
     * The ui-drop’s pointer and pseudo-borders.
     */
.ui-drop__pointer {
  /* Give room for the pseudo-borders. */

  height: 10px;
  /* Make sure it’s above the holder shadow. */

  position: relative;
  z-index: 1;
  /* Hide everything to begin with. */

  max-height: 0;
  /* When closing, height should wait till the animation is done. */

  -webkit-transition: max-height 0 0.2s;
}
/* The pseudo-borders. */
.ui-drop__pointer:before,
.ui-drop__pointer:after {
  content: " ";
  /* Add the base border styling. */

  border: 10px solid transparent;
  /* Collapse the width to make triangles. */

  width: 0;
  /* Align it to the inner top. */

  display: inline-block;
  vertical-align: top;
  position: relative;
}
/* The pseudo-border background. */
.ui-drop__pointer:before {
  /* Nudge it up and away from left edge. */

  left: 10px;
  top: -9px;
  /* Add the border color. */

  border-bottom-color: #aaaaaa;
}
/* The pseudo-border foreground. */
.ui-drop__pointer:after {
  /* Nudge it back to left edge and down 1px below the border. */

  left: -10px;
  top: -8px;
  /* Add the foreground color. */

  border-bottom-color: #f5f5f5;
}
.ui-drop--opened .ui-drop__pointer {
  /* Reveal the content. */

  max-height: 10px;
  /* Immediately open the height and animate the rest. */

  -webkit-transition: max-height 0;
}
/**
     * The content holder of the ui-drop.
     */
.ui-drop__holder {
  /* Add a background and collapsed border. */

  background: #f5f5f5;
  border: 0 solid #aaaaaa;
  /* Play nice with borders. */

  box-sizing: border-box;
  /* Round the corners. */

  border-radius: 4px;
  /* Add a drop shadow. */

  box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.15);
  /* Hide overflowing content. */

  overflow: hidden;
  /* Hide everything to begin with. */

  max-height: 0;
  /* When closing, height should wait till the animation is done. */

  -webkit-transition: max-height 0 0.2s, border-width 0 0.2s;
}
/* The opened content holder. */
.ui-drop--opened .ui-drop__holder {
  /* Add width to the border. */

  border-width: 1px;
  /* Reveal the content. */

  max-height: 25em;
  /* Immediately open the height and animate the rest. */

  -webkit-transition: max-height 0, border-width 0;
}
/**
         * The content frame.
         */
.ui-drop__frame {
  /* Set the max height before scrolling. */

  max-height: 25em;
}
/**
 * The center aligned ui-drop.
 */
.ui-drop--center {
  /* Collapse the width. */

  width: 0;
  /* Fix the element edges to the parent. */

  right: 0;
  /* Then center it. */

  margin: 0 auto;
}
/* Align the pointer and holder to the center using half the width as a negative margin. */
.ui-drop--center .ui-drop__pointer,
.ui-drop--center .ui-drop__holder {
  margin-left: -125px;
}
.ui-drop--center .ui-drop__pointer {
  text-align: center;
}
/**
 * The right aligned ui-drop.
 */
.ui-drop--right {
  left: auto;
  right: 0;
}
.ui-drop--right .ui-drop__pointer {
  text-align: right;
}