<div class="container">
  <div id="resume-container" class="clearfix">
						<!-- start of resume-->
						<header class="header">
							<div class="row">
								<div class="col-md-4">
									<img class="resume-portfolio-pic" src="http://placehold.it/200x200">
								</div>
								<div class="col-md-8">
									<div class="resume-name">
										<h1>First Last Name</h1>
										<span>Position / Title</span>
									</div>
								</div>
							</div>
							<div class="row">
								<div class=" contact-info">
									<div class="col-md-4 location">
										<address>
											<i class="fa fa-map-marker"></i> Location, State
										</address>
									</div>
									<div class="col-md-4 email">
										<i class="fa fa-paper-plane"></i>
										<a href="mailto:[email]?subject=Mail from Jims Resume">email@example.com</a>
									</div>
									<div class="col-md-4 phone">
										<i class="fa fa-phone"></i>
										<a href="tel:555-555-5555">(555)555-5555</a>
									</div>
								</div>
							</div>
						</header>
						
						<section id="summary">
							 
							
							<div class="row">
								<div class="summary">
									<div class="col-md-4 summary-box">
										<h2>Summary</h2>
										<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit.
										</p>
									</div>
									<div class="col-md-4 skills">
											
											<h2>Skills</h2>
											<!-- 1 -->
											<div class="progress-bar-holder row">
												<div class="col-md-6 col-sm-6">
													<p class="skill-text">UI/UX</p>
												</div>
												<div class="col-md-6 col-sm-6">
													<div class="progress">
													  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">80%</div>  
													</div>
												</div>
											</div>
											<!-- 2 -->
											<div class="progress-bar-holder row">
												<div class="col-md-6 col-sm-6">
													<p class="skill-text">Wordpress</p>
												</div>
												<div class="col-md-6 col-sm-6">
													<div class="progress">
													  <div class="progress-bar" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%;">92%</div>  
													</div>
												</div>
											</div>
											<!-- 3 -->
											<div class="progress-bar-holder row">
												<div class="col-md-6 col-sm-6">
													<p class="skill-text">HTML/CSS</p>
												</div>
												<div class="col-md-6 col-sm-6">
													<div class="progress">
													  <div class="progress-bar" role="progressbar" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100" style="width: 99%;">99%</div>  
													</div>
												</div>
											</div>
											<!-- 4 -->
											<div class="progress-bar-holder row">
												<div class="col-md-6 col-sm-6">
													<p class="skill-text">Dev Ops</p>
												</div>
												<div class="col-md-6 col-sm-6">
													<div class="progress">
													  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>  
													</div>
												</div>
											</div>
											<!-- 5 -->
											<div class="progress-bar-holder row">
												<div class="col-md-6 col-sm-6">
													<p class="skill-text">Sys Admin</p>
												</div>
												<div class="col-md-6 col-sm-6">
													<div class="progress">
													  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">80%</div>  
													</div>
												</div>
											</div>
											<!-- 6 -->
											<div class="progress-bar-holder row">
												<div class="col-md-6 col-sm-6">
													<p class="skill-text">Javascript</p>
												</div>
												<div class="col-md-6 col-sm-6">
													<div class="progress">
													  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>  
													</div>
												</div>
											</div>
											<!-- 7 -->
											<div class="progress-bar-holder row">
												<div class="col-md-6 col-sm-6">
													<p class="skill-text">Laravel / Meteor / Angular</p>
												</div>
												<div class="col-md-6 col-sm-6">
													<div class="progress">
													  <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">30%</div>  
													</div>
												</div>
											</div>
									</div>
									<div class="col-md-4 specializations">
										<h2>Specializations</h2>
										<ul>
                      <li>Specialization 1</li>
                      <li>Specialization 2</li>
                      <li>Specialization 3</li>
                      <li>Specialization 4</li>
                      <li>Specialization 5</li>
                      <li>Specialization 6</li>
                      <li>Specialization 7</li>
                      <li>Specialization 8</li>
                      <li>Specialization 9</li>
                      <li>Specialization 10</li>
                      <li>Specialization 11</li>
                      <li>Specialization 12</li>
                      <li>Specialization 13</li>
                      <li>Specialization 14</li>                     
									</div>
								</div>
							</div>
							<hr>
						</section>
						
						
						
						
						<section id="experience">
						
						
						
						
							<div class="">
								<h2>Work Experience</h2>
								<!-- current -->
								<div class="past-employer row">
									<div class="col-md-2">
										
										<img class="employer-img" src="http://placehold.it/100x30">
									</div>
									<div class="col-md-3 ">
										<h3 class="business-name">Business Name</h3>
										<i>Start Date - End Date </i><br>
										<span>Location, State</span>
									</div>
									<div class="col-md-7 ">
										<h4 class="position">Title / Position</h4>
										<p class="short-description">Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
									</div>
								</div>
								
								
<!-- 1 -->
								<div class="past-employer row">
									<div class="col-md-2">
										
										<img class="employer-img" src="http://placehold.it/100x30">
									</div>
									<div class="col-md-3 ">
										<h3 class="business-name">Business Name</h3>
										<i>Start Date - End Date </i><br>
										<span>Location, State</span>
									</div>
									<div class="col-md-7 ">
										<h4 class="position">Title / Position</h4>
										<p class="short-description">Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
									</div>
								</div>
             
<!-- 2 -->
								<div class="past-employer row">
									<div class="col-md-2">
										
										<img class="employer-img" src="http://placehold.it/100x30">
									</div>
									<div class="col-md-3 ">
										<h3 class="business-name">Business Name</h3>
										<i>Start Date - End Date </i><br>
										<span>Location, State</span>
									</div>
									<div class="col-md-7 ">
										<h4 class="position">Title / Position</h4>
										<p class="short-description">Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. </p>
									</div>
								</div>
                
 <!-- 3 -->
								<div class="past-employer row">
									<div class="col-md-2">
										
										<img class="employer-img" src="http://placehold.it/100x30">
									</div>
									<div class="col-md-3 ">
										<h3 class="business-name">Business Name</h3>
										<i>Start Date - End Date </i><br>
										<span>Location, State</span>
									</div>
									<div class="col-md-7 ">
										<h4 class="position">Title / Position</h4>
										<p class="short-description">Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
									</div>
								</div>
                
 <!-- 4 -->
								<div class="past-employer row">
									<div class="col-md-2">
										
										<img class="employer-img" src="http://placehold.it/100x30">
									</div>
									<div class="col-md-3 ">
										<h3 class="business-name">Business Name</h3>
										<i>Start Date - End Date </i><br>
										<span>Location, State</span>
									</div>
									<div class="col-md-7 ">
										<h4 class="position">Title / Position</h4>
										<p class="short-description">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
									</div>
								</div>
                
                
								
							</div>
						
							<hr>
						</section>
						
						
						
						<section id="education">
							<h2>Education</h2>
							<div class="past-school row">
								<div class="col-md-4 left">
									<h3 class="school-name">University Name</h3>
									<i>Start date - End date</i><br>
									<span>Location, State</span>
								</div>
								<div class="col-md-8 ">
									<h4 class="position">Field of Study</h4>
									<p class="short-description">Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. </p>
								</div>
							</div>
							<div class="past-school row">
								<div class="col-md-4 left">
									<h3 class="school-name">University Name</h3>
									<i>Start date - End date</i><br>
									<span>Location, State</span>
								</div>
								<div class="col-md-8 ">
									<h4 class="position">Field of Study</h4>
									<p class="short-description">Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. </p>
								</div>
							</div>

 <div class="past-school row">
								<div class="col-md-4 left">
									<h3 class="school-name">University Name</h3>
									<i>Start date - End date</i><br>
									<span>Location, State</span>
								</div>
								<div class="col-md-8 ">
									<h4 class="position">Field of Study</h4>
									<p class="short-description">Nulla quis lorem ut libero malesuada feugiat. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. </p>
								</div>
							</div>
              
              
              
							<hr>
						</section>
						
						
						
						<section id="computers">
							<div class="row">
								<div class="col-md-6">
									<h5>Hardware Capability</h5>
									<ul>
                    <li>Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Proin eget tortor risus.</li>
                    <li> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</li> <li>Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li><li>Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</li>
                    <li> Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta.</li>
                    <li>Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada.</li>
										
									</ul>
								</div>
								<div class="col-md-6">
									<h5>Software Capability</h5>
									<ul>
                    <li>Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Proin eget tortor risus.</li>
                    <li> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</li> <li>Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li><li>Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</li>
                    <li> Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta.</li>
                    <li>Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada.</li>
										
									</ul>
								</div>
							</div>
							
							
							<div class="row">
								<div class="col-md-6">
							
									<h5>Networking Capability</h5>
									<ul>
                    <li>Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Proin eget tortor risus.</li>
                    <li> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</li> <li>Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li><li>Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</li>
                    <li> Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta.</li>
                    <li>Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada.</li>
										
									</ul>
							
							
								</div>
								<div class="col-md-6">
								
									<h5>Security Capability</h5>
									<ul>
                    <li>Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Proin eget tortor risus.</li>
                    <li> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</li> <li>Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li><li>Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</li>
                    <li> Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta.</li>
                    <li>Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada.</li>
										
									</ul>
								</div>
							</div>
						
							<div class="row">
								<div class="col-md-6">
									<h5>Web Development</h5>
									<ul>
                    <li>Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Proin eget tortor risus.</li>
                    <li> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</li> <li>Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li><li>Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</li>
                    <li> Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta.</li>
                    <li>Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada.</li>
										
									</ul>
								</div>
								<div class="col-md-6">
									<h5>Links to developed websites:</h5>
									<ul>
                    <li>Proin eget tortor risus. Nulla porttitor accumsan tincidunt. Proin eget tortor risus.</li>
                    <li> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</li> <li>Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li><li>Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</li>
                    <li> Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta.</li>
                    <li>Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada.</li>
										
									</ul>
							
								</div>
							</div>
							<hr>
						</section>
						
						
						<section id="references">
							<h2>References</h2>
							<div class="row">
								<div class="col-md-4">
									Jane Doe<br>
									Previous Employer and friend.<br>
									GM of Business<br>
									City, State (555)-555-5555
								</div>
								<div class="col-md-4">
									John Doe<br>
									Previous Employer and friend.<br>
									GM of Business<br>
									City, State (555)-555-5555
								</div>
								<div class="col-md-4">
									James Doe<br>
									Previous Employer and friend.<br>
									GM of Business<br>
									City, State (555)-555-5555
								</div>
							</div>
							<hr>
						</section>
						
						<section id="extra-skills" class="clearfix">
							<div class="col-md-6">
								More Skills:
								<ul class="pills">
									
									<li class="skill"><a href="#" title="E-Learning"><span class="wrap">E-Learning</span></a></li>
									<li class="skill"><a href="#" title="Programming"><span class="wrap">Programming</span></a></li>
									<li class="skill"><a href="#" title="Website Development"><span class="wrap">Website Development</span></a></li>
									<li class="skill"><a href="#" title="Mobile Applications"><span class="wrap">Mobile Applications</span></a></li>
									<li class="skill"><a href="#" title="Troubleshooting"><span class="wrap">Troubleshooting</span></a></li>
									<li class="skill"><a href="#" title="User Interface Design"><span class="wrap">User Interface Design</span></a></li>
									<li class="skill"><a href="#" title="User Experience"><span class="wrap">User Experience</span></a></li>
									<li class="skill"><a href="#" title="Twitter Bootstrap"><span class="wrap">Twitter Bootstrap</span></a></li>
									<li class="skill"><a href="#" title="WordPress"><span class="wrap">WordPress</span></a></li>
									<li class="skill"><a href="#" title="Web Development"><span class="wrap">Web Development</span></a></li>
									<li class="skill"><a href="#" title="Servers"><span class="wrap">Servers</span></a></li>
									<li class="skill"><a href="#" title="E-commerce"><span class="wrap">E-commerce</span></a></li>
									<li class="skill"><a href="#" title="HTML"><span class="wrap">HTML</span></a></li>
									<li class="skill"><a href="#" title="PHP"><span class="wrap">PHP</span></a></li>
									<li class="skill"><a href="#" title="CSS"><span class="wrap">CSS</span></a></li>
									<li class="skill"><a href="#" title="Linux"><span class="wrap">Linux</span></a></li>
									<li class="skill"><a href="#" title="Server Maintenance"><span class="wrap">Server Maintenance</span></a></li>
									<li class="skill"><a href="#" title="Custom CMS Development"><span class="wrap">Custom CMS Development</span></a></li>
									<li class="skill"><a href="#" title="Scrum"><span class="wrap">Scrum</span></a></li>
									<li class="skill"><a href="#" title="Agile Web Development"><span class="wrap">Agile Web Development</span></a></li>
									<li class="skill"><a href="#" title="SEO"><span class="wrap">SEO</span></a></li>
									<li class="skill"><a href="#" title="ASP.NET"><span class="wrap">ASP.NET</span></a></li>
									<li class="skill"><a href="#" title="JavaScript"><span class="wrap">JavaScript</span></a></li>
									<li class="skill"><a href="#" title="Photoshop"><span class="wrap">Photoshop</span></a></li>
									<li class="skill"><a href="#" title="Magento"><span class="wrap">Magento</span></a></li>
									<li class="skill"><a href="#" title="Salesforce"><span class="wrap">Salesforce</span></a></li>
									<li class="skill"><a href="#" title="Database Management"><span class="wrap">Database Management</span></a></li>
									<li class="skill"><a href="#" title="OS X"><span class="wrap">OS X</span></a></li>
									<li class="skill"><a href="#" title="Payments"><span class="wrap">Payments</span></a></li>
									<li class="skill"><a href="#" title="Hardware Installation"><span class="wrap">Hardware Installation</span></a></li>
									<li class="skill"><a href="#" title="Network Troubleshooting"><span class="wrap">Network Troubleshooting</span></a></li>
									<li class="skill"><a href="#" title="MVC"><span class="wrap">MVC</span></a></li>
									<li class="skill"><a href="#" title="Management"><span class="wrap">Management</span></a></li>
									<li class="skill"><a href="#" title="Software Development"><span class="wrap">Software Development</span></a></li>
									<li class="skill"><a href="#" title="Microsoft Office"><span class="wrap">Microsoft Office</span></a></li>
									<li class="skill"><a href="#" title="AngularJS"><span class="wrap">AngularJS</span></a></li>
								</ul>
								
								
								Interests:
								<ul class="pills">
									
									<li class="interest"><span class="wrap">multimedia streaming</span></li>
									<li class="interest"><span class="wrap">building computers</span></li>
									<li class="interest"><span class="wrap">camping</span></li>
									<li class="interest"><span class="wrap">new technology</span></li>
									<li class="interest"><span class="wrap">software development</span></li>
									<li class="interest"><span class="wrap">range shooting</span></li>
									<li class="interest"><span class="wrap">server maintenance</span></li>
									<li class="interest"><span class="wrap">paint-balling</span></li>
									<li class="interest"><span class="wrap">biking</span></li>
									<li class="interest"><span class="wrap">networking</span></li>
									<li class="interest"><span class="wrap">League of Legends</span></li>
									<li class="interest"><span class="wrap">Raspberry Pi's</span></li>
									<li class="interest"><span class="wrap">touchscreen devices</span></li>
									<li class="interest"><span class="wrap">Phone hacking</span></li>
									
								</ul>
								
								
								
							</div>
							<div class="col-md-6">
								<div class="linkedin-link">
								
									<span>These are my endorsements on LinkedIn. Updated: Feb 2016.</span>
									<img class="employer-img" src="http://placehold.it/500x400">
								<!--</a>-->
								</div>
							</div>
						</section>
						
						
					</div><!-- end resume -->
</div>
					
					

html, body { background: #777; padding: 20px 0; }	
h5 { font-weight: bold; }

		#resume-container {  
			background: rgba(255,255,255,1); 
			color: black !important;
			opacity: 1 !important; 
			margin-bottom: 40px; 
			padding-bottom: 20px;  
			border-radius: 7px; 
		}
		
		#resume-container a { color: black; text-decoration: underline; }
		
		#resume-container hr { border-bottom: 2px solid black; }
		
		#resume-container header { 
			background: #4caf7c; 
			padding: 40px 0 20px; 
			position: relative;
			z-index: 1;
			border-top-left-radius: 7px; 
			border-top-right-radius: 7px; 
		}
		
		
		#resume-container header:after {
			background: inherit;
			content: '';
			display: block;
			height: 50%;
			left: 0;
			position: absolute;
			right: 0;
			z-index: -1;
			-webkit-backface-visibility: hidden;
		}
		
		
		#resume-container header:after {
		  bottom: 0;
		  -webkit-transform: skewY(-2.5deg);
				  transform: skewY(-2.5deg);
		  -webkit-transform-origin: 100%;
				  transform-origin: 100%;
		}

		#resume-container header .resume-portfolio-pic { border-radius: 50%; height: 200px; width: 200px; margin: 0 auto; display: block; }

		.resume-name { text-align: center; color: white; padding-top: 50px; }
		
		#resume-container .contact-info { text-align: center; padding: 10px 0; margin: 20px 0; color: white; }
		#resume-container .contact-info a  { color: white; }
		
		
		#resume-container #summary { padding: 50px 10px 0; }
		#resume-container #summary .summary { padding: 0 20px; }
		
		#resume-container .skill-text { text-align: center; }
		
		#resume-container .contact-info .email, #resume-container .contact-info .phone { margin-bottom: 20px; }
		
		
		#experience { padding: 0 20px; }
		
		#experience h2, #experience h3, #experience h4 { margin: 0 !important; }
	
		#experience .past-employer { padding: 20px 0; }
		#experience .employer-img { display: block; margin: 0 auto; padding-top: 20px; }
		#experience .short-description { /* padding-top: 20px; */ }
		
		
		#education { padding: 0 20px; }
		
		#education .past-school { padding: 20px 0; }
		
		#education .past-school .left { text-align: center; }
		
		#computers { padding: 0 20px; }
		
		
		#resume-container .pills { padding-left: 0; }
		#resume-container .pills a { color: black; }
		#resume-container .pills li { 
			box-shadow: 0px 1px 1px #CCC;
			transition: all 0.07s ease 0s;
			display: inline-block;
			border: 0px none;
			margin: 0px 5px 5px 0px;
			padding: 0px;
			font-size: 13px;
			line-height: 17px;
			color: black;
			font-weight: normal;
			background: #F1F1F1 none repeat scroll 0% 0%;
			border-radius: 2px;
			text-decoration: none;
		}
		#resume-container .pills li .wrap {
			display: inline-block;
			padding: 5px 10px 4px;
		}
		
		#references { padding: 0 20px; margin: 20px 0; text-align: center; }
		
		
		
		#resume-container .linkedin-link { margin-bottom: 10px; }
		#resume-container .linkedin-link span { display: block; color: black; text-align: center; }
		
		




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~MEDIA QUERIES~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
		
	}
	
	@media only screen and ( min-width: 992px ) {
		#experience .col-md-7 { border-left: 2px solid black; }
		#education .col-md-8 { border-left: 2px solid black; }
	}
	
	
	@media only screen and (max-width: 1200px) {
		
	}
	
	
	@media only screen and (max-width: 990px) {
	
		.past-employer { border-bottom: 1px solid #dedede; margin-bottom: 20px; }
		.past-employer:last-child { border-bottom: none; margin-bottom: 0; }
		
		.past-school { border-bottom: 1px solid #dedede; }
		.past-school:last-child { border-bottom: none !important; }
		
		#references .col-md-4 { margin-bottom: 20px; }
		
		#experience .employer-img { padding-top: 0; max-width: 200px; }
		
		
	}
	
	@media only screen and (max-width: 960px) {
		
	}
	
	@media only screen and ( max-width: 768px ) {
		
	}
		
	@media only screen and (max-width: 665px) {
		.specializations ul { padding-left: 0; }
		.skill-text { margin-bottom: 0; }
	}
		
	@media only screen and (max-width: 567px) {
		#computers ul { padding-left: 10px; }
	}
	
	@media only screen and (max-width: 420px) {
		#extra-skills { display: none; }
	}