.si-icons span {
	display: inline-block;
	width: 64px;
	height: 64px;
	margin: 40px 30px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center center;
}

.si-icons-hover span {
	width: 128px;
	height: 128px;
	margin: 50px 40px;
}

.si-icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center center;
}

/* Fallback for browsers that don't support SVG - Generated with http://iconizr.com/ */

.no-svg .si-icon-clock, .si-icon-clock i.no-svg { background-image: url('../png/clock.png') }
.no-svg .si-icon-contract, .si-icon-contract i.no-svg { background-image: url('../png/contract.png') }
.no-svg .si-icon-down-arrow, .si-icon-down-arrow i.no-svg { background-image: url('../png/down-arrow.png') }
.no-svg .si-icon-equalizer, .si-icon-equalizer i.no-svg { background-image: url('../png/equalizer.png') }
.no-svg .si-icon-flag, .si-icon-flag i.no-svg { background-image: url('../png/flag.png') }
.no-svg .si-icon-glass-empty, .si-icon-glass-empty i.no-svg { background-image: url('../png/glass.png') }
.no-svg .si-icon-hamburger, .no-svg .si-icon-hamburger-cross, .si-icon-hamburger i.no-svg, .si-icon-hamburger-cross i.no-svg { background-image: url('../png/hamburger.png') }
.no-svg .si-icon-hourglass, .si-icon-hourglass i.no-svg { background-image: url('../png/hourglass.png') }
.no-svg .si-icon-mail, .si-icon-mail i.no-svg { background-image: url('../png/mail.png') }
.no-svg .si-icon-maximize, .no-svg .si-icon-maximize-rotate, .si-icon-maximize i.no-svg, .si-icon-maximize-rotate i.no-svg { background-image: url('../png/maximize.png') }
.no-svg .si-icon-monitor, .si-icon-monitor i.no-svg { background-image: url('../png/monitor.png') }
.no-svg .si-icon-nav-left-arrow, .si-icon-nav-left-arrow i.no-svg { background-image: url('../png/nav-left-arrow.png') }
.no-svg .si-icon-nav-up-arrow, .si-icon-nav-up-arrow i.no-svg { background-image: url('../png/nav-up-arrow.png') }
.no-svg .si-icon-lock, .si-icon-lock i.no-svg { background-image: url('../png/padlock.png') }
.no-svg .si-icon-play, .si-icon-play i.no-svg { background-image: url('../png/play.png') }
.no-svg .si-icon-plus, .no-svg .si-icon-plus-cross, .si-icon-plus i.no-svg, .si-icon-plus-cross i.no-svg { background-image: url('../png/plus.png') }
.no-svg .si-icon-right-arrow, .si-icon-right-arrow i.no-svg { background-image: url('../png/right-arrow.png') }
.no-svg .si-icon-smiley, .si-icon-smiley i.no-svg { background-image: url('../png/smiley.png') }
.no-svg .si-icon-trash, .si-icon-trash i.no-svg { background-image: url('../png/trash.png') }
.no-svg .si-icon-volume, .si-icon-volume i.no-svg { background-image: url('../png/volume.png') }
.no-svg .si-icon-zoom, .si-icon-zoom i.no-svg { background-image: url('../png/zoom.png') }

i.no-svg {
	height: 100%;
	width: 100%;
	display: block;
	background-size: contain;
}

/* alternatively you can define that there is no background image when SVG is supported instead of using .no-svg */