@charset "UTF-8";
/* CSS Document */


* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}




a img {
border:none;
}

body {
width:100%;
color:#FFF;
font-family: "UniversExp", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size:13px;
margin:0 auto;
}

.gallery {
text-align:center;
width:100%;
margin: 0 auto;
overflow:hidden;
}

.gallery li {
width:100%;
height:auto;
position:relative;
display:inline-block;
overflow:hidden;
background-color:#fff;
margin:0 auto;
}

.gallery li:nth-child(2) img {
display:inline-block;
float:right;
margin:0;
}

.cyan {
background-color:#662d91;
}

.magenta {
background-color:#F0F;
}

.yellow {
background-color:#FF0;
}

.black {
background-color:#3d3d3d;
}

.gallery li .title-container {
position:absolute;
bottom:0;
left:0;
width:100%;
height:0;
overflow:hidden;
-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
box-shadow:0 0 10px rgba(0,0,0,0.5);
z-index:1;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.8s;
-o-transition-duration:.8s;
-webkit-transition-duration:.8s;
transition-duration:.8s;
}

.gallery li .duplicate-image {
position:absolute;
overflow:hidden;
opacity:.3;
-webkit-filter:blur(8px);
filter:blur(8px);
background-size:495px 300px; 
background-position-x:0px;
bottom:0;
left:0;
width:495px;
height:300px;
}

.gallery li .duplicate-image img {
overflow:hidden;
}

.gallery li .name {
	font-family: "UniversBlackExt", "Helvetica Neue", Helvetica, Arial, "sans-serif";
text-align:end;
-ms-transform:translate(0px,-400px);
-webkit-transform:translate(0px,-400px);
transform:translate(0px,-400px);
text-transform:uppercase;
text-shadow:rgba(0,0,0,0.7) 1px 1px 5px;
color:#FFF;
font-size:28px;
position:absolute;
top:15px;
left:0;
width:95%;
height:50%;
letter-spacing:-.1em;
font-weight:900;
display:block;
z-index:2;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity:0.8;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
-webkit-transition-duration:.3s;
transition-duration:.3s;
}

.gallery li .name.c {
text-shadow:0 1px #3c294c, 0 2px 0 #3c294c, 0 3px 0 #3c294c, 0 4px 0 #3c294c, 0 5px 0 #3c294c, 1px 5px 5px rgba(0,0,0,0.7);
}

.gallery li .name.m {
text-shadow:0 1px #994d99, 0 2px 0 #994d99, 0 3px 0 #994d99, 0 4px 0 #994d99, 0 5px 0 #994d99, 1px 5px 5px rgba(0,0,0,0.7);
}

.gallery li .name.y {
text-shadow:0 1px #99994d, 0 2px 0 #99994d, 0 3px 0 #99994d, 0 4px 0 #99994d, 0 5px 0 #99994d, 1px 5px 5px rgba(0,0,0,0.7);
}

.gallery li .name.k {
text-shadow:0 1px #3d3d3d, 0 2px 0 #3d3d3d, 0 3px 0 #3d3d3d, 0 4px 0 #3d3d3d, 0 5px 0 #3d3d3d, 1px 5px 5px rgba(0,0,0,0.7);
}

.gallery li .name .title {
	font-family: "UniversExp", "Helvetica Neue", Helvetica, Arial, "sans-serif";
width:100%;
margin-left:2%;
display:block;
text-transform:none;
font-size:80%;
color:#fff;
margin-top:-10px;
font-weight:100;
letter-spacing:.1em;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity:0;
text-shadow:none;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
-webkit-transition-delay:.2s;
transition-delay:.2s;
-moz-transition-duration:.9s;
-o-transition-duration:.9s;
-webkit-transition-duration:.9s;
transition-duration:.9s;
}

.gallery li:hover .name {
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
transition-duration:.4s;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
-webkit-transition-delay:.2s;
transition-delay:.2s;
filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity:1;
top:25px;
-ms-transform:translate(0px,0px);
-webkit-transform:translate(0px,0px);
transform:translate(0px,0px);
}

.gallery li:hover .title-container {
height:67%;
filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity:1;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.35s;
-o-transition-duration:.35s;
-webkit-transition-duration:.35s;
transition-duration:.35s;
}

.gallery li:hover .title {
filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity:1;
margin-top:10px;
}

.gallery li:hover img {
background-position:top center;
}

.gallery li img {
	overflow:hidden;
	width:495px;
height:300px;
margin-left:0px ;
display:inline-block;
text-align:center;
margin:0 auto;
}

.cstripe,.mstripe,.ystripe,.kstripe {margin-bottom:14px;}
.cstripe {
width:100%;
margin-top:0px;
position:relative;
z-index:50;
box-shadow:0 6px #662d91, 0 12px #3c294c;
}



.mstripe {
width:100%;
margin-top:0px;
position:relative;
z-index:50;
box-shadow:0 6px magenta, 0 12px #994d99;
}

.ystripe {
width:100%;
margin-top:0px;
position:relative;
z-index:50;
box-shadow:0 6px yellow, 0 12px #99994d;
}

.kstripe {
width:100%;
margin-top:0px;
position:relative;
z-index:50;
box-shadow:0 6px #3d3d3d, 0 12px #000;}


* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}



button {
  font-family: "UniversBlackExt", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

.controls {width:100%;
margin: 185px 0px auto;
padding:2% 0 0;
margin-left:-.5%;
}


button.filter {height:100px;
text-align:left;
background:none;
display:inline-block;
border:0;
cursor:pointer;
font-size:40px;
font-weight:900;
letter-spacing:-.1em;

}

button:focus {
outline:0 none;
}

button + label {
margin-left:1em;
}

button.w.active,button.w:hover {
color:#FFF;
text-shadow:0 1px #a0a0a0, 0 2px 0 #a0a0a0, 0 3px 0 #a0a0a0, 0 4px 0 #a0a0a0, 0 5px 0 #a0a0a0, 1px 5px 5px rgba(0,0,0,0.7);
}
button.w,button.c,button.m,button.y,button.k {-webkit-transition: all .2s ease .2s;
  -moz-transition: transform .2s ease .2s;
  -ms-transition: transform .2s ease .2s;
  -o-transition: transform .2s ease .2s;
  transition: all .2s ease .2s;}

/*button.w:hover,button.c:hover,button.m:hover,button.y:hover,button.k:hover {
color:#652c90;
text-shadow:0 1px #471f65, 0 2px 0 #471f65, 0 3px 0 #471f65, 0 4px 0 #471f65, 0 5px 0 #471f65, 1px 5px 5px rgba(0,0,0,0.7);
}purple hover state*/

button.w {
color:#FFF;
text-shadow:0 1px #a0a0a0, 0 2px 0 #a0a0a0, 0 3px 0 #a0a0a0, 0 4px 0 #a0a0a0, 0 5px 0 #a0a0a0;
}

button.c.active,button.c:hover {
color:#662d91;
text-shadow:0 1px #3c294c, 0 2px 0 #3c294c, 0 3px 0 #3c294c, 0 4px 0 #3c294c, 0 5px 0 #3c294c, 1px 5px 5px rgba(0,0,0,0.7);
}

button.c {
color:#662d91;
text-shadow:0 1px #3c294c, 0 2px 0 #3c294c, 0 3px 0 #3c294c, 0 4px 0 #3c294c, 0 5px 0 #3c294c;
}

button.m.active,button.m:hover {
color:#F0F;
text-shadow:0 1px #994d99, 0 2px 0 #994d99, 0 3px 0 #994d99, 0 4px 0 #994d99, 0 5px 0 #994d99, 1px 5px 5px rgba(0,0,0,0.7);
}

button.m {
color:#F0F;
text-shadow:0 1px #994d99, 0 2px 0 #994d99, 0 3px 0 #994d99, 0 4px 0 #994d99, 0 5px 0 #994d99;
}

button.y.active,button.y:hover {
color:#FF0;
text-shadow:0 1px #99994d, 0 2px 0 #99994d, 0 3px 0 #99994d, 0 4px 0 #99994d, 0 5px 0 #99994d, 1px 5px 5px rgba(0,0,0,0.7);
}

button.y {
color:#FF0;
text-shadow:0 1px #99994d, 0 2px 0 #99994d, 0 3px 0 #99994d, 0 4px 0 #99994d, 0 5px 0 #99994d;
}

button.k.active,button.k:hover {
color:#3d3d3d;
text-shadow:0 1px #000, 0 2px 0 #000, 0 3px 0 #000, 0 4px 0 #000, 0 5px 0 #000, 1px 5px 5px rgba(0,0,0,0.7);
}

button.k {
color:#3d3d3d;
text-shadow:0 1px #000, 0 2px 0 #000, 0 3px 0 #000, 0 4px 0 #000, 0 5px 0 #000;
}

.ProjGRid {
width:100%;
text-align:justify;
font-size:.1px;
-webkit-backface-visibility:hidden;
margin:0 auto;
padding:2% 0 0;
flex-flow: wrap;
list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.ProjGRid:after {
content:'';
display:inline-block;
width:95%;
}

.ProjGRid .mix {
width:23%;
text-align:center;
margin-bottom:20px;
display:none;
height:auto;
}



@media only screen and (max-width: 1100px) {
.ProjGRid .mix{width:31.6%;
text-align:center;
display:none;
height:auto;
    }
}

@media only screen and (max-width: 875px) {
.ProjGRid .mix{width:48.75%;
text-align:center;
margin-bottom:10px;
display:none;
height:auto;
    }
}


@media only screen and (max-width: 448px) {
.ProjGRid .mix{width:100%;
margin:0 auto;
text-align:center;
margin-bottom:10px;
display:none;
height:auto;
    }
	
.gallery li img {margin-left:0px !important;}	
.gallery li .duplicate-image {background-position-x:0px;}
	
.gallery li .title-container {
position:absolute;
bottom:0;
left:0;
height:33%;
width:100%;

overflow:hidden;
-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
box-shadow:0 0 10px rgba(0,0,0,0.5);
z-index:1;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.8s;
-o-transition-duration:.8s;
-webkit-transition-duration:.8s;
transition-duration:.8s;
}
.gallery li .name {
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
transition-duration:.4s;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
-webkit-transition-delay:.2s;
transition-delay:.2s;
text-align:end;
-ms-transform:translate(0px,0px);
-webkit-transform:translate(0px,0px);
transform:translate(0px,0px);}

.controls{ margin-left:-.5%;
margin: 175px 0px auto;
 width:auto; 
    display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column; 
   flex-direction: column;
   -webkit-align-items: flex-start;
   align-items: flex-start;
	
}
}

.gallery li .duplicate-image.juggle {
background-image:url('../images/juggling_w.png');
background-position-x:-91px;

}
.gallery.juggle img {
margin-left:-91px;
}

.coming{    position: absolute;
    background-image: url('../images/coming.png');
    background-repeat: no-repeat;
    background-size: contain;
    right:-5px;
    top: 25px;
    z-index: 900;
    height: 51px;
    width: 200px;}

/*.gallery li .duplicate-image.proj1 {
background-image:url('../images/bouli_.png');
background-position-x:-30px ;
}*/
.gallery.proj1 img{
margin-left:-30px ;
}

.gallery li .duplicate-image.tmbc {
background-image:url('../images/tmbc_.png');
background-position-x: ;
}

.gallery li .duplicate-image.mbti {
background-image:url('../images/mbtio_.png');
background-position-x: ;
}

.gallery li .duplicate-image.wes {
background-image:url('../images/wes_.png');
background-position-x: ;
}

.gallery li .duplicate-image.lash {
background-image:url('../images/lash_.png');
background-position-x: ;
}




.gallery li .duplicate-image.bouli {
background-image:url('../images/bouli_.png');
background-position-x: ;
}
.gallery.bouli img{
margin-left: ;
}
.gallery li .duplicate-image.poloinfo {
background-image:url('../images/poloinfo_thumb.png');
background-position:right;
}
.gallery.poloinfo img{
background-position:right;
margin-left: ;
}

.gallery li .duplicate-image.souless {
background-image:url('../images/souless_thumb.png');
background-position-x: ;
}
.gallery.souless img{
margin-left: ;
}

.gallery li .duplicate-image.lookout {
background-image:url('../images/lookout_thumb.png');
background-position-x: ;
}
.gallery.souless img{
margin-left: ;
}

.gallery li .duplicate-image.jgwpic {
background-image:url('../images/jgw_thumb.png');
background-position:right ;
}
.gallery.jgwpic img{
background-position:right ;
margin-left: ;
}

.gallery li .duplicate-image.proj4 {
background-image:url('http://ericbloomquist.com/images/ellip_closer698x465.jpg');
background-position-x: ;
}
.gallery.proj4 img{
margin-left: ;
}
.gallery li .duplicate-image.proj5 {
background-image:url('../images/gutter_.png');
background-position-x:-90px;
}
.gallery.proj5 img{
margin-left: -90px;
}
.gallery li .duplicate-image.creatived {
background-image:url('../images/creative_.png');
background-position-x: -20px ;
}
.gallery.creatived img{
margin-left:-20px ;
}
.gallery li .duplicate-image.proj7 {
background-image:url('../images/ellip_closer_c.jpg');
background-position-x:-90px;
}

.gallery.proj7 img{
margin-left: -90px;
}


.gallery li .duplicate-image.mjm {
background-image:url('../images/mjm_thumb.png');
background-position-x:;
}
.gallery.mjm img{
margin-left:;
}

.gallery li .duplicate-image.proj8 {
background-image:url('../images/humane2.png');
background-position-x:-91px;
}
.gallery.proj8 img {
margin-left: -91px;
}
.gallery li .duplicate-image.proj9 {
background-image:url('../images/mark4.png');
background-position-x:-105px;
}
.gallery.proj9 img{
margin-left:-105px;
}
.gallery li .duplicate-image.proj10 {
background-image:url('../images/corkage2.png');
background-position-x:-46px ;
}
.gallery.proj10 img{
margin-left: -46px;
}
.gallery li .duplicate-image.proj11 {
background-image:url('../images/kmea_.png');
background-position-x:;
}
.gallery.proj11 img{
margin-left:;

}
.gallery li .duplicate-image.proj12 {
background-image:url('../images/bwb_.png');
background-position-x:-91px;
}
.gallery.proj12 img {
margin-left: -91px;
}