html {
   height: 100%;
}

body {
   height: 100%;
}

div.hr {
  border: 0px;
  height: 1px;
  background-color: gray;
  background-image: linear-gradient(to right, #ccc, gray, #ccc);
  
  margin-top: 10px;
  margin-bottom: 10px;
}

div.hr hr {
  display: none;
}

.section {
  display: table;
  /*height: 100%;*/
  width: 100%;
  
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}



.section > .section-inner {
  padding-top: 50px;
  padding-bottom: 100px;
  
  display: table-cell;
  /*height: 100%;*/
  
  background: rgba(255, 255, 255, 0.5);
  
  font-size: 125%;
}

#content-intro {
  background-image: url(//www.peat-network.xyz/img/portfolio-bg/RCoE_-_computer_-_Server_Room.jpg);
  text-align: center;
  
  height: 100%;
}

#content-intro > .section-inner {
  padding-top: 72px;
  display: table-cell;
  vertical-align: middle;
}

#content-about-me {
  background-image: url(//www.peat-network.xyz/img/portfolio-bg/1280px-Freudenberg_sg_Switzerland.jpg);
}

#img-mypic {
  max-width: 50%;
}

#content-portfolio {
  background-image: url(//www.peat-network.xyz/img/portfolio-bg/1280px-Show_room_pa_speaker.JPG);
}

@keyframes shadow-fade {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  }
}

.portfolio-box {
  border: 1px solid black;
  background-color: rgba(255,255,255,0.5);
}

.portfolio-box:hover {
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  animation-name: shadow-fade;
  animation-duration: 0.5s;
}

.portfolio-img > img {
  width: 100%;
  height: 240px;
}

.portfolio-text {
  text-align: center;
  color: black;
  background-color: rgba(128, 128, 128, 0.8);
}

#content-contact {
  background-image: url(//www.peat-network.xyz/img/portfolio-bg/coffee-cup-desk-pen.jpg);
}

#content-footer {
  background-color: gray;
  font-size: 80%;
}

#content-footer > .section-inner {
  padding-bottom: 50px;
}