//MEDIA QUERY MANAGER
/*
0-600px:        Phone
600-991px:      Tablet Portrait
992-1200px:     Tablet Landscape
[1200-1800px:]  is where our normal styles apply
1800px + :      Big Desktop

$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px
*/

@mixin respond($breakpoint) {
    @if $breakpoint == phone-small {
      @media only screen and (max-width: 21.25em){ @content };    //340px
    } 
    @if $breakpoint == iphone-x {
      @media only screen and (max-width: 23.4375em){ @content };    //375px
    }
    @if $breakpoint == phone-medium {
      @media only screen and (max-width: 36em){ @content };    //576px
  } 
    @if $breakpoint == phone-large {
        @media only screen and (max-width: 47.9375em){ @content };    //767px
    }  
    @if $breakpoint == tab-port {
        @media only screen and (max-width: 61.9375em){ @content };    //991px
    }
    @if $breakpoint == ipad-pro {
      @media only screen and (max-width: 64em){ @content };   //1024px
    }
    @if $breakpoint == tab-land {
        @media only screen and (max-width: 75em){ @content };   //1200px
    }
    @if $breakpoint == desktop {
        @media only screen and (max-width: 93.75em){ @content };   //1500px
    }
    @if $breakpoint == mid-desktop {
        @media only screen and (max-width: 112em){ @content };   //max-1800px
    }
    @if $breakpoint == big-desktop {
        @media only screen and (min-width: 112em){ @content };   //min-1800px
    }
  

    
  }