/* =============================================================================
  COMPONENT
============================================================================= */
.component {
  text-align: center;
}

.component__title {
  margin-bottom: 12px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

/* =============================================================================
  ICONS - COMMON
============================================================================= */
/**
 * Icon common styles.
 *
 * Set it to block or inline block, whichever suits your needs. Overflow set to
 * hidden for precautions, and make sure to set the font size to 0 and the text
 * indent to -9999px. This allows us to actually include text in the markup
 * which will be good for screen readers and accessibility purposes.
 */
.icon {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    margin: 0px 15px 0px 0px !important;
    width: 70px;
    height: 75px;
    font-size: 0;
    text-indent: -9999px;
    border-radius: 5px;
}
.icon-mono {
  background: url("../images/icons1.png");

  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

/* inventory */
.icon-mono.inventory {
  background-position: 0 0;
}

.icon-mono.inventory:hover,.icon-mono.inventory.active {
  background-color: #a400cd;
  background-position: 0 -73px;
}

/* agents */
.icon-mono.agents {
  background-position: -73px -1px;
}

.icon-mono.agents:hover,.icon-mono.agents.active {
  background-color: #a400cd;
  background-position: -71px -74px;
}

/* History */
.icon-mono.history {
  background-position:-564px 0;
}

.icon-mono.history:hover, .icon-mono.history.active {
  background-color: #a400cd;
  background-position: -564px -72px;
}

/* Airline */
.icon-mono.airline {
  background-position:-636px 0;
}

.icon-mono.airline:hover, .icon-mono.airline.active {
  background-color: #a400cd;
  background-position: -636px -72px;
}

/* Invoice */
.icon-mono.invoice {
    background-position: -709px 0;
}
.icon-mono.invoice:hover, .icon-mono.invoice.active {
    background-color: #a400cd;
    background-position: -708px -72px;
}
/* Payments */
.icon-mono.payment {
    background-position: -781px 0;
}
.icon-mono.payment:hover, .icon-mono.payment.active {
    background-color: #a400cd;
    background-position: -782px -72px;
}

/*******************************************Mobile*****************************************/
@media (max-width: 480px) and (min-width: 0px){
    .icon {
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        margin: 0px -1px 0px 0px !important;
        width: 70px;
        height: 75px;
        font-size: 0;
        text-indent: -9999px;
        border-radius: 5px;
    }


}