.i {
    display: inline-block;
    background: 50% 50% no-repeat
}

.i-photo {
    width: 22px;
    height: 13px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIyIDEzIj48cG9seWdvbiBwb2ludHM9IjIsMCAyMiwwIDIwLDEzIDAsMTMiIGZpbGw9InJnYigxODQsMTg0LDE4NCkiIC8+PGNpcmNsZSBjeD0iMTAuNSIgY3k9IjYuNSIgcj0iMy41IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIC8+PC9zdmc+');
    background-size: contain
}

.red .i-photo {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIyIDEzIj48cG9seWdvbiBwb2ludHM9IjIsMCAyMiwwIDIwLDEzIDAsMTMiIGZpbGw9InJnYigxOTQsNTQsNTQpIiAvPjxjaXJjbGUgY3g9IjEwLjUiIGN5PSI2LjUiIHI9IjMuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiAvPjwvc3ZnPg==)
}

.i-video {
    width: 22px;
    height: 13px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIyIDEzIj48cG9seWdvbiBwb2ludHM9IjIsMCAyMiwwIDIwLDEzIDAsMTMiIGZpbGw9InJnYigxODQsMTg0LDE4NCkiIC8+PHBvbHlnb24gcG9pbnRzPSI5LDIgMTQsNi41IDksMTEiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIC8+PC9zdmc+);
    background-size: contain
}

.red .i-video {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIyIDEzIj48cG9seWdvbiBwb2ludHM9IjIsMCAyMiwwIDIwLDEzIDAsMTMiIGZpbGw9InJnYigxOTQsNTQsNTQpIiAvPjxwb2x5Z29uIHBvaW50cz0iOSwyIDE0LDYuNSA5LDExIiBmaWxsPSJyZ2IoMjU1LDI1NSwyNTUpIiAvPjwvc3ZnPg==)
}

.i-printer {
    width: 22px;
    height: 20px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTQwOC41IDE2MC41di04OGgtMzA1djg4aC01My41djIwM2g1My4zMzN2LTU1LjVoMzA1LjE2N3Y1NS41aDUzLjV2LTIwM2gtNTMuNXptLTQwIDBoLTIyNXYtNDhoMjI1djQ4em01My44MzQgNTAuNzY3Yy02LjY4MiAwLTEyLjEtNS40MTgtMTIuMS0xMi4xMDFzNS40MTgtMTIuMSAxMi4xLTEyLjEgMTIuMTAxIDUuNDE3IDEyLjEwMSAxMi4xLTUuNDE5IDEyLjEwMS0xMi4xMDEgMTIuMTAxem0tNTQuNTAxIDIyOC4yMzNoLTIyNC4zMzN2LTk3aDIyNC4zMzN2OTd6IiBmaWxsPSJyZ2IoMTYyLDE2MiwxNjIpIi8+PC9zdmc+);
    background-size: contain;
    margin-bottom: -2px
}

.i-mail {
    width: 20px;
    height: 20px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTUwLjQyMyAxMDMuNDA3djMwNS4xODZoNDExLjE1M3YtMzA1LjE4NmgtNDExLjE1M3ptMzYyLjUwNSA0MGwtMTU3LjMzNSAxMzAuMDI5LTE1Ni45MDItMTMwLjAyOWgzMTQuMjM3em04LjY0OCAyMjUuMTg2aC0zMzEuMTUzdi0xNzcuNTA4bDE2NS4xMzcgMTM2LjgxMyAxNjYuMDE2LTEzNy4xOXYxNzcuODg1eiIgZmlsbD0icmdiKDE2MiwxNjIsMTYyKSIvPjwvc3ZnPg==);
    background-size: contain
}

.i-comment {
    display: inline-block;
    min-width: 21px;
    text-align: center;
    -ms-transform: skew(-8deg);
    -moz-transform: skew(-8deg);
    -o-transform: skew(-8deg);
    -webkit-transform: skew(-8deg);
    transform: skew(-8deg);
    background: #c23636;
    position: relative
}

.i-comment.empty {
    text-transform: uppercase
}

.i-comment span {
    display: inline-block;
    -ms-transform: skew(8deg);
    -moz-transform: skew(8deg);
    -o-transform: skew(8deg);
    -webkit-transform: skew(8deg);
    transform: skew(8deg);
    color: #fff;
    padding: 0 5px
}

.i-comment span:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 7px 0 0;
    border-color: #c23636 transparent transparent;
    margin-bottom: -3px;
    position: absolute;
    right: 3px;
    bottom: 0;
    display: inline-block
}

.i-comment.empty span:after {
    display: none
}

.i-search {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTIiIGhlaWdodD0iMTEyIiB2aWV3Qm94PSIwIDAgMTEyIDExMiI+PHBhdGggZD0iTTEwOC45MTkgMTA4LjkxOGMtNC4xMDkgNC4xMDktMTAuNzY4IDQuMTA5LTE0Ljg3NyAwbC0xOC41NjQtMTguNTY0Yy03LjYzMiA0Ljg5Ni0xNi42NTMgNy44MTMtMjYuMzk0IDcuODEzLTI3LjEwNiAwLTQ5LjA4NC0yMS45NzQtNDkuMDg0LTQ5LjA4NHMyMS45NzgtNDkuMDg0IDQ5LjA4NC00OS4wODRjMjcuMTEgMCA0OS4wODQgMjEuOTc0IDQ5LjA4NCA0OS4wODQgMCA5LjczNy0yLjkyMSAxOC43NjItNy44MTMgMjYuMzk4bDE4LjU2NCAxOC41NjRjNC4xMDggNC4xMDkgNC4xMDggMTAuNzY0IDAgMTQuODczek00OS4wODQgMTQuMDI0Yy0xOS4zNjIgMC0zNS4wNjAgMTUuNjk1LTM1LjA2MCAzNS4wNjBzMTUuNjk4IDM1LjA2MCAzNS4wNjAgMzUuMDYwYzE5LjM2NSAwIDM1LjA2MC0xNS42OTUgMzUuMDYwLTM1LjA2MHMtMTUuNjk1LTM1LjA2MC0zNS4wNjAtMzUuMDYweiIgZmlsbD0icmdiKDI1NSwyNTUsMjU1KSIgLz48L3N2Zz4=);
    background-size: contain;
    width: 24px;
    height: 24px
}

.i-close {
    background-size: contain;
    width: 32px;
    height: 32px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzY4IiBoZWlnaHQ9IjM2OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSJyZ2IoMTk5LDE5OSwxOTkpIiBkPSJNMzY3LjM5MyAzMDMuNTk1bC0xMTguNjM2LTExOC42MTggMTE4LjYyMS0xMTguNjI5LTYzLjc4My02My43NDEtMTE4LjYgMTE4LjYxOC0xMTguNjItMTE4LjYwMy02My43NjggNjMuNzMgMTE4LjYzOSAxMTguNjMxLTExOC42MjQgMTE4LjY0MiA2My43MyA2My43NjggMTE4LjY1LTExOC42NTkgMTE4LjY1IDExOC42NDQgNjMuNzQxLTYzLjc4M3oiLz48L3N2Zz4=)
}

.i-fullscreen {
    background-size: contain;
    width: 32px;
    height: 32px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDEzIiBoZWlnaHQ9IjQxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTA3Ljk0MyAzNzYuOTQybDM0Ljk5NyAzNS4wNThoLTE0Mi45NHYtMTQyLjkzOGwzNS4wNTggMzQuOTk3IDU3LjI1My01Ny4yNTQgNzIuODg0IDcyLjg4Ni01Ny4yNTIgNTcuMjUxem0xNjEuMTE5LTM3Ni45NDJsMzQuOTk3IDM1LjA1OC01Ni4wOCA1Ni4wNzkgNzIuODg1IDcyLjg4NSA1Ni4wOC01Ni4wOCAzNS4wNTYgMzQuOTk2di0xNDIuOTM4aC0xNDIuOTM4em0tMjM0LjAwNCAxMDcuOTQzbC0zNS4wNTggMzQuOTk3di0xNDIuOTRoMTQyLjkzOGwtMzQuOTk4IDM1LjA1OCA1Ny4yNTQgNTcuMjUzLTcyLjg4NiA3Mi44ODQtNTcuMjUtNTcuMjUyem0zNzYuOTQyIDE2MS4xMTlsLTM1LjA1OCAzNC45OTctNTYuMDc5LTU2LjA4LTcyLjg4NSA3Mi44ODUgNTYuMDggNTYuMDgtMzQuOTk2IDM1LjA1NmgxNDIuOTM4di0xNDIuOTM4eiIgZmlsbD0icmdiKDE5OSwxOTksMTk5KSIvPjwvc3ZnPg==)
}