/* ------------------------------------------------------------------ */
/* d. Resume Section
/* ------------------------------------------------------------------ */

#resume {
   background: #fff;
   padding-top: 120px;
   padding-bottom: 72px;
   overflow: hidden;
}

#resume a, #resume a:visited  { color: #11ABB0; }
#resume a:hover, #resume a:focus { color: #313131; }

#resume h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
}
#resume h1 span {
   border-bottom: 3px solid #11ABB0;
   padding-bottom: 6px;
}
#resume h3 {
   font: 25px/30px 'opensans-bold', sans-serif;
}

#resume .header-col { padding-top: 9px; }
#resume .main-col { padding-right: 10%; }

.education, .work {
   margin-bottom: 48px;
   padding-bottom: 24px;
   border-bottom: 1px solid #E8E8E8;
}
#resume .info {
   font: 16px/24px 'librebaskerville-italic', serif;
   color: #6E7881;
   margin-bottom: 18px;
   margin-top: 9px;
}
#resume .info span {
   margin-right: 5px;
   margin-left: 5px;
}

#resume .grade {
   font: 16px/24px 'opensans-regular', sans-serif;
   color: #6E7881;
   margin-bottom: 18px;
   margin-top: 9px;
}
#resume .grade span {
   margin-right: 5px;
   margin-left: 5px;
}

#resume .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}
#resume .date:before {
   font-family: 'Font Awesome 5 Solid';
   content: "\f073";
}

#resume .location {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}
#resume .location:before {
   font-family: 'Font Awesome 5 Solid';
   content: "\f3c5";
}

/*----------------------------------------------*/
/*	Skill Bars
/*----------------------------------------------*/

.non-bars {
	width: 95%;
	float: left;
	padding: 0;
	text-align: left;
}
.non-bars .skills {
  	margin-top: 36px;
   list-style: none;
}
.non-bars li {
    position: relative;
  	margin-bottom: 0px;
}
.non-bars li em {
	font: 15px 'opensans-bold', sans-serif;
   color: #313131;
	text-transform: uppercase;
   letter-spacing: 2px;
	font-weight: normal;
   position: relative;
	top: -36px;
}

.bars {
	width: 95%;
	float: left;
	padding: 0;
	text-align: left;
}
.bars .skills {
  	margin-top: 36px;
   list-style: none;
}
.bars li {
   position: relative;
  	margin-bottom: 60px;
  	background: #ccc;
  	height: 32px;
  	border-radius: 3px;
}
.bars li em {
	font: 15px 'opensans-bold', sans-serif;
   color: #313131;
	text-transform: uppercase;
   letter-spacing: 2px;
	font-weight: normal;
   position: relative;
	top: -36px;
}
.bar-expand {
   position: absolute;
   left: 0;
   top: 0;

   margin: 0;
   padding-right: 24px;
  	background: #313131;
   display: inline-block;
  	height: 32px;
   line-height: 42px;
   border-radius: 3px 0 0 3px;
}

/* ------------------------------------------------------------------ */
/* e. Programming Languages Section
/* ------------------------------------------------------------------ */

.hundred-per-cent {
  	width: 100%;
  	-moz-animation: hundred-per-cent 2s ease;
  	-webkit-animation: hundred-per-cent 2s ease;
}
@-moz-keyframes hundred-per-cent {
  0%   { width: 0px;  }
  100% { width: 100%;  }
}
@-webkit-keyframes hundred-per-cent {
  0%   { width: 0px;  }
  100% { width: 100%;  }
}

.ninetynine-per-cent {
   width: 99%;
   -moz-animation: hundred-per-cent 2s ease;
   -webkit-animation: hundred-per-cent 2s ease;
}
@-moz-keyframes hundred-per-cent {
0%   { width: 0px;  }
100% { width: 99%;  }
}
@-webkit-keyframes hundred-per-cent {
0%   { width: 0px;  }
100% { width: 99%;  }
}

.ninety-per-cent {
  	width: 90%;
  	-moz-animation: ninety-per-cent 2s ease;
  	-webkit-animation: ninety-per-cent 2s ease;
}
@-moz-keyframes ninety-per-cent {
  0%   { width: 0px;  }
  100% { width: 90%;  }
}
@-webkit-keyframes ninety-per-cent {
  0%   { width: 0px;  }
  100% { width: 90%;  }
}

.eighty-per-cent {
  	width: 80%;
  	-moz-animation: eighty-per-cent 2s ease;
  	-webkit-animation: eighty-per-cent 2s ease;
}
@-moz-keyframes eighty-per-cent {
  0%   { width: 0px;  }
  100% { width: 80%;  }
}
@-webkit-keyframes eighty-per-cent {
  0%   { width: 0px;  }
  100% { width: 80%;  }
}

.seventy-per-cent {
  	width: 70%;
  	-moz-animation: seventy-per-cent 2s ease;
  	-webkit-animation: seventy-per-cent 2s ease;
}
@-moz-keyframes seventy-per-cent {
  0%   { width: 0px;  }
  100% { width: 70%;  }
}
@-webkit-keyframes seventy-per-cent {
  0%   { width: 0px;  }
  100% { width: 70%;  }
}

.sixty-per-cent {
  	width: 60%;
  	-moz-animation: sixty-per-cent 2s ease;
  	-webkit-animation: sixty-per-cent 2s ease;
}
@-moz-keyframes sixty-per-cent {
  0%   { width: 0px;  }
  100% { width: 60%;  }
}
@-webkit-keyframes sixty-per-cent {
  0%   { width: 0px;  }
  100% { width: 60%;  }
}

.fifty-per-cent {
  	width: 50%;
  	-moz-animation: fifty-per-cent 2s ease;
  	-webkit-animation: fifty-per-cent 2s ease;
}
@-moz-keyframes fifty-per-cent {
  0%   { width: 0px;  }
  100% { width: 50%;  }
}
@-webkit-keyframes fifty-per-cent {
  0%   { width: 0px;  }
  100% { width: 50%;  }
}

.fourty-per-cent {
  	width: 40%;
  	-moz-animation: fourty-per-cent 2s ease;
  	-webkit-animation: fourty-per-cent 2s ease;
}
@-moz-keyframes fourty-per-cent {
  0%   { width: 0px;  }
  100% { width: 40%;  }
}
@-webkit-keyframes fourty-per-cent {
  0%   { width: 0px;  }
  100% { width: 40%;  }
}

.thirty-per-cent {
  	width: 30%;
  	-moz-animation: thirty-per-cent 2s ease;
  	-webkit-animation: thirty-per-cent 2s ease;
}
@-moz-keyframes thirty-per-cent {
  0%   { width: 0px;  }
  100% { width: 30%;  }
}
@-webkit-keyframes thirty-per-cent {
  0%   { width: 0px;  }
  100% { width: 30%;  }
}

.twenty-per-cent {
  	width: 20%;
  	-moz-animation: twenty-per-cent 2s ease;
  	-webkit-animation: twenty-per-cent 2s ease;
}
@-moz-keyframes twenty-per-cent {
  0%   { width: 0px;  }
  100% { width: 20%;  }
}
@-webkit-keyframes twenty-per-cent {
  0%   { width: 0px;  }
  100% { width: 20%;  }
}

.ten-per-cent {
  	width: 10%;
  	-moz-animation: ten-per-cent 2s ease;
  	-webkit-animation: ten-per-cent 2s ease;
}
@-moz-keyframes ten-per-cent {
  0%   { width: 0px;  }
  100% { width: 10%;  }
}
@-webkit-keyframes ten-per-cent {
  0%   { width: 0px;  }
  100% { width: 10%;  }
}