/*
  	Flaticon icon font: Flaticon
  	Creation date: 26/11/2019 17:34
  	*/
	
	@font-face {
	    font-family: "Flaticon";
	    src: url("./Flaticon.eot");
	    src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff2") format("woff2"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg");
	    font-weight: normal;
	    font-style: normal;
	}
	
	@media screen and (-webkit-min-device-pixel-ratio:0) {
	    @font-face {
	        font-family: "Flaticon";
	        src: url("./Flaticon.svg#Flaticon") format("svg");
	    }
	}
	
	[class^="flaticon-"]:before,
	[class*=" flaticon-"]:before,
	[class^="flaticon-"]:after,
	[class*=" flaticon-"]:after {
	    font-family: Flaticon;
	    font-size: 20px;
	    font-style: normal;
	    margin-left: 0px;
	}
	
	.flaticon-crane:before {
	    content: "\f100";
	}
	
	.flaticon-container:before {
	    content: "\f101";
	}
	
	.flaticon-conveyor:before {
	    content: "\f102";
	}
	
	.flaticon-distance:before {
	    content: "\f103";
	}
	
	.flaticon-boat:before {
	    content: "\f104";
	}
	
	.flaticon-list:before {
	    content: "\f105";
	}
	
	.flaticon-crane-1:before {
	    content: "\f106";
	}
	
	.flaticon-warehouse:before {
	    content: "\f107";
	}
	
	.flaticon-ship:before {
	    content: "\f108";
	}
	
	.flaticon-grain:before {
	    content: "\f109";
	}
	
	.flaticon-grain-1:before {
	    content: "\f10a";
	}
	
	.flaticon-grain-2:before {
	    content: "\f10b";
	}
	
	.flaticon-wheat:before {
	    content: "\f10c";
	}
	
	.flaticon-planter-1:before {
	    content: "\f10d";
	}
	
	.flaticon-growth:before {
	    content: "\f10e";
	}
	
	.flaticon-growth-1:before {
	    content: "\f10f";
	}
	
	.flaticon-plant:before {
	    content: "\f110";
	}
	
	.flaticon-content:before {
	    content: "\f111";
	}
	
	.flaticon-barn:before {
	    content: "\f112";
	}
	
	.flaticon-flour:before {
	    content: "\f113";
	}
	
	.flaticon-money:before {
	    content: "\f114";
	}
	
	.flaticon-money-1:before {
	    content: "\f115";
	}
	
	.flaticon-calendar:before {
	    content: "\f116";
	}
	
	.flaticon-bank:before {
	    content: "\f117";
	}
	
	.flaticon-money-2:before {
	    content: "\f118";
	}
	
	[class^="flaticon-"]:before,
	[class*=" flaticon-"]:before,
	[class^="flaticon-"]:after,
	[class*=" flaticon-"]:after {
	    font-family: Flaticon;
	    font-size: 24px;
	    font-style: normal;
	    margin-left: 0px;
	}
	
	.demo {
	    margin: 2em auto;
	    line-height: 1.25em;
	}
	
	.demo ul li {
	    margin-bottom: 1em;
	}
	
	.demo ul li .num {
	    color: #222;
	    border-radius: 20px;
	    display: inline-block;
	    width: 26px;
	    padding: 3px;
	    height: 26px;
	    text-align: center;
	    margin-right: 0.5em;
	    border: 1px solid #222;
	}
	
	.demo ul li code {
	    background-color: #222;
	    border-radius: 4px;
	    padding: 0.25em 0.5em;
	    display: inline-block;
	    color: #fff;
	    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	    font-weight: lighter;
	    margin-top: 1em;
	    font-size: 0.8em;
	    word-break: break-all;
	}
	
	.demo ul li code.big {
	    padding: 1em;
	    font-size: 0.9em;
	}
	
	.demo ul li code .red {
	    color: #EF3159;
	}
	
	.demo ul li code .green {
	    color: #ACFF65;
	}
	
	.demo ul li code .yellow {
	    color: #FFFF99;
	}
	
	.demo ul li code .blue {
	    color: #99D3FF;
	}
	
	.demo ul li code .purple {
	    color: #A295FF;
	}
	
	.demo ul li code .dots {
	    margin-top: 0.5em;
	    display: block;
	}
	
	#glyphs {
	    border-bottom: 1px solid #ccc;
	    padding: 2em 0;
	    text-align: center;
	}
	
	.glyph {
	    display: inline-block;
	    width: 9em;
	    margin: 1em;
	    text-align: center;
	    vertical-align: top;
	    background: #FFF;
	}
	
	.glyph .glyph-icon {
	    padding: 0px;
	    display: block;
	    font-family: "Flaticon";
	    font-size: 64px;
	    line-height: 1;
	}
	
	.glyph .glyph-icon:before {
	    font-size: 64px;
	    color: #222;
	    margin-left: 0;
	}
	
	.class-name {
	    font-size: 0.65em;
	    background-color: #222;
	    color: #fff;
	    border-radius: 4px 4px 0 0;
	    padding: 0.5em;
	    color: #FFFF99;
	    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	}
	
	.author-name {
	    font-size: 0.6em;
	    background-color: #fcfcfd;
	    border: 1px solid #DEDEE4;
	    border-top: 0;
	    border-radius: 0 0 4px 4px;
	    padding: 0.5em;
	}
	
	.class-name:last-child {
	    font-size: 10px;
	    color: #888;
	}
	
	.class-name:last-child a {
	    font-size: 10px;
	    color: #555;
	}
	
	.class-name:last-child a:hover {
	    color: #a9fd00;
	}
	
	.glyph>input {
	    display: block;
	    width: 100px;
	    margin: 5px auto;
	    text-align: center;
	    font-size: 12px;
	    cursor: text;
	}
	
	.glyph>input.icon-input {
	    font-family: "Flaticon";
	    font-size: 16px;
	    margin-bottom: 10px;
	}
	
	.attribution .title {
	    margin-top: 2em;
	}
	
	.attribution textarea {
	    background-color: #fcfcfd;
	    padding: 1em;
	    border: none;
	    box-shadow: none;
	    border: 1px solid #DEDEE4;
	    border-radius: 4px;
	    resize: none;
	    width: 100%;
	    height: 150px;
	    font-size: 0.8em;
	    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	    -webkit-appearance: none;
	}
	
	.iconsuse {
	    margin: 2em auto;
	    text-align: center;
	    max-width: 1200px;
	}
	
	.iconsuse:after {
	    content: '';
	    display: table;
	    clear: both;
	}
	
	.iconsuse .image {
	    float: left;
	    width: 25%;
	    padding: 0 1em;
	}
	
	.iconsuse .image p {
	    margin-bottom: 1em;
	}
	
	.iconsuse .image span {
	    display: block;
	    font-size: 0.65em;
	    background-color: #222;
	    color: #fff;
	    border-radius: 4px;
	    padding: 0.5em;
	    color: #FFFF99;
	    margin-top: 1em;
	    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
	}
	
	#footer {
	    text-align: center;
	    background-color: #4C5B5C;
	    color: #7c9192;
	    padding: 1em;
	}
	
	#footer a {
	    border: none;
	    color: #a9fd00;
	    font-weight: normal;
	}
	
	@media (max-width: 960px) {
	    .iconsuse .image {
	        width: 50%;
	    }
	}
	
	@media (max-width: 560px) {
	    .iconsuse .image {
	        width: 100%;
	    }
	}