@font-face {
    font-family: superNormal;
    src: url("/fonts/SuperNormal.woff2");
}

#header {
  
}
body {
  position: relative;
  background-image: url("/img/technology-785742-opt-sm.jpg");
  background-color: dimgray;

}
/*
@media (max-width: 979px) {
  .page-body {
     max-height: calc(100% - 52px);
     max-height: -webkit-calc(100% - 52px);
     overflow: auto;
     position: absolute;
     top: 51px;
     width: 100%;
   }
 }
*/
#about {
  padding: 50px 1% 1% 1%;
  background-color: white;
  color: "gray";
  font-size: 180%;
}
.portfolio {
  background-color: white;
}
#portfolio {
  padding-top: 2%;
}
#contact {
  background-color: white;
  padding: 2% 1% 1% 0;
}
#friends {
  background-color: gray;
  padding: 2% 1% 2% 1%;
  color: white;
}
#about_page {
  background-color: #787878;
  text-align: center;
}
.about_page {
  font-size: 125%;
  padding: 2% 0 2% 0;
  color: white;
}
a {
  color: white;
}
a:hover {
  color: purple;
  text-decoration: none;
}
#footer {
  background-color: purple;
  text-align: center;
  font-size: 125%;
  padding: 5px 0px 5px 0px;
  color: gray;
}
.navbar-default {
  background: transparent;
  border: 0px;
  position: fixed;
}
.img-responsive {
  padding: 2%;
}
.about {
  padding: 2%;
}
.test {
  border: 1px solid black;
}
.form-control {
  border-width: 1px 0px 1px 0px;
  font-size: 125%;
  font-weight: bold;
  line-height: 125%;
  text-transform: uppercase;
}
#submit {
  font-size: 150%;
  margin-top: 1%;
}
.navbar-fixed-top {
  background-color: purple;
  top: auto;
}

hr {
  font-family: Arial, sans-serif; /* choose the font you like */
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #999;
  margin: 20px 16%; /* 20px space above/below, 10px left/right */

  /* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

hr:after {
  font-size: 100%;
  content: "<>"; /* section sign */
  color: #999;
  display: inline; /* for vertical centering and background knockout */
  background-color: white; /* same as background color */
  padding: 0 0.5em; /* size of background color knockout */
}

.left-to-right {
    border-width: 3px 0 3px 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to right, black, rgba(0, 0, 0, 0)) 1 100%; 
}

.superNormal {
  font-family: superNormal;
}
.fontAwesome{
    font-family: FontAwesome;
}
.center{
  text-align: center;
}
.img-center{
  margin-left: auto;
  margin-right: auto;
}

.port-item{
  border-radius: 20px;
}