.graphic, #main, #home .scrollDwn .down {
  margin: 0 auto; }

header, header .logo a, footer article, footer article section, footer ul {
  display: flex;
  flex-direction: row; }

/*PRELOADER*/
@keyframes orbit-one {
  0% {
    top: -50px;
    z-index: 100; }
  25% {
    transform: scale(1.5); }
  50% {
    top: 200px; }
  75% {
    transform: scale(0.5); }
  100% {
    top: -50px;
    z-index: -100; } }

@media (max-width: 1199px) {
  @keyframes orbit-one {
    0% {
      top: -50px;
      z-index: 100; }
    25% {
      transform: scale(1.5); }
    50% {
      top: 300px; }
    75% {
      transform: scale(0.5); }
    100% {
      top: -50px;
      z-index: -100; } } }

/*@-webkit-keyframes orbit-two {
  0% {
	  left: 7%;
    z-index: 100;
  }
  25% {
    -webkit-transform: scale(1.5);
  }
  50% {
    left: 40px;
    top: 5%;
  }
  75% {
    -webkit-transform: scale(.5);
  }
  100% {
    left: 7%;
    z-index: -100;
  }
}*/
@keyframes orbit-two {
  0% {
    left: 12%;
    z-index: 100; }
  25% {
    transform: scale(1.5); }
  50% {
    left: -2%;
    top: 4%; }
  75% {
    transform: scale(0.5); }
  100% {
    left: 12%;
    z-index: -100; } }

@keyframes orbit-three {
  0% {
    left: -4%;
    z-index: 100; }
  25% {
    transform: scale(1.5); }
  50% {
    left: 12%;
    top: 4%; }
  75% {
    transform: scale(0.5); }
  100% {
    left: -4%;
    z-index: -100; } }

@keyframes orbit-four {
  0% {
    left: -10%;
    top: 140px;
    z-index: 100; }
  25% {
    transform: scale(1.5); }
  50% {
    left: 20%; }
  75% {
    transform: scale(0.5); }
  100% {
    left: -10%;
    top: 140px;
    z-index: -100; } }

@media (max-width: 1700px) {
  @keyframes orbit-four {
    0% {
      left: -10%;
      top: 110px;
      z-index: 100; }
    25% {
      transform: scale(1.5); }
    50% {
      left: 20%; }
    75% {
      transform: scale(0.5); }
    100% {
      left: -10%;
      top: 110px;
      z-index: -100; } }
}

@media (max-width: 1199px) {
  @keyframes orbit-four {
    0% {
      left: -10%;
      top: 170px;
      z-index: 100; }
    25% {
      transform: scale(1.5); }
    50% {
      left: 20%; }
    75% {
      transform: scale(0.5); }
    100% {
      left: -10%;
      top: 170px;
      z-index: -100; } } }

@media (max-width: 991px) {
  @keyframes orbit-four {
    0% {
      left: -10%;
      top: 150px;
      z-index: 100; }
    25% {
      transform: scale(1.5); }
    50% {
      left: 20%; }
    75% {
      transform: scale(0.5); }
    100% {
      left: -10%;
      top: 150px;
      z-index: -100; } }
}

@media (max-width: 897px) {
  @keyframes orbit-four {
    0% {
      left: -10%;
      top: 130px;
      z-index: 100; }
    25% {
      transform: scale(1.5); }
    50% {
      left: 20%; }
    75% {
      transform: scale(0.5); }
    100% {
      left: -10%;
      top: 130px;
      z-index: -100; } } }

@media (max-width: 800px) {
  @keyframes orbit-four {
    0% {
      left: -20%;
      top: 130px;
      z-index: 100; }
    25% {
      transform: scale(1.5); }
    50% {
      left: 25%; }
    75% {
      transform: scale(0.5); }
    100% {
      left: -20%;
      top: 130px;
      z-index: -100; } } }

@media (max-width: 500px) {
  @keyframes orbit-four {
    0% {
      left: -40%;
      top: 90px;
      z-index: 100; }
    25% {
      transform: scale(1.5); }
    50% {
      left: 45%; }
    75% {
      transform: scale(0.5); }
    100% {
      left: -40%;
      top: 90px;
      z-index: -100; } } }

@media (max-width: 400px) {
  @keyframes orbit-four {
    0% {
      left: -45%;
      top: 110px;
      z-index: 100; }
    25% {
      transform: scale(1.5); }
    50% {
      left: 50%; }
    75% {
      transform: scale(0.5); }
    100% {
      left: -45%;
      top: 110px;
      z-index: -100; } } }

.preloader {
  width: 100%;
  height: 4780px;
  background: #3396CB;
  position: fixed;
  z-index: 2000;
  text-align: center; }
  .preloader .loadImag {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    margin: 15% auto 0;
    display: inline-block;
    width: 200px; }
    @media (max-width: 1199px) {
      .preloader .loadImag {
        margin: 20% auto 0; } }
    @media (max-width: 500px) {
      .preloader .loadImag {
        margin: 30% auto 0; } }
    .preloader .loadImag img {
      width: 100%; }
  .preloader .particleClass {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    width: 20px;
    opacity: 1; }
    .preloader .particleClass img {
      width: 100%; }
  .preloader .particle1 {
    position: absolute;
    z-index: 0;
    top: 73px;
    left: 50%;
    margin-left: -11px;
    margin-top: 13%;
    animation: orbit-one 2000ms ease-in-out infinite; }
  .preloader .particle2 {
    position: absolute;
    z-index: 0;
    left: 5%;
    /*top: 5px;*/
    top: 103px;
    margin-left: 45%;
    margin-top: 10%;
    animation: orbit-two 2000ms ease-in-out 700ms infinite; }
  .preloader .particle3 {
    position: absolute;
    z-index: 0;
    left: 5%;
    /*top: 5px;*/
    top: 103px;
    margin-left: 45%;
    margin-top: 10%;
    animation: orbit-three 2000ms ease-in-out 1200ms infinite; }
  .preloader .particle4 {
    position: absolute;
    z-index: 0;
    left: 5%;
    /*top: 5px;*/
    top: 103px;
    margin-left: 45%;
    margin-top: 10%;
    animation: orbit-four 2000ms ease-in-out 1900ms infinite; }
  .preloader .loadTxt {
    color: #FFF;
    font-size: 1.5em;
    margin: 25% auto 0;
    text-align: center; }
    @media (max-width: 1199px) {
      .preloader .loadTxt {
        margin: 35% auto 0; } }
    @media (max-width: 800px) {
      .preloader .loadTxt {
        margin: 45% auto 0; } }
    @media (max-width: 500px) {
      .preloader .loadTxt {
        margin: 300px auto 0; } }

/*END PRELOADER*/
* {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0; }

html {
  font-size: 62.5%; }

body {
  background: #FFF;
  color: #FFF;
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  position: relative; }

/* TYPOGRAPHY ================================== */
h1, h2 {
  font-weight: bold;
  line-height: 70px; }

h1 {
  color: #FFF;
  font-size: 2.5rem;
  font-weight: bold;
  text-transform: uppercase; }

h2 {
  font-size: 4rem;
  margin-bottom: 30px;
  margin-top: 10px;
  text-align: center;
  text-transform: capitalize; }

a {
  color: #FFF;
  font-weight: bold; }
  a:hover {
    color: #FFF;
    text-decoration: underline; }

.currentLink a {
  text-decoration: underline; }

.currentLink a:after {
  content: '';
  display: block;
  margin: 10px auto 0;
  height: 2px;
  width: 80%;
  background: #ECAA1E;
  transition: width .5s ease, background-color .5s ease; }

.slideUnder a {
  display: inline-block;
  position: relative;
  height: 2px !important; }

.slideUnder:after {
  content: '';
  display: block;
  margin: 10px auto 0;
  height: 2px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease; }

.slideUnder:hover:after {
  width: 80%;
  background: #ECAA1E; }

p {
  color: #FFF;
  font-size: 2rem; }

.graphic {
  background: #ECAA1E;
  height: 10px;
  width: 70px; }
  @media (max-width: 897px) {
    .graphic {
      height: 8px;
      width: 67px; } }
  @media (max-width: 500px) {
    .graphic {
      height: 6px;
      margin-top: 10px;
      width: 60px; } }

.row {
  flex-wrap: nowrap; }
  @media (max-width: 991px) {
    .row {
      flex-wrap: wrap; } }

figure {
  margin: 0;
  padding: 0; }

/* BASE STRUCTURE =============================== */
#main {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  padding: 0;
  position: relative;
  width: 100%; }
  @media (max-width: 500px) {
    #main {
      padding-bottom: 80px; } }
  @media (max-width: 1199px) {
    #main {
      width: 100%; } }

/*HEADER*/
header {
  align-items: center;
  background: #3396CB;
  border-bottom: solid 5px #2B2B2B;
  height: 90px;
  margin-bottom: 40px;
  padding: 80px 3%;
  position: fixed;
  justify-content: space-between;
  width: 100%;
  z-index: 999;
  /*LOGO*/
  /*NAVIGATION*/ }
  @media (max-width: 897px) {
    header {
      height: auto;
      padding: 3%; } }
  @media (max-width: 500px) {
    header {
      width: 100%; } }
  @media (max-width: 800px) {
    header {
      background-position: center;
      margin-bottom: 20px;
      width: 100%; } }
  header .logo {
    display: inline-block; }
    @media (max-width: 500px) {
      header .logo {
        width: 77% !important; } }
    header .logo a {
      align-items: center;
      padding: .5rem 1rem; }
      @media (max-width: 500px) {
        header .logo a {
          flex-direction: column; } }
      header .logo a:hover {
        text-decoration: none; }
      header .logo a figure {
        float: left;
        height: 100%;
        margin-right: 5%;
        width: 38%; }
        @media (max-width: 897px) {
          header .logo a figure {
            width: 30%; } }
        @media (max-width: 1199px) {
          header .logo a figure {
            width: 34%; } }
        @media (max-width: 500px) {
          header .logo a figure {
            margin-bottom: 6%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            width: 45%; } }
        @media (max-width: 400px) {
          header .logo a figure {
            width: 50%; } }
      header .logo a figure img {
        width: 100%; }
      header .logo a h1 {
        color: #FFF;
        font-weight: bold; }
        @media (max-width: 800px) {
          header .logo a h1 {
            font-size: 2rem; } }
        @media (max-width: 991px) {
          header .logo a h1 {
            padding-top: 3px; } }
        @media (max-width: 1199px) {
          header .logo a h1 {
            font-size: 2.5rem; } }
        @media (max-width: 500px) {
          header .logo a h1 {
            font-size: 1.8rem;
            line-height: 20px; } }
        @media (max-width: 400px) {
          header .logo a h1 {
            font-size: 1.5rem; } }
  header nav {
    float: right;
    margin-right: 0; }
    @media (max-width: 1199px) {
      header nav.navbar {
        padding-top: 3px; } }
    @media (max-width: 500px) {
      header nav {
        right: 26px !important; } }
    @media (max-width: 800px) {
      header nav {
        position: absolute;
        margin-right: 0;
        z-index: 99;
        width: auto; } }
    header nav.navbar-dark .navbar-toggler {
      background-color: #ECAA1E;
      border-color: #ecaa1e;
      color: #ecaa1e;
      font-size: 1.5rem; }
    @media (max-width: 897px) {
      header nav article.container section#navbarResponsive ul {
        background: #2B2B2B;
        padding: 12px 12% 5%; } }
    @media (max-width: 800px) {
      header nav article.container section#navbarResponsive ul {
        display: flex;
        flex-direction: column; } }
    header nav article.container section#navbarResponsive ul li {
      margin-bottom: 15px;
      padding: 0 10px;
      text-align: center; }
      @media (max-width: 800px) {
        header nav article.container section#navbarResponsive ul li {
          font-size: .9em;
          margin-bottom: 20px;
          text-align: left;
          width: 65px; } }
    header nav article.container section#navbarResponsive ul li a {
      font-size: 1.7rem;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none; }
      @media (max-width: 897px) {
        header nav article.container section#navbarResponsive ul li a {
          font-size: 1.4rem; } }
  header .bckColor {
    background: #3396CB;
    height: 100px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1; }

/*END HEADER*/
/*HOME*/
#home {
  height: 1150px;
  padding-top: 220px;
  position: relative;
  width: 100%;
  /*SCROLL DOWN*/
  /*END SCROLL DOWN*/ }
  #home .personal {
    flex: none;
    height: auto;
    margin: 0 auto 50px;
    width: 60%;
    z-index: 1; }
    @media (max-width: 1199px) {
      #home .personal {
        width: 100%; } }
    #home .personal .profile {
      margin: 0 auto;
      width: 200px; }
      @media (max-width: 1199px) {
        #home .personal .profile {
          width: 150px; } }
      #home .personal .profile img {
        width: 100%; }
    #home .personal h2 {
      font-size: 4rem;
      font-weight: bold;
      text-align: center; }
      @media (max-width: 897px) {
        #home .personal h2 {
          font-size: 3rem;
          line-height: 50px; } }
      @media (max-width: 1199px) {
        #home .personal h2 {
          font-size: 3.5rem;
          line-height: 60px;
          margin-bottom: 40px; } }
      @media (max-width: 500px) {
        #home .personal h2 {
          font-size: 2.3rem;
          line-height: 30px; } }
    #home .personal p {
      font-size: 2.5rem;
      line-height: 50px;
      padding: 0 3%; }
      @media (max-width: 897px) {
        #home .personal p {
          font-size: 1.8rem;
          line-height: 30px; } }
      @media (max-width: 1199px) {
        #home .personal p {
          font-size: 2.1rem;
          line-height: 40px; } }
      @media (max-width: 500px) {
        #home .personal p {
          font-size: 1.8rem;
          line-height: 25px; } }
      #home .personal p span {
        color: #ECAA1E; }

@-webkit-keyframes downArrow {
  0% {
    opacity: 0;
    margin-top: -20px; }
  50% {
    opacity: 1;
    margin-top: 50px; }
  100% {
    opacity: 0;
    margin-top: 50px; } }

@-moz-keyframes downArrow {
  0% {
    opacity: 0;
    margin-top: -20px; }
  50% {
    opacity: 1;
    margin-top: 50px; }
  100% {
    opacity: 0;
    margin-top: 50px; } }

@-o-keyframes downArrow {
  0% {
    opacity: 0;
    margin-top: -20px; }
  50% {
    opacity: 1;
    margin-top: 50px; }
  100% {
    opacity: 0;
    margin-top: 50px; } }

@keyframes downArrow {
  0% {
    opacity: 0;
    margin-top: -20px; }
  50% {
    opacity: 1;
    margin-top: 50px; }
  100% {
    opacity: 0;
    margin-top: 50px; } }
  #home .scrollDwn {
    color: #ECAA1E;
    margin: 0 auto;
    position: relative;
    text-align: center; }
    #home .scrollDwn .down {
      left: 0;
      position: absolute !important;
      right: 0;
      z-index: 4;
      -webkit-animation: downArrow 4000ms ease-in-out infinite;
      -moz-animation: downArrow 4000ms ease-in-out infinite;
      -o-animation: downArrow 4000ms ease-in-out infinite;
      animation: downArrow 4000ms ease-in-out infinite; }
    #home .scrollDwn #dwnArr p {
      color: #ECAA1E;
      text-transform: uppercase; }
  #home .bck {
    background: url(../img/exBck2.jpg) no-repeat fixed 0 0/cover;
    min-height: 1150px;
    height: 1150px;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0; }

/*PROFILE*/
#projects {
  position: relative;
  width: 100%; }
  #projects h2 {
    color: #2B2B2B;
    font-weight: bold;
    margin-bottom: 90px;
    margin-top: 72px;
    text-align: center; }
  #projects section:nth-child(2) > article {
    display: block; }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript {
      position: relative;
      overflow: hidden; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript #rkTitle {
        opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out 300ms;
        -moz-transition: opacity 300ms ease-in-out 300ms;
        -o-transition: opacity 300ms ease-in-out 300ms;
        -ms-transition: opacity 300ms ease-in-out 300ms;
        transition: opacity 300ms ease-in-out 300ms; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript #rkImg {
        overflow: hidden;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 500px;
        -webkit-transition: all 300ms ease-in-out 300ms;
        -moz-transition: all 300ms ease-in-out 300ms;
        -o-transition: all 300ms ease-in-out 300ms;
        -ms-transition: all 300ms ease-in-out 300ms;
        transition: all 300ms ease-in-out 300ms; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript #rkImg img {
        min-height: 500px;
        min-width: 638px;
        width: 100%; }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript:hover #rkImg {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript:hover #rkTitle {
      opacity: 1; }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript {
      position: relative;
      overflow: hidden; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript #rkBlogTitle {
        opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out 300ms;
        -moz-transition: opacity 300ms ease-in-out 300ms;
        -o-transition: opacity 300ms ease-in-out 300ms;
        -ms-transition: opacity 300ms ease-in-out 300ms;
        transition: opacity 300ms ease-in-out 300ms; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript #rkBlogImg {
        overflow: hidden;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 500px;
        -webkit-transition: all 300ms ease-in-out 300ms;
        -moz-transition: all 300ms ease-in-out 300ms;
        -o-transition: all 300ms ease-in-out 300ms;
        -ms-transition: all 300ms ease-in-out 300ms;
        transition: all 300ms ease-in-out 300ms; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript #rkBlogImg img {
        min-height: 500px;
        min-width: 638px;
        width: 100%; }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript:hover #rkBlogImg {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript:hover #rkBlogTitle {
      opacity: 1; }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript {
      position: relative;
      overflow: hidden; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript #ppTitle {
        opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out 300ms;
        -moz-transition: opacity 300ms ease-in-out 300ms;
        -o-transition: opacity 300ms ease-in-out 300ms;
        -ms-transition: opacity 300ms ease-in-out 300ms;
        transition: opacity 300ms ease-in-out 300ms; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript #ppImg {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 500px;
        -webkit-transition: all 300ms ease-in-out 300ms;
        -moz-transition: all 300ms ease-in-out 300ms;
        -o-transition: all 300ms ease-in-out 300ms;
        -ms-transition: all 300ms ease-in-out 300ms;
        transition: all 300ms ease-in-out 300ms; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript #ppImg img {
        min-height: 500px;
        min-width: 638px;
        width: 100%; }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript:hover #ppImg {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript:hover #ppTitle {
      opacity: 1; }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(2) > section.overlayDescript {
      position: relative;
      overflow: hidden; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(2) > section.overlayDescript #mcTitle {
        opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out 300ms;
        -moz-transition: opacity 300ms ease-in-out 300ms;
        -o-transition: opacity 300ms ease-in-out 300ms;
        -ms-transition: opacity 300ms ease-in-out 300ms;
        transition: opacity 300ms ease-in-out 300ms; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(2) > section.overlayDescript #mcImg {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 500px;
        -webkit-transition: all 300ms ease-in-out 300ms;
        -moz-transition: all 300ms ease-in-out 300ms;
        -o-transition: all 300ms ease-in-out 300ms;
        -ms-transition: all 300ms ease-in-out 300ms;
        transition: all 300ms ease-in-out 300ms; }
      #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(2) > section.overlayDescript #mcImg img {
        min-height: 500px;
        min-width: 638px;
        width: 100%; }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(2) > section.overlayDescript:hover #mcImg {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    #projects section:nth-child(2) > article > section.thumbs:nth-child(2) article:nth-child(2) > section.overlayDescript:hover #mcTitle {
      opacity: 1; }
  #projects section:nth-child(3) > article {
    display: block; }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript {
      position: relative;
      overflow: hidden; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript #trackTitle {
        opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out 300ms;
        -moz-transition: opacity 300ms ease-in-out 300ms;
        -o-transition: opacity 300ms ease-in-out 300ms;
        -ms-transition: opacity 300ms ease-in-out 300ms;
        transition: opacity 300ms ease-in-out 300ms; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript #trackImg {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 500px;
        -webkit-transition: all 300ms ease-in-out 300ms;
        -moz-transition: all 300ms ease-in-out 300ms;
        -o-transition: all 300ms ease-in-out 300ms;
        -ms-transition: all 300ms ease-in-out 300ms;
        transition: all 300ms ease-in-out 300ms; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript #trackImg img {
        min-height: 500px;
        min-width: 638px;
        width: 100%; }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript:hover #trackImg {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(1) > section.overlayDescript:hover #trackTitle {
      opacity: 1; }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript {
      position: relative;
      overflow: hidden; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript #feTitle {
        opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out 300ms;
        -moz-transition: opacity 300ms ease-in-out 300ms;
        -o-transition: opacity 300ms ease-in-out 300ms;
        -ms-transition: opacity 300ms ease-in-out 300ms;
        transition: opacity 300ms ease-in-out 300ms; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript #feImg {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 500px;
        -webkit-transition: all 300ms ease-in-out 300ms;
        -moz-transition: all 300ms ease-in-out 300ms;
        -o-transition: all 300ms ease-in-out 300ms;
        -ms-transition: all 300ms ease-in-out 300ms;
        transition: all 300ms ease-in-out 300ms; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript #feImg img {
        min-height: 500px;
        min-width: 638px;
        width: 100%; }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript:hover #feImg {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(1) article:nth-child(2) > section.overlayDescript:hover #feTitle {
      opacity: 1; }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript {
      position: relative;
      overflow: hidden; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript #ccTitle {
        opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out 300ms;
        -moz-transition: opacity 300ms ease-in-out 300ms;
        -o-transition: opacity 300ms ease-in-out 300ms;
        -ms-transition: opacity 300ms ease-in-out 300ms;
        transition: opacity 300ms ease-in-out 300ms; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript #ccImg {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 500px;
        -webkit-transition: all 300ms ease-in-out 300ms;
        -moz-transition: all 300ms ease-in-out 300ms;
        -o-transition: all 300ms ease-in-out 300ms;
        -ms-transition: all 300ms ease-in-out 300ms;
        transition: all 300ms ease-in-out 300ms; }
      #projects section:nth-child(3) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript #ccImg img {
        min-height: 500px;
        min-width: 638px;
        width: 100%; }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript:hover #ccImg {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    #projects section:nth-child(3) > article > section.thumbs:nth-child(2) article:nth-child(1) > section.overlayDescript:hover #ccTitle {
      opacity: 1; }
  #projects #uiInfo {
    text-align: center; }
  #projects > section > article > section.thumbs {
    list-style: none;
    margin: 0 0 50px;
    width: 100% !important;
    padding: 0;
    position: relative; }
    @media (max-width: 767px) {
      #projects > section > article > section.thumbs > article:nth-child(1) {
        margin-bottom: 50px; } }
    #projects > section > article > section.thumbs > article > section.overlayDescript {
      border: 0;
      margin: 0 auto 30px;
      height: 500px;
      background-color: #000000;
      padding: 0;
      overflow: hidden; }
      @media (max-width: 767px) {
        #projects > section > article > section.thumbs > article > section.overlayDescript {
          margin-bottom: 50px; } }
      #projects > section > article > section.thumbs > article > section.overlayDescript > h3 {
        cursor: pointer;
        font-size: 2.2rem;
        color: #FFF;
        left: 0;
        margin: 380px auto 0;
        position: absolute;
        right: 0;
        text-align: center;
        text-transform: uppercase;
        z-index: 3; }
        @media (max-width: 1450px) {
          #projects > section > article > section.thumbs > article > section.overlayDescript > h3 {
            font-size: 1.5rem; } }
        #projects > section > article > section.thumbs > article > section.overlayDescript > h3 .graphic {
          background: #FFF;
          height: 6px;
          margin: 10px auto 0;
          width: 60px; }
      #projects > section > article > section.thumbs > article > section.overlayDescript .overlayClass {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        padding: 0; }
        #projects > section > article > section.thumbs > article > section.overlayDescript .overlayClass img {
          width: 100%;
          height: 100%; }
      #projects > section > article > section.thumbs > article > section.overlayDescript .titles {
        position: absolute;
        z-index: 1;
        background-color: rgba(51, 150, 203, 0.9);
        width: 100%;
        height: 100%;
        display: inline-block;
        padding: 0 5%; }
        #projects > section > article > section.thumbs > article > section.overlayDescript .titles > h3 {
          font-size: 2.2rem;
          font-weight: bold;
          color: #FFF;
          margin-top: 30px;
          margin-bottom: 20px;
          text-align: center;
          text-transform: uppercase; }
        #projects > section > article > section.thumbs > article > section.overlayDescript .titles > h3 .graphic {
          background: #FFF;
          height: 6px;
          margin: 10px auto 0;
          width: 60px; }
        #projects > section > article > section.thumbs > article > section.overlayDescript .titles > p {
          font-size: 1.7rem;
          line-height: 30px;
          text-align: center; }
          @media (max-width: 1450px) {
            #projects > section > article > section.thumbs > article > section.overlayDescript .titles > p {
              font-size: 1.3rem;
              height: 400px;
              overflow-y: scroll; } }
  #projects section:nth-child(2) .thumbs:nth-child(1) article:nth-child(2n + 0) section section.titles {
    background-color: rgba(236, 170, 30, 0.9); }
  #projects section:nth-child(2) .thumbs:nth-child(2) article:nth-child(2n + 1) section section.titles {
    background-color: rgba(236, 170, 30, 0.9); }
  #projects section:nth-child(3) .thumbs:nth-child(1) article:nth-child(2n + 0) section section.titles {
    background-color: rgba(236, 170, 30, 0.9); }
  #projects section:nth-child(3) .thumbs:nth-child(2) article:nth-child(2n + 1) section section.titles {
    background-color: rgba(236, 170, 30, 0.9); }
  #projects section:nth-child(2) article .thumbs:nth-child(1) article:nth-child(2) section section.titles > h3,
  #projects section:nth-child(2) article .thumbs:nth-child(1) article:nth-child(2) section section.titles > p,
  #projects section:nth-child(2) article .thumbs:nth-child(2) article:nth-child(1) section section.titles > h3,
  #projects section:nth-child(2) article .thumbs:nth-child(2) article:nth-child(1) section section.titles > p {
    color: #000; }
  #projects section:nth-child(3) article .thumbs:nth-child(1) article:nth-child(2) section section.titles > h3,
  #projects section:nth-child(3) article .thumbs:nth-child(1) article:nth-child(2) section section.titles > p,
  #projects section:nth-child(3) article .thumbs:nth-child(2) article:nth-child(1) section section.titles > h3,
  #projects section:nth-child(3) article .thumbs:nth-child(2) article:nth-child(1) section section.titles > p {
    color: #000; }
  #projects section:nth-child(2) article .thumbs:nth-child(1) > article:nth-child(even) > section.overlayDescript > section.titles > h3 > .graphic,
  #projects section:nth-child(2) article .thumbs:nth-child(2) article:nth-child(odd) > section.overlayDescript > section.titles > h3 > .graphic,
  #projects section:nth-child(3) article .thumbs:nth-child(1) > article:nth-child(even) > section.overlayDescript > section.titles > h3 > .graphic,
  #projects section:nth-child(3) article .thumbs:nth-child(2) article:nth-child(odd) > section.overlayDescript > section.titles > h3 > .graphic {
    background: #000;
    border-color: #000; }
  #projects > section > article > section.thumbs > article > section.uiTxt {
    color: #FFF;
    font-weight: bold;
    padding: 0 2%;
    position: relative; }
    #projects > section > article > section.thumbs > article > section.uiTxt p {
      color: #2B2B2B;
      font-size: 1.7rem;
      line-height: 30px;
      text-align: center; }
      @media (max-width: 500px) {
        #projects > section > article > section.thumbs > article > section.uiTxt p {
          font-size: 1.4rem; } }
      #projects > section > article > section.thumbs > article > section.uiTxt p span {
        font-size: 2rem;
        font-weight: bold; }
    #projects > section > article > section.thumbs > article > section.uiTxt p:nth-child(2) {
      line-height: normal;
      margin: 20px auto 0;
      min-width: 200px;
      width: 200px; }
      #projects > section > article > section.thumbs > article > section.uiTxt p:nth-child(2) a {
        color: #3396CB;
        font-weight: bold;
        text-decoration: none; }
    #projects > section > article > section.thumbs > article > section.uiTxt ul {
      list-style: disc; }
      #projects > section > article > section.thumbs > article > section.uiTxt ul li {
        color: #2B2B2B; }
  #projects .uiTxt2 {
    display: none; }
  #projects .uicopy a {
    color: #FFF;
    font-size: 1em; }

#wireframes {
  background-color: #D0D2D3; }
  #wireframes h2 {
    color: #2B2B2B; }
    #wireframes h2 .graphic {
      margin-bottom: 75px; }
  #wireframes > section {
    padding: 40px 3%;
    width: 100%; }
  #wireframes .wireWrap > section {
    padding: 0 5%; }
    #wireframes .wireWrap > section article h3 {
      font-size: 1.9rem;
      font-weight: bold;
      margin-bottom: 25px;
      text-transform: uppercase; }
      @media (max-width: 767px) {
        #wireframes .wireWrap > section article h3 {
          font-size: 2rem; } }
    #wireframes .wireWrap > section article p {
      line-height: 30px;
      margin-bottom: 20px; }
      @media (max-width: 767px) {
        #wireframes .wireWrap > section article p {
          font-size: 1.8rem; } }
      #wireframes .wireWrap > section article p .slideUnder:hover:after {
        width: 20%;
        background: #ECAA1E; }
    #wireframes .wireWrap > section section figure {
      width: 100%; }
      @media (max-width: 767px) {
        #wireframes .wireWrap > section section figure {
          margin-bottom: 20px; } }
    #wireframes .wireWrap > section section figure img {
      width: 100%; }
  #wireframes .ghunt .wireWrap .row article h3, #wireframes .ghunt .wireWrap .row article p, #wireframes .ghunt .wireWrap .row article p a, #wireframes .photobomb .wireWrap .row article h3, #wireframes .photobomb .wireWrap .row article p, #wireframes .photobomb .wireWrap .row article p a {
    color: #2B2B2B; }
  #wireframes .ghunt .wireWrap .row article p a, #wireframes .photobomb .wireWrap .row article p a {
    text-decoration: underline; }
  #wireframes .ulog {
    background-color: #3396CB; }
    #wireframes .ulog .wireWrap .row article p a {
      text-decoration: underline; }

footer {
  background: #2B2B2B;
  padding: 30px 3%; }
  @media (max-width: 500px) {
    footer {
      bottom: 0;
      left: 0;
      margin: 0 auto;
      padding: 10px 3%;
      position: absolute;
      right: 0;
      text-align: center;
      z-index: 3; } }
  footer article {
    margin: auto;
    align-items: center; }
    @media (max-width: 800px) {
      footer article {
        display: flex;
        flex-direction: column;
        width: 100%; } }
    footer article p {
      font-size: 1em;
      margin-right: 1%; }
      @media (max-width: 500px) {
        footer article p {
          float: none;
          line-height: 25px;
          text-align: center; } }
      @media (max-width: 800px) {
        footer article p {
          margin-bottom: 15px; } }
      @media (max-width: 991px) {
        footer article p {
          font-size: .9em; } }
    footer article section {
      justify-content: space-between; }
      @media (max-width: 800px) {
        footer article section {
          justify-content: center;
          width: 100%; } }
      footer article section figure {
        margin-right: 10%; }
      footer article section figure:last-child {
        margin-right: 0; }
      footer article section figure img {
        cursor: pointer; }
        @media (max-width: 991px) {
          footer article section figure img {
            width: 25px; } }
  footer ul {
    float: right;
    width: 220px; }
    footer ul li, footer ul p {
      margin-right: 3%; }
    footer ul li {
      cursor: pointer;
      font-size: .8em; }
      footer ul li:hover {
        color: #ECAA1E; }