@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";
@import url(https://fonts.googleapis.com/css?family=Terminal+Dosis+Light);
@import url('https://fonts.googleapis.com/css?family=Montserrat:500');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
@font-face {
    font-family: 'MOO';
    src: url('fonts/moo_font-webfont.eot');
    src: url('fonts/moo_font-webfont.eot?iefix') format('eot'),
         url('fonts/moo_font-webfont.woff') format('woff'),
         url('fonts/moo_font-webfont.ttf') format('truetype'),
         url('fonts/moo_font-webfont.svg#webfontVZIzmllP') format('svg');
    font-weight: normal;
    font-style: normal;


}
a{text-decoration:none}
.right{float:right}
.inside{padding:25px}
.half li{padding-right:5%;width:45%}
.third li{padding-right:5%;width:28.3%}
.quarter li{padding-right:5%;width:20%}
.fifth li{padding-right:5%;width:15%}
.separator{clear:both;float:left;height:1px;width:100%}


html,body{height:100%; width:100%; font:normal normal 10px/10px Tahoma, Arial, Helvetica, Verdana, sans-serif; }
body{overflow-x:hidden; background:black;}

.wrap{height:100%;width:100%;background:url(img/bordertop2.png) repeat-x top;margin:0 auto; }
article{float:left;width:66.7%}
aside{position:absolute;top:85px;width:150px;padding-left:20px}
footer{clear:both;float:left;width:100%}

/* Home Page Nav**/
#topColorBar{height:3px;width:100%; position:absolute; z-index:99; background:url(img/bordertop2.png) repeat-x top;margin:0 auto; } /*force color bar on top*/
.homepage{ background:url(img/bg/rotate.php) no-repeat center center scroll;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover; position:relative;}
nav {margin-top: 25px; height:70px;float:left; margin-left: 25px; width:572px; position:relative;}
nav li{ float:left;}
nav li a{display:inline-block;text-indent:-9999px; height:70px; }
.workin{width:291px;background:url(img/nav_work.png) no-repeat;}
.bloggin{width:206px; margin-left:75px; background:url(img/nav_lab.png) no-repeat}
.workin span.hover{position:absolute;top:0;left:0;bottom:0;right:0;background:url(img/nav_work.png) no-repeat;background-position:0 -70px}
.bloggin span.hover{position:absolute;top:0;left:366px;bottom:0;right:0;background:url(img/nav_lab.png) no-repeat;background-position:0 -69px}
#workbtn{cursor: pointer;}

/* Home Page Name**/
.name{cursor: pointer; position:fixed;left:0;bottom:0; z-index:99;padding-left:20px;padding-right:5px}
.name img {padding:0;}
.name h1{text-indent:-99999px;}
.name h3{font-family:'Terminal Dosis Light',Helvetica, arial, serif;font-size:12px;color:#fff;font-weight:300;text-transform:uppercase}
.divider{padding-top:2px;width:18px;height:11px}
.name a:hover h1,.name a:hover h3{color:#000}

/* Home Page Social Media**/
.socialicons{position:fixed;bottom:5px;right:15px;width:24px}
.socialicons li{padding-bottom:10px}
.socialicons li a{display:block;width:24px;height:25px;text-indent:-9999px;position:relative}
.email{background:url(img/email.png)}
.facebook{background:url(img/facebook.png)}
.twitter{background:url(img/twitter.png)}
.rss{background:url(img/rss.png)}
.instagram{background:url(img/instagram.png)}
.hovericon span{visibility:hidden;display:block;position:absolute;width:30px;height:24px;bottom:1px;left:-30px;background:url(img/hovericon.png) no-repeat}

/* Home Page Recent Blog Posts**/
.recent{width:450px;color:#fff;position:absolute;bottom:50%;top:50%;left:25px;height:200px;}
.postdate{color:#fff;font-family:Helvetica, arial, serif; width:52px;text-align:center;position:relative;padding-top:12px;padding-bottom:10px;}
.dateicons{width:28px; height:7px; position:absolute;  z-index:3; top:39px; left:13px; background:url(img/dateicon.png) no-repeat;}
.day{position:absolute; left:17px;z-index:2; font-size:20px;text-align:center; font-weight:700;text-shadow:1px 1px 1px #333;margin:0 auto 3px -3px}
.month{position:absolute; left: 13px; top:28px; z-index:2; text-align:center;text-transform:uppercase;font-size:12px}
.circle{position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;width:52px;height:52px;background:#898f93;-moz-border-radius:52px;-webkit-border-radius:52px;border-radius:52px}
.post{width:380px; margin-left:20px; vertical-align:central;font-size:14px;line-height:normal}
.post span{color:#bd2929}
.recenttitle{text-transform:uppercase;font-family:Arial Black, Helvetica, arial, serif;font-size:12px;text-decoration:none;color:#fff}
.recent .clear{height:10px}
.read_more{color:#898f93;font-style:italic}
.read_more:hover{font-weight:700}
.recent ul {position:fixed;}
.more-link{color:#999;}
.more-link:hover{color:#000; font-style: italic;}




/* Mail Link**/
#sayhello{width:100px;height:88px;position:fixed;background:transparent url(img/sayhello2.png) left center; right:50px;bottom:0;  }
.play {animation: play 1.5s steps(19) infinite;}
#sayhello a{display:block;width:100px;height:88px;cursor:pointer}

/*Custom Scrollbar Chrome Only**/
@keyframes play {
   100% { background-position: -1900px; }
}
::-webkit-scrollbar {
    width: 8px;
    height: 5px;
    background-color: rgba(255,255,255, 0);
    -webkit-border-radius: 100px;
}
::-webkit-scrollbar:hover {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    background: #999;
    -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active  {
    background: #333;
}

/*Blog**/
.blog .wrap{margin:0}
.video_embed{margin-bottom:15px}
#blogcontent{width:780px;margin-top:40px;float:left;margin-left:240px}
#blogcontent .postdate{margin:60px 8px 0 10px}
.postcontent{margin-bottom:50px}
.blogtext{position:relative;width:684px;background:#898f93;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;margin-top:0;color:#fff;font-size:12px;line-height:20px;padding:8px 8px 15px}
.blogtext h2{margin-bottom:5px;padding-bottom:5px;border-bottom:1px dotted #d10415;font-family:'Terminal Dosis Light', Helvetica, arial, serif}
.blogtext h2 a{text-transform:uppercase;color:#ffcf26;font-size:1.8em}
.blogtext p a{font-weight:700;text-decoration:underline; color:#ffcf26}
.blogimage{padding-bottom:12px;background:url(img/imgshadow2.png) no-repeat bottom;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}
.meta-prep,.entry-date{color:#fff;font-size:10px}
.comments{background:#3a56ad;position:absolute;right:0;bottom:0;border-top-left-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;padding:5px}
.blogsidebar{margin-top:50px;position:fixed}
.blogsidebar li{margin-bottom:10px}
.blogsidebar li a{position:relative;display:block;height:26px;color:#fff;font-size:24px;font-family:Helvetica, arial, serif}
.search{position:relative;display:block;height:26px}
.search input[type=text]{color:#898f93;width:90px;font-family:arial, sans-serif;font-size:12px;border:0;background:#eccc5c;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;padding:4px}
.smallcircle{position:absolute;top:0;right:-40px;width:12px;height:12px;background:#c64d44;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}
.smallsquare{position:absolute;top:0;right:-40px;width:12px;height:12px;background:#4a5aab}
.smalltriangle{position:absolute;top:8px;right:-40px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid #eccc5c}
.svw{width:75px;height:35px;background:url(img/loading.gif) no-repeat top center;margin:0 auto}
.svw ul{position:relative;left:-999em}

/*ProjectPage**/
.projectpage{width:100%; height:auto; background-color:#000; position:relative; text-align:center;  text-transform: uppercase;color:white;
    font-size: 1.4em;
    font-family:'Terminal Dosis Light';
    letter-spacing: 2px;}
/*ProjectPage Navigation previos next post**/
.postnavprev a{color:white; font-size:6rem; }
.postnavnext a{color:white; font-size:6rem; }
.postnavnext a:hover{color:#666;}
.postnavprev a:hover{color:#666;}
.postnavprev {  position:absolute; top:50px; left:50px;}
.postnavnext {position:absolute; top:50px; right:50px;}

/*ProjectPage Title and Credits**/
.projectpage h1 {font-size: 36px; padding:10px; padding-top:55px; margin:0 auto; }
.projectpage h2 {font-size: 14px; padding-bottom:5px; padding-top:15px; margin:0 auto; display:inline-block; border-bottom: 1px dotted white; }
.projectcontent {width: 90%;margin:0 auto; padding-top:30px;}
.dotborder {width: 200px; margin:0 auto; }
.projectcontent p{  width: 75%; padding:5px; margin:0 auto; font-size: 2rem;line-height:2.5rem;padding: 1rem;  }
.projectcontent iframe{width:90%; margin:0 auto; }
.projectcontent p img{ width:90%; height:auto; margin:0 auto;  }
.projectcontent a {color:red;}
.projectcontent a:hover {color:white; font-style:italic;}
.alignleft{text-align:left; }
.alignright{text-align:right; }
.projectDetails { width:80%; margin:0 auto; padding-bottom:100px; margin-top:30px;}
.projectDetails li {display:inline-block;  width:31%;  line-height:2rem;vertical-align: top;}
.projectDetails a {color:red;}
.projectDetails a:hover {color:#666;}
p.detail {font-size:1rem;}




/*Work Grid**/

.workpage{width:100%; height:100%;}

.red{background-color: red;}
.green{background-color: rgb(0,255,0);}
.blue{background-color: blue;}
.yellow{background-color: yellow;}
.black{background-color: black;}
.grey{background-color: rgb(125,125,130);}



#workcontent ul{  
	margin-top:40px;
	padding-right:120px;
	
	display:inline-block;
	padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
}

#workcontent li{
  visibility: hidden;
	position: relative;
    float: left;
    overflow: hidden;
    width: 25%; /* Fallback */
    width: -webkit-calc(100% / 4);
    width: calc(100% / 4);

}

@media screen and (max-width: 1750px) {
   #workcontent li{
        width: 25%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
    }
}


 
@media screen and (max-width: 1500px) {
   #workcontent li{
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
    }
}
 

@media screen and (max-width: 950px) {
   #workcontent li{
        width: 50%; /* Fallback */
        width: -webkit-calc(100% / 2);
        width: calc(100% / 2);
    }
}
 
@media screen and (max-width:500px) {
   #workcontent li{
        width: 100%;
    }
}



#workcontent li a,
#workcontent li a img{
	display: block;
    width: 100%;
    cursor: pointer;
 
}

#workcontent li a img {
	max-width: 100%;
	height:auto;

}

#workcontent li a div {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0,0,0,.8);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}


#workcontent li a:hover div, #workcontent li a:active div {
    opacity: 1;
}

#workcontent li a:hover img, #workcontent li a:active img  {

  -webkit-animation: animateScale .5s 1 forwards;
  -moz-animation:    animateScale .5s 1 forwards;
  -o-animation:      animateScale .5s 1 forwards;
  animation:         animateScale .5s 1 forwards;
}
 
#workcontent li a div h3 {
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    font-size: 2.4em;
    font-family:'Terminal Dosis Light';
    letter-spacing: 2px;
    line-height: 1em;
    padding: 0 5px;

   
}

#workcontent li a:hover h3, #workcontent li a:active h3{
  -webkit-animation: animateTitleIn .5s 1 forwards ease-out;
  -moz-animation:    animateTitleIn .5s 1 forwards ease-out;
  -o-animation:      animateTitleIn .5s 1 forwards ease-out;
  animation:         animateTitleIn .5s 1 forwards ease-out;

}



@-webkit-keyframes animateScale {
  0%   { 
  		-webkit-transform:scale(1);
   		
		}
  100% { 
  		-webkit-transform:scale(1.2);
   		
		}
}
@-moz-keyframes animateScale {
  0%   {
  		-moz-transform: scale(1);
        
    	}

  100% { -moz-transform: scale(1.2); }
}

@-o-keyframes animateScale {
  0%   { -o-transform: scale(1); }
  100% { -o-transform: scale(1.2); }
}

@keyframes animateScale {
  0%   { transform:scale(1);}
  100% { transform:scale(1.2); }
}



/**animate title in*/
	@-webkit-keyframes animateTitleIn {
  0%   { 
  		opacity:0;
  		margin-left: -8%;
   		
		}
  100% { 
  		opacity:1;
  		margin-left: 0%;
   		
		}
}
@-moz-keyframes animateTitleIn {
  0%   { 
  		opacity:0;
  		margin-left: -8%;
   		
		}
  100% { 
  		opacity:1;
  		margin-left: 0%;
   		
		}
}

@-o-keyframes animateTitleIn {
  0%   { 
  		opacity:0;
  		margin-left: -8%;
   		
		}
  100% { 
  		opacity:1;
  		margin-left: 0%;
   		
		}
}

@keyframes animateTitleIn {
 0%   { 
  		opacity:0;
  		margin-left: -8%;
   		
		}
  100% { 
  		opacity:1;
  		margin-left: 0%;
   		
		}
}








.workwrap h1{font-size:18px;color:#fff;font-family:'Terminal Dosis Light';margin-bottom:8px; line-height:16px;}
#gallery{padding-bottom:15px;background:url(img/imgshadow.png) no-repeat bottom}
.postedin{font-size:10px}
p.tag{float:left;font-style:italic;color:#666;padding-right:8px}
.postedin li{float:left;width:45px;position:relative}
.postedin li.Illustration{width:65px}
.Design,.Illustration,.Motion{margin-right:10px;color:#666}
.Design span{position:absolute;top:2px;right:0;width:8px;height:8px;background:#4a5aab}
.Motion span{position:absolute;top:2px;right:0;width:8px;height:8px;background:#c64d44;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}
.Illustration span{position:absolute;top:2px;right:0;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:8px solid #eccc5c}
.content{font-size:12px;padding-top:8px;line-height:16px;border-top:dotted #666;border-top-width:2px;margin:30px auto 0}
.content h2{margin-top:40px;letter-spacing:1px;font-size:12px;font-weight:400;font-family:Helvetica, Arial, sans-serif}
.credits{font-family:Helvetica, Arial, sans-serif;font-size:10px}
.searchresults{background:#afb2b9;line-height:16px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font-size:12px;padding:10px}
#search{font-family:'Terminal Dosis Light', Helvetica, arial, serif;color:#fff;font-size:2em;margin-bottom:20px}
.searchresults h2 a{font-family:'Terminal Dosis Light', Helvetica, arial, serif;text-transform:uppercase;color:#eccc5c;font-size:1.4em}
#resume{display:none;/*width:53px;height:80px;position:fixed;background:transparent url(img/resume.png) 0 0 no-repeat;right:75px;top:25px*/}


.navigation{display:none}
.left,.half li,.third li,.quarter li,.fifth li,.sixth li,.stripViewer ul li,.ngg-gallery-thumbnail-box{float:left; }
.half,.third,.quarter,.fifth,.sixth,.ngg-galleryoverview div.pic img{width:100%}
.clear,.ngg-clear{clear:both}
/*body,body.blog,body.work{background:url(img/background_02.png) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}*/
body,body.blog,body.work{background:#000;}
.name a h1,.name a h3,.comments a,.content a,.content a:visited,.searchresults a{color:#fff}
.hovericon:hover span,.hovericon:active span,.hovericon:focus span,.hovericon:hover,.hovericon:focus{visibility:visible}
.recenttitle:hover,.blogtext h2 a:hover,.comments a:hover,.blogsidebar li a:hover,.content a:hover{font-style:italic}
.exif-data,.ngg-center{margin-left:auto!important;margin-right:auto!important}


#bioLogo{ padding:30px;}
#bio{color:#fff; width:80%; margin:0 auto; text-align: center; font-size:2.5rem; line-height: 4rem;  clear:both;}
#services{font-size:1.75rem; line-height: 2.5rem;  margin:0 auto; height:500px;}
#whatWeDo{text-align: left; margin-top:120px; font-size:2rem; font-style: italic; margin-bottom:15px;}
#leftList{float:left; list-style: none; text-align: left;}
#rightList{float:right; list-style: none; text-align: right;}
#contactUs{text-decoration: underline; margin-top:50px; color:#fff;}
#contactUs:hover {font-style: italic;}
#contactUs:visited {color:#fff;}
#contactUs:active {color:#fff;}


#copywrite{ font-size:1rem;}

/*********************OLD-LAB PAGE********************************/



.labvideo {  width: 100% !important;
  height: auto !important; 
   /*background:transparent url('poster.jpg') no-repeat 0 0; */
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
   margin-top:20px;
  margin-bottom:20px;

}
.labvideo::-webkit-media-controls-play-button,
.labvideo::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}




/***********************LAB PAGE*********************************/

#lab_page {background: white;}
#blog-wrapper{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  
}

#blog-post{
  font-family: 'Open Sans', sans-serif; 
}

#blog-title-area{ width:80%; text-align:center;  margin:0 auto; margin-top: 40px;}
#blog-title{font-size: 4.5rem; font-family: sans-serif; font-family: 'Montserrat', sans-serif; color:#000; line-height: 4rem; }
#blog-subtitle{padding:20px; margin-top:20px; color:#9fa1a4; text-transform: uppercase; font-size: 1.5rem; line-height: 2rem;}

a#blog-title:hover{
  color:#555;
}

a#blog-title:visited{
  color:#000;
}

#blog-date{
  line-height: 2rem;
  margin-top:15px;
  font-size:0.75rem;
  color:#b9bbbd;
  text-transform: uppercase;
}

#blog-post-body{
  width:75%;
  margin:0 auto;
  margin-top: 25px;
  text-align: justify-all;
  font-size: 1.5rem;
  line-height: 2.5rem;
  margin-bottom:150px;
}
#blog-post img{
  text-align: center;
  width:100%;
  height:auto;
  margin-top:20px;
  margin-bottom:20px;
}

#blog-post-body a {color:#52c1af;}

#copywrite_lab{ margin-top:50px;text-align:center; font-size:1rem;color:#b9bbbd;}

    
#lablogo{margin-top:20px;
  margin-bottom:50px;}