/******************************************************
	Main Content Area - Home
*******************************************************/
/* Sign in Banner */
section[role="banner"] {
	/*background: url("../img/home/bg_banner.png") no-repeat 0 0;*/
	background-size: cover;
	min-height: 167px;
	width: 100%;
	padding: 2rem 4rem;
	display: block;
	border-radius: 4px;
	background-repeat: no-repeat;
}
section[role="banner"] div.container {
	margin: 0 ; 
	position: relative; 
}
section[role="banner"] p {
	max-width: 600px;
	font: 37px/47px "gibson-medium";
	font-weight: normal; 
	color: white;	
	max-width: 80%;  
	padding: 0;  
}
section[role="banner"] a.button {
	position: absolute;
	right: 0;
	font: 18px/18px "gibson-semibold";
	width: 142px;
	padding: 16px 0; 
	top: calc(50% - 20px);
}


/*=====================================================
	Home - Focus stack
  =====================================================*/
#section_focus {
	width: 100%;  
} 
#focus-grid {   
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr minmax(1fr, 315px);
	grid-template-columns: repeat(auto-fill, minmax(1fr, 315px)); 
	-ms-grid-gap: 0px;
	grid-gap: 0px;
	-ms-grid-rows: minmax(40px, auto);        /* adjusted */
	grid-auto-rows: minmax(40px, auto);
	grid-auto-flow: dense;  
}
#focus-grid > div.grid-item { 
	border-radius: 4px;
	-ms-grid-row: auto;
	-ms-grid-column: auto;	
	margin-bottom: 15px; 
	background-color: #ebedee;
	color: white; 	
}   
#focus-grid > div.grid-item[area="1"] {
	-ms-grid-column: 1; 
	-ms-grid-row: 1;   
	-ms-grid-row-span: 2;
	-ms-grid-end: span 2;  	
	grid-column-end: span 2;
	grid-row-end: span 2;	
	background: url("../img/home/bg_focus.png") no-repeat 0 0;
	background-size: cover;  
	margin-right: 15px;
	padding: 2%;
	padding-left: 40%;
	min-width: 666px;
	min-height: 264px;  
	height: 264px;				/* Chrome */
	position: relative;	
}
#focus-grid > div.grid-item[area="2"] {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
#focus-grid > div.grid-item[area="3"] {
	-ms-grid-column: 2;
	-ms-grid-row: 2;   
} 
#focus-grid > div.grid-item[area="4"] {
	-ms-grid-column: 1;
	-ms-grid-row: 3; 
	-ms-grid-column-span: 3;
	-ms-grid-end: span 3; 
	grid-column: 1 / span 3;
	grid-row: 3;
} 
#focus-grid > div.grid-item > div.item { 
	margin: 0;   
	width: 100%;
	padding: 10px 10px; 
	height: 100%;
	display: flex;  
	flex-direction: row;	 
	justify-content: flex-start;  
	align-items: center;
	align-content: center;   
	border-radius: 4px;
	font: 20px/22px "gibson-regular"; 
	font-weight: normal;
}
#focus-grid > div.grid-item > div.item  a {
	font: 19px/24px "gibson-medium";
}
#focus-grid > div.grid-item > div.item > img { 
	width: 70px;
	height: 70px; 
	min-width: 70px;
	display: inline-block; 
	margin: 0;
	margin-right: 10px;
} 
#focus-grid > div.grid-item > div.item * {
	color: #080566;
	padding: 0;
	margin: 0;
} 
#focus-grid > div.grid-item[area="1"] > div.item {
	font: 34px/39px "gibson-semibold"; 
	font-weight: normal; 
	display: flex;
	flex-flow: column nowrap;
	-ms-flex-direction: column;	
	-ms-flex-wrap: nowrap;
  	align-items: center;
  	justify-content: center;
  	align-content: center;   
	width: auto;  
}

#focus-grid > div.grid-item[area="1"] > div.item p {
	color: #fff;
}

#focus-grid > div.grid-item[area="1"] > div.item * { 
	padding: 0;
	margin: 0;
	margin-bottom: 0.5em;
	text-align: left;
	width: 100%;				/* IE11 */ 
	max-width: 305px; 
}
#focus-grid > div.grid-item[area="1"] > div.item a {
	color: #080566;
	display: inline-block; 
	font: 18px/1.2em "gibson-semibold"; 
	padding: 10px 16px;
	max-width: 305px;
	border-radius: 4px;
	margin-top: 10px;
	margin-bottom: 0;
	text-align: center;
}
#focus-grid > div.grid-item[area="4"] > div.item {
	justify-content: center;
}

#focus-grid > div.grid-item[area="4"] > div.item a {
	font-family: gibson-semibold;
}


/*=====================================================
	Home - Search
  =====================================================*/
section[role="search"] { 
}
#homesearchlarge form.search {
	width: 100%;
	display: block;
	padding: 1px 12px;
	margin: 0;
	margin-bottom: 10px;
	position: relative;
	border: 1px solid #737373; 
	border-radius: 4px;
} 
#homesearchlarge form.search input.keyword {
	position: relative;
	width: auto;
	width: calc(100% - 40px);
	display: inline-block;
	overflow: hidden;
	margin: 0;
	border: 0;
	color: #838383;
  	font: 24px/46px "gibson-book"; 
  	font-weight: 400; 
}
#homesearchlarge form.search *.submitBtn {
	width: 32px;
	height: 48px;
	display: inline-block;
	background: url("../img/global/icon_search.svg") no-repeat center center;
	background-size: 32px 32px;
	border: 0;
	margin: 0;
	float: right; 
	cursor: pointer;
}

form.search {
	width: 100%;
	display: block;
	padding: 1px 12px;	/* 1px to push down autocomplete layer hovering below border */
	margin: 0;
	margin-bottom: 10px;
	position: relative;
} 

div.search {
	width: 100%;
	display: block;
	padding: 1px 12px;	/* 1px to push down autocomplete layer hovering below border */
	margin: 0;
	margin-bottom: 10px;
	position: relative;
	border: 1px solid #737373; 
	border-radius: 4px;
} 
div.search input.keyword {
	position: relative;
	width: auto;
	width: calc(100% - 40px);
	display: inline-block;
	overflow: hidden;
	margin: 0;
	border: 0;
	color: #838383;
  	font: 24px/46px "gibson-book"; 
  	font-weight: 400; 
}
div.search *.submitBtn {
	width: 32px;
	height: 48px;
	display: inline-block;
	background: url("../img/global/icon_search.svg") no-repeat center center;
	background-size: 32px 32px;
	border: 0;
	margin: 0;
	float: right; 
	cursor: pointer;
}

div.search-totals {
	clear: both;
    padding-top: 20px;
}

div.search-filters {
	border-bottom: 1px solid #999999;
    padding-bottom: 30px;
    margin-bottom: 20px;
    padding-top: 10px;
    font-size: 18px;
}

form input.buttonSmaller {
	height: 30px;
    background: #ffffff;
    color: #000000;
    font: 16px "gibson-book";
    text-align: center;
    border: 1px solid #080566;
    border-radius: 4px;
	cursor: pointer;
}

ul.ui-widget-content {
	background: #F7F7F7;
}
ul.ui-autocomplete {
	border: 1px solid blue;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 0px 0;
	margin: 0; 
	list-style: none;
	text-align: left;
	background-color: #F7F7F7;
	border: 1px solid #F7F7F7 !important;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	background-clip: padding-box;
}
ul.ui-autocomplete > li > div {
	display: block;
	padding: 4px 20px;
	clear: both;
	font: 22px/29px "gibson-book";
	font-weight: normal;
	color: black;
	white-space: nowrap; 
} 
div.ui-menu-item-wrapper.ui-state-hover,
div.ui-menu-item-wrapper.ui-state-active,
div.ui-menu-item-wrapper.ui-state-focus {
	text-decoration: none; 
	color: black;
	background-color: white;
	border-color: #F7F7F7;
	cursor: pointer; 
} 

/*=====================================================
	Home - news cards
  =====================================================*/
  
#search_suggestions label {
	padding-top: 5px;
}   
  
label {
	float: left;
	width: 100px;
	color: #333333;
	font: 17px/22px "gibson-regular";
} 
ul.tiles,
ul.tags {
	position: relative;
	width: 102%; 
	padding: 0;
	margin: 0 -10px;
	display: flex; 
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-flow: flex-direction; 
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;	 	
	border: 0px solid red;
} 
ul.tags {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width: calc(100% - 100px);	 
	float: right;
	margin: 0 -5px; 
}
ul.tiles > li,
ul.tags > li { 
  	display: flex; 
  	flex-direction: column;
  	justify-content: center; 
	list-style: none; 
	margin: 5px;  
	padding: 10px;
	border-radius: 4px; 
	width: calc(25% - 10px);
	text-align: center;
	background: #080566; 
	color: white;  
	font: 17px/22px "gibson-regular", Verdana, Arial;
	font-weight: normal;
	cursor: pointer; 
	min-height: 0;  
}  

ul.tiles > li,
ul.tags > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    margin: 5px;
    /* padding: 10px; */
    /* border-radius: 4px; */
    /* width: calc(25% - 10px); */
    /* text-align: center; */
    /* background: #080566; */
    /* color: white; */
    /* font: 17px / 22px "gibson-regular", Verdana, Arial; */
    /* font-weight: normal; */
    /* cursor: pointer; */
    /* min-height: 0; */
    padding-left: 30px;
    height: 50px;
    font: 22px / 50px "gibson-book";
    background: var(---eaca30-sunshine) 0% 0% no-repeat padding-box;
    background: #EACA30 0% 0% no-repeat padding-box;
    opacity: 1;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-600) 19px / var(--unnamed-line-spacing-20) var(--unnamed-font-family-gibson);
    color: var(---4f0a4b-hr-plum);
    letter-spacing: 0.76px;
    color: #4F0A4B;
    opacity: 1;
    padding-right: 30px;
    border: none;
    font-weight: bolder;
}

ul.tiles > li:nth-of-type(n) {
	min-height: 0;  
	margin: 0 10px;  
	width: 235px;
	width: calc(25% - 20px);
	font: 20px/22px "gibson-semibold", Verdana, Arial; 		
 
}  
ul.tiles > li a,
ul.tags > li a {
	font: inherit;
	/*padding: 10px;*/
	color: #4F0A4B;
}

ul.tags > li a:hover{
	text-decoration: underline;
}  
 
div.cards {
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	flex-direction: row;
	flex-flow: flex-direction;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start; 
	margin: 0;
}
div.cards div.card:nth-of-type(n) {
	width: 235px; 
	min-height: 315px;
	margin: 0;
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 0;
	background-color: white;	
	order: 0;
	flex-shrink: 1; 
	display: flex;
 	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	cursor: pointer;
} 

div.cards div.card:last-child {
	margin-right: 0px;
} 
	
div.cards > div.card:nth-of-type(n) > * {
	word-break: normal;
	padding: 0; 
}
div.cards div.card img {
	width: 100%;
	margin: 0;
	padding: 0; 
}
div.cards div.card div.container { 
	display: block;
	padding: 20px 20px;
	height: 100%;
	width: 100%;
	font: 15px/18px "gibson-book"; 
}
div.card div.container h3 {
	font: 18px/24px "gibson-medium";
	font-weight: normal;
	margin: 0;
	margin-bottom: 8px;
}
div.card div.container p {
	margin-bottom: 0.5em;
}
div.card div.container a.link {
	font: 14px/19px "gibson-semibold";
}

/*new cards */

div.cards div.card-new:nth-of-type(n) {
	width: 235px; 
	min-height: 315px;
	margin: 0;
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 0;
	background-color: white;	
	order: 0;
	flex-shrink: 1; 
	display: flex;
 	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	cursor: pointer;
} 

div.cards div.card-new:last-child {
	margin-right: 0px;
} 
	
div.cards > div.card-new:nth-of-type(n) > * {
	word-break: normal;
	padding: 0; 
}
div.cards div.card-new img {
	width: 102%;
	margin: 0;
	padding: 0; 
}
div.cards div.card-new div.container { 
	display: block;
	padding: 20px 20px;
	height: 100%;
	width: 100%;
	font: 15px/18px "gibson-book"; 
}
div.card-new div.container h3 {
	font: 18px/24px "gibson-medium";
	font-weight: normal;
	margin: 0;
	margin-bottom: 8px;
}
div.card-new div.container p {
	margin-bottom: 0.5em;
}
div.card div.container a.link {
	font: 14px/19px "gibson-semibold";
}


/******************************************************
	Responsive
*******************************************************/
@media (max-width: 1000px) {
	div.cards div.card:nth-of-type(4) {
		margin-right: 20px;
	}
	div.cards div.card-new:nth-of-type(4) {
		margin-right: 20px;
	}
}


/* 48em = 768px */
@media (max-width: 48em) {
	main  {
		width: 100%;
		padding: 0 20px 0 20px;
	} 
	section[role="banner"] {
		padding: 1em;
		min-height: 0; 
		font: 18px/22px "gibson-medium";
		text-align: center; 
	}
	section[role="banner"]:after {
		margin: 0.5rem;
	}
	section[role="banner"] div.container,
	section[role="banner"] div.container > * {
		width: 100%;
		float: none;
		position: relative; 
		font: 18px/22px "gibson-medium";
		text-align: center;
	} 
	section[role="banner"] p {  
		max-width: 100%; 
		font: 18px/22px "gibson-medium";
		text-align: center;
		padding-top: 6px;
		padding-bottom: 8px;
	}
	section[role="banner"] a.button {
		font: 14px/22px "gibson-semibold";
		font-weight: normal;
		text-align: center;
		padding: 5px 20px;
		width: 130px;  
	}
	
	#focus-grid {
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 50% 50%; 
	}
	#focus-grid > div.grid-item > div.item { 
		-ms-flex-wrap: wrap;
		flex-direction: column;	 
		flex-flow: flex-direction;
		justify-content: flex-start;  
		align-items: center;
		align-content: center; 
		text-align: center; 
	}
	#focus-grid > div.grid-item > div.item  > * {
		width: 100%;
	}
	#focus-grid > div.grid-item > div.item > img {
		display: block; 
	}
	#focus-grid > div.grid-item[area="1"] {
		-ms-grid-column: 1; 
		-ms-grid-row: 1;   
		-ms-grid-row-span: 1;
		-ms-grid-column-span: 2;  	
		grid-column: span 2;
		grid-row: 1;
		min-width: 300px;
		min-height: 80px; 
		height: auto;
		margin-right: 0;
 	} 	
	#focus-grid > div.grid-item[area="2"] { 
		-ms-grid-row: 2;
		grid-row: 2;
		-ms-grid-column: 1; 
		grid-column: 1; 
		width: calc(100% - 7px);
		margin-right: 7px;
		margin-left: 0;
	}
	#focus-grid > div.grid-item[area="3"] { 
		-ms-grid-row: 2;   
		grid-row: 2;
		-ms-grid-column: 2; 
		grid-column: 2; 
		width: calc(100% - 8px);
		margin-right: 0;
		margin-left: 8px;		
	} 
	#focus-grid > div.grid-item[area="4"] { 
		-ms-grid-row: 3;    
		grid-row: 3; 	
	} 
	#focus-grid > div.grid-item[area="4"] > div.item { 
		justify-content: center;
	} 
	div.cards > div.card:nth-of-type(n) > * {
		padding: 0; 
		width: 100%; /* Add so images stretch full width */
	}
	div.cards > div.card-new:nth-of-type(n) > * {
		padding: 0; 
		width: 100%; /* Add so images stretch full width */
	}
}


/* 40em = 640px */
@media (max-width: 40em) {
	#focus-grid > div.grid-item[area="1"] {
		padding-left: 45%; 
 	} 	
 	#focus-grid > div.grid-item[area="1"] > div.item * {
 		color: white;
 	}  
 	section[role="search"]:after { 
 		margin-bottom: 0;
 	} 
 	label {
 		display: block;
 		float: none;
 		width: auto;
		clear: both;
		width: 100%;
 	}
 	ul.tags:before,
 	ul.tags:after {
 		content: "";
 		display: block;
 		clear: both;
 	}
  	ul.tags,
	ul.tiles { 
		-webkit-flex-wrap: wrap;
    	-moz-flex-wrap: wrap;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	margin: 0; 
    	width: auto; 
	}
	ul.tags > li:nth-of-type(n),
	ul.tiles > li:nth-of-type(n) {
		margin: 5px 5px !important;
		width: calc(50% - 10px); 
	}   	
	div.cards { 
		-webkit-flex-wrap: wrap;
    	-moz-flex-wrap: wrap;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap; 
	} 
	div.cards > div.card:nth-of-type(n) { 
		width: calc(50% - 20px);
		padding: 0;  
	}  
	div.cards > div.card-new:nth-of-type(n) { 
		width: calc(50% - 20px);
		padding: 0;  
	}  
 }
 

/* 30em = 480px */
@media (max-width: 30em) {
	#focus-grid > div.grid-item > div.item {
		padding: 1rem 1.0rem;
	}
	#focus-grid > div.grid-item > div.item > img {
		margin: 0;
		margin-bottom: 5px;
	}
	#focus-grid > div.grid-item > div.item *,
	#focus-grid > div.grid-item > div.item a {
		font: 14px/16px "gibson-medium";
	}
	#focus-grid > div.grid-item[area="1"] {
	 	padding: 3%;
	 	background: url("../img/home/bg_focus_plain.svg") no-repeat top center; 
		background-size: auto;
 	} 	
 	#focus-grid > div.grid-item[area="1"] > div.item * {
 		color: white;
 		font: 20px/1.2em "gibson-semibold", Helvetica, sans-serif; 
 		font-weight: normal;
 		text-align: center;
 		max-width: 100%;
 	}
 	#focus-grid > div.grid-item[area="1"] > div.item a {
 		font: 14px/20px "gibson-semibold";
 		width: auto;
 		padding: 5px 15px;
 	}

 	form.search {
 		padding: 1px 4px;
		margin-bottom: 1rem;	
		display: block;
		float: none;
		clear: both;
 	}
 	form.search input.keyword {
 		font: 14px/33px "gibson-book";
 	}
 	form.search *.submitBtn {
		width: 35px;
		height: 35px; 
		background-size: 14px 14px;
 	}
 	
 	ul.tags,
	ul.tiles {  
    	width: 100%;
	}
	ul.tags > li:nth-of-type(n),
	ul.tiles > li:nth-of-type(n) { 
	} 
	div.cards {    
		align-content: flex-start;
  		justify-content: flex-start;	 
  		margin-right: -10px;
	}	
	div.cards > div.card:nth-of-type(n) { 
		margin: 10px;
		width: calc(100% - 20px); 
		min-height: 260px;
		height: auto;
		order: 0;
		flex-shrink: 1; 
		flex-grow: 0;
		align-items: start;
  		justify-content: flex-start;
		padding: 0; 
	} 
	div.cards > div.card:nth-of-type(n) {
		padding: 0;
		margin-right: 0;
		margin-left: 10px; 
	}	 
	div.cards > div.card > * { 
		margin-top: 0; 
	} 
	div.cards > div.card > img {
		object-fit: cover;
		width: 100%;
		max-height: 120px;
	}
	div.cards > div.card div.container { 
		height: auto;
	}
	
	div.cards > div.card-new:nth-of-type(n) { 
		margin: 10px;
		width: calc(100% - 20px); 
		min-height: 260px;
		height: auto;
		order: 0;
		flex-shrink: 1; 
		flex-grow: 0;
		align-items: start;
  		justify-content: flex-start;
		padding: 0; 
	} 
	div.cards > div.card-new:nth-of-type(n) {
		padding: 0;
		margin-right: 0;
		margin-left: 10px; 
	}	 
	div.cards > div.card-new > * { 
		margin-top: 0; 
	} 
	div.cards > div.card-new > img {
		object-fit: cover;
		width: 100%;
		max-height: 120px;
	}
	div.cards > div.card-new div.container { 
		height: auto;
	}
 }