@charset "UTF-8";


/* Nav */

.nav {
    list-style-type:none;
    margin-top:20px;
}

.nav li {
    position:relative;
    float:left;
    width:25%;
    height:110px;
    padding:0 10px;
    opacity:0;
}


/* List - Active Animations */

/* Box 1 */
section.active .stream {
    -webkit-animation:stream 0.4s 0.8s forwards ease-in-out;
            animation:stream 0.4s 0.8s forwards ease-in-out;
}
@-webkit-keyframes stream {
    from {-webkit-transform:translate3d(0,75px,0) scale3d(0.8,0.8,1); opacity:0;}
    to   {-webkit-transform:translate3d(0,0,0)    scale3d(1.0,1.0,1); opacity:1;}
}
@keyframes stream {
    from {transform:translate3d(0,75px,0) scale3d(0.8,0.8,1); opacity:0;}
    to   {transform:translate3d(0,0,0)    scale3d(1.0,1.0,1); opacity:1;}  
}

/* Box 2 */
section.active .projects {
    -webkit-animation:projects 0.4s 1.0s forwards ease-in-out;
            animation:projects 0.4s 1.0s forwards ease-in-out;
}
@-webkit-keyframes projects {
    from {-webkit-transform:translate3d(0,75px,0) scale3d(0.8,0.8,1); opacity:0;}
    to   {-webkit-transform:translate3d(0,0,0)    scale3d(1.0,1.0,1); opacity:1;}
}
@keyframes projects {
    from {transform:translate3d(0,75px,0) scale3d(0.8,0.8,1); opacity:0;}
    to   {transform:translate3d(0,0,0)    scale3d(1.0,1.0,1); opacity:1;}  
}

/* Box 3 */
section.active .contact {
    -webkit-animation:contact 0.4s 1.2s forwards ease-in-out;
            animation:contact 0.4s 1.2s forwards ease-in-out;
}
@-webkit-keyframes contact {
    from {-webkit-transform:translate3d(0,75px,0) scale3d(0.8,0.8,1); opacity:0;}
    to   {-webkit-transform:translate3d(0,0,0)    scale3d(1.0,1.0,1); opacity:1;}
}
@keyframes contact {
    from {transform:translate3d(0,75px,0) scale3d(0.8,0.8,1); opacity:0;}
    to   {transform:translate3d(0,0,0)    scale3d(1.0,1.0,1); opacity:1;}  
}

/* Box 4 */
section.active .labs {
    -webkit-animation:labs 0.4s 1.4s forwards ease-in-out;
            animation:labs 0.4s 1.4s forwards ease-in-out;
}
@-webkit-keyframes labs {
    from {-webkit-transform:translate3d(0,75px,0) scale3d(0.8,0.8,1); opacity:0;}
    75%  {opacity:1;}
    to   {-webkit-transform:translate3d(0,0,0)    scale3d(1.0,1.0,1); opacity:1;}
}
@keyframes labs {
    from {transform:translate3d(0,75px,0) scale3d(0.8,0.8,1); opacity:0;}
    75%  {opacity:1;}
    to   {transform:translate3d(0,0,0)    scale3d(1.0,1.0,1); opacity:1;}  
}


/* Link */

.nav a {
    position:relative;
    display:block;
    background-color:rgb(229,225,214);
    width:100%;
    height:100%;
    border:5px solid rgb(242,239,223);
    box-shadow:1px 1px 0 rgb(135,140,149);
    cursor:pointer;
    -webkit-transition:background-color 0.2s ease-in-out;
    	    transition:background-color 0.2s ease-in-out;
    /* Text */
    text-indent:-999999px;
}
.nav a.active {cursor:default; pointer-events:none;}

.nav a::before,
.nav a::after {
    position:absolute;
    left:50%; bottom:-13px;
    width:0;
    height:0;
    opacity:0;
    visibility:hidden;
    content:'';
    -webkit-transition:opacity    0.3s 0.4s ease-in-out,
                       visibility 0.3s 0.4s ease-in-out;
    	    transition:opacity    0.3s 0.4s ease-in-out,
                       visibility 0.3s 0.4s ease-in-out;
}
.nav a::before {
	border-left: 6px solid transparent;
	border-right:6px solid transparent;
	border-top:  8px solid rgb(135,140,149);
	margin-left:-5px;
}
.nav a::after {
	border-left: 6px solid transparent;
	border-right:6px solid transparent;
	border-top:  8px solid rgb(242,239,223);
	margin-left:-6px;
}
.nav a.active::before,
.nav a.active::after {
    opacity:1;
    visibility:visible;
}


/* Pixel */

.nav .pixel {
    float:left;
    width:10px;
    height:10px;
    -webkit-transition:background-color 0.6s ease-in-out;
            transition:background-color 0.6s ease-in-out;
}

html.no-touch .nav .pixel:hover {
    -webkit-transition:none;
            transition:none;
}


/* Icon */

.nav .bg_image {
    z-index:2;
	position:absolute;
	background-size:22px 22px !important;
	background-position:center center;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	pointer-events:none;
}


/* Animation Flash */

.nav .active_animation {
    z-index:1;
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	width:2px;
	height:2px;
	margin:auto;
	opacity:1;
	pointer-events:none;
}
.nav a.active .active_animation {
    opacity:1;
    -webkit-animation:active_animation 0.4s ease-in-out;
            animation:active_animation 0.4s ease-in-out;
    -webkit-animation-iteration-count:1;
            animation-iteration-count:1;
}

@-webkit-keyframes active_animation {
    from {opacity:1; -webkit-transform:scale3d(1,1,1);     transform:scale3d(1,1,1);}
    50%  {opacity:1; -webkit-transform:scale3d(50,50,1); transform:scale3d(50,50,1);}
    to   {opacity:0; -webkit-transform:scale3d(50,50,1); transform:scale3d(50,50,1);}
}
@keyframes active_animation {
    from {opacity:1; -webkit-transform:scale3d(1,1,1);     transform:scale3d(1,1,1);}
    50%  {opacity:1; -webkit-transform:scale3d(50,50,1); transform:scale3d(50,50,1);}
    to   {opacity:0; -webkit-transform:scale3d(50,50,1); transform:scale3d(50,50,1);}
}


/* Sets */

/* stream */  .stream a,
              .stream .pixel            {background-color:rgb(138,178,159);}
html.no-touch .stream a:hover,
html.no-touch .stream .pixel:hover,
              .stream .active_animation {background-color:rgb(118,158,139);}
              .stream .bg_image         {background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiI+PHBvbHlnb24gZmlsbD0iI0YyRUZERiIgcG9pbnRzPSIxNi45LDAgMy41LDExIDEwLjMsMTEgMy44LDIyIDE4LjUsOC40IDExLjcsOC40ICIvPjwvc3ZnPg==');}

/* Projects */
              .projects a,
              .projects .pixel            {background-color:rgb(153,127,104);}
html.no-touch .projects a:hover,
html.no-touch .projects .pixel:hover,
              .projects .active_animation {background-color:rgb(133,107,84);}
              .projects .bg_image         {background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGMkVGREYiIGQ9Ik0xMy42LDQuN2wtNS4yLDkuNGgxMC41TDEzLjYsNC43eiBNMy4xLDE0LjFoNS4yTDUuOCw5LjRMMy4xLDE0LjEgeiBNMjAuNCwxNS43SDEuNlYxLjZoMTguOVYxNS43eiBNMCwwdjIyaDIyVjBIMHoiLz48L3N2Zz4=');}

/* Contact */ .contact a,
              .contact .pixel            {background-color:rgb(191,168,118);}
html.no-touch .contact a:hover,
html.no-touch .contact .pixel:hover,
              .contact .active_animation {background-color:rgb(171,148,98);}
              .contact .bg_image         {background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGMkVGREYiIGQ9Ik00LjEsMTkuMmw4LjQtNC41TDAuMiwwLjRsMTQuNCwxMy4xbDcuMy00TDAsMEw0LjEsMTkuMnogTTE1LjEsMjIgdi02LjlMMTEsMTcuNUwxNS4xLDIyeiIvPjwvc3ZnPg==');}

/* Labs */    .labs a,
              .labs .pixel            {background-color:rgb(98,109,108);}
html.no-touch .labs a:hover,
html.no-touch .labs .pixel:hover,
              .labs .active_animation {background-color:rgb(78,89,88);}
              .labs .bg_image         {background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGMkVGREYiIGQ9Ik0yMC41LDBoLTMuMmgtMS42djEuNnYxLjZ2MTIuNmMwLDIuNi0yLjEsNC43LTQuOCw0LjcgYy0yLjYsMC00LjgtMi4xLTQuOC00LjdWMy4xVjEuNlYwSDQuN0gxLjV2MS42aDMuMnYxNC4xYzAsMy41LDIuOCw2LjMsNi4zLDYuM2MzLjUsMCw2LjMtMi44LDYuMy02LjNWMS42aDMuMlYweiBNNy44LDE1LjcgYzAsMS43LDEuNCwzLjEsMy4yLDMuMWMxLjcsMCwzLjItMS40LDMuMi0zLjFWNy45SDcuOFYxNS43eiIvPjwvc3ZnPg==');}
              
              
/* Nav Secondary */

.secondary {margin:0;}

.secondary li {
    width:50px;
    height:50px;
    padding:0;
    margin-right:20px;
    opacity:1;
}
.secondary li:last-of-type {margin:0;}


/* Link */

.secondary a {
    opacity:0;
    -webkit-transition:opacity 0.2s linear;
    	    transition:opacity 0.2s linear;
}
.secondary.active a {opacity:1;}

.secondary a::after {display:none;}

.secondary a::before {
    z-index:0;
    position:absolute;
    bottom:-15px; left:-5px;
    background:rgb(242,239,223);
    width:50px;
    height:5px;
    border:none;
    margin:0;
    box-shadow:1px 1px 0 rgb(135,140,149);
}


/* Pixel */

.secondary .pixel {
    width:8px;
    height:8px;
}


/* Icon */

.secondary .bg_image {background-size:16px 16px !important;}


/* Animation Flash */

.secondary a.active .active_animation {
    -webkit-animation:active_animation_secondary 0.4s ease-in-out;
            animation:active_animation_secondary 0.4s ease-in-out;
    -webkit-animation-iteration-count:1;
            animation-iteration-count:1;
}
@-webkit-keyframes active_animation_secondary
{
    from {opacity:1; -webkit-transform:scale3d(1,1,1);   transform:scale3d(1,1,1);}
    50%  {opacity:1; -webkit-transform:scale3d(20,20,1); transform:scale3d(20,20,1);}
    to   {opacity:0; -webkit-transform:scale3d(20,20,1); transform:scale3d(20,20,1);}
}
@keyframes active_animation_secondary
{
    from {opacity:1; -webkit-transform:scale3d(1,1,1);   transform:scale3d(1,1,1);}
    50%  {opacity:1; -webkit-transform:scale3d(20,20,1); transform:scale3d(20,20,1);}
    to   {opacity:0; -webkit-transform:scale3d(20,20,1); transform:scale3d(20,20,1);}
}


/* RESPONSIVE ADJUSTMENTS */

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

    /* Nav */
    .nav li.tooltip_nav {width:50%; height:60px;}
    .nav li.tooltip_nav:nth-of-type(1),
    .nav li.tooltip_nav:nth-of-type(2) {margin-bottom:20px;}
    .nav .pixel {display:none;}
    .nav .bg_image {background-size:20px 20px !important;}
    
    
    /* Animation Flash */
    .nav .active_animation {
    	width:100%;
    	height:100%;
    	opacity:0;
	}
    @-webkit-keyframes active_animation {0%,50% {opacity:1;} 100% {opacity:0;}}
    @keyframes active_animation {0%,50% {opacity:1;} 100% {opacity:0;}}
    
}