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

#resume {
   padding-top: 90px;
   padding-bottom: 72px;
   overflow: hidden;
}

#resume a, #resume a:visited  { color: #fb5353; }
#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 #fb5353;
   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 #cccccc;
}
#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 .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}

#resume p {
   line-height: 30px;
   color: #7A7A7A;
	font: 14px/30px 'opensans-regular', sans-serif;
}

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

.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: 42px;
  	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: 42px;
   line-height: 42px;
   border-radius: 3px 0 0 3px;
}

.photoshop {
  	width: 99%;
  	-moz-animation: photoshop 2s ease;
  	-webkit-animation: photoshop 2s ease;
}
.illustrator {
  	width: 65%;
  	-moz-animation: illustrator 2s ease;
  	-webkit-animation: illustrator 2s ease;
}
.wordpress {
  	width: 85%;
  	-moz-animation: wordpress 2s ease;
  	-webkit-animation: wordpress 2s ease;
}
.css {
  	width: 90%;
  	-moz-animation: css 2s ease;
  	-webkit-animation: css 2s ease;
}
.html5 {
  	width: 90%;
  	-moz-animation: html5 2s ease;
  	-webkit-animation: html5 2s ease;
}
.jquery {
  	width: 50%;
  	-moz-animation: jquery 2s ease;
  	-webkit-animation: jquery 2s ease;
}
.balsamiq {
  	width: 97%;
  	-moz-animation: jquery 2s ease;
  	-webkit-animation: jquery 2s ease;
}

@-moz-keyframes photoshop {
  0%   { width: 0px;  }
  100% { width: 99%;  }
}
@-moz-keyframes illustrator {
  0%   { width: 0px;  }
  100% { width: 65%;  }
}
@-moz-keyframes wordpress {
  0%   { width: 0px;  }
  100% { width: 50%;  }
}
@-moz-keyframes css {
  0%   { width: 0px;  }
  100% { width: 90%;  }
}
@-moz-keyframes html5 {
  0%   { width: 0px;  }
  100% { width: 90%;  }
}
@-moz-keyframes jquery {
  0%   { width: 0px;  }
  100% { width: 50%;  }
}
@-moz-keyframes balsamiq {
  0%   { width: 0px;  }
  100% { width: 97%;  }
}

@-webkit-keyframes photoshop {
  0%   { width: 0px;  }
  100% { width: 99%;  }
}
@-webkit-keyframes illustrator {
  0%   { width: 0px;  }
  100% { width: 65%;  }
}
@-webkit-keyframes wordpress {
  0%   { width: 0px;  }
  100% { width: 50%;  }
}
@-webkit-keyframes css {
  0%   { width: 0px;  }
  100% { width: 90%;  }
}
@-webkit-keyframes html5 {
  0%   { width: 0px;  }
  100% { width: 90%;  }
}
@-webkit-keyframes jquery {
  0%   { width: 0px;  }
  100% { width: 50%;  }
}
@-webkit-keyframes balsamiq {
  0%   { width: 0px;  }
  100% { width: 97%;  }
}