@mixin filter-setup {
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top:0;
  z-index: 4;
}


/* =========================================
Filter Washout 
========================================= */

%filter-washout {
   -webkit-filter:sepia(10%)  saturate(0.8)  brightness(1.5) contrast(0.8);
  position: relative;
  
  &:after{
      @include background-image(radial-gradient(center, ellipse cover,  rgba(white,0) 40%,rgba(white,0.9) 100%));
      @include filter-setup;
    }
}

/* =========================================
Filter Nikki
========================================= */

%filter-nikki {
  -webkit-filter:saturate(1.3)  brightness(1.1) contrast(1.1);  
  position: relative;
}


/* =========================================
Filter Deadwood 
========================================= */

%filter-deadwood {
  -webkit-filter:sepia(40%) brightness(1.4) saturate(0.8); 
  position: relative;
  
  &:after {
      background:black;
      @include filter-setup;
    }
}
/* =========================================
Filter SanFran 
========================================= */

%filter-sanfran {
  -webkit-filter:brightness(1.2) contrast(0.8)  saturate(2) sepia(0.1);
  position: relative;
  
  
  &:after{
      @include background-image(radial-gradient(center, ellipse cover,  rgba(white,0) 0%,rgba(white,0.5) 100%));
      @include filter-setup;
    }
}
/* =========================================
Filter Noire 
========================================= */

%filter-noire {
  -webkit-filter:grayscale(90%) contrast(1.3);
  position: relative;
  
  &:after{
      @include background-image(radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 82%,rgba(0,0,0,0.69) 83%,rgba(0,0,0,1) 90%));    
      @include filter-setup;
      opacity: 0.7;
    }
}
/* =========================================
Filter Neptune 
========================================= */

%filter-neptune {
  -webkit-filter:brightness(1.4) contrast(1)  saturate(1); 
  position: relative;
  
  &:after{
      @include background-image(radial-gradient(center, ellipse cover,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%));
      @include filter-setup;
    }
}
/* =========================================
Filter Lomo 
========================================= */

%filter-lomo {
  -webkit-filter:contrast(1.3)  saturate(1.2) brightness(140%); 
   position: relative;
  
  &:after{
  -webkit-filter:(radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 92%,rgba(0,0,0,0.69) 93%,rgba(0,0,0,1) 100%));
      @include filter-setup;
      opacity: 0.9;
    }
}

/* =========================================
Filter Warming 
========================================= */

%filter-warming {
  -webkit-filter:sepia(10%)  saturate(0.9) brightness(140%); 
  position: relative;  
  
  &:after{
      background-color: rgba(236, 138,0,0.2);  
  @include filter-setup;
      opacity: 0.6;
    }
}

/* =========================================
Filter Cooling 
========================================= */

%filter-cooling {
  -webkit-filter:sepia(10%)  saturate(0.9) brightness(140%); 
  position: relative;  
  
  &:after{
      background-color: rgba(0, 109,255,0.35); 
      @include background-image(radial-gradient(center, ellipse cover,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%));
    @include filter-setup;
    }
}
/* =========================================
Filter Pro
========================================= */

%filter-pro {
  -webkit-filter:sepia(15%) contrast(1.7) saturate(0.7); 
  position: relative;
}

/* =========================================
Filter Casablanca 
========================================= */

%filter-casablanca {
  -webkit-filter:grayscale(90%) contrast(0.8) brightness(110%);
  position: relative;
  
  &:after{
      @include background-image(radial-gradient(center, ellipse cover,  rgba(white,0) 0%,rgba(white,0.9) 100%));
    @include filter-setup;
    }
}

/* =========================================
Filter Glassic 
========================================= */

%filter-glassic {
  -webkit-filter:brightness(90%) contrast(1.2);
  position: relative;
  
  &:after{
      @include background-image(linear-gradient(left bottom,  rgba(244,244,244,0.3) 0%,rgba(244,244,244,0.3) 60%,rgba(244,244,244,0.7) 60%,rgba(255,255,255,1) 100%));
      box-shadow: inset 0px 0px 10rem rgba(255,255,255,1);
      @include filter-setup;
      opacity: 0.6;
    }
}



/* =========================================
Filter Custom
========================================= */

@mixin filter-custom($var: none) {
  -webkit-filter: $var;
  position: relative;
  &:after{
      content: '' ;
      right: 0;
      bottom: 0;
      position: absolute;
      top:0;
      left: 0;
      z-index: 4;
    }
    
}    

/* =========================================
Filter Color
========================================= */

@mixin filter-color ($color:#df8800, $opacity: 0.4){  
    &:after{
        background-color: rgba($color,$opacity);
      }
}
    
/* =========================================
Filter Vignette
========================================= */
    
@mixin filter-vignette ($color:black, $start: 80%, $stop: 95%, $extra: 0){
  
  &:after{
      @include background-image(radial-gradient(center, ellipse cover,  rgba($color,0) $start,rgba($color,0.9) $stop));
      box-shadow: inset 0 0 $extra rgba($color,1);     
    }
}