/* Имена классов иконок двухсегментные.
	 Изменение в HTML первого сегмента имени класса иконки приводит к изменению цвета
	 с белого цвета "white-" на черный цвет "black-" и наоборот
*/

[class^="white-"], [class*=" white-"],
[class^="black-"], [class*=" black-"] {
	display: inline-block;
	background-repeat: no-repeat;
}

[class^="white-"], [class*=" white-"] {
	background-image: url(white-sprite.svg); /* спрайт с белыми иконками */
}

[class^="black-"], [class*=" black-"] {
	background-image: url(black-sprite.svg); /* спрайт с черными иконками */
}

.black-barrier_1,
.white-barrier_1 {
	width: 89px;
	height: 64px;
	background-position: 0 0;
}
.black-barrier_2,
.white-barrier_2 {
	width: 64px;
	height: 64px;
	background-position: -105px 0;
}
.black-barrier_3,
.white-barrier_3 {
	width: 64px;
	height: 64px;
	background-position: -185px 0;
}
.black-barrier_4,
.white-barrier_4 {
	width: 66px;
	height: 64px;
	background-position: -265px 0;
}
.black-box,
.white-box {
	width: 64px;
	height: 64px;
	background-position: -347px 0;
}
.black-camera,
.white-camera {
	width: 67px;
	height: 64px;
	background-position: -427px 0;
}
.black-fingerprint,
.white-fingerprint {
	width: 64px;
	height: 64px;
	background-position: -510px 0;
}
.black-metal-detector_1,
.white-metal-detector_1 {
	width: 65px;
	height: 64px;
	background-position: -590px 0;
}
.black-metal-detector_2,
.white-metal-detector_2 {
	width: 64px;
	height: 64px;
	background-position: -671px 0;
}
.black-metal-detector_3,
.white-metal-detector_3 {
	width: 64px;
	height: 64px;
	background-position: -751px 0;
}
.black-pass,
.white-pass {
	width: 64px;
	height: 64px;
	background-position: -831px 0;
}
.black-radar,
.white-radar {
	width: 64px;
	height: 64px;
	background-position: -911px 0;
}
.black-safe,
.white-safe {
	width: 64px;
	height: 64px;
	background-position: -991px 0;
}
.black-sensor,
.white-sensor {
	width: 64px;
	height: 64px;
	background-position: -1071px 0;
}
.black-turnstile_1,
.white-turnstile_1 {
	width: 64px;
	height: 64px;
	background-position: -1151px 0;
}
.black-turnstile_2,
.white-turnstile_2 {
	width: 32px;
	height: 64px;
	background-position: -1231px 0;
}
.black-turnstile_3,
.white-turnstile_3 {
	width: 33px;
	height: 64px;
	background-position: 0 -80px;
}
.black-turnstile_4,
.white-turnstile_4 {
	width: 48px;
	height: 64px;
	background-position: -49px -80px;
}
.black-turnstile_5,
.white-turnstile_5 {
	width: 42px;
	height: 64px;
	background-position: -113px -80px;
}
.black-turnstile_6,
.white-turnstile_6 {
	width: 48px;
	height: 64px;
	background-position: -171px -80px;
}
.black-turnstile_7,
.white-turnstile_7 {
	width: 64px;
	height: 64px;
	background-position: -235px -80px;
}
.black-turnstile_8,
.white-turnstile_8 {
	width: 64px;
	height: 64px;
	background-position: -315px -80px;
}
