/* ---------------------------------------------
MEDIA QUERIES
After the initial migration to a mobile-ready site, styles should be migrated into the respecitive areas for easy maintenance. They are compiled here for testing purposes as we transition into a mobile ready site.
--------------------------------------------- */


/*   Tablet  */

@media screen and (max-width: 1200px)  {
	#content { width: 90%; }
    #pagewrapper{ width: 90%; }
    div#columnleft { display: none; }
	#columnmain { width: 100%; }
	header #util { right: 5%; transform: translateX(0%); }

}

@media screen and (max-width: 800px)  {
   div#columnleft, header #util h4, header .join { display: none; }
   header #util { text-align: center; position: relative; padding: 30px 0; right: 0; margin-top: 10px; width: 100%; }
  .footer-content { width: 42%; margin: 4%; }
}

/*@media screen and (max-width: 421) and (min-width: 800px) {
    #icon-reorder-header {
		top: 50px;
	    left: 75px;
}*/


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

  /* page layout elements */

  #container,
  .container {
    width: 100%;
  }
  #columnmain {
    width: 100%;
    padding: 25px 15px;
  }
  #columnmain:after {
    font-size: 140%;
  }
  #columnmain img {
    max-width: 100%;
    height: auto;
	/*display: none;*/
  }
  #content {
    width: 95%;
}
  div#wn { display: none; }

  #logo,
  #util {
    max-width: 100%;
    width: 100%;
    padding: 1em;
  }
  div#header {
    overflow: visible;
    padding: 0;
  }
  header #logo {
      margin: 0;
	  width: 100%;
  }
  header #logo img {
	width: 230px;
  }
  div#columnleft,
  header #util h4,
  header .join {
      display: none;
  }
  header #util { text-align: center; position: relative; padding: 30px 0; rigth: 0; margin-top: 10px; }
  #logo,
  #util {
    float: none;
    position: relative;
  }
  #logo {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 5px;
  }
  #util {
    padding-top: 40px;
    margin-top: 0;
  }
  #util h5 {
    margin: 10px 0 10px auto;
  }
  .st-searchbox {
    height: auto;
    padding-top: 5px;
  }
  input.st-default-search-input {
    width: 75%;
	padding-right: 25px;
  }
  .st-custom-button {
    margin-left: -72px;
  }
  .footer-content {
    width: 100%;
  }

  #columnmain .nav-column { width: 100%; }
  #columnmain .nav-column ul { margin: 0; }

  /* homepage specific media queries */

  .homecontent .col1 {
    width: 100%;
    padding: 0 1em;
  }

  /* components and interior page elements */

  .img-right, .img-left, .material {
    float: none;
    margin: 0 0 25px 0;
    width: 100%;
  }
  .mobile { display:inline; }
}  /* end media query */
/* Mobile Styles without media query calls
--------------------------------------------- */
.mobile {
  display:none;
}

.threecolumn {
  float:left;
  width:100%;
  margin-right:0px;
}
#mobileonly{ display:block;}
#desktoponly{ display:none;}

  .invis,#invis{display:block;}
  #mainmenu nav {
    /* NAV menu inside container */
    display: none;
    margin: 30px 0 0 0;
  }
}