/*

    f   :   flex
    fl  :   flex-inline
    f-c :   column
    f-r :   row
    f-rr:   row - reverse
    f-c :   column
    f-cr:   column - reverse
    f-w:    wrap
    f-wr:   wrap - reverse
    f-nw:   no-wrap
    f-a?: align-items s:start c:center e:end t:stretch l:baseline
    f-c?: align-content s:start c:center e:end a:space-around b:space-between t:stretch
    f-j?: justify-content s:start c:center e:end a:space-around b:space-between 
    f-s?: align-self s:start c:center e:end t:stretch l:baseline
    f-i01: flex: 0 1 auto;
    f-i00: flex: 0 0 auto;
    f-i11: flex: 1 1 auto;
    f-i10: flex: 1 0 auto; 

*/
 
/////////////////////////////////////////////////////////*  flex */
@mixin f{ 

	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
} 
@mixin fl{ 

	 display: -webkit-box;
    display: -moz-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
} 
//---------------------------------------------------------------------Direction----------------------
/////////////////////////////////////////////////////////* row */
@mixin f-r{
	-webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
} 
/////////////////////////////////////////////////////////* row reverse */
 @mixin f-rr{
	 -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
} 
/////////////////////////////////////////////////////////*  column */
 @mixin f-c{
	 -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
} 
/////////////////////////////////////////////////////////* column reverse */
 @mixin f-cr{
	-webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
} 
//----------------------------------------------------------------------Wrap Mode---------------------------
/////////////////////////////////////////////////////////* wrap */
 @mixin f-w{
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
} 
/////////////////////////////////////////////////////////* no-wrap */
 @mixin f-nw{
	 -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
} 
 /////////////////////////////////////////////////////////* wrap-reverse */
 @mixin f-wr{
	 -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
} 
//-------------------------------------------------------------------------Justify Content--------------------------
/////////////////////////////////////////////////////////* flex-start */
 @mixin f-js{
	 -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
} 
/////////////////////////////////////////////////////////* flex-end */
 @mixin f-je{
	 -webkit-box-pack: end;
    -moz-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
} 
/////////////////////////////////////////////////////////* center */
 @mixin f-jc{
	 -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
} 
/////////////////////////////////////////////////////////* space-between */
 @mixin f-jb{
	 -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
} 
/////////////////////////////////////////////////////////* space-around; */
 @mixin f-ja{
	 -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
} 
//--------------------------------------------------------------------------------align-items--------------------
/////////////////////////////////////////////////////////* flex-start */
 @mixin f-as{
	 -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
} 
/////////////////////////////////////////////////////////* flex-end */
 @mixin f-ae{
	 -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
} 
/////////////////////////////////////////////////////////* center */
 @mixin f-ac{
	    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
} 
/////////////////////////////////////////////////////////* baseline */
 @mixin f-al{
	 -webkit-box-align: baseline;
    -moz-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
} 
/////////////////////////////////////////////////////////* stretch */
 @mixin f-at{
	 -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
} 
//--------------------------------------------------------------------------------align-content--------------------
/////////////////////////////////////////////////////////* flex-start */
 @mixin f-cs{
	-webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start; 
} 
/////////////////////////////////////////////////////////* flex-end */
 @mixin f-ce{
	 -webkit-align-content: flex-end;
    -ms-flex-line-pack:end;
    align-content: flex-end; 
} 
/////////////////////////////////////////////////////////* center */
 @mixin f-cc{
	  -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
} 
/////////////////////////////////////////////////////////* space-between */
 @mixin f-cb{
	  -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
} 
/////////////////////////////////////////////////////////* space-around */
 @mixin f-ca{
	  -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
} 
 /////////////////////////////////////////////////////////* space-between */
 @mixin f-ct{
	 -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
} 

//-------------------------------------------------------------------------------- align-self--------------------
/////////////////////////////////////////////////////////* auto */
 @mixin f-sa{
	-webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
} 
/////////////////////////////////////////////////////////* flex-start */
 @mixin f-ss{
	-webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
} 
/////////////////////////////////////////////////////////* flex-end */
 @mixin f-se{
	-webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
} 
/////////////////////////////////////////////////////////* center */
 @mixin f-sc{
	-webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
} 
/////////////////////////////////////////////////////////* baseline */
 @mixin f-sl{
	-webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline;
} 
/////////////////////////////////////////////////////////* stretch */
 @mixin f-st{
	-webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
} 
//-------------------------------------------------------------------------------- flex : $f-grow : 0;$f-shrink:1;$f-basis : auto;@include f-flex;--------------------
/////////////////////////////////////////////////////////* auto */
$f-grow : 0;
$f-shrink:1;
$f-basis : auto;

 @mixin f-flex($fp,$fs){ 
	 -webkit-box-flex: $fp;
    -moz-box-flex: $fp;
    -webkit-flex: $fp $fs $f-basis;
    -ms-flex:$fp $fs $f-basis;
    flex: $fp $fs $f-basis; 
}

 @mixin f-flex-im($fp,$fs){ 
	-webkit-box-flex: $fp !important;
    -moz-box-flex: $fp !important;
    -webkit-flex: $fp $fs $f-basis !important;
    -ms-flex:$fp $fs $f-basis !important;
    flex: $fp $fs $f-basis !important;
}

 @mixin f-col($col){

     -webkit-column-count:$col ; 
    -moz-column-count: $col; 
    column-count: $col;

 }
   
@mixin f-center{
	@include f;
	@include f-cc;
	@include f-jc;
	@include f-ac;
}  
@mixin f-fit{
	@include f;
	@include f-c; 
	@include f-ja; 

	@include f-ct;
	@include f-at;

	> div , > canvas{
			$f-grow :1 !important;
			$f-shrink:0 !important; 
			$f-basis :auto;
			@include f-st;
			@include f-flex-im(1,0);  
	}
}  
@mixin f-i01{
   $f-grow :0;
	$f-shrink:1;
	$f-basis :auto;
	@include f-flex-im(0,1); 
}  
@mixin f-i11{
    $f-grow :1;
	$f-shrink:1;
	$f-basis :auto;
	@include f-flex-im(1,1); 
} 
@mixin f-i00{
   $f-grow :0;
	$f-shrink:0;
	$f-basis :auto;
	@include f-flex-im(0,0); 
} 
@mixin f-i10{
    $f-grow :1;
	$f-shrink:0;
	$f-basis :auto;
	@include f-flex-im(1,0); 
} 
 