/**
 * CSS Icons v1.0
 *
 * Pixel perfect icons generated through CSS.
 *
 * Copyright 2017 Josh Tere <me@joshtere.com>
 * Released under the MIT License
 * http://www.joshtere.com
 */

.css-icons {
color:#000000;
position:relative;
display:inline-block;
width:32px;
height:32px;
line-height:32px;
vertical-align:middle;
}

	.css-icons.large {
	width:48px;
	height:48px;
	line-height:48px;	
	}


	/* Home icon */
	.css-icons.home {}

		.css-icons.home:before {
		content:'';
		position:absolute;
		top:-3px;
		left:8px;
		width:2px;
		height:22px;
		background-color:currentColor;
		transform:rotate(45deg);
		}

		.css-icons.home:after {
		content:'';
		position:absolute;
		top:-3px;
		right:8px;
		width:2px;
		height:22px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}
		
		.css-icons.home i:before {
		content:'';
		position:absolute;
		top:-15px;
		left:0px;
		bottom:0px;
		width:2px;
		background-color:currentColor;
		}

		.css-icons.home i {
		position:absolute;
		left:0px;
		right:0px;	
		bottom:0px;
		height:2px;
		background-color:currentColor;
		}
		
		.css-icons.home i:after {
		content:'';
		position:absolute;
		top:-15px;
		right:0px;
		bottom:0px;
		width:2px;
		background-color:currentColor;
		}


	/* Menu icon */
	.css-icons.menu {}

		.css-icons.menu:before {
		content:'';
		position:absolute;
		top:5px;
		left:0px;
		right:0px;	
		width:32px;
		height:2px;
		background-color:currentColor;
		transition:top 0.3s ease, left 0.3s ease, right 0.3s ease,
			width 0.3s ease, transform 0.3s ease;
		}
			.css-icons.menu.menu-to-close:before {	
			top:15px;
			left:-3px;
			right:auto;
			width:38px;
			transform:rotate(-45deg);	
			}
		
		.css-icons.menu i {
		position:absolute;
		top:15px;
		left:0px;
		right:0px;
		height:2px;
		background-color:currentColor;
		transition:opacity 0.2s ease 0.1s;
		}
			.css-icons.menu.menu-to-close i {
			opacity:0;	
			transition:opacity 0.2s ease;
			}

		.css-icons.menu:after {
		content:'';
		position:absolute;
		left:0px;
		right:0px;	
		bottom:5px;
		width:32px;
		height:2px;
		background-color:currentColor;
		transition:bottom 0.3s ease, left 0.3s ease, right 0.3s ease,
			width 0.3s ease, transform 0.3s ease;
		}
			.css-icons.menu.menu-to-close:after {
			left:-3px;
			right:auto;
			bottom:15px;
			width:38px;
			height:2px;
			transform:rotate(45deg);
			}
		
		
	/* Search icon */
	.css-icons.search {}

		.css-icons.search:before {
		content:'';
		position:absolute;
		top:0px;
		left:0px;
		width:24px;
		height:24px;
		border:solid currentColor 2px;
		border-radius:50%;
		}

		.css-icons.search:after {
		content:'';
		position:absolute;
		bottom:-1px;
		right:4px;
		width:2px;
		height:12px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}
		
	
	/* Tick icon */
	.css-icons.tick {}

		.css-icons.tick:before {
		content:'';
		position:absolute;
		left:20px;
		bottom:-1px;
		width:2px;
		height:34px;
		background-color:currentColor;
		transform:rotate(45deg);
		}

		.css-icons.tick:after {
		content:'';
		position:absolute;
		left:10%;
		bottom:1px;
		width:2px;
		height:15px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}
		
	
	/* Close icon */
	.css-icons.close {}

		.css-icons.close:before {
		content:'';
		position:absolute;
		top:15px;
		left:-3px;
		width:38px;
		height:2px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}

		.css-icons.close:after {
		content:'';
		position:absolute;
		left:-3px;
		bottom:15px;
		width:38px;
		height:2px;
		background-color:currentColor;
		transform:rotate(45deg);
		}
		
	
	/* Email icon */
	.css-icons.email {}

		.css-icons.email:before {
		content:'';
		position:absolute;
		top:1px;
		left:8px;
		width:2px;
		height:22px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}

		.css-icons.email:after {
		content:'';
		position:absolute;
		top:1px;
		right:8px;
		width:2px;
		height:22px;
		background-color:currentColor;
		transform:rotate(45deg);
		}
		
		.css-icons.email i {
		position:absolute;
		top:3px;
		right:0px;
		width:28px;
		height:22px;
		border:solid currentColor 2px;
		}
		
		
	/* Sort icon */
	.css-icons.sort {}

		.css-icons.sort:before {
		content:'';
		position:absolute;
		top:-3px;
		left:9px;
		width:2px;
		height:18px;
		background-color:currentColor;
		transform:rotate(45deg);
		}

		.css-icons.sort:after {
		content:'';
		position:absolute;
		top:-3px;
		right:9px;
		width:2px;
		height:18px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}

		.css-icons.sort i:before {
		content:'';
		position:absolute;
		right:9px;
		bottom:-3px;
		width:2px;
		height:18px;
		background-color:currentColor;
		transform:rotate(45deg);
		}

		.css-icons.sort i:after {
		content:'';
		position:absolute;
		left:9px;
		bottom:-3px;
		width:2px;
		height:18px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}
		
		
	/* Group icon */
	.css-icons.group {}

		.css-icons.group:before {
		content:'';
		position:absolute;
		left:1px;
		bottom:1px;
		width:2px;
		height:24px;
		background-color:currentColor;
		}

		.css-icons.group:after {
		content:'';
		position:absolute;
		left:1px;
		bottom:1px;
		width:24px;
		height:2px;
		background-color:currentColor;
		}
		
		.css-icons.group i {
		position:absolute;
		top:1px;
		right:1px;
		width:20px;
		height:20px;
		border:solid currentColor 2px;
		}
		
		
	/* Set icon */
	.css-icons.set {}

		.css-icons.set:before {
		content:'';
		position:absolute;
		top:0px;
		left:0px;
		width:10px;
		height:10px;
		border:solid currentColor 2px;
		}

		.css-icons.set:after {
		content:'';
		position:absolute;
		top:0px;
		right:0px;
		width:10px;
		height:10px;
		border:solid currentColor 2px;
		}
		
		.css-icons.set i:before {
		content:'';
		position:absolute;
		left:0px;
		bottom:0px;
		width:10px;
		height:10px;
		border:solid currentColor 2px;
		}
		
		.css-icons.set i:after {
		content:'';
		position:absolute;
		right:0px;
		bottom:0px;
		width:10px;
		height:10px;
		border:solid currentColor 2px;
		}
		
	
	/* Left chevron icon */
	.css-icons.left {}

		.css-icons.left:before {
		content:'';
		position:absolute;
		right:8px;
		top:8px;
		width:22px;
		height:2px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}

		.css-icons.left:after {
		content:'';
		position:absolute;
		right:8px;
		bottom:8px;
		width:22px;
		height:2px;
		background-color:currentColor;
		transform:rotate(45deg);
		}
		
	
	/* Right chevron icon */
	.css-icons.right {}

		.css-icons.right:before {
		content:'';
		position:absolute;
		left:8px;
		top:8px;
		width:22px;
		height:2px;
		background-color:currentColor;
		transform:rotate(45deg);
		}

		.css-icons.right:after {
		content:'';
		position:absolute;
		left:8px;
		bottom:8px;
		width:22px;
		height:2px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}
		
	
	/* Up chevron icon */
	.css-icons.up {}

		.css-icons.up:before {
		content:'';
		position:absolute;
		left:8px;
		bottom:8px;
		width:2px;
		height:22px;
		background-color:currentColor;
		transform:rotate(45deg);
		}

		.css-icons.up:after {
		content:'';
		position:absolute;
		right:8px;
		bottom:8px;
		width:2px;
		height:22px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}
		
	
	/* Down chevron icon */
	.css-icons.down {}

		.css-icons.down:before {
		content:'';
		position:absolute;
		left:8px;
		top:8px;
		width:2px;
		height:22px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}
		
			.css-icons.down.large:before {
			left:10px;
			top:10px;
			width:2px;
			height:38px;
			}

		.css-icons.down:after {
		content:'';
		position:absolute;
		right:8px;
		top:8px;
		width:2px;
		height:22px;
		background-color:currentColor;
		transform:rotate(45deg);
		}

			.css-icons.down.large:after {
			right:10px;
			top:10px;
			width:2px;
			height:38px;
			}
		
	
	/* Plus icon */
	.css-icons.plus {}

		.css-icons.plus:before {
		content:'';
		position:absolute;
		top:50%;
		left:0px;
		right:0px;	
		height:2px;
		margin-top:-1px;
		background-color:currentColor;
		}

		.css-icons.plus:after {
		content:'';
		position:absolute;
		top:0px;
		left:50%;	
		bottom:0px;
		width:2px;
		margin-left:-1px;
		background-color:currentColor;
		}
		
	
	/* Minus icon */
	.css-icons.minus {}

		.css-icons.minus:before {
		content:'';
		position:absolute;
		top:50%;
		left:10%;
		right:10%;	
		height:2px;
		margin-top:-1px;
		background-color:currentColor;
		}
		
	
	/* Edit icon */
	.css-icons.edit {}

		.css-icons.edit:before {
		content:'';
		position:absolute;
		left:0px;	
		bottom:0px;
		width:2px;
		height:8px;
		background-color:currentColor;
		}
		
		.css-icons.edit:after {
		content:'';
		position:absolute;
		left:0px;	
		bottom:0px;
		width:8px;
		height:2px;
		background-color:currentColor;
		}
		
		.css-icons.edit i {
		position:absolute;
		top:3px;
		right:-2px;
		width:12px;
		height:2px;
		background-color:currentColor;
		transform:rotate(45deg);
		}
		
		.css-icons.edit i:before {
		content:'';
		position:absolute;
		top:0px;
		left:0px;
		width:2px;
		height:35px;
		background-color:currentColor;
		}
		
		.css-icons.edit i:after {
		content:'';
		position:absolute;
		top:0px;
		right:0px;
		width:2px;
		height:35px;
		background-color:currentColor;
		}
		
		
	/* Bin icon */
	.css-icons.bin {}

		.css-icons.bin:before {
		content:'';
		position:absolute;
		top:2px;
		left:5px;
		right:5px;
		height:2px;
		background-color:currentColor;
		}

		.css-icons.bin i {
		position:absolute;
		left:6px;
		right:6px;
		bottom:2px;
		height:20px;
		border:solid currentColor 2px;
		border-top:none;
		}

		.css-icons.bin i:before {
		content:'';
		position:absolute;
		top:0px;
		left:4px;
		bottom:4px;
		width:2px;
		background-color:currentColor;
		}

		.css-icons.bin i:after {
		content:'';
		position:absolute;
		top:0px;
		right:4px;
		bottom:4px;
		width:2px;
		background-color:currentColor;
		}
		
		
	/* Stack icon */
	.css-icons.stack {}

		.css-icons.stack:before {
		content:'';
		position:absolute;
		right:9px;
		bottom:-3px;
		width:2px;
		height:17px;
		background-color:currentColor;
		transform:rotate(45deg);
		}

		.css-icons.stack:after {
		content:'';
		position:absolute;
		left:9px;
		bottom:-3px;
		width:2px;
		height:17px;
		background-color:currentColor;
		transform:rotate(-45deg);
		}
		
		.css-icons.stack i {
		position:absolute;
		left:7px;
		top:3px;
		width:14px;
		height:14px;
		border:solid currentColor 2px;
		transform:rotate(45deg);	
		}