body {
   background-color: #f2f2f2;
   font-family: "Lato";
   font-weight: 300;
   font-size: 16px;
   color: rgb(5, 0, 0);
   -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;
   overflow: visible;
 }

 /* Titles */

 h1, h2, h3, h4, h5, h6 {
   font-family: "Raleway";
   font-weight: 900;
   color: #2c3e50;
   font-size: 18px;
 }

 /* Paragraph & Typographic */

 p {
   line-height: 28px;
   margin-bottom: 25px;
   text-align: justify;
 }

 .centered {
   text-align: center;
 }

 /* Links */

 a {
   word-wrap: break-word;
   -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
   -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
   -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
   -o-transition: color 0.1s ease-in, background 0.1s ease-in;
   transition: color 0.1s ease-in, background 0.1s ease-in;
 }

 a:hover, a:focus {
   color: #7b7b7b;
   text-decoration: none;
   outline: 0;
 }

 a:before, a:after {
   -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
   -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
   -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
   -o-transition: color 0.1s ease-in, background 0.1s ease-in;
   transition: color 0.1s ease-in, background 0.1s ease-in;
 }

 hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;
 }

 /*---------------------------------------------------
	3.1 Topbar
---------------------------------------------------*/

 #section-topbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 10000;
   overflow: visible;
   font: normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

 #topbar-inner {
   background: #111;
   line-height: 0;
   text-align: center;
   padding-bottom: 20px;
   padding-top: 20px;
 }

 /*
	Top Bar

	By default, top navigation bar uses "fixed" position
*/

 #section-topbar ul#nav {
   display: inline-block;
   position: relative;
   margin: 0;
   padding: 0;
   border-right: 1px solid #222;
   /* For IE, the outcast */
   zoom: 1;
   *display: inline;
 }

 #section-topbar ul#nav>li {
   display: block;
   float: left;
   padding: 0;
 }

 #section-topbar ul#nav a {
   /* display: block; */
   font-family: Raleway;
   text-decoration: none;
   font-size: 25px;
   font-weight: 100;
   padding: 18px 20px 18px 20px;
   border-left: 1px solid #222;
   color: #fff;
   background: none;
 }

 #section-topbar ul#nav a:hover {
   background: none;
   text-decoration: none;
   border-left: 1px solid #111;
 }

 #section-topbar ul#nav .active a {
  font-style: bold;
   border-left: 1px solid #111;
 }

 /*---------------------------------------------------
	SECTION WRAPS
---------------------------------------------------*/

 /* Header Wrap */

 #headerwrap {
   background: url(../img/header-bg.jpg) no-repeat center top;
   margin-top: 60px;
   padding-top: 140px;
   text-align: center;
   background-position: center center;
   min-height: auto;
   width: 100%;
   -webkit-background-size: 100%;
   -moz-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
 }

 #headerwrap h1 {
   font-size: 80px;
   color: white;
   font-weight: normal;
 }

 #headerwrap h2 {
   font-size: 35px;
   color: white;
   font-weight: normal;
 }

 #headerwrap h3 {
   font-size: 20px;
   color: white;
   font-weight: normal;
 }

 /* Intnro Wrap */

 #intro {
   background: #2c3e50;
   padding-top: 60px;
   padding-bottom: 60px;
   color: white;
 }

 #intro h5, p {
   color: white;
 }

 #intro i {
   color: white;
   font-size: 20px;
   padding-left: 50px;
   vertical-align: middle;
 }

 #skillswrap {
   background: #2c3e50;
   padding-top: 60px;
   padding-bottom: 60px;
   color: white;
 }

 #skillswrap h5, p {
   color: white;
 }

 #footwrap {
   background: #2f2f2f;
   padding-top: 20px;
   padding-bottom: 20%;
 }

 #footwrap p {
   color: white;
   font-weight: normal;
 }

 #footwrap h5 {
   color: white;
   font-weight: bold;
   font-size: 18px;
 }

 #footwrap t {
   font-weight: bold;
   font-size: 16px;
 }

 /* Global Values */

 .desc {
   padding-top: 100px;
 }

 .desc p {
   color: #000000;
   font-weight: normal;
 }

 .desc t {
   color: #34495e;
   font-weight: 700;
   font-size: 17px;
 }

 .desc imp {
   padding: 6px;
   color: white;
   background: #34495e;
 }

 .desc more {
   color: #000000;
 }

 sm {
   font-size: 14px;
   font-weight: normal;
 }

 /* Pie Chart */

 .pie-chart .designer {
   float: left;
   margin-bottom: 0;
   text-align: left;
   width: 25%;
   padding-left: 60px;
 }

 .pie-chart .developer {
   float: left;
   margin-bottom: 0;
   text-align: left;
   width: 25%
 }

 .pie-chart .img{
   float: left;
   width: 50%;
   text-align: center;
 }

 .pie-chart img {
   width: auto;
   vertical-align: middle
 }

 .pie-chart ul{
   padding-left: 0px;
 }

 .pie-chart ul li {
   display: block;
   font-size: 17px;
   color: #000000;
   font-weight: normal;
 }

 /* Skill matrix */

 #abilities ul>li {
   min-height: 30px;
   padding: 3px 0px;
 }

 #abilities ul>li:hover {
   background: #F2F2F2;
 }

 #abilities ul>li .ability-title {
   display: inline-block;
   width: 60%;
 }

 #abilities ul>li .ability-score {
   float: right;
 }

 #abilities ul>li .ability-score .glyphicon {
   color: #DFE0E0;
   font-size: 14px;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
 }

 #abilities ul>li .ability-score .glyphicon.filled {
   color: #3479bf;
 }

 #abilities ul>li:hover .ability-score .glyphicon {
   margin-left: 2px;
 }