@charset "UTF-8";

* { box-sizing: border-box; }
     
html {
	background-color: #fff;
	margin: 0;
	height: 100%;
}

body {
/*
	position: relative;
*/
	font-size: 0.9rem;
	margin: 0;
	/*min-height: 100%;*/
/*
	max-width: 100%;
*/
	font-family: 'Roboto', Arial, Helvetica;
	line-height: 1.65;
	padding: 0;
	
	-webkit-backface-visibility: hidden;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;

	/* Support for all Webkit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
	/* Support for IE. */
	font-feature-settings: 'liga';

	/* Prevent font scaling in landscape while allowing user zoom */
	-webkit-text-size-adjust: 100%; 	
}

img, img:focus, input, input:focus, select, select:hover, select:focus, option, option:focus, select:hover > option, select:focus > option, button, button:focus, a, a:focus, span.link_in_anchor, span.link_in_anchor:focus {
	outline: none;
}

img {
	display: block;
}
	
h1,
h2,
h3 {
	font-family: 'Barlow Condensed', 'Arial Narrow', Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: #327DF6;
	cursor: pointer;
}

a:hover {
	color: #0d66f4;
	text-decoration: none;
}

a:active {
	color: #084ebe;
}

a, a:visited, a:active {
	outline: none;
}

a.no-style,
a.no-style:active,
a.no-style:focus,
a.no-style:hover,
a.no-style:link,
a.no-style:visited {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	outline: none;
}

/* EXPERIMENTAL - Implement disabled links */
a[disabled],
a:disabled /* not sure if this selector will work */ {
	pointer-events: none;
}


/*******************************************\
 #Layout
\*******************************************/


	.main-col {
		margin: 0 auto;
		padding: 0 1rem;
		max-width: 76rem;
	}
	
	.main-col.containing-cards {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	
	#main-column {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	#main-column_bkgrd { 
		width: 100%;
		background-color: #ddd;
	}
	
	
	#main-column.no-subnav-actions { /* Neither the sub-navigation or actions navigation tabs are shown in the header */
/*
		padding-top: 122px; 
*/
	}


/*******************************************************************************************************/
/*******************************************************************************************************/

	
/** OLD ONE COLUMN LAYOUT CSS - TO BE DEPRECATED ** ******************************************************************************	**/

		#main-column.content-centered {
			padding-left: 1rem;
			padding-right: 1rem;
		}
	
		/* A single column holding the main content is shown below the navigation */
		.content-centered .card-full-page {
		/*
			margin: 0 auto 0  auto;
			max-width: ;
		*/
			background-color: #fff;
			padding-bottom: 1.5rem;
		}

/** END - OLD ONE COLUMN LAYOUT CSS - TO BE DEPRECATED ** *************************************************************************	**/


/** OLD TWO COLUMN LAYOUT CSS - TO BE DEPRECATED ** ******************************************************************************	**/

		/* outer container for 2 column page with LH column being .masonry-card.card-full-page and RH column being  .rh-column
		 * RH column is half the width of the LH column
		 */
		.two-column .flex-container {
			display:flex;
			margin: 0 auto;
			max-width: 61rem;
		}


		.two-column .rh-col {
			margin: 0;
		}

		/* the content card within the RH column of the .two-column .flex-container layout
		 */
		.column-card {
			background-color: #fff;
			padding:.5rem;
			margin-bottom: 1rem;
		}

		.column-card-content img {
			width: 100%;
		}

/** END - OLD TWO COLUMN LAYOUT CSS - TO BE DEPRECATED ** *************************************************************************	**/

/*******************************************************************************************************/
/*******************************************************************************************************/


/********************************************************************************************************************************************************************	**
 * FOOTER PAGES - Site information pages linked to from the footer of each page - spacing modification to make ol and ul work on single card full page content display	**
 ********************************************************************************************************************************************************************	**/
		.card-full-page ol.site-info,
		.card-full-page ul.site-info {
			margin-top: 0;
			margin-bottom: 1.25rem;
			padding-left: 0.85rem; 
		}

		.card-full-page ol.site-info  > li {
			margin-bottom: 1rem; 
		}
		
		.card-full-page ol.site-info > li > ol > li {
			margin-bottom: 0.5rem; 
		}
		
		.card-full-page ol.site-info > li > h3 {
			font-size: 1.2rem		}
/***************************************************************************************************************************************************
****************************************************************************************************************************************************/

	 
/*******************************************\
 #Card-components
\*******************************************/

	
	.card {
		position: relative;
		display: block;
		margin: 0 0 0.5em;
		padding: 0;
		box-sizing: border-box;
		background-color: #fff;
		color: initial;
	}

	.masonry-card {
		position: relative;
		display: block;
		margin: 0 0 1rem 0;
		background-color: #fff;
	}

	/** Max width limiter for card internals
	 */
	.all-col-max {
		max-width:  36rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	.square-card-image,
	.card-image {
		position: relative;
		width: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #aaa;
	}

	.square-card-image {
		padding-top: 100%;
		background-size: 100% 100%;
	}

	.card-image div a.object-owner::before,
	.square-card-image div a.object-owner::before {
		content: 'by ';
		text-decoration: none;
	}


	.card-image div a.object-owner,
	.square-card-image div a.object-owner {
		display: block;
		font-weight: normal;
		color: #fff;
		text-decoration: underline;
		margin-top: .5rem;
	}

	.card-body {
		padding: 1.5em 0;
	}

	.card-gradient-up {
		color: #fff;
		padding: 1.5rem 0;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(rgba(0,0,0, 0), rgba(0,0,0, 0.75));
	}

	.card-gradient-down {
		color: #fff;
		padding: 1.5rem 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		background: linear-gradient(rgba(0,0,0, 0.75), rgba(0,0,0, 0));
	}

	.standard-inner-padding {
		 padding-left: 2rem;
		 padding-right: 2rem;
	}

	.card-gradient-up h2 {
		line-height: 1.25;
	}

	.card-gradient-up div {
		margin-top: .25rem;
	}

	.masonry-card-content,
	.card-content {
		padding: 0 1.5rem 1.5rem 1.5rem;
	}

	.image-left-text-right-container {
		display: flex;
	}

	.image-left-text-right-container > img {
		float: left;
	}
	
	.image-left-text-right-container > .text-container {
		float: left;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 1.5rem;
		padding: 1rem 1.5rem 1rem 0;
	}

	.masonry-card.empty,
	.masonry-card.hidden {
		height: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
	}

	.masonry-card.empty *,
	.masonry-card.hidden * {
		display: none !important;
	}

	.masonry-card .extend-to-full-width {
		margin-left: -1.5rem;
		margin-right: -1.5rem;
	}
	
	.masonry-card .card-horiz-padding {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	.masonry-card .vertical-spacer {
		display: block;
		clear: both;
		height: 1.5rem;
	}
	
	 .actions {
		display: flex;
		flex-wrap:wrap;
		align-items: center;
		justify-content: center;
	}

	.masonry-card .actions > :not([hidden]) ~ button,
	.masonry-card .actions > :not([hidden]) ~ a.bstr-btn {
		margin-left: 1rem;
	}
	
	.masonry-card[cardtype="advertisement"]::before {
		display: block;
		padding: 0 1rem;
		font-size: 0.8rem;
		color: #999;
		line-height: 1.8rem;
		background-color: #fff;
		content: 'Advertisement';
	}
	
	.masonry-card[cardtype="advertisement"][adtype="sponsor"]::before {
		content: 'Sponsored by';
	}
	
	.masonry-card[cardtype="advertisement"] .card-image {
		cursor: pointer;
	}
 
	
	/* divider within a card so left and right padding of container will align it with content e.g. of use below card header, after card content */
	hr.card-divider { 
	  border: 0;
	  border-top: 1px solid #eee;
	  margin: 0;
	}
	
	/* full width card divider at bottom of card e.g. of use separate card from comments about the card */
	hr.card-divider.card-end { 
	  margin: 0 -1.5rem;
	  border-top-color: #ddd;
	}
	
	/* container for the action buttons at the TOP of a card which is displayed singly on the page */ 
	.card-full-page .card-header .actions {
		 display: flex;
		 align-items: flex-start;
		 justify-content: flex-end;
		 padding: 0 .025rem 0.5rem 0;
		 margin: 0 0 0 auto;
	 }


	
	/* the image of an object owner e.g. the person who made a post or recorded a trophy */
	.avatar {
		 display: block;
		 border-radius: 100%;
		 border: 1px solid #fff;
		 height: 3.43rem;
	}
	
	.card-header {
		display: flex;
		flex-direction: row;
		padding: 1.5rem 1.5rem 1rem 1.5rem;
		flex-wrap: wrap /* make header sub elements stack nicely in very narrow screen widths */
	}
	 
	 /* this is general css for a (masonry) card header title which is a link */  
	.card-header a.card-title { 
		font-weight: bold;
		font-size: 1rem;
	}

/** OBJECT STATS ************************************************************************	**/

	.masonry-card .stats {
		line-height: normal;
		padding-top: 1rem;
		padding-bottom: 1rem;
		font-size: 1rem;
		display: flex;
		flex-wrap: wrap;
	}

	.masonry-card .stats span {
		/*color: #999;*/
		color: #555;
		font-size: 0.95rem;
	}

	.masonry-card .stats > span[stats-grp] {
		white-space: nowrap;
		padding-right: 0.6rem;
	}

	.masonry-card .stats > span[stats-grp]:last-child {
		padding-right: 0;
	}

	.masonry-card .stats .far,
	.masonry-card .stats .fas {
		padding-right: 0.3rem;
		font-size: 1rem;
		/*color: #aaa;*/
		color: #555;
	}

	.masonry-card .stats span[count="0"] {
		display: none;
	}

	.masonry-card .card-gradient-down .stats {
		padding-top: 0.5rem;
	}

	.masonry-card .card-gradient-down .stats span,
	.masonry-card .card-gradient-down .stats .far,
	.masonry-card .card-gradient-down .stats .fas {
		color: #fff;
	}

	.masonry-card .all-gradient-top .stats span,
	.masonry-card .all-gradient-top .stats .far,
	.masonry-card .all-gradient-top .stats .fas {
		color: #fff;
	}

/** END - OBJECT STATS ************************************************************************	**/


/** IE 10 AND 11 SPECIFIC CSS *********************************************************************************************************************************************
 **************************************************************************************************************************************************************************/

/* media query for IE 10 and 11 only */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	
	#main-column {
		/* flex-bugs in IE11 mean flex cannot be used for this container */
		display: block;
	}

/* re implement object summary images layout since IE11 only has partial grid and flex support */
	.object-summary {
	  border: 1px solid #eee;
	  grid-gap: 1px;
	  margin: 0 -1.5rem; /* pull the edges of the object summary on to the left and right border of the card container - full card width display */ 
	}

	.object-summary > img:nth-child(2) {
		height: 50%;
		width: 50%;
		float: left;
		border-right: 0.5px solid #fff;
	}
	
	/* make the first image or prime element in the object summary grid largest */
	.object-summary > .prime,
	.object-summary > img:first-child { 
		  width:  100%;
		  height: 100%;
		  border-bottom: 1px solid #fff;
	}
	
	/* for a multi object summary like a post - final element wrapper to add the " + num unshown elements " centered overlay */ 
	.more-images-container {
		position: relative;
		display: inline-block;
		width: 50%;
		height: 50%;
		border-left: 0.5px solid #fff;
	}
	
	.more-images-container > img { 
		display: inline-block;
		width: 100%;
	}
	
	 /* for a multi object summary like a post - " + num unshown elements " formatting */
	.more-images {
		position: absolute;
		left: 40%;
		top: 40%;
		color: #fff;
		font-size: 2rem;
		font-weight: 400;
		text-shadow: 1px 1px 8px #000;
	}
	
	.object-summary > img:nth-child(even) {
		height: 50%;
		width: 50%;
		float: left;
		border-right: 0.5px solid #fff;
		border-bottom: 1px solid #fff;
	}
	
	.object-summary > img:nth-child(2n+3) { /* odd except first child */
		height: 50%;
		width: 50%;
		float: right;
		border-left: 0.5px solid #fff;
		border-bottom: 1px solid #fff;
	}
	
	.post-stats {
		clear: both;
	}
	
	.nav-bar-container ul.nav-bar {/* to add extra top padding in the IE 10-11 which compensates for lack of grid postitioning full support for the notifications section moving from the end of the container in 2 and 3 column mode to the top of the container in single column mode */
		padding-top: 5rem;
		border-bottom: solid 2rem #c00;
	}
        
}/** END OF IE MEDIA QUERY
  * 
/** END - IE 10 AND 11 SPECIFIC CSS *********************************************************************************************************************************************
 ********************************************************************************************************************************************************************************/
 
/*******************************************\
 #Header-Navigation
\*******************************************/

	.open-nav {
		overflow: hidden;
	}
	
	.header-wrapper {
		background-color: #fff;
		font-size: 1rem;
	}		
	
	.header {
		background-color: #fff;
		padding-left: 0;
		padding-right: 0;
	}

	.scroll-shadow .location {
		box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06), 0 3px 14px 0 rgba(0,0,0,0.12);
	}

	.scroll-down .location {
/*
		box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06), 0 3px 14px 0 rgba(0,0,0,0.12);
*/
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	.header-wrapper .main-col {
		margin: 0 /*0 1rem 0*/;
	}

	.header-padding {
		  padding-left: 1rem;;
		  padding-right: 1rem;;
	}

	.header-wrapper > div.main-col > section {
		border-bottom: solid 1px #ddd;
	}

	.header-wrapper > div.main-col > section:first-of-type {
		margin-top: 104px;
	}

/*
	.header-wrapper > div.main-col > section:last-of-type {
		border-bottom: none;
	}
*/




	.banner img {
		  position: relative;
		  display: none;
		  z-index: 2;
		  height: 6.5rem;
		  padding-top: 0.5rem;
		  padding-bottom: 0.5rem;
		  transition: .2s ease;
		  -webkit-transition: .2s ease;
	}

	.ico {
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  height: 100%;
	}
	
	.fas.fa-home {
		  font-size: 1.5rem;
		  color: #000;
		  padding: 0;
	}
	
	.fa-bell.notify-icon {
		  font-size: 1.5rem;
	}
	
	.tab {
		  width: 100%;
		  box-sizing: border-box;
		  white-space: nowrap;
		  background-color: #fff;
	}
	
	.tab.sub-nav {
		  overflow-x: auto;
	}
	
	.tab .nav-active,
	.tab a,
	.action a {
		  position: relative;
		  display: inline-block;
		  box-sizing: border-box;
		  padding: 1.5em 1em;
	}
	
	.tab .nav-active:after {
		  content: none;
	}
	
	.tab.sub-nav .nav-active::after {
		  position: absolute;
		  content: '';
		  bottom: 0;
		  left: 0;
		  right: 0;
		  height: 0.5em;
		  background-color: #ccc;
	}
	
	.tab.sub-nav a.nav-active,
	.action a.nav-active {
		  color: #000;
		  font-weight: bold;
	}
	
	.sub-menu a.nav-active {
		  color: #327df6;
		  font-weight: normal;
	}
	
	.sub-menu a:hover.nav-active {
		  color: #0d66f4;
	}
	
	.tab .sub-menu .nav-active::after {
		  content: none;
	}
	
	.tab .sub-menu .nav-active {
		  display: inline;
		  margin-left: 0;
		  padding: .65rem  1rem;;
	}
		  
	.notification > a {
		  padding-bottom: 0;
		  margin-left: 0;
	}

	.location {
		position: fixed;
		z-index: 2;
		top: 0;
		width: 100%;
		padding-top: 2rem;
		padding-bottom: 2rem;
		background-color: #fff;
		border-bottom: 1px solid #ddd;

		transition: padding .2s ease;
		-webkit-transition: padding .2s ease;
	}

	.location .mobile {
		display: inline-block;
	}

	.all-btn-ico i,
	.location .mobile i {
		color: #327df6;
		font-size: 1.3rem;
	}

	.location .no-mobile {
		display: none;
	}


	.location a,
	.location i,
	.location b {
		  display: inline-block;
		  vertical-align: top;
		  height: 2.5rem;
		  line-height: 2.5rem;
	}
	
	.location b {
		  font-family: 'Barlow Condensed', 'Times New Roman', Times, serif;
		  font-size: 1.5rem;
		  color: #000;

		  margin-top: -2px;
	}

	.location b.mobile {
		position: absolute;
		margin-left: 4rem;
		margin-right: 4rem;
		left: 0;
		width: calc(100% - 8rem);
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.location .fa-chevron-right {
		  color: #000;
		  padding: 0 0.5rem 0 0.75rem;
	}
	
	.action {
		background-color: #fff;
		overflow-x: auto;
	}

	.action button, .action a.bstr-btn {
		display: inline-flex;
		margin: 1rem .6rem 1rem 0;
		padding: 0.375rem 0.75rem;
	}
	
	.action button i {
		padding: .1rem .3rem .1rem 0;;
	}
	
	.action button svg {
		height: 27px;
		margin-right: .3rem;
		bottom: 0;
	}
	
	.action .fas,
	.action .far {
		  color: #327df6;
		  font-size: 1.5rem;
	}
	
	li#control-close .fas,
	a#control-open .fas {
		  color: #327df6;
		  font-size: 1.3rem;
	}
	
	.action .fa-search {
		  font-size: 1.4rem;
	}
	
	.action a:hover .fas,
	.action a:hover .far,
	li#control-close:hover .fas,
	a#control-open:hover .fas {
		  color: #0d66f4;
	}

	.action .nav-active i,
	.action a.nav-active:hover i {
		color: #000;
	}
	
	.action a svg {
		margin-right: .5rem;
	}
	
	.action .nav-active::after {
		content: none;	
	}
	
	.no-actions-padding {
		padding:  1rem; 0 0 0;
	}
	
	 nav.open::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		background-color: rgba(0,0,0,0.45);
	}
		
	.nav-bar-container {
		 display: none;
		 position: fixed
	}

	nav.open .nav-bar-container {
		-webkit-overflow-scrolling: touch;
		position: fixed;
		display: grid;
		display: -ms-grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 15.5fr ;
		-ms-grid-template-columns: 1fr;
		-ms-grid-template-rows: 1fr 15.5fr; 
		right: 0;
		background-color: #fff;
		z-index: 500;
		align-items: start;
		top: 0;
		height: 100%;
		overflow: auto;
		width: 0;
		max-width: 350px;
		padding-left: 1.5rem;
		box-shadow: 0 0 15px #000;
		animation: slideleft 0.5s 0s ease forwards ;
	}
	
	@keyframes slideleft { /* animate mobile menu slide in */
	  to {
		 width: 90%;
		 position: fixed;
	  }
	}	
	
	.nav-bar-container ul {
		list-style-type: none; 
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.nav-bar {
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	li.notification[notify="false"] {
		display: none;
	}
	
	li.notification[notify="true"] ~ #control-close {
		  display: block;
		  margin-left: auto;
	}
	
	li.notification[notify="false"] ~ #control-close {
		position: absolute;
		right: 0;
	}
	
	#control-open {
		  display: block;
		  float: right;
		  position: relative;
	}
	
	.sub-menu li {
		padding: .3rem .45rem;
		margin-right: 1rem;
	}

	.sub-menu li:active {
		background-color: #eee;
	}


	li.nav-item.main > a {
		  padding-bottom: .35rem;
		  font-size: 1.35rem;
		  margin-left: 0;
	}
	
	.nav-item.main:first-of-type > a {
		  padding-top: 0;
	}
	
	.sub-menu a {
		  display: inline;
		  margin: 0;
		  padding: .65rem 1rem ;
	}

	
	#notification-container {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		-ms-grid-column: 1;
		-ms-grid-row: 1;
		-ms-grid-column-span: 2;
		-ms-grid-row-span: 2;
		display: flex;
		padding: 1rem 0 1rem .5rem;
		box-shadow: initial;
	}
	
	ul#notification-container[disabled=true] {
		/*display: none;*/
	}
	
	.sub-menu.notifications  {
		  max-height: 0;
		  overflow: hidden;
		  position: relative;
		  top: -.5rem;
		  background-color: rgba(250, 250, 250, .75);
		  transition: max-height 0.2s ease-out;
		  border-radius: 5px;
	}
	
	.sub-menu.notifications a {
		  padding-left: .5rem;
	}
	
	.notify-icon {
		  color:#327DF6;
		  font-size: 1.08rem;
	}
	
	.badge {
		  display: none;
		  padding: .25em .4em;
		  font-size: 75%;
		  font-weight: 700;
		  line-height: 1;
		  text-align: center;
		  white-space: nowrap;
		  vertical-align: baseline;
		  border-radius: .25rem;
		  background-color: red;
		  color: #fff;
	}
	
	.location[notify="true"] .badge,
	li.notification[notify="true"] .badge {
		  display: inline-block;
	}
	
	.notify-icon + .badge {
		  position: absolute;
		  top: 1rem;;
		  left: 1.5rem;
	}
	
	#control-open .badge {
		  position: absolute;
		  right: -.3rem;
		  top: 0;
	}
	
	.fas, .far {
		  color: #aaa;
		  padding: 0 .3rem 0 0;
	}
	
	.fas + .fas {
		  padding-left: .6rem;
	}            
	
	.far.fa-bell.notify-icon {
		  color: #327DF6;
	}

	/*
		Remove borders to last elements
	*/
	.header-wrapper > div.main-col > *:last-child,
	.header-wrapper > div.main-col > *:nth-last-child(2) {
		border-bottom: none;
	}


/*******************************************\
 #Footer
\*******************************************/
	 
	footer {
		  background-color: #fff;
		  color: #999;
		  text-align: center;
		  padding: 2rem 0 3rem;
	}
	
	footer > a,
	footer > span {
		  display: block;
		  padding: 0.33rem 0;
		  width: 10rem;
		  margin: 0 auto;
	}
	
	footer > a:nth-of-type(5) {
		  padding-bottom: 2rem;
	}



/*******************************************\
 #Typography
\*******************************************/
	 
	.v-small-txt {
		font-size: .75rem;
		color: #aaa;
	}	

/*******************************************\
 #Utilities
\*******************************************/
	 
	.pb-1 { 
		padding-bottom: 1rem;
	}
	
		 
	.pt-1 { 
		padding-top: 1rem;
	}
	
	/* Medium Size (Tablet)*/ 
	@media only screen and (min-width: 41rem) {

		.all-mobile-only {
			display: none;
		}
	
	/*******************************************\
	 #Header-Navigation
	\*******************************************/		

/*
	.header-wrapper .main-col section:last-child/*:not(section:only-child)*/{
		border-bottom: 0;
	}
*/
	
		.header-wrapper {
			width:  100%;
			background-color: #fff;
			font-size: 1rem;
		}

		.header-wrapper > div.main-col > section:first-of-type {
			margin-top: 0;
		}

		.banner {
			display: flex;
			align-items: flex-end;
			border-bottom: 1px solid #ddd;
			justify-content: space-between;
		}



		.scroll-shadow .header {
			box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06),0 3px 14px 0 rgba(0,0,0,0.12);
		}
		
		.scroll-down .banner img {
			height: 4.5rem;
		}
		 
		.scroll-shadow .banner,
		.scroll-down .banner {
			border-bottom: none;
		}	


		.scroll-shadow .location,
		.scroll-down .location {
			padding-top: 2rem;
			padding-bottom: 2rem;
			box-shadow: none;
		}

		.scroll-down .location b {
			font-size: 2.25rem;
			font-weight: bold;
		}
	
		.scroll-down .location .fa-chevron-right {
			font-size: 1rem;
		}
	
		.scroll-down .fas.fa-home {
			font-size: 1.5rem;
		}
		
		.tab.sub-nav {
			padding-top: 0;
		}
			
		body.open-nav {
			 overflow: unset;
		}

		.header-wrapper .main-col {
			 margin: 0 auto ;
		}

		#main-column.no-subnav-actions,
		#main-column.no-subnav {
/*
			padding-top: 1rem; 
*/
		}
		
		#control-open,
		#control-close {
			 display: none;
		}
	
		.banner img {
			display: block;
		}
	  
		.header {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			background-color: #fff;
			width: 100%;
		}

		.tab a:active {
			 background-color: #eee;
		}
		 
		a.nav-active {
			 color: #000;
			 font-weight: bold;
		}
 
		.nav-bar a.nav-active {
			 color: #000;
			 font-weight: bold;
		}
		
		nav.open::before {
			 content: none;
		}
				   
		nav.open .nav-bar-container,
		.nav-bar-container {
			position: relative;
			background-color: transparent;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			height: auto;;
			width: auto;
			padding-left:0;
			box-shadow: none;
			max-width: none;
			overflow: visible;
			animation: initial;
		}

		.banner > nav.tab {
			flex-basis: 524px;
		}

		.nav-bar {
			flex-direction: row;
		}

		.sub-menu {
			display: none;
		}

		li.nav-item.main > a {
			padding: 1.5em 1em;
			font-size: 1rem;;
		}

		.tab .nav-active::after,
		.action .nav-active::after {
			 position: absolute;
			 content: '';
			 bottom: 0;
			 left: 0;
			 right: 0;
			 height: 0.5em;
			 background-color: #ccc;
		}

		.nav-item.clicked .sub-menu::before {
			 content: '';
			 position: absolute;
			 left: 15%;
			 height: 0;
			 width: 0;
			 border: solid transparent;
			 pointer-events: none;
			 border-color: transparent;
			 border-bottom-color: #fff;
			 border-width: 9px;
			 top: -16.75px;
			 z-index: 5;
		}
		
		.nav-item.clicked .sub-menu::after {
			 content: '';
			 position: absolute;
			 left: 15%;
			 height: 0;
			 width: 0;
			 border: solid transparent;
			 pointer-events: none;
			 border-color: transparent;
			 border-bottom-color: #ccc;
			 border-width: 9px;
			 top: -17.5px;
			 z-index: 1;
		}
	  
		.nav-item.clicked .sub-menu.more::before {
			 content: '';
			 position: absolute;
			 left: 70%;
			 height: 0;
			 width: 0;
			 border: solid transparent;
			 pointer-events: none;
			 border-color: transparent;
			 border-bottom-color: #fff;
			 border-width: 9px;
			 top: -16.75px;
			 z-index: 5;
		}
		
		.nav-item.clicked .sub-menu.more::after {
			 content: '';
			 position: absolute;
			 left: 70%;
			 height: 0;
			 width: 0;
			 border: solid transparent;
			 pointer-events: none;
			 border-color: transparent;
			 border-bottom-color: #ccc;
			 border-width: 9px;
			 top: -17.5px;
			 z-index: 1;
		}
 
	  
		.nav-item.clicked .sub-menu.add::before {
			 content: '';
			 position: absolute;
			 left: 47%;
			 height: 0;
			 width: 0;
			 border: solid transparent;
			 pointer-events: none;
			 border-color: transparent;
			 border-bottom-color: #fff;
			 border-width: 9px;
			 top: -16.75px;
			 z-index: 5;
		}
		
		.nav-item.clicked .sub-menu.add::after {
			 content: '';
			 position: absolute;
			 left: 47%;
			 height: 0;
			 width: 0;
			 border: solid transparent;
			 pointer-events: none;
			 border-color: transparent;
			 border-bottom-color: #ccc;
			 border-width: 9px;
			 top: -17.5px;
			 z-index: 1;
		}
		
		.sub-menu.add {
			 right: -12px;
		}
		
		.sub-menu.more {
			 right: -10px;
		}
 
		.sub-menu li {
			margin: 0;
			padding: .75rem;
		}


		.location-buffer {
			display: block;
		}

		.location {
			position: relative;
			margin-top: 105px;
			z-index: 0;
		}

		.location .mobile {
			display: none;
		}

		.location .no-mobile {
			display: inline-block;
		}
		
		.location b {
			font-size: 2.25rem;
			margin-top: -5px;
		}
		
		.nav-item.main:first-of-type > a {
			 padding-top: 1.5rem;
		}

	
		#notification-container {
			 padding: 0;
		}
	
		.notification {
			 position: relative;
		}
		
		.notification > a {
			 padding-bottom: unset;
		}
		
		li.notification:active {
		 background-color: #eee;
		}
 
		.fa-bell.notify-icon{
			 font-size: 1.1rem;;
		}


		/*******************************************\
			#Notification-display
		\*******************************************/	
			 
			 	
			.sub-menu.notifications a {
				  padding-left: 1rem;
			}
		
			.nav-item.clicked div.sub-menu,
			li[notify="true"].notification.clicked .sub-menu {
				position: absolute;
				background-color: #fff;
				display: block;
				z-index: 100;
				opacity: 1;
				box-shadow: 2px 2px 12px 0px #999;
				top: 65px;
				padding: 1rem 0;
			}
	
			li[notify="true"].notification.clicked .sub-menu.notifications {
				 overflow: initial;
				 max-height: initial;
				 border-radius: unset;
				 right: .5rem;
			}
			
			li[notify="true"].notification.clicked .sub-menu.notifications::before {
				 content: '';
				 position: absolute;
				 right: 10%;
				 height: 0;
				 width: 0;
				 border: solid transparent;
				 pointer-events: none;
				 border-color: transparent;
				 border-bottom-color: #fff;
				 border-width: 9px;
				 top: -16.75px;
				 z-index: 5;
			}
			
			li[notify="true"].notification.clicked .sub-menu.notifications::after {
				 content: '';
				 position: absolute;
				 right: 10%;
				 height: 0;
				 width: 0;
				 border: solid transparent;
				 pointer-events: none;
				 border-color: transparent;
				 border-bottom-color: #ddd;
				 border-width: 9px;
				 top: -17.5px;
				 z-index: 1;
			}
			
				
			li.notification[notify="true"] ~ #control-close {
				  display: none;
			}
      

		.nav-bar-container ul.nav-bar {/* for IE 11 only to reset the extra top padding applied in the IE 10-11 media query which compensates for lack of grid postitioning full support */   
			padding-top: 0;
		}
		
		  	
	} 
	
	/* Large Size (Desktop / Laptop) */
	@media only screen and (min-width: 61rem) {

		.all-mobile-only {
			display: none;
		}
		
		.header-wrapper .main-col {
			padding-left:  1rem;
			padding-right:  1rem;
		}
	}


/* LIKE BUTTONS */
.bstr-btn.bstr-btn-outline-primary.like[liked] {
	color: #fff;
	background-color: #28a745;
	border-color: #28a745;
}


/* WAIT SCREEN
 * ===========	*/
.wait-screen {
	position: absolute;
}

.wait-screen[state=off] {
	display: none;
	z-index: -2;
	opacity: 0;
	background-color: transparent;
	background-image: none;
	cursor: default;
}

.wait-screen[state=on] {
	display: block;
	z-index: 999;
	opacity: 0.75;
	background-color: #000;
	background-image: url('../images/tp-loading-black-2.gif');
	background-position: center center;
	background-repeat: no-repeat;
	cursor: wait;
}


/* SELECT PLACEHOLDER
 * ==================	*/
select[placeholder][value=""] {
	color: #999;
}

select option {
	color: initial;
}

select[placeholder] option[disabled][value=""],
select[placeholder] option[disabled][placeholder] {
	color: transparent;
	height: 0;
	line-height: 0;
	font-size: 0;
	display: none;
}

		
/*******************************************\
	#Cyril's CSS 
\*******************************************/	
	
/*
	Target: all.css

	Padding Top Right Bottom Left
	Medium size: 1.5rem

*/
.all-pad-trbl {
	padding: 1.5rem;
}

.all-pad-rbl {
	padding: 0 1.5rem 1.5rem;
}

.all-pad-trl {
	padding: 1.5rem 1.5rem 0;
}

.all-pad-tb {
	padding: 1.5rem 0;
}

.all-pad-rl {
	padding-right: 1.5rem;
	padding-left: 1.5rem;
}

.all-pad-t {
	padding: 1.5rem 0 0;
}

.all-pad-b {
	padding: 0 0 1.5rem;
}


/*
	Target: all.css

	Padding Top Right Bottom Left
	Small size: 1rem

*/
.all-pad-sm-trbl {
	padding: 1rem;
}

.all-pad-sm-trl {
	padding: 0 1rem 1rem 1rem;
}

.all-pad-sm-rbl {
	padding: 0 1rem 1rem;
}

.all-pad-sm-tb {
	padding: 1rem 0;
}

.all-pad-sm-rl {
	padding: 0 1rem;
}

.all-pad-sm-t {
	padding: 1rem 0 0;
}

.all-pad-sm-b {
	padding: 0 0 1rem;
}


/*
	Target: all.css

	Padding Top Right Bottom Left
	X-Small size: 0.5rem

*/
.all-pad-xs-trbl {
	padding: 0.5rem;
}

.all-pad-xs-b {
	padding: 0 0 0.5rem;
}


/*
	Tips style masonry card
	style designed by CB - add the .masonry-card.all-tip selector line to do away with use of !important override use
	in original css
*/
.masonry-card.all-tip,
.all-tip {
	background-color: #555555 ;
	border-radius: 0.5rem;
	color: #fff;
}

.all-tip i {
	color: #fff;
	padding-right: 0.75rem;
}	

.masonry-card.all-tip div:last-of-type,
.all-tip div:last-of-type {
	font-size: 1rem;
}

.all-no-scroll {
	overflow: hidden;
}

/*****************************************************************************************************************\
 
 #connect-component
 
\*****************************************************************************************************************/

.connect-component {
	padding: .1rem 0 0 0;
}

/* .cnt-compoent--dark  when seen on a dark background like a square image representing a site object */
.connect-component.cnt-compt--dark { 
	padding: 0;
}

.connect-component__status {
	font-family: "Roboto", Arial, Helvetica;
	font-size: .75rem;
	font-weight: normal;
	color: #888;
}

.cnt-compt--dark .connect-component__status { 
	 color: #fff;
}

.cnt-compt--dark .connect-component__status a { 
	 color: #fff;
	 text-decoration: underline;
}

.cnt-compt--dark .connect-component__icon { 
	 color: #999;
}

.connect-component__icon { 
	 font-size: .7rem;
}

.connect-component__icon--friends {
	color: #000;	
}

.cnt-compt--dark .connect-component__icon--friends {
	color: #fff;	
}

.connect-component__icon--following {
	color: transparent;
	background-image: linear-gradient(75deg, #aaa 43%, #000 20%);
	background-clip: text;
	-webkit-background-clip: text;
}

.cnt-compt--dark .connect-component__icon--following {
	color: transparent;
	background-image: linear-gradient(75deg, #999 43% , #fff 20%);
}

/*******************************************\
 #Video additions
\*******************************************/

	/* Display a centered video button icon in a .square-card-image container (which has position: relative)
	*
	* e.g. <div class="square-card-image" style="background-image: url(../db/_memberFile.php?n=xxx);">
	* 			<div class="play-icon"><i class="fas fa-play-circle"></i></div>
	* 			<!-- possible other html -->
	* 	  </div>
	*/
	
	.play-icon {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}
	
	.play-icon .fas.fa-play-circle {
	  cursor: pointer;
	  font-size: 2.25rem;
	  color: #fff;
	  filter: drop-shadow(0 0 5px #111);
	}

	.video-converting,
	.media-deleted {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #444;
	}

	.video-converting::after {
		content: 'Converting';
		font-size: 1.15rem;
	}
	
	.video-converting::before {
		content: '\f013';
		font-size: 2rem;
		font-weight: 900;
		font-family: 'Font Awesome 5 Free';
		animation: anim-spin 3s infinite linear;
	}

	.video-converting.video-thumbnail::after {
		display: none;
	}

	.video-converting.video-thumbnail::before {
		font-size: 1rem;
	}

	@keyframes anim-spin { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} }

	.video-failed {
		background-color: #900;
	}

	.video-failed::after {
		content: 'Error';
		font-size: 1.15rem;
	}

	.video-failed::before {
		content: '\f071';
		animation: none;
	}
	
	.media-deleted::after {
		content: 'File Deleted';
		font-size: 1.15rem;
	}
	
	.media-deleted::before {
		content: '\f2ed';
		font-size: 2rem;
		font-weight: 900;
		font-family: 'Font Awesome 5 Free';
	}


/*******************************************\
 #Organisation Member Top Banner additions
\*******************************************/

	
	@media only screen and (max-width: 41rem) {

		.org-banner {
			display: none;
		}

		a.org-banner-mobile {
			display: block;
		}
	}

	@media only screen and (min-width: 41rem) {

		a.org-banner-mobile {
			display: none;
		}
	}

	.org-banner {
	display: block;
	z-index: 5000;
	font-size: 14px;
	position: relative;
	text-align: center;
	width: 100%;
	height: .5rem;
	border-width: 1px;
	border-style: dotted;
	border-color: #000;
	background-color: #3b7bbf; /* rgb(255, 165, 0, 0.51) */
	text-transform: uppercase;
	color: #000;
	}

	.scroll-down .org-banner {
	display: none;
	}

	.org-banner-mobile {
	/* top bar for hunt draw that goes across the very top of the page */
	position: absolute;
	top: 0rem;
	background-color: #1766bbd9; /* #3291f6b2 ; /* rgb(255, 165, 0, 0.51) */
	width: calc(100% + 4rem);
	text-align: center;
	border-bottom: 1px dotted #bbb;
	color: #000;
	height: .9rem;
	line-height: 1.9rem;
	font-size: .9rem;
	}

	a.org-banner-mobile:hover {
	color: #0d66f4;
	text-decoration: none;
	}

	.scroll-down a.org-banner-mobile {
	display: none;
	}

	.org-banner .top-sm {
	position: relative;
	top: -6px;
	font-size: .8em;
	color: white;
	letter-spacing: 8px;
	font-weight: bold;
	background-color: #3b7bbf;
	padding: 0 .1rem .2rem .5rem;
	border-radius: .5rem;
	}


	.org-banner .entries-count {

	height: 1rem;
	padding-left: 30px;
	}