/* Navigation Bar (nav) */

nav,
nav div,
nav a {
  transition: all 0.3s ease;}

nav {
 z-index: 99;
 opacity: 0.95;
 width: 100%;
 background-color: #111;
 position: fixed; top: 0; left: 0;
  -webkit-transform: translate(0,-84px);}

nav.fixed {
  -webkit-transform: translate(0,0);}

nav,
nav.fixed {
 transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);}

nav,
nav .wrap {
 height: 84px;}

nav .wrap {
  width: 80%;
  max-width: 850px;}

nav .col-left {
 width: 20%;
 float: left;
 opacity: 0;
 -webkit-transform: translate(50px,0);}

nav.fixed .col-left {
 opacity: 1;
 -webkit-transform: translate(0,0);}

nav .col-mid {
 float: left;
 width: 60%;
 text-align: center;}

nav .col-right {
 position: relative;
 float: right;
 -webkit-transform: translate(-30px,0);}

nav.fixed .social {
 -webkit-transform: translate(0,0);}

nav .social:after {
 content: "";
 display: block;
 clear: both;}

nav a {
 font-family: Radikal-Medium;
 font-weight: bold;
 font-size: 12px;
 letter-spacing: 2px;
 float: left;
 text-transform: uppercase;}

nav.fixed a.nav {
 padding: 18px 30px;}

nav a.nav.active {
 -webkit-animation: nav-active 0.3s ease forwards;}
@-webkit-keyframes nav-active {
 from {color: #555;}
 50% {color: #333;}
 to {color: #ddd;}
}

nav a.nav span {
 background-color: #AAAFBC;
 height: 5px; width: 0px;
 margin: 10px auto 0;
 display: block;
 position: relative;}

nav .col-left a {
  color: #555;
 height: 85px; width: 163px;
 padding-top: 29px;
 text-align: left;
 display: block;
 background-size: contain;}

nav .logo {
  color: #ddd;
  font-size: 0px;
  margin-top: 25px;
  letter-spacing: 2px;
  font-family: Radikal-Black;
  text-transform: uppercase;
  float: none;
  display: block;
  background: no-repeat center url("../img/logo.png");
  transition: all ease 0.3s;}

nav .logo:hover {
  color: #fff;
  transition: all ease 2s;}

nav .logo i {
  font-style: normal;
  letter-spacing: 1px;}

nav .col-left.savage {
  width: 140px;}

nav .col-right {
  width: 20%;}

nav .col-right a {
  color: #555;}

nav .col-right a.cta {
 float: right;
 color: #888;
 font-size: 18px;
 border-radius: 8px;
 padding: 13px 15px;
 margin: 15px 0 0 0;
 height: 26px; width: 30px;
 background: transparent no-repeat center url("../img/ico-email.png");
 background-size: 25px;
 position: absolute; top: 0px; right: 10px;
 opacity: 1;}

nav .col-right a.cta:hover {
 color: #fff;
 opacity: 0.5;}

nav .col-right a.cta.focus {
  position: fixed;
  z-index: 100;}

nav .col-right a.focus {
 background-color: #000;}

@media only screen 
and (max-width : 550px) {

 nav .wrap {
  width: 100%;}

}










#click-splash {
  display: block;
  height: 10%;
  width: 10%;
  border-radius: 100%;
  position: absolute;
  background: #10181E;
  opacity: 0;
  z-index: 100;
  transition: all ease 0.6s;}

#click-splash.enlarge {
  opacity: 1;
 -webkit-animation: click-splash 1.3s 1;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes click-splash {
 from {
  -webkit-transform: scale(1,1);
  opacity: 0;}
 5% {
  -webkit-transform: scale(1,1);
  opacity: 1;}
 to {
  -webkit-transform: scale(40,40);
  opacity: 1;}
}










/* Splash (#intro) */

#intro {
 z-index: 2;
 background-color: #111;
 height: 73vh;
 width: 100%;
 padding: 0;
 margin: 0 auto;
 position: relative;
 transition: all ease 0.6s;}

body.initial-state #intro {}



#intro:before,
#intro:after {
  content: "";
  background-image: url("../img/backdrop.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: absolute;
   top: 0; left: 0;
   height: 100%;
   width: 100%;
   z-index: -1;
   opacity: 1;
   width: calc(100% + 200px);
   -webkit-transform: translate(-200px,0);
   transition: all 3.5s;}

#intro:before {
 -webkit-animation: intro-bg-scroll 15s 7s infinite;
 -webkit-animation-timing-function: linear;}

#intro:after {
 -webkit-animation: intro-bg-scroll 15s 3.5s infinite;
 -webkit-animation-timing-function: linear;}
@-webkit-keyframes intro-bg-scroll-off {
 from {-webkit-transform: translate(-200px,0); opacity: 0;}
 10% {opacity: 1;}
 90% {opacity: 1;}
 to {-webkit-transform: translate(-100px,0); opacity: 0;}
}

body.initial-state #intro:before,
body.initial-state #intro:after {
  -webkit-transform: scale(1.1,1.1);
   -webkit-transform: translate(-200px,0);
   opacity: 0;}

#intro .bg-gradient {
  position: absolute; top: 80%;
  height: 20%; width: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#191919+0,191919+100&0+0,1+100 */
  background: -moz-linear-gradient(top, rgba(25,25,25,0) 0%, rgba(25,25,25,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,25,25,0)), color-stop(100%,rgba(25,25,25,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(25,25,25,0) 0%,rgba(25,25,25,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(25,25,25,0) 0%,rgba(25,25,25,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(25,25,25,0) 0%,rgba(25,25,25,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(25,25,25,0) 0%,rgba(25,25,25,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00191919', endColorstr='#191919',GradientType=0 ); /* IE6-9 */}

.nav-arrow {
 z-index: 3;
 position: absolute; bottom: 38vh; left: 50%;
 height: 70px; width: 70px;
 margin-left: -35px;
 -webkit-transform: scale(1,1);
 transition: all ease 0.3s;}

.nav-arrow:hover {}

.nav-arrow:before {
  background: no-repeat center #1C1E23 url("../img/ico-arrow-nav.png");
  box-shadow: 0px 0px 12px 6px rgba(0,0,0,0.4);
  content: "";
  display: block;
  position: absolute; top: 0; left: 0;
  height: 100%; width: 100%;
  border-radius: 100%;
  transition: all ease 0.2s;}

.nav-arrow:hover:before {
  background-color: #E29C76;
  transition: all ease 0.2s;}

body.initial-state .nav-arrow,
.nav-arrow.hide {
 -webkit-transform: scale(0,0);
 transition: all ease 0.3s;}

#intro .inner-wrap {
  position: relative; top: 26vh;
  width: 800px;
  margin: 0 auto;
  z-index: 1;}

#intro h1 {
  display: inline-block;
  width: 80%;
  margin: 0 auto 0 -30px;}

#intro h4 {
  color: #E29C76;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
  margin-bottom: 0;
  line-height: 20px;
  transition: all 1.3s ease;}

#intro h4.pre {
  float: left;
  font-size: 13px;
  margin-left: 125px;}

#intro h4.post {
  float: right;
  border: 1px solid grey;
  border-radius: 100%;
  padding-top: 4px;
  font-size: 19px;
  height: 31px;
  width: 35px;}

#intro .headshot {
  z-index: 2;
  background: url("../img/headshot-1.png") center no-repeat;
  background-size: contain;
  height: 90%; width: 80%;
  position: absolute; top: 8%; left: calc(50% - 40% - 30px);
  margin: 0 auto;
  opacity: 1;
  -webkit-transform: scale(1,1);
  transition: all 0.9s ease;}

#intro .balloon {
  background: url("../img/balloon.png") center no-repeat;
  background-size: contain;
  height: 200px; width: 150px;
  position: absolute; top: -8%; left: 70%;
  opacity: 0.8;
  -webkit-transform: scale(1,1);
  transition: all 0.3s ease;
 -webkit-animation: balloon-drop-off 10s;}
@-webkit-keyframes balloon-drop {
 from {top: -12%;}
 15% {top: -8%;}
 30% {top: -12%;}
 40% {top: -8%;}
 60% {top: -12%;}
 to {top: -8%;}
}

#intro .word {
  float: left;
  overflow: hidden;
  height: 100px; width: 50%;}

#intro .word.ameer {
  margin-left: 0%;
  position: relative; left: 6%;}

#intro .word.savage {
  margin-right: 0%;
  position: relative; left: 1%;}

#intro h1,
#intro .word,
#intro .word img {
  transition: all 1.7s ease;}


body.initial-state #intro h1 .word {
  -webkit-transform: translate(-0,0);
  opacity: 0;}

body.initial-state #intro h4 {
  -webkit-transform: translate(0,-20px);
  opacity: 0;}

body.initial-state #intro h4.post {
  -webkit-transform: scale(0,0) !important;
  opacity: 0;}


body.initial-state #intro .headshot {
  -webkit-transform: scale(1,1) translate(0,60px) !important;
  opacity: 0;}

body.initial-state #intro .balloon {
  -webkit-transform: scale(0.8,0.8) !important;
  opacity: 0;}


#portfolio .project-wrap {
  opacity: 1;
  z-index: 2;
  width: calc(100% - 1px);
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  position: relative;
  transition: all .9s;}

.project-wrap,
.project,
.project .thumb {
   cursor:pointer;
}

#portfolio .project-wrap.left {
  float: left;}

#portfolio .project-wrap.right {
  float: right;}

body.initial-state #portfolio .project-wrap {
  opacity: 0;
  -webkit-transform: translate(0,30px) !important;}





#intro h1 .word.ameer {
  background: url(../img/type-ameer.png) center no-repeat;
  background-size: contain;
  -webkit-transform: translate(-75px,0);
  opacity: 1;}

#intro h1 .word.savage {
  background: url(../img/type-savage.png) center no-repeat;
  background-size: contain;
  -webkit-transform: translate(75px,0);
  opacity: 1;}





#intro h1 {transition-delay: 1s;}
#intro h1 .word.ameer {transition-delay: 1s;}
#intro h1 .word.savage {transition-delay: 1s;}
#intro h4.pre {transition-delay: 1.6s;}

.nav-arrow {transition-delay: 2.7s;}
#intro .headshot {transition-delay: 2.5s;}
#intro:before {transition-delay: 0s;}
#intro .balloon {transition-delay: 2.8s; -webkit-animation-delay: 3.8s;}
#intro h4.post {transition-delay: 3.4s;}


#portfolio .project-wrap:nth-of-type(1) {transition-delay: 2.5s;}
#portfolio .project-wrap:nth-of-type(2) {transition-delay: 2.5s;}
#portfolio .project-wrap:nth-of-type(3) {transition-delay: 2.6s;}
#portfolio .project-wrap:nth-of-type(4) {transition-delay: 2.6s;}
#portfolio .project-wrap:nth-of-type(5) {transition-delay: 2.7s;}
#portfolio .project-wrap:nth-of-type(6) {transition-delay: 2.7s;}
#portfolio .project-wrap:nth-of-type(7) {transition-delay: 2.8s;}
#portfolio .project-wrap:nth-of-type(8) {transition-delay: 2.8s;}

/*
#intro .headshot {
  background: transparent no-repeat center url("../img/hero-headshot.png");
  background-size: contain;
  position: absolute; top: 4%; left: 50%;
  height: 110%; width: 504px;
  margin: 0 auto 0 -252px;
  transition: all ease 0.6s;}

body.initial-state #intro .headshot {
  -webkit-transform: scale(.98,.98) translate(0,20px);
  opacity: 0;}
*/

/*
.pulse {
  z-index: 2;
  background: no-repeat center transparent url("../img/pulse.png");
  background-size: contain;
  position: absolute; bottom: 65px; left: 50%;
  height: 30px; width: 30px;
  margin-left: -15px;
  opacity: 0;
  transition: all ease 0.6s;}

.pulse {
 -webkit-animation: pulse 0.6s 7;
 -webkit-animation-timing-function: linear;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes pulse {
 from {
  -webkit-transform: rotate(0deg);}
 to {
  -webkit-transform: rotate(360deg);}
}

body.initial-state .pulse {
  opacity: 1;}

*/
/* Transition Sequence */
/*
#intro:before,
#intro .headshot {
  transition-delay: 4s;}
*/

@media only screen 
and (max-width : 800px) {

  #intro {
    height: 70vh;}

  #intro .headshot {
    width: 120%;
    left: calc(50% - 60% - 30px);
    opacity: 0;
    z-index: 0;
    transition: all 0.1s;}

  #intro .balloon {
    display: none;}

  #intro .inner-wrap {
    width: 80%;}

  #intro .inner-wrap h1 .word {
    width: 50%;
   -webkit-transform: translate(0,0) !important;
    transition: all 0.1s;}

  #intro .inner-wrap h4 {
    margin: 0 auto 0;
    text-align: center;
    width: 100%;
    transition: all 0.1s;}

  #intro h1 {
    width: 100%;}


  .nav-arrow {
    left: 50%;
    margin-left: -35px;}

}












#portfolio {
 overflow: visible;
  z-index: 2;
 position: relative;
 padding: 0 0 0 0;
 width: 80%;
 margin: -15vh auto -50px;
background: #111;
box-shadow: 0px 0px 48px 12px rgba(0,0,0,0.5);}

.case-studies .col .left,
.case-studies .col .right {
 margin: 0;
 width: 50%;}

/* Fallback if script fails */
.case-studies .col .left .case-study:first-of-type,
.case-studies .col .right .case-study:last-of-type {
  height: 300px;}

.project {
 float: left;
 position: relative;
 width: 100%; height: 600px;
 z-index: 2;
 display: table;
 overflow: hidden;
}

.project:nth-child(even) {
 background: #5a3a53;
}

.project .thumb {
  display: block;
 position: absolute;
 width: 100%; height: 100%;
 background: #555 none no-repeat 30% center;
 opacity: 0.3;
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 filter: grayscale(100%);}

.project-wrap.tall,
.project-wrap.tall .project {
  height: 550px;}

.project-wrap.short,
.project-wrap.short .project {
  height: 275px;}

.project:hover .thumb {
  opacity: .8;
/* Slowed performance of title slide */
 box-shadow: 0px 0px 14px 6px rgba(0,0,0,0.2);
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 filter: grayscale(0%);
 transition: all 0.2s ease;
}

/* Testing for touch focus
.case-study: target {
 -webkit-animation: pulse 0.5s 1;}
/* Only works on click hold
@-webkit-keyframes pulse {
 50% {-webkit-transform: scale(1,1);}
 to {-webkit-transform: scale(1.125,1.125);}
}
*/

.project .thumb:before {
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 background-color: #2E2D33;
 display: table-cell; 
 vertical-align: middle;
  content: "";
  opacity: 1;
 -webkit-transform: scale(1.1,1.1);
 height: 100%;
 width: 100%;
 z-index: -2;
 position: absolute;}

 .project .thumb:before {
  z-index:-1;
  background-color: #353535;
 }


.project:hover .thumb {
 -webkit-animation: case-study-bg-thumb 4.5s 1;}
@-webkit-keyframes case-study-bg-thumb {
 from {-webkit-transform: scale(1,1);}
 10% {-webkit-transform: scale(1.1,1.1);}
 to {-webkit-transform: scale(1,1);}
}


.project .info {
  display: block;
  width: 100%;
  height: 60px;
    position: absolute; bottom: 0; left: 0;
     font-family: Radikal-Black;
      letter-spacing: 0px;
  text-align: center;
  opacity: 0;z-index: 0;
text-shadow: 0px 0px 14px rgba(0, 0, 0, 1);
  transition: all 0.2s ease;}
.project .title {
  opacity: 0;
 color: #fff;
  display: block;
 font-size: 28px;
 text-align :left;
 padding-left: 10%;
  -webkit-transform: translate(30px,0);
}

.project .desc {
  opacity: 0;
 color: #fff;
 font-size: 12px;
  display: block;
  text-transform: uppercase;
 text-align :right;
 padding-right: 10%;
 margin-top: -30px;
  -webkit-transform: translate(-30px,0);
}

.project:hover .info {
  opacity: 1;
  transition: 0.3s ease all;}

.project:hover .info .title {
  opacity: 1;
  -webkit-transform: translate(0,0);
  transition: 0.3s ease all;}

.project:hover .info .desc {
  opacity: 1;
  -webkit-transform: translate(0,0);
  transition: 0.3s ease all;}

/*
.case-study span:after {
 content: '';
 background: transparent no-repeat center url("../img/ico-magnify.png");
 opacity: 0;
 display: block;
 position: absolute; top: 0; left: 0;
 width: 101%; height: 101%;
 z-index: -1;
 transition: opacity 0.4s ease;}

.case-study:hover span:after {
 opacity: 1;
 transition: opacity 0.4s ease;}
*/
.project.icon-lock span {
 background-color: #FFF;}

#portfolio [class^="icon-"]:before,
#portfolio [class*=" icon-"]:before {
  color:white;
  width: 100%;
  height: auto;
  margin-top: 38%;}



.cooper.project .thumb:before {background-image: url("../img/work/cooper/thumb/a.jpg");}
.cooper.project .thumb:after {background-image: url("../img/work/cooper/thumb/b.jpg");}

.cooper2.project .thumb:before {background-image: url("../img/work/cooper2/thumb/a.jpg");}
.cooper2.project .thumb:after {background-image: url("../img/work/cooper2/thumb/b.jpg");}

.hublot.project .thumb:before {background-image: url("../img/work/hublot/thumb/a.jpg");}
.hublot.project .thumb:after {background-image: url("../img/work/hublot/thumb/b.jpg");}

.map.project .thumb:before {background-image: url("../img/work/map/thumb/a.jpg");}
.map.project .thumb:after {background-image: url("../img/work/map/thumb/b.jpg");}

.mario.project .thumb:before {background-image: url("../img/work/mario/thumb/a.jpg");}
.mario.project .thumb:after {background-image: url("../img/work/mario/thumb/b.jpg");}

.logos.project .thumb:before {background-image: url("../img/work/logos/thumb/a.jpg");}
.logos.project .thumb:after {background-image: url("../img/work/logos/thumb/b.jpg");}

.pocketz.project .thumb:before {background-image: url("../img/work/pocketz/thumb/a.jpg");}
.pocketz.project .thumb:after {background-image: url("../img/work/pocketz/thumb/b.jpg");}

.shoes.project .thumb:before {background-image: url("../img/work/shoes/thumb/b.jpg");}
.shoes.project .thumb:after {background-image: url("../img/work/shoes/thumb/a.jpg");}

.spire.project .thumb:before {background-image: url("../img/work/spire/thumb/a.jpg");}
.spire.project .thumb:after {background-image: url("../img/work/spire/thumb/b.jpg");}

.tailor.project .thumb:before {background-image: url("../img/work/tailor/thumb/a.jpg");}
.tailor.project .thumb:after {background-image: url("../img/work/tailor/thumb/b.jpg");}

.united.project .thumb:before {background-image: url("../img/work/united/thumb/a.jpg");}
.united.project .thumb:after {background-image: url("../img/work/united/thumb/b.jpg");}

#portfolio .link {
  display: block;
  position: absolute;
  top: 50%; right: -35px;
  /* top is overwritten in JS */
  margin-top: -35px;
  height: 70px; width: 70px;
  border-radius: 100%;
  background: #333 url("../img/ico-play.png") center no-repeat;
  box-shadow: 0px 0px 12px 6px rgba(0,0,0,0.4);
  z-index: 2;
  transition: all 0.3s ease;}

#portfolio .right .link {
  margin-right: -35px;
   right: 0%;}

#portfolio .left .link {
  margin-left: -35px;
   left: 0%;}

#portfolio .focus .link {
  background-color: #2868C6;
  box-shadow: 0px 0px 12px 6px rgba(0,0,0,0.4);
  transition: all 0.3s ease;}

#portfolio .focus.right .link {
  }

#portfolio .focus.left .link {
  }

#portfolio .focus .link:hover {
  -webkit-transform: scale(1.3,1.3);
  box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;}
/*
#albox-arrow-prev.icon-left-big,
#albox-arrow-next.icon-right-big {
  background: none;}
*/
#albox-arrow-prev.icon-left-big:before,
#albox-arrow-next.icon-right-big:before {
  margin-top: 50%;
  font-size: 25px;
  text-shadow: 0px 0px 9px rgba(0,0,0,1);}

#portfolio .project-wrap.dim .thumb {
  opacity: 0.3;
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 filter: grayscale(100%);}
#portfolio .project-wrap.dim.focus .thumb {
  opacity: 0.9;
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 filter: grayscale(0%);}

@media only screen 
and (max-width : 800px) {

  #portfolio {
    width: 60%;}

  .project-wrap {
    width: 100% !important;}

}












#bio {
 padding-bottom: 0px;
 position: relative;
 background-color: #404040;
 margin-bottom: -63px;
 padding-top: 180px;
 overflow: visible;}

#bio * {
  position: relative;
  z-index: 1;
}

#bio h2 span {
  color: #888;
  font-size: 20px;
  letter-spacing: 2px;
  text-decoration: uppercase;}

#bio .hover {
  display: block;
  height: 60px;
  width: 60px;
  border-radius: 5px;
  background: #222;
  font-size: 80px;
  color: #ccc;
  position: absolute;
  top: 0;
  z-index: 1;
/*  
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
*/
}

#bio .hover.like {margin-top: 240px; right: 5%;}
#bio .hover.heart {margin-top: 430px; left: 10%;}
#bio .hover.mail {margin-top: 550px; right: 5%;}

#bio .hover img {
  width: 50%;
  opacity: 0.2;
  margin: 5px auto;}

#bio .large {
  width: 72%;
  color: #bbb;
  margin: 80px auto 0;}

#bio .profile {
  max-width: 740px;
  width: 80%;
  z-index: 2;
  position: relative;}

#bio .profile .col-mid {
  width: 44%;
  margin: 0;}

#bio .profile .col-left,
#bio .profile .col-right {
  width: 28%;
  margin: 85px 0 0;}

#bio .profile .col-left a,
#bio .profile .col-right a {
  width: 30%;
  padding: 15% 0 0;
  height: 50px;
  margin: 0 auto;}

#bio .profile a {
 background: transparent no-repeat center;
 background-size: 45px;
 opacity: 0.5;
 height: 50px;
 width: 50px;
 display: block;}

#bio .profile a:hover {
  opacity: 1;}

#bio .profile a.linkedin {
  background-image: url("../img/ico-email.png");}

#bio .profile a.mail {
 background-image: url("../img/ico-email.png");}

#bio .profile .headshot,
#connect .headshot {
 display: block;
 height: 270px;
 width: 100%;
 position: relative;
 margin: auto;
 background-image:url("../img/headshot.jpg");
 background-size: cover;
 background-position: center;
  background-color: #888;
  box-shadow: 0px 0px 20px rgba(0,0,0,2);
  border-radius: 300px;
  transition: all 0.4s ease;}

#bio .profile a.headshot.reveal {}

#bio .employer {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -35px;
  background: transparent;
  overflow: visible;
  z-index: 1 !important;}

#bio .employer h3 {
  text-transform: none;
  font-family: Radikal-Bold;
  font-weight: normal;
  letter-spacing: 1px;
  font-size: 18px;
  margin-top: 0;}

#bio .employer h3:after {
  margin-bottom: 110px;}

#bio .employer .col {
  max-width: 800px;
  margin: 0 auto;}

#bio .employer .col h4 {
  background: #222;
  border-radius: 6px 6px 0 0;
  padding: 15px 0 13px;
  margin-top: 0;
 color: #888;
 margin-bottom: 70px;}

#bio .employer .current,
#bio .employer .previous {
  width: 50% !important;
  height: 390px;
  margin: 0 auto;}

#bio .employer .current {
  background: #272727;
  border-radius: 6px 0 0 6px;
  text-align: center;}

#bio .employer .previous {
  background: #333;
  border-radius: 0 6px 6px 0;}

#bio .employer .wrap {
  height: 100%;}

#bio .employer .current .wrap {
  padding: 0;}

#bio .employer .previous .wrap {
  padding: 0;}

#bio .employer .previous p {
  color: #aaa;
  margin: 0 auto 20px;
  width: 80%;}

#bio .employer .previous p img.calendar {
  width: 15px;
  margin-bottom: -2px;
  opacity: 0.5;}

#bio .employer .current .label {
  margin-bottom: 20px;}

#bio .employer .current img.logo {
  width: 70%;}

#bio .employer .label,
#bio .employer .blurb {
  display: block;
  font-style: italic;
  color:#9D9D9D;
  letter-spacing: 1px;}

#bio .canvas {
 background: #222;
 position: absolute; top: 0; left: 0;
 width: 100%;
 z-index: 0;}

#bio .canvas .gradient {
 height: 320px; width: 100%;
 background: #222222; /* Old browsers */
 background: -moz-linear-gradient(top, #222222 0%, #444 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#444)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #222222 0%,#444 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #222222 0%,#444 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #222222 0%,#444 100%); /* IE10+ */
 background: linear-gradient(to bottom, #222222 0%,#444 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#444',GradientType=0 ); /* IE6-9 */}

#bio .canvas .image {
  background-image: url("../img/bg-desert.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  height: 600px; width: 100%;
  margin-top: -200px;}

@media only screen 
and (max-width : 800px) {

  #bio .large {width: 100%;}

  #bio .employer .col.two .current,
  #bio .employer .col.two .previous {
    width: 100%;
    float: none;
  }

}




/* #fin */

#fin {
  background-color: #404040;
  margin-top: -317px;
  padding-top: 530px;
  padding-bottom: 280px;
  overflow: visible;
  position: relative;
  z-index: 0;
}

#fin h2 {
  letter-spacing: 3px;
}

#fin:before {
/*  background-image: url("../img/city.jpg");*/
  background-size: contain;
  background-position: bottom center;
  z-index: -1;
}

#fin a {
  background-color: #CECA14;
  border-width: 0;
  border-radius: 5px;
}

#fin a:hover {
  background-color: #90AB76;
}






/* Media - Fluid (Tablets & Smartphones) (50%) */
@media only screen 
and (min-width : 320px) 
and (max-width : 1024px) {

 #contact .panel-left,
 #contact .panel-right {
  width: 100%;
  float: none;}

 #contact .panel-left {
  display: none;
 }

.case-studies .wrap {
		width: 100%;
		max-width: 580px;}

	.case-study {
		height: 300px;}

 .case-study:nth-of-type(2),
 .case-study:nth-of-type(3),
 .case-study:nth-of-type(6) {
  background-color: #3B3A3F;}

 .case-study:nth-of-type(1),
 .case-study:nth-of-type(4),
 .case-study:nth-of-type(5) {
  background-color: #2E2D33;}

}



/* Media - Smartphones only (portrait and landscape) */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {

 #contact input,
 #contact select {
  width: 100%;
  float: none;}

	.case-study {
		height: 12%;}

	#portfolio.focus .case-study:before {
		content: "X";}

	.nav-close {
		display: none;}

}

/* Desktops and laptops */
@media only screen 
and (min-width : 1224px) {

}

/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

}










/* Section break */






#bar {
    width:0%;
    height:100%;
    position:relative;
    background:#7287AC;
    -webkit-transition:width 0.6s;
    -moz-transition:width 0.6s;
    -o-transition:width 0.6s;
    -ms-transition:width 0.6s;
    transition:width 0.3s;}

#progress {
    height:4px;
    width:15%;
    margin: 0 auto;}

.fixed #progress {
  width: 38%;}



.lightbox {
 background-color: #252328;
 padding: 200px 0;
 position: fixed;
 top: 0; left: 0;
 width: 100%; height: calc(100% - 200px);
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s ease;}

.lightbox.focus {
 opacity: 1;
 z-index: 101;
 visibility: visible;
 transition: opacity 0.8s ease;}



#scroll {
 background-color: #212121;
 opacity: 0;
 display: none;}

 #scroll.focus {
 display: block;
 -webkit-animation: scroll-bg 1s ease;}
@-webkit-keyframes scroll-bg {
 from {opacity: 0;}
 40% {opacity: 1;}
 90% {opacity: 1;}
 to {opacity: 0;}
}


.lightbox .slide {
 z-index: 100;
 position: fixed; top: 35%; left: 50%;
 background: #555;
 height: 40vh; width: 2px;
 transform-origin: center center;
 -webkit-transform-origin: center center;}

 .lightbox .slide:before {
 background: #999;
 display: block;
 content: "";
 width: 100%; height: 20vh;
 position: absolute;
 top: 0; left: 0;
 }

.lightbox .slide:before {
 -webkit-animation: loading-slide 0.9s 1;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes loading-slide {
 from {top: 0; 
 background: #999;}
 to {top: 20vh; 
 background: #fff;}
}

.loading-bubbles,
.loading-bubbles:before,
.loading-bubbles:after {
  border-radius: 20px;
  height: 10px; width: 10px;
  margin: 0 auto;
  display: block;
  transition: all 0.5s;
 -webkit-animation: chat-load 0.8s infinite;}

.loading-bubbles:before,
.loading-bubbles:after {
  content: "";
  position: relative;}

.loading-bubbles:before {
  right: 20px;
  float: left;
  -webkit-animation-delay: 0.6s;}

.loading-bubbles:after {
  left: 20px;
  top: -10px;
  float: right;
  -webkit-animation-delay: 0.3s;}

@-webkit-keyframes loading-bubbles {
 from {background-color: #333;}
 to {background-color: #999;}
}

.loading-bubbles.reveal {
  opacity: 0;
  transition: all 0.5s 5s;}

a.button.cta {
  background-color: transparent;
  border: 5px solid #fff;
  border-radius: none;
  transition: all 0.3s ease;}


#linkedin .wrap {
 max-width: 100%;}

#linkedin:before {
 background-image: url("../img/backdrop.jpg");}

#linkedin:before {
 -webkit-animation: linkedin-bg 1.5s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes linkedin-bg {
 from {-webkit-transform: scale(1.2,1.2); opacity: 0;}
 to {-webkit-transform: scale(1,1); opacity: 0.2;}
}

#linkedin {
 padding: 40vh 0;}

#linkedin h2 a {}

#linkedin h2 {
  border-width: 0 !important;}

#linkedin h2:after {
  display: none;}

#linkedin span {
 position: relative; left: 10px;}

#linkedin.focus span { 
 -webkit-animation: bouncing-arrow 1.2s 3;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes bouncing-arrow {
 from {-webkit-transform: translate(0,0);}
 20% {-webkit-transform: translate(20px,0);}
 to {-webkit-transform: translate(0,0);}
}

#linkedin .loading-bar {
 display: block;
 height: 1px;
 background: #777;
 position: relative;}

#linkedin .loading-bar:before {
  content: "";
  display: block;
  position: absolute; top: 0; right: 0;
  height: 100%; width: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#777777+54,dddddd+100 */
background: rgb(119,119,119); /* Old browsers */
background: -moz-linear-gradient(left, rgba(119,119,119,1) 54%, rgba(221,221,221,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(119,119,119,1) 54%,rgba(221,221,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(119,119,119,1) 54%,rgba(221,221,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#dddddd',GradientType=1 ); /* IE6-9 */
}

#linkedin.focus .loading-bar { 
 -webkit-animation: loading-bar 3s 1;
-webkit-animation-timing-function: linear;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes loading-bar {
 from {width: 0;}
 to {width: 100%;}
}

#linkedin.focus .loading-bar:before { 
 -webkit-animation: loading-bar-glow 3s 1;
-webkit-animation-timing-function: linear;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes loading-bar-glow {
 90% {opacity: 1;}
 to {opacity: 0;}
}

#linkedin.focus a {
 color: #EA504E;
 transition: color 0.1s;
 transition-delay: 3.2s;}







#connect {
  background: #222;
  position: relative;
  padding: 220px 0%;
  top: -50px;
  width: 100%;}

body {
  margin-bottom: -50px;
}

#connect.dim {
  transition: all 0.3s;}

#connect .shadow-fix {
  z-index: 1;
  position: absolute;
  top: 0; left: 10%;
  height: 50px; width: 80%;
box-shadow: 0px 0px 48px 12px rgba(0,0,0,0.5);
}

#connect .wrap {
  position: relative;
  z-index: 101;}

#connect .bg-gradient {
  position: absolute; top: 0%;
  height: 20%; width: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#191919+0,191919+100&0+0,1+100 */
  background: -moz-linear-gradient(bottom, rgba(25,25,25,0) 0%, rgba(25,25,25,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(25,25,25,0)), color-stop(100%,rgba(25,25,25,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(bottom, rgba(25,25,25,0) 0%,rgba(25,25,25,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(bottom, rgba(25,25,25,0) 0%,rgba(25,25,25,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(bottom, rgba(25,25,25,0) 0%,rgba(25,25,25,1) 100%); /* IE10+ */
  background: linear-gradient(to top, rgba(25,25,25,0) 0%,rgba(25,25,25,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00191919', endColorstr='#191919',GradientType=0 ); /* IE6-9 */}


#connect h1 {
  position: relative;
  transition: all 0.2s ease;}

#connect h1.pre {
  opacity: 1;}

#connect h1.pro {
  opacity: 0;}

#connect h1.pre.rise {
  opacity: 0;
 -webkit-transform: translate(0,-100px);
  transition: opacity 0.3s ease, transform 0.9s ease;}

#connect h1.pro.rise {
  opacity: 1;
 -webkit-transform: translate(0,-100px);
  transition: opacity 0.3s ease 0.4s, transform 0.9s ease;}

#connect h1 .word-wrap {
  height: 36px;
  position: relative;
  display: inline-block;
  transition: all 0.5s ease;}

#connect h1 .word.focus,
#connect h1 .word i,
#connect h1 .word i.focus {
  transition: all 0.5s ease;}

#connect h1 .word {
  opacity: 0;
  color: inherit;
  position: absolute; left: 0;}

#connect h1 .word.focus {
 -webkit-animation: word-focus 3.5s;
 -webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;}
@-webkit-keyframes word-focus {
 from {opacity: 0;}
 10% {opacity: 1;}
 90% {opacity: 1;}
 to {opacity: 0;}
}

#connect h1 span {font-family: inherit;}

#connect h1 .word i {
  font-family: inherit;
  color: inherit;
  position: relative; top: 30px;
  font-style: normal;
  opacity: 0;}

#connect h1 .word.focus i {
  opacity: 1;
  top: 0;}

#connect h1 .word i:nth-of-type(1) {transition-delay: 0.0s;}
#connect h1 .word i:nth-of-type(2) {transition-delay: 0.1s;}
#connect h1 .word i:nth-of-type(3) {transition-delay: 0.2s;}
#connect h1 .word i:nth-of-type(4) {transition-delay: 0.3s;}
#connect h1 .word i:nth-of-type(5) {transition-delay: 0.4s;}
#connect h1 .word i:nth-of-type(6) {transition-delay: 0.5s;}
#connect h1 .word i:nth-of-type(7) {transition-delay: 0.6s;}
#connect h1 .word i:nth-of-type(8) {transition-delay: 0.5s;}
#connect h1 .word i:nth-of-type(9) {transition-delay: 0.6s;}
#connect h1 .word i:nth-of-type(10) {transition-delay: 0.7s;}

#connect h1 .word.website, #connect.focus-one .word-wrap {width: 145px;}
#connect h1 .word.app, #connect.focus-two .word-wrap {width: 75px;}
#connect h1 .word.experience, #connect.focus-three .word-wrap {width: 205px;}

#connect.focus-one .word-wrap,
#connect.focus-two .word-wrap,
#connect.focus-three .word-wrap {
  transition: all 0.3s ease;}


/*
#connect.focus-one:before,
#connect.focus-two:before,
#connect.focus-three:before {
 -webkit-animation: bg-connect 3.51s infinite;}
@-webkit-keyframes bg-connect {
 from {opacity: 0.1; -webkit-transform: scale(1.2,1.2);}
 30% {opacity: 0.3; -webkit-transform: scale(1,1);}
 to {opacity: 0.3; -webkit-transform: scale(1,1);}
}
*/

#connect.dim .bg {
  opacity: 0.2;
  transition: all 0.6s ease 0s;}

#connect .bg {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 100%;
  background: #333;
  z-index: 0;}

#connect .bg:before {
  content: "";
  display: block;
  position: absolute; top: 0; left: 0;
  height: 100%; width: 100%;
  background: transparent url('') center no-repeat;
  background-size: cover;
  opacity: 0.1;
-webkit-transform: scale(1.1,1.1);}

#connect .bg.one:before {
  background-image: url("../img/bg-connect-1.jpg");}
#connect .bg.two:before {
  background-image: url("../img/bg-connect-2.jpg");}
#connect .bg.three:before {
  background-image: url("../img/bg-connect-3.jpg");}

#connect.focus-one .bg.one,
#connect.focus-two .bg.two,
#connect.focus-three .bg.three {
  z-index: 1;}

#connect.focus-one .bg.one:before,
#connect.focus-two .bg.two:before,
#connect.focus-three .bg.three:before {
  opacity: 0.3;
  -webkit-transform: scale(1,1);
  transition: all 0.8s ease;}


#connect .button-wrap {
  position: relative; margin-top: -80px;
  height: 60px;}

#connect.dim .button {
  -webkit-animation-play-state: paused;}

#connect .button {
  z-index: 2;
  text-align: right;
  position: absolute; bottom: 0; left: calc(50% - 125px);
  color: #fff;
  letter-spacing: 2px;
box-shadow: 0px 0px 24px 6px rgba(0,0,0,0.3);
text-shadow: 1px 2px 3px #666;
  height: 25px; width: 250px;
  padding: 15px 0 17px;
  border-radius: 5px 5px 0 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#03937b+0,027865+100 */
background: #03937b; /* Old browsers */
background: -moz-linear-gradient(top, #03937b 0%, #027865 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#03937b), color-stop(100%,#027865)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #03937b 0%,#027865 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #03937b 0%,#027865 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #03937b 0%,#027865 100%); /* IE10+ */
background: linear-gradient(to bottom, #03937b 0%,#027865 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03937b', endColorstr='#027865',GradientType=0 ); /* IE6-9 */}

#connect .button:after {
  content: "";
  display: block;
  height: 6px; width: 250px;
  margin-top: 7px;
  background: #005547;
  border-top: 2px solid transparent;
  position: absolute; bottom: -5px;
  border-radius: 0 0 9px 9px;
  transition: all 0.3s ease;}

#connect .button:before {
  content: "";
    display: block;
    height: 53px;
    width: 250px;
    background: white;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    position: absolute;
    top: 0;
  transition: all 0.3s ease;}

#connect .button:hover {
  height: 28px;
  transition: all 0.3s ease;}

#connect .button:hover:before {
  opacity: 0.2;
  transition: all 0.3s ease;}

#connect .button:hover:after {
  height: 8px;
  border-color: transparent;
  transition: all 0.3s ease;}

#connect .button:focus {
  height: 23px;
  transition: all 0s ease;}

#connect .button:focus:before {
  opacity: 0.2;
  background: #000;
  transition: all 0s ease;}

#connect .button:focus:after {
  height: 2px;
  border-color: transparent;
  transition: all 0s ease;}

#connect .button.disabled {
  background: #444;
  transition: all 0s ease;}

#connect .button.disabled:after {
  background: #222;
  transition: all 0s ease;}

#connect .button .loading {
  opacity: 0;}

#connect .button.disabled .default {
  display: none;}

#connect.active .loading {
  opacity: 1;
 display: block;
 height: 3px; width: 80%;
 background: #fff;
 position: absolute;
 top: 50%; left: 10%;}

#connect.active .loading:before {
  content: "";
  display: block;
  position: absolute; top: 0; right: 0;
  height: 100%; width: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#444444+0,d6d6d6+24,c9c9c9+76,444444+100 */
background: rgb(68,68,68); /* Old browsers */
background: -moz-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(214,214,214,1) 24%, rgba(201,201,201,1) 76%, rgba(68,68,68,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(68,68,68,1) 0%,rgba(214,214,214,1) 24%,rgba(201,201,201,1) 76%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(68,68,68,1) 0%,rgba(214,214,214,1) 24%,rgba(201,201,201,1) 76%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#444444',GradientType=1 ); /* IE6-9 */
}

#connect.active .loading { 
 -webkit-animation: loading-bar 3s 1;
-webkit-animation-timing-function: ease-out;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes loading-bar {
 from {width: 0;}
 to {width: 80%;}
}

#connect.active .loading:before { 
 -webkit-animation: loading-bar-glow 3s 1;
-webkit-animation-timing-function: linear;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes loading-bar-glow {
 from {opacity: 0;}
 to {opacity: 0;}
}





#connect .button .ico-linkedin {
  background: url("../img/ico-linkedin.png") center no-repeat;
  height: 25px; width: 25px;
  margin: 0 20% 0 6%;
  display: block;
  float: right;}

#connect h1 {
 font-family: Radikal-Medium;
 font-size: 40px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  text-transform: none;}

#connect h2 img {
  margin: 0 7px;
  height: 45px;}


#connect .balloon {
  background: url("../img/balloon.png") center no-repeat;
  background-size: contain;
  height: 400px; width: 200px;
  margin-left: -100px;
  position: absolute; top: -15%; left: 50%;
  opacity: 1;
  -webkit-transform: translate(0,0);
  transition: all 0.3s ease;
 -webkit-animation: connect-levitate 5s 1s infinite;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes connect-levitate {
 from {-webkit-transform: translate(0,0);}
 50% {-webkit-transform: translate(0,-15px);}
 to {-webkit-transform: translate(0,0);}
}

#connect .balloon:after {
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 1px); bottom: -105px;
  height: 190px; width: 0;
  border-left: 3px dotted #777;
 -webkit-animation: connect-levitate 7s 1s infinite;}

#connect.dim .balloon {
  opacity: 0;
  -webkit-animation-play-state: paused;
  transition: all 0.3 ease;}

#connect .sprinkle {
  position: absolute;
  left: 30%;
  bottom: 0%;
  height: 50px;
  width: 50px;
 -webkit-animation: coin-drop 2.5s 1s infinite;
 -webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;}
@-webkit-keyframes coin-drop {
 from {
  -webkit-transform: translate(1000%,-1000%);}
 25% {
  -webkit-transform: translate(750%,0);}
 38% {
  -webkit-transform: translate(680%,-200%);}
 50% {
  -webkit-transform: translate(500%,0);}
 68% {
  -webkit-transform: translate(380%,-100%);}
 75% {
  -webkit-transform: translate(250%,0);}
 100% {
  -webkit-transform: translate(0,0);}
}

#connect .sprinkle:before {
  content: "";
  display: block;
  background: url("../img/coin.gif") center no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;}

#connect .sprinkle.blur {
  -webkit-transform: scale(0.8,0.8);
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);}

#connect .type-anim {
  overflow: hidden;
  display: inline-block;
  position: relative;
  height: 33px;
  width: 7px;
  transition: all 1.5s ease;}

#connect .type-anim.word {
  width: 30%;
  transition: all 1.5s ease;}

#connect .type-anim.word.artist {width: 24%;}
#connect .type-anim.word.designer {width: 25%;}
#connect .type-anim.word.savage {width: 25%;}

#connect .type-anim:after {
  content: "";
  position: absolute;
  right: 0;
  height: 100%;
  border-right: 8px solid cyan;}

#connect .type-anim.word:after {
 -webkit-animation: type-anim-after .3s 1s 3;
 -webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;}
@-webkit-keyframes type-anim-after {
 from {
  border-color: cyan;}
 50% {
  border-color: transparent;}
 to {
  border-color: cyan;}
}

#connect .type-anim.finish:after {
  border-width: 0;}

#connect .type-anim span:before {
  width: 15%;
  display: inline-block;
  float: left;
  margin: 0;}

#connect .type-anim.word span:before {
 -webkit-animation: type-anim-span 0.6s;
 -webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;}
@-webkit-keyframes type-anim-span {
 from {
  margin-top: 0;
  width: 15%;}
 50% {
  margin-top: -5px;}
 to {
  margin-top: 0;
  width: auto;}
}

#connect .type-anim:hover span.letter-one:before {-webkit-animation-delay: .00s;}
#connect .type-anim:hover span.letter-two:before {-webkit-animation-delay: .05s;}
#connect .type-anim:hover span.letter-three:before {-webkit-animation-delay: .10s;}
#connect .type-anim:hover span.letter-four:before {-webkit-animation-delay: .15s;}
#connect .type-anim:hover span.letter-five:before {-webkit-animation-delay: .20s;}
#connect .type-anim:hover span.letter-six:before {-webkit-animation-delay: .25s;}
#connect .type-anim:hover span.letter-seven:before {-webkit-animation-delay: .30s;}



#connect .type-anim.designer span.letter-one:before {content:"D";}
#connect .type-anim.designer span.letter-two:before {content:"E";}
#connect .type-anim.designer span.letter-three:before {content:"S";}
#connect .type-anim.designer span.letter-four:before {content:"I";}
#connect .type-anim.designer span.letter-five:before {content:"G";}
#connect .type-anim.designer span.letter-six:before {content:"N";}
#connect .type-anim.designer span.letter-seven:before {content:"E";}
#connect .type-anim.designer span.letter-eight:before {content:"R";}
#connect .type-anim.designer span.letter-nine:before {content:"?";}


#connect .type-anim.artist span.letter-one:before {content:"A";}
#connect .type-anim.artist span.letter-two:before {content:"R";}
#connect .type-anim.artist span.letter-three:before {content:"T";}
#connect .type-anim.artist span.letter-four:before {content:"I";}
#connect .type-anim.artist span.letter-five:before {content:"S";}
#connect .type-anim.artist span.letter-six:before {content:"T";}
#connect .type-anim.artist span.letter-seven:before {content:"?";}


#connect .type-anim.savage span.letter-one:before {content:"S";}
#connect .type-anim.savage span.letter-two:before {content:"A";}
#connect .type-anim.savage span.letter-three:before {content:"V";}
#connect .type-anim.savage span.letter-four:before {content:"A";}
#connect .type-anim.savage span.letter-five:before {content:"G";}
#connect .type-anim.savage span.letter-six:before {content:"E";}
#connect .type-anim.savage span.letter-seven:before {content:"?";}


.connect-shade {
  z-index: 100;
  position: fixed; top: 0; left:0;
  height: 0%; width: 0%;
  opacity: 0;
  background: #111;}

.connect-shade.focus {
  opacity: 1;
  height: 100%; width: 100%;
  transition: height 0s, width 0s, opacity 3s ease;}

.connect-shade .sprite {
  position: absolute;
  height: 50%; width: 50%;
  background: #222;
  border-radius: 100%;}

.connect-shade .sprite.left {
  top: -30%; left: -30%;}

.connect-shade.focus .sprite.left {
 -webkit-transform: translate(200px,200px);
  transition: all 3s ease;}

.connect-shade .sprite.right {
  bottom: -30%; right: -30%;}

.connect-shade.focus .sprite.right {
 -webkit-transform: translate(-200px,-200px);
  transition: all 3s ease;}



@media only screen 
and (max-width : 800px) {

#connect .shadow-fix {
  left: 20%;
  width: 60%;}

}





#contact {
 opacity: 1;
 margin: 0 auto;
 padding: 0 0 0;
 height: 100vh;
 background-color: transparent;
 transition: all 0.5s ease;}

#contact.focus {
 transition: all 0.7s ease;}
/*
#contact:before {
 content: "";
 height: 100%; width: 100%;
 position: absolute; top: 0; left: 0;
 background: #10181E;
 opacity: 0;
 z-index: -1;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);}

#contact.focus:before {
 -webkit-animation: contactOFF 0.5s ease;
 -webkit-animation-fill-mode: forwards;}
@-webkit-keyframes contact {
 from {opacity: 0;}
 to {opacity: 0.95;}
}
*/
#contact .wrap {
 position: relative;
 top: 26vh;
 width: 600px;
 opacity: 0;
 -webkit-transform: translate(0,50px);
 transition: all 0.2s ease;}

#contact.focus .wrap {
 opacity: 1;
 -webkit-transform: translate(0,0);
 transition: all 0.3s ease 0.5s;}

#contact h4.headline {
  text-align: left;
  color: #516675;}

#contact .tile {
  background: #1D323F;
  color: #516675;
  display: block;
  float: left;
  height: 90%;
  margin-top: 4.5%;
  width: 45%;
  height: 270px;
  transition: all ease 0.3s;}

#contact .tile.focus {
  background: #233A49;
  box-shadow: 0px 0px 14px 6px rgba(0,0,0,0.2);
  z-index: 1;
  position: relative;
  color: #fff;
  margin-top: 0;
  width: 55%;
  height: 330px;
  transition: all ease 0.3s;}

#contact .tile.two {}

#contact .tile img {
  opacity: 0.3;
  height: 60px;
  margin: 30% auto 0;
  transition: all ease 0.3s;}

#contact .tile.focus img {
  opacity: 1;
  height: 60px;
  margin-top: 28%;}

#contact .tile h4 {
  font-size: 18px;
  margin-bottom: 8px;}

#contact .tile p {
  visibility: hidden;
  color: #516675;
  font-weight: bold;
  width: 80%;
  margin-top: 0;}

#contact .tile.focus p {
  visibility: visible;}

#contact .tile p span {
  opacity: 0.5;}

@media only screen 
and (max-width : 800px) {

  #contact .wrap {
    top: 2vh;
    width: 70%;
    height: auto;}

  #contact .tile {
    height: 35vh !important;
    width: 100%;
    float: none;}

  #contact .tile h2 {
    margin-top: 15%;}

}


#contact .button:before {
 content: "next";}

#contact .button.swap:before {
 content: "<";}

#contact .button.swap {
 display: inline;
 margin: 0 10px 0 auto;}

#contact .form-step-one,
#contact .form-step-two {
  width: 80%;
  margin: 0 auto ;
  height: 400px;
  -webkit-transform: translate (0,0);
  transition: all 0.3s ease;}

#contact .form-step-one.hide,
#contact .form-step-two.hide {
  opacity: 0;
  -webkit-transform: translate (50px,0);
  transition: all 0.3s ease;}

#contact .form-step-one {
  }

#contact .form-step-two {
  }

#contact form {
 margin: 0 auto;
 padding-top: 1%;
 width: 95%;
 display: block;
 position: relative;}

#contact input,
#contact select,
#contact textarea,
#contact .required {
 font-family: Radikal-Light;
 font-size: 14px;
 letter-spacing: 1px;
 color: #999;
 border-radius: 0;
 border-color: transparent;
 background-color: #222;
 width: 85%;
 padding: 3% 5%;}

#contact input {
 margin: 20px 0 0;
 transition: color 0.3s;}

#contact .half-size {
  margin-left: 2%;}

#contact .half-size input {
  width: 79%;
  padding: 6% 10%;}

#contact .col-form .col > div {
  margin: 0;
  width: 47%;}

#contact .col-form .col > div:first-of-type {
  margin-right: 3%;}

#contact .col .col-req {
  width: 5%;
  margin: 22px 0 0 0 !important;}

#contact .col .col-form {
  width: 95%;
  margin: 0;}

#contact span.req:before {
  color: #EA504E;
  font-size: 35px;
  content: "*";
  display: block;
  padding: 30px 0;}

#contact select {
 height: 37px;
 width: 100%;
 padding: 15px 5%;
 margin: 25px 0 0;
 transition: color 0.3s;}

#contact textarea {
 height: 40%;
 padding-top: 5%;
 margin-top: 20px;
 border-width: 0;
 transition: color 0.3s;}

#contact input[type=submit] {
 background-color: green;
 border-radius: 50px;
 margin: 50px auto 0;
 height: 90px;
 width: 90px;
 display: inline;
 opacity: 0.7;
 transition: all 0.3s;}

#contact input[type=submit]:hover {
 opacity: 1;
 color: #fff;
 border-color: #fff;
 transition: all 0.3s;}

#contact input[type=submit].focus {
 border-color: #EA504E;
 color: #EA504E;
 transition: all 0.3s;}

#contact input:hover,
#contact option:hover,
#contact textarea:hover,
#contact .focus {
 color: #fff;
 transition: color 0.3s;}

#contact textarea.focus {
 color: #fff;
 text-align: left;
 padding-top: 0;
 transition: color 0.3s;}

#contact select:focus {
 text-transform: none;}

#contact input.button.hide {
  opacity: 0;}

#contact .required {
 color: #EA504E;
 opacity: 0;}

#contact .required.focus {
 opacity: 1;}

#contact .submit-wrap a {
  position: relative;
  top: 10px;
  opacity: 0;
 transition: all 0.3s;}

#contact .submit-wrap:hover a {
  top: 0px;
  opacity: 1;
 transition: all 0.3s;}