:root {
  /** --------------- FONTS --------------- **/
  --font-light: #a2abb7; /* default [ #a2abb7 ] */
  --font-dark:  #2c3e50; /* default [ #2c3e50 ] */
  --font-blue:  #8b93ad; /* default [ #9ba4c1 ] */
  
  /* gray */
  --gray-lighter: #f2f2f2;
  --gray-light: 	#ccc;
  --gray-dark: 	  #333;
  
  /* red */
  --red-light: #FF6666; /* error border [ #FF6666 ] */
  --red-dark:  #9F0000; /* error text [ #FF6666 ] */
  
  /* green */
  --green-light:	#5cb68c;
  --green-dark: 	rgba(0,150,0,0.6);
  
  /* blue */
  --blue-light: 	#0099FF; /* Links [ #0099FF ] */
  
  /** --------------- BACKROUNDS --------------- **/
  --bg-main: #bbb; /* main Backround [ #bbb ] */
  
  /* dark - Backrounds */
  --bg-light-blue: #293743;
  --bg-dark-blue: #48525e;
  
  /* light - Backrounds */
  --bg-light: 	rgba(255,255,255,0.5);
  --bg-lighter: rgba(170,170,170,0.7);
  
}

/** --------------- ICONS FONT --------------- **/
@font-face {
  font-family: 'icons';
  src:  url('../fonts/icons.eot?8mog2c');
  src:  url('../fonts/icons.eot?8mog2c#iefix') format('embedded-opentype'),
    url('../fonts/icons.ttf?8mog2c') format('truetype'),
    url('../fonts/icons.woff?8mog2c') format('woff'),
    url('../fonts/icons.svg?8mog2c#icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-code:before {
  content: "\e900";
}
.icon-email:before {
  content: "\e904";
}
.icon-write:before {
  content: "\e901";
}
.icon-person:before {
  content: "\e902";
}
.icon-at:before {
  content: "\e905";
}
.icon-bug:before {
  content: "\e999";
}
.icon-lab:before {
  content: "\e9aa";
}
.icon-smile:before {
  content: "\e9e1";
}
.icon-grin:before {
  content: "\e9e9";
}
.icon-info:before {
  content: "\ea0c";
}
.icon-facebook:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-github:before {
  content: "\eab0";
}
.icon-linkedin:before {
  content: "\eaca";
}
.icon-xing:before {
  content: "\ead4";
}
.icon-codepen:before {
  content: "\eae8";
}
.icon-up:before {
  content: "\e907";
}