/* 


ExtraLight: 100
Light:      200
SemiLight:  300
Book:       400
Regular:    500
Medium:     600
SemiBold:   700
Bold:       800
ExtraBold:  900

*/

/************************ FONT ************************/

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


/************************ FLATICON FONT ************************/

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("../fonts/flaticon/Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
    font-size: 20px;
    font-style: normal;
    margin-left: 20px;
}

.flaticon-monitor:before { content: "\f100"; }
.flaticon-vol:before { content: "\f101"; }