.grayscale {
  /* Firefox 10+, Firefox on Android */
 /*
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
    <filter id='grayscale'>
    <feColorMatrix type='matrix' 
    values='
    0.3333 0.3333 0.3333 0 0
    0.3333 0.3333 0.3333 0 0
    0.3333 0.3333 0.3333 0 0
    0 0 0 1 0'/>
    </filter></svg>#grayscale");
*/
  /*filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>    <filter id='grayscale'><feColorMatrix type='matrix' values='0 0 0 0 0 0 0.3 0 0 0 0 1 1.8 0 0 0 0 -0.4 0.6 0'/></filter></svg>#grayscale");
  */
  /*filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>    <filter id='grayscale'><feColorMatrix type='matrix' values='0 0 1 0.2 0 0 0 1.5 0 0.1 0 0 0 0 0 0 -1 -0.7 1 0'/></filter></svg>#grayscale");
  */
  background: rgb(200, 54, 54); /* The Fallback */
  background: rgba(200, 54, 54, 0.5); 
  /* IE 6-9 */
  /*filter: gray;

  /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
    */
    /*  -webkit-filter: grayscale(100%); */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
  }

  .grayscale.grayscale-fade {
    -webkit-transition: -webkit-filter .5s;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
  }

  .item:hover .grayscale.grayscale-fade {
    -webkit-filter: grayscale(0%);
    filter: none;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
  }

  .grayscale-replaced.grayscale-fade svg {
    opacity: 1;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
  }

  .item:hover .grayscale-replaced.grayscale-fade svg {
    opacity: 0;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
  }

  .bas-img{

    /*display: block;
    float: left;
    border: none;
    */
    /*-moz-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
    -ms-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear;*/
   
  }
  .bas-img:hover{
   
  }


  .bas-tint {

    overflow: hidden;

    margin: 0 0 0 0; 


    background: transparent;
    background-image: -webkit-linear-gradient( 0deg, black, transparent 50% );
    background-image: -moz-linear-gradient( 0deg, black, transparent 50% );
    background-image: -ms-linear-gradient( 0deg, black, transparent 50%);
    background-image: -o-linear-gradient( 0deg, black, transparent 50%);
    background-image: linear-gradient( 0deg, black, transparent 50%);
    
  }