/******* <span> to display an image, e.g. a png file as an icon/font - used in WalaTehtar-EG-Mobile website *******/
/* icons in a <span> */
.icon-help-4 {
  background: url('./iconmonstr-help-2-icon-16-0-50534d.png') no-repeat;
  padding: 0 0.25em 0 1em;
  margin: 0;
  /* This variable is defined in _settings.scss */
  display: inline;
  text-decoration: none;
  /* no underline */
  position: relative; }

.icon-help-4:hover {
  background: url('./iconmonstr-help-5-icon-16-0-0f642c.png') no-repeat; }

.icon-help-4-d {
  background: url('./iconmonstr-help-2-icon-16-0-50534d.png') no-repeat;
  padding: 0 0.2rem 0.33333rem 1rem;
  margin: 0;
  display: inline;
  text-decoration: none;
  position: relative; }

.icon-help-4-d:hover {
  background: url('./iconmonstr-help-5-icon-16-0-0f642c.png') no-repeat; }

.icon-gear {
  background: url('./iconmonstr-gear-10-icon-16-0-000000.png') no-repeat;
  padding: 0 0.2rem 0 1rem;
  margin: 0;
  display: inline;
  text-decoration: none;
  position: relative; }

.icon-help-5 {
  background: url('./iconmonstr-help-5-icon-16-0-6e6e6e.png') no-repeat;
  padding: 0 0.2rem 0.33333rem 1rem;
  margin: 0;
  display: inline;
  text-decoration: none;
  /* no underline */ }

.icon-help-5:hover {
  background: url('./iconmonstr-cursor-help-icon-16-0-0f642c.png') no-repeat; }

/* The following 2 are defined in _custom_styles.scss
.li-icon {
    list-style-type:none;
    margin-left: 0px;
}

.li-icon li {
	padding-left: $paragraph-font-size * 2; // This variable is defined in _settings.scss
	display: block;
	color: yellow;
}
*/


/* The margin between the list's icon and the list's text: -- Not Used*/
.step {
  display: inline-block;
  line-height: 1;
  width: 7%;
}

/******* lists with custom bullets - using images as bullets - used in Skills website *******/
/* The following 2 classes (car-li) provides an icon of a car as a list xxx */
ul.tile-li {
    list-style-type:none;
    margin-left: 0px;
}
/* ul.tile-li li {
	background: url('./iconmonstr-cube-10-icon-24.png') no-repeat left ; // $paragraph-font-size; This variable is defined in _settings.scss
	padding: $paragraph-font-size * 2; // This variable is defined in _settings.scss
	display: block;
} */





/******* lists with custom bullets - using glyph icons - used in Atai website *******/
@font-face {
  font-family: "foundation-icons";
  src: url("../icon/foundation-icons.eot");
  src: url("../icon/foundation-icons.eot?#iefix") format("embedded-opentype")
		, url("../icon/foundation-icons.woff") format("woff")
		, url("../icon/foundation-icons.ttf") format("truetype")
		, url("../icon/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal; }

.fi-thumbnails:before, .fi-arrow-right:before {
  font-family: "foundation-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  color: blue;
  font-size: 1.25em; }

.fi-thumbnails:before {
  content: "\f1fa"; }

.fi-arrow-right:before {
  content: "\f10b"; }