/* Responsive Global Helpers. Integrated to PHP template parts. Proceed with caution when modifying.
* Note: if the element relies on being set as another display type that's not block (flex, inline-block, inline-flex, etc. ) on  breakpoint/s it is suppose to show, using the *-hide helpers is recommended (eg: instead of xs-only, use sm-hide md-hide lg-hide xl-hide)

* Info to what everything means:
-----------------------------------------------
Tag 	Device		min				max	  
-----------------------------------------------
xs: 	mobile		0				767px
sm: 	tablet		768px	1199px
md: 	laptop		1200px	1399px
lg: 	desktop		1400px	1899px
xl: 	hd			1900px	999999999999+
--------------------------------------------------------------- */
.xl-only,
.lg-only,
.md-only,
.sm-only,
.xs-only,
.home-only,
.internal-only,
.print-only {
  display: none !important;
}

.onep21-template-home .home-only {
  display: block !important;
}
.onep21-template-home .home-hide {
  display: none !important;
}

body:not(.onep21-template-home) .internal-only {
  display: block !important;
}
body:not(.onep21-template-home) .internal-hide {
  display: none !important;
}

@media only print {
  .print-only {
    display: block !important;
  }
  .print-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 1900px) {
  .xl-only {
    display: block !important;
  }
  .xl-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1899px) {
  .lg-only {
    display: block !important;
  }
  .lg-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .md-only {
    display: block !important;
  }
  .md-hide {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .sm-only {
    display: block !important;
  }
  .sm-hide {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .xs-only {
    display: block !important;
  }
  .xs-hide {
    display: none !important;
  }
}