/* CSS Document */
/* CSS Document */
body {
  font-family: "Fira Sans Condensed", sans-serif; }

h1, h2, h3, h4, h5, p {
  font-family: "Fira Sans Condensed", sans-serif; }
  h1.white, h2.white, h3.white, h4.white, h5.white, p.white {
    color: #ffffff; }
  h1.backdrop, h2.backdrop, h3.backdrop, h4.backdrop, h5.backdrop, p.backdrop {
    text-shadow: 2px 2px rgba(0, 0, 0, 0.75); }

a {
  color: #fff; }
  a:hover {
    color: #fff; }

/* CSS Document */
.art-wrapper {
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease-out; }
  .art-wrapper:hover {
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.45);
    transform: scale(1.05); }
    .art-wrapper:hover > .art-overlay {
      background-color: rgba(0, 0, 0, 0.7);
      display: block;
      transition: background-color 0.6s ease-out; }
  .art-wrapper img {
    object-fit: cover;
    height: 100%;
    width: auto; }
  .art-wrapper .art-overlay {
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    display: none;
    height: 100%;
    line-height: 10rem;
    position: absolute;
    top: 0;
    width: 100%; }

.contact {
  background-image: url("../images/site/contact-us.png");
  background-attachment: fixed;
  background-size: cover;
  background-position: center top; }

.full-height {
  min-height: 100vh;
  /* Medium and up */
  /* Large and up */ }
  @media screen and (min-width: 40em) {
    .full-height {
      min-height: 100vh; } }
  @media screen and (min-width: 64em) {
    .full-height {
      min-height: 100vh; } }

.hero {
  background-image: url("../images/site/home.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center top; }

.hero-avatar {
  border-radius: 50%;
  display: inline-block; }
  .hero-avatar.small {
    border: solid medium #ffffff;
    max-height: 45px;
    width: auto; }
  .hero-avatar.medium {
    max-height: 150px; }
  .hero-avatar.large {
    border: solid thick #ffffff;
    max-height: 210px;
    width: auto;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.35); }

.funny {
  background-image: url("../images/site/funny.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center top; }

.thumbnail {
  display: block;
  border: none; }

.skill {
  list-style: none;
  padding-top: 30px; }
  .skill li {
    margin-bottom: 70px;
    background: #000;
    height: 22px;
    border-radius: 3px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    position: relative;
    width: 100%; }
    .skill li em {
      position: relative;
      top: -30px; }
    .skill li .expand {
      height: 16px;
      margin: 2px;
      background: #014C7C;
      position: absolute; }
      .skill li .expand.html5 {
        width: 85%;
        -moz-animation: html5 2s ease-out;
        -webkit-animation: html5 2s ease-out; }
@-webkit-keyframes html5 {
  0% {
    width: 0px; }
  100% {
    width: 85%; } }
      .skill li .expand.css3 {
        width: 75%;
        -moz-animation: css3 2s ease-out;
        -webkit-animation: css3 2s ease-out; }
@-webkit-keyframes css3 {
  0% {
    width: 0px; }
  100% {
    width: 75%; } }
      .skill li .expand.foundation {
        width: 80%;
        -moz-animation: foundation 2s ease-out;
        -webkit-animation: foundation 2s ease-out; }
@-webkit-keyframes foundation {
  0% {
    width: 0px; }
  100% {
    width: 80%; } }
      .skill li .expand.jquery {
        width: 75%;
        -moz-animation: jquery 2s ease-out;
        -webkit-animation: jquery 2s ease-out; }
@-webkit-keyframes jquery {
  0% {
    width: 0px; }
  100% {
    width: 75%; } }
      .skill li .expand.php {
        width: 65%;
        -moz-animation: php 2s ease-out;
        -webkit-animation: php 2s ease-out; }
@-webkit-keyframes php {
  0% {
    width: 0px; }
  100% {
    width: 65%; } }
      .skill li .expand.codeigniter {
        width: 70%;
        -moz-animation: codeigniter 2s ease-out;
        -webkit-animation: codeigniter 2s ease-out; }
@-webkit-keyframes codeigniter {
  0% {
    width: 0px; }
  100% {
    width: 70%; } }
      .skill li .expand.laravel {
        width: 30%;
        -moz-animation: laravel 2s ease-out;
        -webkit-animation: laravel 2s ease-out; }
@-webkit-keyframes laravel {
  0% {
    width: 0px; }
  100% {
    width: 30%; } }
      .skill li .expand.sql {
        width: 45%;
        -moz-animation: sql 2s ease-out;
        -webkit-animation: sql 2s ease-out; }
@-webkit-keyframes sql {
  0% {
    width: 0px; }
  100% {
    width: 45%; } }
      .skill li .expand.photoshop {
        width: 75%;
        -moz-animation: photoshop 2s ease-out;
        -webkit-animation: photoshop 2s ease-out; }
@-webkit-keyframes photoshop {
  0% {
    width: 0px; }
  100% {
    width: 75%; } }
      .skill li .expand.illustrator {
        width: 55%;
        -moz-animation: illustrator 2s ease-out;
        -webkit-animation: illustrator 2s ease-out; }
@-webkit-keyframes illustrator {
  0% {
    width: 0px; }
  100% {
    width: 55%; } }
      .skill li .expand.dreamweaver {
        width: 80%;
        -moz-animation: dreamweaver 2s ease-out;
        -webkit-animation: dreamweaver 2s ease-out; }
@-webkit-keyframes dreamweaver {
  0% {
    width: 0px; }
  100% {
    width: 80%; } }
      .skill li .expand.selligent {
        width: 70%;
        -moz-animation: selligent 2s ease-out;
        -webkit-animation: selligent 2s ease-out; }
@-webkit-keyframes selligent {
  0% {
    width: 0px; }
  100% {
    width: 70%; } }
.skill-icon {
  display: inline-block;
  margin: 0.550em 0.750em;
  height: auto;
  max-width: 75px;
  width: 100%; }

.row {
  background-color: #ffffff; }
  .row:odd {
    background-color: #929292; }
  .row.black {
    background-color: #000000; }
  .row.white {
    background-color: #ffffff; }
  .row.adeptiv {
    background-color: #2A2A2A; }
  .row.netpoint {
    background-color: #2A2A2A; }
  .row.doczero {
    background-color: #2A2A2A; }
  .row.personal {
    background-color: #2A2A2A; }

/** FOUNDATION OVERRIDES **/
.top-bar {
  background-color: #014C7C;
  color: #fff;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75); }
  .top-bar ul {
    background-color: #014C7C; }

.dropdown.menu > li.is-active > a {
  color: #fff;
  border-bottom: solid medium #fff; }

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #fff transparent transparent; }

.dropdown.menu > li > a {
  color: #fff;
  border-bottom: solid medium transparent; }
