@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?22382683');
  src: url('../fonts/fontello.eot?22382683#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff2?22382683') format('woff2'),
       url('../fonts/fontello.woff?22382683') format('woff'),
       url('../fonts/fontello.ttf?22382683') format('truetype'),
       url('../fonts/fontello.svg?22382683#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?22382683#fontello') format('svg');
  }
}
*/

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
/*   margin-left: .2em; */

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-spin1:before { content: '\e830'; } /* '' */
.icon-spin2:before { content: '\e831'; } /* '' */
.icon-spin3:before { content: '\e832'; } /* '' */
.icon-spin4:before { content: '\e834'; } /* '' */
.icon-spin5:before { content: '\e838'; } /* '' */
.icon-spin6:before { content: '\e839'; } /* '' */
.icon-spin8:before { content: '\f110'; } /* '' */
.icon-spin7:before { content: '\f528'; } /* '' */
.icon-spin9:before { content: '\f529'; } /* '' */

/*
   Animation
*/

.animate-spin:before {
  -webkit-animation: animate-spin 2s infinite linear;
  animation: animate-spin 2s infinite linear;
}

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

.x-icon-lg {
  font-size: 1.3em;
  line-height: 1.1em;
/*   vertical-align: middle; */
}
.x-icon-2x {
  font-size: 2em;
}
.x-icon-3x {
  font-size: 3em;
}
.x-icon-4x {
  font-size: 4em;
}
.x-icon-5x {
  font-size: 5em;
}
.x-icon-fw {
  width: 1.1em !important;
  line-height: 1em !important;
  text-align: center !important;
}
.x-icon-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}
.x-icon-ul > li {
  position: relative;
}
.x-icon-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}
.x-icon-li.x-icon-lg {
  left: -1.85714286em;
}
.x-icon-border {
  padding: .1em .25em;
  border: solid 0.1em #9e9e9e;
  border-radius: 2px;
}
.x-icon-border-circle {
  padding: .1em .25em;
  border: solid 0.1em #9e9e9e;
  border-radius: 50%;
}
.x-icon-circle {
  padding: .1em .25em;
  border-radius: 50%;
}
.x-icon-square {
  padding: .1em .25em;
  border-radius: 1%;
}