/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
  }
  
  .isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
  }
  
  /**** Isotope CSS3 transitions ****/
  
  .isotope,
  .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
       -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
         -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
  }
  
  .isotope {
    -webkit-transition-property: height, width;
       -moz-transition-property: height, width;
        -ms-transition-property: height, width;
         -o-transition-property: height, width;
            transition-property: height, width;
  }
  
  .isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
       -moz-transition-property:    -moz-transform, opacity;
        -ms-transition-property:     -ms-transform, opacity;
         -o-transition-property:      -o-transform, opacity;
            transition-property:         transform, opacity;
  }
  
  /**** disabling Isotope CSS3 transitions ****/
  
  .isotope.no-transition,
  .isotope.no-transition .isotope-item,
  .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
       -moz-transition-duration: 0s;
        -ms-transition-duration: 0s;
         -o-transition-duration: 0s;
            transition-duration: 0s;
  }
  
  /* End: Recommended Isotope styles */
  
  
  
  /* disable CSS transitions for containers with infinite scrolling*/
  .isotope.infinite-scrolling {
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
  }
  
  
  
  /**** Isotope styles ****/
  
  /* required for containers to inherit vertical size from window */
  /*html,
  body {
    height: 100%;
  }
  */
  #container {
    padding: 20px 0px;
  }
  
  .height-01{
  height: 250px;
  width: 28%;
  }
  .height-02,{
  height: 250px;
  width: 25%;
  }
  .height-03{
    width: 180px;
    height: 180px;
  }
  .element {
    margin: 1px;
    float: left;
    overflow: hidden;
    position: relative;
    color: #222;
  }
  
  /*.element.web          { background: #F00 url("../images/zoom.png") no-repeat center center; 
  background: hsl(   0, 100%, 50%)  url("../images/zoom.png") no-repeat center center; }
  .element.branding  { background: #F80 url("../images/zoom.png") no-repeat center center; background: hsl(  36, 100%, 50%) url("../images/zoom.png") no-repeat center center;}
  .element.print        { background: #0F0 url("../images/zoom.png") no-repeat center center; background: hsl( 108, 100%, 50%) url("../images/zoom.png") no-repeat center center;}
  .element.creative { background: #0FF url("../images/zoom.png") no-repeat center center; background: hsl( 180, 100%, 50%) url("../images/zoom.png") no-repeat center center;}
  .element.modern       { background: #08F url("../images/zoom.png") no-repeat center center; background: hsl( 216, 100%, 50%) url("../images/zoom.png") no-repeat center center;}
  .element.other  { background: #00F url("../images/zoom.png") no-repeat center center;; background: hsl( 252, 100%, 50%) url("../images/zoom.png") no-repeat center center;}
  .element.ecommerce         { background: #F0F url("../images/zoom.png") no-repeat center center;background: hsl( 288, 100%, 50%) url("../images/zoom.png") no-repeat center center;}
  .element.digital       { background: #F08 url("../images/zoom.png") no-repeat center center; background: hsl( 324, 100%, 50%) url("../images/zoom.png") no-repeat center center;}
  
  */
  .element * {
    position: absolute;
    margin: 0;
  }
  
  .element .symbol {
    left: 0.2em;
    top: 0.4em;
    font-size: 3.8em;
    line-height: 1.0em;
    color: #FFF;
  }
  .element.large .symbol {
    font-size: 4.5em;
  }
  
  .element.fake .symbol {
    color: #000;
  }
  
  .element .name {
    left: 0.5em;
    bottom: 1.6em;
    font-size: 1.05em;
  }
  
  .element .weight {
    font-size: 0.9em;
    left: 0.5em;
    bottom: 0.5em;
  }
  
  .element .number {
    font-size: 1.25em;
    font-weight: bold;
    color: hsla(0,0%,0%,.5);
    right: 0.5em;
    top: 0.5em;
  }
  
  .variable-sizes .element.width2 { width: 230px; }
  
  .variable-sizes .element.height2 { height: 230px; }
  
  .variable-sizes .element.width2.height2 {
    font-size: 2.0em;
  }
  
  .element.large,
  .variable-sizes .element.large,
  .variable-sizes .element.large.width2.height2 {
    font-size: 3.0em;
    width: 350px;
    height: 350px;
    z-index: 100;
  }
  
  .clickable .element:hover {
    cursor: pointer;
  }
  
  .clickable .element:hover h3 {
    text-shadow:
      0 0 10px white,
      0 0 10px white
    ;
  }
  
  .clickable .element:hover h2 {
    color: white;
  }
  
  /**** Filters ****/
  
  #filters{
    margin: 5px 0px;
    padding: 0px;
    list-style: none;
  }
  
  #filters li {
    display: inline-block;
    margin-right: -1px;
  }