/*  To increase icon sizes relative to their container, use the pe-lg (33% increase), 
    pe-2x, pe-3x, pe-4x, or pe-5x classes. To align the icon at the middle of a text, 
    use the pe-va class. */
.pe-lg { font-size: 1.33em; line-height: 0.75em; vertical-align: -15%; }

.pe-lgx { font-size: 1.67em; line-height: 0.75em; vertical-align: -15%; }

.pe-2x { font-size: 2em; }

.pe-3x { font-size: 3em; }

.pe-4x { font-size: 4em; }

.pe-5x { font-size: 5em; }

/*  Use pe-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment. 
    Especially useful in things like nav lists. */
.pe-fw { width: 1.28571em; text-align: center; }

/*  Use pe-ul and pe-li to easily replace default bullets in unordered lists.  */
.pe-ul { padding-left: 0; margin-left: 2.14286em; list-style-type: none; }

.pe-ul > li { position: relative; }

.pe-li { position: absolute; left: -2.14286em; width: 2.14286em; top: 0.14286em; text-align: center; }

.pe-li.pe-lg { left: -1.85714em; }

/*  Use pe-border and pull-right or pull-left for easy pull quotes or article graphics.  */
.pe-border { padding: .2em .25em .15em; border: solid 0.08em #eeeeee; border-radius: .1em; }

.pull-right { float: right; }

.pe.pull-left { float: left; margin-right: .3em; margin-left: .3em; }

/*  Use the pe-spin class to get any icon to rotate.  */
.pe-spin { -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; }

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}

@keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}

/*  To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.  */
.pe-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

.pe-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

.pe-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }

.pe-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); }

.pe-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); }

/*  To stack multiple icons, use the pe-stack class on the parent, 
    the pe-stack-1x for the regularly sized icon, 
    and pe-stack-2x for the larger icon. pe-inverse can be used as an 
    alternative icon color and you can add your own color palette for more variations. */
.pe-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; }

.pe-stack-1x, .pe-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; }

.pe-stack-1x { line-height: inherit; }

.pe-stack-2x { font-size: 2em; }

.pe-inverse { color: #ffffff; }

.pe-sidecolor { color: #ddd; margin-right: 10px; margin-left: 8px;  font-size: 18px }