
@mixin c           ($p2){background-color: $p2;}           ;
@mixin c-i         ($p2){background-color: $p2 !important;};
@mixin c-t          ($p2){color: $p2;}                      ;
@mixin c-t-i        ($p2){color: $p2 !important;}           ;
@mixin c-b          ($p2){border-color: $p2;}               ;
@mixin c-b-i        ($p2){border-color: $p2 !important;}    ;
 
     
@mixin color($p1,$p2){
   .c#{$p1}{ @include c           ($p2); }
   .c-i#{$p1}{ @include c-i         ($p2); }
   .c-t#{$p1}{ @include c-t          ($p2); }
   .c-t-i#{$p1}{ @include c-t-i        ($p2); }
   .c-b#{$p1}{ @include c-b          ($p2); }
   .c-b-i#{$p1}{ @include c-b-i        ($p2); } 
   .c-h#{$p1}:hover   { @include c    ($p2);cursor:pointer; }
   .c-i-h#{$p1}:hover { @include c-i  ($p2); cursor:pointer;  }
   .c-t-h#{$p1}:hover  { @include c-t   ($p2);cursor:pointer;  }
   .c-t-i-h#{$p1}:hover{ @include c-t-i ($p2);cursor:pointer;  }
   .c-b-h#{$p1}:hover  { @include c-b   ($p2);cursor:pointer;  }
   .c-b-i-h#{$p1}:hover{ @include c-b-i($p2); cursor:pointer; }
    
   .c-b-i-f#{$p1}:focus{ @include c-b-i($p2); cursor:pointer; }
   .c-f#{$p1}:focus { @include c    ($p2);cursor:pointer; }
   .c-i-f#{$p1}:focus { @include c-i  ($p2); cursor:pointer;  }
   .c-t-f#{$p1}:focus  { @include c-t   ($p2);cursor:pointer;  }
   .c-t-i-f#{$p1}:focus{ @include c-t-i ($p2);cursor:pointer;  }
   .c-b-f#{$p1}:focus  { @include c-b   ($p2);cursor:pointer;  }
   .c-b-i-f#{$p1}:focus{ @include c-b-i($p2); cursor:pointer; }
} 

@mixin op($p1){opacity:$p1;}     ;
@mixin op-i($p1){opacity:$p1 !important;};
@mixin owf  {overflow :hidden;}  ;
@mixin owf-x {overflow-x:hidden;};
@mixin owf-y {overflow-y:hidden;};
@mixin hdn {display:none;}       ; 
@mixin hdn-i {display:none !important;}       ; 

@mixin hdn-vs {visibility:hidden;} ; 



