/*=== category test =========================================================*/
	.catcontainer {
		display: grid;
		grid-template-columns: repeat(auto-fill,minmax(300px,1fr));

		gap: 1rem;
		padding: 1rem;
	}
	@media screen and (min-width: 768px) {
		.catcontainer {
			gap: 2rem;
			padding: 2rem;
		}
	}

	.catwrapper {

	}


	.catwrapper-25 {
		width: 25%;

	}
	.catwrapper-33 {
		width: 33%;

	}

	.catwrapper-200{
		width: 100%;
	}
	@media screen and (min-width: 800px) {
		.catwrapper-200{
			width: 200px;
		}
	}

	.no-border-bottom{
		border-bottom: 0px !important;
	}
	.auto-cursor{
		cursor: auto !important;
	}

	.cat {
		/*margin-right: 1rem;
		padding-right: 1rem;*/
		cursor: pointer;

	}



	/*=== grid =========================================================*/
	.cucolumn, .cucol {
		flex-basis: 100%;
		padding: 0rem
		0rem;
	}

	@media screen and (min-width: 800px) {
		.cucolumn, .cucol {
			flex: 1;
		}

		._cu25 {
			flex: 2.5;
		}

		._cu75 {
			flex: 7.5;
		}

		._cu1 {
			flex: 0.83;
		}

		._cu2 {
			flex: 1.66;
		}

		._cu3 {
			flex: 2.49;
		}

		._cu4 {
			flex: 3.32;
		}

		._cu5 {
			flex: 4.15;
		}

		._cu6 {
			flex: 4.98;
		}

		._cu7 {
			flex: 5.81;
		}

		._cu8 {
			flex: 6.64;
		}

		._cu9 {
			flex: 7.47;
		}

		._cu10 {
			flex: 8.30;
		}

		._cu11 {
			flex: 9.13;
		}

		._cu12 {
			flex: 9.96;
		}
		/*few small fixes for non mobile views*/
		.horzform .curow .cucolumn:first-child, .horzform .curow .cucol:first-child {
			text-align: right ;
		}
	}

	.curow {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}


		@media screen and (min-width: 800px) {
			#pagecontent .sidebarcol {
				margin-left: 0.5rem;
				order: 0;
			}
		}

	.container {
		max-width: unsetpx;
		margin: 0 auto;
		/*background-color: red;*/

	}

		/* sidebar at bottom */
		.container>.sidebarcol{
			border-radius: 0rem;
			background-color: rgba(245, 245, 245, 0);
			box-shadow: unset;
			padding-top: 1em;
		}
		.container>.sidebarcol .box{
			width: 100%;
		}
		.grid-sizer{
			width: 100%;
		}
		.container>.sidebarcol .box .boxheader, .container>.sidebarcol .box .boxcontent{
			margin: 0 0.5rem;

		}
		.container>.sidebarcol .box .boxcontent{
			margin-bottom: 0.5rem;
		}

		@media screen and (min-width: 800px) {
			.grid-sizer{
				width: 33.3%;
			}
			.gutter-sizer{
				width: 1%;
			}
			.container>.sidebarcol .box{
				width: 33.3%;
				/*max-height: 750px;*/
				overflow-y: auto;
			}
		}

	/*=== table =========================================================*/
	table {
		width: 100%;
		border-collapse: collapse;
		border-collapse: collapse;
		margin-bottom: 1em;
	}

	table th, .fake-th {
		text-align: left;
		background-color: rgb(107, 0, 95);
		color: white;
		font-weight: bold;
		box-shadow: unset;
		padding: 0.25rem;
	}

	.fake-th{
		margin-bottom: 0.5em;
		padding-left: 0.5rem;
	}

		table th a, .fake-th a, table th a:hover, .fake-th a:hover {
			color: white;
		}

	 td {
		padding: 0.125rem;
		border-bottom: 1px solid whitesmoke;
	}
	th:first-child{
		padding-left: 0.5rem;
	}

	td {
		vertical-align: top;
	}

		.table-striped tr:nth-child(odd) {
			background-color: white;
		}

	.table-striped tr:nth-child(even) {
		background-color: whitesmoke;
	}


		table tr th:first-child, .fake-th {
			border-top-left-radius: 0rem;
			border-bottom-left-radius: 0rem;
		}

		table tr th:last-child, .fake-th {
			border-top-right-radius: 0rem;
			border-bottom-right-radius: 0rem;
		}

	/*=== header tags =========================================================*/
	h2 a:active, h2 a:hover {
		/*color: #1a0dab;*/
		text-decoration: underline;
	}

	h3 a:active, h3 a:hover {
		/*color: #1a0dab;*/
		text-decoration: underline;
	}

	h1, h2, h3, h4{
		line-height: 1.1;
	}

	h1 {
		margin: 0.5rem 0 0.5rem 0;

	}

	h2 {
		margin: 0.5rem 0 0.5rem 0;
	}

	h3 {
		margin: 0.5rem 0 0 0;
	}

	h2 a, h3 a {
		text-decoration: none;
	}

	/*=== common  =========================================================*/
	html, body {
		font-family: "Arial", sans-serif;
		font-size: 15px;
		line-height: 1.6;
		padding: 0;
		margin: 0;
		height: 100%;
		color: #242729; /* #545454;*/
		background-color: rgb(218, 224, 230);
	}

	a {
		color: rgb(0, 0, 0);
		text-decoration: none;
	}
	a:hover{
		color: rgb(107, 0, 95);
		text-decoration: underline;
	}



	ul {
		padding-top: 0;
		margin-top: 0;
	}

	/*=== header and footer =========================================================*/
	.header {
		/*margin-bottom: 0.5rem;*/
	}

	.logocol img {
		margin-left: 10px;
		vertical-align: middle;
	}


	#header {
		background-color: rgb(107, 0, 95);
		padding: 1rem;
		border: 0px solid lightgrey;
		border-width: 0px 0px 0px 0px;
	}


		#header h1 a{
			color: rgb(255, 255, 255);
			text-decoration: none;
			padding-left: 0.5rem;
			text-transform: uppercase;
			letter-spacing: 0.25rem;
			text-shadow: 0px 0px 1px rgb(255, 255, 255),
			0px 0px 1px rgb(255, 255, 255);
		}

		#header h1 img{
			width: 64px;
			height: 64px;
			object-fit: cover;
			border-radius: 50%;
			vertical-align: middle;
		}

		#header #top-login{
			margin-right: 0.25rem;
		}

		#header #top-login, #header #top-login a {
			color: rgb(255, 255, 255);

		}

		#header #top-utils{
			text-align: right;
		}

		#header #top-utils #top-login {
			font-size: 0.85rem;
		}

		#header #top-utils #top-search #query{
			width: 10rem;
			padding-bottom: 0.1rem;
			padding-top: 0.1rem;
		}

		.top-util{
			margin-right: 1rem;
			display: inline-block;
		}

		#header #top-login .avatar-container{
			position: relative;
			display: inline-block;
		}
		#header #top-login .avatar-container .avatar{
			width: 32px;
			vertical-align: middle;
			border-radius: 50%;
			overflow: hidden;
			margin: 0 auto;
		}

		#header #top-login .avatar-container .avatar-badge {
			font-size: 9px;
			font-family: Verdana;
			position: absolute;
			bottom: -8px;
			right: -8px;
			color: white;
			padding: 4px;
			background-color: rgba(255, 0, 0, 0.75);
			border-radius: 25%;
			text-align: center;
			line-height: 1;
		}

		#header .box .boxheader, #header .hw h2{
			display: none;
		}
		#header .box .boxcontent{
			padding: 0;
			background-color: unset;
		}
		#header .box, #header .hw{
			width: unset;

		}
		#header .box .img-grid .img-grid-cell, #header .hw .img-grid .img-grid-cell {
			width: 50px;
			height: 50px;
			margin: 5px;
		}
		#header .box .img-grid-cell-footer .img-grid-cell-title, #header .hw .img-grid-cell-footer .img-grid-cell-title{
			font-family: Verdana;
			font-size: 9px;
		}


		.topbarcol{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		#footer {
		padding:  2em 2em;
		text-align: center;
		/*background-color: black;
		color: white;*/
	}

	/*=== misc =========================================================*/
	#pagecontent {
		/*background-color: blue;*/

	}

	#pagecontent .articlecol {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		padding-bottom: 1rem;
		min-width: 50%;
	}

	#pagecontent .sidebarcol {
		padding-top: 0.5rem;
	}


	.pull-right{
		text-align: right;
	}

	.img-responsive {
		max-width: 100%;
		height: auto;
	}

	.actionbar {
		background-color: rgba(245, 245, 245, 0);
		padding: 0.25rem 0.25rem;
	}

		#comment-table-source td:first-child{
			text-align: right;
		}

		.avatar-container{
			position: relative;
			display: inline-block;
			max-width: 50px;
			margin-right: 5px;
			margin-top: 5px;
			line-height: 0px;
		}
		.avatar-container img{
			max-width: 50px;
		}


		.avatar-container>.avatar-overlay{
			font-size: 9px;
			font-family: Verdana;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 50px;
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			padding: 1px 0;
			text-align: center;
			box-sizing: border-box;
			line-height: 1;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		 .avatar-container>.points-overlay{
			font-size: 9px;
			font-family: Verdana;
			position: absolute;
			top: -8px;
			right: -8px;
			background: red;
			color: white;

			border-radius: 25%;
			padding: 2px;
			 line-height: 1;
		}

		.avatar-container-lg{
			max-width: 75px;
		}
		.avatar-container-lg img{
			max-width: 75px;
		}
		.avatar-container-lg>.avatar-overlay{
			width: 75px;
		}


		


		.fl-win .featherlight-content{
			width: 90%;
			height: 90%;
		}

		.fl-win .featherlight-content .featherlight-inner {
			margin: 0 auto;
			width: 100%;
			height: 100%;
		}
		@media screen and (min-width: 768px) {
			.fl-win .featherlight-content{
				width: 60%;
				height: 60%;
			}
		}

		@keyframes textChange {
			0% { opacity: 1; transform: scale(3); }
			50% { opacity: 0; transform: scale(0);}
			100% { opacity: 1; transform: scale(1);}
		}

		.text-change-animation {
			animation-name: textChange;
			animation-duration: 0.5s;
			animation-timing-function: ease-in-out;
			animation-iteration-count: 1;
		}

		.text-change-animation:hover {
			animation-fill-mode: none;
		}

		@keyframes pointChange {
			0% { opacity: 1; transform: scale(3);}
			50% { opacity: 0; transform: scale(0);}
			100% { opacity: 1; transform: scale(1);}
		}

		.point-change-animation {
			animation-name: pointChange;
			animation-duration: 0.5s;
			animation-timing-function: ease-in-out;
			animation-iteration-count: 1;
		}


	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}

	.yes, .no {
		padding: 0 0.25rem;
		color: white;
		font-weight: bold;
	}

	.yes {
		background-color: green;
	}

	.no {
		background-color: red;
	}

	.quiet {
		color: rgb(128, 128, 128);
	}
	.quiet a{
		color: rgb(128, 128, 128);
	}
	.quiet-links a{
		color: rgb(128, 128, 128) !important;
	}

	.req {
		font-weight: bold;
		color: red;
	}



	.responsive {
		width: 100%;
		height: auto;
	}



	blockquote {
		background: #f9f9f9;
		border-left: 10px solid #ccc;
		margin: 1.5em 10px;
		padding: 0.5em 10px;
		/*quotes: "\201C""\201D""\2018""\2019";*/
		word-wrap: break-word;
	}

	/*blockquote:before {
		color: #ccc;
		content: open-quote;
		font-size: 4em;
		line-height: 0.1em;
		margin-right: 0.25em;
		vertical-align: -0.4em;
	}*/
	blockquote p {
		display: inline;
	}

	.featuredimage {
		max-height: 10rem;
		overflow: hidden;
		min-height: 10rem;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		margin-bottom: 1em;
		/*border-radius: 1rem;*/
	}
	.featuredimage.empty {

		background: rgb(0,0,0);
		background: linear-gradient(rgba(255,255,255,1), rgba(245, 245, 245, 0));
		text-align: center;
		color: darkgray;
		font-size: 125%;

	}
	.featuredimage.empty span {
		position: relative;
		top: 4rem;
	}


	.postedby-cell{
		padding-right: 0.5rem;

	}
	.postedcontent-cell{
		min-width: 50%;
	}
	#replies{
		margin-bottom: 1em;
	}

	.uni-symbol{

	}
	pre {
		white-space: pre-wrap;
		word-wrap: break-word;
		text-align: justify;
	}

	.youtube-video{
		margin-top: 0.5rem;

	}
	.youtube-video iframe{
		border: 1px solid whitesmoke;
	}

	#simple-body #simple-content{
		padding:1rem;
	}

	.raquo{
		font-size: 100%;
		font-weight: normal;
		padding-left: 5px;
		padding-right: 5px;
		background-color: whitesmoke;
	}


	/*=== sidebar =========================================================*/
	
	



	.box {
		border-right: 0px solid rgba(211, 211, 211, 0);
		border-bottom: 0px solid rgba(211, 211, 211, 0);
		margin-bottom: 0.5rem;
		width: 100%;
	}

	.boxheader {
		padding: 1rem 1rem;
		background-color: rgb(107, 0, 95);
		color: rgb(255, 255, 255);
		text-align: left;
		font-weight: bold;
	}

	.boxcontent {
		padding: 1rem 1rem;
		background-color: rgb(255, 255, 255);
		color: black;
	}

	.boxcontent ul {
		margin-left: 0.5rem;
		padding-left: 0.5rem;
		list-style-type: circle;
	}
	.boxcontent p:first-child{
		padding-top: 0px;
		margin-top: 0px;
	}
	.boxcontent ul > li > ul {
		margin-left: 0.5rem;
		padding-left: 0.5rem;
	}

	/*=== breadcrumbs =========================================================*/
	ul.breadcrumb {
		padding: 0.25rem;
		padding-left: 0.5rem;
		margin: 0 0 0rem 0;
		list-style: none;

	}

	#breadcrumbrow{
		/*border-bottom: 1px solid lightgrey;*/
		border-radius: 0rem;
		background-color: rgba(245, 245, 245, 0);
		box-shadow: unset;
		margin: 1rem 0;
		padding: 0.25rem;

	}

	ul.breadcrumb li {
		display: inline;
	}

	ul.breadcrumb li + li:before {
		padding: 8px;
		color: ;
		content: "/\00a0";
	}

	ul.breadcrumb a, .bookmark a {
		color: #000000;
		text-decoration: underline;
	}

	ul.breadcrumb li:last-child , ul.breadcrumb li:last-child a {
		text-decoration: none;
		color: dimgray;
	}
	ul.breadcrumb .show-underline{
		color: #000000 !important;
	}
	ul.breadcrumb .show-underline a{
		text-decoration: underline !important;
		color: #000000 !important;
	}
	ul.breadcrumb .select-links{
		background-color: white;
	}


	.cucolumn.breadcrumb {

	}

	.cucolumn.bookmark {
		text-align: right;
		font-size: 1rem;

		padding-right: 0.5rem;

	}

	.cucolumn.bookmark a {

	}

	/*=== forum =========================================================*/
	.totalreplies, .totaltopics, .totalviews {
		text-align: center;
	}

	.subforumrow {
		box-shadow: unset;
		margin-top: 0.5rem;
		background-color: rgba(245, 245, 245, 0);
		padding: 0.25rem 0;
	}

	.replyrow {
		font-size: 0.75rem;
	}

	/*=== pagination =========================================================*/
	.pagination {
		display: inline-block;
	}

	.pagination a {
		color: black;
		float: left;
		padding: 1rem 1.5rem;
		text-decoration: none;
		border: 1px solid #ddd;
		border-right-width: 0px;
		border-radius: 0.25rem;
	}

	.pagination a:last-child {
		border-right-width: 1px;
	}

	.pagination a.active {
		background-color: rgb(107, 0, 95);
		color: white;
	}

	.pagination a:hover:not(.active) {
		background-color: rgb(128, 128, 128);
	}

	.pagination a.active {
		border-radius: 0.25rem;
	}

	/*=== form =========================================================*/
	.form-static {
		font-weight: bold;
	}


	.button {
		padding: 1rem 3rem;
		background: rgb(14, 24, 37);
		color: #FFF;
		border-radius: 2px;
		border: solid 1px rgb(9, 24, 42);
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
		transition-duration: 0.2s;
		user-select: none;
		text-decoration: none;
		font-size: 1rem;
		cursor: pointer;
	}

	.button:hover {
		background: rgb(14, 24, 37);
		color: #FFF;
		text-decoration: none;
	}

	.secondary {
		background: whitesmoke;
		color: black;
		text-shadow: none;
	}

	.button-small {
		/*padding: 2px 5px;*/
		padding: 0.5rem 0.5rem;
	}

	.button-small .uni-symbol{
		font-size: 1.25rem;
	}
	.button-small .uni-symbol.red{
		color: red !important;
	}

	.red-label, .red-label:hover{
		color: red !important;
		font-weight: bold;
	}
	.green-label, .green-label:hover{
		color: limegreen !important;
		font-weight: bold;
	}
	.black-label, .black-label:hover{
		color: black !important;
	}

	.secondary:hover {
		background: lightgrey;
		color: black
	}

	select {
		padding: 0.25rem 0.25rem;
		border: none;
		border-radius: 4px;
		background-color: whitesmoke;
	}

	input[type=text], textarea {
		width: 100%;
		padding: 0.5rem 0.5rem;
		margin: 0px 0;
		box-sizing: border-box;
	}

	.form-field-separator{
		margin-top: 0.5em;
	}

	.horzform select {
		padding: 0.5rem 0.5rem;
		width: 100%;
		background-color: whitesmoke;

		border-radius: 0px;
	}


	.horzform .static {
		font-weight: bold;
		padding: 0rem 0.5rem 0.5rem 0.5rem;
	}
	.horzform .static .actions{
		font-weight: normal;
	}

	.horzform .curow:first-child {
		margin-top: 0.5rem;
	}


	.horzform .curow .cucolumn:first-child, .horzform .curow .cucol:first-child {
		padding-right: 0.25rem;
	}

	.horzform .curow {
		margin-bottom: 0.25rem;
	}

	.form-control {
		width: 100%;
	}

	.callout {
		border: 1px solid darkgray;
		padding: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.callout .uni-symbol{
		float: left;
		padding-right: 0.5rem;
		padding-bottom: 0.5rem;
		font-size: 2rem;
	}

	.note {
		background-color: #f7f7f9;
	}

	.success {
		background-color: #e1faea;
	}

	.warning {
		background-color:  #fff3d9;
	}

	.warningtext {
		color:  #000000;
	}

	.callout a, .callout a:hover {
		color: #242729;
		text-decoration: underline;
	}


	/*=== detailsbar =========================================================*/

	.detailsbar {
		/*border-bottom: 1px solid lightgrey;*/
		box-shadow: unset;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		background-color: rgba(245, 245, 245, 0);
		border-radius: 0rem;
		padding: 0.25rem;
		color: ;

	}

	.detailsbar .key:first-child{
		padding-left: 0.5rem;
	}
	.detailsbar a{
		color: #000000;
		text-decoration: underline;
	}
	.detailsbar .button{
		text-decoration: none ;
		color: #FFF;
		display: inline-block;
	}
	.detailsbar .secondary{
		color: black;
	}

	.detailsbar .key {
		font-size: 1rem;
		color: darkgray;
		display: none;
		vertical-align: middle;
	}

	.detailsbar .key:after {
		content: ": ";
	}
	.detailsbar .cucolumn{
		text-align: center;

	}
	.detailsbar .avatar{
		height: 32px;
		vertical-align: middle;
	}
	.detailsbar .value{
	}


	.detailstable th:nth-child(1) {
		text-align: right;
		padding-right: 1rem;
	}

	.detailstable td:nth-child(1) {
		text-align: right;
		font-weight: bold;
		padding-right: 1rem;
		width: 33%;
	}

	.detailstable td:nth-child(2) {
		width: 66%;
	}

	/*=== knowledgebase =========================================================*/
	.kbcategory {
		/*margin-right: 1rem;
		padding-right: 1rem;*/
		border-right: 1px solid rgba(245, 245, 245, 0);
		border-bottom: 1px solid rgba(245, 245, 245, 0);
		width: 33%;
	}

	.kbcategory:last-child {

	}

	/*=== avatar image =========================================================*/
	.avatar {

	}
	@media screen and (max-width: 800px) {
		.avatar {
			width: 50px;
			height: auto;
		}
	}




	/*=== badge =========================================================*/
	.badge, .label {
		font-size:0.75rem;
		padding: 0.25rem;
		border-radius: 0.25rem;
		/*color: white;*/
		font-weight: bold;
		display: inline;
	}

	.badge{

	}

	.badge img {
		width: 16px;
		height: 16px;
		padding-right: 0.10rem;
	}

	.label{
		background-color: grey;
	}

	th a {
		font-weight: normal;
	}

	/*=== points =========================================================*/
	.points-section{
		/*visible*/
	}

	/*=== book =========================================================*/
	.booknavrow {
		border-bottom: 1px solid lightgrey;
		padding: 0.25rem;
		background-color: lightcyan;
		margin-bottom: 0.25rem;
		margin-top: 0.5rem;
	}

	.booknavrow .cucolumn:nth-child(1) {
		text-align: left;
	}

	.booknavrow .cucolumn:nth-child(2) {
		text-align: left;
	}

	.booknavrow .cucolumn:nth-child(3) {
		text-align: right;
	}

	.bookbox .boxheader {
		background-color: lightcyan;
	}

	ol.tighttoc .active > a, ol.toc .active > a {
		font-weight: bold;
	}

	ol.toc {
		list-style-type: none;
		counter-reset: item;
		margin: 0;
		padding: 0;
	}

	ol.toc > li.toc {
		display: table;
		counter-increment: item;
		margin-bottom: 0.6em;
	}

	ol.toc > li.toc:before {
		content: counters(item, ".") ". ";
		display: table-cell;
		padding-right: 0.6em;
	}

	ol.tighttoc > li.tighttoc:before {
		padding-right: 0.3em;
		font-size: 0.75rem;
	}

	li.tighttoc {
	}

	li.toc ol.toc > li.toc {
		margin: 0;
	}

	li.toc ol.toc > li.toc:before {
		content: counters(item, ".") " ";
	}

	/*=== homewidgets =========================================================*/
	#homewidgets .cucolumn {
		padding-left: 1rem;
	}

	#homewidgets .cucolumn:first-child {
		padding-left: 0;
	}

	#homewidgets h2 {
		margin-bottom: 0.5rem;
	}

	#homewidgets .hw{
		margin: 0 0 2em 0
	}
	#homewidgets .hw .principal-tip, .box .boxheader .principal-tip{
		font-size: 15px !important;
	}


	/*=== widgets =========================================================*/
	#hw-students table td:first-child, #widget_students table td:first-child {
		text-align: center;
		width: 60px;
	}

	#hw-students img, #widget_students img {
		max-height: 50px;
	}

	.avatar-grid .img-grid-cell{
		width: 50px !important;
		height: 50px !important;
	}

	 .boxcontent .selected a {
		font-weight: bold;
	}

	#widget-products .product-box, #widget-featuredproducts .product-box{
		width: 200px;
	}

	#widget-menu{
		overflow-y: auto;
	}

	.kbsitemap-cat{
		list-style-type: square;
		font-weight: bold;
	}
	.kbsitemap-article{
		margin-left: 0.5rem;
	}

	/*=== timeline =========================================================*/
	#timeline .icon {
		width: 24px;
		height: 24px;
		display: inline-block;
		/*-webkit-filter: invert(100%);*/
		float: left;
		margin-right: 10px;
	}

	#timeline h2{
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	#timeline p{
		margin-top: 0px;
		margin-bottom: 0px;
	}
	#timeline .date{
		font-size: 75%;
		text-align: right;
		color: grey;
	}

	#timeline .topic .icon {
		background: url("//static.imgbash.com/_resources/topic-96.png");
		background-size: 24px 24px;
		background-repeat: no-repeat;
	}

	#timeline .reply  .icon {
		background: url("//static.imgbash.com/_resources/reply-96.png");
		background-size: 24px 24px;
		background-repeat: no-repeat;
	}

	#timeline .post .icon {
		background: url("//static.imgbash.com/_resources/post-96.png");
		background-size: 24px 24px;
		background-repeat: no-repeat;
	}

	#timeline .comment  .icon {
		background: url("//static.imgbash.com/_resources/comments-96.png");
		background-size: 24px 24px;
		background-repeat: no-repeat;
	}

	#timeline .page  .icon {
		background: url("//static.imgbash.com/_resources/page-96.png");
		background-size: 24px 24px;
		background-repeat: no-repeat;
	}

	#timeline .article  .icon {
		background: url("//static.imgbash.com/_resources/article-96.png");
		background-size: 24px 24px;
		background-repeat: no-repeat;
	}

	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	.clearfix {
		display: inline-block;
	}

	.clearfix {
		display: block;
	}

	/*=== simple horz list =========================================================*/
	.simplehorzlist {
		text-align: center;
		padding-bottom: 0.2rem;
		margin-bottom: 0.2rem;
	}

	.simplehorzlist li {
		display: inline-block;
		padding-right: 1rem;
	}

	.simplehorzlist li:before {
		content: '\00a0\2022\00a0';
	}

	/*=== reputation levels =========================================================*/
	.bronze {
		background-color: #A78F6D;
		color: white;
	}

	.silver {
		background-color: #D0D0D0;
		color: white;
	}

	.gold {
		background-color: #E7AE3B;
		color: white;
	}

	.platinum {
		background-color: #3D3737;
		color: white;
	}

	.diamond {
		background-color: #166995;
		color: white;
	}

	.bronzetext {
		color: #A78F6D;
	}

	.silvertext {
		color: #D0D0D0;
	}

	.goldtext {
		color: #E7AE3B;
	}

	.platinumtext {
		color: #3D3737;
	}

	.diamondtext {
		color: #166995;
	}

	.award-container{
		text-align: center;
		margin-top: 0.5rem;
		margin-right: 0.5rem;
		border: 1px solid lightgrey;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		background-color: lightyellow;
		max-width: 250px;
	}
	.award-container img{
		border-radius: 50%;
		padding: 0.75rem;
	}
	.award-container a{
		text-decoration: none;
		font-size: 0.9rem;
	}
	.award-container a:hover{
		text-decoration: underline;
	}
	.award-container .label{
		color: white;
	}

	/*=== home widgets =========================================================*/
	.hw-post p{
		margin-top: 0px;
	}
	.hw-timeline b a{
		text-decoration: none;
	}
	.hw-timeline .icon{
		width: 16px !important;
		height: 16px !important;;
		background-size: 16px 16px  !important;;
	}

	/*=== menu =========================================================*/

	.menu,
	.sub-menu {
		margin: 0;
		padding: 0;
	}

	.nav, #header{
		box-shadow: 0 1px 0px rgba(12,13,14,0.1), 0 1px 6px rgba(59,64,69,0.1);
	}

	.menu-item,
	.sub-menu,
	.dropdown-icon {
		border: 0 solid;
	}

	.menu .menu-item {
		display: block;
	}

	.menu .menu-item.has-children, .menu .menu-item.has-children .menu-item {
		position: relative;
	}

	.menu .menu-item:not(:last-child) {
		border-width: 0 0 1px;
	}

	.menu .menu-item a {
		padding: 0.25rem 1rem 0.25rem 1rem;
		display: flex;
		justify-content: space-between;
		color: rgb(255, 255, 255);
	}

	.menu .sub-menu {
		border-width: 1px 0 0;
		visibility: hidden;
		opacity: 0;
		height: 0;
		width: 0;
		transition: visibility .25s, opacity .25s ease-in-out;
	}

	.menu .sub-menu .menu-item {
		visibility: hidden;
	}

	.menu .menu-item:hover > .sub-menu, .menu .menu-item:active > .sub-menu, .menu .menu-item:focus > .sub-menu {
		opacity: 1;
		height: auto;
		width: auto;
	}

	.menu .menu-item:hover > .sub-menu,
	.menu .menu-item:hover > .sub-menu .menu-item, .menu .menu-item:active > .sub-menu,
	.menu .menu-item:active > .sub-menu .menu-item, .menu .menu-item:focus > .sub-menu,
	.menu .menu-item:focus > .sub-menu .menu-item {
		visibility: visible;
	}

	.menu .menu-item > a:hover .dropdown-icon:after, .menu .menu-item > a:active .dropdown-icon:after, .menu .menu-item > a:focus .dropdown-icon:after {
		/*transform: rotate(45deg);*/
	}

	.menu .dropdown-icon {
		padding: 1em 1.25em;
		margin: -1em -1em -1em .25em;
		border-width: 0 0 0 1px;
	}

	.menu .dropdown-icon:after {
		content: "\25be";
		display: block;
		/*transition: transform .25s ease-in-out;*/

	}

	.nav--rtl {
		direction: rtl;
		unicode-bidi: bidi-override;
	}

	.nav--rtl .menu .dropdown-icon {
		margin: -1em .5em -1em -1em;
		border-width: 0 1px 0 0;
	}

	/*@media only screen and (min-width: 800px) {*/
	.nav .menu {
		display: flex;
		flex-flow: row wrap;
	}

	.nav .menu > .menu-item {
		border-width: 0 0px 0 0;
	}

	.nav .menu > .menu-item > a .dropdown-icon {
		padding-left: 0;
	}

	.nav .menu .menu-item:hover > .sub-menu, .nav .menu .menu-item:active > .sub-menu, .nav .menu .menu-item:focus > .sub-menu {
		width: 225px;
	}

	.nav .menu .sub-menu {
		position: absolute;
		z-index: 3000;
		top: 100%;
		left: 0;
		border-width: 0;
	}

	.nav .menu .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}

	.nav .menu .dropdown-icon {
		border-width: 0;
		padding: 1em;
	}

	.nav--rtl .menu > .menu-item > a .dropdown-icon {
		padding-left: 1em;
		padding-right: 0;
	}

	.nav--rtl .menu .sub-menu {
		top: 100%;
		left: auto;
		right: 0;
	}

	.nav--rtl .menu .sub-menu .sub-menu {
		left: auto;
		right: 100%;
	}

	.nav--cen .menu {
		justify-content: center;
	}
	/*}*/

	.nav {
		background-color: rgb(0, 20, 43);
		/*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);*/
		border: 0px solid lightgrey;
		border-width: 0px 0px 0px 0px;
		border-bottom-left-radius: 0rem;
		border-bottom-right-radius: 0rem;
	}

	.nav .menu > .menu-item,
	.nav .menu > .menu-item .dropdown-icon {
		border-color: darkgray;
	}

	.nav .menu > .menu-item, .nav .menu > .menu-item > a {
		color: rgb(255, 255, 255);
	}

	.nav .menu > .menu-item > a:hover, .nav .menu > .menu-item > a:active, .nav .menu > .menu-item > a:focus {
		background-color: rgb(64, 79, 96);
		color: #ffffff;

	}

	.nav .menu > .menu-item:first-of-type > a:hover, .nav .menu > .menu-item:first-of-type > a:active, .nav .menu > .menu-item:first-of-type > a:focus {
		border-bottom-left-radius: 0rem;
	}

	.nav .sub-menu {
		background-color: rgb(0, 20, 43);
	}

	.nav .sub-menu,
	.nav .sub-menu .dropdown-icon,
	.nav .sub-menu .menu-item,
	.nav .sub-menu .menu-item .dropdown-icon {
		border-color: rgba(0, 0, 0, 0.1);
	}

	.nav .sub-menu .menu-item,
	.nav .sub-menu .menu-item a {
		color: rgb(255, 255, 255);
	}

	.nav .sub-menu .menu-item a:hover, .nav .sub-menu .menu-item a:active, .nav .sub-menu .menu-item a:focus {
		background-color: rgb(64, 79, 96);
		color: #ffffff;
	}

	.nav a {
		text-decoration: none;
	}

	.nav > .menu > .menu-item > .sub-menu > .selected,
	.nav > .menu > .selected{
		background-color: rgb(64, 79, 96);

	}

	.nav > .menu > .selected:first-of-type{
		border-bottom-left-radius: 0rem;
	}

	.nav > .menu > .menu-item > .sub-menu > .selected > a,
	.nav > .menu > .selected > a{
		color: #ffffff !important;
	}

	/* -------------------------------- shop ---------------------------------------------- */
	.product-image {
		background-size: contain;
		background-repeat: no-repeat;

		height: 150px;
		background-position: center;
		cursor: pointer;
	}

	.product-box {
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.product-price{
		text-align: right;
	}
	.product-title{
		font-weight: bold;
		white-space:nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.product-thumbs{
		margin-top: 0.5em;
	}
	.product-thumb-box{
		width: 160px;
		text-align: center;
		vertical-align: middle;
		display: inline-block;
	}
	.product-info-box{
		float:right;
	}
	.product-info-box .price{
		font-weight: bold;
	}
	.product-info-box .totalpriceandcurrency{
		margin-top: 0.5em;
		font-size: 80%;
	}
	.product-info-box form{
		margin-top: 0.5em;
	}
	.product-info-box form .button{
		margin-top: 5px;
		width: 100%;
	}


	/* -------------------------------- imagegrid ---------------------------------------------- */

	.img-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}



	.img-grid .img-grid-cell {
		width: 125px;
		height: 125px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		margin: 0.25rem;
		line-height: 0;
	}

	.box .img-grid .img-grid-cell  {
		width: 125px;
		height: 125px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		margin: 0.25rem;
	}

	.img-grid .img-grid-cell img {
		/*width: 100%;
		height: auto;*/
	}

	/*.img-grid .img-grid-cell img:hover{
		transform: scale(2.0);
	}*/

	.img-grid-cell {
		position: relative;
		border: 0px solid lightgrey;
	}

	.img-grid-cell>.igc-small-footer {
		display: block;
		position: absolute;
		bottom: 0px;
		background-color: rgba(0, 0, 0, 0.75);
		width: 100%;
		line-height: 1;
		padding: 2px 0;
		height: 1em;
		font-size: 1.2rem;
		filter: grayscale(0.20);
	}
	.img-grid-cell:hover .igc-small-footer {
		filter: grayscale(0);
		background-color: rgba(0, 0, 0, 0.50);
	}

	.igc-small-footer>.igc-emo {
		display: inline-block;
		position: absolute;
		right: 0px;

	}
	.igc-small-footer>.igc-totallikes{
		display: none;
		position: absolute;
		left: 0px;
		bottom: 0px;
		color: lightgray;
		padding-bottom: 2px;
		font-family: Verdana;
		font-size: 11px;


	}
	.img-grid-cell:hover .igc-totallikes{
		color: white;
	}
	.igc-small-footer>.igc-totallikes:before{
		content: "+";
	}

	.img-grid-cell-footer {
		display: block;
		position: absolute;
		bottom: 0px;
		background-color: rgba(0, 0, 0, 1);
		width: 100%;
		line-height: 1;
	}

	.img-grid-cell-footer .img-grid-cell-title, .img-grid-cell-footer .img-grid-cell-title-small {
		color: white;
		padding: 0 0.2rem;
		font-size: 90%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.img-grid-cell-footer .img-grid-cell-title-small {
		font-size: 9px;
		font-family: Verdana;
	}



	.img-suggested {
		filter: grayscale(100%);
	}

	.img-suggested:hover {
		filter: grayscale(0%);
	}

	/* -------------------------------- site-overlay ---------------------------------------------- */
	#site-overlay {
		/* Height & width depends on how you want to reveal the overlay (see JS below) */
		height: 100%;
		width: 100%;
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		left: 0;
		top: 0;
		background-color: rgb(0, 0, 0); /* Black fallback color */
		background-color: rgba(0, 0, 0, 0.9); /* Black w/opacity */
		overflow-x: hidden; /* Disable horizontal scroll */
		transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
		display: block;
	}
	#site-overlay-text{
		padding: 2rem;
		background-color: white;
	}
	#site-overlay-buttons{
		padding-top: 1em;
		text-align: center;

	}
	#site-overlay .button{
		padding: 1rem;
	}
	/* -------------------------------- full images ---------------------------------------------- */
			.full-images{

			}
			.full-images .full-image{
				margin-bottom: 2em;
			}
			.full-images-view-more{
				text-align:center;
			}
			 /*.full-images-view-more-button {
				padding: 1rem 4rem;
			}*/

	.preview-images{
		text-align:center;
	}
	.preview-images .image-container {

		display: inline-block;
	}
	.preview-images .preview-image{
		display: inline-block;
		margin-bottom: 2em;
		margin-right: 2em;
	}

	.newmonth{
		font-weight: bold;
		text-align: left;
	}