
///////////////////////////////////////////////
// GRID WIDTHS
.panel-pane
  //width: 100%
.grid-3 ,
.width-25
  @include width-25
.grid-4,
.width-33
  @include width-33
.grid-6,
.width-50
  @include width-50
.grid-8,
.width-66
  @include width-66
.grid-9,
.width-75
  @include width-75
.grid-12,
.width-100
  @include width-100

/////////////////////
// PANELS GENERAL 

.panel-display
  .float-right
    float: right
  .float-left
    float: left
  .clear-left
    clear: left
  .clear-right
    clear: right
  .clear-both
    clear: both

body #page .panel-display
  .clear-left,
  .grid-12,
  .width-100
    padding-left: 0           

/////////////////////////////
// IMAGE GRID MATRIX
@mixin img-grid-3($min-breakpoint: 0px, $max-breakpoint: 5000px)
  .width-25
    .img-sm
      +img-breakpoint($grid-3, $width-25, $img-sm, $min-breakpoint, $max-breakpoint)           
    .img-md
      +img-breakpoint($grid-3, $width-25, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-3, $width-25, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-3, $width-25, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-33,
    .img-sm
      +img-breakpoint($grid-3, $width-33, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-3, $width-33, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-3, $width-33, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-3, $width-33, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-50,
    .img-sm
      +img-breakpoint($grid-3, $width-50, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-3, $width-50, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-3, $width-50, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-3, $width-50, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-66,
    .img-sm
      +img-breakpoint($grid-3, $width-66, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-3, $width-66, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-3, $width-66, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-3, $width-66, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-75,
    .img-sm
      +img-breakpoint($grid-3, $width-75, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-3, $width-75, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-3, $width-75, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-3, $width-75, $img-xl, $min-breakpoint, $max-breakpoint)  
  .width-100,
    .img-sm
      +img-breakpoint($grid-3, $width-100, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-3, $width-100, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-3, $width-100, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-3, $width-100, $img-xl, $min-breakpoint, $max-breakpoint)      


@mixin img-grid-4($min-breakpoint: 0px, $max-breakpoint: 5000px)
  .width-25
    .img-sm
      +img-breakpoint($grid-4, $width-25, $img-sm, $min-breakpoint, $max-breakpoint)           

    .img-md
      +img-breakpoint($grid-4, $width-25, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-4, $width-25, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-4, $width-25, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-33,
    .img-sm
      +img-breakpoint($grid-4, $width-33, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-4, $width-33, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-4, $width-33, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-4, $width-33, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-50,
    .img-sm
      +img-breakpoint($grid-4, $width-50, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-4, $width-50, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-4, $width-50, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-4, $width-50, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-66,
    .img-sm
      +img-breakpoint($grid-4, $width-66, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-4, $width-66, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-4, $width-66, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-4, $width-66, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-75,
    .img-sm
      +img-breakpoint($grid-4, $width-75, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-4, $width-75, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-4, $width-75, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-4, $width-75, $img-xl, $min-breakpoint, $max-breakpoint)  
  .width-100,
    .img-sm
      +img-breakpoint($grid-4, $width-100, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-4, $width-100, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-4, $width-100, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-4, $width-100, $img-xl, $min-breakpoint, $max-breakpoint)      


@mixin img-grid-6($min-breakpoint: 0px, $max-breakpoint: 5000px) 
  .width-25
    .img-sm
      +img-breakpoint($grid-6, $width-25, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-6, $width-25, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-6, $width-25, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-6, $width-25, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-33,
    .img-sm
      +img-breakpoint($grid-6, $width-33, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-6, $width-33, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-6, $width-33, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-6, $width-33, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-50,
    .img-sm
      +img-breakpoint($grid-6, $width-50, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-6, $width-50, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-6, $width-50, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-6, $width-50, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-66,
    .img-sm
      +img-breakpoint($grid-6, $width-66, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-6, $width-66, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-6, $width-66, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-6, $width-66, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-75,
    .img-sm
      +img-breakpoint($grid-6, $width-75, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-6, $width-75, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-6, $width-75, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-6, $width-75, $img-xl, $min-breakpoint, $max-breakpoint)  
  .width-100,
    .img-sm
      +img-breakpoint($grid-6, $width-100, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-6, $width-100, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-6, $width-100, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-6, $width-100, $img-xl, $min-breakpoint, $max-breakpoint)      

@mixin img-grid-8($min-breakpoint: 0px, $max-breakpoint: 5000px)
  .width-25
    .img-sm
      +img-breakpoint($grid-8, $width-25, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-8, $width-25, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-8, $width-25, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-8, $width-25, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-33,
    .img-sm
      +img-breakpoint($grid-8, $width-33, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-8, $width-33, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-8, $width-33, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-8, $width-33, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-50,
    .img-sm
      +img-breakpoint($grid-8, $width-50, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-8, $width-50, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-8, $width-50, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-8, $width-50, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-66,
    .img-sm
      +img-breakpoint($grid-8, $width-66, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-8, $width-66, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-8, $width-66, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-8, $width-66, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-75,
    .img-sm
      +img-breakpoint($grid-8, $width-75, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-8, $width-75, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-8, $width-75, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-8, $width-75, $img-xl, $min-breakpoint, $max-breakpoint)  
  .width-100,
    .img-sm
      +img-breakpoint($grid-8, $width-100, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-8, $width-100, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-8, $width-100, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-8, $width-100, $img-xl, $min-breakpoint, $max-breakpoint)      

@mixin img-grid-9($min-breakpoint: 0px, $max-breakpoint: 5000px)
  .width-25
    .img-sm
      +img-breakpoint($grid-9, $width-25, $img-sm, $min-breakpoint, $max-breakpoint)           

    .img-md
      +img-breakpoint($grid-9, $width-25, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-9, $width-25, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-9, $width-25, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-33,
    .img-sm
      +img-breakpoint($grid-9, $width-33, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-9, $width-33, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-9, $width-33, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-9, $width-33, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-50,
    .img-sm
      +img-breakpoint($grid-9, $width-50, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-9, $width-50, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-9, $width-50, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-9, $width-50, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-66,
    .img-sm
      +img-breakpoint($grid-9, $width-66, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-9, $width-66, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-9, $width-66, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-9, $width-66, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-75,
    .img-sm
      +img-breakpoint($grid-9, $width-75, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-9, $width-75, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-9, $width-75, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-9, $width-75, $img-xl, $min-breakpoint, $max-breakpoint)  
  .width-100,
    .img-sm
      +img-breakpoint($grid-9, $width-100, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-9, $width-100, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-9, $width-100, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-9, $width-100, $img-xl, $min-breakpoint, $max-breakpoint)      

@mixin img-grid-12($min-breakpoint: 0px, $max-breakpoint: 5000px)
  .width-25
    .img-sm
      +img-breakpoint($grid-12, $width-25, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-12, $width-25, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-12, $width-25, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-12, $width-25, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-33,
    .img-sm
      +img-breakpoint($grid-12, $width-33, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-12, $width-33, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-12, $width-33, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-12, $width-33, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-50,
    .img-sm
      +img-breakpoint($grid-12, $width-50, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-12, $width-50, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-12, $width-50, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-12, $width-50, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-66,
    .img-sm
      +img-breakpoint($grid-12, $width-66, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-12, $width-66, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-12, $width-66, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-12, $width-66, $img-xl, $min-breakpoint, $max-breakpoint) 
  .width-75,
    .img-sm
      +img-breakpoint($grid-12, $width-75, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-12, $width-75, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-12, $width-75, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-12, $width-75, $img-xl, $min-breakpoint, $max-breakpoint)  
  .width-100,
    .img-sm
      +img-breakpoint($grid-12, $width-100, $img-sm, $min-breakpoint, $max-breakpoint) 
    .img-md
      +img-breakpoint($grid-12, $width-100, $img-md, $min-breakpoint, $max-breakpoint) 
    .img-lg
      +img-breakpoint($grid-12, $width-100, $img-lg, $min-breakpoint, $max-breakpoint) 
    .img-xl
      +img-breakpoint($grid-12, $width-100, $img-xl, $min-breakpoint, $max-breakpoint)   



