Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <h1><i class="ji-jicons ji-sz-xxs ji-rd-5 ji-bg-base ji-cl-white" style="display: inline-flex;"></i> Josetxu icons</h1>
		<div id="iconos" class="contenido_tab">
		<h2><span>101</span> iconos en CSS</h2>
		<div class="options-filter-opener hidden">OPCIONES</div>
		<div class="options-filters">
			<div class="cat-menu-icons">
				<ul>
					<li>Filtrar: </li>
					<li><a href="#web-icons-list" id="web-icons">web</a></li>
					<li><a href="#controls-icons-list" id="controls-icons">controls</a></li>
					<li><a href="#tools-icons-list" id="tools-icons">tools</a></li>
					<li><a href="#tools-icons-list" id="menus-icons">menus</a></li>
					<li><a href="#arrows-icons-list" id="arrows-icons">arrows</a></li>
					<li><a href="#social-icons-list" id="social-icons">social</a></li>
					<li><a href="#multimedia-icons-list" id="multimedia-icons">multimedia</a></li>
					<li><a href="#files-icons-list" id="files-icons">files</a></li>
					<li><a href="#devices-icons-list" id="devices-icons">devices</a></li>
					<li><a href="#info-icons-list" id="info-icons">info</a></li>
					<li><a href="#battery-icons-list" id="battery-icons">battery</a></li>
					<li><a href="#miscelanea-icons-list" id="miscelanea-icons">miscelanea</a></li>
					<li><a href="#" id="all-icons" title="mostrar todo">+</a></li>
					<li><a href="#" id="none-icons" title="ocultar todo">-</a></li>
					
				</ul>
			</div>
			<div class="option-sz">
				<ul>
					<li id="opt-sz-xxs">xxs</li>
					<li id="opt-sz-xs">xs</li>
					<li id="opt-sz-1">1</li>
					<li id="opt-sz-2">2</li>
					<li id="opt-sz-3">3</li>
					<li id="opt-sz-4">4</li>
					<li id="opt-sz-5">5</li>
				</ul>
			</div>
			<div class="option-bg">
				<ul>
					<li id="opt-bg-light"></li>
					<li id="opt-bg-semilight"></li>
					<li id="opt-bg-semidark"></li>
					<li id="opt-bg-dark"></li>
					<li id="opt-bg-basedark"></li>
					<li id="opt-bg-baselight"></li>
					<li id="opt-bg-base"></li>
					<!--<li id="opt-bg-base"></li>-->
					<li></li>
				</ul>
			</div>
			<div class="option-bd">
				<ul>
					<li id="opt-bd-base"></li>
					<li id="opt-bd-baselight"></li>
					<li id="opt-bd-light"></li>
					<li id="opt-bd-basedark"></li>
					<li id="opt-bd-dark"></li>
					<li></li>
				</ul>
			</div>
			<div class="option-rd">
				<ul>
					<li id="opt-rd-xs"></li>
					<li id="opt-rd-1"></li>
					<li id="opt-rd-2"></li>
					<li id="opt-rd-3"></li>
					<li id="opt-rd-4"></li>
					<li id="opt-rd-5"></li>
					<li></li>
				</ul>
			</div>
			<div class="option-cl">
				<ul>
					<li id="opt-cl-base"></li>
					<li id="opt-cl-brown"></li>
					<li id="opt-cl-olive"></li>
					<li id="opt-cl-green"></li>
					<li id="opt-cl-bluegreen"></li>
					<li id="opt-cl-bluegray"></li>
					<li id="opt-cl-blue"></li>
					<li id="opt-cl-purple"></li>
					<li id="opt-cl-violet"></li>
					<li id="opt-cl-pink"></li>
					<li id="opt-cl-red"></li>
					<li id="opt-cl-gray"></li>
					<li id="opt-cl-white"></li>
					<li></li>
				</ul>
			</div>
		</div>

		<ul class="icon-list web-icons" id="web-icons-list">
			<li class="list-header">web</li>
			<li><i class="ji-home"></i><span class="name">home</span><span class="ji-name">ji-home</span></li>
			<li><i class="ji-comment"></i><span class="name">comment</span><span class="ji-name">ji-comment</span></li>
			<li><i class="ji-mail"></i><span class="name">mail</span><span class="ji-name">ji-mail</span></li>
			<li><i class="ji-user"></i><span class="name">user</span><span class="ji-name">ji-user</span></li>
			<li><i class="ji-bookmark"></i><span class="name">bookmark</span><span class="ji-name">ji-bookmark</span></li>
			<li><i class="ji-map"></i><span class="name">map</span><span class="ji-name">ji-map</span></li>				
			<li><i class="ji-link"></i><span class="name">link</span><span class="ji-name">ji-link</span></li>
			<li><i class="ji-star"></i><span class="name">star</span><span class="ji-name">ji-star</span></li>
		</ul>
		<ul class="icon-list controls-icons" id="controls-icons-list">			
			<li class="list-header">controls</li>				
			<li><i class="ji-play"></i><span class="name">play</span><span class="ji-name">ji-play</span></li>
			<li><i class="ji-stop"></i><span class="name">stop</span><span class="ji-name">ji-stop</span></li>
			<li><i class="ji-pause"></i><span class="name">pause</span><span class="ji-name">ji-pause</span></li>
			<li><i class="ji-rec"></i><span class="name">rec</span><span class="ji-name">ji-rec</span></li>
			<li><i class="ji-forward"></i><span class="name">fast forward</span><span class="ji-name">ji-forward</span></li>
			<li><i class="ji-rewind"></i><span class="name">rewind</span><span class="ji-name">ji-rewind</span></li>
			<li><i class="ji-slowforward"></i><span class="name">slow forward</span><span class="ji-name">ji-slowforward</span></li>
			<li><i class="ji-slowrewind"></i><span class="name">slow rewind</span><span class="ji-name">ji-slowrewind</span></li>
		</ul>
		<ul class="icon-list tools-icons" id="tools-icons-list">	
			<li class="list-header">tools</li>
			<li><i class="ji-gear"></i><span class="name">gear</span><span class="ji-name">ji-gear</span></li>
			<li><i class="ji-edit"></i><span class="name">edit</span><span class="ji-name">ji-edit</span></li>
			<li><i class="ji-hammer"></i><span class="name">hammer</span><span class="ji-name">ji-hammer</span></li>
			<li><i class="ji-wrench"></i><span class="name">wrench</span><span class="ji-name">ji-wrench</span></li>
			<li><i class="ji-screwdriver"></i><span class="name">screwdriver</span><span class="ji-name">ji-screwdriver</span></li>
			<li><i class="ji-lock"></i><span class="name">lock</span><span class="ji-name">ji-lock</span></li>
			<li><i class="ji-unlock"></i><span class="name">unlock</span><span class="ji-name">ji-unlock</span></li>
			<li><i class="ji-options"></i><span class="name">options</span><span class="ji-name">ji-options</span></li>
		</ul>
		<ul class="icon-list menus-icons" id="menus-icons-list">	
			<li class="list-header">menus</li>
			<li><i class="ji-menu"></i><span class="name">menu</span><span class="ji-name">ji-menu</span></li>
			<li><i class="ji-list"></i><span class="name">list</span><span class="ji-name">ji-list</span></li>
			<li><i class="ji-grid"></i><span class="name">grid</span><span class="ji-name">ji-grid</span></li>
			<li><i class="ji-close"></i><span class="name">close</span><span class="ji-name">ji-close</span></li>
			<li><i class="ji-menuy"></i><span class="name">menu y</span><span class="ji-name">ji-menuy</span></li>
			<li><i class="ji-menux"></i><span class="name">menu x</span><span class="ji-name">ji-menux</span></li>
			<li><i class="ji-menuycircled"></i><span class="name">menu y circled</span><span class="ji-name">ji-menuycircled</span></li>
			<li><i class="ji-menuxcircled"></i><span class="name">menu x circled</span><span class="ji-name">ji-menuxcircled</span></li>
		</ul>
		<ul class="icon-list arrows-icons" id="arrows-icons-list">	
			<li class="list-header">arrows</li>
			<li><i class="ji-arrowborderright"></i><span class="name">border right</span><span class="ji-name">ji-arrowborderright</span></li>
			<li><i class="ji-arrowborderleft"></i><span class="name">border left</span><span class="ji-name">ji-arrowborderleft</span></li>
			<li><i class="ji-arrowbordertop"></i><span class="name">border top</span><span class="ji-name">ji-arrowbordertop</span></li>
			<li><i class="ji-arrowborderbottom"></i><span class="name">border bottom</span><span class="ji-name">ji-arrowborderbottom</span></li>
			<li><i class="ji-arrowsolidright"></i><span class="name">solid right</span><span class="ji-name">ji-arrowsolidright</span></li>
			<li><i class="ji-arrowsolidleft"></i><span class="name">solid left</span><span class="ji-name">ji-arrowsolidleft</span></li>
			<li><i class="ji-arrowsolidtop"></i><span class="name">solid top</span><span class="ji-name">ji-arrowsolidtop</span></li>
			<li><i class="ji-arrowsolidbottom"></i><span class="name">solid bottom</span><span class="ji-name">ji-arrowsolidbottom</span></li>
		</ul>
		<ul class="icon-list social-icons" id="social-icons-list">	
			<li class="list-header">social</li>
			<li><i class="ji-social"></i><span class="name">social</span><span class="ji-name">ji-social</span></li>
			<li><i class="ji-facebook"></i><span class="name">facebook</span><span class="ji-name">ji-facebook</span></li>
			<li><i class="ji-twitter"></i><span class="name">twitter</span><span class="ji-name">ji-twitter</span></li>
			<li><i class="ji-google"></i><span class="name">google</span><span class="ji-name">ji-google</span></li>
			<li><i class="ji-linkedin"></i><span class="name">linkedin</span><span class="ji-name">ji-linkedin</span></li>
			<li><i class="ji-instagram"></i><span class="name">instagram</span><span class="ji-name">ji-instagram</span></li>
			<li><i class="ji-youtube"></i><span class="name">youtube</span><span class="ji-name">ji-youtube</span></li>
			<li><i class="ji-rss"></i><span class="name">rss</span><span class="ji-name">ji-rss</span></li>
		</ul>
		<ul class="icon-list multimedia-icons" id="multimedia-icons-list">
			<li class="list-header">multimedia</li>
			<li><i class="ji-photo"></i><span class="name">photo</span><span class="ji-name">ji-photo</span></li>
			<li><i class="ji-image"></i><span class="name">image</span><span class="ji-name">ji-image</span></li>
			<li><i class="ji-video"></i><span class="name">video</span><span class="ji-name">ji-video</span></li>
			<li><i class="ji-player"></i><span class="name">player</span><span class="ji-name">ji-player</span></li>
			<li><i class="ji-micro"></i><span class="name">micro</span><span class="ji-name">ji-micro</span></li>
			<li><i class="ji-sound"></i><span class="name">sound</span><span class="ji-name">ji-sound</span></li>
			<li><i class="ji-mute"></i><span class="name">mute</span><span class="ji-name">ji-mute</span></li>
			<li><i class="ji-muted"></i><span class="name">muted</span><span class="ji-name">ji-muted</span></li>
		</ul>
		<ul class="icon-list files-icons" id="files-icons-list">	
			<li class="list-header">files</li>
			<li><i class="ji-file"></i><span class="name">file</span><span class="ji-name">ji-file</span></li>
			<li><i class="ji-filedouble"></i><span class="name">file double</span><span class="ji-name">ji-filedouble</span></li>
			<li><i class="ji-filetext"></i><span class="name">file text</span><span class="ji-name">ji-filetext</span></li>
			<li><i class="ji-file ji-filenew"></i><span class="name">new file</span><span class="ji-name">ji-filenew</span></li>	
			<li><i class="ji-folder"></i><span class="name">folder</span><span class="ji-name">ji-folder</span></li>	
			<li><i class="ji-folder ji-foldernew"></i><span class="name">new folder</span><span class="ji-name">ji-foldernew</span></li>	
			<li><i class="ji-folderother"></i><span class="name">other folder</span><span class="ji-name">ji-folderother</span></li>	
			<li><i class="ji-folderopen"></i><span class="name">open folder</span><span class="ji-name">ji-folderopen</span></li>	
		</ul>
		<ul class="icon-list devices-icons" id="devices-icons-list">
			<li class="list-header">devices</li>				
			<li><i class="ji-desktop"></i><span class="name">desktop</span><span class="ji-name">ji-desktop</span></li>
			<li><i class="ji-tablet"></i><span class="name">tablet</span><span class="ji-name">ji-tablet</span></li>
			<li><i class="ji-mobile"></i><span class="name">mobile</span><span class="ji-name">ji-mobile</span></li>
			<li><i class="ji-mp3"></i><span class="name">mp3</span><span class="ji-name">ji-mp3</span></li>
			<li><i class="ji-headphones"></i><span class="name">headphones</span><span class="ji-name">ji-headphones</span></li>
			<li><i class="ji-disc"></i><span class="name">disc</span><span class="ji-name">ji-disc</span></li>
			<li><i class="ji-discbig"></i><span class="name">big disc</span><span class="ji-name">ji-discbig</span></li>
			<li><i class="ji-pendrive"></i><span class="name">pendrive</span><span class="ji-name">ji-pendrive</span></li>				
		</ul>
		<ul class="icon-list info-icons" id="info-icons-list">	
			<li class="list-header">info</li>
			<li><i class="ji-info"></i><span class="name">info</span><span class="ji-name">ji-info</span></li>
			<li><i class="ji-warning"></i><span class="name">warning</span><span class="ji-name">ji-warning</span></li>
			<li><i class="ji-success"></i><span class="name">success</span><span class="ji-name">ji-success</span></li>
			<li><i class="ji-error"></i><span class="name">error</span><span class="ji-name">ji-error</span></li>
			<li><i class="ji-infocircled"></i><span class="name">info</span><span class="ji-name">ji-infocircled</span></li>
			<li><i class="ji-warningcircled"></i><span class="name">warning</span><span class="ji-name">ji-warningcircled</span></li>
			<li><i class="ji-successcircled"></i><span class="name">success</span><span class="ji-name">ji-successcircled</span></li>
			<li><i class="ji-errorcircled"></i><span class="name">error</span><span class="ji-name">ji-errorcircled</span></li>	
		</ul>
		<ul class="icon-list battery-icons" id="battery-icons-list">	
			<li class="list-header">batery</li>
			<li><i class="ji-battery0"></i><span class="name">battery 0</span><span class="ji-name">ji-battery0</span></li>
			<li><i class="ji-battery25"></i><span class="name">battery 25</span><span class="ji-name">ji-battery25</span></li>
			<li><i class="ji-battery50"></i><span class="name">battery 50</span><span class="ji-name">ji-battery50</span></li>
			<li><i class="ji-battery75"></i><span class="name">battery 75</span><span class="ji-name">ji-battery75</span></li>
			<li><i class="ji-battery100"></i><span class="name">battery 100</span><span class="ji-name">ji-battery100</span></li>
			<li><i class="ji-battery-0-4"></i><span class="name">battery 0/4</span><span class="ji-name">ji-battery-0-4</span></li>
			<li><i class="ji-battery-1-4"></i><span class="name">battery 1/4</span><span class="ji-name">ji-battery-1-4</span></li>
			<li><i class="ji-battery-2-4"></i><span class="name">battery 2/4</span><span class="ji-name">ji-battery-2-4</span></li>
			<li><i class="ji-battery-3-4"></i><span class="name">battery 3/4</span><span class="ji-name">ji-battery-3-4</span></li>
			<li><i class="ji-battery-4-4"></i><span class="name">battery 4/4</span><span class="ji-name">ji-battery-4-4</span></li>
		</ul>
		<ul class="icon-list miscelanea-icons" id="miscelanea-icons-list">
			<li class="list-header">miscelanea</li>
			<li><i class="ji-magnet"></i><span class="name">magnet</span><span class="ji-name">ji-magnet</span></li>
			<li><i class="ji-reload"></i><span class="name">reload</span><span class="ji-name">ji-reload</span></li>
			<li><i class="ji-banned"></i><span class="name">banned</span><span class="ji-name">ji-banned</span></li>
			<li><i class="ji-pill"></i><span class="name">pill</span><span class="ji-name">ji-pill</span></li>
			<li><i class="ji-pilltablet"></i><span class="name">pill tablet</span><span class="ji-name">ji-pilltablet</span></li>	
			<li><i class="ji-child"></i><span class="name">child</span><span class="ji-name">ji-child</span></li>
			<li><i class="ji-cup"></i><span class="name">cup</span><span class="ji-name">ji-cup</span></li>
			<li><i class="ji-beer"></i><span class="name">beer</span><span class="ji-name">ji-beer</span></li>
			<li><i class="ji-wifi"></i><span class="name">wifi</span><span class="ji-name">ji-wifi</span></li>
			<li><i class="ji-clock"></i><span class="name">clock</span><span class="ji-name">ji-clock</span></li>
			<li><i class="ji-clockfilled"></i><span class="name">filled clock</span><span class="ji-name">ji-clockfilled</span></li>
		</ul>
		<input type="text" id="hidden-copy-field" class="hidden" value=""/>
		<div id="copied-text">copiado al portapapeles<br><br><code></code></div>
		</div>
		<a title="Mas info en josetxu.com" target="_blank" class="icons-more-info" href="https://josetxu.com/iconos">+ info</a>
		<div class="footer"><small><strong>ji-icons v1.0</strong> © 2019  <strong><a href="https:josetxu.com/iconos">josetxu.com</a></strong></small></div>
            
          
!
            
              /*********** PAGE STYLES START ***********/
body {
   	background: #fff;
    color: #333;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
}
h1 {
    background: #333;
    color: #fff;
    text-align: center;
    margin: 0 0 5% 0;
    padding: 0.5em 0.5em 0.75em 0.5em;
    margin: 0 0 -2.4em 0;

}
h2 {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.7em;
    color: #ff6600;
    font-weight: bold;
    margin-top: 1.5em;
    padding-left: 13.3em;
    text-align: center;
    margin-bottom: -0.9em;
}
h2 span {
    font-size: 15px;
    line-height: 1em;
    position: relative;
    top: 1px;
}
a {color: #f60; padding:2px 5px 4px 5px;}
a:hover {color: #fff; background:#f60; }
a, a:hover {text-decoration: none;}
a.icons-more-info {
    position: fixed;
    right: 1em;
    bottom: 1em;
    text-transform: uppercase;
    font-size: 0.85em;
    background: #333;
    padding: 1em;
    opacity: 0.5;
    color: #fff;
}
a.icons-more-info:hover {
    opacity: 1;
}
.contenido_tab {
    border-bottom: 5px solid #e6e6e6;
    float: left;
    padding: 30px 0;
    width: 100%;
}
.footer {
    text-align: center;
    float: left;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

/*** ICON LIST ***/

ul.icon-list {
    padding: 0;
    text-align: left;
    width: 100%;
	max-width: 1200px;
    margin: 0 auto;
    float: none;
}	
ul.icon-list li {
	font-family: Arial, Helvetica san-serif;
    display: inline-table;
    text-align: center;
    width: 12%;
    height: 12%;
    position: relative;
    box-sizing: border-box;
	border: 3px solid transparent;	
    transition: all 0.5s ease 0s;
	padding: 0.25em;
}
ul.icon-list li.list-header {
	display: block;
	width: 100%;
	margin-bottom: 2em;
	padding: 5em 0 0.3em ;
	border: 0;
	border-bottom: 3px dotted #cccccc !important;
	box-sizing: border-box;
	margin-top: 2em;
	color: #cccccc;
	font-size: 0.85em;
    text-transform: uppercase;
    font-weight: 600;
}
ul.icon-list li.list-header:first-of-type {
    margin-top: 0;
}
ul.icon-list li.list-header + .list-header {
	margin-top: -2em;
}	
ul.icon-list li .name {
    font-size: 1.1em;
    padding: 0.5em 0 3em;
    display: block;
    color: #a9a9a9;
}

/*** MEDIA QUERIES ***/
@media (max-width:1200px){
  ul.icon-list li {
    display: inline-block;
    width: 16.2%;
  }	
}	
@media (max-width:980px){
  ul.icon-list li {
    width: 24.5%;
	
  }	
}
@media (max-width:767px){
  ul.icon-list li {
    width: 24.4%;
	
  }	
}
@media (max-width:580px){
  ul.icon-list li {
    width: 32.4%;
  }
}
@media (max-width:480px){
  ul.icon-list li {
    width: 49.3%;
	
  }	
}


#hidden-copy-field {
    opacity: 0;
    margin: 0;
    height: 0;
    padding: 0;
}
#copied-text {
	position: fixed;
    top: 40%;
    left: 40%;
    width: 20%;
    text-align: center;
    background: rgba(0,0,0,0.85);
    color: #fff;
    display: none;
    padding: 1em;
    border: 3px solid #fff;
	z-index: 3;
}
#copied-text code {
    background: #e6e6e6;
    color: #333;
    padding: 0.3em 0.6em;
}
@media (max-width:767px){
  #copied-text {
    width: 40%;
    left: 30%;
  }
}
@media (max-width:580px){
  #copied-text {
    width: 60%;
    left: 15%;
  }
}



ul.icon-list li:hover {
    border-color: #e6e6e6;
}
ul.icon-list li span.ji-name {
    position: absolute;
    width: 100%;
    left: 0;
    font-family: monospace;
    bottom: 0;
    background: #e6e6e6;
    padding: 1em;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
	font-size: 0.8em;
	cursor: pointer;
}
ul.icon-list li span.ji-name:before {
    content: "";
    border: 10px solid transparent;
    position: absolute;
    top: -20px;
    border-bottom-color: #e6e6e6;
    left: 40%;
}
ul.icon-list li:hover span.ji-name {
    opacity: 1;
}
ul.icon-list li span.ji-name:after {
    content: "copiar";
    position: absolute;
    width: 100%;
    left: 0;
    font-family: 'Raleway', Arial;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.5s ease 0s;
    background: #e6e6e6;
    color: #f60;
    padding: 1em 0;
    box-sizing: border-box;
    top: 3px;
	font-weight: bold;
}
ul.icon-list li span.ji-name:hover:after {
	opacity: 1;
	
}


#iconos {
	position: relative;
	transition:all 0.45s ease 0s;
}

#iconos.xtra-space {
	padding-top: 200px;
	transition:all 0.5s ease 0s;
}
#iconos.xtra-space.hidden {
    padding-top: inherit !important;
}


/*options*/

.options-filter-opener {
    float: right;
    font-size: 11px;
    font-weight: 600;
    color: #ccc;
    line-height: 2.3em;
	  cursor: pointer;
	  z-index: 3;
    position: relative;
}
.options-filter-opener:after, .options-filter-opener:before {
    content: "-";
    float: right;
    margin-right: 0.2em;
    background: #ccc;
    color: #fff;
    text-align: center;
    font-weight: 600;
    height: 15px;
    line-height: 0.5em;
    display: inline-block;
    top: 1px;
    position: relative;
    width: 15px;
    box-sizing: border-box;
    font-size: 2em;
    margin-top: 0.13em;
    margin-left: 0.2em;
}
.options-filter-opener:before {
	display:none;
}
.options-filter-opener.hidden:after {
    display: none;
}
.options-filter-opener.hidden:before {
    content: "+";
	display:block;
    line-height: 0.75em;
    background: #f50;	
}
.options-filter-opener.hidden + .options-filter {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease 0s;
}
.options-filter-opener.fixed {
    position: fixed;
    top: -4px;
    right: -4px;
    z-index: 999;
    background: transparent;
    height: 19px;
    padding-left: 5px;
    color: transparent;
	transition: all 0.5s ease 0s;
}
.options-filter-opener.fixed.hidden {
    background: #ccccccba;
    color: #fff;
}
.options-filter-opener.fixed:hover {
    background: #ccccccba;
    color: #fff;
	transition: all 0.5s ease 0s;
}
.options-filters {
    float: left;
    width: 100%;
    margin-bottom: 5.5em;
    border: 2px dotted #e6e6e6;
    box-sizing: border-box;
    background: #f1f1f1;
	  z-index: 2;
    position: relative;
	  display:none;
}
.options-filters.fixed {
    position: fixed;
    background: #ebebeb;
    left: 0;
    top: 0;
    z-index: 5;
    padding: 0.22em 0 0.42em;
    box-shadow: 0 0 10px 0 #cacaca;
    border-bottom: 4px solid #ccc;
}

.cat-menu-icons ul {
    padding: 0;
    margin: 0;
	text-align: center;
}
.cat-menu-icons ul li {
    display: inline-block;
	font-size: 0.85em;
	color: #c9c9c9;
	height: 24px;
}
.cat-menu-icons ul li a {
    background: #f60;
    color: #fff;
    padding: 0.25em 0.6em 0.2em;
    border-radius: 1px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
}
.cat-menu-icons ul li a.hidden-filter {
    background: #e6e6e6;
}
.cat-menu-icons {
    float: left;
    width: 98%;
    min-height: 2.1em;
    border-bottom: 2px dotted #e6e6e6;
    margin-bottom: 0.6em;
    padding-top: 0.6em;
    margin-left: 1%;
    margin-right: 1%;
}


/* option-sz */
.option-sz {
    float: left;
    width: 33%;
    text-align: center;
    border-right: 2px dotted #e6e6e6;
}
.option-sz ul {
    margin: 0;
    padding: 0;
}
.option-sz ul:before {
    content: "Tamaño: ";
    color: #ccc;
    font-size: 0.9em;
}
.option-sz ul li {
    display: inline-block;
    font-size: 0.65em;
    min-width: 20px;
    height: 20px;
    background: #fbfbfb;
    cursor: pointer;
    position: relative;
    top: -0.1em;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #ccc;
    color: #bdbdbd;
    padding: 0 0.25em;
    line-height: 1.7em;
    font-family: Arial, Helvetica, san-serif;
    text-transform: uppercase;
}
.option-sz ul li.selectedSize {
    background: #ff6600;
    color: #fff;
    font-weight: bold;
    border-color: #f60;
}
.option-sz ul li:after{
	font-size: 1.2em;
    color: #fff;
    position: absolute;
    bottom: -3em;
    text-align: center;
    background: #343434;
    padding: 0.3em 0.5em 0.2em;
    width: max-content;
    text-transform: none;
    z-index: 2;
    font-family: 'Raleway', Arial, Helvetica, san-serif;
    left: 0;
    line-height: 1.1em;
	font-weight:normal;
}
.option-sz ul li:hover:before{
	border: 10px solid transparent;
    border-bottom-color: #343434;
    content: " ";
    position: absolute;
    top: 2em;
    z-index: 2;
	font-weight:normal;
}
.option-sz ul li#opt-sz-xxs:hover:after {
	content: "Mini";
}
.option-sz ul li#opt-sz-xs:hover:after {
	content: "Pequeño";
}
.option-sz ul li#opt-sz-1:hover:after {
	content: "Normal";
}
.option-sz ul li#opt-sz-2:hover:after {
	content: "Doble";
}
.option-sz ul li#opt-sz-3:hover:after {
	content: "Triple";
}
.option-sz ul li#opt-sz-4:hover:after {
	content: "Grande";
}
.option-sz ul li#opt-sz-5:hover:after {
	content: "Enorme";
}



/* option-bg */
.option-bg {
    float: left;
    width: 33%;
    text-align: center;
    border-right: 2px dotted #e6e6e6;
}
.option-bg ul {
    margin: 0;
    padding: 0;
}
.option-bg ul:before {
    content: "Fondo: ";
    color: #ccc;
    font-size: 0.9em;
    top: -0.3em;
    position: relative;
}
.option-bg ul li {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #fbfbfb;
    cursor: pointer;
    position: relative;
    border: 1px solid #ccc0;
    box-sizing: border-box;
}
.option-bg ul li:last-of-type {
    border-color: #ccc;
}
.option-bg ul li#opt-bg-light {
	background: #e6e6e6;
}
.option-bg ul li#opt-bg-semilight {
	background: #999999;
}
.option-bg ul li#opt-bg-semidark {
	background: #676767;
}
.option-bg ul li#opt-bg-dark {
	background: #343434;
}
.option-bg ul li#opt-bg-basedark {
	background: #ca5100;
}
.option-bg ul li#opt-bg-baselight {
	background: #ffcaa6;
}
.option-bg ul li#opt-bg-base {
	background: #ff6600;
}
.option-bg ul li:after{
	font-size: 0.75em;
    color: #fff;
    position: absolute;
    bottom: -3em;
    text-align: center;
    background: #343434;
    padding: 0.3em 0.5em 0.2em;
	z-index: 2;
	width: max-content;
}
.option-bg ul li:hover:before{
	border: 10px solid transparent;
    border-bottom-color: #343434;
    content: " ";
    position: absolute;
    top: 1.2em;
	z-index: 2;
}
.option-bg ul li#opt-bg-light:hover:after {
	content: "Claro";
}
.option-bg ul li#opt-bg-semilight:hover:after {
	content: "Semi Claro";
}
.option-bg ul li#opt-bg-semidark:hover:after {
	content: "Semi Oscuro";
}
.option-bg ul li#opt-bg-dark:hover:after {
	content: "Oscuro";
}
.option-bg ul li#opt-bg-basedark:hover:after {
	content: "Base Oscuro";
}
.option-bg ul li#opt-bg-baselight:hover:after {
	content: "Base Claro";
}
.option-bg ul li#opt-bg-base:hover:after {
	content: "Base";
}
.option-bg ul li:last-of-type:hover:after {
	content: "Transparente";
}



/* option-bd */
.option-bd {
    float: left;
    width: 33%;
    text-align: center;
}
.option-bd ul {
    margin: 0;
    padding: 0;
}
.option-bd ul:before {
    content: "Borde: ";
    color: #ccc;
    font-size: 0.9em;
	top: -0.3em;
    position: relative;
}
.option-bd ul li {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    border: 2px solid #ccc;
}
.option-bd ul li.selectedBorder {
    background: #ff6600;
    color: #fff;
    font-weight: bold;
    border-color: #f60;
}
.option-bd ul li:after{
	font-size: 0.75em;
    color: #fff;
    position: absolute;
    bottom: -3em;
    text-align: center;
    background: #343434;
    padding: 0.3em 0.5em 0.2em;
	width: max-content;
	z-index: 2;
}
.option-bd ul li:hover:before{
	border: 10px solid transparent;
    border-bottom-color: #343434;
    content: " ";
    position: absolute;
    top: 1.2em;
	z-index: 2;
}
.option-bd ul li#opt-bd-base {
	border-color: #f60;
}
.option-bd ul li#opt-bd-baselight {
	border-color: #ffcaa6;
}
.option-bd ul li#opt-bd-light {
	border-color: #e6e6e6;
}
.option-bd ul li#opt-bd-basedark {
	border-color: #ca5100;
}
.option-bd ul li#opt-bd-dark {
	border-color: #343434;
}
.option-bd ul li:last-of-type {
    border-width: 1px;
    border-color: #e6e6e6;
    border-style: dashed;
}
.option-bd ul li#opt-bd-base:hover:after {
	content: "Base";
}
.option-bd ul li#opt-bd-baselight:hover:after {
	content: "Base Claro";
}
.option-bd ul li#opt-bd-light:hover:after {
	content: "Claro";
}
.option-bd ul li#opt-bd-basedark:hover:after {
	content: "Base Oscuro";
}
.option-bd ul li#opt-bd-dark:hover:after {
	content: "Oscuro";
}
.option-bd ul li:last-of-type:hover:after {
	content: "Sin Borde";
}



/* option-rd */
.option-rd {
    float: left;
    width: 49%;
    text-align: center;
    border-top: 2px dotted #e6e6e6;
    margin-top: 0.6em;
    padding-top: 0.5em;
    box-sizing: border-box;
    margin-bottom: 0.75em;
    margin-left: 1%;
}
.option-rd ul {
    margin: 0;
    padding: 0;
}
.option-rd ul:before {
    content: "Redondeado: ";
    color: #ccc;
    font-size: 0.9em;
}
.option-rd ul:after {
    border-right: 2px dotted #e6e6e6;
    height: 25px;
    content: "";
    float: right;
    position: relative;
    top: 3px;
}
.option-rd ul li {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent;
    cursor: pointer;
    position: relative;
    top: 0.3em;
    box-sizing: border-box;
    border: 2px solid #ccc;
}
.option-rd ul li.selectedBorder {
    background: #ff6600;
    color: #fff;
    font-weight: bold;
    border-color: #f60;
}
.option-rd ul li:after{
	font-size: 0.75em;
    color: #fff;
    position: absolute;
    bottom: -3em;
    text-align: center;
    background: #343434;
    padding: 0.3em 0.5em 0.2em;
	width: max-content;
	z-index: 2;
}
.option-rd ul li:hover:before{
	border: 10px solid transparent;
    border-bottom-color: #343434;
    content: " ";
    position: absolute;
    top: 1.2em;
	z-index: 2;
}
.option-rd ul li#opt-rd-xs {
	border-radius: 5%;
}
.option-rd ul li#opt-rd-1 {
	border-radius: 10%;
}
.option-rd ul li#opt-rd-2 {
	border-radius: 20%;
}
.option-rd ul li#opt-rd-3 {
	border-radius: 30%;
}
.option-rd ul li#opt-rd-4 {
	border-radius: 40%;
}
.option-rd ul li#opt-rd-5 {
	border-radius: 100%;
}
.option-rd ul li:last-of-type {
	border-radius: 0%;
    border-color: #e6e6e6;
    border-style: dotted;
}
.option-rd ul li#opt-rd-xs:hover:after {
	content: "5%";
}
.option-rd ul li#opt-rd-1:hover:after {
	content: "10%";
}
.option-rd ul li#opt-rd-2:hover:after {
	content: "20%";
}
.option-rd ul li#opt-rd-3:hover:after {
	content: "30%";
}
.option-rd ul li#opt-rd-4:hover:after {
	content: "40%";
}
.option-rd ul li#opt-rd-5:hover:after {
	content: "100%";
}
.option-rd ul li:last-of-type:hover:after {
	content: "Sin Redondeado";
}



/* option-cl */
.option-cl {
    float: left;
    width: 49%;
    text-align: center;
    border-top: 2px dotted #e6e6e6;
    margin-top: 0.6em;
    padding-top: 0.5em;
    margin-bottom: 0.75em;
    margin-right: 1%;
}
.option-cl ul {
    margin: 0;
    padding: 0;
}
.option-cl ul:before {
    content: "Color: ";
    color: #ccc;
    font-size: 0.9em;
}
.option-cl ul li {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #fbfbfb;
    cursor: pointer;
    position: relative;
    top: 0.3em;
    box-sizing: border-box;
    border: 2px solid transparent;
}
.option-cl ul li.selectedBorder {
    background: #ff6600;
    color: #fff;
    font-weight: bold;
    border-color: #f60;
}
.option-cl ul li:after{
	font-size: 0.75em;
    color: #fff;
    position: absolute;
    bottom: -3em;
    text-align: center;
    background: #343434;
    padding: 0.3em 0.5em 0.2em;
	width: max-content;
	z-index: 2;
}
.option-cl ul li:hover:before{
	border: 10px solid transparent;
    border-bottom-color: #343434;
    content: " ";
    position: absolute;
    top: 1.2em;
	z-index: 2;
}
.option-cl ul li#opt-cl-base {
	background: #f60;
}
.option-cl ul li#opt-cl-brown {
	background: #ae8300;
}
.option-cl ul li#opt-cl-olive {
	background: #709600;
}
.option-cl ul li#opt-cl-green {
	background: #00b617;
}
.option-cl ul li#opt-cl-bluegreen {
	background: #00b38f;
}
.option-cl ul li#opt-cl-bluegray {
	background: #00a8cb;
}
.option-cl ul li#opt-cl-blue {
	background: #3386ff;
}
.option-cl ul li#opt-cl-purple {
	background: #8f69ff;
}
.option-cl ul li#opt-cl-violet {
	background: #cb58ff;
}
.option-cl ul li#opt-cl-pink {
	background: #ff47cc;
}
.option-cl ul li#opt-cl-red {
	background: #ff5051;
}
.option-cl ul li#opt-cl-gray {
	background: #cdcdcd;
}
.option-cl ul li#opt-cl-white {
	background: #fff;
}
.option-cl ul li:last-of-type {
	background: transparent;
    border-color: #dcdcdc;
    border-style: dotted;
    border-width: 1px;
}
.option-cl ul li:last-of-type:hover {
	background: #f60;
	border: 1px solid #f60;
}
.option-cl ul li#opt-cl-base:hover:after {
	content: "Base";
}
.option-cl ul li#opt-cl-brown:hover:after {
	content: "Marrón";
}
.option-cl ul li#opt-cl-olive:hover:after {
	content: "Oliva";
}
.option-cl ul li#opt-cl-green:hover:after {
	content: "Verde";
}
.option-cl ul li#opt-cl-bluegreen:hover:after {
	content: "Azul Verdoso";
}
.option-cl ul li#opt-cl-bluegray:hover:after {
	content: "Azul Grisaceo";
}
.option-cl ul li#opt-cl-blue:hover:after {
	content: "Azul";
}
.option-cl ul li#opt-cl-purple:hover:after {
	content: "Morado";
}
.option-cl ul li#opt-cl-violet:hover:after {
	content: "Violeta";
}
.option-cl ul li#opt-cl-pink:hover:after {
	content: "Rosa";
}
.option-cl ul li#opt-cl-red:hover:after {
	content: "Rojo";
}
.option-cl ul li#opt-cl-gray:hover:after {
	content: "Gris";
}
.option-cl ul li#opt-cl-white:hover:after {
	content: "Blanco";
}
.option-cl ul li:last-of-type:hover:after {
	content: "Original";
}


#all-icons, #none-icons {
	background: #cccccc;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.06em 0.34em;
    position: relative;
    top: 1px;
    font-family: Arial, Helvetica, san-serif;
    width: 8px;
    display: block;
    text-align: center;
    line-height: 1.1em;
    text-indent: -1px;
}
#none-icons {
    line-height: .95em;
    padding-bottom: 0.2em;
    top: 0px;
}
#all-icons:hover, #none-icons:hover {
	background: #343434;
}
/*********** PAGE STYLES END ***********/



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



/************ ICONS STYLES START *************/
/*
Theme Name: ji-icons
Author: Josetxu.com
Description: Free CSS Icons Gallery 
Version: 1.0
*/


body {
    font-size: 1em !important;
}

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

	
/****** Base Icons Styles - START ******/
i[class^="ji-"], i[class*="ji-"] {
	width: 2.5em;
	height: 2.5em;
	border: 0.2em solid transparent;
	border-radius: 0.0625em;
	display: inline-block;
	background: transparent;
	font-size: 1em;
	font-style: normal;
}
i[class^="ji-"]:after , i[class^="ji-"]:before, i[class*="ji-"]:after , i[class*="ji-"]:before {
	content: " ";
	border-radius: 0.125em;
	float: left;
}
/******* Base Icons Styles - END *******/


/***** Specific Icons Styles - START *****/

/*************** Logo **************/
i.ji-jicons:before {
	width: 0.35em;
	height: 1.1em;
	margin-top: 0.6em;
	margin-left: 0.6em;
	border-right: 0.25em solid #f60;
	border-bottom: 0.25em solid #f60;
	border-radius: 0 0 0.35em 0;
}
i.ji-jicons:after {
	margin-left: 0.22em;
	margin-top: 0.65em;
	background: transparent;
	border-top: 0.275em solid #f60;
	height: 0.065em;
	width: 0.25em;
	border-bottom: 0.75em solid #f60;
	border-radius: 0.005em;
}
/*************** Web ***************/

/* home */
i.ji-home:after {
	border: 0.8em solid transparent;
	border-bottom: 0.6em solid #ff6600;
	margin-top: -0.3em;
	margin-left: -1.41em;
	border-radius: 0.0625em;
}
i.ji-home:before {
	background: transparent;
	width: 0.25em;
	height: 0.5em;
	margin-left: 0.65em;
	margin-top: 1em;
	border: 0.5em solid #ff6600;
	border-bottom: 0;		
}

/* comment */
i.ji-comment:after {	
	background: transparent;
	border-radius: 0;
	border: 0.437em solid #ff6600;
	border-left: 0 solid transparent;
	border-bottom-color: transparent;
	border-right-color: transparent;
	position: absolute;
	transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
	margin-top: 1.687em;
	margin-left: -1.562em;
}
i.ji-comment:before {
	background: #ff6600;
	width: 1.625em;
	height: 1.312em;
	border-radius: 0.625em;
	margin-left: 0.437em;
	margin-top: 0.437em;
}

/* mail */
i.ji-mail:after {
	width: 0.125em;
	height: 0;
	margin-left: 0.438em;
	margin-top: -1.437em;
	background: transparent;
	border: 0.750em solid #ff6600;
	border-top-color: transparent;
	border-bottom-width: 0.562em;

}
i.ji-mail:before {
	width: 0;
	height: 0;
	margin-top: 0.562em;
	margin-left: 0.5em;
	background: transparent;
	border: 0.75em solid transparent;
	border-top-color: #ff6600;
}

/* user */
i.ji-user:before {
	width: 0.750em;
	height: 0.750em;
	margin-top: 0.437em;
	background: #ff6600;
	margin-left: 0.9em;
	border-radius: 100%;
}
i.ji-user:after {
	margin-left: 0.650em;
	margin-top: 0.0625em;
	background: #ff6600;
	width: 1.250em;
	height: 0.8125em;
	border-radius: 100% 100% 0 0;
}

/*bookmark*/
i.ji-bookmark:after {
	margin-top: 0.4375em;
	margin-left: 0.5625em;
	width: 0;
	height: 0.25em;
	border: 0.6875em solid #ff6600;
	border-bottom-color: transparent;
}

/* map */	
i.ji-map:after {
	margin-left: 0.875em;
	margin-top: -0.3125em;
	border: 0.750em solid #ff6600;
	border-left: 0.375em solid transparent;
	border-right: 0.375em solid transparent;
	border-bottom-color: transparent;
}
i.ji-map:before {
	width: 0.375em;
	height: 0.375em;
	margin-top: 0.437em;
	margin-left: 0.625em;
	background: transparent;
	border-radius: 100%;
	border: 0.437em solid #ff6600;
}		
		
/* link */
i.ji-link:before, i.ji-link:after {
	width: 0.750em;
	height: 0.1875em;
	margin-top: 0.687em;
	border: 0.25em solid #ff6600;
	border-radius: 0.375em;
	margin-left: 0.9375em;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
i.ji-link:after {
	margin-left: 0.375em;
	margin-top: -0.1875em;
}

/* star */		
i.ji-star:before, i.ji-star:after {
	width: 0;
	height: 0;
	margin-top: 0.7em;
	margin-left: 0.4em;
	border: 0.8em solid transparent;
	border-top: 1.4em solid #ff6600;
	border-radius: 0.05em;
}
i.ji-star:after {
	margin-top: -3.45em;
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}



	
/*************** Controls ***************/

/* play */
i.ji-play:before {
	margin-top: 0.5em;
	margin-left: 0.8125em;
	border: 0.75em solid transparent;
	border-left: 1.125em solid #ff6600;
}

/* stop */
i.ji-stop:before , i.ji-rec:before {
	margin-top: 0.625em;
	margin-left: 0.625em;
	height: 1.250em;
	width: 1.250em;
	background: #ff6600;
}

/* pause */
i.ji-pause:before {
	margin-top: 0.625em;
	margin-left: 0.625em;
	border-left: 0.5em solid #ff6600;
	border-right: 0.5em solid #ff6600;
	height: 1.25em;
	width: 0.25em;
	border-radius: 0.05em;
}

/* rec */
i.ji-rec:before {
	border-radius: 100%;
}

/* fast forward / rewind */
i.ji-forward:before , i.ji-forward:after , i.ji-rewind:before , i.ji-rewind:after {
	margin-top: 0.5em;
	margin-left: -0.3125em;
	border: 0.75em solid transparent;
	border-left: 0.875em solid #ff6600;
}
i.ji-forward:before , i.ji-forward:after {
	margin-left: 0.625em;
}
i.ji-forward:after {
	margin-left: 1.125em;
	margin-top: -1.5em;
}
i.ji-rewind:before {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
i.ji-rewind:after {
	margin-left: 0.1875em;
	margin-top: -1.5em;
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

/* slow forward / slow rewind */
i.ji-slowforward:before , i.ji-slowforward:after , i.ji-slowrewind:before , i.ji-slowrewind:after {
	margin-top: 0.5em;
	margin-left: -0.3125em;
	border: 0.750em solid transparent;
	border-left: 0.875em solid #ff6600;
	border-radius: 0.1875em;
}
i.ji-slowforward:before , i.ji-slowforward:after {
	margin-left: 0.625em;
}
i.ji-slowforward:after {
	margin-left: 1.125em;
	margin-top: -1.4375em;
}
i.ji-slowrewind:before {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
i.ji-slowrewind:after {
	margin-left: 0.125em;
}
i.ji-slowforward:before, i.ji-slowrewind:after {
	border: 0;
	width: 0.375em;
	height: 1.375em;
	background: #ff6600;
	border-radius: 0.0625em;
	margin-top: 0.562em;
}



/*************** Tools ***************/

/* gear */
i.ji-gear:before {
	width: 0.375em;
	height: 0.375em;
	margin-top: 0.625em;
	margin-left: 0.625em;
	background: transparent;
	border: 0.4375em solid #ff6600;
	border-radius: 100%;
}
i.ji-gear:after {
	margin-left: -1.4375em;
	margin-top: 0.4375em;
	background: transparent;
	border: 0.25em dashed #ff6600;
	width: 1.125em;
	height: 1.125em;
	border-radius: 100%;
}

/* edit */
i.ji-edit:before {
	width: 0.625em;
	height: 1.5em;
	margin-top: 0.4375em;
	margin-left: 1.0625em;
	background: #ff6600;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
i.ji-edit:after {
	margin-left: -1.5em;
	margin-top: 1.625em;
	background: transparent;
	border: 0.4375em solid #ff6600;
	border-bottom-color: transparent;
	border-left: 0.3125em solid transparent;
	border-right: 0.3125em solid transparent;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

/* hammer */
i.ji-hammer:before {
	width: 0.12em;
    height: 0.12em;
    margin-top: 1.12em;
    margin-left: 0.3075em;
    background: #ff660000;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border: 0.23em solid #ff6600;
    border-right-width: 1em;
    border-radius: 0.1em 0 0 0.1em !important;
}
i.ji-hammer:after {
	margin-left: 0.985em;
    margin-top: -1.55em;
    background: transparent;
    border: 0.475em solid #ff6600;
    border-bottom: 0.4375em solid transparent;
    border-left: 0 solid transparent;
    border-right: 0.4375em solid transparent;
    transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    width: 1em;
}

/* wrench */
i.ji-wrench:before {
	width: 0.12em;
    height: 0.12em;
    margin-top: 1.2em;
    margin-left: 0.4375em;
    background: #ff660000;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border: 0.23em solid #ff6600;
    border-right-width: 0.8em;
}
i.ji-wrench:after {
	margin-left: 1em;
    margin-top: -1.18em;
    border: 0.375em solid #ff6600;
    border-top: 0 solid transparent;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 0.3125em;
    height: 0.375em;
    border-radius: 0.3125em;
    border-bottom-right-radius: 0.625em;
    border-bottom-left-radius: 0.625em;
}

/* screwdriver */
i.ji-screwdriver:before {
	width: 0.12em;
    height: 0.12em;
    margin-top: 1.45em;
    margin-left: 0.375em;
    background: #adb93203;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border-radius: 0.625em 0.125em 0.125em 0.625em;
    border: 0.25em solid #ff6600;
    border-right-width: 0.5em;
}
i.ji-screwdriver:after {
	margin-left: 1.5em;
    margin-top: -1.8em;
    transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    width: 1.875em;
    height: 0.375em;
    border-radius: 1.8125em 0.3125em 0.3125em 1.6875em;
    border-bottom: 0;
    background: #ff6600;
    font-size: 0.575em;
    line-height: 0.385em;
    text-indent: -1.9em;
    content: "►";
    color: #ff6600;
}

/* lock */
i.ji-lock:after {
	width: 0.325em;
	height: 0.375em;
	margin-top: -1.55em;
	margin-left: 0.82em;
	border: 0.25em solid #ff6600;
	border-radius: 100% 100% 0 0;
	border-bottom: 0;
}
i.ji-lock:before {
	width: 2.05em;
	margin-left: 1.05em;
	margin-top: 1.8em;
	height: 1.6em;
	background: #ff6600;
	content: "✓";
	font-size: 0.6em;
	color: #fff;
	line-height: 1.8em;
	font-weight: bold;
}

/* unlock */
i.ji-unlock:after {
	width: 0.35em;
	height: 0.375em;
	margin-top: -1.55em;
	margin-left: 0.825em;
	border: 0.25em solid #ff6600;
	border-radius: 100% 100% 0 0;
	border-bottom: 0;
}
i.ji-unlock:before {
	width: 1.8em;
	margin-left: 0.9em;
	margin-top: 1.6em;
	height: 1.35em;
	background: #ff6600;
	content: "x";
	font-size: 0.7em;
	color: #fff;
	line-height: 1.4em;
}

/* options */
i.ji-options:before {			
	margin-left: 0.4375em;
	margin-top: 0.4375em;
	background: linear-gradient(transparent 0, transparent 0.125em, #ff6600 0.125em, #ff6600 0.375em,transparent 0.375em,transparent 0.6875em, #ff6600 0.6875em, #ff6600 0.9375em, transparent 0.9375em, transparent 1.25em, #ff6600 1.25em, #ff6600 1.5em, transparent 1.5em, transparent 1.625em);
	width: 1.625em;
	height: 1.625em;
	border-radius: 0.0625em;
}
i.ji-options:after {
	margin-left: 0.25em;
	margin-top: -1.3em;
	width: 1.5em;
	height: 1.5625em;
	line-height: 0.775em;
	content: "●";
	color: #ff6600;
	font-size: 1.4em;
	text-indent: 0.1em;
	transform: rotate(-41deg);
	-ms-transform: rotate(-41deg);
	-webkit-transform: rotate(-41deg);
	letter-spacing: 0.008em;
	content: "●● ●";
}



/*************** Menus ***************/


/* menu */
i.ji-menu:before {
	width: 1.625em;
	height: 0.25em;
	margin-top: 0.4375em;
	border-top: 0.375em solid #ff6600;
	border-radius: 0;
	border-bottom: 0.375em solid #ff6600;
	margin-left: 0.4375em;

}
i.ji-menu:after {
	margin-left: 0.4375em;
	margin-top: 0.25em;
	background: #ff6600;
	width: 1.625em;
	height: 0.375em;
	border-radius: 0;
}

/* menu list */
i.ji-list:after {
	width: 1.625em;
	height: 0.375em;
	margin-top: -1.25em;
	margin-left: 0.4375em;
	border-radius: 0;
	border-top: 0.25em solid #ffffff;
	border-bottom: 0.25em solid #ffffff;
}
i.ji-list:before {
	width: 0.25em;
	height: 1.625em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border-left: 0.375em solid #ff6600;
	border-radius: 0.0625em;
	border-right: 1em solid #ff6600;
}

/* menu grid */
i.ji-grid:after {
	width: 1.625em;
	height: 0.375em;
	margin-top: -1.25em;
	margin-left: 0.4375em;
	border-radius: 0;
	border-top: 0.25em solid #ffffff;
	border-bottom: 0.25em solid #ffffff;
}
i.ji-grid:before {
	width: 0.875em;
	height: 1.625em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border-left: 0.375em solid #ff6600;
	border-radius: 0.0625em;
	border-right: 0.375em solid #ff6600;
	background: #ff6600;
	background: linear-gradient(to right, transparent 0 ,transparent 0.25em, #ff6600 0.25em, #ff6600 0.625em, transparent 0.625em, transparent 0.875em);
}

/* menu close */
i.ji-close:after {
	width: 0.375em;
	height: 1.875em;
	margin-left: 1.0625em;
	margin-top: -1.875em;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	background: #ff6600;
	border-radius: 0.0625em;
}
i.ji-close:before {
	width: 0.375em;
	height: 1.875em;
	margin-right: 1.25em;
	margin-top: 0.3125em;
	margin-left: 1em;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	background: #ff6600;
	border-radius: 0.0625em;
}

/* menu y */
i.ji-menuy:before {
	width: 0.375em;
	height: 0.25em;
	margin-top: 0.4375em;
	border-top: 0.375em solid #ff6600;
	border-radius: 0;
	border-bottom: 0.375em solid #ff6600;
	margin-left: 1.0625em;
}
i.ji-menuy:after {
	margin-left: -0.375em;
	margin-top: 1.6875em;
	background: #ff6600;
	width: 0.375em;
	height: 0.375em;
	border-radius: 0;
}

/* menu x */
i.ji-menux:before {
	width: 0.25em;
	height: 0.375em;
	margin-top: 1.0625em;
	border-right: 0.375em solid #ff6600;
	border-radius: 0;
	border-left: 0.375em solid #ff6600;
	margin-left: 0.4375em;
}
i.ji-menux:after {
	margin-left: 0.25em;
	margin-top: 1.0625em;
	background: #ff6600;
	width: 0.375em;
	height: 0.375em;
	border-radius: 0;
}

/* menu y-x circled */
i.ji-menuycircled:before, i.ji-menuxcircled:before {
	margin-top: 0.65em;
	margin-left: 0.3em;
	content: "●●●";
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	color: #ff6600;
}
i.ji-menuxcircled:before {	
	transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	margin-left: 0.35em;
}



/*************** Arrows ***************/

/* arrow border */
i.ji-arrowborderright:after , i.ji-arrowborderleft:after , i.ji-arrowbordertop:after , i.ji-arrowborderbottom:after {
	margin-top: 0.75em;
	margin-left: 0.625em;
	border: 0.4375em solid #ff6600;
	border-bottom-width: 0;
	border-left-width: 0;
	width: 0.625em;
	height: 0.625em;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);

}
i.ji-arrowborderleft:after {
	transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	margin-left: 0.8125em;
}
i.ji-arrowbordertop:after {
	transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	-webkit-transform: rotate(315deg);
	margin-left: 0.75em;
	margin-top: 0.9375em;
}
i.ji-arrowborderbottom:after {
	transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	margin-left: 0.75em;
	margin-top: 0.625em;
}


/* arrow solid */
i.ji-arrowsolidright:before , i.ji-arrowsolidleft:before , i.ji-arrowsolidtop:before , i.ji-arrowsolidbottom:before {
	margin-top: 0.5em;
	margin-left: 0.8125em;
	border: 0.75em solid transparent;
}
i.ji-arrowsolidright:before  { 
	border-left:   1.125em solid #ff6600;
	}
i.ji-arrowsolidleft:before   { 
	border-right:  1.125em solid #ff6600; margin-left: -0.12em;    
}
i.ji-arrowsolidtop:before    { 
	border-bottom: 1.125em solid #ff6600; margin: -0.0625em 0 0 0.562em;
}
i.ji-arrowsolidbottom:before { 
	border-top:    1.125em solid #ff6600; margin: 0.75em 0 0 0.5em; 
}



/*************** Social ***************/

/* social */
i.ji-social:before {			
	margin-left: 0.0625em;
	margin-top: 0.15em;
	width: 1.5em;
	height: 1.5em;
	line-height: 0.65em;
	color: #ff6600;
	font-size: 1.4em;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	letter-spacing: 0;
	content: "● ● ●";
	text-align: center;
}
i.ji-social:after {
	margin-left: 1em;
	margin-top: -1.55em;
	width: 0.75em;
	height: 0.75em;
	border-top: 0.25em solid #ff6600;
	border-right: 0.25em solid #ff6600;
	transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	border-radius: 0;
}

/* facebook */
i.ji-facebook:before {
	width: 0.25em;
	height: 1.1875em;
	margin-top: 0.4375em;
	border-top: 0.375em solid #ff6600;
	border-left: 0.375em solid #ff6600;
	margin-left: 1em;
	border-radius: 0.3125em 0.0625em 0.0625em 0.0625em;

}
i.ji-facebook:after {
	margin-left: 0.8125em;
	margin-top: -1em;
	background: #ff6600;
	width: 0.75em;
	height: 0.375em;
	border-radius: 0;
}

/* twitter */
i.ji-twitter:before {
	width: 0.625em;
	height: 0.9375em;
	margin-top: 0.5625em;
	border-bottom: 0.375em solid #ff6600;
	border-left: 0.375em solid #ff6600;
	margin-left: 0.8125em;
	border-radius: 0.0625em 0.0625em 0.1875em 0.3125em;

}
i.ji-twitter:after {
	margin-left: 1.125em;
	margin-top: -1em;
	background: #ff6600;
	width: 0.6875em;
	height: 0.375em;
	border-radius: 0 0.1875em 0.1875em 0;
}

/* google */
i.ji-google:before {
	width: 0.6875em;
	height: 0.6875em;
	margin-top: 0.5625em;
	border: 0.375em solid #ff6600;
	margin-left: 0.5625em;
	border-radius: 100%;
	border-right-color: transparent;

}
i.ji-google:after {
	margin-left: 1.23em;
	margin-top: -0.825em;
	width: 0.3125em;
	height: 0.4375em;
	border-top: 0.3125em solid #ff6600;
	border-right: 0.4em solid #ff6600;
	border-bottom-right-radius: 0.5em;
}

/* linkedin */
i.ji-linkedin:before {
	width: 0.375em;
	height: 0.0625em;
	margin-top: 0.5625em;
	border-bottom: 0.9375em solid #ff6600;
	border-top: 0.375em solid #ff6600;
	margin-left: 0.5em;
	border-radius: 0.0625em;

}
i.ji-linkedin:after {
	margin-left: 1em;
	margin-top: -1em;
	width: 0.375em;
	height: 0.6875em;
	border: 0.3125em solid #ff6600;
	border-bottom: 0;
	border-radius: 0.125em 0.4375em 0.0625em 0.0625em;
}

/* instagram */
i.ji-instagram:before {
	width: 1.25em;
	height: 0.6875em;
	margin-top: 0.5em;
	border: 0.1875em solid #ff6600;
	border-top: 0.625em solid #ff6600;
	margin-left: 0.4375em;

}
i.ji-instagram:after {
	margin-left: 0.53em;
	margin-top: -0.8em;
	width: 0.32em;
	height: 0.32em;
	border: 0.135em solid #ff6600;
	border-radius: 100%;
	content: ".";
	color: #fff;
	font-size: 1.5em;
	line-height: 0.4em;
	text-indent: 0.375em;
	transform: rotatex(-180deg);	
	-ms-transform: rotatex(-180deg);
	-webkit-transform: rotatex(-180deg);
}

/* youtube */
i.ji-youtube:before {
	margin-top: 0.65em;
	margin-left: 0.4375em;
	font-size: 1em;
	color: #fff;
	background: #ff6600;
	height: 1.2em;
	width: 1.625em;
	text-indent: -0.0625em;
	line-height: 0.875em;
	border-radius: 0.3125em;

}
i.ji-youtube:after {
	font-weight: bold;
	margin-left: 1.01em;
	margin-top: -0.92em;
	border: 0.3125em solid transparent;
	color: #ff6600;
	border-left: 0.5625em solid #fff;
}

/* rss */
i.ji-rss:before {
	width: 1em;
	height: 1.5em;
	border: 0.9375em double transparent;
	border-top-color: #ff6600;
	border-radius: 100%;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	margin-left: -0.9em;
	margin-top: 0.32em;
}
i.ji-rss:after {
	margin-left: -1.4em;
	margin-top: 1.69em;
	background: #ff6600;
	width: 0.3em;
	height: 0.3em;
	border-radius: 0.3125em;		
}


/*************** Multimedia ***************/

/* photo */
i.ji-photo:before {
	width: 0.5em;
	height: 0.5em;
	margin-top: 0.89em;
	background: #ff6600;
	margin-left: 1.0625em;
	border-radius: 100%;
	z-index: 2;
	position: relative;
	border: 0.125em double #fff;

}
i.ji-photo:after {
	margin-left: 0.38em;
	margin-top: -0.9em;
	background: #ff6600;
	width: 1.32em;
	height: 1.16em;
	border-radius: 0.125em;
	content: ".";
	color: #fff;
	line-height: 0.0625em;
	text-align: left;
	text-indent: 0.125em;
	font-size: 1.2em;
}

/* image */
i.ji-image:before {
	margin-top: 1.05em;
    margin-left: 1.3875em;
    position: relative;
    border: 0.3125em solid transparent;
    border-bottom: 0.375em solid #fff;
    border-radius: 0.05em;
    line-height: 0.0625em;
    text-indent: -1.1em;
    content: "▲";
    font-size: 0.9em;
    width: 0;
    color: #fff;
}
i.ji-image:after {
	margin-left: 0.38em;
    margin-top: -1.1em;
    background: #ff6600;
    width: 1.8em;
    height: 1.48em;
}

/* video */
i.ji-video:before {
	width: 0.75em;
	height: 0.3125em;
	margin-top: 0.8125em;
	border: 0.5em solid transparent;
	margin-left: 0.8125em;
	border-right-color: #ff6600;
	border-top-width: 0.3125em;
	border-bottom-width: 0.3125em;
	border-left-width: 0;

}
i.ji-video:after {
	margin-left: 0.4375em;
	margin-top: -1em;
	background: #ff6600;
	width: 1.0625em;
	height: 1.0625em;
}

/* player */
i.ji-player:before {
	margin-top: 0.9375em;
	border: 0.625em solid transparent;
	border-left: 0.625em solid #fff;
	margin-left: 1em;
	border-top-width: 0.3125em;
	border-bottom-width: 0.3125em;
	z-index: 2;
	position: relative;

}
i.ji-player:after {
	margin-left: 0.4375em;
	margin-top: -1em;
	background: #ff6600;
	width: 1.625em;
	height: 1.375em;
}	

/* micro */
i.ji-micro:before {
	width: 0.455em;
	height: 1em;
	margin-top: 0.375em;
	margin-left: 0.877em;
	border: 0.15em solid #ff6600;
	border-radius: 0.625em;
	background: linear-gradient(to top, #ff6600 0, #ff6600 50%, transparent 50%,transparent 58%,   #ff6600 58%, #ff6600 66%, transparent 66%,  transparent 74%, #ff6600 74%, #ff6600 82%, transparent 82%, transparent 90%, #ff6600 90%, #ff6600 100%);
	z-index: 2;
	position: relative;
}
i.ji-micro:after {
	margin-left: 0.85em;
	margin-top: -0.1em;
	border: 0.2em solid #ff6600;
	width: 0.22em;
	height: 0.3em;
	border-radius: 0 0 0.1em 0.1em;
	background: #ff6600;
	border-color: transparent #fff #ff6600 #fff;
	border-width: 0 0.3em 0.2em 0.3em;
}

/* sound */
i.ji-sound:before {
	height: 0.5em;
	margin-top: 0.5em;
	margin-left: 0.125em;
	border: 0.9375em solid #ff6600;
	border-left-color: transparent;
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid transparent;
}
i.ji-sound:after {
	margin-left: -1.5em;
	margin-top: 0.9375em;
	background: #ff6600;
	width: 0.5em;
	height: 0.625em;
	border-radius: 0.0625em;
}

/* mute */
i.ji-mute:before {
	height: 0.5em;
	margin-top: 0.5em;
	margin-left: 0.125em;
	border: 0.9375em solid #ff6600;
	border-left-color: transparent;
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid transparent;
}
i.ji-mute:after {
	margin-left: -1.73em;
	background: #ff6600;
	height: 0.7em;
	border-radius: 0.0625em;
	content: "x";
	font-weight: normal;
	color: #fff;
	font-size: 0.8em;
	z-index: 2;
	position: relative;
	line-height: 0.5625em;
	max-width: 0.5em;
	text-indent: 0.95em;
	margin-top: 1.2em;
}

/* muted */
i.ji-muted {
	-webkit-perspective: 6.25em;
	perspective: 6.25em;
}
i.ji-muted:before {
	height: 0.8125em;
	margin-top: 0.8125em;
	margin-left: -0.625em;
	border: 0.0625em solid #ff6600;
	border-left-width: 0.4375em;
	border-right-width: 0.1875em;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transform: rotatey(-81deg);
	-ms-transform: rotatey(-81deg);
	-webkit-transform: rotatey(-81deg);
	width: 3.4375em;
	float: left;
	
}
i.ji-muted:after {
	margin-left: -2.875em;
	height: 0.5625em;
	border-radius: 0.0625em;
	margin-top: 0.9375em;
	padding-left: 0.375em;
	max-width: 0;
	border: 0.0625em solid #ff6600;
}



/*************** Files  ***************/

/* file */
i.ji-file:after {
	margin-top: -1.61em;
	margin-left: 1.415em;
	border-radius: 0.125em 0.12em;
	border: 0.3125em solid transparent;
	border-right: 0.375em solid #ff6600;
	box-shadow: 0.0625em 0.0625em 0 0 #fff;
	border-bottom: 0.25em solid #ff6600;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	
}
i.ji-file:before {
	background: #ff6600;
	border: 0.275em solid #ff6600;
    font-size: 1em;
    width: 0;
    height: 0;
    padding: 0.54em 0.37em;
    margin-left: 0.65em;
    margin-top: 0.5em;
    border-radius: 0.06em 0.8125em 0.06em 0.06em;
    line-height: 0.6em;
    text-indent: -0.3em;
    content: " ";
}

/* file double */ 
i.ji-filedouble:after {
	margin-top: -1.45em;
	margin-left: 1.48em;
	border-radius: 0.125em 0.12em;
	border: 0.3125em solid transparent;
	border-right: 0.375em solid #ff6600;
	box-shadow: 0.0625em 0.0625em 0 0 #fff;
	border-bottom: 0.25em solid #ff6600;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
i.ji-filedouble:before {
	width: 1.125em;
	height: 1.375em;
	margin-top: 0.4375em;
	margin-left: 0.8125em;
	border-radius: 0.06em 0.8125em 0.06em 0.08em;
	background: #ff6600;
	box-shadow: -0.25em 0.25em 0 0 #ff6600, -0.3125em 0.3125em 0 -0.0625em #ff6600, -0.3125em 0.1875em 0 -0.0625em #ff6600, -0.1875em 0.3125em 0 -0.0625em #ff6600;
	border-bottom: 0.0625em solid #fff;
	border-left: 0.0625em solid #fff;
}

/* file text */
i.ji-filetext:after {			
	margin-top: -1.61em;
	margin-left: 1.415em;
	border-radius: 0.125em 0.12em;
	border: 0.3125em solid transparent;
	border-right: 0.375em solid #ff6600;
	box-shadow: 0.0625em 0.0625em 0 0 #fff;
	border-bottom: 0.25em solid #ff6600;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}
i.ji-filetext:before {
	background: linear-gradient(to bottom, #ff6600 0, #ff6600 35%, transparent 35%, transparent 45%, #ff6600 45%, #ff6600 55% , transparent 55%, transparent 65%, #ff6600 65%, #ff6600 75%, transparent 75%, transparent 85%, #ff6600 85%, #ff6600 100%);
    border: 0.275em solid #ff6600;
    font-size: 1em;
    width: 0;
    height: 0;
    padding: 0.54em 0.37em;
    margin-left: 0.65em;
    margin-top: 0.5em;
    border-radius: 0.06em 0.8125em 0.06em 0.06em;
    line-height: 0.6em;
    text-indent: -0.3em;
    content: " ";
}

/* file new */
i.ji-filenew:before {
	content: "+";
    font-size: 1em;
    width: 0;
    height: 0;
    margin-left: 0.65em;
    margin-top: 0.5em;
    border-radius: 0.06em 0.8125em 0.06em 0.06em;
    line-height: 0.6em;
    text-indent: -0.3em;
    color: #fff;
}

/* folder */
i.ji-folder:after {
	width: 1.5em;
	margin-left: 0.5em;
	margin-top: 0.0625em;
	height: 1.25em;
	border-radius: 0.0625em;
	color: #fff;
	line-height: 1.35em;
	background: #ff6600;
}
i.ji-folder:before {
	width: 0.5em;
	height: 0.25em;
	margin-top: 0.4375em;
	margin-left: 1.3125em;
	background: #ff6600;
	border-radius: 0.125em 0.125em 0 0;
}

/* folder new */
i.ji-foldernew:after {
	content: "+";
}

/* folder other */
i.ji-folderother:after {
	width: 1.5em;
	margin-left: 0.4375em;
	margin-top: 0.0625em;
	border: 0.0625em solid transparent;
	border-top: 1.25em solid #ff6600;
	border-radius: 0.0625em;
}
i.ji-folderother:before {
	width: 0.5em;
	height: 0.25em;
	margin-top: 0.4375em;
	margin-left: 1.3125em;
	background: #ff6600;
	border-radius: 0.125em 0.125em 0 0;
}

/* folder open */
i.ji-folderopen:after {
	width: 1.4em;
	margin-left: -0.85em;
	margin-top: 0.8em;
	border-top: 0.05em solid #fff;
	border-radius: 0.0625em 0.12em 0.0625em 0.0625em;
	border-right: 0.0782em solid #fff;
	-ms-transform: skewx(15deg);
	-webkit-transform: skewx(15deg);
	transform: skewx(15deg);
	height: 1.15em;
	background: #ff6600;
	position: absolute;
}
i.ji-folderopen:before {
	width: 1.45em;
	margin-left: -0.7em;
	margin-top: 0.58em;
	border-top: 1.4em solid #ff6600;
	border-radius: 0.0625em;
	position: absolute;
}




/*************** Devices ***************/

/* desktop */
i.ji-desktop:before,i.ji-tablet:before, i.ji-mobile:before {
	width: 1.125em;
	height: 0.6875em;
	margin-top: 0.6875em;
	margin-left: 0.4375em;
	border: 0.25em solid #ff6600;
	border-bottom-width: 0;
    border-radius: 0.125em 0.125em 0 0;
}
i.ji-desktop:after, i.ji-tablet:after, i.ji-mobile:after{
	/*margin-top: -0.25em;
	margin-left: 1.1875em;
	background: #ffffff;
	border: 0.0625em solid #ffffff;
	*/
	margin-top: -0.125em;
    margin-left: 0.751875em;
    background: #ffffff00;
    border: 0.2em solid #ff6600;
    width: 0.1em;
    height: 0.1em;
    border-left-width: 0.45em;
    border-right-width: 0.45em;
    border-radius: 0 0 0.125em 0.125em;
}
i.ji-desktop:after {
    border-left-width: 0.763em;
    border-right-width: 0.763em;
    margin-left: 0.44em;
}

/* tablet */
i.ji-tablet:before {
	width: 0.75em;
	height: 1em;
	margin-top: 0.4375em;
	margin-left: 0.625em;
}
i.ji-tablet:after {
    border-left-width: 0.578em;
    border-right-width: 0.578em;
    margin-left: 0.625em;
}
/* mobile */
i.ji-mobile:before {
	width: 0.5em;
	height: 1em;
	margin-top: 0.4375em;
	margin-left: 0.75em;
}		

/* mp3 */
i.ji-mp3:before {
	border: 0.25em solid #ff6600;
	border-bottom-width: 0.875em;
	width: 0.5em;
	height: 0.5em;
	margin-top: 0.4375em;
	margin-left: 0.75em;
}
i.ji-mp3:after {
	margin-top: -0.5625em;
	margin-left: 1.125em;
	background: #ff6600;
	border: 0.0625em solid #ffffff;
	width: 0.125em;
	height: 0.125em;
	border-radius: 100%;
}

/* headphones */		
i.ji-headphones:before {
	width: 1.125em;
	height: 1.25em;
	margin-top: 0.5em;
	margin-left: 0.4375em;
	border: 0.25em solid #ff6600;
	border-radius: 100%;
	border-bottom-color: transparent;
}
i.ji-headphones:after {
	margin-top: -1.3125em;
	margin-left: 0.6875em;
	border: 0.3125em solid #ff6600;
	border-top-color: transparent;
	border-bottom-color: transparent;
	width: 0.5em;
	height: 0.5em;
}

/* disc */		
i.ji-disc:before {
	width: 0.625em;
	height: 0.625em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border: 0.5em solid #ff6600;
	border-radius: 100%;
}
i.ji-disc:after {
	margin-top: -1.0625em;
	margin-left: 1em;
	border: 0.1875em solid #ff6600;
	width: 0.125em;
	height: 0.125em;
	border-radius: 100%;		
}

/* big disc */		
i.ji-discbig:before {
	width: 0.875em;
	height: 0.875em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border: 0.375em solid #ff6600;
	border-radius: 100%;
}
i.ji-discbig:after {
	margin-top: -1.1875em;
	margin-left: 0.875em;
	border: 0.25em solid #ff6600;
	width: 0.25em;
	height: 0.25em;
	border-radius: 100%;		
}

/* pendrive */
i.ji-pendrive:before {
	width: 0.8125em;
	height: 1.25em;
	margin-top: 0.8125em;
	margin-left: 0.875em;
	background: #ff6600;
	background: linear-gradient(to bottom, #ff6600 0%, #ff6600 70%, transparent 70%, transparent 74%, #ff6600 74%, #ff6600 100%);
}
i.ji-pendrive:after {
	margin-top: -1.625em;
	border-left: 0.25em solid #ff6600;
	border-right: 0.25em solid #ff6600;
	margin-left: 1em;
	height: 0.625em;
	width: 0.0625em;
}



/*************** Info ***************/

/* info */
i.ji-info:after {
	background: #ff6600;
	width: 0.4375em;
	height: 0.4375em;
	margin-left: 1em;
	margin-top: -1.625em;
}
i.ji-info:before {
	background: #ff6600;
	width: 0.4375em;
	height: 1.0625em;
	margin-top: 1em;
	margin-left: 1em;
}

/* warning */
i.ji-warning:after {
	background: #ff6600;
	width: 0.4375em;
	height: 1.0625em;
	margin-left: 1em;
	margin-top: -1.62em;
}
i.ji-warning:before {
	background: #ff6600;
	width: 0.4375em;
	height: 0.4375em;
	margin-top: 1.62em;
	margin-left: 1em;
}

/* success */
i.ji-success:after {
	background: #ff6600;
	width: 0.4375em;
	height: 0.8125em;
	margin-left: -0.9375em;
	margin-top: 1.1875em;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
i.ji-success:before {
	background: #ff6600;
	width: 0.4375em;
	height: 1.625em;
	margin-top: 0.4375em;
	margin-left: 1.1875em;
	transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
}

/* error */
i.ji-error:after, i.ji-error:before {
	width: 0.4375em;
	height: 1.8125em;
	margin-left: 1.0625em;
	margin-top: -1.8125em;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	background: #ff6600;
}
i.ji-error:before {
	margin-top: 0.375em;
	transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
}

/* info circled */
i.ji-infocircled:after {
	background: transparent;
	width: 0.25em;
	height: 0.125em;
	margin-left: 1.125em;
	margin-top: -1.3125em;
	border-top: 0.25em solid #fff;
	border-bottom: 0.5625em solid #fff;
	border-radius: 0.0625em;
}
i.ji-infocircled:before {
	background: #ff6600;
	width: 1.625em;
	height: 1.625em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border-radius: 100%;
}

/* warning circled */
i.ji-warningcircled:after {
	background: transparent;
	width: 0.25em;
	height: 0.125em;
	margin-left: 1.125em;
	margin-top: -1.25em;
	border-bottom: 0.25em solid #fff;
	border-top: 0.5625em solid #fff;
	border-radius: 0.0625em;
	z-index: 1;
	position: relative;
}
i.ji-warningcircled:before {
	background: #ff6600;
	width: 1.625em;
	height: 1.625em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border-radius: 100%;
}

/* success circled */
i.ji-successcircled:after {
	background: transparent;
	width: 0.625em;
	height: 0.375em;
	margin-left: 0.8125em;
	margin-top: -1.1875em;
	border-left: 0.25em solid #fff;
	border-bottom: 0.25em solid #fff;
	border-radius: 0.0625em;
	transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	-webkit-transform: rotate(-60deg);
}
i.ji-successcircled:before {
	background: #ff6600;
	width: 1.625em;
	height: 1.625em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border-radius: 100%;
}

/* error circled */
i.ji-errorcircled:after {
	background: transparent;
	width: 0.625em;
	height: 0.375em;
	margin-left: 0.41em;
	margin-top: -0.66em;
	border-radius: 0.0625em;
	content: "+";
	color: #fff;
	font-weight: bold;
	line-height: 0.4em;
	font-size: 1.8em;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	text-indent: -0.0625em;
}
i.ji-errorcircled:before {
	background: #ff6600;
	width: 1.625em;
	height: 1.625em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border-radius: 100%;
}



/*************** Battery ***************/

/* battery 0 */		
i.ji-battery0:before, i.ji-battery25:before, i.ji-battery50:before , i.ji-battery75:before, i.ji-battery100:before  {
	width: 1.1875em;
	height: 0.5625em;
	margin-top: 0.8125em;
	margin-left: 0.4375em;
	border: 0.1875em solid #ff6600;
}
i.ji-battery0:after, i.ji-battery25:after, i.ji-battery50:after, i.ji-battery75:after, i.ji-battery100:after {
	width: 1.25em;
	height: 0.4375em;
	margin-top: -0.6875em;
	margin-left: 0.6875em;
	border-radius: 0 0.125em 0.125em 0;
	border-left: 0 solid #ff6600;
	border-right: 0.1875em solid #ff6600;
}

/* battery 25 */
i.ji-battery25:after {
	width: 1em;
	border-left: 0.25em solid #ff6600;
}

/* battery 50 */
i.ji-battery50:after {
	width: 0.75em;
	border-left: 0.5em solid #ff6600;
}

/* battery 75 */
i.ji-battery75:after {
	width: 0.5em;
	border-left: 0.75em solid #ff6600;
}

/* battery 100 */
i.ji-battery100:after {
	width: 0.1875em;
	border-left: 1.0625em solid #ff6600;
}



/* battery 0/4 */
i.ji-battery-0-4:before, i.ji-battery-1-4:before, i.ji-battery-2-4:before , i.ji-battery-3-4:before, i.ji-battery-4-4:before  {
	width: 1.1875em;
	height: 0.5625em;
	margin-top: 0.8125em;
	margin-left: 0.4375em;
	border: 0.1875em solid #ff6600;
}
i.ji-battery-0-4:after, i.ji-battery-1-4:after, i.ji-battery-2-4:after, i.ji-battery-3-4:after, i.ji-battery-4-4:after {
	width: 1.375em;
	height: 0.5625em;
	margin-top: -0.75em;
	margin-left: 0.625em;
	border-radius: 0 0.125em 0.125em 0;
	border-left: 0 solid #ff6600;
	border-right: 0.1875em solid #ff6600;
}

/* battery 1/4 */
i.ji-battery-1-4:after {
	width: 1.0625em;
	border-left: 0.3125em solid #ff6600;
}

/* battery 2/4 */
i.ji-battery-2-4:after {
	width: 0.75em;
	border-left: 0.625em solid #ff6600;
}

/* battery 3/4 */
i.ji-battery-3-4:after {
	width: 0.5em;
	border-left: 0.875em solid #ff6600;
}

/* battery 4/4 */
i.ji-battery-4-4:after {
	width: 0.1875em;
	border-left: 1.1875em solid #ff6600;
}



/*************** Miscelanea ***************/

/* magnet */		
i.ji-magnet:before {
	width: 0.625em;
	height: 0.6875em;
	margin-top: 0.875em;
	margin-left: 0.4375em;
	border: 0.5em solid #ff6600;
	border-radius: 0 0 100% 100%;
	border-top: 0 solid transparent;
}
i.ji-magnet:after {
	margin-top: -1.625em;
	margin-left: 0.4375em;
	border-left: 0.5em solid #ff6600;
	width: 0.625em;
	height: 0.375em;
	border-right: 0.5em solid #ff6600;	
	border-radius: 0.05em;			
}

/* reload */
i.ji-reload:before {
	width: 0.9375em;
	height: 0.9375em;
	margin-top: 0.75em;
	margin-left: 0.5625em;
	border: 0.25em solid #ff6600;
	border-radius: 100%;
	border-left-color: transparent;
}
i.ji-reload:after {
	margin-top: -1.5em;
	border: 0.5em solid transparent;
	border-right: 0.6875em solid #ff6600;
	transform: rotate(-24deg);
	border-radius: 0.3125em;
}

/* banned */
i.ji-banned:before {
	width: 1em;
	height: 1em;
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	border: 0.3125em solid #ff6600;
	border-radius: 100%;
}
i.ji-banned:after {
	margin-top: -1.5625em;
	border-left: 0.3125em solid #ff6600;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	border-radius: 0.3125em;
	margin-left: 1.08em;
	height: 1.5em;
	width: 0;
}

/* pill */
i.ji-pill:before {
	width: 0.5em;
	height: 1.25em;
	margin-top: 0.375em;
	margin-left: 0.75em;
	border: 0.25em solid #ff6600;
	border-radius: 0.625em;
	background: linear-gradient(to top, #ff6600 0, #ff6600 50%, transparent 50%, transparent 100%);
}

/* pill tablet */
i.ji-pilltablet:before {
	margin-top: 0.4375em;
	margin-left: 0.4375em;
	background: linear-gradient(to right, #ff6600 0%, #ff6600 47%, transparent 47%, transparent 53%, #ff6600 53%, #ff6600 100%);
	border-radius: 100%;
	transform: rotate(-45deg);
	width: 1.625em;
	height: 1.625em;
}

/* child */
i.ji-child:after {
	margin-top: -1.5125em;
	margin-left: 0.6125em;
	border-right: 0.2em solid #ff6600;
	border-bottom: 0.2em solid #ff6600;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 0.6875em;
	height: 0.6875em;
	content: "●";
	color: #ff6600;
	font-size: 1.2em;
	line-height: 0.7em;
	text-indent: 0.12em;
}
i.ji-child:before {
	width: 0.0625em;
	height: 0.5em;
	margin-top: 1em;
	margin-left: 1em;
	border: 0.25em solid #ff6600;
	border-top-width: 0.5625em;
	border-bottom-width: 0;
}
	
/* cup */
i.ji-cup:after {
	margin-top: -1.3125em;
	margin-left: 1.4375em;
	border: 0.25em solid #ff6600;
	border-left-color: transparent;
	width: 0.25em;
	height: 0.5em;
	border-radius: 0.3125em;
	border-right-width: 0.1875em;
}
i.ji-cup:before {
	width: 0.625em;
	height: 0.75em;
	margin-top: 0.4375em;
	margin-left: 0.5em;
	border: 0.3125em solid #ff6600;
	background: #ff6600;
	border-top-width: 0.4375em;
	border-bottom-width: 0.4375em;
}

/* beer */
i.ji-beer:after {
	margin-top: -1.3125em;
	margin-left: 1.4375em;
	border: 0.25em solid #ff6600;
	border-left-color: transparent;
	width: 0.25em;
	height: 0.5em;
	border-radius: 0.3125em;
	border-right-width: 0.1875em;
}
i.ji-beer:before {
	width: 0.625em;
	height: 0.75em;
	margin-top: 0.4375em;
	margin-left: 0.5em;
	border: 0.3125em solid #ff6600;
	background: #ff6600;
	background: linear-gradient(to right, #ff6600 0, transparent 0, transparent 0.125em, #ff6600 0.125em, #ff6600 0.25em ,transparent 0.25em, transparent 0.375em, #ff6600 0.375em, #ff6600 0.5em, transparent 0.5em, transparent 0.625em, #ff6600 0.625em);
	border-top-width: 0.4375em;
	border-bottom-width: 0.4375em;
}		

/* wifi */
i.ji-wifi:before {
	width: 0.625em;
	height: 1.5em;
	margin-top: 0.5em;
	border: 0.9375em double transparent;
	border-top-color: #ff6600;
	border-radius: 100%;
}
i.ji-wifi:after {
	margin-left: -1.375em;
	margin-top: 1.75em;
	background: #ff6600;
	width: 0.3125em;
	height: 0.25em;
	border-radius: 0.3125em;
}

/* clock */
i.ji-clock:before, i.ji-clockfilled:before {
	width: 1.175em;
	height: 1.175em;
	margin-top: 0.5em;
	margin-left: 0.5em;
	border: 0.2em solid #ff6600;
	border-radius: 100%;
}		
i.ji-clock:after, i.ji-clockfilled:after {
	margin-top: -1.3125em;
	margin-left: 0.875em;
	border-right: 0.15em solid #ff6600;
	border-bottom: 0.15em solid #ff6600;
	width: 0.375em;
	height: 0.5em;
	border-radius: 0;
}

/* clock filled */
i.ji-clockfilled:before {
	background: #ff6600;
}
i.ji-clockfilled:after {
	border-color: #fff;
}	


/***** Specific Icons Styles - END *****/


	
/***** Options Icons Styles - START *****/

/* Border */
.ji-bd-base { border-color: #ff6600 !important; }
.ji-bd-baselight { border-color: #ffcaa6 !important; }
.ji-bd-basedark { border-color: #ca5100 !important }
.ji-bd-light { border-color: #e6e6e6 !important; }
.ji-bd-dark { border-color: #343434 !important }


/* Radius */
.ji-rd-xs { border-radius: 5% !important; }
.ji-rd-1 { border-radius: 10% !important; }
.ji-rd-2 { border-radius: 20% !important; }
.ji-rd-3 { border-radius: 30% !important; }
.ji-rd-4 { border-radius: 40% !important; }
.ji-rd-5 { border-radius: 100% !important; }


/* Background */
.ji-bg-dark { background: #343434!important; }
.ji-bg-semidark { background: #676767!important; }
.ji-bg-light { background: #e6e6e6 !important; }
.ji-bg-semilight { background: #999999 !important; }
.ji-bg-base { background: #ff6600 !important; }
.ji-bg-baselight { background: #ffcaa6 !important; }
.ji-bg-basedark { background: #ca5100 !important; }


/* bg-list-grid */
.ji-list.ji-bg-dark:after, .ji-grid.ji-bg-dark:after { border-color: #343434; }
.ji-list.ji-bg-semidark:after, .ji-grid.ji-bg-semidark:after { border-color: #676767; }
.ji-list.ji-bg-light:after, .ji-grid.ji-bg-light:after { border-color: #e6e6e6; }
.ji-list.ji-bg-semilight:after, .ji-grid.ji-bg-semilight:after { border-color: #999999; }
.ji-list.ji-bg-base:after, .ji-grid.ji-bg-base:after { border-color: #ff6600; }
.ji-list.ji-bg-baselight:after, .ji-grid.ji-bg-baselight:after { border-color: #ffcaa6; }
.ji-list.ji-bg-basedark:after, .ji-grid.ji-bg-basedark:after { border-color: #ca5100; }
/* bg-lock-unlock */
.ji-lock.ji-bg-dark:before, .ji-unlock.ji-bg-dark:before, .ji-instagram.ji-bg-dark:after { color: #343434; }
.ji-lock.ji-bg-semidark:before, .ji-unlock.ji-bg-semidark:before, .ji-instagram.ji-bg-semidark:after { color: #676767; }
.ji-lock.ji-bg-light:before, .ji-unlock.ji-bg-light:before, .ji-instagram.ji-bg-light:after { color: #e6e6e6; }
.ji-lock.ji-bg-semilight:before, .ji-unlock.ji-bg-semilight:before, .ji-instagram.ji-bg-semilight:after { color: #999999; }
.ji-lock.ji-bg-base:before, .ji-unlock.ji-bg-base:before, .ji-instagram.ji-bg-base:after { color: #ff6600; }
.ji-lock.ji-bg-baselight:before, .ji-unlock.ji-bg-baselight:before, .ji-instagram.ji-bg-baselight:after { color: #ffcaa6; }
.ji-lock.ji-bg-basedark:before, .ji-unlock.ji-bg-basedark:before, .ji-instagram.ji-bg-basedark:after { color: #ca5100; }
/* bg-social */
.ji-youtube.ji-bg-dark:after, .ji-player.ji-bg-dark:before { border-left-color: #343434; }
.ji-youtube.ji-bg-semidark:after, .ji-player.ji-bg-semidark:before { border-left-color: #676767; }
.ji-youtube.ji-bg-light:after, .ji-player.ji-bg-light:before { border-left-color: #e6e6e6; }
.ji-youtube.ji-bg-semilight:after, .ji-player.ji-bg-semilight:before { border-left-color: #999999; }
.ji-youtube.ji-bg-base:after, .ji-player.ji-bg-base:before { border-left-color: #ff6600; }
.ji-youtube.ji-bg-baselight:after, .ji-player.ji-bg-baselight:before { border-left-color: #ffcaa6; }
.ji-youtube.ji-bg-basedark:after, .ji-player.ji-bg-basedark:before { border-left-color: #ca5100; }
/* bg-image */
.ji-image.ji-bg-dark:before { color: #343434; border-bottom-color: #343434;}
.ji-image.ji-bg-semidark:before { color: #676767; border-bottom-color: #676767;}
.ji-image.ji-bg-light:before { color: #e6e6e6; border-bottom-color: #e6e6e6;}
.ji-image.ji-bg-semilight:before { color: #999999; border-bottom-color: #999999;}
.ji-image.ji-bg-base:before { color: #ff6600; border-bottom-color: #ff6600;}
.ji-image.ji-bg-baselight:before { color: #ffcaa6; border-bottom-color: #ffcaa6;}
.ji-image.ji-bg-basedark:before { color: #ca5100; border-bottom-color: #ca5100;}
/* bg-photo */
.ji-photo.ji-bg-dark:before { border-color: #343434;}
.ji-photo.ji-bg-dark:after { color: #343434;}
.ji-photo.ji-bg-semidark:before { border-color: #676767;}
.ji-photo.ji-bg-semidark:after { color: #676767;}
.ji-photo.ji-bg-light:before { border-color: #e6e6e6;}
.ji-photo.ji-bg-light:after { color: #e6e6e6;}
.ji-photo.ji-bg-semilight:before { border-color: #999999;}
.ji-photo.ji-bg-semilight:after { color: #999999;}
.ji-photo.ji-bg-base:before { border-color: #ff6600;}
.ji-photo.ji-bg-base:after { color: #ff6600;}
.ji-photo.ji-bg-baselight:before { border-color: #ffcaa6;}
.ji-photo.ji-bg-baselight:after { color: #ffcaa6;}
.ji-photo.ji-bg-basedark:before { border-color: #ca5100;}
.ji-photo.ji-bg-basedark:after { color: #ca5100;}
/* bg-micro */
.ji-micro.ji-bg-dark:after { border-right-color: #343434; border-left-color: #343434; }
.ji-micro.ji-bg-semidark:after { border-right-color: #676767; border-left-color: #676767; }
.ji-micro.ji-bg-light:after { border-right-color: #e6e6e6; border-left-color: #e6e6e6; }
.ji-micro.ji-bg-semilight:after { border-right-color: #999999; border-left-color: #999999; }
.ji-micro.ji-bg-base:after { border-right-color: #ff6600; border-left-color: #ff6600; }
.ji-micro.ji-bg-baselight:after { border-right-color: #ffcaa6; border-left-color: #ffcaa6; }
.ji-micro.ji-bg-basedark:after { border-right-color: #ca5100; border-left-color: #ca5100; }
/* bg-mute */
.ji-mute.ji-bg-dark:after { color: #343434; }
.ji-mute.ji-bg-semidark:after { color: #676767; }
.ji-mute.ji-bg-light:after { color: #e6e6e6; }
.ji-mute.ji-bg-semilight:after { color: #999999; }
.ji-mute.ji-bg-base:after { color: #ff6600; }
.ji-mute.ji-bg-baselight:after { color: #ffcaa6; }
.ji-mute.ji-bg-basedark:after { color: #ca5100; }
/* bg-clocks */
.ji-clockfilled.ji-bg-dark:after { border-color: #343434; }
.ji-clockfilled.ji-bg-semidark:after { border-color: #676767; }
.ji-clockfilled.ji-bg-light:after { border-color: #e6e6e6; }
.ji-clockfilled.ji-bg-semilight:after { border-color: #999999; }
.ji-clockfilled.ji-bg-base:after { border-color: #ff6600; }
.ji-clockfilled.ji-bg-baselight:after { border-color: #ffcaa6; }
.ji-clockfilled.ji-bg-basedark:after { border-color: #ca5100; }
/* bg-devices */
.ji-mp3.ji-bg-dark:after { border-color: #343434; }
.ji-mp3.ji-bg-semidark:after { border-color: #676767; }
.ji-mp3.ji-bg-light:after { border-color: #e6e6e6; }
.ji-mp3.ji-bg-semilight:after { border-color: #999999; }
.ji-mp3.ji-bg-base:after { border-color: #ff6600; }
.ji-mp3.ji-bg-baselight:after { border-color: #ffcaa6; }
.ji-mp3.ji-bg-basedark:after { border-color: #ca5100; }
/* bg-info */
.ji-infocircled.ji-bg-dark:after, i.ji-warningcircled.ji-bg-dark:after, i.ji-successcircled.ji-bg-dark:after, i.ji-errorcircled.ji-bg-dark:after { border-color: #343434; color: #343434; }
.ji-infocircled.ji-bg-semidark:after, i.ji-warningcircled.ji-bg-semidark:after, i.ji-successcircled.ji-bg-semidark:after, i.ji-errorcircled.ji-bg-semidark:after { border-color: #676767; color: #676767; }
.ji-infocircled.ji-bg-light:after, i.ji-warningcircled.ji-bg-light:after, i.ji-successcircled.ji-bg-light:after, i.ji-errorcircled.ji-bg-light:after { border-color: #e6e6e6; color: #e6e6e6; }
.ji-infocircled.ji-bg-semilight:after, i.ji-warningcircled.ji-bg-semilight:after, i.ji-successcircled.ji-bg-semilight:after, i.ji-errorcircled.ji-bg-semilight:after { border-color: #999999; color: #999999; }
.ji-infocircled.ji-bg-base:after, i.ji-warningcircled.ji-bg-base:after, i.ji-successcircled.ji-bg-base:after, i.ji-errorcircled.ji-bg-base:after { border-color: #ff6600; color: #ff6600; }
.ji-infocircled.ji-bg-baselight:after, i.ji-warningcircled.ji-bg-baselight:after, i.ji-successcircled.ji-bg-baselight:after, i.ji-errorcircled.ji-bg-baselight:after { border-color: #ffcaa6; color: #ffcaa6; }
.ji-infocircled.ji-bg-basedark:after, i.ji-warningcircled.ji-bg-basedark:after, i.ji-successcircled.ji-bg-basedark:after, i.ji-errorcircled.ji-bg-basedark:after { border-color: #ca5100; color: #ca5100; }
/* bg-files */
.ji-file.ji-bg-dark:after, .ji-filetext.ji-bg-dark:after , .ji-filedouble.ji-bg-dark:after { box-shadow: 0.0625em 0.0625em 0 0 #343434; }
.ji-file.ji-bg-semidark:after, .ji-filetext.ji-bg-semidark:after, .ji-filedouble.ji-bg-semidark:after { box-shadow: 0.0625em 0.0625em 0 0 #676767; }
.ji-file.ji-bg-light:after, .ji-filetext.ji-bg-light:after , .ji-filedouble.ji-bg-light:after { box-shadow: 0.0625em 0.0625em 0 0 #e6e6e6; }
.ji-file.ji-bg-semilight:after, .ji-filetext.ji-bg-semilight:after , .ji-filedouble.ji-bg-semilight:after { box-shadow: 0.0625em 0.0625em 0 0 #999999; }
.ji-file.ji-bg-base:after, .ji-filetext.ji-bg-base:after , .ji-filedouble.ji-bg-base:after { box-shadow: 0.0625em 0.0625em 0 0 #ff6600; }
.ji-file.ji-bg-baselight:after, .ji-filetext.ji-bg-baselight:after , .ji-filedouble.ji-bg-baselight:after { box-shadow: 0.0625em 0.0625em 0 0 #ffcaa6; }
.ji-file.ji-bg-basedark:after, .ji-filetext.ji-bg-basedark:after , .ji-filedouble.ji-bg-basedark:after { box-shadow: 0.0625em 0.0625em 0 0 #ca5100; }

.ji-filenew.ji-bg-dark:before, .ji-foldernew.ji-bg-dark:after { color: #343434; }
.ji-filenew.ji-bg-semidark:before, .ji-foldernew.ji-bg-semidark:after { color: #676767; }
.ji-filenew.ji-bg-light:before, .ji-foldernew.ji-bg-light:after { color: #e6e6e6; }
.ji-filenew.ji-bg-semilight:before, .ji-foldernew.ji-bg-semilight:after { color: #999999; }
.ji-filenew.ji-bg-base:before, .ji-foldernew.ji-bg-base:after { color: #ff6600; }
.ji-filenew.ji-bg-baselight:before, .ji-foldernew.ji-bg-baselight:after { color: #ffcaa6; }
.ji-filenew.ji-bg-basedark:before, .ji-foldernew.ji-bg-basedark:after { color: #ca5100; }

.ji-filedouble.ji-bg-dark:before, .ji-folderopen.ji-bg-dark:after { border-color: #343434; }
.ji-filedouble.ji-bg-semidark:before, .ji-folderopen.ji-bg-semidark:after { border-color: #676767; }
.ji-filedouble.ji-bg-light:before, .ji-folderopen.ji-bg-light:after { border-color: #e6e6e6; }
.ji-filedouble.ji-bg-semilight:before, .ji-folderopen.ji-bg-semilight:after { border-color: #999999; }
.ji-filedouble.ji-bg-base:before, .ji-folderopen.ji-bg-base:after { border-color: #ff6600; }
.ji-filedouble.ji-bg-baselight:before, .ji-folderopen.ji-bg-baselight:after { border-color: #ffcaa6; }
.ji-filedouble.ji-bg-basedark:before, .ji-folderopen.ji-bg-basedark:after { border-color: #ca5100; }





/* colors */
.ji-cl-gray { filter: grayscale(100%) opacity(40%); }
.ji-cl-base { filter: hue-rotate(0deg); }
.ji-cl-brown { filter: hue-rotate(30deg); }
.ji-cl-olive { filter: hue-rotate(50deg); }
.ji-cl-green { filter: hue-rotate(100deg); }
.ji-cl-bluegreen { filter: hue-rotate(140deg); }
.ji-cl-bluegray { filter: hue-rotate(160deg); }
.ji-cl-blue { filter: hue-rotate(200deg); }
.ji-cl-purple { filter: hue-rotate(230deg); }
.ji-cl-violet { filter: hue-rotate(250deg); }
.ji-cl-pink { filter: hue-rotate(290deg); }
.ji-cl-red { filter: hue-rotate(330deg); }
.ji-cl-white:before, .ji-cl-white:after { filter: grayscale(100%) brightness(200%); }


/* size */
.ji-sz-xxs { font-size: 0.5em !important; }
.ji-sz-xs { font-size: 0.75em !important; }
.ji-sz-2 { font-size: 2em !important; }
.ji-sz-3 { font-size: 3em !important; }
.ji-sz-4 { font-size: 4em !important; }
.ji-sz-5 { font-size: 5em !important; }

/***** Options Icons Styles - END *****/
	
/****************************** ICONS - END ******************************/



/************ ICONS STYLES END *************/
            
          
!
            
              /*
Los iconos no necesitan javascript.
El siguiente codigo solo se usa para aplicar las opciones a los iconos en esta demo (incluye jquery).
*/
$(function() {	

	/*copy class*/
	$( ".ji-name" ).each(function() {
	 $(this).click(function() {
	  var x = $(this).text();
	  console.log(x);
	  $('input#hidden-copy-field').val(x);
	  $('input#hidden-copy-field').select();
	  document.execCommand("copy");
	  $("#copied-text code").text(x);
	  $("#copied-text").show().fadeOut(2000);
	 });
	});
	
	/*options*/
	$( ".cat-menu-icons ul li a" ).each(function(e) {
		$(this).click(function(e) {
			if($(this).hasClass('hidden-filter')!=true){
				e.preventDefault();
			}
			var x = $(this).attr('id');
			if(x=="all-icons"){
				e.preventDefault();
				$( "#iconos .cat-menu-icons ul li a" ).removeClass('hidden-filter');
				$( "#iconos .icon-list, .list-header" ).slideDown('slow');
			} else if(x=="none-icons"){
				e.preventDefault();
				$( "#iconos .cat-menu-icons ul li a" ).addClass('hidden-filter');
				$( "#iconos .icon-list, .list-header" ).slideUp('slow');
			} else {
				$(this).toggleClass('hidden-filter');
				$("#iconos ."+x+"").slideToggle( "slow" );
				$("#iconos ."+x+" > .list-header").slideToggle( "slow" );
				return true;	
			}
		});
	});		
	
	/*filters*/
	$(".options-filter-opener").click(function() {
		$(this).toggleClass('hidden');
		$('#iconos').toggleClass('hidden');
		$('.options-filters').slideToggle('slow');
	});
	
	/*size*/
	$(".option-sz ul li").click(function() {
		$(".option-sz ul li").removeClass('selectedSize');
		$(this).addClass('selectedSize');
		$('#iconos i').removeClass(function (index, className) {
			return (className.match (/(^|\s)ji-sz-\S+/g) || []).join(' ');
		});
		$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
	});
	
	/*background*/
	$(".option-bg ul li").click(function() {
		$('#iconos i').removeClass(function (index, className) {
			return (className.match (/(^|\s)ji-bg-\S+/g) || []).join(' ');
		});
		if($(this).attr('id')){
			$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
			if($(this).attr('id')=="opt-bg-base")$('#iconos i').addClass('ji-cl-white');
		}
	});
	
	/*border*/
	$(".option-bd ul li").click(function() {
		$('#iconos i').removeClass(function (index, className) {
			return (className.match (/(^|\s)ji-bd-\S+/g) || []).join(' ');
		});
		if($(this).attr('id')){
			$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
			//if($(this).attr('id')=="opt-bg-base")$('#iconos i').addClass('ji-cl-white');
		}
	});
	
	/*rounded*/
	$(".option-rd ul li").click(function() {
		$('#iconos i').removeClass(function (index, className) {
			return (className.match (/(^|\s)ji-rd-\S+/g) || []).join(' ');
		});
		if($(this).attr('id')){
			$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
			//if($(this).attr('id')=="opt-bg-base")$('#iconos i').addClass('ji-cl-white');
		}
	});
	
	/*color*/
	$(".option-cl ul li").click(function() {
		$('#iconos i').removeClass(function (index, className) {
			return (className.match (/(^|\s)ji-cl-\S+/g) || []).join(' ');
		});
		if($(this).attr('id')){
			$('#iconos i').addClass($(this).attr('id').replace('opt-','ji-'));
			$('#iconos i').removeClass('ji-bg-base');
			if($(this).attr('id')=="opt-cl-white"){
				var x = $('#iconos i').eq(0).attr('class');
				if(x.indexOf('ji-bg-')==-1){
					$('#iconos i').addClass('ji-bg-base');
				}
			}
		} else {
			$('#iconos i').removeClass('ji-bg-base');
		}
	});
	
	/*scroll*/
	$(window).scroll(function(){
		if($(this).scrollTop()>65){
			$('.options-filters, .options-filter-opener').addClass('fixed');
			$('#iconos').addClass('xtra-space');
		} else {
			$('.options-filters, .options-filter-opener').removeClass('fixed');
			$('#iconos').removeClass('xtra-space');
		}
	});

});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console