/* style-responsive-phone.css */

/* desktop */
@media only screen and (min-width: 933px) {
  .desktop { display: block; }
  .tablet-landscape, .tablet-portrait, .phone-landscape, .phone-portrait { display: none; }
}

/* tablet : landscape */
/* @media (min-width: 820px) and (orientation: landscape) and (hover: none) and (pointer: coarse) { */
@media only screen
  and (min-width: 768px)
  and (max-width: 1366px)
  and (orientation: landscape)
  and (hover: none)
  and (pointer: coarse) {

  .tablet-landscape { display: block; }
  .desktop, .tablet-portrait, .phone-landscape, .phone-portrait { display: none; }
}

/* tablet : portrait */
/* @media (min-width: 820px) and (orientation: landscape) and (hover: none) and (pointer: coarse) { */
@media only screen
  and (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: portrait)
  and (hover: none)
  and (pointer: coarse) {

  .tablet-portrait { display: block; }
  .desktop, .tablet-landscape, .phone-landscape, .phone-portrait { display: none; }
}

/* phone : landscape */
/* @media only screen and (max-width: 932px) and (orientation: landscape) { */
@media only screen
  and (max-width: 926px)
  and (orientation: landscape)
  and (hover: none)
  and (pointer: coarse) {

  .phone-landscape { display: block; }
  .desktop, .tablet-portrait, .tablet-landscape, .phone-portrait { display: none; }
}

/* phone : portrait */
/* @media only screen and (max-width: 430px) and (orientation: portrait) { */
@media only screen
  and (max-width: 899px)
  and (orientation: portrait)
  and (hover: none)
  and (pointer: coarse) {

  .phone-portrait { display: block; }
  .desktop, .tablet-portrait, .tablet-landscape, .phone-landscape { display: none; }
}