@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------ICONS-----------------------------------------------------*/

.content-green .icons.rec {
	margin-bottom: 10px;
	display: block;
}

.res1080, .ahd, .tvi, .cvi, .cvbs, .antivandal, .temp, .indoor, .outdoor, .res720, .res960, .ptz, .ip, .poe, .sd, .audio, .mp4, .part9, .part10, .part11, .part12, .part13, .part14 {
	width: 53px;
	height: 53px;
	background: url(../images/icons-w.svg) no-repeat;
	background-size: cover;
	display: inline-block;
	margin-right: -4px;
	vertical-align: middle;
	margin-top: -7px;
	filter: brightness(600%) grayscale(100%);
	-webkit-filter: brightness(600%) grayscale(100%);
	-moz-filter: brightness(600%) grayscale(100%);
	-ms-filter: brightness(600%) grayscale(100%);
	-o-filter: brightness(600%) grayscale(100%);
	text-indent: -999em;
}

.icons.rec .ch4, .icons.rec .ch5, .icons.rec .ch8, .icons.rec .ch9, .icons.rec .ch12, .icons.rec .ch16, .icons.rec .ch24,
.icons.rec .ch32, .icons.rec .ch64, .icons.rec .ch20, .icons.rec .m5, .icons.rec .m3, .icons.rec .h265  {
	width: 60px;
	height: 60px;
	background: url(../images/icons-rec.svg) no-repeat;
	background-size: cover;
	display: inline-block;
	margin-right: -4px;
	vertical-align: middle;
	margin-top: -7px;
	filter: brightness(600%) grayscale(100%);
	-webkit-filter: brightness(600%) grayscale(100%);
	-moz-filter: brightness(600%) grayscale(100%);
	-ms-filter: brightness(600%) grayscale(100%);
	-o-filter: brightness(600%) grayscale(100%);
	text-indent: -999em;
}


.res1080, .res720, .res960, .mp4 {
	background-position: 50% 0%;
	width: 69px;
	height: 69px;
	margin-right: 5px;
}
.ahd {
	background-position: 50% 4.34783%;
}
.tvi {
	background-position: 50% 8.69565%;
}
.cvi {
	background-position: 50% 13.04348%;
}
.cvbs {
	background-position: 50% 17.3913%;
}
.antivandal {
	background-position: 50% 21.73913%;
}
.temp {
	background-position: 50% 26.08696%;
}
.indoor {
	background-position: 50% 30.43478%;
}
.outdoor {
	background-position: 50% 34.78261%;
}
.res720 {
	background-position: 50% 39.13043%;
}
.res960 {
	background-position: 50% 43.32609%;
}
.ptz {
	background-position: 50% 47.8391%;
}
.ip {
	background-position: 50% 52.17391%;
}
.poe {
	background-position: 50% 56.52174%;
}
.sd {
	background-position: 50% 60.86957%;
}
.audio {
	background-position: 50% 65.21739%;
}
.mp4 {
	background-position: 50% 69.56522%;
}
.part8 {
	background-position: 50% 73.91304%;
}
.part9 {
	background-position: 50% 78.26087%;
}
.part10 {
	background-position: 50% 82.6087%;
}
.part11 {
	background-position: 50% 86.95652%;
}
.part12 {
	background-position: 50% 91.30435%;
}
.part13 {
	background-position: 50% 95.65217%;
}
.part14 {
	background-position: 50% 100%;
}
.long .ahd, .long .tvi, .long .cvi, .long .cvbs, .long .antivandal, .long .temp, .long .indoor, .long .outdoor, .long .res720, .long .ptz, .long .ip, .long .poe, .long .sd, .long .audio, .long .part7, .long .part8, .long .part9, .long .part10, .long .part11, .long .part12, .long .part13, .long .part14 {
	width: 50px;
	height: 50px;
}
.long .res1080, .long .res720, .long .res960, .long .mp4 {
	width: 66px;
	height: 66px;
	}



.icons.rec > div.ch4 {
	background-position: 50% 0%;
}
.icons.rec > div.ch5 {
	background-position: 50% 4.34783%;
}
.icons.rec > div.ch8 {
	background-position: 50% 8.69565%;
}
.icons.rec > div.ch9 {
	background-position: 50% 13.04348%;
}
.icons.rec > div.ch12 {
	background-position: 50% 17.3913%;
}
.icons.rec > div.ch16 {
	background-position: 50% 21.73913%;
}
.icons.rec > div.ch24 {
	background-position: 50% 26.08696%;
}
.icons.rec > div.ch32 {
	background-position: 50% 30.43478%;
}
.icons.rec > div.ch20 {
	background-position: 50% 34.78261%;
}
.icons.rec > div.m5 {
	width: 53px;
	height:53px;
	background-position: 50% 39.13043%;
}
.icons.rec > div.m3 {
	width: 53px;
	height:53px;
	background-position: 50% 43.5109%;
}
.icons.rec > div.h265 {
	width: 53px;
	height: 53px;
	background-position: 50% 47.8391%;
}
.icons.rec > div.ch64 {
	background-position: 50% 52.17391%;
}
.icons.rec > div.part6 {
	background-position: 50% 56.52174%;
}
.icons.rec > div.part7 {
	background-position: 50% 60.86957%;
}
.icons.rec > div.part8 {
	background-position: 50% 65.21739%;
}
.icons.rec > div.part9 {
	background-position: 50% 69.56522%;
}
.icons.rec > div.part10 {
	background-position: 50% 73.91304%;
}
.icons.rec > div.part11 {
	background-position: 50% 78.26087%;
}
.icons.rec > div.part12 {
	background-position: 50% 82.6087%;
}
.icons.rec > div.part13 {
	background-position: 50% 86.95652%;
}
.icons.rec > div.part14 {
	background-position: 50% 91.30435%;
}
.icons.rec > div.part15 {
	background-position: 50% 95.65217%;
}
.icons.rec > div.part16 {
	background-position: 50% 100%;
}




.ctg .icons {
	filter: brightness(65%) grayscale(100%);
	-webkit-filter: brightness(65%) grayscale(100%);
	-moz-filter: brightness(65%) grayscale(100%);
	-ms-filter: brightness(65%) grayscale(100%);
	-o-filter: brightness(65%) grayscale(100%);
	margin: 25px 0 0;
	position: absolute;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
}
.ctg .rec .icons {
	margin-top:50px;
}
.ctg .icons div, .ctg .icons.rec div, .ctg .icons.rec .m5, .ctg .icons.rec .m3, .ctg .icons.rec .h265 {
	width: 35px;
	height: 35px;
	min-height: inherit;
}
.ctg .icons .res1080, .ctg .icons .res720, .ctg .icons .res960, .ctg .icons .mp4 {
	width: 50px;
	height: 28px;
	margin-right: 0px;
}

.ctg .icons.rec .ch4, .ctg .icons.rec .ch5, .ctg .icons.rec .ch8, .ctg .icons.rec .ch9, .ctg .icons.rec .ch12, 
.ctg .icons.rec .ch16, .ctg .icons.rec .ch24, .ctg .icons.rec .ch32, .ctg .icons.rec .ch64, .ctg .icons.rec .ch20      {
	width: 45px;
	height: 45px;
}

.ctg .icons .res1080 {
	background-position: 50% 1%;
}
.ctg .icons .res720 {
	background-position: 50% 39.4%;
}
.ctg .icons .res960 {
	background-position: 50% 43.7%;
}
.ctg .icons .mp4 {
	background-position: 50% 69.4%;
	background-size: 90%;
}







.ctg .spacing {
	margin-right: 2px!important;
}


/**
   Coded by /u/j0be in scss.
   See scss source here -> https://codepen.io/j0be/pen/MKRVyN
*/

.expand > li > div > div > p:nth-child(2):before, .marker:before  {
	background-position: 50% 0;
}
.expand > li > div > div > p:nth-child(3):before, .phone:before {
	background-position: 50% 11.11111%;
}
.expand > li > div > div > p:nth-child(4):before, .mail:before  {
	background-position: 50% 22.22222%;
}
.expand > li > div > div > p:nth-child(5):before, .site:before  {
	background-position: 50% 33.33333%;
}
.icon-blue {
	background-position: 50% 44.44444%;
}
.icon-indigo {
	background-position: 50% 55.55556%;
}
.icon-violet {
	background-position: 50% 66.66667%;
}
.icon-cyan {
	background-position: 50% 77.77778%;
}
.icon-magenta {
	background-position: 50% 88.88889%;
}
.icon-lime {
	background-position: 50% 100%;
}


.marker, .phone, .mail, .site {
	position: relative;
	padding-left: 33px!important;
	line-height: 1.4em!important;
	display: inline-block;
	margin: 7px 30px 8px 0 !important;
}
.marker {
	margin-left: 0;
}


.marker:before, .phone:before, .mail:before, .site:before {
	position: absolute;
	content: '';
	width: 25px;
	height: 25px;
	background: url(../images/icons-contact.svg) no-repeat;
	background-size: cover;
	left: 0px;
}

.content-green .marker:before, .content-green .phone:before, .content-green .mail:before, .content-green .site:before {
		filter: brightness(135%) grayscale(0%);
		-webkit-filter: brightness(135%) grayscale(0%);
		-moz-filter: brightness(135%) grayscale(0%);
		-ms-filter: brightness(135%) grayscale(0%);
		-o-filter: brightness(135%) grayscale(0%);
}

.marker:before  {
	background-position: 50% 0 !important;
}
.phone:before {
	background-position: 50% 11.11111%!important;
}
.mail:before  {
	background-position: 50% 23.22222% !important;
}
.site:before  {
	background-position: 50% 33.33333% !important;
}



.easy, .event, .user, .reg, .cam, .column .poe, .column .temp, .column .audio, .column .sd, .column .cloud, 
.column .cms, .column .disk, .column .web, .column .h265 {
	margin-left: 70px!important;
	position: relative;
	margin-bottom: 25px;
}

.easy:before, .event:before, .user:before, .reg:before, .cam:before, .column .poe:before, .column .temp:before, .column .audio:before, 
.column .sd:before, .column .cloud:before, .column .cms:before, .column .disk:before, .column .web:before, .column .h265:before   {
	content:'';
	width: 55px;
	height: 55px;
	background: url(../images/icons-add.svg) no-repeat;
	background-size: cover;
	display: block;
	position: absolute;
	left: -60px;
	top: 50%;
	transform: translateY(-50%);
}
.column .poe, .column .temp, .column .audio, .column .sd {
	text-indent: inherit;
	width: auto;
	height: inherit;
	background: none;
	margin-top: 15px;
	display: block;
	vertical-align: inherit;
	filter: brightness(100%) grayscale(0%);
	-webkit-filter: brightness(100%) grayscale(0%);
	-moz-filter: brightness(100%) grayscale(0%);
	-ms-filter: brightness(100%) grayscale(0%);
	-o-filter: brightness(100%) grayscale(0%);
}

.column .poe:before, .column .temp:before, .column .audio:before, .column .sd:before  {
    background: url(../images/icons-w.svg) no-repeat; background-size: cover
}

.column .poe:before {
	background-position: 50% 56.7%;
}
.column .temp:before {
	background-position: 50% 34.93%;
}

.column .audio:before {
	background-position: 50% 65.4%;
}
.column .sd:before {
	background-position: 50% 60.93%;
}


.easy:before {background-position: 50% 13.1%;}
.event:before {background-position: 50% 4.4%;}
.user:before {background-position: 50% 8.8%;}
.reg:before {background-position: 50% 0.1%;}
.cam:before {background-position: 50% 26.27%;}
.column .cloud:before {background-position: 50% 17.5%;}
.column .cms:before {background-position: 50% 21.8%;}
.column .disk:before {background-position: 50% 39.3%;}
.column .web:before {background-position: 50% 34.9%;}
.column .h265:before {background: url(../images/icons-rec.svg) no-repeat;background-size: cover;background-position: 50% 48%;}



/* ---------------------------------------------425 PX-----------------------------------------------------*/


@media (max-width: 425px) {
	
.res1080, .ahd, .tvi, .cvi, .cvbs, .antivandal, .temp, .indoor, .outdoor, .res720, .res960, .ptz, .ip, .poe, .sd, .audio, .mp4, .part8, .part9, .part10, .part11, .part12, .part13,
.part14{
	width: 44px;
	height: 44px;
	}
.icons.rec div.m5, .icons.rec div.m3, .icons.rec div.h265 {
	width: 44px;
	height: 44px;
}

.res1080, .res720, .res960, .mp4 {
	width: 60px; height: 60px;
}	

.icons.rec .ch4, .icons.rec .ch20, .icons.rec .ch8, .icons.rec .ch5, .icons.rec .ch9, 
.icons.rec .ch12, .icons.rec .ch16, .icons.rec .ch24, .icons.rec .ch32, .icons.rec .ch64 {
	width: 50px; height: 50px;
}	

}