/* #FF4500 bright orange */
/* TEXT AND LINKS */
a {
  color: #777;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #FF4500;
}

p, ul {
  line-height: 1.5em;
}

.about, .resume,
.portfolio, .contact {
  background: transparent;
}

h1, h2, h3, h4 {
  font-weight: bold;
  margin: 0;
}

h1 {
  font-size: 3.4em;
}

h3 {
  font-size: 2em;
  text-align: left;
}

h4 {
  font-size: 1.5em;
}

div {
  box-sizing: border-box;
}

button {
  color: #fff;
  font-size: 1em;
  font-family: 'Raleway';
  font-weight: bold;
  font-size: 15px;
  border: 0;
  border-radius: 3px;
  padding: .3em .4em;
  cursor: pointer;
  background: -webkit-linear-gradient(#FF4500, #ff6a33);
  background: -o-linear-gradient(#FF4500, #ff6a33);
  background: -moz-linear-gradient(#FF4500, #ff6a33);
  background: linear-gradient(#FF4500, #ff6a33);
}

button:hover {
  background: #ff6a33;
}

/* ABOUT */
.about .heading {
  height: 100%;
  padding: 0 0 1em 1.5em;
  float: right;
  background-color: #fff;
  font-family: 'Questrial';
}

#profile-pic {
  width: 220px;
  border-radius: 125px;
  display: block;
  margin: 0 auto .5em auto;
}

.image {
  clear: both;
}

.image.left {
  width: 300px;
  float: left;
  margin: 1em 1em 0 0;
}

.image.right {
  width: 250px;
  float: right;
  margin: 0 0 0.5em 1em;
}

.heading h1 {
  font-size: 2.7em;
}
.heading h3 {
  font-size: 1.4em;
}

/* RESUME */
.about h2, .resume h3 {
  padding: .2em;
  background-color: #fbd334; /* mustard */
  color: #444;
  text-align: center;
}

.experience {
  list-style-type: none;
  padding-left: 0;
  margin: 1em 0 0 0 0;
}

.experience b {
  color: #333;
}

.experience > li {
  line-height: 1.7em;
  margin-bottom: .5em;
}

.experience sup {
  cursor: pointer;
  font-size: 0.6em;
  color: #FF4500;
  font-weight: normal;
}

.experience div {
  line-height: 1.5em;
  margin: 5px 0 15px 20px;
  text-align: justify;
}

.experience .details {
  display: none;
}

.experience .details.show {
  display: block;
}

.resume h3 { font-size: 1.6em; }
.resume h4 { font-size: 1.1em; }
.resume table {
  width: 100%;
  max-width: 800px;
  margin: .5em 0 1em 0;
  padding: 5px;
}

.resume table p {
  margin: .2em 0;
}

/* PORTFOLIO */
.project {
  overflow: hidden;
  position: relative;
  margin: 15px 0;
}

.project img {
  width: 100%;
  display: block;
  margin: 15px auto;
}

.project .overlay {
  opacity: 0; /* Use opacity instead of display for transition effect */
  position: absolute;
  z-index: 1;
  top: 15px;
  width: 100%;
  height: 100%;
  padding: 3em 4em 2em 4em;
  background-color: rgba(255, 255, 255, .9);
  transition: .7s;
}

.project:hover .overlay {
  opacity: 1
}

.overlay * {
  cursor: default;
}

.overlay h4 {
  color: #FF4500;
}

.overlay .button-container {
  width: 230px;
  margin: 30px auto;
}

.overlay .button {
  padding: 7px 10px;
  border: 1px solid #444;
  border-radius: 2px;
  color: #444;
  background-color: rgba(255, 255, 255 , .6);
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  cursor: pointer;
  transition: background-color .6s;
}

.overlay .button:first-child {
  margin-right: 30px;
}

.overlay .button:hover {
  color: #fff;
  background-color: #444;
}