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

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

.icon {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  overflow: hidden;
  fill: currentColor; }

.icon__cnt {
  width: 100%;
  height: 100%;
  background: inherit;
  fill: inherit;
  pointer-events: none;
  /* Do not catch pointer events */
  transform: translateX(0);
  /* Crisp fix for non-retina */
  -ms-transform: translate(0.5px, -0.3px);
  /* Crisp fix for IE */ }

.icon--m {
  width: 50px;
  height: 50px; }

.icon--l {
  width: 100px;
  height: 100px; }

.icon--xl {
  width: 150px;
  height: 150px; }

.icon--xxl {
  width: 200px;
  height: 200px; }

.icon__spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.icon--ei-spinner .icon__spinner,
.icon--ei-spinner-2 .icon__spinner {
  -webkit-animation: spin 1s steps(12) infinite;
  animation: spin 1s steps(12) infinite; }

.icon--ei-spinner-3 {
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite; }

.icon--ei-sc-facebook {
  fill: #3b5998; }

.icon--ei-sc-github {
  fill: #333; }

.icon--ei-sc-google-plus {
  fill: #dd4b39; }

.icon--ei-sc-instagram {
  fill: #3f729b; }

.icon--ei-sc-linkedin {
  fill: #0976b4; }

.icon--ei-sc-odnoklassniki {
  fill: #ed812b; }

.icon--ei-sc-skype {
  fill: #00aff0; }

.icon--ei-sc-soundcloud {
  fill: #f80; }

.icon--ei-sc-tumblr {
  fill: #35465c; }

.icon--ei-sc-twitter {
  fill: #55acee; }

.icon--ei-sc-vimeo {
  fill: #1ab7ea; }

.icon--ei-sc-vk {
  fill: #45668e; }

.icon--ei-sc-youtube {
  fill: #e52d27; }

.icon--ei-sc-pinterest {
  fill: #bd081c; }

.icon--ei-sc-telegram {
  fill: #0088cc; }

@font-face {
  font-family: 'Avenir-Black';
  src: url("/assets/fonts/Black.ttf") format("truetype"); }

@font-face {
  font-family: 'Avenir-Bold';
  src: url("/assets/fonts/Bold.ttf") format("truetype"); }

@font-face {
  font-family: 'Avenir-Medium';
  src: url("/assets/fonts/Medium.ttf") format("truetype"); }

@font-face {
  font-family: 'Avenir-Regular';
  src: url("/assets/fonts/Regular.ttf") format("truetype"); }

@font-face {
  font-family: 'Avenir-Light';
  src: url("/assets/fonts/Light.ttf") format("truetype"); }

@font-face {
  font-family: 'Avenir-Roman';
  src: url("/assets/fonts/Roman.ttf") format("truetype"); }

h1 {
  font-family: 'Avenir-Bold';
  font-size: 2em;
  color: #FF2D55; }

.song-title {
  font-family: "Avenir-Regular";
  font-size: 1.5em;
  color: #FF2D55; }

* {
  margin: 0px;
  padding: 0px; }

.freeze {
  position: absolute;
  z-index: 99999;
  top: -2000px;
  left: -2000px; }

html, body {
  max-width: 400px;
  margin: 0 auto;
  padding: 30px 0px; }

.padding {
  padding: 20px 0px; }

.searchinput {
  width: 100%;
  border: 1px solid #E3E3E3;
  color: #7A7A7A;
  padding: 10px;
  font-size: 1.5em;
  border-radius: 2px;
  font-family: "Avenir-Medium"; }
  .searchinput:focus {
    outline: none; }

.inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0px 17px; }

.music-container {
  margin: 20px 0px;
  text-align: center; }

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #7A7A7A; }

.loader {
  fill: red; }

.small {
  width: 23px; }

.progress {
  font-family: 'Avenir-Medium';
  font-size: 1em;
  color: #333;
  padding: 5px 0px; }