.index {
  #header {
    height: 100vh;
    background: #232323;
    background-size: cover;
    background-position: fixed;
    .jumbotron {
      margin-top: 15vh; 
      text-align: center; 
      background-color: transparent; 
      color: white; 
      padding-bottom: 0; 
      margin-bottom: 0;
      h1 {
        margin-bottom: 15px;
      }
      .icon {
        cursor: pointer;
        font-size: 30px;
        .transition(color 0.4s);
        &:hover {
          color: #ff7f00;
        }
      }
    }
  }
  #intro-text {
    background-color: #333;
    .container {
      text-align: center; 
      margin-top: 35px; 
      margin-bottom: 35px; 
      color: white; 
      font-size: 17px;
    }
  }

  #project-images-types {
    background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
    background-size: cover;
    .container {
      text-align: center; 
      margin-top: 27px; 
      margin-bottom: 35px;
      h1 {
        margin-top: 0;
        margin-bottom: 30px;
        color: white;
        font-size: 40px;
      }
      .row {
      	margin-bottom: 10px;
      }
    }
  }

  #twitter-feed {
    text-align: center;
    .container {
      margin-top: 25px;
      margin-bottom: 25px;
    }
    .twitter-timeline {
      height: 70vh !important;  // Because twitter uses inline styles.
    }
    .twitter-icon {
      text-align: center;
      font-size: 175px;
      height: 70vh;
      position: relative;
      .icon {
        position: absolute;
        text-shadow: 4px 6px rgba(0,0,0,0.4);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .transition(color 0.6s);
        &:hover {
          color: #55ACEE;
        }
      }
    }
  }
}

/* @group project-images */
.project-image {
  .wrapper {
    color: white;
    margin: 0 auto;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    .box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));

    &:hover .project {
      opacity: 1;
    } 

    &.college {
      background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif);
    }
    &.personal {
      background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg);
    }
    &.work {
      background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
    }

    @media screen and (max-width: @screen-xs-max) {
      &, & .project {
        height: 240px;
        width: 240px;
        margin-bottom: 15px;
      }          
    }
    @media screen and (min-width: @screen-sm-min) {
      &, & .project {
        height: 210px;
        width: 210px;
      }
    }
    @media screen and (min-width: @screen-md-min) {
      &, & .project {
        height: 280px;
        width: 280px;
      }
    }

    & .project {
      padding: 10%;
      .transition(~"opacity 0.5s ease-in");
      opacity: 0;
      background-color: rgba(0,0,0,0.6);
      text-align: center;

      @media screen and (max-width: @screen-xs-max) {
        p, a.btn {
          font-size: 15px;
          margin-bottom: 13px;
        }
        h4 {
          font-size: 33px;
        }
      }
      @media screen and (min-width: @screen-sm-min) {
        p, a.btn {
          font-size: 16px;
        }
        h4 {
          font-size: 27px;
        }
      }
      @media screen and (min-width: @screen-md-min) {
        padding: 13%;
        p, a.btn {
          font-size: 17px;
          margin-bottom: 15px;
        }
        h4 {
          font-size: 38px;
          margin-bottom: 15px;
        }
      }
    }
  }
}
/* @end project-images */