/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  .wrapper {
    -ms-grid-rows: .5fr .5fr 3.8fr .5fr;
    grid-template-rows: .5fr .5fr 3.8fr .5fr;
    grid-template-areas: "a_header a_header a_header" "a_nav a_nav a_nav" "a_main a_aside a_aside" "a_footer a_footer a_footer";
    max-width: 2560px; }
    .wrapper header .logo {
      font-size: 3rem; }
    .wrapper nav.top_menu menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .wrapper nav.top_menu menu li a {
        font-size: 1.5rem; }
    .wrapper footer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around; } }

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
  .wrapper {
    -ms-grid-rows: .5fr .5fr 3.8fr .5fr;
    grid-template-rows: .5fr .5fr 3.8fr .5fr;
    grid-template-areas: "a_header a_header a_header" "a_nav a_nav a_nav" "a_main a_aside a_aside" "a_footer a_footer a_footer";
    max-width: 2560px; }
    .wrapper header .logo {
      font-size: 3rem; }
    .wrapper nav.top_menu menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .wrapper nav.top_menu menu li a {
        font-size: 1.5rem; }
    .wrapper footer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around; } }

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
  .wrapper {
    -ms-grid-rows: .5fr .5fr 3.8fr .5fr;
    grid-template-rows: .5fr .5fr 3.8fr .5fr;
    grid-template-areas: "a_header a_header a_header" "a_nav a_nav a_nav" "a_main a_aside a_aside" "a_footer a_footer a_footer";
    max-width: 2560px; }
    .wrapper header .logo {
      font-size: 3rem; }
    .wrapper nav.top_menu menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .wrapper nav.top_menu menu li a {
        font-size: 1.5rem; }
    .wrapper footer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around; } }

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .wrapper {
    -ms-grid-rows: .5fr .5fr 3.8fr .5fr;
    grid-template-rows: .5fr .5fr 3.8fr .5fr;
    grid-template-areas: "a_header a_header a_header" "a_nav a_nav a_nav" "a_main a_aside a_aside" "a_footer a_footer a_footer";
    max-width: 2560px; }
    .wrapper header .logo {
      font-size: 3rem; }
    .wrapper nav.top_menu menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .wrapper nav.top_menu menu li a {
        font-size: 1.5rem; }
    .wrapper footer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around; } }

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
  .wrapper {
    -ms-grid-rows: .2fr .5fr 1.8fr 2fr .5fr;
    grid-template-rows: .2fr .5fr 1.8fr 2fr .5fr;
    grid-template-areas: "a_header a_header a_header" "a_nav a_nav a_nav" "a_main a_main a_main" "a_aside a_aside a_aside" "a_footer a_footer a_footer"; }
    .wrapper header .logo {
      font-size: 2rem; }
    .wrapper nav.top_menu menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .wrapper nav.top_menu menu li a {
        font-size: 1.1rem; }
    .wrapper main .content .categories {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: start; } }

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 10px) and (max-width: 480px) {
  .wrapper {
    -ms-grid-rows: .2fr .2fr 1.8fr 2fr .5fr;
    grid-template-rows: .2fr .2fr 1.8fr 2fr .5fr;
    grid-template-areas: "a_header a_header a_header" "a_nav a_nav a_nav" "a_main a_main a_main" "a_aside a_aside a_aside" "a_footer a_footer a_footer";
    min-width: 250px; }
    .wrapper header .logo {
      font-size: 1rem; }
    .wrapper nav.top_menu li a {
      font-size: .9rem; } }