/* Translucent colors */
/* Animation definitions */
/**
 * Mixins
 */
/**
 * Default page width mixin
 */
/**
 * Flexbox with flex-flow, justify-content and align-items.
 *
 * @param  {[type]} $direction        [description]
 * @param  {[type]} $wrap             [description]
 * @param  {[type]} $justify-content  [description]
 * @param  {[type]} $align-items      [description]
 * @return {[type]}                   [description]
 */
/**
 * Font size with line-height.
 *
 * @param  {[type]} $size       [description]
 * @param  {[type]} $lineheight [description]
 * @return {[type]}             [description]
 */
/**
 * Button.
 *
 * @param  {[type]} $bg:    red           [description]
 * @param  {[type]} $color: white         [description]
 * @return {[type]}         [description]
 */
/**
 * Font family.
 *
 * @param {[string]} $name
 *  Name of the font-family.
 */
/**
  * Media query mixin.
  *
  * @param  {[type]} $size [description]
  * @return {[type]}        [description]
  */
/**
  * Hover mixin
  *
  * @param  {[type]} $color [description]
  * @param  {[type]} $background-color [description]
  * @return {[type]}        [description]
  */
/**
  * Responsive attribute mixin
  *
  * @param  {[type]} $property [description]
  * @param  {[type]} $default [description]
  * @param  {[type]} $large [description]
  * @param  {[type]} $medium [description]
  * @param  {[type]} $small [description]
  * @return {[type]}        [description]
  */
/**
  * Keyframes
  **/
.config_pages--type--message-bar {
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: futura-pt, sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.8125rem;
  padding: 0.8125rem 2.5rem 0.8125rem 0.8125rem;
  position: relative;
}

@media only screen and (min-width: 80rem) {
  .config_pages--type--message-bar {
    padding: 0.8125rem 1.25rem;
  }
}

.config_pages--type--message-bar.green {
  color: #377F86;
  background-color: #EDF3DF;
}

.config_pages--type--message-bar.green .close {
  background-image: url(../dist/x-green.svg);
}

.config_pages--type--message-bar.orange {
  background-color: #EE7B00;
  color: white;
}

.config_pages--type--message-bar.orange .close {
  background-image: url(../dist/x-orange.svg);
}

.config_pages--type--message-bar.hidden {
  display: none;
}

.config_pages--type--message-bar a {
  color: inherit;
}

.config_pages--type--message-bar a:hover {
  text-decoration: underline;
}

.config_pages--type--message-bar .close {
  background-repeat: no-repeat;
  position: absolute;
  right: 1rem;
  height: 0.875rem;
  width: 0.875rem;
  top: 1rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

@media only screen and (min-width: 80rem) {
  .config_pages--type--message-bar .close {
    right: 1.375rem;
    top: 1.375rem;
  }
}

.config_pages--type--message-bar .close:hover {
  border: none;
  box-shadow: none;
  background-color: transparent;
  right: 1.3125rem;
  height: 1rem;
  width: 1rem;
  top: 1.3125rem;
}