* { 
			box-sizing: border-box; 
			}
			body {
			font-family: 'Open sans', sans-serif;
			color: #333;
			}
			h2{
			font-size: 1.5rem;
			}
			.left-column h2 {
			font-size: 1.25rem!important;
			}
			.strong-alternative {
			font-size: 1rem!important;
			font-family: Tiempos Headline!important;
			margin: 2rem 0 .5rem;
			}	

			.isotope em {
			margin: -3rem 0rem !important;
			position: absolute;
			}
			em.strong-alternative, .strong-alternative a  {
			font-size: 1.1rem !important;
			font-family: Tiempos Headline !important;
			font-style: italic;
			}
			p:not(.footer-info) {
			font-size: 1rem!important;
			line-height: 1.6rem!important;
			}
			select {
			font-size: 20px;
			}
			
/* ---- isotope ---- */

			.grid {
			border: 0px solid #333;
			margin-left: 20rem;
			margin-top: -36rem!important;
			min-height: 85vh;
			}

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

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

			.element-item {
			width: 230px; /* originally 204px*/
			height: 390px;
			margin: 1rem 10px 3rem;
			max-height: 390px !important;
			overflow: hidden;
			padding: 0 0 20px 0;
			box-shadow: 0px 0 4px 0px #dad9d9;
			border-bottom: .7rem solid #0072ce;
			background-color: white;
			transition: .3s;
			}		
			.element-item:hover {
			transform: scale(1.05);
			cursor: pointer;
			box-shadow: 0px 0 4px 0px #fc0;
			}
			.element-item > * {
			margin: 0 0;
			padding: 10px 10px 0;
			}		
			.element-item div {
			position: absolute;
			bottom: 3%;
			width: 100%;
			}
			.element-item div span {
			background-color: #BEE6FA80;
			color: #036;
			padding: 2% 2% 1%;
			font-size: 10px;
			margin: 0 2% 0 0;
			}
			a .element-item {
			color: #333 !important;
			}
			h4.name { 
			margin: 5px 0 0 0; 
			max-height: 149px; 
			overflow: hidden 
			}
			p.date, p.author { 
			margin: 0 0 5px 0; 
			font-size: 94%; 
			height: 15px; 
			}
			.element-item .panel{
			width: 204px;
			height: 340px;
			margin: 10px;
			max-height: 340px !important;
			overflow: hidden;
			padding: 0 0 20px 0;
			}
			.element-item .panel div.description { 
			height: 120px; 
			max-height: 120px; 
			overflow: hidden; 
			}
			.left-column {
			width: 15rem;
			margin: .75rem 2rem;
			}					
			.left-column-polygon {
			float: left;
			width: 143px;
			background-color: #F8D134;
			position: relative;
			z-index: -2;
			top: -1rem;
			left: -25px;
			padding: 5rem;
			height: 0rem;
			}
			.resource-controls {
			background: #fff;
			min-height: 50px;
			padding: 1rem 0 2rem;
			display: block;
			box-shadow: 0 0 4px 0 lightgray;
			border-bottom: .7rem solid #fc0;
			height: 16rem;
			margin-bottom: 2rem;
			}
			.form-control {
			width: 14.5rem;
			margin-top: 1rem;
			position: relative;
			top: -7rem;
			z-index: 1;
			opacity: .65;
			}
			.form-control:focus {
			color: var(--bs-body-color);
			background-color: var(--bs-body-bg);
			border-color: #86b7fe;
			outline: 0;
			box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
			box-shadow: 0 0 5px #fc0;
			border: 1px solid transparent;
			}
			.fas.fa-search {
			position: relative;
			top: -8.65rem;
			float: right;
			right: -10.25rem;
			opacity: .5;
			z-index: 0;
			}
			.fa-solid.fa-caret-down {
			position: relative;
			top: -5.35rem;
			float: left;
			left: 13.15rem;
			opacity: .5;
			z-index: 0;
			}
			.resource-controls > .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), { color: #000; }
			.resource-controls a, .resource-controls .btn-link {
			border-radius: 0;
			color: #555;
			display: inline-block;
			font-size: 16px;
			font-weight: 400;
			line-height: 16px;
			padding: 5px 12px 10px;
			}
			.canvas-95 {
			margin: 0 auto;
			width: 98%;
			}
			ul, ol {
			margin-bottom: 0;
			margin-left: 0;
			}
			#show-mobile{
				display:none;
			}
			@media only screen and (max-width: 920px) {
			.left-column {
			width: 100%!important;
			margin: 0.9rem 0rem 5rem!important;
			}
				.isotope em {
					margin: -4.5rem 0rem !important;
				}
			.resource-controls {
			padding: 1rem 0 2rem;
			}
			.form-control {
			width: 99%;
			}
			.grid {
			margin-left: 0!important;
			margin-top: 3rem!important;
			}
			.col-md-3 {
			width: 100%!important;
			}
			.fas.fa-search {
			left: -5%;
			float: right;
			opacity: .50;
			}
			.fa-solid.fa-caret-down {
			float: left;
			left: 93%;
			}			
			.left-column-polygon {
			top: -1rem;
			left: -2rem;
			}
			#hide-mobile{
				display:none;
			}
			#show-mobile{
				display:block;
				padding: 2% 6%;
			}
			}