/* Reset link styles */
a:link {
  text-decoration: none; }

a:visited {
  text-decoration: none; }

a:hover {
  text-decoration: none; }

a:active {
  text-decoration: none; }

/* Reset CSS margin and padding */
body, div, dl, dt, dd, ul, ol, li, hr, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0px;
  padding: 0px; }

@font-face {
  font-family: OpenSans;
  src: url("../fonts/OpenSans-Regular.ttf"); }
@font-face {
  font-family: OpenSansBold;
  src: url("../fonts/OpenSans-Bold.ttf"); }
body {
  font-family: OpenSans;
  /*
  $color1: rgba(20, 20, 20, 1);
  $color2: rgba(10, 10, 10, 1);
  background-image: linear-gradient(90deg, $color1 50%, $color2 50%);
  background-size: 50px 50px;
  */
  background-color: #191414; }

.resume {
  background-color: #1e1919;
  max-width: 1000px;
  width: 100%;
  min-width: 640px;
  margin: 2% auto 2% auto;
  overflow: auto; }

#title {
  text-transform: uppercase; }

#title h1 {
  color: #33bbf1;
  font-size: 40px;
  margin-left: 10%; }

#title h2 {
  color: #eeeeee;
  font-size: 16px;
  margin: 0% 0% 0% 12%;
  padding: 0px; }

.section {
  background-color: #1e1919;
  padding: 3% 4%;
  box-sizing: border-box; }

.section:last-child {
  margin-bottom: 2.5%; }

.section h1 {
  color: #33bbf1;
  font-size: 22px; }

.section h2 {
  color: #eeeeee;
  font-size: 18px;
  margin: 2% 0px 0px 2%; }

.section .heading {
  color: #eeeeee; }

.section p {
  color: #aeaeae;
  margin-left: 5%;
  font-size: 14px;
  padding: 0.5% 0%; }

.section a {
  color: #aeaeae; }

.section ul {
  list-style-type: none; }

.section li {
  color: #aeaeae;
  margin: 1% 0% 1% 10%;
  font-size: 14px; }

.section ul li:before {
  font-weight: bold;
  content: '\2022';
  color: #eeeeee;
  margin-right: 0.75%; }

#contactInfo {
  width: 50%;
  float: right;
  border-top: 3px solid #555555; }

#contactInfo img {
  width: 20px;
  height: auto;
  vertical-align: middle;
  float: right;
  margin-right: 32%;
  border-radius: 2px; }

#objectives {
  width: 50%;
  float: left; }

#objectives ul li {
  color: #eeeeee;
  margin-left: 5%; }

#objectives ul li:before {
  content: '';
  margin-right: 0px; }

#technicalSkills {
  clear: both;
  width: 50%;
  float: left;
  border-top: 3px solid #555555; }

#technicalSkills ul li {
  margin-left: 5%; }

#technicalSkills ul li:before {
  content: '';
  margin-right: 0px; }

#interpersonalSkills {
  width: 50%;
  float: right;
  border-top: 3px solid #555555; }

#interpersonalSkills ul li {
  color: #eeeeee;
  margin-left: 5%; }

#interpersonalSkills ul li:before {
  color: #aeaeae; }

#education {
  clear: both;
  width: 50%;
  float: left;
  border-top: 3px solid #555555; }

#work {
  width: 50%;
  float: right;
  border-top: 3px solid #555555; }

#volunteer {
  clear: both;
  width: 50%;
  float: left;
  border-top: 3px solid #555555; }

#interests {
  width: 50%;
  float: right; }

#interests ul li {
  color: #eeeeee;
  margin-left: 5%; }

#interests ul li:before {
  color: #aeaeae; }

#references {
  clear: both;
  border-top: 3px solid #555555; }

#references ul li {
  color: #eeeeee;
  margin-left: 2.5%; }

#references ul li:before {
  content: ''; }

#images {
  width: 100%;
  margin: 0px;
  padding: 0px; }

#images ul {
  list-style-type: none;
  font-size: 0px; }

#images ul li {
  background-color: black;
  width: 25%;
  box-sizing: border-box; 
  height: 168px;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  position: relative;
  border: 3px solid #555555;
  overflow: hidden; }

#images ul li:before {
  content: "";
  margin-right: 0; }

#images ul li p {
  color: white;
  width: 100%;
  position: absolute;
  vertical-align: middle;
  font-size: 30px;
  line-height: 10%;
  top: 50%;
  margin: 0px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

#images ul li:hover p {
  visibility: visible;
  opacity: 1; }

#images ul li:hover img {
  opacity: 0.7; }

#images ul li img {
  width: 100%;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

@media screen and (max-width: 1000px) {
  .resume {
    width: 800px; }

  #objectives {
    width: 100%;
    float: left; }

  #interests {
    width: 100%;
    float: left; }

  #education {
    width: 100%;
    float: left; }

  #work {
    width: 100%;
    float: left; }

  #technicalSkills {
    width: 100%;
    float: left; }

  #interpersonalSkills {
    width: 100%;
    float: left; }

  #volunteer {
    width: 100%;
    float: left; }

  #contactInfo {
    width: 100%;
    float: left; }

  #references {
    width: 100%;
    float: left; }

  #images ul li {
    height: 148px; }

  #contactInfo img {
    margin-right: 60%; }
}

@media screen and (max-width: 800px) {
  #resume {
    width: 600px; }

 #images ul li {
    width: 50%;
    height: 200px; }

}