body, html {
  height: 100%;
  margin: 0px; }

.parallax {
  /* The image used */
  background-image: url("../images/background-potomac.jpg");
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media (max-width: 800px) {
  .parallax {
    background-attachment: scroll; } }
.center-parallax {
  position: absolute;
  width: 80%;
  left: 10%;
  text-align: center;
  top: 50%;
  transform: translate(0%, -50%); }
  .center-parallax h1, .center-parallax h2 {
    color: #fff;
    font-family: 'Catamaran', sans-serif; }
  @media (min-width: 768px) {
    .center-parallax h1 {
      font-size: 5em;
      font-weight: 900; }
    .center-parallax h2 {
      font-size: 3.5em; } }
  .center-parallax h2 {
    margin-bottom: 0px;
    margin-top: 0px; }
    .center-parallax h2 a {
      color: #fff; }
      .center-parallax h2 a:hover {
        color: rgba(255, 255, 255, 0.9); }

#sticky-header {
  position: fixed;
  z-index: 3;
  background-color: #fff;
  top: 0px;
  left: 0px;
  width: 100%;
  -webkit-box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
  padding: 20px; }
  #sticky-header .brand, #sticky-header .blog-link {
    font-size: 1.4em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; }
  #sticky-header .brand {
    margin-left: 20px; }
  #sticky-header .blog-link {
    float: right;
    margin-right: 60px;
    cursor: pointer; }
    #sticky-header .blog-link a {
      text-decoration: none;
      color: #000; }
      #sticky-header .blog-link a:hover {
        color: rgba(0, 0, 0, 0.7); }

.main-content {
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 100px; }
  @media (min-width: 1024px) {
    .main-content {
      position: relative;
      width: 80%;
      left: 10%; } }
  .main-content > h1 {
    margin-left: 40px; }
  .main-content > p {
    margin: 20px; }

.project-card {
  margin: 40px;
  vertical-align: top;
  -webkit-box-shadow: 0px 2px 15px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 2px 15px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 2px 15px 5px rgba(0, 0, 0, 0.25);
  background-color: #fff; }
  @media (min-width: 1024px) {
    .project-card {
      width: 85%;
      height: 350px;
      display: inline-block; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .project-card {
      display: inline-block;
      width: 85%;
      height: 200px; } }
  @media (max-width: 767px) {
    .project-card {
      width: 90%; } }
  .project-card h1 {
    font-family: 'Catamaran', sans-serif; }
  .project-card:nth-child(even) .project-card-image {
    float: right; }

.project-card-image {
  position: relative;
  height: 100%;
  left: 0%;
  display: inline-block; }
  @media (min-width: 1024px) {
    .project-card-image img {
      height: 350px; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .project-card-image img {
      height: 200px; } }
  @media (max-width: 767px) {
    .project-card-image {
      width: 100%; }
      .project-card-image img {
        width: 100%; } }

.project-card-info {
  display: inline-block;
  vertical-align: top; }
  @media (min-width: 1024px) {
    .project-card-info {
      height: 350px; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .project-card-info {
      height: 200px; } }
  .project-card-info h1 {
    margin-top: 0px; }

/*.rav-link {
    text-decoration: none;
    background-color: blue;
    color: white;
    border-radius: 20px;
    float: right;
    font-size: 0.6em;
    padding: 8px;
    text-transform: uppercase;
    
    &:hover {
        background-color: red;
    }
}*/
.footer {
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  background: #505050;
  background: -moz-linear-gradient(top, #505050 0%, #323232 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #505050), color-stop(100%, #323232));
  background: -webkit-linear-gradient(top, #505050 0%, #323232 100%);
  background: -o-linear-gradient(top, #505050 0%, #323232 100%);
  background: -ms-linear-gradient(top, #505050 0%, #323232 100%);
  background: linear-gradient(to bottom, #505050 0%, #323232 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#323232', GradientType=0 ); }
  @media (min-width: 768px) {
    .footer {
      padding: 100px; } }
  @media (max-width: 767px) {
    .footer {
      padding: 50px; } }
  .footer .footer-left {
    float: left; }
  .footer .footer-right {
    float: right; }

.card {
  background-color: #fff;
  overflow: hidden;
  position: relative;
  margin-bottom: 50px;
  cursor: pointer;
  padding: 20px;
  -webkit-box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.35); }
  .card img {
    position: relative;
    z-index: 1; }
    @media (min-width: 1024px) {
      .card img {
        height: 350px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .card img {
        height: 200px; } }
    @media (max-width: 767px) {
      .card img {
        width: 100%; } }
  @media (max-width: 767px) {
    .card {
      padding: 20px; }
      .card .rav-link {
        right: 40px; } }
  @media (min-width: 768px) {
    .card:nth-child(odd) img {
      margin-right: 40px;
      float: left; }
    .card:nth-child(odd) .rav-link {
      right: 20px; }
    .card:nth-child(odd) p {
      padding-right: 20px; }
    .card:nth-child(even) img {
      margin-left: 40px;
      float: right; }
    .card:nth-child(even) a {
      margin-left: 20px; }
    .card:nth-child(even) h1, .card:nth-child(even) h2 {
      padding-left: 20px; }
    .card:nth-child(even) p {
      margin: 0px;
      padding-left: 20px; } }
  .card .description {
    display: block;
    padding-bottom: 50px; }
    @media (max-width: 767px) {
      .card .description {
        max-height: 100px; } }
  .card .card-footer {
    position: absolute;
    height: 70px;
    left: 0%;
    bottom: 0%;
    width: 100%;
    background-color: #fff;
    z-index: 0; }
    @media (max-width: 767px) {
      .card .card-footer {
        padding-left: 20px; } }
  @media (min-width: 1024px) {
    .card {
      height: 350px; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .card {
      height: 200px; } }
  @media (max-width: 767px) {
    .card {
      font-size: 75%; } }
  @media (min-width: 768px) {
    .card {
      width: 70%;
      left: 15%; } }
  @media (max-width: 767px) {
    .card {
      width: 70%;
      left: 10%; } }
  .card:hover {
    -webkit-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.35); }
  .card h1, .card h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .card .rav-link {
    position: absolute;
    bottom: 20px;
    background-color: #42A5F5;
    padding: 6px 12px 6px 12px;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    border-radius: 20px;
    font-size: 0.8em; }
    .card .rav-link:hover {
      background-color: #0288D1;
      -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2); }
  .card .free-pattern:after {
    content: "  (FREE)";
    color: red; }

.profile {
  border-radius: 50%;
  margin: 20px; }
  @media (min-width: 768px) {
    .profile {
      float: left; } }
  @media (max-width: 767px) {
    .profile {
      display: block;
      margin-left: auto;
      margin-right: auto; } }

.overlay {
  position: fixed;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100vh;
  top: 0px; }

.hidden {
  display: none; }

.modal {
  font-family: 'Open Sans', sans-serif;
  position: fixed;
  z-index: 2;
  background-color: #fff;
  overflow: auto; }
  @media (min-width: 768px) {
    .modal {
      width: 60%;
      left: 20%;
      height: 80vh;
      top: 10%; } }
  @media (max-width: 767px) {
    .modal {
      width: 100%;
      left: 0%;
      height: 100vh;
      top: 0%; } }
  .modal .modal-nav {
    margin-top: 20px;
    text-align: center;
    position: relative;
    width: 80%;
    left: 10%;
    border-bottom: 2px solid; }
  .modal .close-modal {
    position: absolute;
    top: 0%;
    right: 0%;
    padding: 10px;
    cursor: pointer;
    user-select: none; }
  .modal ul {
    list-style-type: none;
    padding: 20px 20px 12px 20px;
    margin: 0px; }
    .modal ul li {
      padding: 10px;
      display: inline;
      cursor: pointer;
      text-transform: uppercase; }
      .modal ul li:hover {
        background-color: #90CAF9;
        border-bottom: 4px solid; }
    .modal ul .active-tab {
      background-color: #90CAF9;
      border-bottom: 4px solid; }
  .modal .modal-tab {
    padding: 0px 30px 20px 40px; }
  .modal .photo-carousel {
    text-align: center; }
    .modal .photo-carousel img {
      user-select: none; }
      @media (min-width: 768px) {
        .modal .photo-carousel img {
          width: 35%; } }
      @media (max-width: 767px) {
        .modal .photo-carousel img {
          width: 55%; } }
    .modal .photo-carousel .photo-nav {
      position: absolute;
      top: 50%;
      font-size: 300%;
      cursor: pointer;
      user-select: none; }
      .modal .photo-carousel .photo-nav:hover {
        background-color: rgba(0, 0, 0, 0.3); }
    .modal .photo-carousel .previous-photo {
      transform: translate(-100%, 0%); }

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