/*********** 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 *************/