/*----main containers and whole page----*/

<style>


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}

.catalog-container {
	display:flex;
    width: 100%;
	font-size: 15px;
}

.info-banner {
	margin-bottom: 12px;
	font-size:80%;
	color: #666666;
	width: 80%;
	line-height: 120%;
}

.main-area {
    display: inline-block;
	flex: 1 1 auto;
	margin-left:1%;
	min-width: 200px;
	/*max-width: 80%;*/
}

.left-column { /*this is a flexbox for the left side columns within the grid container which is a flex*/
	display: flex;
	flex-direction:row;
	flex: 0 0 auto; /* grow shrink base */
	width: 260px;
	margin: 0 5px 0 0;
}


 @media screen and (max-width: 769px) {
            .left-column {
				display:inline-block;
                flex-direction: column;
				width: 150px;
            }
}


.hidden {
    display: none;
}

.label {
	margin-right: 2%;
	margin-bottom: 5px;
	font-size:110%;
	color: #666666;
	font-weight: bold;
}

/* ---- input ---- */

input[type="text"] {
    font-size: 75%;
}

/* ---- menu ----- */

.menu {
  padding: 3px;
  display: flex;
  flex-direction: column;
}

.menu-row {
  padding: 3px;
  display: flex;
  align-content: start;
  flex-direction: row;
	flex-wrap: wrap;
  width: 100%;
  height: auto;
  overflow: auto;
}

.menu-item {
  display: flex;
	flex-shrink: 0;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  width: 30%;
  height: 60px;
  margin: 5px 5px 5px 0;
  background: #003366;
  padding: 3px;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  overflow:hidden;
}

.menu-item h3 {
	color: #FFFFFF;
  text-align: center;
  overflow:hidden;
}

 @media screen and (max-width: 769px) {
            .menu-item h3 {
				font-size: 95%;
            }
}

.nav-row {
  padding: 3px;
  display: flex;
  align-content: start;
  flex-direction: row;
	flex-wrap: wrap;
  width: 100%;
  height: auto;
  overflow: auto;
}

.nav-item {
  justify-content: center;
  align-content: center;
  width: auto;
  height: 15px;
  margin: 0px 2px 2px 3px;
  padding: 3px;
  border-radius: 3px;
  overflow:hidden;
}

/* ---- filters  ---- */


.filter-column {
    display: flex; /*makes each filter a flex box so buttons can expand as needed */
    float:left;
	flex: 1 1 auto;
    flex-direction:column;
	min-width:120px;
    max-width: 50%;
	margin: 4px 4px 2px 3px;
}


.dynamic-filters {
    display: inline-block; 
    width: 100%;
	margin-bottom:10px;
}

.dynamic-filters.hidden {
	display:none;
}

.filter-row {
    display: flex;
    flex: 1 1 auto;
	align-items:center;
}

.filter-row.hidden {
    display: none;
}


.filter-label {
    flex: 0 0 auto;
}


.filter-buttons {
    flex: 1 0 auto;
}

/* ---- search boxes ----- */

.search-form-container {
    display:inline-block;
	max-width: 100%;
	min-width:200px;
	margin-bottom: 10px;
}


.search-container {
    display:inline-block;
	width: 100%;
	/*min-width:200px;*/
	margin-bottom: 10px;
}

 @media screen and (max-width: 769px) {
            .search-container {
				display:inline-block;
				width: 150px;
            }
}

 @media screen and (max-width: 769px) {
            .search-two {
				display:inline-block;
            }
}


.search-container input {
	float:left;
    border: 1px solid #DCDCDC;
	font-size:80%;
	min-width:150px;
	max-width:30%;
	margin-right:10px;
}

.search-container label {
	float:left;
	max-width: 15%;
	min-width: 90px;
	padding-top: 5px;
}


/* ---- form ----- */

form input {
	float:left;
    border: 1px solid #DCDCDC;
	font-size: 100%;
	max-width:800%;
}

/* --- buttons --- */



.button {
  flex-shrink: 0;
  color: #35679a;
  border:none;
  /*border: 1px solid #DCDCDC;*/
  background: #FFFFFF;
  font-size: 95%;
  font-weight: bold;
  text-align:left;
  width:auto;
  margin: 3px 3px 3px 3px;
}

.column-filter.button {
	max-width: 100px;
}

button.column {
	width: 100%;
}

.button.is-checked{
    background:#f5f5f5;
    border: 1px solid #000000;
}

.button[data-filter = '*'] {
    border-radius: 8px; 
    border: 1px solid #ffcc00;
    background: none;
	margin-top:4%;
}

.button[data-filter = '*']:hover {
    border-radius: 8px; 
    border: 1px solid #000000;
}

.button[data-filter = '*']:active {
    background:#f5f5f5;
}

button:hover {
    background:#f5f5f5;
}

button:focus {
  outline: none;
  background:#f5f5f5;
}


/* --sort --- */

.sort-container {
    display: flex;
	width: 100%;
	/*min-width:300px;*/
	margin-bottom: 10px;
	align-items: center;
}

 @media screen and (max-width: 769px) {
            .sort-container {
				display:inline-block;
            }
}


.sort label {
    color: #666666;
    font-size: 95%;
	margin-right: 3px;
	flex: 0 0 80px;
}

.sort {
	flex: 1 0 auto;
}

/* ---- isotope ---- */

/* clear fix */
.isotope:after {
    content: '';
    display: block;
    clear: both;
}

.isotope {
	flex: 1 1 100%;
}

/* ---- .element-item---- */

.element-item {
  position: relative;
  width: 250px;
  height: 130px;
  margin: 5px 5px 5px 0px;
  line-height: 100%;
  background: #FFFFFF;
  padding: 5px 5px 0 5px;
  border: 1px solid #BEBEBE;
  z-index: 0;
  overflow: hidden;
}

.element-item h1 {
    line-height: 18px;
    font-size: 105%;
    font-weight: bold;
}

.element-item.UGRD {
    line-height: 18px;
    font-size: 105%;
    font-weight: bold;
	border: 3px solid #003366;
}

.element-item.GRAD {
    line-height: 18px;
    font-size: 105%;
    font-weight: bold;
	border: 3px solid #ffcc00;
}

.element-item.LAW {
    line-height: 18px;
    font-size: 105%;
    font-weight: bold;
	border: 3px dashed #ffcc00;
}

.element-item.DENT {
    line-height: 18px;
    font-size: 105%;
    font-weight: bold;
	border: 2px dotted #ffcc00;
}

.element-item.HESP {
    line-height: 18px;
    font-size: 105%;
    font-weight: bold;
	border: 3px double #ffcc00;
}

.element-item.UONL {
    line-height: 18px;
    font-size: 105%;
    font-weight: bold;
	border: 3px dashed #003366;
}

.element-item h2 {
    font-size: 50%;
	line-height: 75%;
}

/*
.element-item a {
    text-decoration: none;
	color: black;
	line-height: 120%;
}
.element-item a {
	color: #336699;
	line-height: 120%;
}
*/

.element-item > div {
	display:inline-block:
    font-size: 90%;
    margin-bottom: 3px;
    color: #666666;
    line-height: 120%;
}

.element-item-footer {
	height: 20px;
	max-width: 50%;
	position: absolute;
	background: transparent;
  	bottom: 2%;
  	right: 2%;
}

.element-item-footer a {
	background:none;
	padding-right: 0;
}

.element-item-open {
    position: relative;
    float: left;
    width: 390px;
    height: auto;
    margin: 8px 8px 8px 0px;
    padding: 5px;
    color: #262524;
    z-index: 100;
	border: 1px solid #000000;
    background: #ededed;

}

.element-item-open > div {
    font-size: 105%;
    color: #000000;
    line-height: 150%;
}

.expand {
    font-size: 180%;
	

}

.images {
	padding: 0 3px 3px 0;
	max-height: 20px;
	max-width: 20px;
}

.element-item:hover {cursor:pointer;}

/* ---- code blocks ---- */

code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 20px;
}

</style>