body {
  background-color: transparent;
  background-image: url("img/01.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  height: 100%;
  margin: 0;
  transition: 2s;
  width: 100%; }

.red-color {
  color: red; }

div.banner {
  color: #f3f1f1;
  font-family: "Exo", sans-serif;
  font-size: 3em;
  text-align: center; }
  @media only screen and (max-width: 500px) {
    div.banner {
      background-color: rgba(255, 255, 255, 0.35); } }
  div.banner h3.header-h3 {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
    display: inline-block;
    padding: 10px 80px 20px 80px;
    margin-top: 10px; }
    @media only screen and (max-width: 500px) {
      div.banner h3.header-h3 {
        background: transparent;
        border: none; } }
    div.banner h3.header-h3:hover {
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      transition: background 2s; }
    div.banner h3.header-h3 div.img-panel {
      padding: 0; }
      div.banner h3.header-h3 div.img-panel img {
        width: 160px; }
        @media only screen and (max-width: 500px) {
          div.banner h3.header-h3 div.img-panel img {
            width: 110px; } }
    div.banner h3.header-h3 .development-span {
      color: white;
      font-family: "Kalam", cursive;
      font-style: italic;
      display: block;
      height: 50px;
      letter-spacing: 2px;
      position: relative;
      top: -20px; }
      @media only screen and (max-width: 500px) {
        div.banner h3.header-h3 .development-span {
          font-size: .6em;
          height: auto; } }

div.portfolio {
  text-align: center; }
  div.portfolio div.display-portfolio {
    display: inline-flex;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.8);
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1000px;
    padding: 60px 80px;
    margin: auto; }
    @media only screen and (max-width: 500px) {
      div.portfolio div.display-portfolio {
        border: none;
        padding: 10px 0; } }
    div.portfolio div.display-portfolio div.portfolio-item {
      background-color: rgba(255, 255, 255, 0.6);
      margin: 40px;
      width: 200px; }
      div.portfolio div.display-portfolio div.portfolio-item div.img-holder {
        margin: 5% 5% 0 5%;
        width: 90%; }
        div.portfolio div.display-portfolio div.portfolio-item div.img-holder img {
          width: 100%; }
      div.portfolio div.display-portfolio div.portfolio-item div.caption {
        color: #656363;
        font-size: 1.5em;
        font-style: italic;
        font-family: "Kalam", "Comic Sans", cursive;
        font-weight: bold;
        text-align: center; }
      div.portfolio div.display-portfolio div.portfolio-item:hover {
        box-shadow: 0px 0px 15px 1px rgba(255, 255, 255, 0.4);
        background-color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        transition: .4s;
        transition-timing-function: ease-out; }
        div.portfolio div.display-portfolio div.portfolio-item:hover div.caption {
          color: #5d5b5b; }

@media only screen and (max-width: 500px) {
  div.portfolio div.display-portfolio div.portfolio-item {
    height: 30%;
    width: auto; } }

/*# sourceMappingURL=style.css.map */