:root {
    --icon-offset: 0.2em;
    --icon-scale: 0.8;
    --icon-padding: calc(calc(var(--icon-scale) * 0.5) * 1em);
}

[class^=icon-]:before, [class*=" icon-"]:before {
    position: relative;
    content: "";
    display: flex;
    transform: scale(var(--icon-scale));
    float: left;
    /* top: var(--icon-offset); */
    /* padding: var(--icon-padding); */
    /* align-self: center; */
    margin: 0;
    /* border: 1px solid black; */
    height: auto;
    align-self: center;
}

[class^=icon-], [class*=" icon-"] {
    display: inline-flex;
}

[class^=icon-] > *, [class*=" icon-"] > * {
    align-self: center;
    float: right;
    position: relative;
    /* top: var(--icon-offset); */
    margin-left: var(--icon-padding);
}

[class^=icon-].inverted, [class*=" icon-"].inverted {
    height: auto;
    filter: brightness(0) invert(1);
}

[class^=icon-].xx-small::before, [class*=" icon-"].xx-small::before {
    transform: scale(calc(var(--icon-scale) / 6));
    margin: 0;
    padding: 0;
}

[class^=icon-].x-small::before, [class*=" icon-"].x-small::before {
    transform: scale(calc(var(--icon-scale) / 4));
    margin: 0;
    padding: 0;
}

[class^=icon-].small::before, [class*=" icon-"].small::before {
    transform: scale(calc(var(--icon-scale) / 2));
    margin: 0;
    padding: 0;
}

.icon-recept:before {
    content:url('icon_00.png');
}

.icon-bird:before {
    content:url('icon_01.png');
}

.icon-network:before {
    content:url('icon_02.png');
}

.icon-gamepad:before {
    content:url('icon_03.png');
}

.icon-dna:before {
    content:url('icon_04.png');
}

.icon-webcam:before {
    content:url('icon_05.png');
}

.icon-art:before {
    content:url('icon_06.png');
}

.icon-cursor:before {
    content:url('icon_07.png');
}

.icon-smartphone:before {
    content:url('icon_08.png');
}

.icon-puzzle:before {
    content:url('icon_09.png');
}

.icon-code:before {
    content:url('icon_10.png');
}

.icon-smart:before {
    content:url('icon_11.png');
}

.icon-video:before {
    content:url('icon_12.png');
}

.icon-music:before {
    content:url('icon_13.png');
}

.icon-shop:before {
    content:url('icon_14.png');
}

.icon-web:before {
    content:url('icon_15.png');
}

.icon-mouse:before {
    content:url('icon_16.png');
}

.icon-clients:before {
    content:url('icon_17.png');
}

.icon-tasks:before {
    content:url('icon_18.png');
}

.icon-save:before {
    content:url('icon_19.png');
}

.icon-projects:before {
    content:url('icon_20.png');
}

.icon-arrowright:before {
    content:url('icon_21.png');
}

.icon-arrowleft:before {
    content:url('icon_22.png');
}

.icon-close:before {
    content:url('icon_23.png');
}

.icon-contact:before {
    content:url('icon_24.png');
}

.icon-zoomin:before {
    content:url('icon_25.png');
}

.icon-fullscreen:before {
    content:url('icon_26.png');
}

.icon-home:before {
    content:url('icon_27.png');
}

.icon-resume:before {
    content:url('icon_28.png');
}

.icon-blog:before {
    content:url('icon_29.png');
}

.icon-map:before {
    content:url('icon_30.png');
}

.icon-email:before {
    content:url('icon_31.png');
}