@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?jloiyh');
  src:  url('fonts/icomoon.eot?jloiyh#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?jloiyh') format('truetype'),
    url('fonts/icomoon.woff?jloiyh') format('woff'),
    url('fonts/icomoon.svg?jloiyh#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-line:before {
  content: "\e900";
}

.icon-facebook:before {
  content: "\ea90";
}

.icon-twitter:before {
  content: "\ea96";
}

.icon-ctrl:before {
  content: "\ea50";
}

.icon:before {
  font-size: 24px;
  line-height: 2;
  color: #fff;
  border-radius: 50%;
  padding: 12px;
}
@media screen and (min-width: 768px) {
  .icon:before {
    font-size: 36px;
  }
}

.icon-line:before {
  content: "\e900";
  background: #00c300;
}

.icon-facebook:before {
  content: "\ea90";
  background: #3c5a99;
}

.icon-twitter:before {
  content: "\ea96";
  background: #55acee;
}

.icon-ctrl:before {
  content: "\ea50";
  background: #3279a5;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  border-radius: 50%;
  padding-top: 11px;
  padding-left: 4px;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .icon-ctrl:before {
    font-size: 42px;
    width: 60px;
    height: 60px;
    padding-top: 17px;
    padding-left: 9px;
  }
}