@import "__grid.less";

@font-face {
	font-family: 'zspicon';
	src:  url('../fonts/zsp.eot?6mfloc');
	src:  url('../fonts/zsp.eot?6mfloc#iefix') format('embedded-opentype'),
		url('../fonts/zsp.woff2?6mfloc') format('woff2'),
		url('../fonts/zsp.ttf?6mfloc') format('truetype'),
		url('../fonts/zsp.woff?6mfloc') format('woff'),
		url('../fonts/zsp.svg?6mfloc#zsp') format('svg');
	font-weight: normal;
	font-style: normal;
}


// ----------------------------------------------------------------------------
// Icon block
// ----------------------------------------------------------------------------
[class*="sp-icon-"] {
	display: flex;
	position: relative;
	padding: 9px;
	margin: 3px;
	border-radius: 3px;
	box-sizing: border-box;
	background: #333;
	color: #fff;
	font-size: 16px;
	transition: opacity 0.2s;
	line-height: 1;
	align-items: center;

	&:hover{
		opacity: 0.8;
	}

	// Icon
	// ------------
	i{
		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'zspicon' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		flex-basis: 100%;
		max-width: 100%;

		position: relative;
		z-index: 10;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	// Radius
	// --------------
	&.soft{
		border-radius: 15%;
	}

	&.square{
		border-radius: 0;
	}

	// Shape
	// -------------
	&.minimal{
		color: inherit;
		background: transparent;
	}

	&.transparent{
		background: transparent;
	}

	&.circle{
		border-radius: 50%;
	}

	&.rotated{
		transform: rotate(45deg);
		i{
			transform: rotate(-45deg);
		}
	}

	&.burst{
		&:before{
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: inherit;
			transform: rotate( 45deg );
			border-radius: inherit;
		}
	}

	&.burst-alt{
		&:before,
		&:after{
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: inherit;
			border-radius: inherit;
		}
		&:before{
			transform: rotate( 30deg );
		}
		&:after{
			transform: rotate( 60deg );
		}
	}

	&.burst,
	&.burst-alt{
		margin: 7px;
	}

	// Size
	// ------------
	&.large{
		width: 50px;
		height: 50px;
		text-align: center;
		font-size: 24px;
		padding: 7px 0;
	}

	&.extra-large{
		width: 100px;
		height: 100px;
		text-align: center;
		font-size: 48px;
		padding: 14px 0;
	}

	&.large{
		&.burst,
		&.burst-alt,
		&.rotated{
			margin: 10px;
		}
	}

	&.extra-large{
		&.burst,
		&.burst-alt,
		&.rotated{
			margin: 20px;
		}
	}
}


// ----------------------------------------------------------------------------
// Widget
// ----------------------------------------------------------------------------
.zsp-zerowp-social-profiles-list{
	> a{
		display: inline-block;
	}
	.network{
		display: flex;
		position: relative;
		margin-bottom: 15px;
		align-items: center;
		> [class*="sp-icon-"]{
			margin: 0;
		}
		> .details{
			margin: 0 0 0 15px;
			.on{
				display: block;
			}
			.title{
				position: relative;
				display: inline-block;
				font-weight: 700;
			}
		}

		&.large{
			margin-bottom: 25px;
			> [class*="sp-icon-"]{
				top: 0;
			}
		}

		&.extra-large{
			margin-bottom: 25px;
			> [class*="sp-icon-"]{
				top: 0;
			}
		}
		&.extra-large{
			&.burst,
			&.burst-alt,
			&.rotated{
				min-height: 120px;
			}
		}
	}
}

.zsp-about-user-in{
	text-align: center;
	&.inline{
		text-align: left;
	}
	.photo{
		display: block;
		text-align: center;
		img{
			margin: 10px auto;
			display: inline-block;
		}
		&.circle{
			img{
				border-radius: 50%;
			}
		}
		&.square{
			img{
				border-radius: 0;
			}
		}
		&.soft{
			img{
				border-radius: 5px;
			}
		}

	}
	.username{
		font-size: 22px;
	}

	.author-info{
		font-size: 14px;
		margin-bottom: 10px;
		a{
			opacity: .85;
		}
		> span{
			display: inline-block;
			+ span{
				margin-left: 10px;
				padding-left: 10px;
				border-left: 1px solid rgba(0, 0, 0, 0.1);
			}
		}
	}
}


// ----------------------------------------------------------------------------
// Icons
// ----------------------------------------------------------------------------
.sp-icon-500px{
	background: #58a9de;
	i:before{ content: "\e000"; }
}
.sp-icon-8tracks{
	background: #122c4b;
	i:before{ content: "\e001"; }
}
.sp-icon-airbnb{
	background: #ff5a5f;
	i:before{ content: "\e002"; }
}
.sp-icon-alliance{
	background: #144587;
	i:before{ content: "\e003"; }
}
.sp-icon-amazon{
	background: #ff9900;
	i:before{ content: "\e004"; }
}
.sp-icon-amplement{
	background: #0996c3;
	i:before{ content: "\e005"; }
}
.sp-icon-android{
	background: #8ec047;
	i:before{ content: "\e006"; }
}
.sp-icon-angellist{
	background: #000000;
	i:before{ content: "\e007"; }
}
.sp-icon-apple{
	background: #B9BFC1;
	i:before{ content: "\e008"; }
}
.sp-icon-appnet{
	background: #494949;
	i:before{ content: "\e009"; }
}
.sp-icon-baidu{
	background: #2629d9;
	i:before{ content: "\e00a"; }
}
.sp-icon-bandcamp{
	background: #619aa9;
	i:before{ content: "\e00b"; }
}
.sp-icon-battlenet{
	background: #0096CD;
	i:before{ content: "\e00c"; }
}
.sp-icon-beam{
	background: #536dfe;
	i:before{ content: "\e00d"; }
}
.sp-icon-bebee{
	background: #f28f16;
	i:before{ content: "\e00e"; }
}
.sp-icon-bebo{
	background: #EF1011;
	i:before{ content: "\e00f"; }
}
.sp-icon-behance{
	background: #000000;
	i:before{ content: "\e010"; }
}
.sp-icon-blizzard{
	background: #01B2F1;
	i:before{ content: "\e011"; }
}
.sp-icon-blogger{
	background: #ec661c;
	i:before{ content: "\e012"; }
}
.sp-icon-buffer{
	background: #000000;
	i:before{ content: "\e013"; }
}
.sp-icon-chrome{
	background: #757575;
	i:before{ content: "\e014"; }
}
.sp-icon-coderwall{
	background: #3E8DCC;
	i:before{ content: "\e015"; }
}
.sp-icon-curse{
	background: #f26522;
	i:before{ content: "\e016"; }
}
.sp-icon-dailymotion{
	background: #004e72;
	i:before{ content: "\e017"; }
}
.sp-icon-deezer{
	background: #32323d;
	i:before{ content: "\e018"; }
}
.sp-icon-delicious{
	background: #020202;
	i:before{ content: "\e019"; }
}
.sp-icon-deviantart{
	background: #c5d200;
	i:before{ content: "\e01a"; }
}
.sp-icon-diablo{
	background: #8B1209;
	i:before{ content: "\e01b"; }
}
.sp-icon-digg{
	background: #1d1d1b;
	i:before{ content: "\e01c"; }
}
.sp-icon-discord{
	background: #7289da;
	i:before{ content: "\e01d"; }
}
.sp-icon-disqus{
	background: #2e9fff;
	i:before{ content: "\e01e"; }
}
.sp-icon-douban{
	background: #3ca353;
	i:before{ content: "\e01f"; }
}
.sp-icon-draugiem{
	background: #ffa32b;
	i:before{ content: "\e020"; }
}
.sp-icon-dribbble{
	background: #e84d88;
	i:before{ content: "\e021"; }
}
.sp-icon-drupal{
	background: #00598e;
	i:before{ content: "\e022"; }
}
.sp-icon-ebay{
	background: #333333;
	i:before{ content: "\e023"; }
}
.sp-icon-ello{
	background: #000000;
	i:before{ content: "\e024"; }
}
.sp-icon-endomodo{
	background: #86ad00;
	i:before{ content: "\e025"; }
}
.sp-icon-envato{
	background: #597c3a;
	i:before{ content: "\e026"; }
}
.sp-icon-etsy{
	background: #F56400;
	i:before{ content: "\e027"; }
}
.sp-icon-facebook{
	background: #3e5b98;
	i:before{ content: "\e028"; }
}
.sp-icon-feedburner{
	background: #ffcc00;
	i:before{ content: "\e029"; }
}
.sp-icon-filmweb{
	background: #ffc404;
	i:before{ content: "\e02a"; }
}
.sp-icon-firefox{
	background: #484848;
	i:before{ content: "\e02b"; }
}
.sp-icon-flattr{
	background: #F67C1A;
	i:before{ content: "\e02c"; }
}
.sp-icon-flickr{
	background: #1e1e1b;
	i:before{ content: "\e02d"; }
}
.sp-icon-formulr{
	background: #ff5a60;
	i:before{ content: "\e02e"; }
}
.sp-icon-forrst{
	background: #5B9A68;
	i:before{ content: "\e02f"; }
}
.sp-icon-foursquare{
	background: #f94877;
	i:before{ content: "\e030"; }
}
.sp-icon-friendfeed{
	background: #2F72C4;
	i:before{ content: "\e031"; }
}
.sp-icon-gamejolt{
	background: #191919;
	i:before{ content: "\e901"; }
}
.sp-icon-github{
	background: #221e1b;
	i:before{ content: "\e032"; }
}
.sp-icon-goodreads{
	background: #463020;
	i:before{ content: "\e033"; }
}
.sp-icon-google{
	background: #4285f4;
	i:before{ content: "\e034"; }
}
.sp-icon-googlegroups{
	background: #4F8EF5;
	i:before{ content: "\e036"; }
}
.sp-icon-googlephotos{
	background: #212121;
	i:before{ content: "\e037"; }
}
.sp-icon-googleplus{
	background: #dd4b39;
	i:before{ content: "\e038"; }
}
.sp-icon-googlescholar{
	background: #4285f4;
	i:before{ content: "\e035"; }
}
.sp-icon-grooveshark{
	background: #000000;
	i:before{ content: "\e039"; }
}
.sp-icon-hackerrank{
	background: #2ec866;
	i:before{ content: "\e03a"; }
}
.sp-icon-hearthstone{
	background: #EC9313;
	i:before{ content: "\e03b"; }
}
.sp-icon-hellocoton{
	background: #d30d66;
	i:before{ content: "\e03c"; }
}
.sp-icon-heroes{
	background: #2397F7;
	i:before{ content: "\e03d"; }
}
.sp-icon-hitbox{
	background: #99CC00;
	i:before{ content: "\e03e"; }
}
.sp-icon-horde{
	background: #84121C;
	i:before{ content: "\e03f"; }
}
.sp-icon-houzz{
	background: #7CC04B;
	i:before{ content: "\e040"; }
}
.sp-icon-icq{
	background: #7EBD00;
	i:before{ content: "\e041"; }
}
.sp-icon-identica{
	background: #000000;
	i:before{ content: "\e042"; }
}
.sp-icon-imdb{
	background: #E8BA00;
	i:before{ content: "\e043"; }
}
.sp-icon-instagram{
	background: #000000;
	i:before{ content: "\e044"; }
}
.sp-icon-issuu{
	background: #F26F61;
	i:before{ content: "\e045"; }
}
.sp-icon-istock{
	background: #000000;
	i:before{ content: "\e046"; }
}
.sp-icon-itunes{
	background: #ff5e51;
	i:before{ content: "\e047"; }
}
.sp-icon-keybase{
	background: #FF7100;
	i:before{ content: "\e048"; }
}
.sp-icon-lanyrd{
	background: #3c80c9;
	i:before{ content: "\e049"; }
}
.sp-icon-lastfm{
	background: #d41316;
	i:before{ content: "\e04a"; }
}
.sp-icon-line{
	background: #00B901;
	i:before{ content: "\e04b"; }
}
.sp-icon-linkedin{
	background: #3371b7;
	i:before{ content: "\e04c"; }
}
.sp-icon-livejournal{
	background: #0099CC;
	i:before{ content: "\e04d"; }
}
.sp-icon-lyft{
	background: #FF00BF;
	i:before{ content: "\e04e"; }
}
.sp-icon-macos{
	background: #000000;
	i:before{ content: "\e04f"; }
}
.sp-icon-mail{
	background: #000000;
	i:before{ content: "\e050"; }
}
.sp-icon-medium{
	background: #000000;
	i:before{ content: "\e051"; }
}
.sp-icon-meetup{
	background: #e2373c;
	i:before{ content: "\e052"; }
}
.sp-icon-mixcloud{
	background: #000000;
	i:before{ content: "\e053"; }
}
.sp-icon-modelmayhem{
	background: #000000;
	i:before{ content: "\e054"; }
}
.sp-icon-mumble{
	background: #5AB5D1;
	i:before{ content: "\e055"; }
}
.sp-icon-myspace{
	background: #323232;
	i:before{ content: "\e056"; }
}
.sp-icon-newsvine{
	background: #075B2F;
	i:before{ content: "\e057"; }
}
.sp-icon-nintendo{
	background: #F58A33;
	i:before{ content: "\e058"; }
}
.sp-icon-npm{
	background: #C12127;
	i:before{ content: "\e059"; }
}
.sp-icon-odnoklassniki{
	background: #f48420;
	i:before{ content: "\e05a"; }
}
.sp-icon-openid{
	background: #f78c40;
	i:before{ content: "\e05b"; }
}
.sp-icon-opera{
	background: #FF1B2D;
	i:before{ content: "\e05c"; }
}
.sp-icon-outlook{
	background: #0072C6;
	i:before{ content: "\e05d"; }
}
.sp-icon-overwatch{
	background: #9E9E9E;
	i:before{ content: "\e05e"; }
}
.sp-icon-patreon{
	background: #E44727;
	i:before{ content: "\e05f"; }
}
.sp-icon-paypal{
	background: #009cde;
	i:before{ content: "\e060"; }
}
.sp-icon-periscope{
	background: #3AA4C6;
	i:before{ content: "\e061"; }
}
.sp-icon-persona{
	background: #e6753d;
	i:before{ content: "\e062"; }
}
.sp-icon-pinterest{
	background: #c92619;
	i:before{ content: "\e063"; }
}
.sp-icon-play{
	background: #000000;
	i:before{ content: "\e064"; }
}
.sp-icon-player{
	background: #6E41BD;
	i:before{ content: "\e065"; }
}
.sp-icon-playstation{
	background: #000000;
	i:before{ content: "\e066"; }
}
.sp-icon-pocket{
	background: #ED4055;
	i:before{ content: "\e067"; }
}
.sp-icon-qq{
	background: #4297d3;
	i:before{ content: "\e068"; }
}
.sp-icon-quora{
	background: #cb202d;
	i:before{ content: "\e069"; }
}
.sp-icon-raidcall{
	background: #073558;
	i:before{ content: "\e06a"; }
}
.sp-icon-ravelry{
	background: #B6014C;
	i:before{ content: "\e06b"; }
}
.sp-icon-reddit{
	background: #e74a1e;
	i:before{ content: "\e06c"; }
}
.sp-icon-renren{
	background: #2266b0;
	i:before{ content: "\e06d"; }
}
.sp-icon-researchgate{
	background: #00CCBB;
	i:before{ content: "\e06e"; }
}
.sp-icon-residentadvisor{
	background: #B3BE1B;
	i:before{ content: "\e06f"; }
}
.sp-icon-reverbnation{
	background: #000000;
	i:before{ content: "\e070"; }
}
.sp-icon-rss{
	background: #f26109;
	i:before{ content: "\e071"; }
}
.sp-icon-sharethis{
	background: #01bf01;
	i:before{ content: "\e072"; }
}
.sp-icon-skype{
	background: #28abe3;
	i:before{ content: "\e073"; }
}
.sp-icon-slideshare{
	background: #4ba3a6;
	i:before{ content: "\e074"; }
}
.sp-icon-smugmug{
	background: #ACFD32;
	i:before{ content: "\e075"; }
}
.sp-icon-snapchat{
	background: #ffdf00;
	i:before{ content: "\e076"; }
}
.sp-icon-songkick{
	background: #F80046;
	i:before{ content: "\e077"; }
}
.sp-icon-soundcloud{
	background: #fe3801;
	i:before{ content: "\e078"; }
}
.sp-icon-spotify{
	background: #7bb342;
	i:before{ content: "\e079"; }
}
.sp-icon-spreadshirt{
	background: #00b2a6;
	i:before{ content: "\e900"; }
}
.sp-icon-stackexchange{
	background: #2f2f2f;
	i:before{ content: "\e07a"; }
}
.sp-icon-stackoverflow{
	background: #FD9827;
	i:before{ content: "\e07b"; }
}
.sp-icon-starcraft{
	background: #002250;
	i:before{ content: "\e07c"; }
}
.sp-icon-stayfriends{
	background: #F08A1C;
	i:before{ content: "\e07d"; }
}
.sp-icon-steam{
	background: #171a21;
	i:before{ content: "\e07e"; }
}
.sp-icon-storehouse{
	background: #25B0E6;
	i:before{ content: "\e07f"; }
}
.sp-icon-strava{
	background: #FC4C02;
	i:before{ content: "\e080"; }
}
.sp-icon-streamjar{
	background: #503a60;
	i:before{ content: "\e081"; }
}
.sp-icon-stumbleupon{
	background: #e64011;
	i:before{ content: "\e082"; }
}
.sp-icon-swarm{
	background: #FC9D3C;
	i:before{ content: "\e083"; }
}
.sp-icon-teamspeak{
	background: #465674;
	i:before{ content: "\e084"; }
}
.sp-icon-teamviewer{
	background: #168EF4;
	i:before{ content: "\e085"; }
}
.sp-icon-technorati{
	background: #5cb030;
	i:before{ content: "\e086"; }
}
.sp-icon-telegram{
	background: #0088cc;
	i:before{ content: "\e087"; }
}
.sp-icon-trello{
	background: #0079bf;
	i:before{ content: "\e902"; }
}
.sp-icon-tripadvisor{
	background: #4B7E37;
	i:before{ content: "\e088"; }
}
.sp-icon-tripit{
	background: #1982C3;
	i:before{ content: "\e089"; }
}
.sp-icon-triplej{
	background: #E53531;
	i:before{ content: "\e08a"; }
}
.sp-icon-tumblr{
	background: #45556c;
	i:before{ content: "\e08b"; }
}
.sp-icon-tunein{
	background: #36b4a7;
	i:before{ content: "\e903"; }
}
.sp-icon-twitch{
	background: #6441a5;
	i:before{ content: "\e08c"; }
}
.sp-icon-twitter{
	background: #4da7de;
	i:before{ content: "\e08d"; }
}
.sp-icon-uber{
	background: #000000;
	i:before{ content: "\e08e"; }
}
.sp-icon-ventrilo{
	background: #77808A;
	i:before{ content: "\e08f"; }
}
.sp-icon-viadeo{
	background: #e4a000;
	i:before{ content: "\e090"; }
}
.sp-icon-viber{
	background: #7b519d;
	i:before{ content: "\e091"; }
}
.sp-icon-viewbug{
	background: #2B9FCF;
	i:before{ content: "\e092"; }
}
.sp-icon-vimeo{
	background: #51b5e7;
	i:before{ content: "\e093"; }
}
.sp-icon-vine{
	background: #00b389;
	i:before{ content: "\e094"; }
}
.sp-icon-vkontakte{
	background: #5a7fa6;
	i:before{ content: "\e095"; }
}
.sp-icon-warcraft{
	background: #1EB10A;
	i:before{ content: "\e096"; }
}
.sp-icon-wechat{
	background: #09b507;
	i:before{ content: "\e097"; }
}
.sp-icon-weibo{
	background: #e31c34;
	i:before{ content: "\e098"; }
}
.sp-icon-whatsapp{
	background: #20B038;
	i:before{ content: "\e099"; }
}
.sp-icon-wikipedia{
	background: #000000;
	i:before{ content: "\e09a"; }
}
.sp-icon-windows{
	background: #00BDF6;
	i:before{ content: "\e09b"; }
}
.sp-icon-wordpress{
	background: #464646;
	i:before{ content: "\e09c"; }
}
.sp-icon-wykop{
	background: #328efe;
	i:before{ content: "\e09d"; }
}
.sp-icon-xbox{
	background: #92C83E;
	i:before{ content: "\e09e"; }
}
.sp-icon-xing{
	background: #005a60;
	i:before{ content: "\e09f"; }
}
.sp-icon-yahoo{
	background: #6e2a85;
	i:before{ content: "\e0a0"; }
}
.sp-icon-yammer{
	background: #1175C4;
	i:before{ content: "\e0a1"; }
}
.sp-icon-yandex{
	background: #FF0000;
	i:before{ content: "\e0a2"; }
}
.sp-icon-yelp{
	background: #c83218;
	i:before{ content: "\e0a3"; }
}
.sp-icon-younow{
	background: #61C03E;
	i:before{ content: "\e0a4"; }
}
.sp-icon-youtube{
	background: #e02a20;
	i:before{ content: "\e0a5"; }
}
.sp-icon-zapier{
	background: #FF4A00;
	i:before{ content: "\e0a6"; }
}
.sp-icon-zerply{
	background: #9DBC7A;
	i:before{ content: "\e0a7"; }
}
.sp-icon-zomato{
	background: #cb202d;
	i:before{ content: "\e0a8"; }
}
.sp-icon-zynga{
	background: #DC0606;
	i:before{ content: "\e0a9"; }
}