/*!
 *	.ico i -> "background-position" write for default
 *	.ico::before -> "background-position" write for :hover
 *	.ico::after -> "background-position" write for :active
 *	examples: 
 *	<i class="ico-book"><i></i></i>
 *	<span class="ico-book"><i></i></span>	
 *
 */
 
 
/*.ico  */
[class ^= "ico-"], 
[class *= " ico-"] {
	display: inline-block;
	width: 20px;
	height: 20px;
	position: relative;
	text-decoration: none !important;
	vertical-align: middle !important;	
	font-size: 0;
	line-height: 0;
	letter-spacing: -1px;
}

/*.ico i, .ico::before, .ico::after */
[class ^= "ico-"] i, 
[class *= " ico-"] i,
[class ^= "ico-"]::before, 
[class *= " ico-"]::before, 
[class ^= "ico-"]::after, 
[class *= " ico-"]::after {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	content: '';
	text-decoration: none !important;
	-webkit-transition: all 0.3s ease 0s;
	   -moz-transition: all 0.3s ease 0s;
	    -ms-transition: all 0.3s ease 0s;
	     -o-transition: all 0.3s ease 0s;
	        transition: all 0.3s ease 0s;	
}

/*.ico i { z-index: 1; }*/
[class ^= "ico-"] i, 
[class *= " ico-"] i {
	z-index: 1;	
}

/*.ico::before { z-index: 2; } */
[class ^= "ico-"]::before, 
[class *= " ico-"]::before {
	z-index: 2;	
}

/*.ico::after { z-index: 3; }*/
[class ^= "ico-"]::after, 
[class *= " ico-"]::after {
	z-index: 3;	
}

/*.ico i { opacity: 1; }*/
[class ^= "ico-"] i, 
[class *= " ico-"] i {
 opacity: 1; 	
}

/*.ico::before, .ico::after { opacity: 0; }*/
[class ^= "ico-"]::before, 
[class *= " ico-"]::before, 
[class ^= "ico-"]::after, 
[class *= " ico-"]::after {
	opacity: 0; 	
}

/*a:hover > .ico i, button:hover > .ico i, a:active > .ico i, button:active > .ico i { opacity: 0; }*/
a:hover > [class ^= "ico-"] i, 
a:hover > [class *= " ico-"] i,
a:active > [class ^= "ico-"] i, 
a:active > [class *= " ico-"] i,
button:hover > [class ^= "ico-"] i, 
button:hover > [class *= " ico-"] i,
button:active > [class ^= "ico-"] i, 
button:active > [class *= " ico-"] i {
	opacity: 0;
}

/*a:hover > .ico::before, button:hover > .ico::before { opacity: 1; }*/
a:hover > [class ^= "ico-"]::before, 
a:hover > [class *= " ico-"]::before,
button:hover > [class ^= "ico-"]::before, 
button:hover > [class *= " ico-"]::before {
	opacity: 1;
}

/*a:active > .ico::before, button:active > .ico::before { opacity: 0; } */
a:active > [class ^= "ico-"]::before, 
a:active > [class *= " ico-"]::before,
button:active > [class ^= "ico-"]::before, 
button:active > [class *= " ico-"]::before {
	opacity: 0;
}

/*a:active > .ico::after, button:active > .ico::after { opacity: 1; }*/
a:active > [class ^= "ico-"]::after, 
a:active > [class *= " ico-"]::after,
button:active > [class ^= "ico-"]::after, 
button:active > [class *= " ico-"]::after {
	opacity: 1;
}


/* ************************************************************************** */
/* ************************************************************************** */


.ico-phone-21x21 { 
	width: 21px; 
	height: 21px; 
}
.ico-phone-21x21 i { 
	background: url(../img/ico-phone-21x21.png) 0 0 no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}
.ico-phone-21x21::before {
	background: url(../img/ico-phone-21x21.png) 0 -25px no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}
.ico-phone-21x21::after { 
	background: url(../img/ico-phone-21x21.png) 0 -25px no-repeat; 
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}


.ico-soc-fb-38x38 { 
	width: 38px; 
	height: 38px; 
}
.ico-soc-fb-38x38 i { 
	background: url(../img/ico-soc-fb-38x38.png) 0 0 no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-fb-38x38::before {
	background: url(../img/ico-soc-fb-38x38.png) 0 -50px no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-fb-38x38::after { 
	background: url(../img/ico-soc-fb-38x38.png) 0 -50px no-repeat; 
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}


.ico-soc-tw-38x38 { 
	width: 38px; 
	height: 38px; 
}
.ico-soc-tw-38x38 i { 
	background: url(../img/ico-soc-tw-38x38.png) 0 0 no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-tw-38x38::before {
	background: url(../img/ico-soc-tw-38x38.png) 0 -50px no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-tw-38x38::after { 
	background: url(../img/ico-soc-tw-38x38.png) 0 -50px no-repeat; 
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}


.ico-soc-yt-38x38 { 
	width: 38px; 
	height: 38px; 
}
.ico-soc-yt-38x38 i { 
	background: url(../img/ico-soc-yt-38x38.png) 0 0 no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-yt-38x38::before {
	background: url(../img/ico-soc-yt-38x38.png) 0 -50px no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-yt-38x38::after { 
	background: url(../img/ico-soc-yt-38x38.png) 0 -50px no-repeat; 
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}


.ico-soc-vk-38x38 { 
	width: 38px; 
	height: 38px; 
}
.ico-soc-vk-38x38 i { 
	background: url(../img/ico-soc-vk-38x38.png) 0 0 no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-vk-38x38::before {
	background: url(../img/ico-soc-vk-38x38.png) 0 -50px no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-vk-38x38::after { 
	background: url(../img/ico-soc-vk-38x38.png) 0 -50px no-repeat; 
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}


.ico-soc-ok-38x38 { 
	width: 38px; 
	height: 38px; 
}
.ico-soc-ok-38x38 i { 
	background: url(../img/ico-soc-ok-38x38.png) 0 0 no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-ok-38x38::before {
	background: url(../img/ico-soc-ok-38x38.png) 0 -50px no-repeat;
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}
.ico-soc-ok-38x38::after { 
	background: url(../img/ico-soc-ok-38x38.png) 0 -50px no-repeat; 
	-webkit-background-size: auto 100px;
	   -moz-background-size: auto 100px;
	     -o-background-size: auto 100px;
	        background-size: auto 100px;
}



.ico-catalog-16x16 { 
	width: 16px; 
	height: 16px; 
}
.ico-catalog-16x16 i { 
	background: url(../img/ico-catalog-16x16.png) 0 0 no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}
.ico-catalog-16x16::before {
	background: url(../img/ico-catalog-16x16.png) 0 -25px no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}
.ico-catalog-16x16::after { 
	background: url(../img/ico-catalog-16x16.png) 0 -25px no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}



.ico-filters-18x18 { 
	width: 18px; 
	height: 18px; 
}
.ico-filters-18x18 i { 
	background: url(../img/ico-filters-18x18.png) 0 0 no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}
.ico-filters-18x18::before {
	background: url(../img/ico-filters-18x18.png) 0 -25px no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}
.ico-filters-18x18::after { 
	background: url(../img/ico-filters-18x18.png) 0 -25px no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}



.ico-back-24x21 { 
	width: 24px; 
	height: 21px; 
}
.ico-back-24x21 i { 
	background: url(../img/ico-back-24x21.png) 0 0 no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}
.ico-back-24x21::before {
	background: url(../img/ico-back-24x21.png) 0 -25px no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}
.ico-back-24x21::after { 
	background: url(../img/ico-back-24x21.png) 0 -25px no-repeat;
	-webkit-background-size: auto 50px;
	   -moz-background-size: auto 50px;
	     -o-background-size: auto 50px;
	        background-size: auto 50px;
}