@font-face {
  font-family: 'fontello';
  font-weight: normal;
  font-style: normal;
  src: url('../font/icons.woff2') format('woff2');
}

.icon {
  display: inline-block;
  text-rendering: auto;
  font: normal normal normal 14px/1 'fontello';
  font-size: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-spin {
  animation: icon-spin 2s infinite linear;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-pause::before { content: '\e800'; }
.icon-play::before { content: '\e801'; }
.icon-resize-full::before { content: '\e802'; }
.icon-volume-off::before { content: '\e804'; }
.icon-volume-down::before { content: '\e805'; }
.icon-volume-up::before { content: '\e806'; }
.icon-cancel-circled::before { content: '\e807'; }
.icon-step-forward::before { content: '\e80b'; }
.icon-step-backward::before { content: '\e80c'; }
.icon-circle-notch::before { content: '\f1ce'; }