sass media queries

//BREAKPOINTS
$Mobile: 400px;
$Landscape: 800px;
$Desktop: 1025px;
//MEDIA QUERY MIXIN
@mixin respond($media) {
  @if $media == mobile {
    @media only screen and (max-width: $Mobile) { @content; }
  }//mobile
  @else if $media == portrait {
    @media only screen and (min-width: $Mobile + 1px ) and (max-width: $Landscape - 1px ) { @content; }
  }//portrait
  @else if $media == portrait-up {
    @media only screen and (min-width: $Mobile + 1px ) { @content; }
  }//portrait-up
  @else if $media == portrait-down {
    @media only screen and (max-width: $Landscape - 1px ) { @content; }
  }//portrait-down
  @else if $media == landscape {
    @media only screen and (min-width: $Landscape) and (max-width: $Desktop - 1px ) { @content; }
  }//landscape
  @else if $media == landscape-up {
    @media only screen and (min-width: $Landscape) { @content; }
  }//landscape-up
  @else if $media == landscape-down {
    @media only screen and (max-width: $Desktop - 1px) { @content; }
  }//landscape-down
  @else if $media == desktop {
    @media only screen and (min-width: $Desktop) { @content; }
  }//desktop
}//respond
//HTML CLASSES
@include respond(mobile){
  .hide-for-mobile{display: none;}
  .show-for-portrait{display: none;}
  .show-for-landscape{display: none;}
  .show-for-desktop{display: none;}
  .portrait-up{display: none;}
  .landscape-up{display: none;}
}//Mobile ( 0 - 400px )
@include respond(portrait){
  .show-for-mobile{display: none;}
  .hide-for-portrait{display: none;}
  .show-for-landscape{display: none;}
  .show-for-desktop{display: none;}
  .landscape-up{display: none;}
}//Portrait Tablet ( 401px - 800px )
@include respond(landscape){
  .show-for-mobile{display: none;}
  .show-for-portrait{display: none;}
  .hide-for-landscape{display: none;}
  .show-for-desktop{display: none;}
  .portrait-down{display: none;}
}//Landscape Tablet ( 801px - 1024px )
@include respond(desktop){
  .show-for-mobile{display: none;}
  .show-for-portrait{display: none;}
  .show-for-landscape{display: none;}
  .hide-for-desktop{display: none;}
  .portrait-down{display: none;}
  .landscape-down{display: none;}
}//Desktop ( 1025px+ )