/********************************************************/
   /********************************************************/
  /* Tablets, landscaped phones, and other small displays */
 /********************************************************/
/********************************************************/

@media only screen and (max-width: 992px) {

  /**********/
 /* Header */
/**********/

/* Reduce padding, etc., on mainbody */

#mainbody {
	padding: 10px;
	box-shadow: 0px 0px 0px 0px;
	outline-width: 0px;
}

/* Reduce padding, etc., on announcement */

div.announcement {
	padding: 0px;
	width: 90%;
	margin-left: 20px;
	margin-right: 20px;
}

/* Force branch row onto one line and remove quick search */

div#logo, div#crisfield, div#ewell, div#princessanne, div.col-md-2 {
	width:24%;
	display:inline-block;
}

div.searchbox, {
	display:none;
}

div.logo {
	vertical-align: top;
	margin-bottom:10px;
}

  /**************/
 /* Index Page */
/**************/

/* Removes calendar */

div.programs {
	display:none;
}

.carousel-inner > .item > a > img {
	height:auto;
	max-height:375px;
	width: 100%;
}

div.shuffle-right {
	bottom:0px;
}

  /****************/
 /* Site Content */
/****************/

/* Switches hours location on branch pages */

.hours-desktop {
	display:none;
}

.hours-mobile {
	display:inline;
}

/* Switches calendar layout on events pages */

.calendar-desktop {
	display:none;
}

.calendar-mobile {
	display:inline;
}

  /**********/
 /* Footer */
/**********/

/* Strip margins from hotlist buttons to form a block */

div.hotlist-button {
	border-radius: 0px;
    padding: 0px; 
    margin-left:0%;
	margin-right: 0%;
	width:100%;}

}

    /************************/
   /************************/
  /* Portrait mode phones */
 /************************/
/************************/

@media only screen and (max-width: 500px) {

  /**********/
 /* Header */
/**********/

/* Removes the branch list, centers the logo, and adds some padding before the menu. */

div#logo, div#crisfield, div#ewell, div#princessanne, div.col-md-2 {
	display:none;
}

div#locations {
	padding-bottom:10px;
}

div#logo {
	display: block;
    margin: auto;
    width: 40%;
}

/* Activate locations tab in menu */

.mobilemenu {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#mobilelocations, #mobilelocation {
	display:inherit;
}

  /**************/
 /* Index Page */
/**************/

.carousel-inner > .item > a > img {
	height:auto;
	max-height:180px;
	width: auto;
	margin-left:auto;
	margin-right:auto;
}

div.shuffle { 
	height: 75px;

}

div.shuffle > div > a > img {
	width: 75px;
	height: auto
}

  /**********/
 /* Footer */
/**********/

/* Squeezes in hotlist buttons */

div.hotlist-button > a > button {
	padding-left:0px;
	padding-right:0px;
	font-size:12px;
}	

div.hotlist-button#employment {
    display:none
}

}

    /*************************/
   /*************************/
  /* Miscellanous controls */
 /*************************/
/*************************/

/* Hides searchbox to prevent wrapping. */

@media only screen and (max-width: 992px) {
	
div#searchbox {
	display:none;
}

}

/* Eliminates empty space at top of menu on screens large enough to have the normal menu but too small to contain it on one line */

@media only screen and (min-width: 768px) {
	
div.navbar-header	{
	display:none;
}	

}

/* Allows wordwrap on hotlist buttons when screen grows too small to contain in one line. */

@media only screen and (max-width: 1150px) {

div.hotlist-button:first-child:nth-last-child(5) > a > button > br.hotbr,
div.hotlist-button:first-child:nth-last-child(5) ~ div > a > button > br.hotbr {
	display:inline;
}

}

/* Locations div in header: Eliminates "Rd." and "St." from addresses to avert wrapped text. Forces a break in hours...php. */

@media only screen and (max-width: 620px) {

span.ewshrink {
	display:none;
}

}

@media only screen and (max-width: 585px) {

span.paaddressshrink {
	display:none;
}

}

@media only screen and (max-width: 630px) {

span.panameshrink {
	display:none;
}

}

@media only screen and (max-width: 640px) {

br.hours {
	display:inline;
}

}