/*  CSS for special uses: */

.desktop{display:block;}
span.desktop{display:inline;}

.mobile{display:none;}
span.mobile{display:none;}

.extrawide{display:none;}

.narrow{display:none;}



/* MOBILE-SPECIFIC CSS:  */

@media only screen and (max-width:800px)  /* tablets max out at 800 wide */
{
/* This has to come here lest it be over-written below: */
 .mobile{display:block;}
 .desktop{display:none;}


/*  Element-specific changes: */

 h1
 {font-size:5.8vw;}


 h2
 {
 font-size:4.0vw;
 line-height:50px;
 }

 span.desktop{display:none;}
 span.mobile{display:inline;}  /* over-writes the generic .mobile class for <span> */

}  /*  end mobile-phone CSS  */



/*  NARROW-PHONE CSS:  */

/* Anything with a screen width of 480 pixels or more can satisfactorily display all our 
   site pages; for screens smaller than that in portrait mode, this class allows display
   of a "rotate your phone"  message to alert them to use landscape view for better 
   viewing.  (Virtually all smartphones--I believe only the Blackberry Q10 is excepted--
   display at least 480 px width in landscape mode.)

   Note: landscape = the display is wider than it is tall
         portrait  = the display is taller than it is wide
*/
@media only screen and (max-width:479px) and (orientation:portrait)
{

 /* for the narrow-phone message  */
 .narrow
 {
  display:block;  /* makes visible */
  background-color:#ff3333;
  color:#ffffff;
  font-size:smaller;
  font-weight:bold;
  padding:5px;
  border:solid 1px;
  min-width:288px;  /* 288+10+2 = 300 total */
 }

}  /*  end narrow-phone CSS  */



/* EXTRA-WIDE CSS:  */

@media only screen and (min-width:1000px)
{
 .extrawide{display:inline-block;}
}  /*  end extra-wide CSS  */



/*  end all CSS  */